UNPKG

@ngx-performance-ui/ui

Version:
2,734 lines 88 kB
import * as enLocale from 'date-fns/locale/en';
import * as trLocale from 'date-fns/locale/tr';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import compare from 'just-compare';
import { DomSanitizer } from '@angular/platform-browser';
import { isNullOrUndefined } from 'util';
import { timer, Observable, Subject } from 'rxjs';
import { take, filter, takeUntil } from 'rxjs/operators';
import { __decorate, __metadata } from 'tslib';
import { EventEmitter, Input, Output, Component, ChangeDetectionStrategy, ElementRef, forwardRef, Injector, ViewChild, ViewEncapsulation, ChangeDetectorRef, ContentChild, Renderer2, TemplateRef, Inject, ComponentFactoryResolver, ViewContainerRef, Directive, ApplicationRef, ReflectiveInjector, NgModule } from '@angular/core';
import { NgDatepickerModule } from 'ng2-datepicker';
import { AbstractNgModelComponent, uuid, takeUntilDestroy, LazyLoadScriptService, EventListenerState, LoaderState, takeUntilNotNull, EventListenerRemove, EventListenerAdd, EventListenerScrollVertical, CoreModule } from '@ngx-performance-ui/core';
import { Store, Select, Actions, ofActionDispatched, State, NgxsModule } from '@ngxs/store';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCalendarDay, faInfoCircle, faSearch, faTimes } from '@fortawesome/free-solid-svg-icons';
import { NgxSlickJsModule } from 'ngx-slickjs';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @template T
 */
class AbstractInputComponent extends AbstractNgModelComponent {
    constructor() {
        super(...arguments);
        this.autofocus = false;
        this.autofocusDelay = 0;
        this.id = uuid();
        this.required = false;
        this.hidden = false;
        this.placeholder = '';
        this.type = 'text';
        this.blur = new EventEmitter();
        this.focus = new EventEmitter();
        this.keyup = new EventEmitter();
        this.click = new EventEmitter();
    }
}
AbstractInputComponent.decorators = [
    { type: Component, args: [{
                template: ''
            }] }
];
AbstractInputComponent.propDecorators = {
    autofocus: [{ type: Input }],
    autofocusDelay: [{ type: Input }],
    classes: [{ type: Input }],
    labelText: [{ type: Input }],
    labelClasses: [{ type: Input }],
    id: [{ type: Input }],
    name: [{ type: Input }],
    tabindex: [{ type: Input }],
    required: [{ type: Input }],
    hidden: [{ type: Input }],
    placeholder: [{ type: Input }],
    type: [{ type: Input }],
    blur: [{ type: Output }],
    focus: [{ type: Output }],
    keyup: [{ type: Output }],
    click: [{ type: Output }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class LayoutScroll {
    /**
     * @param {?} payload
     */
    constructor(payload) {
        this.payload = payload;
    }
}
LayoutScroll.type = '[Layout] Scroll';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class ToasterShow {
    /**
     * @param {?} payload
     */
    constructor(payload) {
        this.payload = payload;
    }
}
ToasterShow.type = '[Toaster] Show]';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class AutocompleteComponent extends AbstractInputComponent {
    /**
     * @param {?} injector
     */
    constructor(injector) {
        super(injector);
        this.injector = injector;
        this.items = [];
        this.containerClasses = '';
        this.delay = 200;
        this.select = new EventEmitter();
        this.placeholder = 'Type in here';
        this.autocomplete = 'nop';
        this.showList = false;
        this.inputValue = '';
        this.valueFn = (/**
         * @param {?} value
         * @return {?}
         */
        value => {
            if (!value)
                return value;
            this.inputValue = value.text;
            return value;
        });
        this.trackByFn = (/**
         * @param {?} _
         * @param {?} value
         * @return {?}
         */
        (_, value) => value.text);
    }
    /**
     * @return {?}
     */
    ngOnDestroy() { }
    /**
     * @param {?} event
     * @return {?}
     */
    onBlur(event) {
        timer(this.delay)
            .pipe(takeUntilDestroy(this))
            .subscribe((/**
         * @return {?}
         */
        () => {
            this.showList = false;
            this.inputValue = (this.value || { text: '' }).text;
            this.cdRef.detectChanges();
        }));
        this.blur.emit(event);
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onFocus(event) {
        timer(this.delay)
            .pipe(takeUntilDestroy(this))
            .subscribe((/**
         * @return {?}
         */
        () => {
            this.showList = true;
            this.cdRef.detectChanges();
        }));
        this.focus.emit(event);
    }
    /**
     * @param {?} item
     * @return {?}
     */
    onSelect(item) {
        this.value = item;
        this.select.emit(item);
    }
    /**
     * @param {?} value
     * @return {?}
     */
    onChangeInputValue(value) {
        /** @type {?} */
        const found = this.items.find((/**
         * @param {?} item
         * @return {?}
         */
        item => item.text.toLocaleLowerCase() === value.toLocaleLowerCase()));
        if (found) {
            this.value = found;
            this.inputValue = found.text;
            return;
        }
        if (!value || value === '')
            this.value = undefined;
    }
    /**
     * @return {?}
     */
    clear() {
        this.value = undefined;
        this.inputValue = '';
        this.showList = false;
    }
}
AutocompleteComponent.decorators = [
    { type: Component, args: [{
                selector: 'p-autocomplete',
                template: `
    <div class="autocomplete-container {{ containerClasses }}">
      <label *ngIf="labelText" class="{{ labelClasses }}" [attr.for]="id" [innerHTML]="labelText"></label>
      <p-input
        [(ngModel)]="inputValue"
        (ngModelChange)="onChangeInputValue($event)"
        class="w-100 {{ classes }}"
        [id]="id"
        [attr.type]="type"
        [attr.placeholder]="placeholder"
        [hidden]="hidden"
        [name]="name"
        [disabled]="disabled"
        [attr.tabindex]="tabindex"
        [required]="required"
        [autofocus]="autofocus"
        [autofocusDelay]="autofocusDelay"
        autocomplete="nop"
        (focus)="onFocus($event)"
        (blur)="onBlur($event)"
        (click)="click.emit($event)"
      ></p-input>
      <fa-icon *ngIf="value" [icon]="['fas', 'times']" class="text-secondary" (click)="clear()"></fa-icon>
      <div *ngIf="showList" class="list-group">
        <a
          [pHighlight]="inputValue"
          [pHighlightHide]="true"
          *ngFor="let item of items; trackBy: trackByFn"
          class="list-group-item list-group-item-action"
          [class.list-group-item-secondary]="value?.text === item.text"
          (click)="onSelect(item)"
        >
          {{ item.text }}
        </a>
      </div>
    </div>
  `,
                changeDetection: ChangeDetectionStrategy.OnPush,
                encapsulation: ViewEncapsulation.None,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef((/**
                         * @return {?}
                         */
                        () => AutocompleteComponent)),
                        multi: true,
                    },
                ]
            }] }
];
/** @nocollapse */
AutocompleteComponent.ctorParameters = () => [
    { type: Injector }
];
AutocompleteComponent.propDecorators = {
    items: [{ type: Input }],
    containerClasses: [{ type: Input }],
    delay: [{ type: Input }],
    select: [{ type: Output }],
    placeholder: [{ type: Input }],
    input: [{ type: ViewChild, args: ['input', { read: ElementRef },] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
// https://developers.google.com/chart/interactive/docs/
class GoogleChartComponent {
    /**
     * @param {?} lazyLoadScriptService
     */
    constructor(lazyLoadScriptService) {
        this.lazyLoadScriptService = lazyLoadScriptService;
        this.chartType = 'AreaChart';
        this.style = { width: '100%', height: 'auto' };
        this.containerClasses = '';
        this.drawFn = (/**
         * @param {?} _
         * @return {?}
         */
        _ => {
            if (this.dataTable && this.dataTable.length) {
                this.data = google.visualization.arrayToDataTable(this.dataTable);
            }
            else if (this.columns && this.columns.length && this.rows && this.rows.length) {
                this.data = new google.visualization.DataTable();
                this.columns.forEach((/**
                 * @param {?} column
                 * @return {?}
                 */
                column => this.data.addColumn(column.type, column.label)));
                this.data.addRows(this.rows);
            }
            else {
                console.error('Must set datatable or columns and rows inputs');
                return;
            }
            this.chart = new google.visualization[this.chartType](this.chartContainer.nativeElement);
            this.chart.draw(this.data, this.options);
            this.ready.emit();
        });
        this.ready = new EventEmitter();
    }
    /**
     * @return {?}
     */
    get packages() {
        if (this.chartType === 'AnnotationChart')
            return [this.chartType.toLowerCase()];
        return ['corechart'];
    }
    /**
     * @return {?}
     */
    ngAfterViewInit() {
        this.lazyLoadScriptService
            .loadScript('https://www.gstatic.com/charts/loader.js')
            .pipe(take(1))
            .subscribe((/**
         * @param {?} _
         * @return {?}
         */
        _ => {
            google.charts.load('current', { packages: this.packages });
            google.charts.setOnLoadCallback(this.drawFn);
        }));
    }
}
GoogleChartComponent.decorators = [
    { type: Component, args: [{
                selector: 'p-google-chart',
                template: `
    <div #chartContainer class="{{ containerClasses }}" [ngStyle]="style"></div>
  `,
                changeDetection: ChangeDetectionStrategy.OnPush,
                encapsulation: ViewEncapsulation.None
            }] }
];
/** @nocollapse */
GoogleChartComponent.ctorParameters = () => [
    { type: LazyLoadScriptService }
];
GoogleChartComponent.propDecorators = {
    chartType: [{ type: Input }],
    dataTable: [{ type: Input }],
    columns: [{ type: Input }],
    rows: [{ type: Input }],
    options: [{ type: Input }],
    style: [{ type: Input }],
    containerClasses: [{ type: Input }],
    drawFn: [{ type: Input }],
    ready: [{ type: Output }],
    chartContainer: [{ type: ViewChild, args: ['chartContainer',] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class AnnotationChartComponent {
    /**
     * @param {?} store
     */
    constructor(store) {
        this.store = store;
        // https://developers.google.com/chart/interactive/docs/gallery/annotationchart
        this.annotationChartColumns = [
            { type: 'date', label: 'Date' },
            { type: 'number', label: 'Kepler-22b mission' },
            { type: 'string', label: 'Kepler title' },
            { type: 'string', label: 'Kepler text' },
            { type: 'number', label: 'Gliese 163 mission' },
            { type: 'string', label: 'Gliese title' },
            { type: 'string', label: 'Gliese text' },
        ];
        this.annotationChartRows = [
            [new Date(2314, 2, 15), 12400, undefined, undefined, 10645, undefined, undefined],
            [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter', 12374, undefined, undefined],
            [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall', 15766, 'Gallantors', 'First Encounter'],
            [
                new Date(2314, 2, 18),
                12284,
                'Lalibertines',
                'Attack on our crew!',
                34334,
                'Gallantors',
                'Statement of shared principles',
            ],
            [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties', 66467, 'Gallantors', 'Mysteries revealed'],
            [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost', 79463, 'Gallantors', 'Omniscience achieved'],
        ];
        this.annotationChartOptions = {
            displayAnnotations: true,
        };
    }
    /**
     * @return {?}
     */
    get chart() {
        return this.annotationChart.chart;
    }
    /**
     * @return {?}
     */
    rangeChangeHandler() {
        google.visualization.events.addListener(this.chart, 'rangechange', (/**
         * @param {?} event
         * @return {?}
         */
        event => {
            console.log('You changed the range to ', event['start'], ' and ', event['end']);
        }));
    }
    /**
     * @return {?}
     */
    clearChart() {
        this.chart.clearChart();
    }
    /**
     * @return {?}
     */
    getContainer() {
        console.log(this.chart.getContainer());
        this.showToaster();
    }
    /**
     * @return {?}
     */
    getSelection() {
        console.log(this.chart.getSelection());
        this.showToaster();
    }
    /**
     * @return {?}
     */
    getVisibleChartRange() {
        console.log(this.chart.getVisibleChartRange());
        this.showToaster();
    }
    /**
     * @param {?} index
     * @return {?}
     */
    hideDataColumns(index) {
        this.chart.hideDataColumns(index);
    }
    /**
     * @param {?} index
     * @return {?}
     */
    showDataColumns(index) {
        this.chart.showDataColumns(index);
    }
    /**
     * @param {?} start
     * @param {?} end
     * @return {?}
     */
    setVisibleChartRange(start, end) {
        this.chart.setVisibleChartRange(start, end);
    }
    /**
     * @return {?}
     */
    showToaster() {
        this.store.dispatch(new ToasterShow({ body: 'Check the console' }));
    }
}
AnnotationChartComponent.decorators = [
    { type: Component, args: [{
                selector: 'p-annotation-chart',
                template: `
    <p-google-chart
      #annotationChart
      chartType="AnnotationChart"
      [columns]="annotationChartColumns"
      [rows]="annotationChartRows"
      [options]="annotationChartOptions"
      (ready)="rangeChangeHandler()"
    ></p-google-chart>

    <div *ngIf="chart" class="row mt-2">
      <div class="col-12">
        <h4>Methods</h4>
        <button (click)="clearChart()" class="btn btn-sm btn-secondary m-1">clearChart()</button>
        <button (click)="hideDataColumns([1, 2, 3])" class="btn btn-sm btn-secondary m-1">
          hideDataColumns(columnIndexes)
        </button>
        <button (click)="showDataColumns([1, 2, 3])" class="btn btn-sm btn-secondary m-1">
          showDataColumns(columnIndexes)
        </button>
        <button (click)="getContainer()" class="btn btn-sm btn-secondary m-1">getContainer()</button>
        <button (click)="getSelection()" class="btn btn-sm btn-secondary m-1">getSelection()</button>
        <button (click)="getVisibleChartRange()" class="btn btn-sm btn-secondary m-1">getVisibleChartRange()</button>
        <button
          (click)="setVisibleChartRange(annotationChartRows[0][0], annotationChartRows[1][0])"
          class="btn btn-sm btn-secondary m-1"
        >
          setVisibleChartRange(start, end)
        </button>
      </div>
    </div>
  `,
                changeDetection: ChangeDetectionStrategy.OnPush,
                encapsulation: ViewEncapsulation.None
            }] }
];
/** @nocollapse */
AnnotationChartComponent.ctorParameters = () => [
    { type: Store }
];
AnnotationChartComponent.propDecorators = {
    annotationChart: [{ type: ViewChild, args: ['annotationChart',] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DatePickerComponent extends AbstractNgModelComponent {
    /**
     * @param {?} injector
     */
    constructor(injector) {
        super(injector);
        this.injector = injector;
        this.locale = 'tr';
        this.position = 'bottom-right';
        this.barTitleIfEmpty = 'Click to select a date';
        this.placeholder = 'Click to select a date';
        this.addClass = 'form-control';
        this.labelClass = '';
        this.label = 'Start Date';
        this.destroy$ = new Subject();
        this.closable = false;
    }
    /**
     * @return {?}
     */
    get options() {
        return {
            minYear: 1890,
            maxYear: 2040,
            displayFormat: this.displayFormat,
            barTitleFormat: 'MMMM YYYY',
            dayNamesFormat: 'dd',
            firstCalendarDay: 1,
            // 0 - Sunday, 1 - Monday
            locale: this.locale === 'tr' ? trLocale : enLocale,
            barTitleIfEmpty: this.barTitleIfEmpty,
            placeholder: this.placeholder,
            // HTML input placeholder attribute (default: '')
            addClass: this.addClass,
            // Optional, value to pass on to [ngClass] on the input field
            fieldId: `p-date-picker-${uuid()}`,
        };
    }
    /**
     * @return {?}
     */
    get displayFormat() {
        return this.locale === 'tr' ? 'dd.MM.yyyy' : 'MMM d, y';
    }
    /**
     * @return {?}
     */
    get date() {
        return this.value ? new Date(this.value) : null;
    }
    /**
     * @private
     * @return {?}
     */
    subscribeToEvents() {
        this.click$
            .pipe(takeUntil(this.destroy$), filter((/**
         * @param {?} event
         * @return {?}
         */
        event => event &&
            this.closable &&
            !this.group.nativeElement.contains(event.target) &&
            !document.querySelector('#datepicker').contains((/** @type {?} */ (event.target))))))
            .subscribe((/**
         * @return {?}
         */
        () => this.toggle()));
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        this.destroy$.next();
    }
    /**
     * @return {?}
     */
    onClick() {
        if (this.datePicker.isOpened)
            return;
        this.toggle();
    }
    /**
     * @return {?}
     */
    toggle() {
        if (this.datePicker.isOpened) {
            this.hide();
        }
        else {
            this.show();
        }
        setTimeout((/**
         * @return {?}
         */
        () => this.cdRef.detectChanges()), 0);
    }
    /**
     * @return {?}
     */
    show() {
        this.flip();
        this.datePicker.toggle();
        this.closable = false;
        this.subscribeToEvents();
        setTimeout((/**
         * @return {?}
         */
        () => {
            this.closable = true;
        }), 500);
    }
    /**
     * @return {?}
     */
    hide() {
        this.datePicker.toggle();
        this.destroy$.next();
    }
    /**
     * @return {?}
     */
    flip() {
        const { bottom, top } = ((/** @type {?} */ (this.group.nativeElement))).getBoundingClientRect();
        const { innerHeight } = window;
        if (bottom + 330 > innerHeight && this.position.indexOf('bottom') > -1) {
            this.position = (/** @type {?} */ (this.position.replace('bottom', 'top')));
            this.cdRef.detectChanges();
        }
        else if (top - 330 < 0 && this.position.indexOf('top') > -1) {
            this.position = (/** @type {?} */ (this.position.replace('top', 'bottom')));
            this.cdRef.detectChanges();
        }
    }
    /**
     * @return {?}
     */
    clear() {
        this.value = null;
    }
}
DatePickerComponent.decorators = [
    { type: Component, args: [{
                selector: 'p-datepicker',
                template: "<div class=\"datepicker-container\">\n  <label class=\"{{ labelClass }}\" [attr.for]=\"options.fieldId\">{{ label }}</label>\n  <div #group class=\"input-group\">\n    <input\n      type=\"text\"\n      class=\"form-control bg-white\"\n      [readonly]=\"true\"\n      [attr.placeholder]=\"placeholder\"\n      [value]=\"date | date: displayFormat\"\n      (click)=\"onClick()\"\n    />\n    <fa-icon *ngIf=\"value\" [icon]=\"['fas', 'times']\" class=\"text-secondary\" (click)=\"clear()\"></fa-icon>\n    <div class=\"input-group-prepend\">\n      <span class=\"input-group-text bg-white\" (click)=\"toggle()\">\n        <fa-icon *ngIf=\"value\" [icon]=\"['fas', 'calendar-day']\"></fa-icon>\n      </span>\n    </div>\n  </div>\n  <ng-datepicker\n    id=\"datepicker\"\n    #datePicker\n    [headless]=\"true\"\n    [position]=\"position\"\n    [options]=\"options\"\n    [(ngModel)]=\"value\"\n    (ngModelChange)=\"destroy$.next()\"\n  >\n  </ng-datepicker>\n</div>\n",
                changeDetection: ChangeDetectionStrategy.OnPush,
                encapsulation: ViewEncapsulation.None,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef((/**
                         * @return {?}
                         */
                        () => DatePickerComponent)),
                        multi: true,
                    },
                ]
            }] }
];
/** @nocollapse */
DatePickerComponent.ctorParameters = () => [
    { type: Injector }
];
DatePickerComponent.propDecorators = {
    locale: [{ type: Input }],
    position: [{ type: Input }],
    barTitleIfEmpty: [{ type: Input }],
    placeholder: [{ type: Input }],
    addClass: [{ type: Input }],
    labelClass: [{ type: Input }],
    label: [{ type: Input }],
    datePicker: [{ type: ViewChild, args: ['datePicker',] }],
    group: [{ type: ViewChild, args: ['group', { read: ElementRef },] }]
};
__decorate([
    Select(EventListenerState.getOne('click')),
    __metadata("design:type", Observable)
], DatePickerComponent.prototype, "click$", void 0);

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class CheckboxComponent extends AbstractInputComponent {
    /**
     * @return {?}
     */
    onKeyup() {
        this.value = !this.value;
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onChangeValue(event) {
        this.value = !this.value;
        this.click.emit(event);
    }
}
CheckboxComponent.decorators = [
    { type: Component, args: [{
                selector: 'p-checkbox',
                template: `
    <div class="form-group form-checkbox {{ classes }}">
      <input
        type="checkbox"
        [(ngModel)]="value"
        [id]="id"
        [attr.name]="name"
        [hidden]="hidden"
        [disabled]="disabled"
        class="form-check-input {{ classes }}"
        [required]="required"
        (keyup)="keyup.emit($event)"
        (focus)="focus.emit($event)"
        (blur)="blur.emit($event)"
      />

      <label
        *ngIf="labelText"
        [htmlFor]="id"
        (keyup.space)="onKeyup()"
        (click)="onChangeValue($event)"
        tabindex="0"
        class="form-check-label {{ labelClasses }}"
      >
        <p class="mb-0">{{ labelText }}</p>
      </label>
    </div>
  `,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef((/**
                         * @return {?}
                         */
                        () => CheckboxComponent)),
                        multi: true,
                    },
                ],
                changeDetection: ChangeDetectionStrategy.OnPush,
                encapsulation: ViewEncapsulation.None
            }] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class InputComponent extends AbstractInputComponent {
    constructor() {
        super(...arguments);
        this._textMask = {
            mask: false,
        };
        this.autocomplete = 'on';
        this.autocorrect = false;
        this.spellcheck = false;
        this.change = new EventEmitter();
        this.blur = new EventEmitter();
        this.focus = new EventEmitter();
        this.keyup = new EventEmitter();
        this.click = new EventEmitter();
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set textMask(value) {
        this._textMask = Object.assign({}, value, { mask: value.mask || false, guide: value.guide || false, keepCharPositionsMask: value.keepCharPositionsMask || false });
    }
    /**
     * @return {?}
     */
    get textMask() {
        return this._textMask;
    }
}
InputComponent.decorators = [
    { type: Component, args: [{
                selector: 'p-input',
                template: `
    <label *ngIf="labelText" class="{{ labelClasses }}" [attr.for]="id" [innerHTML]="labelText"></label>
    <input
      #input
      class="form-control {{ classes }}"
      [(ngModel)]="value"
      [id]="id"
      [attr.type]="type"
      [attr.placeholder]="placeholder"
      [textMask]="textMask"
      [hidden]="hidden"
      [name]="name"
      [disabled]="disabled"
      [min]="'' + min"
      [max]="'' + max"
      [minlength]="minlength"
      [maxlength]="maxlength"
      [attr.tabindex]="tabindex"
      [attr.autocomplete]="autocomplete"
      [attr.autocorrect]="autocorrect"
      [attr.spellcheck]="spellcheck"
      [required]="required"
      [autofocus]="autofocus"
      [autofocusDelay]="autofocusDelay"
      (keyup)="keyup.emit($event)"
      (focus)="focus.emit($event)"
      (blur)="blur.emit($event)"
      (click)="click.emit($event)"
    />
    <small *ngIf="helpText" class="form-text text-muted {{ helpTextClasses }}" [innerHTML]="helpText"></small>
  `,
                changeDetection: ChangeDetectionStrategy.OnPush,
                encapsulation: ViewEncapsulation.None,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef((/**
                         * @return {?}
                         */
                        () => InputComponent)),
                        multi: true,
                    },
                ]
            }] }
];
InputComponent.propDecorators = {
    textMask: [{ type: Input }],
    helpText: [{ type: Input }],
    helpTextClasses: [{ type: Input }],
    min: [{ type: Input }],
    max: [{ type: Input }],
    minlength: [{ type: Input }],
    maxlength: [{ type: Input }],
    autocomplete: [{ type: Input }],
    autocorrect: [{ type: Input }],
    spellcheck: [{ type: Input }],
    change: [{ type: Output }],
    blur: [{ type: Output }],
    focus: [{ type: Output }],
    keyup: [{ type: Output }],
    click: [{ type: Output }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class RadioComponent extends AbstractNgModelComponent {
    constructor() {
        super(...arguments);
        this.id = uuid();
        this.name = 'radio';
    }
}
RadioComponent.decorators = [
    { type: Component, args: [{
                selector: 'p-radio',
                template: `
    <div class="custom-control custom-radio custom-control-inline {{ classes }}">
      <input
        [attr.id]="id"
        [attr.name]="name"
        [value]="radioValue"
        [disabled]="disabled"
        [(ngModel)]="value"
        type="radio"
        class="custom-control-input"
      />
      <label class="custom-control-label" [attr.for]="id"><ng-content></ng-content></label>
    </div>
  `,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef((/**
                         * @return {?}
                         */
                        () => RadioComponent)),
                        multi: true,
                    },
                ],
                changeDetection: ChangeDetectionStrategy.Default,
                encapsulation: ViewEncapsulation.None
            }] }
];
RadioComponent.propDecorators = {
    classes: [{ type: Input }],
    id: [{ type: Input }],
    name: [{ type: Input }],
    radioValue: [{ type: Input }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class SpinnerComponent extends AbstractInputComponent {
    constructor() {
        super(...arguments);
        this.min = 1;
        this.max = 100;
        this.buttonClass = 'btn btn-secondary';
        this.increaseLabel = '+';
        this.decreaseLabel = '-';
        this.step = 1;
        this.valueLimitFn = (/**
         * @param {?} value
         * @return {?}
         */
        (value) => {
            if (value > this.max)
                return this.max;
            if (value < this.min)
                return this.min;
            return false;
        });
    }
    /**
     * @return {?}
     */
    get defaultValue() {
        return this.min;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    onClick(value) {
        this.value = value;
    }
}
SpinnerComponent.decorators = [
    { type: Component, args: [{
                selector: 'p-spinner',
                template: `
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <button type="button" class="{{ buttonClass }}" (click)="onClick(value - step)" [disabled]="disabled">
          {{ decreaseLabel }}
        </button>
      </div>
      <input
        type="number"
        class="form-control text-center {{ classes }}"
        [(ngModel)]="value"
        [id]="id"
        [hidden]="hidden"
        [name]="name"
        [disabled]="disabled"
        [min]="min"
        [max]="max"
        [attr.tabindex]="tabindex"
        [required]="required"
        [autofocus]="autofocus"
        [autofocusDelay]="autofocusDelay"
        (keyup)="keyup.emit($event)"
        (focus)="focus.emit($event)"
        (blur)="blur.emit($event)"
      />
      <div class="input-group-append">
        <button type="button" class="{{ buttonClass }}" (click)="onClick(value + step)" [disabled]="disabled">
          {{ increaseLabel }}
        </button>
      </div>
    </div>
  `,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef((/**
                         * @return {?}
                         */
                        () => SpinnerComponent)),
                        multi: true,
                    },
                ],
                changeDetection: ChangeDetectionStrategy.OnPush,
                encapsulation: ViewEncapsulation.None
            }] }
];
SpinnerComponent.propDecorators = {
    min: [{ type: Input }],
    max: [{ type: Input }],
    buttonClass: [{ type: Input }],
    increaseLabel: [{ type: Input }],
    decreaseLabel: [{ type: Input }],
    step: [{ type: Input }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class TextAreaComponent extends AbstractInputComponent {
    constructor() {
        super(...arguments);
        this.autosize = true;
        this.rows = 1;
        this.cols = 20;
        this.change = new EventEmitter();
        this.blur = new EventEmitter();
        this.focus = new EventEmitter();
        this.keyup = new EventEmitter();
        this.click = new EventEmitter();
    }
}
TextAreaComponent.decorators = [
    { type: Component, args: [{
                selector: 'p-textarea',
                template: `
    <label *ngIf="labelText" class="{{ labelClasses }}" [attr.for]="id" [innerHTML]="labelText"></label>
    <textarea
      class="form-control {{ classes }}"
      [(ngModel)]="value"
      [autosize]="autosize"
      [rows]="rows"
      [cols]="cols"
      [id]="id"
      [attr.placeholder]="placeholder"
      [hidden]="hidden"
      [name]="name"
      [disabled]="disabled"
      [minlength]="minlength"
      [maxlength]="maxlength"
      [attr.tabindex]="tabindex"
      [required]="required"
      [autofocus]="autofocus"
      [autofocusDelay]="autofocusDelay"
      (keyup)="keyup.emit($event)"
      (focus)="focus.emit($event)"
      (blur)="blur.emit($event)"
      (click)="click.emit($event)"
    ></textarea>
    <small *ngIf="helpText" class="form-text text-muted {{ helpTextClasses }}" [innerHTML]="helpText"></small>
  `,
                changeDetection: ChangeDetectionStrategy.OnPush,
                encapsulation: ViewEncapsulation.None,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef((/**
                         * @return {?}
                         */
                        () => TextAreaComponent)),
                        multi: true,
                    },
                ]
            }] }
];
TextAreaComponent.propDecorators = {
    autosize: [{ type: Input }],
    rows: [{ type: Input }],
    cols: [{ type: Input }],
    helpText: [{ type: Input }],
    helpTextClasses: [{ type: Input }],
    minlength: [{ type: Input }],
    maxlength: [{ type: Input }],
    change: [{ type: Output }],
    blur: [{ type: Output }],
    focus: [{ type: Output }],
    keyup: [{ type: Output }],
    click: [{ type: Output }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class ListboxComponent extends AbstractNgModelComponent {
    /**
     * @param {?} injector
     */
    constructor(injector) {
        super(injector);
        this.injector = injector;
        this.items = [];
        this.classes = '';
        this.activeClass = 'active';
        this.title = '';
        this.isFilterShow = true;
        this.filterPlaceholder = '';
        this.multiple = false;
        this.filterValue = '';
        this.trackByFn = (/**
         * @param {?} index
         * @param {?} item
         * @return {?}
         */
        (index, item) => item.text || index);
    }
    /**
     * @param {?} item
     * @return {?}
     */
    onClick(item) {
        if (!this.multiple) {
            compare(this.value, item) ? (this.value = (/** @type {?} */ ({}))) : (this.value = item);
            return;
        }
        if (!this.value || !Array.isArray(this.value) || !this.value.length)
            this.value = [];
        /** @type {?} */
        const index = this.value.findIndex((/**
         * @param {?} val
         * @return {?}
         */
        val => compare(val, item)));
        if (index > -1) {
            this.value = [...this.value.slice(0, index), ...this.value.slice(index + 1)];
        }
        else {
            /** @type {?} */
            const cloneItem = Object.assign({}, item);
            delete cloneItem.classes;
            this.value = [...this.value, cloneItem];
        }
        this.cdRef.detectChanges();
    }
    /**
     * @param {?} item
     * @return {?}
     */
    isActive(item) {
        if (!this.multiple) {
            return compare(this.value, item);
        }
        if (!this.value || !((/** @type {?} */ (this.value))).length)
            return;
        /** @type {?} */
        const cloneItem = Object.assign({}, item);
        delete cloneItem.classes;
        return ((/** @type {?} */ (this.value))).findIndex((/**
         * @param {?} val
         * @return {?}
         */
        val => compare(val, cloneItem))) > -1;
    }
}
ListboxComponent.decorators = [
    { type: Component, args: [{
                selector: 'p-listbox',
                template: `
    <div class="card">
      <div class="card-header">
        <div class="col-12 px-0">
          <h5>{{ title }}</h5>
        </div>
        <div *ngIf="isFilterShow" class="col-12 px-0 mt-2">
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text"><fa-icon [icon]="['fas', 'search']"></fa-icon></span>
            </div>
            <p-input
              [(ngModel)]="filterValue"
              [attr.placeholder]="filterPlaceholder"
              classes="bg-transparent"
              class="w-75"
            ></p-input>
          </div>
        </div>
      </div>
      <ul class="list-group  list-group-flush {{ classes }}">
        <li
          *pFor="
            let item of items;
            filterValue: filterValue;
            filterContain: true;
            filterKey: 'text';
            trackBy: trackByFn
          "
          [ngClass]="[isActive(item) ? activeClass : '']"
          (click)="onClick(item)"
          style="cursor: pointer"
          class="list-group-item {{ item.classes }}"
        >
          {{ item.text }}
        </li>
      </ul>
    </div>
  `,
                encapsulation: ViewEncapsulation.None,
                changeDetection: ChangeDetectionStrategy.OnPush,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef((/**
                         * @return {?}
                         */
                        () => ListboxComponent)),
                        multi: true,
                    },
                ]
            }] }
];
/** @nocollapse */
ListboxComponent.ctorParameters = () => [
    { type: Injector }
];
ListboxComponent.propDecorators = {
    items: [{ type: Input }],
    classes: [{ type: Input }],
    activeClass: [{ type: Input }],
    title: [{ type: Input }],
    isFilterShow: [{ type: Input }],
    filterPlaceholder: [{ type: Input }],
    multiple: [{ type: Input }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class ModalComponent {
    /**
     * @param {?} injector
     * @param {?} renderer
     */
    constructor(injector, renderer) {
        this.injector = injector;
        this.renderer = renderer;
        this.centered = true;
        this.modalClass = '';
        this.size = 'md';
        this.visibleChange = new EventEmitter();
        this._visible = false;
        this.closable = false;
        this.destroy$ = new Subject();
        this.cdRef = injector.get(ChangeDetectorRef);
    }
    /**
     * @return {?}
     */
    get visible() {
        return this._visible;
    }
    /**
     * @param {?} value
     * @return {?}
     */
    set visible(value) {
        if (value) {
            this.setVisible(value);
            this.listen();
        }
        else {
            this.closable = false;
            this.renderer.addClass(this.modalContent.nativeElement, 'fade-out-top');
            setTimeout((/**
             * @return {?}
             */
            () => {
                this.setVisible(value);
                this.renderer.removeClass(this.modalContent.nativeElement, 'fade-out-top');
                this.ngOnDestroy();
            }), 400);
        }
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        this.destroy$.next();
    }
    /**
     * @param {?} value
     * @return {?}
     */
    setVisible(value) {
        this._visible = value;
        this.visibleChange.emit(value);
        value
            ? timer(500)
                .pipe(take(1))
                .subscribe((/**
             * @param {?} _
             * @return {?}
             */
            _ => (this.closable = true)))
            : (this.closable = false);
    }
    /**
     * @return {?}
     */
    listen() {
        this.click$
            .pipe(takeUntil(this.destroy$), filter((/**
         * @param {?} event
         * @return {?}
         */
        (event) => event && this.closable && this.modalContent && !this.modalContent.nativeElement.contains(event.target))))
            .subscribe((/**
         * @param {?} _
         * @return {?}
         */
        _ => {
            this.visible = false;
        }));
        this.keyup$
            .pipe(takeUntil(this.destroy$), filter((/**
         * @param {?} key
         * @return {?}
         */
        (key) => key && key.code === 'Escape' && this.closable)))
            .subscribe((/**
         * @param {?} _
         * @return {?}
         */
        _ => {
            this.visible = false;
        }));
    }
}
ModalComponent.decorators = [
    { type: Component, args: [{
                selector: 'p-modal',
                template: "<!-- Modal -->\n<div\n  id=\"p-modal\"\n  tabindex=\"-1\"\n  class=\"modal fade {{ modalClass }}\"\n  [class.show]=\"visible\"\n  [style.display]=\"visible ? 'block' : 'none'\"\n  [style.padding-right.px]=\"'15'\"\n>\n  <perfect-scrollbar style=\"max-height: auto;\" [config]=\"{ suppressScrollX: true }\">\n    <div\n      style=\"position: relative; max-width: 600px;\"\n      id=\"p-modal-container\"\n      class=\"modal-dialog modal-{{ size }} fade-in-top\"\n      [class.modal-dialog-centered]=\"centered\"\n      #pModalContent\n    >\n      <div #content id=\"p-modal-content\" class=\"modal-content\">\n        <div id=\"p-modal-header\" class=\"modal-header\">\n          <ng-container *ngTemplateOutlet=\"pHeader\"></ng-container>\n\n          <button id=\"p-modal-close-button\" type=\"button\" class=\"close\" (click)=\"visible = false\">\n            <span aria-hidden=\"true\">&times;</span>\n          </button>\n        </div>\n        <div id=\"p-modal-body\" class=\"modal-body\">\n          <ng-container *ngTemplateOutlet=\"pBody\"></ng-container>\n\n          <div id=\"p-modal-footer\" class=\"modal-footer\">\n            <ng-container *ngTemplateOutlet=\"pFooter\"></ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  </perfect-scrollbar>\n\n  <ng-content></ng-content>\n</div>\n",
                changeDetection: ChangeDetectionStrategy.OnPush,
                encapsulation: ViewEncapsulation.None
            }] }
];
/** @nocollapse */
ModalComponent.ctorParameters = () => [
    { type: Injector },
    { type: Renderer2 }
];
ModalComponent.propDecorators = {
    visible: [{ type: Input }],
    centered: [{ type: Input }],
    modalClass: [{ type: Input }],
    size: [{ type: Input }],
    visibleChange: [{ type: Output }],
    pHeader: [{ type: ContentChild, args: ['pHeader',] }],
    pBody: [{ type: ContentChild, args: ['pBody',] }],
    pFooter: [{ type: ContentChild, args: ['pFooter',] }],
    modalContent: [{ type: ViewChild, args: ['pModalContent',] }]
};
__decorate([
    Select(EventListenerState.getOne('click')),
    __metadata("design:type", Observable)
], ModalComponent.prototype, "click$", void 0);
__decorate([
    Select(EventListenerState.getOne('keyup')),
    __metadata("design:type", Observable)
], ModalComponent.prototype, "keyup$", void 0);

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class PaginationComponent extends AbstractNgModelComponent {
    constructor() {
        super(...arguments);
        this.alignment = 'start';
        this.classes = '';
        this.paginationRange = 7;
        this.totalPages = 15;
        this.previousLabel = 'Previous';
        this.nextLabel = 'Next';
        this.size = 'sm';
    }
    /**
     * @return {?}
     */
    get pages() {
        if (this.paginationRange >= this.totalPages) {
            return Array.apply(null, { length: this.totalPages }).map((/**
             * @param {?} _
             * @param {?} index
             * @return {?}
             */
            (_, index) => ({ value: index + 1 })));
        }
        /** @type {?} */
        const halfWay = Math.floor(this.paginationRange / 2);
        /** @type {?} */
        const isStart = this.value <= halfWay;
        /** @type {?} */
        const isEnd = this.totalPages - this.value < halfWay;
        return Array.apply(null, { length: this.paginationRange }).map((/**
         * @param {?} _
         * @param {?} index
         * @return {?}
         */
        (_, index) => {
            /** @type {?} */
            const i = index + 1;
            if (isStart) {
                return {
                    value: halfWay + 2 >= i ? i : this.totalPages - (this.paginationRange - i),
                    label: halfWay + 2 === i ? '...' : null,
                };
            }
            if (isEnd) {
                return {
                    value: this.paginationRange - halfWay - 2 < i ? this.totalPages - (this.paginationRange - i) : i,
                    label: halfWay === i ? '...' : null,
                };
            }
            return {
                value: i === 1
                    ? 1
                    : i === this.paginationRange
                        ? this.totalPages
                        : this.value + (halfWay - this.paginationRange + i),
                label: 2 === i || this.paginationRange - 1 === i ? '...' : null,
            };
        }));
    }
    /**
     * @param {?} __0
     * @return {?}
     */
    ngOnChanges({ ngModel }) {
        if (!ngModel)
            return;
        if (!ngModel.currentValue)
            setTimeout((/**
             * @param {?} _
             * @return {?}
             */
            _ => (this.value = 1)), 0);
        if (ngModel.currentValue > this.totalPages || ngModel.currentValue < 1)
            setTimeout((/**
             * @param {?} _
             * @return {?}
             */
            _ => (this.value = ngModel.previousValue)), 0);
    }
    /**
     * @param {?} value
     * @return {?}
     */
    change(value) {
        if (value < 1 || value > this.totalPages)
            return;
        this.value = value;
    }
}
PaginationComponent.decorators = [
    { type: Component, args: [{
                selector: 'p-pagination',
                template: `
    <ul class="pagination pagination-{{ size }} justify-content-{{ alignment }}">
      <li [class.disabled]="value === 1" (click)="change(value - 1)" class="page-item">
        <span class="page-link">{{ previousLabel }}</span>
      </li>
      <li
        *ngFor="let page of pages"
        [class.active]="page.value === value"
        (click)="change(page.value)"
        class="page-item"
      >
        <span class="page-link">{{ page.label || page.value }}</span>
      </li>
      <li [class.disabled]="value === totalPages" (click)="change(value + 1)" class="page-item">
        <span class="page-link">{{ nextLabel }}</span>
      </li>
    </ul>
  `,
                changeDetection: ChangeDetectionStrategy.OnPush,
                encapsulation: ViewEncapsulation.None,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef((/**
                         * @return {?}
                         */
                        () => PaginationComponent)),
                        multi: true,
                    },
                ]
            }] }
];
PaginationComponent.propDecorators = {
    alignment: [{ type: Input }],
    classes: [{ type: Input }],
    paginationRange: [{ type: Input }],
    totalPages: [{ type: Input }],
    previousLabel: [{ type: Input }],
    nextLabel: [{ type: Input }],
    size: [{ type: Input }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class TooltipComponent {
    /**
     * @param {?} tooltip
     * @param {?} cdRef
     */
    constructor(tooltip, cdRef) {
        this.tooltip = tooltip;
        this.cdRef = cdRef;
        this.style = { position: 'fixed', visibility: 'hidden' };
        this.arrowPart = 5;
    }
    /**
     * @return {?}
     */
    get classes() {
        return `tooltip bs-tooltip-${this.tooltip.placement} show`;
    }
    /**
     * @return {?}
     */
    ngAfterViewInit() {
        setTimeout((/**
         * @return {?}
         */
        () => {
            this.setPosition();
            this.style = Object.assign({}, this.style, { visibility: 'visible' });
            this.cdRef.detectChanges();
        }), 0);
    }
    /**
     * @return {?}
     */
    setPosition() {
        const { left, right, top, bottom, width, height } = this.tooltip.element.getBoundingClientRect();
        const { width: hostWidth, height: hostHeight } = this.container.nativeElement.getBoundingClientRect();
        const { innerHeight, innerWidth } = window;
        switch (this.tooltip.placement) {
            case 'top':
                if (top - hostHeight - this.arrowPart < 0)
                    this.tooltip.placement = 'bottom';
                this.setY(left, top, bottom, width, hostHeight, hostWidth);
                break;
            case 'bottom':
                if (bottom + hostHeight + this.arrowPart > innerHeight)
                    this.tooltip.placement = 'top';
                this.setY(left, top, bottom, width, hostHeight, hostWidth);
                break;
            case 'left':
                if (left - hostWidth - this.arrowPart < 0)
                    this.tooltip.placement = 'right';
                this.setX(left, top, right, height, hostHeight, hostWidth);
                break;
            case 'right':
                if (right + hostWidth + this.arrowPart > innerWidth)
                    this.tooltip.placement = 'left';
                this.setX(left, top, right, height, hostHeight, hostWidth);
                break;
        }
    }
    /**
     * @param {?} left
     * @param {?} top
     * @param {?} bottom
     * @param {?} width
     * @param {?} hostHeight
     * @param {?} hostWidth
     * @return {?}
     */
    setY(left, top, bottom, width, hostHeight, hostWidth) {
        this.style.left = left + (width - hostWidth) / 2 + 'px';
        this.tooltip.placement === 'top'
            ? (this.style.top = top - hostHeight - this.arrowPart + 'px')
            : (this.style.top = bottom + this.arrowPart + 'px');
    }
    /**
     * @param {?} left
     * @param {?} top
     * @param {?} right
     * @param {?} height
     * @param {?} hostHeight
     * @param {?} hostWidth
     * @return {?}
     */
    setX(left, top, right, height, hostHeight, hostWidth) {
        this.style.top = top + (height - hostHeight) / 2 + 'px';
        this.tooltip.placement === 'left'
            ? (this.style.left = left - hostWidth - this.arrowPart + 'px')
            : (this.style.left = right + this.arrowPart + 'px');
    }
}
TooltipComponent.decorators = [
    { type: Component, args: [{
                selector: 'p-tooltip',
                host: {
                    role: 'tooltip',
                },
                template: `
    <div #container class="{{ classes }}" [ngStyle]="style">
      <div class="tooltip-arrow arrow"></div>
      <div class="tooltip-inner"><ng-content></ng-content></div>
    </div>
  `,
                changeDetection: ChangeDetectionStrategy.OnPush,
                encapsulation: ViewEncapsulation.None
            }] }
];
/** @nocollapse */
TooltipComponent.ctorParameters = () => [
    { type: undefined, decorators: [{ type: Inject, args: ['TOOLTIP_PROVIDER',] }] },
    { type: ChangeDetectorRef }
];
TooltipComponent.propDecorators = {
    container: [{ type: ViewChild, args: ['container',] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class PopoverComponent extends TooltipComponent {
    /**
     * @param {?} popover
     * @param {?} cdRef
     */
    constructor(popover, cdRef) {
        super(popover, cdRef);
        this.popover = popover;
        this.cdRef = cdRef;
        this.arrowStyle = {};
        this.arrowPart = 10;
    }
    /**
     * @return {?}
     */
    get classes() {
        return `popover fade bs-popover-${this.popover.placement} show`;
    }
    /**
     * @return {?}
     */
    ngAfterViewInit() {
        setTimeout((/**
         * @return {?}
         */
        () => {
            this.setPosition();
            this.style = Object.assign({}, this.style, { visibility: 'visible' });
            this.cdRef.detectChanges();
        }), 0);
    }
    /**
     * @return {?}
     */
    setPosition() {
        const { left, right, top, bottom, width, height } = this.popover.element.getBoundingClientRect();
        const { width: hostWidth, height: hostHeight } = this.container.nativeElement.getBoundingClientRect();
        const { innerHeight, innerWidth } = window;
        switch (this.popover.placement) {
            case 'top':
                if (top - hostHeight - this.arrowPart < 0)
                    this.popover.placement = 'bottom';
                this.setY(left, top, bottom, width, hostHeight, hostWidth);
                this.arrowStyle.left = hostWidth / 2 - 12 + 'px';
                break;
            case 'bottom':
                if (bottom + hostHeight + this.arrowPart > innerHeight)
                    this.popover.placement = 'top';
                this.setY(left, top, bottom, width, hostHeight, hostWidth);
                this.arrowStyle.left = hostWidth / 2 - 12 + 'px';
                break;
            case 'left':
                if (left - hostWidth - this.arrowPart < 0)
                    this.popover.placement = 'right';
                this.setX(left, top, right, height, hostHeight, hostWidth);
                this.arrowStyle.top = hostHeight / 2 - 12 + 'px';
                break;
            case 'right':
                if (right + hostWidth + this.arrowPart > innerWidth)
                    this.popover.placement = 'left';
                this.setX(left, top, right, height, hostHeight, hostWidth);
                this.arrowStyle.top = hostHeight / 2 - 12 + 'px';
                break;
        }
    }
}
PopoverComponent.decorators = [
    { type: Component, args: [{
                selector: 'p-popover',
                template: `
    <div #container [ngStyle]="style" class="{{ classes }}">
      <div [ngStyle]="arrowStyle" class="arrow"></div>
      <h3 class="popover-header"><ng-content></ng-content></h3>
      <div class="popover-body"><ng-content></ng-content></div>
    </div>
  `
            }] }
];
/** @nocollapse */
PopoverComponent.ctorParameters = () => [
    { type: undefined, decorators: [{ type: Inject, args: ['POPOVER_PROVIDER',] }] },
    { type: ChangeDetectorRef }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class ProgressBarComponent {
    /**
     * @param {?} cdRef
     */
    constructor(cdRef) {
        this.cdRef = cdRef;
        this.classes = 'progress-bar bg-danger';
        this.speed = 30;
        this.height = '10px';
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.show$.pipe(takeUntilDestroy(this)).subscribe((/**
         * @param {?} status
         * @return {?}
         */
        status => {
            if (status === true) {
                if (this.show) {
                    setTimeout((/**
                     * @return {?}
                     */
                    () => {
                        this.showFn();
                    }), 900);
                    return;
                }
                this.showFn();
                return;
            }
            this.value = 100;
            this.cdRef.detectChanges();
            setTimeout((/**
             * @return {?}
             */
            () => {
                clearInterval(this.interval);
                this.show = false;
                this.cdRef.detectChanges();
            }), 800);
        }));
    }
    /**
     * @return {?}
     */
    showFn() {
        this.value = 0;
        this.show = true;
        this.cdRef.detectChanges();
        this.setValue();
    }
    /**
     * @return {?}
     */
    setValue() {
        this.interval = setInterval((/**
         * @return {?}
         */
        () => {
            /** @type {?} */
            const plus = Math.random() * this.speed;
            if (this.value < 100 - plus) {
                this.value += plus;
            }
            else {
                this.value += 0.1;
            }
            this.cdRef.detectChanges();
        }), 500);
    }
    /**
     * @return {?}
     */
    ngOnDestroy() { }
}
ProgressBarComponent.decorators = [
    { type: Component, args: [{
                selector: 'p-progress-bar',
                template: `
    <div *ngIf="show" class="progress" [style.height]="height">
      <div [ngStyle]="{ width: value + '%' }" class="{{ classes }}"></div>
    </div>
  `,
                changeDetection: ChangeDetectionStrategy.OnPush,
                encapsulation: ViewEncapsulation.None
            }] }
];
/** @nocollapse */
ProgressBarComponent.ctorParameters = () => [
    { type: ChangeDetectorRef }
];
ProgressBarComponent.propDecorators = {
    classes: [{ type: Input }]
};
__decorate([
    Select(LoaderState.progress),
    __metadata("design:type", Observable)
], ProgressBarComponent.prototype, "show$", void 0);

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class SelectComponent extends AbstractNgModelComponent {
    constructor() {
        super(...arguments);
        this.options = [];
        this.selectClass = '';
        this.compareFn = compare;
        this.select = new EventEmitter();
    }
    /**
     * @param {?} value
     * @return {?}
     */
    onSelect(value) {
        this.select.emit(value);
    }
    /**
     * @param {?} option
     * @return {?}
     */
    getOptionLabel(option) {
        const { label, value } = (/** @type {?} */ (option));
        return label || (typeof value === 'string' || typeof value === 'number' ? String(value) : String(option));
    }
    /**
     * @param {?} _
     * @param {?} option
     * @return {?}
     */
    trackByFn(_, option) {
        const { label, value } = (/** @type {?} */ (option));
        if (value === undefined || value instanceof Object) {
            return label || option;
        }
        return value;
    }
    /**
     * @param {?} option
     * @return {?}
     */
    getOptionValue(option) {
        const { value } = (/** @type {?} */ (option));
        if (value === undefined)
            return option;
        return value;
    }
}
SelectComponent.decorators = [
    { type: Component, args: [{
                selector: 'p-select',
                template: `
    <label [attr.for]="selectId">{{ label }}</label>
    <select
      class="custom-select {{ selectClass }}"
      [(ngModel)]="value"
      [attr.id]="selectId"
      [compareWith]="compareFn"
      (ngModelChange)="onSelect($event)"
    >
      <option [ngValue]="undefined" *ngIf="placeholder">{{ placeholder }}</option>
      <option *ngFor="let option of options; trackBy: trackByFn" [ngValue]="getOptionValue(option)"
        >{{ getOptionLabel(option) }}
      </option>
    </select>
  `,
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef((/**
                         * @return {?}
                         */
                        () => SelectComponent)),
                        multi: true,
                    },
                ],
                changeDetection: ChangeDetectionStrategy.OnPush,
                encapsulation: ViewEncapsulation.None
            }] }
];
SelectComponent.propDecorators = {
    options: [{ type: Input }],
    selectId: [{ type: Input }],
    selectClass: [{ type: Input }],
    compareFn: [{ type: Input }],
    label: [{ type: Input }],
    placeholder: [{ type: Input }],
    select: [{ type: Output }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class ToasterComponent {
    /**
     * @param {?} renderer
     */
    constructor(renderer) {
        this.renderer = renderer;
        this.destroy = new EventEmitter();
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        setTimeout((/**
         * @return {?}
         */
        () => this.close()), this.timeout);
    }
    /**
     * @return {?}
     */
    close() {
        this.renderer.setStyle(this.toast.nativeElement, 'animation', 'moveOutTop .5s');
        setTimeout((/**
         * @return {?}
         */
        () => {
            this.destroy.emit();
        }), 500);
    }
}
ToasterComponent.decorators = [
    { type: Component, args: [{
                selector: 'p-toaster',
                template: `
    <div #toast class="toaster alert alert-{{ type }} alert-dismissible show move-in-top">
      <div *ngIf="header" class="header">
        <div class="icon"><fa-icon [icon]="['fas', 'info-circle']"></fa-icon></div>
        <span class="alert-heading">{{ header }}</span>
      </div>
      <div class="body" [innerHtml]="body"></div>
      <button *ngIf="closeOnClick" type="button" class="close" (click)="close()"><span>&times;</span></button>
    </div>
  `,
                changeDetection: ChangeDetectionStrategy.OnPush
            }] }
];
/** @nocollapse */
ToasterComponent.ctorParameters = () => [
    { type: Renderer2 }
];
ToasterComponent.propDecorators = {
    destroy: [{ type: Output }],
    toast: [{ type: ViewChild, args: ['toast',] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class ToasterContainerComponent {
    /**
     * @param {?} actions
     * @param {?} cdRef
     * @param {?} sanitizer
     * @param {?} resolver
     */
    constructor(actions, cdRef, sanitizer, resolver) {
        this.actions = actions;
        this.cdRef = cdRef;
        this.sanitizer = sanitizer;
        this.resolver = resolver;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.actions.pipe(ofActionDispatched(ToasterShow)).subscribe((/**
         * @param {?} action
         * @return {?}
         */
        (action) => {
            this.create(action.payload);
        }));
    }
    /**
     * @param {?} payload
     * @return {?}
     */
    create(payload) {
        /** @type {?} */
        const factory = this.resolver.resolveComponentFactory(ToasterComponent);
        /** @type {?} */
        const component = this.container.createComponent(factory);
        component.instance.body = payload.body ? this.sanitizer.bypassSecurityTrustHtml(payload.body) : '';
        component.instance.header = payload.header;
        component.instance.closeOnClick = isNullOrUndefined(payload.closeOnClick) ? true : payload.closeOnClick;
        component.instance.type = payload.type || 'primary';
        component.instance.timeout = payload.timeout || 5000;
        this.cdRef.detectChanges();
        component.instance.destroy.pipe(take(1)).subscribe((/**
         * @param {?} _
         * @return {?}
         */
        _ => {
            component.destroy();
        }));
    }
}
ToasterContainerComponent.decorators = [
    { type: Component, args: [{
                selector: 'p-toaster-container',
                template: `
    <div class="toast-container"><ng-container #container></ng-container></div>
  `,
                changeDetection: ChangeDetectionStrategy.OnPush
            }] }
];
/** @nocollapse */
ToasterContainerComponent.ctorParameters = () => [
    { type: Actions },
    { type: ChangeDetectorRef },
    { type: DomSanitizer },
    { type: ComponentFactoryResolver }
];
ToasterContainerComponent.propDecorators = {
    container: [{ type: ViewChild, args: ['container', { read: ViewContainerRef },] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * @param {?=} content
 * @return {?}
 */
function createProjectableNode(content = '') {
    if (typeof content === 'string') {
        return [this.renderer.createText(content)];
    }
    if (content instanceof TemplateRef) {
        return this.vcRef.createEmbeddedView(content, this.context).rootNodes;
    }
    /** @type {?} */
    const factory = this.resolver.resolveComponentFactory(content);
    const { location: { nativeElement }, } = factory.create(this.injector);
    return [nativeElement];
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DropdownDirective {
    /**
     * @param {?} renderer
     * @param {?} elRef
     * @param {?} vcRef
     */
    constructor(renderer, elRef, vcRef) {
        this.renderer = renderer;
        this.elRef = elRef;
        this.vcRef = vcRef;
        this.show = false;
        this.trigger = 'click';
    }
    /**
     * @param {?} v
     * @return {?}
     */
    set pDropdown(v) {
        this._pDropdown = v;
        if (this.dropdownContainer)
            this.remove();
        this.view();
    }
    /**
     * @return {?}
     */
    get pDropdown() {
        return this._pDropdown;
    }
    /**
     * @private
     * @return {?}
     */
    subscribeToMouse() {
        (this.trigger === 'mousemove' ? this.mousemove$ : this.click$)
            .pipe(takeUntilDestroy(this), filter((/**
         * @param {?} event
         * @return {?}
         */
        event => !!event)))
            .subscribe((/**
         * @param {?} event
         * @return {?}
         */
        event => {
            if (this.elRef.nativeElement.contains(event.target)) {
                if (this.show) {
                    this.hide();
                }
                else {
                    // this.renderer.removeClass(this.dropdownContainer, 'collapse-top');
                    this.renderer.removeClass(this.dropdownContainer, 'd-none');
                    this.show = true;
                }
            }
            else if (!this.elRef.nativeElement.contains(event.target) &&
                !this.dropdownContainer.contains((/** @type {?} */ (event.target)))) {
                this.hide();
            }
        }));
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.view();
        this.subscribeToMouse();
    }
    /**
     * @return {?}
     */
    ngOnDestroy() { }
    /**
     * @return {?}
     */
    view() {
        /** @type {?} */
        const element = this.elRef.nativeElement;
        /** @type {?} */
        const elWidth = element.offsetWidth;
        this.container = this.renderer.createElement('div');
        this.renderer.setStyle(this.container, 'position', 'relative');
        this.renderer.addClass(this.container, 'd-inline-block');
        /** @type {?} */
        const parent = this.renderer.parentNode(element);
        this.renderer.appendChild(this.container, element);
        this.dropdownContainer = this.renderer.createElement('div');
        if (!this.show)
            this.renderer.addClass(this.dropdownContainer, 'd-none');
        this.renderer.addClass(this.dropdownContainer, 'card');
        this.renderer.setStyle(this.dropdownContainer, 'position', 'absolute');
        this.renderer.setStyle(this.dropdownContainer, 'min-width', `${elWidth}px`);
        this.renderer.setStyle(this.dropdownContainer, 'padding', `1.25rem`);
        this.renderer.setStyle(this.dropdownContainer, 'z-index', `1000`);
        /** @type {?} */
        const dropdownContentNode = createProjectableNode.call(this, this.pDropdown);
        dropdownContentNode.forEach((/**
         * @param {?} node
         * @return {?}
         */
        node => {
            this.renderer.appendChild(this.dropdownContainer, node);
        }));
        this.renderer.appendChild(this.container, this.dropdownContainer);
        this.renderer.appendChild(parent, this.container);
        // this.renderer.addClass(this.dropdownContainer, 'expand-top');
    }
    /**
     * @return {?}
     */
    hide() {
        // this.renderer.addClass(this.dropdownContainer, 'collapse-top');
        setTimeout((/**
         * @return {?}
         */
        () => {
            this.renderer.addClass(this.dropdownContainer, 'd-none');
        }), 270);
        this.show = false;
    }
    /**
     * @return {?}
     */
    remove() {
        this.dropdownContainer.remove();
    }
}
DropdownDirective.decorators = [
    { type: Directive, args: [{
                selector: '[pDropdown]',
                exportAs: 'pDropdown',
            },] }
];
/** @nocollapse */
DropdownDirective.ctorParameters = () => [
    { type: Renderer2 },
    { type: ElementRef },
    { type: ViewContainerRef }
];
DropdownDirective.propDecorators = {
    pDropdown: [{ type: Input }],
    show: [{ type: Input, args: ['pDropdownShowInitialize',] }],
    trigger: [{ type: Input, args: ['pDropdownTrigger',] }]
};
__decorate([
    Select(EventListenerState.getOne('mousemove')),
    __metadata("design:type", Observable)
], DropdownDirective.prototype, "mousemove$", void 0);
__decorate([
    Select(EventListenerState.getOne('click')),
    __metadata("design:type", Observable)
], DropdownDirective.prototype, "click$", void 0);

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class PopoverDirective {
    /**
     * @param {?} actions
     * @param {?} appRef
     * @param {?} elRef
     * @param {?} renderer
     * @param {?} resolver
     * @param {?} store
     * @param {?} vcRef
     */
    constructor(actions, appRef, elRef, renderer, resolver, store, vcRef) {
        this.actions = actions;
        this.appRef = appRef;
        this.elRef = elRef;
        this.renderer = renderer;
        this.resolver = resolver;
        this.store = store;
        this.vcRef = vcRef;
        this.context = {};
        this.placement = 'top';
        this.trigger = 'click';
        this.destroy$ = new Subject();
    }
    /**
     * @return {?}
     */
    get containerRect() {
        return ((/** @type {?} */ (((/** @type {?} */ (this.popover.location.nativeElement))).childNodes[0]))).getBoundingClientRect();
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        (this.trigger === 'mousemove' ? this.mousemove$ : this.click$)
            .pipe(takeUntilDestroy(this), filter((/**
         * @param {?} event
         * @return {?}
         */
        event => !!event)))
            .subscribe((/**
         * @param {?} event
         * @return {?}
         */
        event => {
            /** @type {?} */
            let onMouseContainerOver = false;
            if (this.popover) {
                this.popover.hostView.detectChanges();
                const { top, bottom, left, right } = this.containerRect;
                const { x, y } = event;
                onMouseContainerOver = top < y && bottom > y && left < x && right > x;
            }
            if (!this.popover && this.elRef.nativeElement.contains(event.target)) {
                this.show();
            }
            else if (this.popover && !this.elRef.nativeElement.contains(event.target) && !onMouseContainerOver) {
                this.hide();
            }
        }));
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        this.hide();
    }
    /**
     * @return {?}
     */
    show() {
        /** @type {?} */
        const element = (/** @type {?} */ (this.elRef.nativeElement));
        /** @type {?} */
        const injector = ReflectiveInjector.resolveAndCreate([
            { provide: 'POPOVER_PROVIDER', useValue: (/** @type {?} */ ({ element, placement: this.placement })) },
        ]);
        /** @type {?} */
        const hedaerNode = createProjectableNode.call(this, this.header);
        /** @type {?} */
        const contentNode = createProjectableNode.call(this, this.content);
        this.popover = this.resolver.resolveComponentFactory(PopoverComponent).create(injector, [hedaerNode, contentNode]);
        this.appRef.attachView(this.popover.hostView);
        this.renderer.appendChild(this.renderer.selectRootElement('p-root', true), ((/** @type {?} */ (this.popover.hostView))).rootNodes[0]);
        this.subscribeTo();
    }
    /**
     * @return {?}
     */
    hide() {
        if (this.popover) {
            this.popover.destroy();
            this.popover = null;
        }
        this.destroy$.next();
        this.store.dispatch(new EventListenerRemove('resize'));
    }
    /**
     * @return {?}
     */
    subscribeTo() {
        this.store.dispatch(new EventListenerAdd('resize'));
        this.resize$
            .pipe(filter((/**
         * @param {?} event
         * @return {?}
         */
        event => !!event)), takeUntilNotNull(this.destroy$))
            .subscribe((/**
         * @param {?} _
         * @return {?}
         */
        _ => this.hide()));
        this.actions
            .pipe(ofActionDispatched(EventListenerScrollVertical), takeUntilNotNull(this.destroy$))
            .subscribe((/**
         * @param {?} _
         * @return {?}
         */
        _ => this.hide()));
    }
}
PopoverDirective.decorators = [
    { type: Directive, args: [{
                selector: '[pPopover]',
                exportAs: 'pPopover',
            },] }
];
/** @nocollapse */
PopoverDirective.ctorParameters = () => [
    { type: Actions },
    { type: ApplicationRef },
    { type: ElementRef },
    { type: Renderer2 },
    { type: ComponentFactoryResolver },
    { type: Store },
    { type: ViewContainerRef }
];
PopoverDirective.propDecorators = {
    content: [{ type: Input, args: ['pPopover',] }],
    context: [{ type: Input, args: ['pPopoverContext',] }],
    header: [{ type: Input, args: ['pPopoverHeader',] }],
    placement: [{ type: Input, args: ['pPopoverPlacement',] }],
    trigger: [{ type: Input, args: ['pPopoverTrigger',] }]
};
__decorate([
    Select(EventListenerState.getOne('mousemove')),
    __metadata("design:type", Observable)
], PopoverDirective.prototype, "mousemove$", void 0);
__decorate([
    Select(EventListenerState.getOne('click')),
    __metadata("design:type", Observable)
], PopoverDirective.prototype, "click$", void 0);
__decorate([
    Select(EventListenerState.getOne('resize')),
    __metadata("design:type", Observable)
], PopoverDirective.prototype, "resize$", void 0);

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class TooltipDirective {
    /**
     * @param {?} actions
     * @param {?} appRef
     * @param {?} elRef
     * @param {?} injector
     * @param {?} renderer
     * @param {?} resolver
     * @param {?} vcRef
     * @param {?} store
     */
    constructor(actions, appRef, elRef, injector, renderer, resolver, vcRef, store) {
        this.actions = actions;
        this.appRef = appRef;
        this.elRef = elRef;
        this.injector = injector;
        this.renderer = renderer;
        this.resolver = resolver;
        this.vcRef = vcRef;
        this.store = store;
        this.context = {};
        this.placement = 'top';
        this.trigger = 'mousemove';
        this.destroy$ = new Subject();
    }
    /**
     * @return {?}
     */
    get containerRect() {
        return ((/** @type {?} */ (((/** @type {?} */ (this.tooltip.location.nativeElement))).childNodes[0]))).getBoundingClientRect();
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        (this.trigger === 'mousemove' ? this.mousemove$ : this.click$)
            .pipe(takeUntilDestroy(this), filter((/**
         * @param {?} event
         * @return {?}
         */
        event => !!event)))
            .subscribe((/**
         * @param {?} event
         * @return {?}
         */
        event => {
            /** @type {?} */
            let onMouseContainerOver = false;
            if (this.tooltip) {
                this.tooltip.hostView.detectChanges();
                const { top, bottom, left, right } = this.containerRect;
                const { x, y } = event;
                onMouseContainerOver = top < y && bottom > y && left < x && right > x;
            }
            if (!this.tooltip && this.elRef.nativeElement.contains(event.target)) {
                this.show();
            }
            else if (this.tooltip && !this.elRef.nativeElement.contains(event.target) && !onMouseContainerOver) {
                this.hide();
            }
        }));
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        this.hide();
    }
    /**
     * @return {?}
     */
    show() {
        /** @type {?} */
        const element = (/** @type {?} */ (this.elRef.nativeElement));
        /** @type {?} */
        const injector = ReflectiveInjector.resolveAndCreate([
            { provide: 'TOOLTIP_PROVIDER', useValue: (/** @type {?} */ ({ element, placement: this.placement })) },
        ]);
        /** @type {?} */
        const projectableNode = createProjectableNode.call(this, this.content);
        this.tooltip = this.resolver.resolveComponentFactory(TooltipComponent).create(injector, [projectableNode]);
        this.appRef.attachView(this.tooltip.hostView);
        this.renderer.appendChild(this.renderer.selectRootElement('p-root', true), ((/** @type {?} */ (this.tooltip.hostView))).rootNodes[0]);
        this.subscribeTo();
    }
    /**
     * @return {?}
     */
    hide() {
        if (this.tooltip) {
            this.tooltip.destroy();
            this.tooltip = null;
        }
        this.destroy$.next();
        this.store.dispatch(new EventListenerRemove('resize'));
    }
    /**
     * @return {?}
     */
    subscribeTo() {
        this.store.dispatch(new EventListenerAdd('resize'));
        this.resize$
            .pipe(filter((/**
         * @param {?} event
         * @return {?}
         */
        event => !!event)), takeUntilNotNull(this.destroy$))
            .subscribe((/**
         * @param {?} _
         * @return {?}
         */
        _ => this.hide()));
        this.actions
            .pipe(ofActionDispatched(EventListenerScrollVertical), takeUntilNotNull(this.destroy$))
            .subscribe((/**
         * @param {?} _
         * @return {?}
         */
        _ => this.hide()));
    }
}
TooltipDirective.decorators = [
    { type: Directive, args: [{
                selector: '[pTooltip]',
                exportAs: 'pTooltip',
            },] }
];
/** @nocollapse */
TooltipDirective.ctorParameters = () => [
    { type: Actions },
    { type: ApplicationRef },
    { type: ElementRef },
    { type: Injector },
    { type: Renderer2 },
    { type: ComponentFactoryResolver },
    { type: ViewContainerRef },
    { type: Store }
];
TooltipDirective.propDecorators = {
    content: [{ type: Input, args: ['pTooltip',] }],
    context: [{ type: Input, args: ['pTooltipContext',] }],
    placement: [{ type: Input, args: ['pTooltipPlacement',] }],
    trigger: [{ type: Input, args: ['pTooltipTrigger',] }]
};
__decorate([
    Select(EventListenerState.getOne('mousemove')),
    __metadata("design:type", Observable)
], TooltipDirective.prototype, "mousemove$", void 0);
__decorate([
    Select(EventListenerState.getOne('click')),
    __metadata("design:type", Observable)
], TooltipDirective.prototype, "click$", void 0);
__decorate([
    Select(EventListenerState.getOne('resize')),
    __metadata("design:type", Observable)
], TooltipDirective.prototype, "resize$", void 0);

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var GoogleChart;
(function (GoogleChart) {
    /**
     * @record
     */
    function Column() { }
    GoogleChart.Column = Column;
})(GoogleChart || (GoogleChart = {}));

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var Toaster;
(function (Toaster) {
    /**
     * @record
     */
    function State$$1() { }
    Toaster.State = State$$1;
})(Toaster || (Toaster = {}));

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
var Tooltip;
(function (Tooltip) {
    /**
     * @record
     */
    function Config() { }
    Tooltip.Config = Config;
})(Tooltip || (Tooltip = {}));

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
let ToasterState = class ToasterState {
};
ToasterState = __decorate([
    State({
        name: 'ToasterState',
    })
], ToasterState);

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
library.add(faCalendarDay, faInfoCircle, faSearch, faTimes);
class UiModule {
}
UiModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CoreModule,
                    CoreModule,
                    FontAwesomeModule,
                    NgDatepickerModule,
                    NgxsModule.forFeature([ToasterState]),
                    PerfectScrollbarModule,
                ],
                declarations: [
                    // abstracts
                    AbstractInputComponent,
                    // charts
                    AnnotationChartComponent,
                    // components
                    AutocompleteComponent,
                    CheckboxComponent,
                    GoogleChartComponent,
                    DatePickerComponent,
                    InputComponent,
                    ListboxComponent,
                    ModalComponent,
                    PaginationComponent,
                    PopoverComponent,
                    ProgressBarComponent,
                    RadioComponent,
                    SelectComponent,
                    SpinnerComponent,
                    TextAreaComponent,
                    ToasterComponent,
                    ToasterContainerComponent,
                    TooltipComponent,
                    // Directives
                    DropdownDirective,
                    PopoverDirective,
                    TooltipDirective,
                ],
                entryComponents: [ToasterComponent, PopoverComponent, TooltipComponent],
                exports: [
                    // modules
                    FontAwesomeModule,
                    NgDatepickerModule,
                    NgxSlickJsModule,
                    PerfectScrollbarModule,
                    // charts
                    AnnotationChartComponent,
                    // components
                    AutocompleteComponent,
                    CheckboxComponent,
                    GoogleChartComponent,
                    DatePickerComponent,
                    InputComponent,
                    ListboxComponent,
                    ModalComponent,
                    PaginationComponent,
                    PopoverComponent,
                    ProgressBarComponent,
                    RadioComponent,
                    SelectComponent,
                    SpinnerComponent,
                    TextAreaComponent,
                    ToasterComponent,
                    ToasterContainerComponent,
                    TooltipComponent,
                    // Directives
                    DropdownDirective,
                    PopoverDirective,
                    TooltipDirective,
                ],
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

export { AbstractInputComponent, LayoutScroll, ToasterShow, AutocompleteComponent, AnnotationChartComponent, DatePickerComponent, GoogleChartComponent, CheckboxComponent, InputComponent, RadioComponent, SpinnerComponent, TextAreaComponent, ListboxComponent, ModalComponent, PaginationComponent, PopoverComponent, ProgressBarComponent, SelectComponent, ToasterComponent, ToasterContainerComponent, TooltipComponent, DropdownDirective, PopoverDirective, TooltipDirective, ToasterState, createProjectableNode, UiModule, AbstractInputComponent as ɵe, AbstractInputComponent as ɵb, AutocompleteComponent as ɵd, AnnotationChartComponent as ɵc, DatePickerComponent as ɵh, GoogleChartComponent as ɵg, CheckboxComponent as ɵf, InputComponent as ɵi, RadioComponent as ɵq, SpinnerComponent as ɵs, TextAreaComponent as ɵt, ListboxComponent as ɵj, ModalComponent as ɵk, PaginationComponent as ɵl, PopoverComponent as ɵm, ProgressBarComponent as ɵp, SelectComponent as ɵr, ToasterContainerComponent as ɵv, ToasterComponent as ɵu, TooltipComponent as ɵn, DropdownDirective as ɵw, PopoverDirective as ɵx, TooltipDirective as ɵy, ToasterState as ɵa };

//# sourceMappingURL=ngx-performance-ui-ui.js.map