import { Component, ViewChild, ElementRef, Renderer2 } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { timer, of } from 'rxjs';
import { FileUploader } from 'ng2-file-upload';
import { Router, NavigationStart } from '@angular/router';
import { PopupServiceClass } from './popup.service';
import { KeyboardService } from '../keyboard-service';
import { BasePopup } from './helpers/base-popup';
import { DEFAULT_CODEMIRROR_OPTIONS } from '../constants';
import * as i0 from "@angular/core";
import * as i1 from "./popup.service";
import * as i2 from "@angular/forms";
import * as i3 from "@angular/router";
import * as i4 from "../keyboard-service";
import * as i5 from "@angular/common";
import * as i6 from "angular2-text-mask";
import * as i7 from "../custom-select/src/lib/select-components";
import * as i8 from "ng2-file-upload";
import * as i9 from "@angular/material/slide-toggle";
import * as i10 from "../input-counter/input-counter.component";
import * as i11 from "../name-form-error/name-form-error.component";
import * as i12 from "ng2-trim-directive";
import * as i13 from "@ctrl/ngx-codemirror";
import * as i14 from "./components/select/select.component";
import * as i15 from "./components/geo/geo.component";
import * as i16 from "./components/geo-ssp/geo-ssp.component";
import * as i17 from "./components/select-versions/select-versions.component";
import * as i18 from "./components/select-with-swap/select-with-swap.component";
import * as i19 from "./components/select-with-common/select-with-common-button";
import * as i20 from "./components/custom-input/custom-input.component";
import * as i21 from "./autofocus.directive";
import * as i22 from "./components/stripe/stripe.component";
import * as i23 from "./components/user-activity/user-activity-popup.component";
import * as i24 from "./components/table-config/table-config.component";
import * as i25 from "./components/creative-debug/creative-debug.component";
import * as i26 from "./components/filter-by-condition/filter-by-condition.component";
import * as i27 from "./components/checkbox-group/epom-popup-checkbox-group.component";
import * as i28 from "./components/cattax-category/cattax-category.component";
import * as i29 from "./components/options-selector/options-selector.component";
import * as i30 from "./components/upload-history/upload-history.component";
import * as i31 from "./components/calculate-modifiers/calculate-modifiers.component";
export class PopupComponentClass extends BasePopup {
    constructor(popupService, formBuilder, renderer, router, keyboardService) {
        super();
        this.popupService = popupService;
        this.formBuilder = formBuilder;
        this.renderer = renderer;
        this.router = router;
        this.keyboardService = keyboardService;
        this.exitMessage = '';
        this.modalShowed = false;
        this.modalDisplayNone = true;
        this.popupData = {}; //todo fix IPopupSettings
        this.isSubmitAvailable = true;
        this.defaultPopupData = {
            title: '',
            subtitle: '',
            fields: [],
            body: '',
            center: false,
            buttons: false,
            buttonsPosition: 'right',
            spinner: false,
            closeButton: true,
            overlayTheme: 'gray',
            width: 'md',
            height: 'md',
            allowedMimeTypes: ['text/csv', 'text/plain'],
            limitSelection: 0, // Limit selection (0 - no limits)
        };
        this.dataStreams = {};
        this.uploader = new FileUploader({
            allowedMimeType: ['text/csv', 'text/plain'],
            url: '', //todo add url
        });
        this.hasBaseDropZoneOver = false;
        this.addFileError = false;
        this.showEmptyAllColumnsErrorMsg = false;
        this.fileuploadListeners = null;
        this.customElementForm = null;
        this.codemirrorOptions = DEFAULT_CODEMIRROR_OPTIONS;
        this.popupData = this.defaultPopupData;
        this.popupSubscription = this.popupService.popup.subscribe((x) => {
            if (x) {
                return this.createPopup(x);
            }
        });
        this.keyboardService.listen(['escape']).subscribe(() => {
            if (this.modalShowed) {
                this.close();
            }
        });
        this.uploader.onWhenAddingFileFailed = () => {
            this.addFileError = true;
            this.addFileErrorMsg = 'Invalid file type.';
        };
        this.router.events.subscribe((event) => {
            if (event instanceof NavigationStart && this.modalShowed) {
                this.close();
            }
        });
    }
    getVisibleFields() {
        return this.popupData.fields.filter((field) => !field.hidden);
    }
    fileOverBase(isOverBase) {
        this.hasBaseDropZoneOver = isOverBase;
    }
    createPopup(data) {
        this.exitMessage = '';
        if (!!data.popupClose) {
            this.sendFeedback('close-by-api');
            this.close();
            return false;
        }
        this.popupService.disableBodyOverflow();
        this.popupData = Object.assign({}, this.defaultPopupData, data);
        this.uploader = new FileUploader({
            allowedMimeType: this.popupData.allowedMimeTypes,
            url: '', //todo add url
        });
        this.uploader.onWhenAddingFileFailed = () => {
            this.addFileError = true;
            this.addFileErrorMsg = 'Invalid file type.';
        };
        this.limitSelection = this.popupData.limitSelection;
        this.hash = data.hash;
        if (this.popupData.fields) {
            const fieldsForForm = this.popupData.fields.reduce((acc, item) => {
                if (item.type === 'upload' && item.on) {
                    this.fileuploadListeners = item.on;
                }
                const defaultValue = item.type === 'select' ? (Array.isArray(item.selected) ? [...item.selected] : [item.selected]) : item.value;
                return { ...acc, [item.name]: [defaultValue, item.validators] };
            }, {});
            this.dataStreams = this.popupData.fields
                .filter((item) => item.type === 'select')
                .reduce((acc, item) => ({ ...acc, [item.name]: item.options$ ? item.options$ : of(item.options) }), {});
            this.popupForm = this.formBuilder.group(fieldsForForm);
            if (this.popupData.uploadSwitcher) {
                this.showHideUploadFields(this.popupForm.get('uploadType').value);
                this.popupForm.get('uploadType').valueChanges.subscribe((e) => this.showHideUploadFields(e));
            }
            if (this.popupForm.get(this.popupData.onDisableFieldControl)?.value) {
                this.manageDisabledControls(this.popupForm.get(this.popupData.onDisableFieldControl).value);
            }
            this.manageRadioButtons();
            if (this.popupData.onDisableFieldControl) {
                this.disabledControlsValueChanges();
            }
        }
        if (this.fileuploadListeners) {
            Object.keys(this.fileuploadListeners).forEach((fnName) => {
                const [elementName, methodToCall] = this.fileuploadListeners[fnName];
                this.uploader[fnName] = (fileItem) => {
                    if (!fileItem.file.type) {
                        this.uploader.queue = [];
                        this.addFileError = true;
                        this.addFileErrorMsg = 'Invalid file type.';
                        return;
                    }
                    this.addFileError = false;
                    this.addFileErrorMsg = null;
                    if (fileItem.file.size > 14000000) {
                        this.uploader.queue = [];
                        this.addFileError = true;
                        this.addFileErrorMsg = 'Maximal file size exceeded.';
                        return;
                    }
                    const el = this.popupForm.get(elementName);
                    this.formEl = el;
                    if (!el) {
                        return;
                    }
                    el[methodToCall]();
                    if (methodToCall === 'reset') {
                        el.disable();
                    }
                };
            });
        }
        if (this.popupData.activityDisabled) {
            this.popupForm.disable();
        }
        this.open();
    }
    showHideUploadFields(uploadType) {
        if (uploadType === 'manually') {
            this.enableManualUpload();
            this.popupData.fields.find((item) => item.name === 'list').hidden = false;
            this.popupData.fields.find((item) => item.name === 'file').hidden = true;
        }
        else if (uploadType === 'upload') {
            this.popupData.fields.find((item) => item.name === 'file').hidden = false;
            this.popupData.fields.find((item) => item.name === 'list').hidden = true;
        }
    }
    removeFile(filename) {
        this.uploader.queue = this.uploader.queue.filter((item) => item.file.name !== filename);
    }
    open() {
        this.modalDisplayNone = false;
        timer(10).subscribe(() => {
            this.modalShowed = true;
        });
    }
    closeButton() {
        this.close();
    }
    checkAvailabilityForm(isFormValid) {
        this.isSubmitAvailable = isFormValid;
    }
    sendSelectQuery(response) {
        this.sendFeedback(response.type + '|' + response.val);
    }
    close(event) {
        if (event) {
            event.stopPropagation();
        }
        this.modalShowed = false;
        timer(200).subscribe(() => {
            this.modalDisplayNone = true;
            this.showEmptyAllColumnsErrorMsg = false;
        });
        this.popupData = {};
        this.selectData = undefined;
        this.addFileError = false;
        this.addFileErrorMsg = null;
        this.popupService.enableBodyOverflow();
        this.sendFeedback('close-button');
    }
    buttonClick(message) {
        if (message === 'close-button') {
            this.close();
        }
        else {
            this.sendFeedback(message);
        }
    }
    updateSelectedItems(eventData) {
        this.selectData = eventData;
    }
    updateAbstractData(eventData) {
        this.abstractData = eventData;
        this.sendFeedback('abstract');
    }
    updateFormData(data) {
        this.customElementForm = data.element;
        this.popupForm = data.form;
    }
    sendFeedback(message) {
        this.exitMessage = message;
        const feedbackObject = { hash: this.hash, message: message };
        if (message.includes('submit') && !this.popupForm.valid) {
            if (this.customElementForm) {
                this.renderer.addClass(this.customElementForm.nativeElement, 'form-submitted');
                this.customElementForm.nativeElement.scrollIntoView({ behavior: 'smooth' });
            }
            else {
                this.renderer.addClass(this.popupFormElement.nativeElement, 'form-submitted');
                this.popupFormElement.nativeElement.scrollIntoView({ behavior: 'smooth' });
            }
            feedbackObject['formObject'] = this.popupForm;
            this.popupService.popupFeedback.next(feedbackObject);
            return false;
        }
        if (this.selectData) {
            feedbackObject['selectData'] = this.selectData;
        }
        else {
            if (this.abstractData) {
                feedbackObject['abstractData'] = this.abstractData;
            }
            else {
                feedbackObject['formObject'] = this.popupForm;
            }
        }
        if (this.uploader.queue && this.uploader.queue.length) {
            feedbackObject['uploader'] = this.uploader;
        }
        if (feedbackObject['abstractData'] && feedbackObject['abstractData'].value['generalColumns']) {
            const allTableColumns = Object.assign(feedbackObject['abstractData'].value.generalColumns, feedbackObject['abstractData'].value.actionsColumns.actions, feedbackObject['abstractData'].value.actionsColumns.convertions, feedbackObject['abstractData'].value.actionsColumns.purchase, feedbackObject['abstractData'].value.actionsColumns.roiRoas, feedbackObject['abstractData'].value.videoColumns);
            if (Object.keys(allTableColumns).every((k) => !allTableColumns[k])) {
                this.showEmptyAllColumnsErrorMsg = true;
                return;
            }
            else {
                this.showEmptyAllColumnsErrorMsg = false;
            }
        }
        this.popupService.popupFeedback.next(feedbackObject);
    }
    manageDisabledControls(response) {
        if (response === this.popupData.notDisableControlValue) {
            this.popupForm.get(this.popupData.disableFormName).enable();
        }
        else {
            this.popupForm.get(this.popupData.disableFormName).disable();
        }
    }
    disabledControlsValueChanges() {
        this.popupForm.get(this.popupData.onDisableFieldControl).valueChanges.subscribe((response) => {
            this.manageDisabledControls(response);
        });
    }
    updateData(e) {
        this.popupData.updateData(e);
    }
    offsetHandler(offset) {
        this.popupData.offsetHandler(offset);
    }
    searchHandler(text) {
        this.popupData.searchHandler(text);
    }
    manageRadioButtons() {
        this.popupForm.get('name')?.valueChanges.subscribe((type) => {
            if (type[0] === 136 || type[0] === 137) {
                const radios = this?.popupData?.fields?.find((f) => f.type === 'radio' && f.value === 'byValue')?.radios;
                if (radios) {
                    radios[0].disabled = true;
                    radios[1].name = 'By Value: True';
                    radios[2].name = 'By Value: False';
                }
            }
            else if (type[0] > 0) {
                const radios = this?.popupData?.fields?.find((f) => f.type === 'radio' && f.value === 'byValue')?.radios;
                if (radios) {
                    radios[0].disabled = false;
                    radios[1].name = 'Existing: True';
                    radios[2].name = 'Existing: False';
                }
            }
        });
    }
    enableManualUpload() {
        if (this.fileuploadListeners) {
            const element = this.popupForm.get('list');
            if (element) {
                element.enable();
            }
        }
    }
}
PopupComponentClass.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PopupComponentClass, deps: [{ token: i1.PopupServiceClass }, { token: i2.FormBuilder }, { token: i0.Renderer2 }, { token: i3.Router }, { token: i4.KeyboardService }], target: i0.ɵɵFactoryTarget.Component });
PopupComponentClass.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PopupComponentClass, selector: "epom-popup", viewQueries: [{ propertyName: "popupFormElement", first: true, predicate: ["popupFormElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"modal fade\"\n  [ngClass]=\"{'in': modalShowed, 'hide': modalDisplayNone, 'show': !modalDisplayNone, 'modal-spinner':popupData.spinner}\"\n  tabindex=\"-1\"\n  role=\"dialog\"\n  aria-labelledby=\"myModalLabel\"\n>\n  <div class=\"double-bounce\" *ngIf=\"popupData.spinner\">\n    <div class=\"double-bounce-container\">\n      <div class=\"double-bounce1\"></div>\n      <div class=\"double-bounce2\"></div>\n    </div>\n  </div>\n  <div\n    class=\"modal-dialog modal-centered modal-{{popupData.width}}\"\n    role=\"document\"\n    *ngIf=\"!!popupData.title || !!popupData.body\"\n  >\n    <div\n      class=\"modal-content modal-height-{{popupData.height}} type-{{popupData.type}}\n{{popupData.overflow && popupData.overflow}}\"\n      [attr.data-qa]=\"'PopUpContent'\"\n    >\n      <div class=\"modal-header\">\n        <section class=\"modal-title-section\">\n          <h4 class=\"modal-title\" id=\"myModalLabel\">{{ popupData.title }}</h4>\n          <span\n            *ngIf=\"popupData.closeButton\"\n            class=\"material-icons material-icons-outlined button-icon button-icon-large button-icon-outline\"\n            (click)=\"buttonClick('close-button')\"\n          >\n            close\n          </span>\n        </section>\n\n        <section *ngIf=\"popupData.subtitle\" class=\"modal-sub-title-section\" [innerHTML]=\"popupData.subtitle\"></section>\n      </div>\n\n      <div class=\"modal-body {{popupData.overflow}}\">\n        <div\n          class=\"select-popup {{popupData.overflow}}\"\n          *ngIf=\"\n                 !!popupData.dataObject\n                 && popupData.type !== 'select-with-swap'\n                 && popupData.type !== 'select-with-common'\n                 && popupData.type !== 'options-selector'\n                 && popupData.type !== 'select-versions'\n                 && popupData.type !== 'filter-by-condition'\n                 && popupData.type !== 'checkbox-group'\n                 && popupData.type !== 'cattax-category'\n                 && popupData.type !== 'stripe'\n                 && popupData.type !== 'custom-input'\n                 && popupData.type !== 'calculate-modifiers'\n              \"\n        >\n          <epom-popup-select\n            [isSearchDelay]=\"popupData.isSearchDelay\"\n            [isDisabled]=\"popupData.activityDisabled\"\n            [filtersArr]=\"popupData.dataObject.list\"\n            [selectedSet]=\"popupData.dataObject.selected\"\n            [popupType]=\"popupData.type\"\n            [limitSelection]=\"popupData.limitSelection\"\n            [sortField]=\"popupData.sortField\"\n            [isCountrySelect]=\"popupData.isCountrySelect\"\n            [countryData]=\"popupData.countryData\"\n            [isShowMoreAvailable]=\"popupData.isShowMoreAvailable\"\n            [showFilter]=\"popupData.showFilter\"\n            [emptyListMessage]=\"popupData.dataObject.emptyListMessage\"\n            [zeroSelectedItemsText]=\"popupData.dataObject.zeroSelectedItemsText\"\n            [zeroLeftColumnItemsText]=\"popupData.dataObject.zeroLeftColumnItemsText\"\n            [rightColumnTitle]=\"popupData.dataObject?.rightColumnTitle\"\n            (updateData)=\"updateData($event)\"\n            (offsetHandler)=\"offsetHandler($event)\"\n            (searchHandler)=\"searchHandler($event)\"\n            (popupSelectOutput)=\"updateSelectedItems($event)\"\n          >\n          </epom-popup-select>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"!!popupData.userActivityData\">\n          <epom-popup-user-activity [userActivityData]=\"popupData.userActivityData\"></epom-popup-user-activity>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"!!popupData.dataObject && popupData.type === 'custom-input'\">\n          <epom-popup-custom-input\n            [isDisabled]=\"popupData.activityDisabled\"\n            [filtersArr]=\"popupData.dataObject.list\"\n            [selectedSet]=\"popupData.dataObject.selected\"\n            [limitSelection]=\"popupData.limitSelection\"\n            [popupType]=\"popupData.type\"\n            (popupSelectOutput)=\"updateSelectedItems($event)\"\n          >\n          </epom-popup-custom-input>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"!!popupData.dataObject && popupData.type === 'select-versions'\">\n          <epom-popup-select-versions\n            [targetingData]=\"popupData.dataObject.versionsData\"\n            [initialFormState]=\"popupData.dataObject.targetingForm\"\n            (checkAvailabilityForm)=\"checkAvailabilityForm($event)\"\n            (popupSelectedOutput)=\"updateSelectedItems($event)\"\n          >\n          </epom-popup-select-versions>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"!!popupData.dataObject && popupData.type === 'filter-by-condition'\">\n          <epom-popup-filter-by-condition\n            [initialData]=\"popupData.dataObject.initialData\"\n            [metricList]=\"popupData.dataObject.metricList\"\n            (popupSelectedOutput)=\"updateFormData($event)\"\n          >\n          </epom-popup-filter-by-condition>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"!!popupData.dataObject && popupData.type === 'checkbox-group'\">\n          <epom-popup-checkbox-group\n            [initialData]=\"popupData.dataObject.initialData\"\n            (popupSelectedOutput)=\"updateSelectedItems($event)\"\n          >\n          </epom-popup-checkbox-group>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"!!popupData.dataObject && popupData.type === 'cattax-category'\">\n          <epom-popup-cattax-category\n            [initialData]=\"popupData.dataObject.initialData\"\n            [initialSelectedSet]=\"popupData.dataObject.selected\"\n            (popupSelectedOutput)=\"updateSelectedItems($event)\"\n          >\n          </epom-popup-cattax-category>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"!!popupData.dataObject && popupData.type === 'calculate-modifiers'\">\n          <epom-popup-calculate-modifiers\n            [campaign]=\"popupData.dataObject.campaign\"\n            [bidModifiers]=\"popupData.dataObject.bidModifiers\"\n          >\n          </epom-popup-calculate-modifiers>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"!!popupData.dataObject && popupData.type === 'select-with-common'\">\n          <epom-popup-select-with-common\n            [isSearchDelay]=\"popupData.isSearchDelay\"\n            [isDisabled]=\"popupData.activityDisabled\"\n            [filtersArr]=\"popupData.dataObject.list\"\n            [selectedSet]=\"popupData.dataObject.selected\"\n            [isShowMoreAvailable]=\"popupData.isShowMoreAvailable\"\n            [itemType]=\"popupData.itemType\"\n            [limitSelection]=\"popupData.limitSelection\"\n            [popupType]=\"popupData.type\"\n            (offsetHandler)=\"offsetHandler($event)\"\n            (searchHandler)=\"searchHandler($event)\"\n            (popupSelectOutput)=\"updateSelectedItems($event)\"\n          >\n          </epom-popup-select-with-common>\n        </div>\n\n        <div *ngIf=\"!!popupData.dataObject && popupData.type === 'options-selector'\" class=\"{{popupData.overflow}}\">\n          <epom-popup-options-selector\n            [isSearchDelay]=\"popupData.isSearchDelay\"\n            [isDisabled]=\"popupData.activityDisabled\"\n            [filtersArr]=\"popupData.dataObject.list\"\n            [selectedSet]=\"popupData.dataObject.selected\"\n            [itemType]=\"popupData.itemType\"\n            [limitSelection]=\"popupData.limitSelection\"\n            [isShowMoreAvailable]=\"popupData.isShowMoreAvailable\"\n            [popupType]=\"popupData.type\"\n            (offsetHandler)=\"offsetHandler($event)\"\n            (searchHandler)=\"searchHandler($event)\"\n            (popupSelectOutput)=\"updateSelectedItems($event)\"\n          ></epom-popup-options-selector>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"!!popupData.dataObject && popupData.type === 'select-with-swap'\">\n          <epom-popup-select-with-swap\n            [isDisabled]=\"popupData.activityDisabled\"\n            [filtersArr]=\"popupData.dataObject.list\"\n            [selectedSet]=\"popupData.dataObject.selected\"\n            [popupType]=\"popupData.type\"\n            [includeType]=\"popupData.includeType\"\n            [limitSelection]=\"popupData.limitSelection\"\n            (popupSelectOutput)=\"updateSelectedItems($event)\"\n          >\n          </epom-popup-select-with-swap>\n        </div>\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"popupData.type === 'upload-history'\">\n          <epom-popup-upload-history [data]=\"popupData.data\"> </epom-popup-upload-history>\n        </div>\n\n        <div class=\"{{popupData.overflow}} select-popup\" *ngIf=\"!!popupData.geoObject\">\n          <epom-popup-geo\n            [isDisabled]=\"popupData.activityDisabled\"\n            [countriesStream]=\"popupData.geoObject.countriesStream\"\n            [statesStream]=\"popupData.geoObject.statesStream\"\n            [citiesStream]=\"popupData.geoObject.citiesStream\"\n            [initialValues]=\"popupData.geoObject.initialValues\"\n            (chousenGeo)=\"sendSelectQuery($event)\"\n            (newTargets)=\"updateSelectedItems($event)\"\n          >\n          </epom-popup-geo>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"!!popupData.geoObjectSSP\">\n          <epom-popup-geo-ssp\n            [isDisabled]=\"popupData.activityDisabled\"\n            [countriesStream]=\"popupData.geoObjectSSP.countriesStream\"\n            [statesStream]=\"popupData.geoObjectSSP.statesStream\"\n            [citiesStream]=\"popupData.geoObjectSSP.citiesStream\"\n            [initialValues]=\"popupData.geoObjectSSP.initialValues\"\n            (chousenGeo)=\"sendSelectQuery($event)\"\n            (newTargets)=\"updateSelectedItems($event)\"\n          >\n          </epom-popup-geo-ssp>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"popupData.type === 'tableConfig'\">\n          <epom-popup-table-config\n            [analyticTableConfig]=\"popupData.analyticTableConfig\"\n            [visibleColumns]=\"popupData.visibleColumns\"\n            [extraAdminColumns]=\"popupData.extraAdminColumns\"\n            [enabledPermissions]=\"popupData.enabledPermissions\"\n            (formUpdated)=\"updateAbstractData($event)\"\n          >\n          </epom-popup-table-config>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"popupData.type === 'creativeDebug'\">\n          <epom-popup-creative-debug [creativeDebugData]=\"popupData.creativeDebugData\"></epom-popup-creative-debug>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"popupData.type === 'stripe'\">\n          <epom-popup-stripe\n            [amount]=\"popupData.amount\"\n            [publicKey]=\"popupData.publicKey\"\n            (newDataFromStripeAPI)=\"updateAbstractData($event)\"\n          >\n          </epom-popup-stripe>\n        </div>\n\n        <div\n          class=\"{{popupData.overflow}}\"\n          [innerHTML]=\"popupData.body\"\n          [ngClass]=\"{'text-center': popupData.center}\"\n          *ngIf=\"popupData.body\"\n        ></div>\n\n        <div\n          class=\"{{popupData.overflow}}\"\n          *ngIf=\"!!popupData.fields?.length &&\n        (!popupData.dataObject\n        && !popupData.geoObject\n        && popupData.type !== 'tableConfig'\n        && popupData.type !== 'preview')\"\n        >\n          <form\n            [formGroup]=\"popupForm\"\n            class=\"modal-form\"\n            #popupFormElement\n            [ngClass]=\"{'custom-popup-form': popupData.customPopupClass}\"\n          >\n            <ng-container *ngFor=\"let field of getVisibleFields()\">\n              <div\n                class=\"form-control-wrapper\"\n                *ngIf=\"!field.hiddenOnDefault || popupForm.get(field.showControlName).value === field.showControlValue\"\n              >\n                <div *ngIf=\"field.type === 'select'\">\n                  <label class=\"control-label select-label\" *ngIf=\"field.label\"\n                    >{{ field.label }}<span\n                      class=\"required-item\"\n                      [ngClass]=\"{'invalid': popupForm.get(field.name).invalid}\"\n                      *ngIf=\"field['required'] ? field['required'] : false\"\n                      >*</span\n                    >\n                  </label>\n                  <input type=\"hidden\" formControlName=\"{{field.name}}\" />\n                  <custom-select\n                    [isSearchDelay]=\"field.isSearchDelay\"\n                    [placeholder]=\"field.placeholder\"\n                    [valuesStream]=\"dataStreams[field.name]\"\n                    [search]=\"(field['search'] !== 'undefined' ? field['search'] : true)\"\n                    [formElement]=\"popupForm.get(field.name)\"\n                    [useClear]=\"field['useClear'] ? field['useClear'] : false\"\n                    [clearLikeOption]=\"field['useClear'] ? field['useClear'] : false\"\n                    [dataQa]=\"field.name\"\n                    [startTypingText]=\"field?.startTypingText\"\n                    (searchHandler)=\"searchHandler($event)\"\n                  ></custom-select>\n                </div>\n\n                <div *ngIf=\"field.type === 'upload'\">\n                  <div\n                    ng2FileDrop\n                    [ngClass]=\"{\n                    'nv-file-over': hasBaseDropZoneOver,\n                    'nv-file-error': addFileError,\n                    'hidden': uploader?.queue?.length > 0\n                    }\"\n                    (fileOver)=\"fileOverBase($event)\"\n                    [uploader]=\"uploader\"\n                    (click)=\"fileInputField.click()\"\n                    class=\"well my-drop-zone\"\n                  >\n                    <p class=\"drop-zone-text\">\n                      {{ field.placeholder ? field.placeholder : 'Drop file here or click to upload List' }}\n                    </p>\n                    <div class=\"drop-zone-format\">Format: {{ field?.format ? field.format : '(.csv, .txt)' }}</div>\n                  </div>\n                  <small *ngIf=\"addFileError\" class=\"text-danger\"><sup>*</sup> {{ addFileErrorMsg }}</small>\n\n                  <input\n                    data-qa=\"file\"\n                    type=\"file\"\n                    ng2FileSelect\n                    [uploader]=\"uploader\"\n                    multiple\n                    class=\"hidden\"\n                    #fileInputField\n                  />\n\n                  <div class=\"file-preview-wrapper\">\n                    <div class=\"file-preview\" *ngFor=\"let item of uploader.queue\">\n                      <div class=\"thumbnail\">\n                        <div class=\"caption text-left\" *ngIf=\"!item?.file?.srcLocal\">\n                          <span class=\"material-icons material-icons-outlined\"> insert_drive_file </span>\n                          <span class=\"file-name\">{{ item?.file?.name }}</span>\n                        </div>\n                      </div>\n\n                      <span\n                        class=\"material-icons material-icons-outlined button-icon button-icon-outline button-icon-large\"\n                        (click)=\"removeFile(item?.file?.name)\"\n                      >\n                        delete_outline\n                      </span>\n                    </div>\n                  </div>\n                </div>\n\n                <div class=\"form-group\" *ngIf=\"field.type === 'switcher'\">\n                  <label class=\"control-label\">{{ field.label }}</label>\n                  <div class=\"popup-switcher\">\n                    <mat-slide-toggle formControlName=\"{{field.name}}\" [checked]=\"field.value\">\n                      <div *ngIf=\"!field.hiddenValue\">\n                        <span *ngIf=\"!popupForm.get(field.name).value\" class=\"switcher-text text-off\">\n                          {{ field.switcherOptions ? field.switcherOptions.offState : 'Off' }}</span\n                        >\n                        <span *ngIf=\"popupForm.get(field.name).value\" class=\"switcher-text text-on\">\n                          {{ field.switcherOptions ? field.switcherOptions.onState : 'On' }}</span\n                        >\n                      </div>\n                    </mat-slide-toggle>\n                    <label class=\"control-label\">{{ field.placeholder }}</label>\n                  </div>\n                </div>\n\n                <div *ngIf=\"field.type === 'radio'\" [class]=\"field.class\">\n                  <div class=\"switchers-group\">\n                    <div class=\"switchers-inline\" *ngFor=\"let radio of field.radios\">\n                      <input\n                        [attr.checked]=\"radio.value === field.value ? 'checked' : null\"\n                        [attr.data-qa]=\"radio.value\"\n                        class=\"switchers\"\n                        id=\"{{radio.id}}\"\n                        formControlName=\"{{field.name}}\"\n                        type=\"radio\"\n                        value=\"{{radio.value}}\"\n                        *ngIf=\"!radio.disabled\"\n                      />\n                      <label for=\"{{radio.id}}\">{{ radio.name }}</label>\n                    </div>\n                  </div>\n                </div>\n\n                <div *ngIf=\"field.type === 'checkbox'\">\n                  <span class=\"switcher\">\n                    <input\n                      formControlName=\"{{field.name}}\"\n                      [attr.data-qa]=\"field.name\"\n                      class=\"switchers\"\n                      id=\"{{field.name}}-popup\"\n                      [checked]=\"field.value\"\n                      type=\"checkbox\"\n                    />\n                    <label class=\"bg-success column-label\" for=\"{{field.name}}-popup\">{{ field.title }}</label>\n                  </span>\n                </div>\n\n                <epom-name-form-error\n                  *ngIf=\"field.showNameErrorMessage\"\n                  [control]=\"popupForm.get(field.name)\"\n                  [isSubmitted]=\"exitMessage === 'submit'\"\n                ></epom-name-form-error>\n\n                <input\n                  *ngIf=\"field.hasOwnProperty('maxlength') && field.hasOwnProperty('mask') && field.type !== 'checkbox' && field.type !== 'textarea' && field.type !== 'select' && field.type !== 'switcher' && field.type !== 'radio' && field.type !== 'upload' && field.type !== 'number' && field.type !== 'code'\"\n                  [attr.data-qa]=\"field.name\"\n                  type=\"{{field.type}}\"\n                  formControlName=\"{{field.name}}\"\n                  value=\"{{field.value}}\"\n                  maxlength=\"{{field.maxlength}}\"\n                  appAutofocus\n                  [isSetAutofocus]=\"field.hasInputAutoFocus\"\n                  placeholder=\"{{field.placeholder}}\"\n                  class=\"form-control\"\n                  [textMask]=\"field.mask\"\n                />\n                <input\n                  *ngIf=\"!field.hasOwnProperty('maxlength') && field.hasOwnProperty('mask') && field.type !== 'checkbox' && field.type !== 'textarea' && field.type !== 'select' && field.type !== 'switcher' && field.type !== 'radio' && field.type !== 'upload' && field.type !== 'number' && field.type !== 'code'\"\n                  [attr.data-qa]=\"field.name\"\n                  type=\"{{field.type}}\"\n                  formControlName=\"{{field.name}}\"\n                  value=\"{{field.value}}\"\n                  appAutofocus\n                  [isSetAutofocus]=\"field.hasInputAutoFocus\"\n                  placeholder=\"{{field.placeholder}}\"\n                  class=\"form-control\"\n                  [textMask]=\"field.mask\"\n                />\n                <input\n                  *ngIf=\"field.hasOwnProperty('maxlength') && !field.hasOwnProperty('mask') && field.type !== 'checkbox' && field.type !== 'textarea' && field.type !== 'select' && field.type !== 'switcher' && field.type !== 'radio' && field.type !== 'upload' && field.type !== 'number' && field.type !== 'code'\"\n                  [attr.data-qa]=\"field.name\"\n                  type=\"{{field.type}}\"\n                  formControlName=\"{{field.name}}\"\n                  value=\"{{field.value}}\"\n                  maxlength=\"{{field.maxlength}}\"\n                  appAutofocus\n                  [isSetAutofocus]=\"field.hasInputAutoFocus\"\n                  placeholder=\"{{field.placeholder}}\"\n                  class=\"form-control\"\n                />\n                <input\n                  *ngIf=\"!field.trim && !field.hasOwnProperty('maxlength')\n                 && !field.hasOwnProperty('mask') && field.type !== 'checkbox'\n                 && field.type !== 'textarea' && field.type !== 'select'\n                 && field.type !== 'switcher' && field.type !== 'radio'\n                 && field.type !== 'upload' && field.type !== 'number' && field.type !== 'code'\"\n                  [attr.data-qa]=\"field.name\"\n                  type=\"{{field.type}}\"\n                  formControlName=\"{{field.name}}\"\n                  value=\"{{field.value}}\"\n                  appAutofocus\n                  [isSetAutofocus]=\"field.hasInputAutoFocus\"\n                  placeholder=\"{{field.placeholder}}\"\n                  class=\"form-control\"\n                />\n                <input\n                  *ngIf=\"field.trim && !field.hasOwnProperty('maxlength') && !field.hasOwnProperty('mask') && field.type !== 'checkbox' && field.type !== 'textarea' && field.type !== 'select' && field.type !== 'switcher' && field.type !== 'radio' && field.type !== 'upload' && field.type !== 'number' && field.type !== 'code'\"\n                  [attr.data-qa]=\"field.name\"\n                  type=\"{{field.type}}\"\n                  formControlName=\"{{field.name}}\"\n                  value=\"{{field.value}}\"\n                  appAutofocus\n                  trim=\"blur\"\n                  [isSetAutofocus]=\"field.hasInputAutoFocus\"\n                  placeholder=\"{{field.placeholder}}\"\n                  class=\"form-control\"\n                />\n\n                <div *ngIf=\"field.type === 'textarea'\">\n                  <textarea\n                    [attr.data-qa]=\"field.name\"\n                    rows=\"8\"\n                    formControlName=\"{{field.name}}\"\n                    value=\"{{field.value}}\"\n                    placeholder=\"{{field.placeholder}}\"\n                    class=\"form-control {{field.class}}\"\n                  >\n                  </textarea>\n\n                  <p *ngIf=\"field.description\" class=\"textarea-description\">{{ field.description }}</p>\n                </div>\n\n                <div *ngIf=\"field.type === 'number'\">\n                  <epom-input-counter\n                    ngDefaultControl\n                    [showQuantityButton]=\"field.showQuantityButton\"\n                    [formControl]=\"popupForm.get(field.name)\"\n                    [attr.data-qa]=\"field.name\"\n                    [placeholder]=\"field.placeholder\"\n                    [minQuantity]=\"field.minQuantity\"\n                  >\n                  </epom-input-counter>\n                </div>\n\n                <div *ngIf=\"field.type === 'code'\">\n                  <ngx-codemirror\n                    [attr.data-qa]=\"field.name\"\n                    [options]=\"codemirrorOptions\"\n                    formControlName=\"{{field.name}}\"\n                  ></ngx-codemirror>\n                </div>\n\n                <label\n                  [attr.data-qa]=\"field.name + 'Label'\"\n                  class=\"control-label\"\n                  *ngIf=\"field.type !== 'checkbox' && field.type !== 'select'\n              && field.type !== 'switcher' && field.type !== 'radio' && field.type !== 'upload'\"\n                  >{{ field.label }}<span\n                    class=\"required-item\"\n                    [ngClass]=\"{'invalid': popupForm.get(field.name).invalid}\"\n                    *ngIf=\"field['required'] ? field['required'] : false\"\n                    >*</span\n                  >\n                </label>\n              </div>\n            </ng-container>\n          </form>\n        </div>\n      </div>\n\n      <div style=\"color: red; padding-left: 20px\" *ngIf=\"showEmptyAllColumnsErrorMsg\">\n        <span>You should select at least one column.</span>\n      </div>\n\n      <div class=\"modal-footer text-{{popupData.buttonsPosition}}\" *ngIf=\"popupData.buttons\">\n        <button\n          *ngFor=\"let button of popupData.buttons\"\n          [attr.data-qa]=\"button.event\"\n          class=\"button button-{{getButton(button.class)}} modal-btn\"\n          [ngClass]=\"button.additionalClass\"\n          (click)=\"buttonClick(button.event)\"\n          [disabled]=\"button.text === 'OK' && !isSubmitAvailable\"\n        >\n          {{ button.text }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div\n    (click)=\"close($event)\"\n    class=\"modal-backdrop {{popupData.overlayTheme}} fade\"\n    [ngClass]=\"{'in': modalShowed, 'hide': modalDisplayNone, 'show': !modalDisplayNone, 'modal-backdrop-spinner':popupData.spinner}\"\n  ></div>\n</div>\n", styles: [":root{--palette-primary-0: #000000;--palette-primary-10: #001A41;--palette-primary-20: #002E69;--palette-primary-30: #004493;--palette-primary-40: #005BC0;--palette-primary-50: #2E74DF;--palette-primary-60: #4F8FFB;--palette-primary-70: #80ABFF;--palette-primary-80: #ADC6FF;--palette-primary-90: #D8E2FF;--palette-primary-95: #EDF0FF;--palette-primary-99: #FEFBFF;--palette-primary-100: #FFFFFF;--palette-secondary-0: #000000;--palette-secondary-10: #04006D;--palette-secondary-20: #1E2084;--palette-secondary-30: #373A9B;--palette-secondary-40: #4F54B4;--palette-secondary-50: #686DCF;--palette-secondary-60: #8287EB;--palette-secondary-70: #9FA3FF;--palette-secondary-80: #C0C1FF;--palette-secondary-90: #E1E0FF;--palette-secondary-95: #F1EFFF;--palette-secondary-99: #FFFBFF;--palette-secondary-100: #FFFFFF;--palette-tertiary-0: #000000;--palette-tertiary-10: #29132D;--palette-tertiary-20: #402843;--palette-tertiary-30: #583E5B;--palette-tertiary-40: #715573;--palette-tertiary-50: #8B6D8D;--palette-tertiary-60: #A687A8;--palette-tertiary-70: #C2A1C3;--palette-tertiary-80: #DEBCDF;--palette-tertiary-90: #FBD7FC;--palette-tertiary-95: #FFEBFC;--palette-tertiary-99: #FFFBFF;--palette-tertiary-100: #FFFFFF;--palette-error-0: #000000;--palette-error-10: #410002;--palette-error-20: #690005;--palette-error-30: #93000A;--palette-error-40: #BA1A1A;--palette-error-50: #DE3730;--palette-error-60: #FF5449;--palette-error-70: #FF897D;--palette-error-80: #FFB4AB;--palette-error-90: #FFDAD6;--palette-error-95: #FFEDEA;--palette-error-99: #FFFBFF;--palette-error-100: #FFFFFF;--palette-neutral-0: #000000;--palette-neutral-10: #1A1C1E;--palette-neutral-20: #2F3033;--palette-neutral-30: #46474A;--palette-neutral-40: #5D5E62;--palette-neutral-50: #76777A;--palette-neutral-60: #909094;--palette-neutral-70: #ABABAE;--palette-neutral-80: #C7C6CA;--palette-neutral-90: #E3E2E6;--palette-neutral-95: #F1F0F4;--palette-neutral-99: #FDFCFF;--palette-neutral-100: #FFFFFF;--palette-neutral-variant-0: #000000;--palette-neutral-variant-10: #191C22;--palette-neutral-variant-20: #2E3038;--palette-neutral-variant-30: #44474F;--palette-neutral-variant-40: #5C5E66;--palette-neutral-variant-50: #74777F;--palette-neutral-variant-60: #8E9099;--palette-neutral-variant-70: #A9ABB4;--palette-neutral-variant-80: #C4C6D0;--palette-neutral-variant-90: #E1E2EC;--palette-neutral-variant-95: #EFF0FA;--palette-neutral-variant-99: #FEFBFF;--palette-neutral-variant-100: #FFFFFF;--palette-success-0: #000000;--palette-success-10: #052100;--palette-success-20: #0D3900;--palette-success-30: #175200;--palette-success-40: #216D00;--palette-success-50: #2C8900;--palette-success-60: #48A424;--palette-success-70: #62C03E;--palette-success-80: #7DDD57;--palette-success-90: #98FA70;--palette-success-95: #CCFFB2;--palette-success-99: #F7FFED;--palette-success-100: #FFFFFF;--palette-warning-0: #000000;--palette-warning-10: #261A00;--palette-warning-20: #402D00;--palette-warning-30: #5C4300;--palette-warning-40: #795900;--palette-warning-50: #987100;--palette-warning-60: #B88900;--palette-warning-70: #D9A200;--palette-warning-80: #FBBC0C;--palette-warning-90: #FFDFA0;--palette-warning-95: #FFEFD5;--palette-warning-99: #FFFBFF;--palette-warning-100: #FFFFFF}:root{--primary-color: var(--themePrimButtonsBg-color, #005bc0);--primary-light: var(--themePrimButtonsBg-color);--on-primary-light: var(--on-themePrimButtonsBg-color);--on-primary-container-light: var(--on-themePrimButtonsBg-container-color);--error-light: var(--error-default-color);--on-error-light: var(--error-on-color);--error-container-light: var(--palette-error-90);--on-error-container-light: var(--palette-error-10);--background-light: var(--palette-neutral-100);--on-background-light: var(--neutral-on-main-neutral-color, #1a1c1e);--surface-light: var(--palette-neutral-99);--on-surface-light: var(--neutral-on-main-neutral-color, #1a1c1e);--surface-variant-light: var(--neutral-neutral-color, #e1e2ec);--surface-neutral-light-30pct: rgba(26, 28, 30, .3);--on-surface-variant-light: var(--palette-neutral-variant-30);--outline-light: var(--palette-neutral-variant-50);--disable-light: rgba(26, 28, 30, .12);--inverse-surface-light: var(--palette-neutral-20);--on-inverse-surface-light: var(--palette-neutral-variant-95);--outline-variant-light: var(--neutral-outline-variant-color);--on-disable-light: rgba(26, 28, 30, .3);--success-light: var(--success-default-color);--on-success-light: var(--palette-success-100);--primary-success-light: var(--palette-success-95);--on-success-container-light: var(--palette-success-30);--warning-light: var(--palette-warning-50);--on-warning-light: var(--palette-warning-100);--warning-container-light: var(--palette-warning-95);--on-warning-container-light: var(--palette-warning-30);--skeletons-gradient-light: linear-gradient(90deg, var(--themePrimButtonsBg-4-color) 0%, var(--themePrimButtonsBg-4-color) 50.01%, var(--themePrimButtonsBg-8-color) 100%);--overlay-light: rgba(var(--palette-neutral-10), .8);--primary-hover-light: var(--themePrimButtonsBg-hover-color);--error-hover-light: var(--error-hover-color);--success-hover-light: var(--success-hover-color);--warning-hover-light: var(--warning-hover-color);--outline-hover-light: var(--palette-neutral-variant-60);--neutral-light: var(--palette-neutral-variant-90);--success-light-12pct: rgba(44, 137, 0, .12);--surface-light-8pct: var(--neutral-on-surface-variant-8-color);--surface-light-30pct: rgba(26, 28, 30, .3);--font-headline-2: 20px;--font-headline-3: 16px;--font-headline-4: 14px;--font-small-caption: 10px;--font-weight-bold: 700;--font-weight-semibold: 600;--font-weight-regular: 400;--font-body-1: 16px;--font-body-2: 14px;--font-body-3: 13px;--font-medium-button: 12px;--font-caption: 12px;--space-md: 16px;--space-sm: 8px;--light-success: #006d3e;--dark-outline: #A9ABB4;--dark-basic: #1A1C1E;--dark-basic-on-main-neutral: #E3E2E6}.modal-sub-title-section{font-size:var(--font-body-2);font-weight:var(--font-weight-regular);line-height:21px;color:var(--outline-light);padding-top:16px;max-width:720px}.select-popup{flex:1;overflow:hidden;display:flex}.modal-body:has(.select-popup){padding:0}::ng-deep .cdk-overlay-container{z-index:100000000}.overflow-visible{overflow:visible}.modal-dialog{z-index:100000000}:host ::ng-deep p{margin:0}:host ::ng-deep .modal-sub-title-section-main-text{color:var(--neutral-on-main-neutral-color);font-weight:600}.modal-body{display:flex;flex-direction:column;gap:16px;margin:24px 0;padding:0 24px;overflow:auto}.modal-form{display:flex;flex-direction:column;gap:16px}.modal-form .form-control-wrapper{max-width:100%}.modal-form .form-control-wrapper textarea{height:124px}::ng-deep .label-name{font-weight:600;color:var(--neutral-on-main-neutral-color)}.modal-body.overflow-visible{overflow:visible}.well.my-drop-zone{border:dashed 1px var(--themePrimButtonsBg-color);padding:32px;cursor:pointer;text-align:center;align-items:center;justify-content:center;background:transparent;margin-bottom:0;box-shadow:none}.well.my-drop-zone .drop-zone-text{color:var(--themePrimButtonsBg-color);font-size:14px;font-weight:600;line-height:21px;margin-bottom:4px}.well.my-drop-zone .drop-zone-format{color:var(--palette-neutral-variant-50);font-size:12px;font-weight:400;line-height:18px}.file-preview{display:flex;align-items:center;justify-content:space-between;gap:18px}.file-preview .thumbnail{width:100%;margin-bottom:0;padding:12px;border:0;background-color:var(--themePrimButtonsBg-8-color)}.file-preview .thumbnail .caption{display:flex;align-items:center;gap:12px;padding:0;color:var(--neutral-outline-color)}.file-preview .thumbnail .caption .file-name{color:var(--neutral-on-main-neutral-color)}.well.my-drop-zone:hover{background-color:var(--themePrimButtonsBg-4-color)}.well.my-drop-zone:active{background-color:var(--themePrimButtonsBg-8-color)}.file-preview-wrapper{display:flex;flex-direction:column;gap:12px}.form-submitted .invalid{color:var(--error-default-color)}.radio-button-md .switchers-group .switchers-inline label{width:156px}.textarea-description{font-size:12px;color:var(--neutral-outline-color);line-height:18px;margin-top:4px;white-space:pre-line}.overflow-inherit{overflow:inherit}.reset-btn{float:left;font-style:normal;font-weight:600;display:flex;align-items:center;flex-wrap:nowrap;white-space:nowrap;font-size:12px;line-height:18px;color:var(--themePrimButtonsBg-color);background-color:transparent;padding-left:0}.reset-btn:hover{color:var(--themePrimButtonsBg-hover-color)}.modal-body.select-popup-overflow{padding:0}.modal-body.select-popup-overflow-fh{padding:0;height:100vh}:host ::ng-deep .CodeMirror-scroll{min-height:126px;height:auto}:host ::ng-deep .CodeMirror{min-height:126px;height:auto}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "component", type: i7.SelectComponentClass, selector: "custom-select", inputs: ["valuesStream", "useClear", "clearLikeOption", "subtitle", "placeholder", "selectedDefaultIndex", "selectedDefaultValue", "formElement", "multiple", "search", "disable", "required", "direction", "maxItems", "dataQa", "canRemoveLastItem", "showFlag", "readOnly", "width", "withDescription", "withOperation", "isEmptyStateDescription", "createSelectOptionText", "selectedItemsOnTop", "startTypingText", "isSearchDelay"], outputs: ["valueChanged", "createOptionHandler", "searchHandler"] }, { kind: "directive", type: i8.FileDropDirective, selector: "[ng2FileDrop]", inputs: ["uploader"], outputs: ["fileOver", "onFileDrop"] }, { kind: "directive", type: i8.FileSelectDirective, selector: "[ng2FileSelect]", inputs: ["uploader"], outputs: ["onFileSelected"] }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i10.InputCounterComponent, selector: "epom-input-counter", inputs: ["step", "minQuantity", "maxQuantity", "icon", "formControl", "showIcon", "iconColor", "isMaterialIcon", "showQuantityButton", "placeholder", "isReadOnly", "iconPosition", "isIconOperationSign"] }, { kind: "component", type: i11.NameFormErrorComponent, selector: "epom-name-form-error", inputs: ["isSubmitted", "control"] }, { kind: "directive", type: i12.InputTrimDirective, selector: "input[trim], textarea[trim]", inputs: ["trim"] }, { kind: "component", type: i13.CodemirrorComponent, selector: "ngx-codemirror", inputs: ["className", "name", "autoFocus", "preserveScrollPosition", "options"], outputs: ["cursorActivity", "focusChange", "scroll", "drop"] }, { kind: "component", type: i14.PopupSelectComponentClass, selector: "epom-popup-select", inputs: ["filtersArr", "isDisabled", "selectedSet", "itemType", "popupType", "limitSelection", "includeType", "sortField", "isCountrySelect", "countryData", "isShowMoreAvailable", "showFilter", "emptyListMessage", "rightColumnTitle", "zeroSelectedItemsText", "zeroLeftColumnItemsText", "isSearchDelay"], outputs: ["popupSelectOutput", "updateData", "offsetHandler", "searchHandler"] }, { kind: "component", type: i15.GeoSelectComponentClass, selector: "epom-popup-geo", inputs: ["isDisabled", "countriesStream", "statesStream", "citiesStream", "initialValues"], outputs: ["chousenGeo", "newTargets"] }, { kind: "component", type: i16.GeoSspSelectComponentClass, selector: "epom-popup-geo-ssp", inputs: ["isDisabled", "countriesStream", "statesStream", "citiesStream", "initialValues"], outputs: ["chousenGeo", "newTargets"] }, { kind: "component", type: i17.PopupSelectVersionsComponentClass, selector: "epom-popup-select-versions", inputs: ["initialFormState", "targetingData"], outputs: ["popupSelectedOutput", "checkAvailabilityForm"] }, { kind: "component", type: i18.SelectWithSwapComponent, selector: "epom-popup-select-with-swap" }, { kind: "component", type: i19.SelectWithCommonButton, selector: "epom-popup-select-with-common" }, { kind: "component", type: i20.PopupCustomInputComponent, selector: "epom-popup-custom-input" }, { kind: "directive", type: i21.AutofocusDirective, selector: "[appAutofocus]", inputs: ["isSetAutofocus"] }, { kind: "component", type: i22.PopupStripeComponentClass, selector: "epom-popup-stripe", inputs: ["amount", "publicKey"], outputs: ["newDataFromStripeAPI"] }, { kind: "component", type: i23.UserActivityPopupComponent, selector: "epom-popup-user-activity", inputs: ["userActivityData"] }, { kind: "component", type: i24.TableConfigComponent, selector: "epom-popup-table-config", inputs: ["analyticTableConfig", "visibleColumns", "extraAdminColumns", "enabledPermissions", "isDisabled"], outputs: ["formUpdated"] }, { kind: "component", type: i25.CreativeDebugComponent, selector: "epom-popup-creative-debug", inputs: ["creativeDebugData"] }, { kind: "component", type: i26.PopupFilterByConditionComponent, selector: "epom-popup-filter-by-condition", inputs: ["initialData", "metricList", "selectType"], outputs: ["popupSelectedOutput"] }, { kind: "component", type: i27.PopupCheckboxGroupComponent, selector: "epom-popup-checkbox-group", inputs: ["initialData"], outputs: ["popupSelectedOutput"] }, { kind: "component", type: i28.CattaxCategoryComponent, selector: "epom-popup-cattax-category", inputs: ["initialData", "initialSelectedSet"], outputs: ["popupSelectedOutput"] }, { kind: "component", type: i29.OptionsSelectorComponent, selector: "epom-popup-options-selector" }, { kind: "component", type: i30.PopupUploadHistoryComponent, selector: "epom-popup-upload-history", inputs: ["data"] }, { kind: "component", type: i31.CalculateModifiersComponent, selector: "epom-popup-calculate-modifiers", inputs: ["campaign", "bidModifiers"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PopupComponentClass, decorators: [{
            type: Component,
            args: [{ selector: 'epom-popup', template: "<div\n  class=\"modal fade\"\n  [ngClass]=\"{'in': modalShowed, 'hide': modalDisplayNone, 'show': !modalDisplayNone, 'modal-spinner':popupData.spinner}\"\n  tabindex=\"-1\"\n  role=\"dialog\"\n  aria-labelledby=\"myModalLabel\"\n>\n  <div class=\"double-bounce\" *ngIf=\"popupData.spinner\">\n    <div class=\"double-bounce-container\">\n      <div class=\"double-bounce1\"></div>\n      <div class=\"double-bounce2\"></div>\n    </div>\n  </div>\n  <div\n    class=\"modal-dialog modal-centered modal-{{popupData.width}}\"\n    role=\"document\"\n    *ngIf=\"!!popupData.title || !!popupData.body\"\n  >\n    <div\n      class=\"modal-content modal-height-{{popupData.height}} type-{{popupData.type}}\n{{popupData.overflow && popupData.overflow}}\"\n      [attr.data-qa]=\"'PopUpContent'\"\n    >\n      <div class=\"modal-header\">\n        <section class=\"modal-title-section\">\n          <h4 class=\"modal-title\" id=\"myModalLabel\">{{ popupData.title }}</h4>\n          <span\n            *ngIf=\"popupData.closeButton\"\n            class=\"material-icons material-icons-outlined button-icon button-icon-large button-icon-outline\"\n            (click)=\"buttonClick('close-button')\"\n          >\n            close\n          </span>\n        </section>\n\n        <section *ngIf=\"popupData.subtitle\" class=\"modal-sub-title-section\" [innerHTML]=\"popupData.subtitle\"></section>\n      </div>\n\n      <div class=\"modal-body {{popupData.overflow}}\">\n        <div\n          class=\"select-popup {{popupData.overflow}}\"\n          *ngIf=\"\n                 !!popupData.dataObject\n                 && popupData.type !== 'select-with-swap'\n                 && popupData.type !== 'select-with-common'\n                 && popupData.type !== 'options-selector'\n                 && popupData.type !== 'select-versions'\n                 && popupData.type !== 'filter-by-condition'\n                 && popupData.type !== 'checkbox-group'\n                 && popupData.type !== 'cattax-category'\n                 && popupData.type !== 'stripe'\n                 && popupData.type !== 'custom-input'\n                 && popupData.type !== 'calculate-modifiers'\n              \"\n        >\n          <epom-popup-select\n            [isSearchDelay]=\"popupData.isSearchDelay\"\n            [isDisabled]=\"popupData.activityDisabled\"\n            [filtersArr]=\"popupData.dataObject.list\"\n            [selectedSet]=\"popupData.dataObject.selected\"\n            [popupType]=\"popupData.type\"\n            [limitSelection]=\"popupData.limitSelection\"\n            [sortField]=\"popupData.sortField\"\n            [isCountrySelect]=\"popupData.isCountrySelect\"\n            [countryData]=\"popupData.countryData\"\n            [isShowMoreAvailable]=\"popupData.isShowMoreAvailable\"\n            [showFilter]=\"popupData.showFilter\"\n            [emptyListMessage]=\"popupData.dataObject.emptyListMessage\"\n            [zeroSelectedItemsText]=\"popupData.dataObject.zeroSelectedItemsText\"\n            [zeroLeftColumnItemsText]=\"popupData.dataObject.zeroLeftColumnItemsText\"\n            [rightColumnTitle]=\"popupData.dataObject?.rightColumnTitle\"\n            (updateData)=\"updateData($event)\"\n            (offsetHandler)=\"offsetHandler($event)\"\n            (searchHandler)=\"searchHandler($event)\"\n            (popupSelectOutput)=\"updateSelectedItems($event)\"\n          >\n          </epom-popup-select>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"!!popupData.userActivityData\">\n          <epom-popup-user-activity [userActivityData]=\"popupData.userActivityData\"></epom-popup-user-activity>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"!!popupData.dataObject && popupData.type === 'custom-input'\">\n          <epom-popup-custom-input\n            [isDisabled]=\"popupData.activityDisabled\"\n            [filtersArr]=\"popupData.dataObject.list\"\n            [selectedSet]=\"popupData.dataObject.selected\"\n            [limitSelection]=\"popupData.limitSelection\"\n            [popupType]=\"popupData.type\"\n            (popupSelectOutput)=\"updateSelectedItems($event)\"\n          >\n          </epom-popup-custom-input>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"!!popupData.dataObject && popupData.type === 'select-versions'\">\n          <epom-popup-select-versions\n            [targetingData]=\"popupData.dataObject.versionsData\"\n            [initialFormState]=\"popupData.dataObject.targetingForm\"\n            (checkAvailabilityForm)=\"checkAvailabilityForm($event)\"\n            (popupSelectedOutput)=\"updateSelectedItems($event)\"\n          >\n          </epom-popup-select-versions>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"!!popupData.dataObject && popupData.type === 'filter-by-condition'\">\n          <epom-popup-filter-by-condition\n            [initialData]=\"popupData.dataObject.initialData\"\n            [metricList]=\"popupData.dataObject.metricList\"\n            (popupSelectedOutput)=\"updateFormData($event)\"\n          >\n          </epom-popup-filter-by-condition>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"!!popupData.dataObject && popupData.type === 'checkbox-group'\">\n          <epom-popup-checkbox-group\n            [initialData]=\"popupData.dataObject.initialData\"\n            (popupSelectedOutput)=\"updateSelectedItems($event)\"\n          >\n          </epom-popup-checkbox-group>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"!!popupData.dataObject && popupData.type === 'cattax-category'\">\n          <epom-popup-cattax-category\n            [initialData]=\"popupData.dataObject.initialData\"\n            [initialSelectedSet]=\"popupData.dataObject.selected\"\n            (popupSelectedOutput)=\"updateSelectedItems($event)\"\n          >\n          </epom-popup-cattax-category>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"!!popupData.dataObject && popupData.type === 'calculate-modifiers'\">\n          <epom-popup-calculate-modifiers\n            [campaign]=\"popupData.dataObject.campaign\"\n            [bidModifiers]=\"popupData.dataObject.bidModifiers\"\n          >\n          </epom-popup-calculate-modifiers>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"!!popupData.dataObject && popupData.type === 'select-with-common'\">\n          <epom-popup-select-with-common\n            [isSearchDelay]=\"popupData.isSearchDelay\"\n            [isDisabled]=\"popupData.activityDisabled\"\n            [filtersArr]=\"popupData.dataObject.list\"\n            [selectedSet]=\"popupData.dataObject.selected\"\n            [isShowMoreAvailable]=\"popupData.isShowMoreAvailable\"\n            [itemType]=\"popupData.itemType\"\n            [limitSelection]=\"popupData.limitSelection\"\n            [popupType]=\"popupData.type\"\n            (offsetHandler)=\"offsetHandler($event)\"\n            (searchHandler)=\"searchHandler($event)\"\n            (popupSelectOutput)=\"updateSelectedItems($event)\"\n          >\n          </epom-popup-select-with-common>\n        </div>\n\n        <div *ngIf=\"!!popupData.dataObject && popupData.type === 'options-selector'\" class=\"{{popupData.overflow}}\">\n          <epom-popup-options-selector\n            [isSearchDelay]=\"popupData.isSearchDelay\"\n            [isDisabled]=\"popupData.activityDisabled\"\n            [filtersArr]=\"popupData.dataObject.list\"\n            [selectedSet]=\"popupData.dataObject.selected\"\n            [itemType]=\"popupData.itemType\"\n            [limitSelection]=\"popupData.limitSelection\"\n            [isShowMoreAvailable]=\"popupData.isShowMoreAvailable\"\n            [popupType]=\"popupData.type\"\n            (offsetHandler)=\"offsetHandler($event)\"\n            (searchHandler)=\"searchHandler($event)\"\n            (popupSelectOutput)=\"updateSelectedItems($event)\"\n          ></epom-popup-options-selector>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"!!popupData.dataObject && popupData.type === 'select-with-swap'\">\n          <epom-popup-select-with-swap\n            [isDisabled]=\"popupData.activityDisabled\"\n            [filtersArr]=\"popupData.dataObject.list\"\n            [selectedSet]=\"popupData.dataObject.selected\"\n            [popupType]=\"popupData.type\"\n            [includeType]=\"popupData.includeType\"\n            [limitSelection]=\"popupData.limitSelection\"\n            (popupSelectOutput)=\"updateSelectedItems($event)\"\n          >\n          </epom-popup-select-with-swap>\n        </div>\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"popupData.type === 'upload-history'\">\n          <epom-popup-upload-history [data]=\"popupData.data\"> </epom-popup-upload-history>\n        </div>\n\n        <div class=\"{{popupData.overflow}} select-popup\" *ngIf=\"!!popupData.geoObject\">\n          <epom-popup-geo\n            [isDisabled]=\"popupData.activityDisabled\"\n            [countriesStream]=\"popupData.geoObject.countriesStream\"\n            [statesStream]=\"popupData.geoObject.statesStream\"\n            [citiesStream]=\"popupData.geoObject.citiesStream\"\n            [initialValues]=\"popupData.geoObject.initialValues\"\n            (chousenGeo)=\"sendSelectQuery($event)\"\n            (newTargets)=\"updateSelectedItems($event)\"\n          >\n          </epom-popup-geo>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"!!popupData.geoObjectSSP\">\n          <epom-popup-geo-ssp\n            [isDisabled]=\"popupData.activityDisabled\"\n            [countriesStream]=\"popupData.geoObjectSSP.countriesStream\"\n            [statesStream]=\"popupData.geoObjectSSP.statesStream\"\n            [citiesStream]=\"popupData.geoObjectSSP.citiesStream\"\n            [initialValues]=\"popupData.geoObjectSSP.initialValues\"\n            (chousenGeo)=\"sendSelectQuery($event)\"\n            (newTargets)=\"updateSelectedItems($event)\"\n          >\n          </epom-popup-geo-ssp>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"popupData.type === 'tableConfig'\">\n          <epom-popup-table-config\n            [analyticTableConfig]=\"popupData.analyticTableConfig\"\n            [visibleColumns]=\"popupData.visibleColumns\"\n            [extraAdminColumns]=\"popupData.extraAdminColumns\"\n            [enabledPermissions]=\"popupData.enabledPermissions\"\n            (formUpdated)=\"updateAbstractData($event)\"\n          >\n          </epom-popup-table-config>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"popupData.type === 'creativeDebug'\">\n          <epom-popup-creative-debug [creativeDebugData]=\"popupData.creativeDebugData\"></epom-popup-creative-debug>\n        </div>\n\n        <div class=\"{{popupData.overflow}}\" *ngIf=\"popupData.type === 'stripe'\">\n          <epom-popup-stripe\n            [amount]=\"popupData.amount\"\n            [publicKey]=\"popupData.publicKey\"\n            (newDataFromStripeAPI)=\"updateAbstractData($event)\"\n          >\n          </epom-popup-stripe>\n        </div>\n\n        <div\n          class=\"{{popupData.overflow}}\"\n          [innerHTML]=\"popupData.body\"\n          [ngClass]=\"{'text-center': popupData.center}\"\n          *ngIf=\"popupData.body\"\n        ></div>\n\n        <div\n          class=\"{{popupData.overflow}}\"\n          *ngIf=\"!!popupData.fields?.length &&\n        (!popupData.dataObject\n        && !popupData.geoObject\n        && popupData.type !== 'tableConfig'\n        && popupData.type !== 'preview')\"\n        >\n          <form\n            [formGroup]=\"popupForm\"\n            class=\"modal-form\"\n            #popupFormElement\n            [ngClass]=\"{'custom-popup-form': popupData.customPopupClass}\"\n          >\n            <ng-container *ngFor=\"let field of getVisibleFields()\">\n              <div\n                class=\"form-control-wrapper\"\n                *ngIf=\"!field.hiddenOnDefault || popupForm.get(field.showControlName).value === field.showControlValue\"\n              >\n                <div *ngIf=\"field.type === 'select'\">\n                  <label class=\"control-label select-label\" *ngIf=\"field.label\"\n                    >{{ field.label }}<span\n                      class=\"required-item\"\n                      [ngClass]=\"{'invalid': popupForm.get(field.name).invalid}\"\n                      *ngIf=\"field['required'] ? field['required'] : false\"\n                      >*</span\n                    >\n                  </label>\n                  <input type=\"hidden\" formControlName=\"{{field.name}}\" />\n                  <custom-select\n                    [isSearchDelay]=\"field.isSearchDelay\"\n                    [placeholder]=\"field.placeholder\"\n                    [valuesStream]=\"dataStreams[field.name]\"\n                    [search]=\"(field['search'] !== 'undefined' ? field['search'] : true)\"\n                    [formElement]=\"popupForm.get(field.name)\"\n                    [useClear]=\"field['useClear'] ? field['useClear'] : false\"\n                    [clearLikeOption]=\"field['useClear'] ? field['useClear'] : false\"\n                    [dataQa]=\"field.name\"\n                    [startTypingText]=\"field?.startTypingText\"\n                    (searchHandler)=\"searchHandler($event)\"\n                  ></custom-select>\n                </div>\n\n                <div *ngIf=\"field.type === 'upload'\">\n                  <div\n                    ng2FileDrop\n                    [ngClass]=\"{\n                    'nv-file-over': hasBaseDropZoneOver,\n                    'nv-file-error': addFileError,\n                    'hidden': uploader?.queue?.length > 0\n                    }\"\n                    (fileOver)=\"fileOverBase($event)\"\n                    [uploader]=\"uploader\"\n                    (click)=\"fileInputField.click()\"\n                    class=\"well my-drop-zone\"\n                  >\n                    <p class=\"drop-zone-text\">\n                      {{ field.placeholder ? field.placeholder : 'Drop file here or click to upload List' }}\n                    </p>\n                    <div class=\"drop-zone-format\">Format: {{ field?.format ? field.format : '(.csv, .txt)' }}</div>\n                  </div>\n                  <small *ngIf=\"addFileError\" class=\"text-danger\"><sup>*</sup> {{ addFileErrorMsg }}</small>\n\n                  <input\n                    data-qa=\"file\"\n                    type=\"file\"\n                    ng2FileSelect\n                    [uploader]=\"uploader\"\n                    multiple\n                    class=\"hidden\"\n                    #fileInputField\n                  />\n\n                  <div class=\"file-preview-wrapper\">\n                    <div class=\"file-preview\" *ngFor=\"let item of uploader.queue\">\n                      <div class=\"thumbnail\">\n                        <div class=\"caption text-left\" *ngIf=\"!item?.file?.srcLocal\">\n                          <span class=\"material-icons material-icons-outlined\"> insert_drive_file </span>\n                          <span class=\"file-name\">{{ item?.file?.name }}</span>\n                        </div>\n                      </div>\n\n                      <span\n                        class=\"material-icons material-icons-outlined button-icon button-icon-outline button-icon-large\"\n                        (click)=\"removeFile(item?.file?.name)\"\n                      >\n                        delete_outline\n                      </span>\n                    </div>\n                  </div>\n                </div>\n\n                <div class=\"form-group\" *ngIf=\"field.type === 'switcher'\">\n                  <label class=\"control-label\">{{ field.label }}</label>\n                  <div class=\"popup-switcher\">\n                    <mat-slide-toggle formControlName=\"{{field.name}}\" [checked]=\"field.value\">\n                      <div *ngIf=\"!field.hiddenValue\">\n                        <span *ngIf=\"!popupForm.get(field.name).value\" class=\"switcher-text text-off\">\n                          {{ field.switcherOptions ? field.switcherOptions.offState : 'Off' }}</span\n                        >\n                        <span *ngIf=\"popupForm.get(field.name).value\" class=\"switcher-text text-on\">\n                          {{ field.switcherOptions ? field.switcherOptions.onState : 'On' }}</span\n                        >\n                      </div>\n                    </mat-slide-toggle>\n                    <label class=\"control-label\">{{ field.placeholder }}</label>\n                  </div>\n                </div>\n\n                <div *ngIf=\"field.type === 'radio'\" [class]=\"field.class\">\n                  <div class=\"switchers-group\">\n                    <div class=\"switchers-inline\" *ngFor=\"let radio of field.radios\">\n                      <input\n                        [attr.checked]=\"radio.value === field.value ? 'checked' : null\"\n                        [attr.data-qa]=\"radio.value\"\n                        class=\"switchers\"\n                        id=\"{{radio.id}}\"\n                        formControlName=\"{{field.name}}\"\n                        type=\"radio\"\n                        value=\"{{radio.value}}\"\n                        *ngIf=\"!radio.disabled\"\n                      />\n                      <label for=\"{{radio.id}}\">{{ radio.name }}</label>\n                    </div>\n                  </div>\n                </div>\n\n                <div *ngIf=\"field.type === 'checkbox'\">\n                  <span class=\"switcher\">\n                    <input\n                      formControlName=\"{{field.name}}\"\n                      [attr.data-qa]=\"field.name\"\n                      class=\"switchers\"\n                      id=\"{{field.name}}-popup\"\n                      [checked]=\"field.value\"\n                      type=\"checkbox\"\n                    />\n                    <label class=\"bg-success column-label\" for=\"{{field.name}}-popup\">{{ field.title }}</label>\n                  </span>\n                </div>\n\n                <epom-name-form-error\n                  *ngIf=\"field.showNameErrorMessage\"\n                  [control]=\"popupForm.get(field.name)\"\n                  [isSubmitted]=\"exitMessage === 'submit'\"\n                ></epom-name-form-error>\n\n                <input\n                  *ngIf=\"field.hasOwnProperty('maxlength') && field.hasOwnProperty('mask') && field.type !== 'checkbox' && field.type !== 'textarea' && field.type !== 'select' && field.type !== 'switcher' && field.type !== 'radio' && field.type !== 'upload' && field.type !== 'number' && field.type !== 'code'\"\n                  [attr.data-qa]=\"field.name\"\n                  type=\"{{field.type}}\"\n                  formControlName=\"{{field.name}}\"\n                  value=\"{{field.value}}\"\n                  maxlength=\"{{field.maxlength}}\"\n                  appAutofocus\n                  [isSetAutofocus]=\"field.hasInputAutoFocus\"\n                  placeholder=\"{{field.placeholder}}\"\n                  class=\"form-control\"\n                  [textMask]=\"field.mask\"\n                />\n                <input\n                  *ngIf=\"!field.hasOwnProperty('maxlength') && field.hasOwnProperty('mask') && field.type !== 'checkbox' && field.type !== 'textarea' && field.type !== 'select' && field.type !== 'switcher' && field.type !== 'radio' && field.type !== 'upload' && field.type !== 'number' && field.type !== 'code'\"\n                  [attr.data-qa]=\"field.name\"\n                  type=\"{{field.type}}\"\n                  formControlName=\"{{field.name}}\"\n                  value=\"{{field.value}}\"\n                  appAutofocus\n                  [isSetAutofocus]=\"field.hasInputAutoFocus\"\n                  placeholder=\"{{field.placeholder}}\"\n                  class=\"form-control\"\n                  [textMask]=\"field.mask\"\n                />\n                <input\n                  *ngIf=\"field.hasOwnProperty('maxlength') && !field.hasOwnProperty('mask') && field.type !== 'checkbox' && field.type !== 'textarea' && field.type !== 'select' && field.type !== 'switcher' && field.type !== 'radio' && field.type !== 'upload' && field.type !== 'number' && field.type !== 'code'\"\n                  [attr.data-qa]=\"field.name\"\n                  type=\"{{field.type}}\"\n                  formControlName=\"{{field.name}}\"\n                  value=\"{{field.value}}\"\n                  maxlength=\"{{field.maxlength}}\"\n                  appAutofocus\n                  [isSetAutofocus]=\"field.hasInputAutoFocus\"\n                  placeholder=\"{{field.placeholder}}\"\n                  class=\"form-control\"\n                />\n                <input\n                  *ngIf=\"!field.trim && !field.hasOwnProperty('maxlength')\n                 && !field.hasOwnProperty('mask') && field.type !== 'checkbox'\n                 && field.type !== 'textarea' && field.type !== 'select'\n                 && field.type !== 'switcher' && field.type !== 'radio'\n                 && field.type !== 'upload' && field.type !== 'number' && field.type !== 'code'\"\n                  [attr.data-qa]=\"field.name\"\n                  type=\"{{field.type}}\"\n                  formControlName=\"{{field.name}}\"\n                  value=\"{{field.value}}\"\n                  appAutofocus\n                  [isSetAutofocus]=\"field.hasInputAutoFocus\"\n                  placeholder=\"{{field.placeholder}}\"\n                  class=\"form-control\"\n                />\n                <input\n                  *ngIf=\"field.trim && !field.hasOwnProperty('maxlength') && !field.hasOwnProperty('mask') && field.type !== 'checkbox' && field.type !== 'textarea' && field.type !== 'select' && field.type !== 'switcher' && field.type !== 'radio' && field.type !== 'upload' && field.type !== 'number' && field.type !== 'code'\"\n                  [attr.data-qa]=\"field.name\"\n                  type=\"{{field.type}}\"\n                  formControlName=\"{{field.name}}\"\n                  value=\"{{field.value}}\"\n                  appAutofocus\n                  trim=\"blur\"\n                  [isSetAutofocus]=\"field.hasInputAutoFocus\"\n                  placeholder=\"{{field.placeholder}}\"\n                  class=\"form-control\"\n                />\n\n                <div *ngIf=\"field.type === 'textarea'\">\n                  <textarea\n                    [attr.data-qa]=\"field.name\"\n                    rows=\"8\"\n                    formControlName=\"{{field.name}}\"\n                    value=\"{{field.value}}\"\n                    placeholder=\"{{field.placeholder}}\"\n                    class=\"form-control {{field.class}}\"\n                  >\n                  </textarea>\n\n                  <p *ngIf=\"field.description\" class=\"textarea-description\">{{ field.description }}</p>\n                </div>\n\n                <div *ngIf=\"field.type === 'number'\">\n                  <epom-input-counter\n                    ngDefaultControl\n                    [showQuantityButton]=\"field.showQuantityButton\"\n                    [formControl]=\"popupForm.get(field.name)\"\n                    [attr.data-qa]=\"field.name\"\n                    [placeholder]=\"field.placeholder\"\n                    [minQuantity]=\"field.minQuantity\"\n                  >\n                  </epom-input-counter>\n                </div>\n\n                <div *ngIf=\"field.type === 'code'\">\n                  <ngx-codemirror\n                    [attr.data-qa]=\"field.name\"\n                    [options]=\"codemirrorOptions\"\n                    formControlName=\"{{field.name}}\"\n                  ></ngx-codemirror>\n                </div>\n\n                <label\n                  [attr.data-qa]=\"field.name + 'Label'\"\n                  class=\"control-label\"\n                  *ngIf=\"field.type !== 'checkbox' && field.type !== 'select'\n              && field.type !== 'switcher' && field.type !== 'radio' && field.type !== 'upload'\"\n                  >{{ field.label }}<span\n                    class=\"required-item\"\n                    [ngClass]=\"{'invalid': popupForm.get(field.name).invalid}\"\n                    *ngIf=\"field['required'] ? field['required'] : false\"\n                    >*</span\n                  >\n                </label>\n              </div>\n            </ng-container>\n          </form>\n        </div>\n      </div>\n\n      <div style=\"color: red; padding-left: 20px\" *ngIf=\"showEmptyAllColumnsErrorMsg\">\n        <span>You should select at least one column.</span>\n      </div>\n\n      <div class=\"modal-footer text-{{popupData.buttonsPosition}}\" *ngIf=\"popupData.buttons\">\n        <button\n          *ngFor=\"let button of popupData.buttons\"\n          [attr.data-qa]=\"button.event\"\n          class=\"button button-{{getButton(button.class)}} modal-btn\"\n          [ngClass]=\"button.additionalClass\"\n          (click)=\"buttonClick(button.event)\"\n          [disabled]=\"button.text === 'OK' && !isSubmitAvailable\"\n        >\n          {{ button.text }}\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div\n    (click)=\"close($event)\"\n    class=\"modal-backdrop {{popupData.overlayTheme}} fade\"\n    [ngClass]=\"{'in': modalShowed, 'hide': modalDisplayNone, 'show': !modalDisplayNone, 'modal-backdrop-spinner':popupData.spinner}\"\n  ></div>\n</div>\n", styles: [":root{--palette-primary-0: #000000;--palette-primary-10: #001A41;--palette-primary-20: #002E69;--palette-primary-30: #004493;--palette-primary-40: #005BC0;--palette-primary-50: #2E74DF;--palette-primary-60: #4F8FFB;--palette-primary-70: #80ABFF;--palette-primary-80: #ADC6FF;--palette-primary-90: #D8E2FF;--palette-primary-95: #EDF0FF;--palette-primary-99: #FEFBFF;--palette-primary-100: #FFFFFF;--palette-secondary-0: #000000;--palette-secondary-10: #04006D;--palette-secondary-20: #1E2084;--palette-secondary-30: #373A9B;--palette-secondary-40: #4F54B4;--palette-secondary-50: #686DCF;--palette-secondary-60: #8287EB;--palette-secondary-70: #9FA3FF;--palette-secondary-80: #C0C1FF;--palette-secondary-90: #E1E0FF;--palette-secondary-95: #F1EFFF;--palette-secondary-99: #FFFBFF;--palette-secondary-100: #FFFFFF;--palette-tertiary-0: #000000;--palette-tertiary-10: #29132D;--palette-tertiary-20: #402843;--palette-tertiary-30: #583E5B;--palette-tertiary-40: #715573;--palette-tertiary-50: #8B6D8D;--palette-tertiary-60: #A687A8;--palette-tertiary-70: #C2A1C3;--palette-tertiary-80: #DEBCDF;--palette-tertiary-90: #FBD7FC;--palette-tertiary-95: #FFEBFC;--palette-tertiary-99: #FFFBFF;--palette-tertiary-100: #FFFFFF;--palette-error-0: #000000;--palette-error-10: #410002;--palette-error-20: #690005;--palette-error-30: #93000A;--palette-error-40: #BA1A1A;--palette-error-50: #DE3730;--palette-error-60: #FF5449;--palette-error-70: #FF897D;--palette-error-80: #FFB4AB;--palette-error-90: #FFDAD6;--palette-error-95: #FFEDEA;--palette-error-99: #FFFBFF;--palette-error-100: #FFFFFF;--palette-neutral-0: #000000;--palette-neutral-10: #1A1C1E;--palette-neutral-20: #2F3033;--palette-neutral-30: #46474A;--palette-neutral-40: #5D5E62;--palette-neutral-50: #76777A;--palette-neutral-60: #909094;--palette-neutral-70: #ABABAE;--palette-neutral-80: #C7C6CA;--palette-neutral-90: #E3E2E6;--palette-neutral-95: #F1F0F4;--palette-neutral-99: #FDFCFF;--palette-neutral-100: #FFFFFF;--palette-neutral-variant-0: #000000;--palette-neutral-variant-10: #191C22;--palette-neutral-variant-20: #2E3038;--palette-neutral-variant-30: #44474F;--palette-neutral-variant-40: #5C5E66;--palette-neutral-variant-50: #74777F;--palette-neutral-variant-60: #8E9099;--palette-neutral-variant-70: #A9ABB4;--palette-neutral-variant-80: #C4C6D0;--palette-neutral-variant-90: #E1E2EC;--palette-neutral-variant-95: #EFF0FA;--palette-neutral-variant-99: #FEFBFF;--palette-neutral-variant-100: #FFFFFF;--palette-success-0: #000000;--palette-success-10: #052100;--palette-success-20: #0D3900;--palette-success-30: #175200;--palette-success-40: #216D00;--palette-success-50: #2C8900;--palette-success-60: #48A424;--palette-success-70: #62C03E;--palette-success-80: #7DDD57;--palette-success-90: #98FA70;--palette-success-95: #CCFFB2;--palette-success-99: #F7FFED;--palette-success-100: #FFFFFF;--palette-warning-0: #000000;--palette-warning-10: #261A00;--palette-warning-20: #402D00;--palette-warning-30: #5C4300;--palette-warning-40: #795900;--palette-warning-50: #987100;--palette-warning-60: #B88900;--palette-warning-70: #D9A200;--palette-warning-80: #FBBC0C;--palette-warning-90: #FFDFA0;--palette-warning-95: #FFEFD5;--palette-warning-99: #FFFBFF;--palette-warning-100: #FFFFFF}:root{--primary-color: var(--themePrimButtonsBg-color, #005bc0);--primary-light: var(--themePrimButtonsBg-color);--on-primary-light: var(--on-themePrimButtonsBg-color);--on-primary-container-light: var(--on-themePrimButtonsBg-container-color);--error-light: var(--error-default-color);--on-error-light: var(--error-on-color);--error-container-light: var(--palette-error-90);--on-error-container-light: var(--palette-error-10);--background-light: var(--palette-neutral-100);--on-background-light: var(--neutral-on-main-neutral-color, #1a1c1e);--surface-light: var(--palette-neutral-99);--on-surface-light: var(--neutral-on-main-neutral-color, #1a1c1e);--surface-variant-light: var(--neutral-neutral-color, #e1e2ec);--surface-neutral-light-30pct: rgba(26, 28, 30, .3);--on-surface-variant-light: var(--palette-neutral-variant-30);--outline-light: var(--palette-neutral-variant-50);--disable-light: rgba(26, 28, 30, .12);--inverse-surface-light: var(--palette-neutral-20);--on-inverse-surface-light: var(--palette-neutral-variant-95);--outline-variant-light: var(--neutral-outline-variant-color);--on-disable-light: rgba(26, 28, 30, .3);--success-light: var(--success-default-color);--on-success-light: var(--palette-success-100);--primary-success-light: var(--palette-success-95);--on-success-container-light: var(--palette-success-30);--warning-light: var(--palette-warning-50);--on-warning-light: var(--palette-warning-100);--warning-container-light: var(--palette-warning-95);--on-warning-container-light: var(--palette-warning-30);--skeletons-gradient-light: linear-gradient(90deg, var(--themePrimButtonsBg-4-color) 0%, var(--themePrimButtonsBg-4-color) 50.01%, var(--themePrimButtonsBg-8-color) 100%);--overlay-light: rgba(var(--palette-neutral-10), .8);--primary-hover-light: var(--themePrimButtonsBg-hover-color);--error-hover-light: var(--error-hover-color);--success-hover-light: var(--success-hover-color);--warning-hover-light: var(--warning-hover-color);--outline-hover-light: var(--palette-neutral-variant-60);--neutral-light: var(--palette-neutral-variant-90);--success-light-12pct: rgba(44, 137, 0, .12);--surface-light-8pct: var(--neutral-on-surface-variant-8-color);--surface-light-30pct: rgba(26, 28, 30, .3);--font-headline-2: 20px;--font-headline-3: 16px;--font-headline-4: 14px;--font-small-caption: 10px;--font-weight-bold: 700;--font-weight-semibold: 600;--font-weight-regular: 400;--font-body-1: 16px;--font-body-2: 14px;--font-body-3: 13px;--font-medium-button: 12px;--font-caption: 12px;--space-md: 16px;--space-sm: 8px;--light-success: #006d3e;--dark-outline: #A9ABB4;--dark-basic: #1A1C1E;--dark-basic-on-main-neutral: #E3E2E6}.modal-sub-title-section{font-size:var(--font-body-2);font-weight:var(--font-weight-regular);line-height:21px;color:var(--outline-light);padding-top:16px;max-width:720px}.select-popup{flex:1;overflow:hidden;display:flex}.modal-body:has(.select-popup){padding:0}::ng-deep .cdk-overlay-container{z-index:100000000}.overflow-visible{overflow:visible}.modal-dialog{z-index:100000000}:host ::ng-deep p{margin:0}:host ::ng-deep .modal-sub-title-section-main-text{color:var(--neutral-on-main-neutral-color);font-weight:600}.modal-body{display:flex;flex-direction:column;gap:16px;margin:24px 0;padding:0 24px;overflow:auto}.modal-form{display:flex;flex-direction:column;gap:16px}.modal-form .form-control-wrapper{max-width:100%}.modal-form .form-control-wrapper textarea{height:124px}::ng-deep .label-name{font-weight:600;color:var(--neutral-on-main-neutral-color)}.modal-body.overflow-visible{overflow:visible}.well.my-drop-zone{border:dashed 1px var(--themePrimButtonsBg-color);padding:32px;cursor:pointer;text-align:center;align-items:center;justify-content:center;background:transparent;margin-bottom:0;box-shadow:none}.well.my-drop-zone .drop-zone-text{color:var(--themePrimButtonsBg-color);font-size:14px;font-weight:600;line-height:21px;margin-bottom:4px}.well.my-drop-zone .drop-zone-format{color:var(--palette-neutral-variant-50);font-size:12px;font-weight:400;line-height:18px}.file-preview{display:flex;align-items:center;justify-content:space-between;gap:18px}.file-preview .thumbnail{width:100%;margin-bottom:0;padding:12px;border:0;background-color:var(--themePrimButtonsBg-8-color)}.file-preview .thumbnail .caption{display:flex;align-items:center;gap:12px;padding:0;color:var(--neutral-outline-color)}.file-preview .thumbnail .caption .file-name{color:var(--neutral-on-main-neutral-color)}.well.my-drop-zone:hover{background-color:var(--themePrimButtonsBg-4-color)}.well.my-drop-zone:active{background-color:var(--themePrimButtonsBg-8-color)}.file-preview-wrapper{display:flex;flex-direction:column;gap:12px}.form-submitted .invalid{color:var(--error-default-color)}.radio-button-md .switchers-group .switchers-inline label{width:156px}.textarea-description{font-size:12px;color:var(--neutral-outline-color);line-height:18px;margin-top:4px;white-space:pre-line}.overflow-inherit{overflow:inherit}.reset-btn{float:left;font-style:normal;font-weight:600;display:flex;align-items:center;flex-wrap:nowrap;white-space:nowrap;font-size:12px;line-height:18px;color:var(--themePrimButtonsBg-color);background-color:transparent;padding-left:0}.reset-btn:hover{color:var(--themePrimButtonsBg-hover-color)}.modal-body.select-popup-overflow{padding:0}.modal-body.select-popup-overflow-fh{padding:0;height:100vh}:host ::ng-deep .CodeMirror-scroll{min-height:126px;height:auto}:host ::ng-deep .CodeMirror{min-height:126px;height:auto}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.PopupServiceClass }, { type: i2.FormBuilder }, { type: i0.Renderer2 }, { type: i3.Router }, { type: i4.KeyboardService }]; }, propDecorators: { popupFormElement: [{
                type: ViewChild,
                args: ['popupFormElement']
            }] } });
//# sourceMappingURL=data:application/json;base64, 