nitrozen/fesm5/nitrozen.js

import { __decorate, __assign, __param } from 'tslib';
import { EventEmitter, Input, Output, Component, NgModule, forwardRef, ChangeDetectorRef, HostBinding, ViewChild, ViewEncapsulation, Inject, CUSTOM_ELEMENTS_SCHEMA, HostListener, Directive } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule, MatProgressSpinnerModule, MatCheckboxModule, MatRadioModule, MatInputModule, MatSlideToggleModule, MatTooltipModule, MatSnackBarRef, MAT_SNACK_BAR_DATA, MatIconModule, MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatProgressBarModule } from '@angular/material';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators, FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { MatSelectModule } from '@angular/material/select';
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
import { HttpClient } from '@angular/common/http';
import { ImageCropperModule } from 'ngx-image-cropper';

var ButtonComponent = /** @class */ (function () {
    function ButtonComponent() {
        this.clicked = new EventEmitter();
    }
    ButtonComponent.prototype.ngOnInit = function () {
        this.theme = this.theme ? this.theme : 'primary';
    };
    ButtonComponent.prototype.clickedButton = function (event) {
        // this.showProgress = true;
        this.btnWidth = event.currentTarget['offsetWidth'] - 80;
        this.clicked.emit(event);
    };
    __decorate([
        Input()
    ], ButtonComponent.prototype, "showProgress", void 0);
    __decorate([
        Input()
    ], ButtonComponent.prototype, "isContained", void 0);
    __decorate([
        Input()
    ], ButtonComponent.prototype, "theme", void 0);
    __decorate([
        Input()
    ], ButtonComponent.prototype, "focused", void 0);
    __decorate([
        Input()
    ], ButtonComponent.prototype, "large", void 0);
    __decorate([
        Input()
    ], ButtonComponent.prototype, "isStroked", void 0);
    __decorate([
        Input()
    ], ButtonComponent.prototype, "shouldBeDisabled", void 0);
    __decorate([
        Input()
    ], ButtonComponent.prototype, "showIcon", void 0);
    __decorate([
        Output()
    ], ButtonComponent.prototype, "clicked", void 0);
    ButtonComponent = __decorate([
        Component({
            selector: 'nitrozen-button',
            template: "<div [ngClass]=\"{\n    'primary-section': theme === 'primary' ,\n    'secondary-section': theme === 'accent'\n  }\">\n<button mat-raised-button  class=\"btn-nitrozen\" \n[ngClass]=\"{\n    'mat-stroked-button': isStroked,\n    'mat-flat-button':isContained,\n    'btn-focused':focused,\n    'hover-state':showProgress,\n    'large-btn':large\n  }\"\n  [disabled]=\"shouldBeDisabled\"\n  (click)=\"clickedButton($event)\"\n\n>\n\n<div class=\"btn-icon-show\">\n  <div class=\"btn-txt\" \n  [ngClass]=\"{\n    'btn-show-icn': showIcon,\n    'btn-stroke-color':isStroked,\n    'btn-contained-color':isContained,\n    'btn-progress': !showProgress,\n    'btn-notprogress' : showProgress\n  }\">\n    <ng-content></ng-content>\n  </div>\n\n\n  <div class=\"btn-spin\" [ngClass]=\"{\n    'btn-spin-stroke': isStroked,\n    'btn-spin-contained':isContained,\n    'btn-progress': !showProgress,\n    'btn-notprogress' : showProgress\n  }\" *ngIf=\"showIcon\">\n  <img src=\"./../../assets/icons/Bag_Icon.svg\">\n</div>\n  <div class=\"btn-spin\"  [ngStyle]=\"{'width.px': btnWidth}\" [ngClass]=\"{\n    'btn-spin-stroke': isStroked,\n    'btn-spin-contained':isContained,\n    'btn-notprogress': !showProgress,\n    'btn-progress' : showProgress\n  }\">\n  <img *ngIf=\"isContained\" class=\"btn-spinner\" style=\"width: 50px;\" src=\"../../../assets/icons/loader-white-1.gif\">\n  <img *ngIf=\"isStroked && theme === 'primary'\" class=\"btn-spinner\" style=\"width: 50px;\" src=\"../../../assets/icons/loader-green.gif\">\n  <img *ngIf=\"isStroked && theme === 'accent'\" class=\"btn-spinner\" style=\"width: 50px;\" src=\"../../../assets/icons/loader-blue.gif\">\n  <!-- <mat-progress-spinner\n    class=\"btn-spinner\"\n    [ngClass]=\"{'c-button__spinner--active': showProgress && !shouldBeDisabled}\"\n    diameter=\"21\"\n    mode=\"indeterminate\"\n  ></mat-progress-spinner> -->\n</div>\n</div>\n</button>\n</div>\n\n",
            styles: [".btn-nitrozen{height:48px;border-radius:3px;cursor:pointer;padding:0 40px;box-shadow:none}.hover-state{pointer-events:none}.large-btn{height:64px!important;padding:0 65px!important}.btn-notprogress{opacity:0;transition:opacity .25s ease-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.fx-wt{width:66.38px}.primary-section .mat-flat-button.btn-focused{text-decoration:underline;color:#fff;text-underline-position:under}.primary-section .mat-stroked-button.btn-focused{text-decoration:underline;color:#36cc9b;text-underline-position:under}.primary-section .mat-flat-button{background-color:#36cc9b}.primary-section .mat-flat-button:hover:not([disabled]){background-color:#2eb589}.primary-section .mat-flat-button:focus{text-decoration:underline;color:#fff;text-underline-position:under}.primary-section .mat-stroked-button{border:1px solid #36cc9b}.primary-section .mat-stroked-button:hover:not([disabled]){background-color:rgba(54,204,155,.12)}.primary-section .mat-stroked-button:focus{text-decoration:underline;color:#45cc9b;text-underline-position:under}.primary-section .btn-spin-stroke .mat-spinner circle,.primary-section .btn-spin-stroke ::ng-deep .mat-progress-spinner circle{stroke:#fff}.primary-section .btn-spin-contained .mat-spinner circle,.primary-section .btn-spin-contained ::ng-deep .mat-progress-spinner circle{stroke:#fff}.primary-section .mat-flat-button:disabled,.primary-section .mat-flat-button[disabled=disabled]{background-color:rgba(54,204,155,.4)!important}.primary-section .btn-txt{font-family:Poppins;font-size:16px;font-weight:700;line-height:25px;text-align:center}.primary-section .btn-stroke-color{color:#36cc9b}.primary-section .btn-contained-color{color:#fff}.primary-section .btn-spinner{text-align:center}.primary-section .btn-spin{display:flex;justify-content:center}.primary-section .btn-fynd-icon{height:48px;width:190px;border-radius:3px;background-color:#36cc9b}.primary-section .btn-fynd-icon:hover:not([disabled]){background-color:#2eb589}.primary-section .btn-fynd-icon:focus{text-decoration:underline;color:#fff;text-underline-position:under}.primary-section .btn-show-icn{padding-left:10px}.primary-section .btn-icon-show{display:flex;flex-direction:row-reverse;justify-content:center}.secondary-section .mat-flat-button.btn-focused{text-decoration:underline;color:#fff;text-underline-position:under}.secondary-section .mat-stroked-button.btn-focused{text-decoration:underline;color:#5c6bdd;text-underline-position:under}.secondary-section .mat-flat-button{background-color:#5c6bdd}.secondary-section .mat-flat-button:hover:not([disabled]){background-color:#4f5ecc}.secondary-section .mat-flat-button:focus{text-decoration:underline;color:#fff;text-underline-position:under}.secondary-section .mat-stroked-button{border:1px solid #5c6bdd}.secondary-section .mat-stroked-button:hover:not([disabled]){background-color:rgba(79,94,204,.12)}.secondary-section .mat-stroked-button:focus{text-decoration:underline;color:#5c6bdd;text-underline-position:under}.secondary-section .btn-spin-stroke .mat-spinner circle,.secondary-section .btn-spin-stroke ::ng-deep .mat-progress-spinner circle{stroke:#5c6bdd}.secondary-section .btn-spin-contained .mat-spinner circle,.secondary-section .btn-spin-contained ::ng-deep .mat-progress-spinner circle{stroke:#fff}.secondary-section .mat-flat-button:disabled,.secondary-section .mat-flat-button[disabled=disabled]{background-color:rgba(92,107,221,.4)!important}.secondary-section .btn-txt{font-family:Poppins;font-size:16px;font-weight:700;line-height:25px;text-align:center}.secondary-section .btn-stroke-color{color:#5c6bdd}.secondary-section .btn-contained-color{color:#fff}.secondary-section .btn-spinner{text-align:center}.secondary-section .btn-spin{display:flex;justify-content:center}.secondary-section .btn-fynd-icon{height:48px;width:190px;border-radius:3px;background-color:#5c6bdd}.secondary-section .btn-fynd-icon:hover:not([disabled]){background-color:#2eb589}.secondary-section .btn-fynd-icon:focus{text-decoration:underline;color:#fff;text-underline-position:under}.secondary-section .btn-show-icn{padding-left:10px}.secondary-section .btn-icon-show{display:flex;flex-direction:row-reverse;justify-content:center}"]
        })
    ], ButtonComponent);
    return ButtonComponent;
}());

var ButtonModule = /** @class */ (function () {
    function ButtonModule() {
    }
    ButtonModule = __decorate([
        NgModule({
            declarations: [ButtonComponent],
            imports: [
                CommonModule,
                MatButtonModule,
                MatProgressSpinnerModule
            ],
            exports: [
                ButtonComponent,
                MatButtonModule,
                MatProgressSpinnerModule
            ]
        })
    ], ButtonModule);
    return ButtonModule;
}());

var ButtonTextComponent = /** @class */ (function () {
    function ButtonTextComponent() {
        this.clicked = new EventEmitter();
    }
    ButtonTextComponent.prototype.ngOnInit = function () {
        // this.type = this.type ? this.type : '';
    };
    ButtonTextComponent.prototype.clickedButton = function (event) {
        this.clicked.emit(event);
    };
    __decorate([
        Input()
    ], ButtonTextComponent.prototype, "shouldBeDisabled", void 0);
    __decorate([
        Input()
    ], ButtonTextComponent.prototype, "theme", void 0);
    __decorate([
        Input()
    ], ButtonTextComponent.prototype, "focused", void 0);
    __decorate([
        Input()
    ], ButtonTextComponent.prototype, "prefixIcon", void 0);
    __decorate([
        Input()
    ], ButtonTextComponent.prototype, "postfixIcon", void 0);
    __decorate([
        Input()
    ], ButtonTextComponent.prototype, "type", void 0);
    __decorate([
        Output()
    ], ButtonTextComponent.prototype, "clicked", void 0);
    ButtonTextComponent = __decorate([
        Component({
            selector: 'nitrozen-button-text',
            template: "<div [ngClass]=\"{\n    'primary-section': theme === 'primary' ,\n    'secondary-section': theme === 'accent',\n    'warn-section':theme === 'warn'\n  }\">\n  <div>\n<button [ngClass]=\"{'btn-focused':focused,'btn-warn-thm':theme === 'warn','btn-prim-thm':theme === 'primary'}\" mat-button  (click)=\"clickedButton($event)\"  [disabled]=\"shouldBeDisabled\">\n\t<div>\n\t\t<span class=\"btn-spin\" *ngIf=\"prefixIcon\">\n  <img src=\"./../../assets/icons/arrow-icon.svg\">\n</span>\n\t<span class=\"btn-txt\" [ngClass]=\"{\n    'primary-section': theme === 'primary' ,\n    'secondary-section': theme === 'accent',\n    'warn-section':theme === 'warn'\n  }\">\n    <ng-content></ng-content>\n  </span>\n    <span class=\"btn-spin-post\" *ngIf=\"postfixIcon\">\n  <img src=\"./../../assets/icons/arrow-icon.svg\">\n</span>\n   \n</div>\n</button>\n</div>\n</div>\n",
            styles: [".btn-txt{color:#4f5ecc;font-family:Poppins;font-size:16px;font-weight:700;text-align:center}button:disabled,button[disabled=disabled]{color:rgba(92,107,221,.5)!important;opacity:.5}.btn-text,.primary-section{color:#36cc9b!important}.btn-prim-thm:focus{text-decoration:underline;color:#36cc9b!important;text-underline-position:under}.warn-section .btn-txt{color:#fb406b!important;font-weight:700}.btn-warn-thm:focus{text-decoration:underline;color:#fb406b!important;text-underline-position:under}.mat-button{height:48px}.mat-button:hover{background-color:transparent!important}.btn-focused,.mat-button:focus{text-decoration:underline;color:#4f5ecc;text-underline-position:under}.btn-spin{padding-right:8px}.btn-spin-post{padding-left:8px}.hover-state{pointer-events:none}img{width:14px;height:12px}"]
        })
    ], ButtonTextComponent);
    return ButtonTextComponent;
}());

var ButtonTextModule = /** @class */ (function () {
    function ButtonTextModule() {
    }
    ButtonTextModule = __decorate([
        NgModule({
            declarations: [ButtonTextComponent],
            imports: [
                CommonModule,
                MatButtonModule,
                MatProgressSpinnerModule
            ],
            exports: [
                ButtonTextComponent,
                MatButtonModule,
                MatProgressSpinnerModule
            ]
        })
    ], ButtonTextModule);
    return ButtonTextModule;
}());

var CheckboxComponent = /** @class */ (function () {
    function CheckboxComponent() {
        /**
         * Define if the checkbox is disabled
         */
        this.disabled = false;
        /**
         * Define if the checkbox should be indeterminate
         */
        this.indeterminate = false;
        this.change = new EventEmitter();
    }
    CheckboxComponent.prototype.ngOnInit = function () {
    };
    CheckboxComponent.prototype.onCheckboxStateChanged = function (e) {
        console.log(e);
        this.change.emit(e);
    };
    __decorate([
        Input()
    ], CheckboxComponent.prototype, "checked", void 0);
    __decorate([
        Input()
    ], CheckboxComponent.prototype, "disabled", void 0);
    __decorate([
        Input()
    ], CheckboxComponent.prototype, "indeterminate", void 0);
    __decorate([
        Output()
    ], CheckboxComponent.prototype, "change", void 0);
    CheckboxComponent = __decorate([
        Component({
            selector: 'nitrozen-checkbox',
            template: "<mat-checkbox \nclass=\"nitro-checkbox\" \n[checked]=\"checked\" \n[indeterminate]=\"indeterminate\"\n[disabled]=\"disabled\"\n(change)=\"onCheckboxStateChanged($event)\">\n\n\n<ng-content></ng-content>\n\n</mat-checkbox>",
            styles: [""]
        })
    ], CheckboxComponent);
    return CheckboxComponent;
}());

var CheckboxModule = /** @class */ (function () {
    function CheckboxModule() {
    }
    CheckboxModule = __decorate([
        NgModule({
            declarations: [CheckboxComponent],
            imports: [
                CommonModule,
                MatCheckboxModule
            ],
            exports: [CheckboxComponent, MatCheckboxModule]
        })
    ], CheckboxModule);
    return CheckboxModule;
}());

var RadioButtonComponent = /** @class */ (function () {
    function RadioButtonComponent() {
        /**
         * Define if the checkbox is disabled
         */
        this.disabled = false;
        this.change = new EventEmitter();
    }
    RadioButtonComponent.prototype.ngOnInit = function () {
    };
    RadioButtonComponent.prototype.onRadioButtonStateChanged = function (e) {
        console.log(e);
        this.change.emit(e);
    };
    __decorate([
        Input()
    ], RadioButtonComponent.prototype, "selected", void 0);
    __decorate([
        Input()
    ], RadioButtonComponent.prototype, "disabled", void 0);
    __decorate([
        Output()
    ], RadioButtonComponent.prototype, "change", void 0);
    RadioButtonComponent = __decorate([
        Component({
            selector: 'nitrozen-radio-button',
            template: " <mat-radio-button color=\"primary\"\n[disabled]=\"disabled\"\n(change)=\"onRadioButtonStateChanged($event)\">\n\n\n<ng-content></ng-content>\n</mat-radio-button>  \n",
            styles: ["::ng-deep .mat-radio-label-content{padding-left:12px!important;font-family:Poppins!important}"]
        })
    ], RadioButtonComponent);
    return RadioButtonComponent;
}());

var RadioButtonModule = /** @class */ (function () {
    function RadioButtonModule() {
    }
    RadioButtonModule = __decorate([
        NgModule({
            declarations: [RadioButtonComponent],
            imports: [
                CommonModule,
                MatRadioModule
            ],
            exports: [RadioButtonComponent, MatRadioModule]
        })
    ], RadioButtonModule);
    return RadioButtonModule;
}());

var InputTypes;
(function (InputTypes) {
    InputTypes["text"] = "text";
    InputTypes["number"] = "number";
    InputTypes["password"] = "password";
    InputTypes["textarea"] = "textarea";
})(InputTypes || (InputTypes = {}));

var nextId = 0;
var INPUT_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(function () { return InputComponent; }),
    multi: true
};
var INPUT_VALIDATORS = {
    provide: NG_VALIDATORS,
    useExisting: forwardRef(function () { return InputComponent; }),
    multi: true
};
var InputComponent = /** @class */ (function () {
    function InputComponent(cd) {
        this.cd = cd;
        this.label = '';
        this.type = InputTypes.text;
        this.blocked = false;
        this.placeholder = '';
        this.disabled = false;
        this.search = false;
        this.showSuccess = false;
        this.noneditable = false;
        this.required = false;
        this.requiredIndicator = '*';
        this.tooltip = false;
        this.passwordToggleEnabled = false;
        this.passwordTextVisible = false;
        this.autoSelect = false;
        this.autofocus = false;
        this.autocomplete = false;
        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();
        this.getHostCssClasses = 'ngx-input';
        this.focused = false;
        this.onTouchedCallback = function () {
            // placeholder
        };
        this.onChangeCallback = function () {
            // placeholder
        };
    }
    Object.defineProperty(InputComponent.prototype, "value", {
        get: function () {
            return this._value;
        },
        set: function (val) {
            if (val !== this._value) {
                this._value = val;
                this.onChangeCallback(this._value);
            }
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(InputComponent.prototype, "focusedOrDirty", {
        get: function () {
            if (this.focused) {
                return true;
            }
            if (typeof this.value === 'string') {
                return this.value && this.value.length;
            }
            return typeof this.value !== 'undefined' && this.value !== null;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(InputComponent.prototype, "isTouched", {
        get: function () {
            return this.inputModel ? this.inputModel.touched : false;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(InputComponent.prototype, "labelState", {
        get: function () {
            if (this.placeholder)
                return 'outside';
            if (this.focusedOrDirty)
                return 'outside';
            return 'inside';
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(InputComponent.prototype, "underlineState", {
        get: function () {
            if (this.focused)
                return 'expanded';
            return 'collapsed';
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(InputComponent.prototype, "requiredIndicatorView", {
        get: function () {
            if (!this.requiredIndicator || !this.required)
                return '';
            return this.requiredIndicator;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(InputComponent.prototype, "element", {
        get: function () {
            if (this.type === InputTypes.textarea)
                return this.textareaControl;
            return this.inputControl;
        },
        enumerable: true,
        configurable: true
    });
    InputComponent.prototype.validate = function (c) {
        if (this.type !== 'number') {
            return null;
        }
        return __assign({}, Validators.max(this.max)(c), Validators.min(this.min)(c));
    };
    InputComponent.prototype.ngOnInit = function () {
        if (!this.value)
            this.value = '';
    };
    InputComponent.prototype.ngAfterViewInit = function () {
        var _this = this;
        if (this.autofocus) {
            setTimeout(function () {
                _this.element.nativeElement.focus();
            });
        }
        // sometimes the label doesn't update on load
        setTimeout(function () { return _this.cd.markForCheck(); });
    };
    InputComponent.prototype.ngOnChanges = function (changes) {
        if ('max' in changes || 'min' in changes) {
            this.onChangeCallback(this._value);
        }
    };
    InputComponent.prototype.onChange = function (event) {
        event.stopPropagation();
        this.change.emit(this.value);
    };
    InputComponent.prototype.onKeyUp = function (event) {
        event.stopPropagation();
        this.keyup.emit(event);
    };
    InputComponent.prototype.onFocus = function (event) {
        var _this = this;
        event.stopPropagation();
        if (this.autoSelect) {
            setTimeout(function () {
                _this.element.nativeElement.select();
            });
        }
        this.focused = true;
        this.focus.emit(event);
        this.onTouchedCallback();
    };
    InputComponent.prototype.onBlur = function (event) {
        event.stopPropagation();
        this.focused = false;
        this.blur.emit(event);
    };
    InputComponent.prototype.writeValue = function (val) {
        if (val !== this._value) {
            this._value = val;
        }
    };
    InputComponent.prototype.registerOnChange = function (fn) {
        this.onChangeCallback = fn;
    };
    InputComponent.prototype.registerOnTouched = function (fn) {
        this.onTouchedCallback = fn;
    };
    InputComponent.prototype.togglePassword = function () {
        var _this = this;
        this.passwordTextVisible = !this.passwordTextVisible;
        setTimeout(function () {
            if (_this.passwordTextVisible) {
                _this.passwordControl.nativeElement.focus();
            }
            else {
                _this.element.nativeElement.focus();
            }
        });
    };
    InputComponent.prototype.setDisabledState = function (isDisabled) {
        this.disabled = isDisabled;
    };
    InputComponent.ctorParameters = function () { return [
        { type: ChangeDetectorRef }
    ]; };
    __decorate([
        Input()
    ], InputComponent.prototype, "id", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "name", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "label", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "type", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "hint", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "error", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "blocked", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "success", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "placeholder", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "disabled", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "tabindex", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "search", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "showSuccess", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "righttext", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "toolmsg", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "pattern", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "noneditable", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "min", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "max", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "minlength", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "maxlength", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "required", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "requiredIndicator", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "tooltip", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "passwordToggleEnabled", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "passwordTextVisible", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "autoSelect", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "autofocus", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "autocomplete", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "autocorrect", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "spellcheck", void 0);
    __decorate([
        Output()
    ], InputComponent.prototype, "change", void 0);
    __decorate([
        Output()
    ], InputComponent.prototype, "blur", void 0);
    __decorate([
        Output()
    ], InputComponent.prototype, "focus", void 0);
    __decorate([
        Output()
    ], InputComponent.prototype, "keyup", void 0);
    __decorate([
        Output()
    ], InputComponent.prototype, "click", void 0);
    __decorate([
        HostBinding('class')
    ], InputComponent.prototype, "getHostCssClasses", void 0);
    __decorate([
        HostBinding('class.ng-dirty')
    ], InputComponent.prototype, "focusedOrDirty", null);
    __decorate([
        HostBinding('class.ng-touched')
    ], InputComponent.prototype, "isTouched", null);
    __decorate([
        ViewChild('inputControl')
    ], InputComponent.prototype, "inputControl", void 0);
    __decorate([
        ViewChild('inputModel')
    ], InputComponent.prototype, "inputModel", void 0);
    __decorate([
        ViewChild('textareaControl')
    ], InputComponent.prototype, "textareaControl", void 0);
    __decorate([
        ViewChild('passwordControl')
    ], InputComponent.prototype, "passwordControl", void 0);
    InputComponent = __decorate([
        Component({
            selector: 'nitrozen-input',
            providers: [INPUT_VALUE_ACCESSOR, INPUT_VALIDATORS],
            encapsulation: ViewEncapsulation.None,
            animations: [
                trigger('labelState', [
                    state('inside', style({
                        'font-size': '1em',
                        top: '0'
                    })),
                    state('outside', style({
                        'font-size': '.7rem',
                        top: '-15px'
                    })),
                    transition('inside => outside', animate('150ms ease-out')),
                    transition('outside => inside', animate('150ms ease-out'))
                ]),
                trigger('underlineState', [
                    state('collapsed', style({
                        width: '0%'
                    })),
                    state('expanded', style({
                        width: '100%'
                    })),
                    transition('collapsed => expanded', animate('150ms ease-out')),
                    transition('expanded => collapsed', animate('150ms ease-out'))
                ])
            ],
            template: "<div class=\"nitro-input-wrap\" [ngClass]=\"{'input-noneditable':noneditable}\">\n      <div class=\"ngx-input-flex-wrap\">\n         \n        <div class=\"nitro-input-flex-wrap-inner\">\n          <div class=\"nitro-input-box-wrap\">\n            <div class=\"prefix-icon\">\n            <ng-content select=\"nitrozen-input-prefix\"></ng-content>\n          </div>\n            <textarea [ngClass]=\"{'search-txt': search }\"\n              *ngIf=\"type === 'textarea'\"\n              class=\"ngx-input-textarea\"\n              rows=\"1\"\n              autosize\n              [(ngModel)]=\"value\"\n              [id]=\"id\"\n              [name]=\"name\"\n              [pattern]=\"pattern\"\n              [placeholder]=\"placeholder\"\n              [disabled]=\"disabled\"\n              [attr.tabindex]=\"tabindex\"\n              [attr.autocomplete]=\"autocomplete\"\n              [attr.autocorrect]=\"autocorrect\"\n              [attr.spellcheck]=\"spellcheck\"\n              [minlength]=\"minlength\"\n              [maxlength]=\"maxlength\"\n              [required]=\"required\"\n              (change)=\"onChange($event)\"\n              (keyup)=\"onKeyUp($event)\"\n              (focus)=\"onFocus($event)\"\n              (blur)=\"onBlur($event)\"\n              (click)=\"click.emit($event)\"\n              #inputModel=\"ngModel\"\n              #textareaControl\n            >\n            </textarea>\n            <input [ngClass]=\"{'search-txt': search,'blocked':blocked }\"\n              *ngIf=\"type !== 'textarea'\"\n              class=\"ngx-input-box\"\n              [(ngModel)]=\"value\"\n              [hidden]=\"passwordTextVisible\"\n              [id]=\"id\"\n              [name]=\"name\"\n              [placeholder]=\"placeholder\"\n              [disabled]=\"disabled\"\n              [type]=\"type\"\n              [pattern]=\"pattern\"\n              [min]=\"'' + min\"\n              [max]=\"'' + max\"\n              [minlength]=\"minlength\"\n              [maxlength]=\"maxlength\"\n              [attr.tabindex]=\"tabindex\"\n              [attr.autocomplete]=\"autocomplete\"\n              [attr.autocorrect]=\"autocorrect\"\n              [attr.spellcheck]=\"spellcheck\"\n              (change)=\"onChange($event)\"\n              (keyup)=\"onKeyUp($event)\"\n              (focus)=\"onFocus($event)\"\n              (blur)=\"onBlur($event)\"\n              (click)=\"click.emit($event)\"\n              [required]=\"required\"\n              #inputModel=\"ngModel\"\n              #inputControl\n            />\n            <input [ngClass]=\"{'search-txt': search }\"\n              *ngIf=\"passwordToggleEnabled\"\n              [hidden]=\"!passwordTextVisible\"\n              type=\"text\"\n              class=\"ngx-input-box\"\n              type=\"text\"\n              [id]=\"id + '-password'\"\n              [placeholder]=\"placeholder\"\n              [name]=\"name\"\n              [pattern]=\"pattern\"\n              [disabled]=\"disabled\"\n              [minlength]=\"minlength\"\n              [maxlength]=\"maxlength\"\n              [attr.autocomplete]=\"autocomplete\"\n              [attr.autocorrect]=\"autocorrect\"\n              [attr.spellcheck]=\"spellcheck\"\n              [attr.tabindex]=\"tabindex\"\n              [(ngModel)]=\"value\"\n              (change)=\"onChange($event)\"\n              (keyup)=\"onKeyUp($event)\"\n              (focus)=\"onFocus($event)\"\n              (blur)=\"onBlur($event)\"\n              (click)=\"click.emit($event)\"\n              [required]=\"required\"\n              #inputTextModel=\"ngModel\"\n              #passwordControl\n            />\n            <span\n              *ngIf=\"type === 'password' && passwordToggleEnabled\"\n              class=\"icon-eye\"\n              title=\"Toggle Text Visibility\"\n              (click)=\"togglePassword()\"\n            >\n            </span>\n            <div class=\"nitro-input-label\">\n            <span [innerHTML]=\"label\"></span> <span class=\"required-indicator\" [innerHTML]=\"requiredIndicatorView\"></span>\n             <span class=\"nitro-tool\" [matTooltipPosition]=\"'above'\" matTooltipClass='input-tooltip' matTooltip=\"{{toolmsg}}\" [hidden]=\"!tooltip\"> <img src=\"../../../assets/icons/tooltip.svg\"></span>\n          </div>\n            <div class=\"suffix-icon\">\n             <ng-content select=\"nitrozen-input-suffix\"></ng-content>\n           </div>\n          </div>\n         \n        </div>\n       \n      </div>\n      <!-- <div class=\"ngx-input-underline\">\n        <div class=\"underline-fill\"></div>\n      </div> -->\n      <div class=\"ngx-input-hint\" *ngIf=\"hint\">\n        <!-- <ng-content select=\"ngx-input-hint\"></ng-content> -->\n        <span  [innerHTML]=\"hint\"></span>\n      </div>\n      <div class=\"nitro-cmp\">\n        <div>\n      <div class=\"nitro-input-error\" [ngClass]=\"{'is-focused':focused}\" *ngIf=\"error\">\n        <!-- <ng-content select=\"ngx-input-hint\"></ng-content> -->\n        <span  [innerHTML]=\"error\"></span>\n      </div>\n       <div class=\"nitro-input-success\" *ngIf=\"success\">\n        <!-- <ng-content select=\"ngx-input-hint\"></ng-content> -->\n        <div class=\"nito-ss-img\" *ngIf=\"showSuccess\">\n        <img src=\"../../../assets/icons/check-circle.svg\">\n        </div>\n        <div class=\"ss-txt\" *ngIf=\"showSuccess\">\n        <span  [innerHTML]=\"success\"></span>\n      </div>\n    </div>\n  </div>\n  <div class=\"ngx-input-hint\" *ngIf=\"righttext\">\n    <span  [innerHTML]=\"righttext\"></span>\n  </div>\n      </div>\n    </div>\n\n\n\n",
            styles: [".nitro-input-label{color:#9b9b9b;font-family:Poppins;font-size:12px;font-weight:500;line-height:21px;padding-bottom:4px}.nitro-tool{width:24px;height:24px;text-align:center;padding-left:4px}.input-noneditable{opacity:.4;pointer-events:none}input{height:36px;border:1px solid #d7d7d7;border-radius:4px;background-color:#fff;outline:0;color:#41434c;font-family:Poppins;font-size:14px;line-height:21px;padding-left:12px;width:100%}input:focus{box-shadow:none;border:1px solid #5c6bdd!important;border-radius:3px;background-color:#fff}input:focus+.nitro-input-label{color:#5c6bdd!important;font-weight:600!important}.is-focused{display:none!important}.nitro-cmp{display:flex;justify-content:space-between}textarea{box-sizing:border-box;height:96px;border:1px solid #d7d7d7;border-radius:4px;background-color:#fff;outline:0;color:#41434c;font-family:Poppins;font-size:14px;line-height:21px;padding-left:12px;padding-top:6px;width:100%}textarea:focus{box-shadow:none;border:1px solid #5c6bdd;border-radius:3px;background-color:#fff}textarea:focus+.nitro-input-label{color:#5c6bdd}.ss-txt{padding-left:5px}.suffix-icon{position:absolute;right:0;top:35px;width:24px;height:24px;text-align:center;cursor:pointer}.nito-ss-img{line-height:28px}.blocked{background-color:#f3f3f3;pointer-events:none}.prefix-icon{position:absolute;left:5px;top:35px;width:24px;height:24px;text-align:center}.search-txt{padding-left:35px;width:97.5%!important}.nitro-input-box-wrap{display:flex;position:relative;flex-direction:column-reverse}::-webkit-input-placeholder{color:#a4a4a4;font-family:Poppins;font-size:12px;line-height:21px}::-moz-placeholder{color:#a4a4a4;font-family:Poppins;font-size:12px;line-height:21px}::placeholder{color:#a4a4a4;font-family:Poppins;font-size:12px;line-height:21px}:-ms-input-placeholder{color:#a4a4a4;font-family:Poppins;font-size:12px;line-height:21px}::-ms-input-placeholder{color:#a4a4a4;font-family:Poppins;font-size:12px;line-height:21px}.nitro-input-flex-wrap-inner{padding-top:4px}.ngx-input{width:100%}.ngx-input ngx-input-prefix{margin-right:8px}.ngx-input ngx-input-suffix{margin-left:8px}.ngx-input .nitro-input-wrap .ngx-input-box-wrap{position:relative;width:100%}.ngx-input .nitro-input-wrap .ngx-input-box-wrap:focus{outline:0}.ngx-input .nitro-input-wrap .ngx-input-box-wrap .ngx-input-box,.ngx-input .nitro-input-wrap .ngx-input-box-wrap .ngx-input-textarea{height:40px;border:1px solid #d7d7d7;border-radius:4px;background-color:#fff;outline:0;color:#41434c;font-family:Poppins;font-size:14px;line-height:21px;padding-left:12px;width:100%}.ngx-input .nitro-input-wrap .ngx-input-box-wrap .ngx-input-box:focus,.ngx-input .nitro-input-wrap .ngx-input-box-wrap .ngx-input-textarea:focus{box-shadow:none;border:1px solid #5c6bdd!important;border-radius:3px;background-color:#fff}.ngx-input .nitro-input-wrap .ngx-input-box-wrap .ngx-input-box[disabled],.ngx-input .nitro-input-wrap .ngx-input-box-wrap .ngx-input-textarea[disabled]{color:grey;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ngx-input .nitro-input-wrap .ngx-input-box-wrap .ngx-input-box{margin:3px 0}.ngx-input .nitro-input-wrap .ngx-input-box-wrap .ngx-input-textarea{resize:none}.ngx-input .nitro-input-wrap .ngx-input-box-wrap .icon-eye{line-height:25px;top:0;bottom:0;position:absolute;right:10px;cursor:pointer;font-size:.8rem;color:#00f;transition:color .1s}.ngx-input .nitro-input-wrap .ngx-input-box-wrap .icon-eye:hover{color:red}.ngx-input .nitro-input-wrap .ngx-input-label{pointer-events:none;position:absolute;font-size:16px}.ngx-input .nitro-input-wrap .ngx-input-underline{width:100%;height:1px;background-color:#ff0}.ngx-input .nitro-input-wrap .ngx-input-underline .underline-fill{background-color:#00f;width:100%;height:2px;margin:0 auto}.ngx-input .nitro-input-wrap .nitro-input-error{display:none}.ngx-input .nitro-input-wrap .ngx-input-hint{color:#9b9b9b;font-family:Poppins;font-size:12px;font-weight:500;line-height:21px;padding-top:4px}.ngx-input .nitro-input-wrap .nitro-input-success{color:#36cc9b;font-family:Poppins;font-size:12px;line-height:21px;display:flex;padding-top:4px}.ngx-input.invalid.ng-touched .ngx-input-box,.ngx-input.invalid.ng-touched .ngx-input-textarea,.ngx-input.ng-invalid.ng-dirty .ngx-input-box,.ngx-input.ng-invalid.ng-dirty .ngx-input-textarea,.ngx-input.ng-invalid.ng-touched .ngx-input-box,.ngx-input.ng-invalid.ng-touched .ngx-input-textarea{border:1px solid #fa3f4d}.ngx-input.invalid.ng-touched .nitro-input-label,.ngx-input.ng-invalid.ng-dirty .nitro-input-label,.ngx-input.ng-invalid.ng-touched .nitro-input-label{font-weight:600;color:#fa3f4d}.ngx-input.invalid.ng-touched .ngx-input-hint,.ngx-input.ng-invalid.ng-dirty .ngx-input-hint,.ngx-input.ng-invalid.ng-touched .ngx-input-hint{color:#fa3f4d;display:none}.ngx-input.invalid.ng-touched .nitro-input-error,.ngx-input.ng-invalid.ng-dirty .nitro-input-error,.ngx-input.ng-invalid.ng-touched .nitro-input-error{display:block;color:#fa3f4d;font-family:Poppins;font-size:12px;line-height:18px;padding-top:4px}.ngx-input.invalid.ng-touched .nitro-input-success,.ngx-input.ng-invalid.ng-dirty .nitro-input-success,.ngx-input.ng-invalid.ng-touched .nitro-input-success{display:none}"]
        })
    ], InputComponent);
    return InputComponent;
}());

var InputSuffixComponent = /** @class */ (function () {
    function InputSuffixComponent() {
    }
    InputSuffixComponent = __decorate([
        Component({
            selector: 'nitrozen-input-suffix',
            template: "\n    <ng-content></ng-content>\n  "
        })
    ], InputSuffixComponent);
    return InputSuffixComponent;
}());

var InputPrefixComponent = /** @class */ (function () {
    function InputPrefixComponent() {
    }
    InputPrefixComponent = __decorate([
        Component({
            selector: 'nitrozen-input-prefix',
            template: "\n    <ng-content></ng-content>\n  "
        })
    ], InputPrefixComponent);
    return InputPrefixComponent;
}());

var InputModule = /** @class */ (function () {
    function InputModule() {
    }
    InputModule = __decorate([
        NgModule({
            declarations: [InputComponent, InputSuffixComponent, InputPrefixComponent],
            imports: [
                CommonModule,
                MatInputModule,
                MatProgressSpinnerModule,
                FormsModule,
                ReactiveFormsModule,
                MatSlideToggleModule,
                MatTooltipModule
            ],
            exports: [
                InputComponent,
                InputSuffixComponent,
                InputPrefixComponent,
                MatInputModule,
                FormsModule,
                ReactiveFormsModule,
                MatProgressSpinnerModule,
                MatSlideToggleModule,
                MatTooltipModule
            ]
        })
    ], InputModule);
    return InputModule;
}());

var SelectComponent = /** @class */ (function () {
    function SelectComponent() {
    }
    SelectComponent.prototype.ngOnInit = function () {
    };
    SelectComponent = __decorate([
        Component({
            selector: 'app-select',
            template: "<p>\n  select works!\n</p>\n",
            styles: [""]
        })
    ], SelectComponent);
    return SelectComponent;
}());

var SelectModule = /** @class */ (function () {
    function SelectModule() {
    }
    SelectModule = __decorate([
        NgModule({
            declarations: [SelectComponent],
            imports: [
                CommonModule
            ]
        })
    ], SelectModule);
    return SelectModule;
}());

var SearchableSelectComponent = /** @class */ (function () {
    function SearchableSelectComponent() {
        this.destroy$ = new Subject();
        this.selectCtrl = new FormControl();
        this.selectFilterCtrl = new FormControl();
        this.customClass = '';
        this.isColumnHeader = true;
        this.placeholder = "Select";
        this.label = this.placeholder;
        this.displayName = "name";
        this.id = "id";
        this.isMultiple = false;
        this.isSearch = true;
        this.change = new EventEmitter();
        this.optionListObject = {};
    }
    SearchableSelectComponent.prototype.ngOnInit = function () {
        var _this = this;
        this.filteredoptions = this.options;
        this.selectCtrl.setValue(this.value);
        this.options.forEach(function (option) {
            _this.optionListObject[option[_this.id]] = option;
        });
        this.selectFilterCtrl.valueChanges.pipe(takeUntil(this.destroy$))
            .subscribe(function () {
            _this.filterOptions();
        });
        this.selectCtrl.valueChanges.pipe(takeUntil(this.destroy$))
            .subscribe(function (event) {
            if (!_this.isMultiple) {
                _this.change.emit({
                    value: _this.selectCtrl.value,
                    objectValue: _this.optionListObject[_this.selectCtrl.value]
                });
            }
        });
    };
    SearchableSelectComponent.prototype.ngOnChanges = function (event) {
        var _this = this;
        if (event.value) {
            this.selectCtrl.setValue(event.value.currentValue, { emitEvent: false });
        }
        if (event.options) {
            this.options = event.options.currentValue;
            this.filteredoptions = this.options;
            this.options.forEach(function (option) {
                _this.optionListObject[option[_this.id]] = option;
            });
        }
    };
    SearchableSelectComponent.prototype.submitOptions = function () {
        var objectValue = this.getArrayValueObjects(this.selectCtrl.value);
        this.change.emit({
            value: this.selectCtrl.value,
            objectValue: objectValue
        });
        this.select.close();
    };
    SearchableSelectComponent.prototype.clearOptions = function () {
        this.selectCtrl.setValue([]);
        this.change.emit({
            value: [],
            objectValue: []
        });
        this.select.close();
    };
    SearchableSelectComponent.prototype.getArrayValueObjects = function (value) {
        var _this = this;
        var objectValue = [];
        value.forEach(function (selectedValue) {
            objectValue.push(_this.optionListObject[selectedValue]);
        });
        return objectValue;
    };
    SearchableSelectComponent.prototype.filterOptions = function () {
        var _this = this;
        if (!this.options) {
            return;
        }
        // get the search keyword
        var search = this.selectFilterCtrl.value;
        if (!search) {
            this.filteredoptions = this.options.slice();
            return;
        }
        else {
            search = search.toLowerCase();
        }
        // filter the options
        this.filteredoptions = this.options.filter(function (option) { return option[_this.displayName].toLowerCase().indexOf(search) > -1; });
    };
    SearchableSelectComponent.prototype.selectAllChanged = function (event) {
        // alert(event);
    };
    __decorate([
        ViewChild('select')
    ], SearchableSelectComponent.prototype, "select", void 0);
    __decorate([
        Input()
    ], SearchableSelectComponent.prototype, "customClass", void 0);
    __decorate([
        Input()
    ], SearchableSelectComponent.prototype, "isColumnHeader", void 0);
    __decorate([
        Input()
    ], SearchableSelectComponent.prototype, "placeholder", void 0);
    __decorate([
        Input()
    ], SearchableSelectComponent.prototype, "label", void 0);
    __decorate([
        Input()
    ], SearchableSelectComponent.prototype, "value", void 0);
    __decorate([
        Input()
    ], SearchableSelectComponent.prototype, "options", void 0);
    __decorate([
        Input()
    ], SearchableSelectComponent.prototype, "displayName", void 0);
    __decorate([
        Input()
    ], SearchableSelectComponent.prototype, "id", void 0);
    __decorate([
        Input()
    ], SearchableSelectComponent.prototype, "isMultiple", void 0);
    __decorate([
        Input()
    ], SearchableSelectComponent.prototype, "isSearch", void 0);
    __decorate([
        Output()
    ], SearchableSelectComponent.prototype, "change", void 0);
    SearchableSelectComponent = __decorate([
        Component({
            selector: 'app-select',
            template: "<div class=\"nitro-div\">\n  <mat-form-field [floatLabel]=\"'always'\">\n    <mat-label>{{label}}</mat-label>\n\n    <mat-select #select [ngClass]=\"select.panelOpen ? 'arrow-top' : 'arrow-bottom'\"[placeholder]=\"placeholder\" [formControl]=\"selectCtrl\" [multiple]=\"isMultiple\" triggerValue=\"Select\" [disableOptionCentering]=\"true\" #select\n      [panelClass]=\"isMultiple ? 'nitro-searchable-multiple-select-panel' : 'nitro-searchable-select-panel'\" name=\"form_value\">\n      <!-- <mat-select-trigger *ngIf=\"isColumnHeader\">\n        <span class=\"place-holder\">\n          {{placeholder}}\n        </span>\n      </mat-select-trigger> -->\n      <div class=\"options-container\">\n\n        <mat-option *ngIf=\"isSearch\">\n          <ngx-mat-select-search [formControl]=\"selectFilterCtrl\" [placeholderLabel]=\"'Search'\"\n            [noEntriesFoundLabel]=\"'No match found'\"></ngx-mat-select-search>\n        </mat-option>\n        <nitrozen-select-check-all *ngIf=\"isMultiple\" [text]=\"''\" [model]=\"selectCtrl\" [values]=\"options\" (change)=\"selectAllChanged($event)\">\n        </nitrozen-select-check-all>\n        <mat-option *ngFor=\"let option of filteredoptions\" [value]=\"option[id]\">\n          {{option[displayName]}}\n        </mat-option>\n      </div>\n      <div class=\"select-action-container\" *ngIf=\"isMultiple\">\n        <nitrozen-button-text (clicked)=\"clearOptions()\">Clear</nitrozen-button-text>\n        <nitrozen-button-text (clicked)=\"submitOptions()\">Submit</nitrozen-button-text>\n\n      </div>\n\n      <!--  <app-button [type]=\"'small-success'\" [label]=\"'Submit'\" (click)=\"submitOptions()\">\n            <span>Submit</span>\n        </app-button>\n        <app-button [type]=\"'small-default'\" [label]=\"'Clear'\" (click)=\"clearOptions()\">\n            <span>Clear</span>\n        </app-button> \n      </div> -->\n    </mat-select>\n    <mat-placeholder class=\"place-holder\">{{placeholder}}</mat-placeholder>\n  </mat-form-field>\n  <div>{{model}}</div>\n</div>",
            encapsulation: ViewEncapsulation.None,
            styles: [".nitro-div ::ng-deep .mat-form-field-underline{display:none}.nitro-div ::ng-deep .mat-select-value-text{height:40px!important;padding-left:25px;line-height:40px!important;font-family:Poppins}.nitro-div ::ng-deep .mat-select{height:40px;background:#fff;border:1px solid #a9a9a9;border-radius:2px;font-family:Poppins}.nitro-div ::ng-deep .mat-form-field-label{line-height:40px!important;padding-left:5px;font-family:Poppins}.nitro-div ::ng-deep .mat-select-trigger{height:40px}.nitro-div .mat-select-disabled{border:none}.nitro-div .mat-select-disabled ::ng-deep .mat-select-trigger{background-color:#e4e5e6;border:1px solid #e4e5e6}.nitro-div .mat-select-disabled ::ng-deep .mat-select-arrow{margin:0 12px!important;color:#bbb!important}.nitro-div .mat-select-disabled ::ng-deep .mat-select-value-text{color:#bbb}.nitro-div ::ng-deep .mat-option{height:40px!important;border-bottom:1px solid;font-family:Poppins}.nitro-div ::ng-deep .mat-option-text{font-family:Poppins}.nitro-div ::ng-deep .mat-select-arrow{margin:0 12px!important;color:#5c6bdd!important}.nitro-div .mat-form-field-can-float.mat-form-field-should-float ::ng-deep .mat-form-field-label{line-height:21px!important;font-size:16px;font-weight:500px}.select-action-container{display:flex;flex-direction:row;justify-content:flex-end;height:60px;border-top:1px solid #e4e5e6;align-items:center}.options-container{max-height:196px;overflow:auto}.arrow-top ::ng-deep .mat-select-arrow{border-bottom:5px solid;border-top:none!important}.arrow-bottom :ng-deep .mat-select-arrow{border-top:5px solid;border-bottom:none!important}"]
        })
    ], SearchableSelectComponent);
    return SearchableSelectComponent;
}());

var SelectCheckAllComponent = /** @class */ (function () {
    function SelectCheckAllComponent() {
        this.values = [];
        this.text = 'Select All';
        this.change = new EventEmitter();
    }
    SelectCheckAllComponent.prototype.ngOnInit = function () {
    };
    SelectCheckAllComponent.prototype.isChecked = function () {
        return this.model.value && this.values.length
            && this.model.value.length === this.values.length;
    };
    SelectCheckAllComponent.prototype.isIndeterminate = function () {
        return this.model.value && this.values.length && this.model.value.length
            && this.model.value.length < this.values.length;
    };
    SelectCheckAllComponent.prototype.toggleSelection = function (change) {
        // console.log(change);
        // console.log(this.model.value);
        // this.change.emit(change.checked);
        // console.log(JSON.stringify(this.values));
        if (change.checked) {
            this.model.setValue(this.values);
        }
        else {
            this.model.setValue([]);
        }
    };
    __decorate([
        Input()
    ], SelectCheckAllComponent.prototype, "model", void 0);
    __decorate([
        Input()
    ], SelectCheckAllComponent.prototype, "values", void 0);
    __decorate([
        Input()
    ], SelectCheckAllComponent.prototype, "text", void 0);
    __decorate([
        Output()
    ], SelectCheckAllComponent.prototype, "change", void 0);
    SelectCheckAllComponent = __decorate([
        Component({
            selector: 'nitrozen-select-check-all',
            template: "<mat-checkbox class=\"mat-option\" [disableRipple]=\"true\" [indeterminate]=\"isIndeterminate()\" [checked]=\"isChecked()\"\n  (click)=\"$event.stopPropagation()\" (change)=\"toggleSelection($event)\">\n  {{text}}\n</mat-checkbox>",
            styles: ['']
        })
    ], SelectCheckAllComponent);
    return SelectCheckAllComponent;
}());

var SearchableSelectModule = /** @class */ (function () {
    function SearchableSelectModule() {
    }
    SearchableSelectModule = __decorate([
        NgModule({
            declarations: [SearchableSelectComponent, SelectCheckAllComponent],
            imports: [
                CommonModule, MatSelectModule, FormsModule, ReactiveFormsModule, NgxMatSelectSearchModule, MatCheckboxModule, ButtonTextModule
            ],
            exports: [SearchableSelectComponent, MatSelectModule, SelectCheckAllComponent, MatCheckboxModule]
        })
    ], SearchableSelectModule);
    return SearchableSelectModule;
}());

var CustomSnackbarComponent = /** @class */ (function () {
    function CustomSnackbarComponent(snackBarRef, data) {
        this.snackBarRef = snackBarRef;
        this.data = data;
    }
    CustomSnackbarComponent.ctorParameters = function () { return [
        { type: MatSnackBarRef },
        { type: undefined, decorators: [{ type: Inject, args: [MAT_SNACK_BAR_DATA,] }] }
    ]; };
    CustomSnackbarComponent = __decorate([
        Component({
            selector: 'custom-snackbar',
            template: "\n   <div class=\"flex\" style=\"display: flex;\n    justify-content: space-between;align-items: center;\">\n  <div class=\"data\" style=\"white-space: pre-line;\">{{data.data}}</div>\n  <div class=\"dismiss\" style=\"cursor:pointer;align-items: center;\n    display: flex;\" *ngIf=\"data.hasIcon\">\n        <mat-icon (click)=\"snackBarRef.dismiss()\">close</mat-icon>\n  </div>\n  <div class=\"dismiss\" style=\"cursor:pointer;line-height: 40px;\" *ngIf=\"!data.hasIcon\">\n       <div *ngIf=\"data.text\">{{data.text}}</div>\n  </div>\n</div>\n\n  "
        }),
        __param(1, Inject(MAT_SNACK_BAR_DATA))
    ], CustomSnackbarComponent);
    return CustomSnackbarComponent;
}());

var SnackBarComponent = /** @class */ (function () {
    function SnackBarComponent() {
    }
    SnackBarComponent.prototype.ngOnInit = function () {
    };
    SnackBarComponent = __decorate([
        Component({
            selector: 'nitrozen-snack-bar',
            template: "\n    <ng-content></ng-content>\n  ",
            styles: ["::ng-deep .text-snackbar{border-radius:3px;background-color:#5c6bdd!important;color:#fff;font-family:Poppins;font-size:14px;font-weight:400;line-height:21px}.btn-space{display:flex;justify-content:space-evenly;padding-top:30px}::ng-deep .success-snackbar{border-radius:3px;background-color:#00c851;color:#fff;font-family:Poppins;font-size:14px;font-weight:400;line-height:21px}::ng-deep .error-snackbar{border-radius:3px;background-color:#fa3f4d;color:#fff;font-family:Poppins;font-size:14px;font-weight:400;line-height:21px}"]
        })
    ], SnackBarComponent);
    return SnackBarComponent;
}());

var ɵ0 = {};
var SnackBarModule = /** @class */ (function () {
    function SnackBarModule() {
    }
    SnackBarModule = __decorate([
        NgModule({
            declarations: [SnackBarComponent, CustomSnackbarComponent],
            imports: [
                CommonModule,
                MatIconModule
            ],
            exports: [
                SnackBarComponent,
                CustomSnackbarComponent,
                MatIconModule
            ],
            providers: [{ provide: MAT_SNACK_BAR_DATA, useValue: ɵ0 }],
            entryComponents: [
                CustomSnackbarComponent
            ]
        })
    ], SnackBarModule);
    return SnackBarModule;
}());

var VerticalTabsComponent = /** @class */ (function () {
    function VerticalTabsComponent() {
        this.change = new EventEmitter();
    }
    VerticalTabsComponent.prototype.ngOnInit = function () {
    };
    VerticalTabsComponent.prototype.handleChange = function (obj) {
        console.log(obj);
        this.change.emit(obj);
    };
    __decorate([
        Input()
    ], VerticalTabsComponent.prototype, "tab", void 0);
    __decorate([
        Output()
    ], VerticalTabsComponent.prototype, "change", void 0);
    VerticalTabsComponent = __decorate([
        Component({
            selector: 'nitrozen-vertical-tabs',
            template: "<div class=\"tabordion\">\n  <section *ngFor=\"let tb of tab; let i = index\">\n    <input type=\"radio\" name=\"sections\" id=\"option{{i}}\" [checked]=\"tb.checked\" (change)=\"handleChange(tb)\">\n    <label for=\"option{{i}}\">\n    \t<div class=\"tab-sls\">\n    \t\t<div class=\"tab-select\">\n    \t\t<img class=\"img-tabs\" src=\"../../../assets/icons/tab_selected_icon.svg\">\n    \t</div>\n    \t<div class=\"tab-unselect\">\n    \t\t<img class=\"img-tabs\" src=\"../../../assets/icons/tab_unselected.svg\">\n    \t</div>\n\n    \t<div class=\"text-tabs\">{{tb.name}}</div>\n    \t</div>\n    \t</label>\n    <!-- <article>\n      <p>{{tb.name}}</p>\n    </article> -->\n  </section>\n<!--   <section id=\"section2\">\n    <input type=\"radio\" name=\"sections\" id=\"option2\">\n    <label for=\"option2\">\n    \t<div class=\"tab-sls\">\n    \t\t<div class=\"tab-select\">\n    \t\t<img class=\"img-tabs\" src=\"../../../assets/icons/tab_selected_icon.svg\">\n    \t</div>\n    \t<div class=\"tab-unselect\">\n    \t\t<img class=\"img-tabs\" src=\"../../../assets/icons/tab_unselected.svg\">\n    \t</div>\n\n    \t<div class=\"text-tabs\">Catalog Portfolio</div>\n    \t</div>\n    </label>\n    <article>\n      <p>Catalog Portfolio</p>\n    </article>\n  </section>\n  <section id=\"section3\">\n    <input type=\"radio\" name=\"sections\" id=\"option3\">\n     <label for=\"option3\">\n    \t<div class=\"tab-sls\">\n    \t\t<div class=\"tab-select\">\n    \t\t<img class=\"img-tabs\" src=\"../../../assets/icons/tab_selected_icon.svg\">\n    \t</div>\n    \t<div class=\"tab-unselect\">\n    \t\t<img class=\"img-tabs\" src=\"../../../assets/icons/tab_unselected.svg\">\n    \t</div>\n\n    \t<div class=\"text-tabs\">Business Profile</div>\n    \t</div>\n    </label>\n    <article>\n      <p>Business Profile</p>\n    </article>\n  </section>\n  <section id=\"section4\">\n    <input type=\"radio\" name=\"sections\" id=\"option4\">\n    <label for=\"option4\">\n    \t<div class=\"tab-sls\">\n    \t\t<div class=\"tab-select\">\n    \t\t<img class=\"img-tabs\" src=\"../../../assets/icons/tab_selected_icon.svg\">\n    \t</div>\n    \t<div class=\"tab-unselect\">\n    \t\t<img class=\"img-tabs\" src=\"../../../assets/icons/tab_unselected.svg\">\n    \t</div>\n\n    \t<div class=\"text-tabs\">KYC & Bank Details</div>\n    \t</div>\n    </label>\n    <article>\n      <p>KYC & Bank Details</p>\n    </article>\n  </section>\n  <section id=\"section5\">\n    <input type=\"radio\" name=\"sections\" id=\"option5\">\n    <label for=\"option5\">\n    \t<div class=\"tab-sls\">\n    \t\t<div class=\"tab-select\">\n    \t\t<img class=\"img-tabs\" src=\"../../../assets/icons/tab_selected_icon.svg\">\n    \t</div>\n    \t<div class=\"tab-unselect\">\n    \t\t<img class=\"img-tabs\" src=\"../../../assets/icons/tab_unselected.svg\">\n    \t</div>\n\n    \t<div class=\"text-tabs\">Agreement</div>\n    \t</div>\n    </label>\n    <article>\n      <p>Agreement</p>\n    </article>\n  </section> -->\n</div>",
            styles: [".tabordion{display:block;font-family:Poppins;margin:auto;position:relative}.tabordion input[name=sections]{left:-9999px;position:absolute;top:-9999px}.tabordion section{display:block}.tabordion section label{cursor:pointer;display:block;padding:15px 20px;position:relative;max-width:280px;border-radius:3px;width:200px;z-index:100;border:1px solid #e4e5e6;margin-bottom:10px;color:#41434c;font-family:Poppins;font-size:16px;font-weight:500;line-height:25px}.tabordion section label .tab-select{display:none}.tabordion section label .tab-unselect{display:block}.tabordion section article{display:none;left:230px;min-width:300px;padding:0 0 0 21px;position:absolute;top:0}.tabordion section article:after{bottom:0;content:\"\";display:block;left:-229px;position:absolute;top:0;width:220px;z-index:1}.tabordion input[name=sections]:checked+label{color:#5c6bdd;font-family:Poppins;font-size:16px;border:1px solid #fff}.tabordion input[name=sections]:checked+label .tab-select{display:block}.tabordion input[name=sections]:checked+label .tab-unselect{display:none}.tabordion input[name=sections]:checked~article{display:block}.tab-select{height:24px;width:24px}.img-tabs{padding-top:2px}.text-tabs{padding-left:12px}.tab-unselect{height:24px;width:24px}@media (max-width:533px){.tabordion,h1{width:100%}.tabordion section label{font-size:1em;width:160px}.tabordion section article{left:200px;min-width:270px}.tabordion section article:after{bottom:0;content:\"\";display:block;left:-199px;position:absolute;top:0;width:200px}}.tab-sls{display:flex}@media (max-width:768px){.tabordion,h1{width:96%}}@media (min-width:1366px){.tabordion,h1{width:70%}}@media (min-width:1824px){.tabordion,h1{width:100%}}"]
        })
    ], VerticalTabsComponent);
    return VerticalTabsComponent;
}());

var VerticalTabsModule = /** @class */ (function () {
    function VerticalTabsModule() {
    }
    VerticalTabsModule = __decorate([
        NgModule({
            declarations: [VerticalTabsComponent],
            imports: [
                CommonModule
            ],
            exports: [
                VerticalTabsComponent
            ],
            schemas: [CUSTOM_ELEMENTS_SCHEMA]
        })
    ], VerticalTabsModule);
    return VerticalTabsModule;
}());

var TabsComponent = /** @class */ (function () {
    function TabsComponent() {
        this.change = new EventEmitter();
    }
    TabsComponent.prototype.ngOnInit = function () {
    };
    TabsComponent.prototype.handleChange = function (obj) {
        console.log(obj);
        this.change.emit(obj);
    };
    __decorate([
        Input()
    ], TabsComponent.prototype, "tab", void 0);
    __decorate([
        Output()
    ], TabsComponent.prototype, "change", void 0);
    TabsComponent = __decorate([
        Component({
            selector: 'nitrozen-tabs',
            template: "<div>\n<div class=\"tab-ordion\">\n  <section *ngFor=\"let tb of tab; let i = index\">\n    <input type=\"radio\" name=\"sections\" id=\"option{{i}}\" [checked]=\"tb.checked\" (change)=\"handleChange(tb)\">\n    <label for=\"option{{i}}\">\n    \t<div class=\"text-tabs\">{{tb.name}}</div>\n    \t</label>\n  </section>\n</div>\n</div>",
            styles: [".tab-ordion{display:flex;font-family:Poppins;position:relative;justify-content:space-evenly;padding-top:20px;width:87%}.tab-ordion input[name=sections]{left:-9999px;position:absolute;top:-9999px}.tab-ordion section{display:flex;align-items:center}.tab-ordion section label{cursor:pointer;display:block;position:relative;border-radius:3px;z-index:100;margin-bottom:10px;padding:0 12px;color:#41434c;font-family:Poppins}.tab-ordion section label:hover{border-radius:20px;background-color:#f3f3f3;height:40px;align-items:center;display:flex}.tab-ordion section label .tab-select{display:none}.tab-ordion section label .tab-unselect{display:block}.tab-ordion section article{display:none;left:230px;min-width:300px;padding:0 0 0 21px;position:absolute;top:0}.tab-ordion section article:after{bottom:0;content:\"\";display:block;left:-229px;position:absolute;top:0;width:220px;z-index:1}.tab-ordion input[name=sections]:checked+label{color:#5c6bdd;font-family:Poppins;font-size:16px;border:1px solid #fff;background-color:#5c6bdd;border-radius:20px;height:40px;align-items:center;display:flex}.tab-ordion input[name=sections]:checked+label .tab-select{display:block}.tab-ordion input[name=sections]:checked+label .tab-unselect{display:none}.tab-ordion input[name=sections]:checked+label .text-tabs{color:#fff}.tab-ordion input[name=sections]:checked~article{display:block}.tab-select{height:24px;width:24px}.img-tabs{padding-top:2px}.text-tabs{color:#4d4d4e;font-family:Poppins;font-size:14px;line-height:21px;width:100%}.tab-unselect{height:24px;width:24px}@media (max-width:533px){.tab-ordion,h1{width:100%}.tab-ordion section label{font-size:1em;width:160px}.tab-ordion section article{left:200px;min-width:270px}.tab-ordion section article:after{bottom:0;content:\"\";display:block;left:-199px;position:absolute;top:0;width:200px}}.tab-sls{display:flex}@media (max-width:768px){h1{width:96%}.tab-ordion{width:18%}}@media (min-width:1366px){.tab-ordion,h1{width:70%}}@media (min-width:1824px){h1{width:100%}.tab-ordion{width:55%}}"]
        })
    ], TabsComponent);
    return TabsComponent;
}());

var TabsModule = /** @class */ (function () {
    function TabsModule() {
    }
    TabsModule = __decorate([
        NgModule({
            declarations: [TabsComponent],
            imports: [
                CommonModule
            ],
            exports: [
                TabsComponent
            ],
            schemas: [CUSTOM_ELEMENTS_SCHEMA]
        })
    ], TabsModule);
    return TabsModule;
}());

var CropModalComponent = /** @class */ (function () {
    function CropModalComponent(dialogRef, data) {
        this.dialogRef = dialogRef;
        this.data = data;
        this.croppedImage = '';
    }
    CropModalComponent.prototype.onNoClick = function () {
        this.dialogRef.close(this.croppedImage);
    };
    CropModalComponent.prototype.myMethod = function () {
        this.dialogRef.close();
    };
    CropModalComponent.prototype.imageCropped = function (event) {
        this.croppedImage = event.base64;
    };
    CropModalComponent.prototype.ngOnInit = function () {
    };
    CropModalComponent.ctorParameters = function () { return [
        { type: MatDialogRef },
        { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
    ]; };
    CropModalComponent = __decorate([
        Component({
            selector: 'nitrozen-crop-modal',
            template: "<div class=\"alert-modal\">\n\t<div class=\"dialog-tt\" mat-dialog-title>Crop Image</div>\n\t<div mat-dialog-content>\n\t\t<!-- <input type=\"file\" (change)=\"fileChangeEvent($event)\" />\n\t\t<img src=\"{{data.name}}\"> -->\n\t\t<div>\n\t\t\t<image-cropper\n\t\t\t[imageBase64]=\"data.name\"\n\t\t\tformat=\"png,jpeg\"\n\t\t\t(imageCropped)=\"imageCropped($event)\"\n\t\t\t[aspectRatio]=\"data.config\"\n\t\t\t></image-cropper>\n\t\t</div>\n\t</div>\n\t<div class=\"dialog-act\" mat-dialog-actions>\n\t\t<div>\n\t\t\t<nitrozen-button  [isContained]=\"true\" [theme]=\"'primary'\" [showIcon]=\"false\" (clicked)=\"onNoClick()\">Submit</nitrozen-button>\n\t\t</div>\n\t\t<div class=\"cancel-btns\">\n\t\t\t<nitrozen-button [showProgress]=\"false\" [isStroked]=\"true\" [theme]=\"'primary'\" [showIcon]=\"false\" [shouldBeDisabled]=\"false\" (clicked)=\"myMethod()\"\n\t\t\t>Cancel</nitrozen-button>\n\t\t</div>\n\t</div>\n</div>",
            styles: [".dialog-tt{color:#41434c;font-family:Poppins;font-size:16px;font-weight:700;line-height:25px;visibility:hidden}.dialog-act{display:flex;justify-content:flex-end;padding-top:40px}.cancel-btns{padding-left:12px}"]
        }),
        __param(1, Inject(MAT_DIALOG_DATA))
    ], CropModalComponent);
    return CropModalComponent;
}());

var FileUploadComponent = /** @class */ (function () {
    function FileUploadComponent(_http, dialog) {
        this._http = _http;
        this.dialog = dialog;
        /** Link text */
        this.text = 'Drag and drop your file here.';
        /** Name used in form which will be sent in HTTP request. */
        this.param = 'file';
        /** Target URL for file uploading. */
        this.target = 'https://file.io';
        this.required = false;
        this.download = false;
        this.enableCrop = false;
        /** Allow you to add handler after its completion. Bubble up response text from remote. */
        this.complete = new EventEmitter();
        this.dimen = new EventEmitter();
        this.files = [];
        this.canChange = false;
        this.logo_active = false;
        //    @HostListener('window:keyup', ['$event'])
        //     keyEvent(event: KeyboardEvent) {
        //       event.stopPropagation();
        //      if (event.keyCode === 9 && event.target.parentElement.parentElement.parentElement.contains('logo-img')) {
        //         this.logoActive = true;
        //         this.landscapeActive = false;
        //         this.portActive = false;
        //     }
        //     if (event.keyCode === 9 && event.target.parentElement.parentElement.parentElement.contains('landscape-img')) {
        //         this.landscapeActive = true;
        //         this.logoActive = false;
        //         this.portActive = false;
        //     }
        //     if (event.keyCode === 9 && event.target.parentElement.parentElement.parentElement.contains('protrait-img')) {
        //         this.logoActive = false;
        //         this.landscapeActive = false;
        //         this.portActive = true;
        //     }
        // }
        this.typesMap = {
            csv: {
                accept: 'text/csv',
                contentType: ['application/vnd.ms-excel', 'text/csv', 'text/plain'],
                readMethod: 'text',
                errorMsg: 'Invalid File Format. only CSV files are allowed'
            },
            image: {
                accept: 'image/*',
                readMethod: 'dataurl',
                errorMsg: 'Invalid File Format. only IMAGE files are allowed'
            },
            image_jpg: {
                accept: 'image/jpeg',
                readMethod: 'dataurl',
                errorMsg: 'Invalid File Format. only JPEG files are allowed'
            },
            video: {
                accept: 'video/*',
                readMethod: 'dataurl',
                errorMsg: 'Invalid File Format. only VIDEO files are allowed'
            },
            pdf: {
                accept: 'application/pdf',
                contentType: ['application/pdf'],
                errorMsg: 'Invalid File Format. only CSV files are allowed'
            },
            json: {
                accept: 'application/json',
                contentType: 'application/json',
                readMethod: 'text',
                errorMsg: 'Invalid File Format. only JSON files are allowed'
            }
        };
    }
    FileUploadComponent.prototype.ngOnInit = function () {
    };
    FileUploadComponent.prototype.onClick = function () {
        var _this = this;
        this.files = [];
        this.logo_active = true;
        var fileUpload = document.getElementById('fileUpload');
        //this.ff = fileUpload;
        // document.getElementById('fileUpload').onfocus = this.checkIt();
        fileUpload.onchange = function ($event) {
            console.log($event);
            for (var index = 0; index < fileUpload.files.length; index++) {
                var file = fileUpload.files[index];
                _this.files.push({
                    data: file, state: 'in',
                    inProgress: false, progress: 0, canRetry: false, canCancel: true
                });
            }
            _this.uploadFiles();
        };
        fileUpload.click();
    };
    // checkIt() {
    //   if(this.ff && this.ff.value.length){
    //        this.logo_active = false;
    //   } else {
    //        this.logo_active = true;
    //        document.getElementById('fileUpload').onfocus = null;
    //   }
    // }
    FileUploadComponent.prototype.cancelFile = function (file) {
        this.canChange = false;
        this.logo_active = false;
        file.sub.unsubscribe();
        this.removeFileFromArray(file);
    };
    FileUploadComponent.prototype.retryFile = function (file) {
        this.uploadFile(file);
        file.canRetry = false;
    };
    FileUploadComponent.prototype.uploadDragFile = function (event) {
        this.files = [];
        this.logo_active = true;
        for (var index = 0; index < event.length; index++) {
            var element = event[index];
            this.files.push({
                data: element, state: 'in',
                inProgress: false, progress: 0, canRetry: false, canCancel: true
            });
            this.uploadFiles();
        }
    };
    FileUploadComponent.prototype.downloadImage = function (downloadUrl) {
        window.open(downloadUrl, "_blank");
    };
    FileUploadComponent.prototype.getImageDimension = function (obj) {
        var fr = new Image();
        fr.onload = function () {
            this.dimens = {
                width: fr.width,
                height: fr.height,
                crop: obj.crop ? obj.crop : false
            };
            this.dimen.emit(this.dimens);
        }.bind(this);
        fr.src = this.url;
    };
    FileUploadComponent.prototype.uploadFile = function (file) {
        var _this = this;
        this.canChange = true;
        this.uploadedFileName = file.data.name;
        var reader = new FileReader();
        reader.readAsDataURL(file.data); // read file as data url
        reader.onload = function (event) {
            _this.url = event.target['result'];
            _this.getImageDimension({ crop: false });
        };
        this.file_type = file.data.type;
        this.logo_active = false;
        this.complete.emit(file.data);
        // const fd = new FormData();
        // fd.append(this.param, file.data);
        // const req = new HttpRequest('POST', this.target, fd, {
        //       reportProgress: true
        // });
        // file.inProgress = true;
        // file.sub = this._http.request(req).pipe(
        //       map(event => {
        //             switch (event.type) {
        //                   case HttpEventType.UploadProgress:
        //                         file.progress = Math.round(event.loaded * 100 / event.total);
        //                         break;
        //                   case HttpEventType.Response:
        //                         return event;
        //             }
        //       }),
        //       tap(message => { }),
        //       last(),
        //       catchError((error: HttpErrorResponse) => {
        //             file.inProgress = false;
        //             file.canRetry = true;
        //             return of(`${file.data.name} upload failed.`);
        //       })
        // ).subscribe(
        //       (event: any) => {
        //             if (typeof (event) === 'object') {
        //                   this.removeFileFromArray(file);
        //                   this.complete.emit(event.body);
        //             }
        //       }
        // );
    };
    FileUploadComponent.prototype.uploadFiles = function () {
        var _this = this;
        var fileUpload = document.getElementById('fileUpload');
        fileUpload.value = '';
        this.files.forEach(function (file) {
            _this.uploadFile(file);
        });
    };
    FileUploadComponent.prototype.openCropTool = function (event) {
        var _this = this;
        event.stopPropagation();
        var dialogRef = this.dialog.open(CropModalComponent, {
            width: '480px',
            data: { name: this.url, config: this.config },
            autoFocus: false
        });
        dialogRef.afterClosed().subscribe(function (res) {
            if (res) {
                _this.url = res;
                _this.complete.emit(_this.url);
                _this.getImageDimension({ crop: true });
            }
        });
    };
    FileUploadComponent.prototype.removeFileFromArray = function (file) {
        var index = this.files.indexOf(file);
        if (index > -1) {
            this.files.splice(index, 1);
        }
    };
    FileUploadComponent.prototype.myMethod = function (e) { };
    FileUploadComponent.ctorParameters = function () { return [
        { type: HttpClient },
        { type: MatDialog }
    ]; };
    __decorate([
        Input()
    ], FileUploadComponent.prototype, "text", void 0);
    __decorate([
        Input()
    ], FileUploadComponent.prototype, "param", void 0);
    __decorate([
        Input()
    ], FileUploadComponent.prototype, "view", void 0);
    __decorate([
        Input()
    ], FileUploadComponent.prototype, "size", void 0);
    __decorate([
        Input()
    ], FileUploadComponent.prototype, "dimension", void 0);
    __decorate([
        Input()
    ], FileUploadComponent.prototype, "error", void 0);
    __decorate([
        Input()
    ], FileUploadComponent.prototype, "msg", void 0);
    __decorate([
        Input()
    ], FileUploadComponent.prototype, "target", void 0);
    __decorate([
        Input()
    ], FileUploadComponent.prototype, "accept", void 0);
    __decorate([
        Input()
    ], FileUploadComponent.prototype, "required", void 0);
    __decorate([
        Input()
    ], FileUploadComponent.prototype, "download", void 0);
    __decorate([
        Input()
    ], FileUploadComponent.prototype, "enableCrop", void 0);
    __decorate([
        Input()
    ], FileUploadComponent.prototype, "downloadUrl", void 0);
    __decorate([
        Input()
    ], FileUploadComponent.prototype, "replaceable", void 0);
    __decorate([
        Input()
    ], FileUploadComponent.prototype, "newSrc", void 0);
    __decorate([
        Input()
    ], FileUploadComponent.prototype, "config", void 0);
    __decorate([
        Input()
    ], FileUploadComponent.prototype, "type", void 0);
    __decorate([
        Output()
    ], FileUploadComponent.prototype, "complete", void 0);
    __decorate([
        Output()
    ], FileUploadComponent.prototype, "dimen", void 0);
    FileUploadComponent = __decorate([
        Component({
            selector: 'nitrozen-file-upload',
            template: "<div *ngIf=\"type === 'no-preview'\">\n  <div class=\"file-cnt\"  (click)=\"onClick()\" appDragDrop (onFileDropped)=\"uploadDragFile($event)\">\n    <div class=\"file-side-cont\" [ngClass]=\"{'file-active': logo_active}\" >\n      <div class=\"img-ic\" *ngIf=\"!replaceable\">\n        <img src=\"./../../assets/icons/fileupload_upload.svg\">\n      </div>\n      <div class=\"img-ic-new\" *ngIf=\"replaceable && file_type !== 'application/pdf'\">\n        <img src=\"./../../assets/icons/fileupload_general.svg\" style=\"height: 48px;object-fit: cover;\">\n      </div>\n      <div class=\"img-ic-new\" *ngIf=\"replaceable && file_type === 'application/pdf'\">\n        <img src=\"./../../assets/icons/fileupload_placeholder_pdf.svg\" style=\"height: 48px;object-fit: cover;\">\n      </div>\n      <div class=\"img-txt\">\n        <div class=\"txt-cnt-left\" *ngIf=\"!canChange\">{{text}}</div>\n        <div class=\"txt-cnt-left\" *ngIf=\"canChange\">{{uploadedFileName}}</div>\n        <div class=\"txt-msg\" title=\"{{msg}}\">{{msg}}</div>\n        <div *ngIf=\"size\" class=\"txt-msg\" title=\"{{size}}\">{{size}}</div>\n        <div *ngIf=\"dimension\" class=\"txt-msg\" title=\"{{dimension}}\">{{dimension}}</div>\n      </div>\n      \n      <div class=\"file-btn\">\n        <div *ngIf=\"enableCrop && replaceable\">\n           <div class=\"url-down\" (click)=\"openCropTool($event)\">\n              <img src=\"./../../assets/icons/crop_icon.svg\">\n            </div>\n        </div>\n        <div *ngIf=\"downloadUrl\">\n          <div class=\"url-down\" (click)=\"downloadImage(downloadUrl)\">\n            <img src=\"./../../assets/icons/fileupoload-download.svg\">\n          </div>\n        </div>\n        <div class=\"flat-btn-underline\" *ngIf=\"!canChange\">\n         <nitrozen-button-rounded [showProgress]=\"false\" [isStroked]=\"true\" [theme]=\"'primary'\" [showIcon]=\"false\" [shouldBeDisabled]=\"false\"\n            >Upload</nitrozen-button-rounded>\n        </div>\n        <div class=\"flat-btn-underline\"  *ngIf=\"canChange\">\n          <a class=\"btn-text file-change\">Change</a>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- <ul>\n    <li *ngFor=\"let file of files\" [@fadeInOut]=\"file.state\">\n      <mat-progress-bar [value]=\"file.progress\"></mat-progress-bar>\n      <span id=\"file-label\">\n        {{file.data.name}}\n        <a title=\"Retry\" (click)=\"retryFile(file)\" *ngIf=\"file.canRetry\">\n        <mat-icon>refresh</mat-icon></a>\n        <a title=\"Cancel\" (click)=\"cancelFile(file)\" *ngIf=\"file.canCancel\">\n        <mat-icon>cancel</mat-icon></a>\n      </span>\n    </li>\n  </ul> -->\n  <input type=\"file\" id=\"fileUpload\" [required]=\"required\" name=\"fileUpload\" multiple=\"multiple\"\n  accept=\"{{accept}}\" style=\"display:none;\"/>\n\n  <div *ngIf=\"error\"><span  [innerHTML]=\"error\"></span></div>\n</div>\n<div *ngIf=\"type === 'preview' && view === 'landscape'\">\n  <div class=\"file-cnt-image\" [ngClass]=\"{'file-height': canChange}\"  (click)=\"onClick()\" appDragDrop (onFileDropped)=\"uploadDragFile($event)\">\n    <div class=\"inner-cnt\" [ngClass]=\"{'file-active': logo_active}\" >\n      <div class=\"image-cnt\" [ngClass]=\"{'file-image-height': canChange}\">\n        <div class=\"img-ic-image\" *ngIf=\"!canChange && !replaceable\">\n          <img src=\"./../../assets/icons/fileupload_large_upload.svg\">\n        </div>\n        <div class=\"img-txt-image\" *ngIf=\"!canChange && !replaceable\">\n          <div class=\"txt-cnt\">Drag and drop a file here</div>\n          <div class=\"txt-cnt\">or</div>\n          <div class=\"pad-12\">\n            <nitrozen-button-rounded [showProgress]=\"false\" [isStroked]=\"true\" [theme]=\"'primary'\" [showIcon]=\"false\" [shouldBeDisabled]=\"false\"\n            >Upload</nitrozen-button-rounded>\n          </div>\n          <div class=\"pad-12\" *ngIf=\"!canChange\">\n            <div class=\"txt-msg-cn\" title=\"{{msg}}\">{{msg}}</div>\n            <div *ngIf=\"size\" class=\"txt-msg-cn\" title=\"{{size}}\">{{size}}</div>\n            <div *ngIf=\"dimension\" class=\"txt-msg-cn\" title=\"{{dimension}}\">{{dimension}}</div>\n          </div>\n          <!-- <div class=\"txt-cnt\" *ngIf=\"canChange\">{{uploadedFileName}}</div> -->\n          <!--  <div class=\"txt-msg\" title=\"{{msg}}\">{{msg}}</div> -->\n        </div>\n        <div>\n          <div *ngIf=\"canChange && !replaceable\">\n            <img class=\"url-img\" src=\"{{url}}\">\n          </div>\n          <div *ngIf=\"replaceable\">\n            <img class=\"url-img\" src=\"{{newSrc}}\">\n          </div>\n        </div>\n      </div>\n      <div class=\"icn-down-pos\" *ngIf=\"canChange && downloadUrl\">\n            <div class=\"url-down\" (click)=\"downloadImage(downloadUrl)\">\n              <img src=\"./../../assets/icons/fileupoload-download.svg\">\n            </div>\n          </div>\n          <div class=\"icn-down-crop\" *ngIf=\"canChange && enableCrop\">\n            <div class=\"url-down\" (click)=\"openCropTool($event)\">\n              <img class=\"crop-icn\" src=\"./../../assets/icons/crop_icon.svg\">\n            </div>\n          </div>\n    </div>\n    <div class=\"file-btn-image\" *ngIf=\"canChange\">\n      <div class=\"img-new-cnt\">\n        <div class=\"txt-cnt-image\" *ngIf=\"canChange\">{{uploadedFileName}}</div>\n        <div class=\"txt-msg-image\" title=\"{{msg}}\">{{msg}}</div>\n        <div *ngIf=\"size\" class=\"txt-msg-image\" title=\"{{size}}\">{{size}}</div>\n        <div *ngIf=\"dimension\" class=\"txt-msg-image\" title=\"{{dimension}}\">{{dimension}}</div>\n      </div>\n      <div class=\"change-btn\" *ngIf=\"canChange\">\n        <div class=\"flat-btn-underline\">\n          <a class=\"btn-text file-change\">Change</a>\n        </div>\n      </div>\n    </div>\n  </div>\n  <input type=\"file\" id=\"fileUpload\" [required]=\"required\" name=\"fileUpload\" multiple=\"multiple\"\n  accept=\"{{accept}}\" style=\"display:none;\"/>\n\n  <div *ngIf=\"error\"><span  [innerHTML]=\"error\"></span></div>\n</div>\n<div *ngIf=\"type === 'preview' && view === 'protrait'\">\n  <div class=\"file-cnt-image file-flx\" [ngClass]=\"{'file-height': canChange}\">\n    <div class=\"main-file-drop\"  (click)=\"onClick()\" appDragDrop (onFileDropped)=\"uploadDragFile($event)\">\n      <div class=\"inner-cnt-prot\" [ngClass]=\"{'file-active': logo_active}\" >\n        <div class=\"image-cnt-new\">\n          <div class=\"img-ic-image\" *ngIf=\"!canChange && !replaceable\">\n            <img src=\"./../../assets/icons/fileupload_large_upload.svg\">\n          </div>\n          <div class=\"img-txt-image\" *ngIf=\"!canChange && !replaceable\">\n            <!-- <div class=\"txt-cnt break-txt\">Drag and drop a file here or click to upload</div> -->\n            <div class=\"txt-cnt\">Drag and drop a file here</div>\n            <div class=\"txt-cnt\">or</div>\n            <div class=\"pad-12\">\n              <nitrozen-button-rounded [showProgress]=\"false\" [isStroked]=\"true\" [theme]=\"'primary'\" [showIcon]=\"false\" [shouldBeDisabled]=\"false\">Upload</nitrozen-button-rounded>\n            </div>\n            <div class=\"pad-12\" *ngIf=\"!canChange\">\n              <div class=\"txt-msg-cn\" title=\"{{msg}}\">{{msg}}</div>\n              <div *ngIf=\"size\" class=\"txt-msg-cn\" title=\"{{size}}\">{{size}}</div>\n              <div *ngIf=\"dimension\" class=\"txt-msg-cn\" title=\"{{dimension}}\">{{dimension}}</div>\n            </div>\n          </div>\n          <div>\n          <div *ngIf=\"canChange && !replaceable\">\n            <img class=\"url-img-port\" src=\"{{url}}\">\n          </div>\n          <div *ngIf=\"replaceable\">\n            <img class=\"url-img-port\" src=\"{{newSrc}}\">\n          </div>\n          <!-- <div class=\"icn-down-pos\" *ngIf=\"downloadUrl\">\n            <div class=\"url-down\" (click)=\"downloadImage(downloadUrl)\">\n              <img src=\"./../../assets/icons/fileupoload-download.svg\">\n            </div>\n          </div> -->\n        </div>\n        </div>\n        <div class=\"icn-down-pos\" *ngIf=\"canChange && downloadUrl\">\n            <div class=\"url-down\" (click)=\"downloadImage(downloadUrl)\">\n              <img src=\"./../../assets/icons/fileupoload-download.svg\">\n            </div>\n          </div>\n          <div class=\"icn-down-crop-pro\" *ngIf=\"canChange && enableCrop\">\n            <div class=\"url-down\" (click)=\"openCropTool($event)\">\n              <img src=\"./../../assets/icons/crop_icon.svg\">\n            </div>\n          </div>\n      </div>\n    </div>\n    <div class=\"file-btn-image\" *ngIf=\"canChange\">\n      <div class=\"img-new-cnt\">\n        <div class=\"txt-cnt-image\" *ngIf=\"canChange\">{{uploadedFileName}}</div>\n        <div class=\"txt-msg-image\" title=\"{{msg}}\">{{msg}}</div>\n        <div *ngIf=\"size\" class=\"txt-msg-image\" title=\"{{size}}\">{{size}}</div>\n        <div *ngIf=\"dimension\" class=\"txt-msg-image\" title=\"{{dimension}}\">{{dimension}}</div>\n      </div>\n      <div class=\"change-btn\" *ngIf=\"canChange\">\n        <div class=\"flat-btn-underline\">\n          <a class=\"btn-text file-change\" (click)=\"onClick()\">Change</a>\n        </div>\n      </div>\n    </div>\n  </div>\n  <input type=\"file\" id=\"fileUpload\" [required]=\"required\" name=\"fileUpload\" multiple=\"multiple\"\n  accept=\"{{accept}}\" style=\"display:none;\"/>\n  <div *ngIf=\"error\"><span  [innerHTML]=\"error\"></span></div>\n</div>",
            animations: [
                trigger('fadeInOut', [
                    state('in', style({ opacity: 100 })),
                    transition('* => void', [
                        animate(300, style({ opacity: 0 }))
                    ])
                ])
            ],
            styles: [".file-cnt{display:flex;width:65%;border-radius:3px;padding:12px;border:1px solid #e4e5e6;cursor:pointer;background-color:#f8f8f8}.file-side-cont{display:flex;width:100%;border:1px dashed #d7d7d7;border-radius:3px;background-color:#fff;padding:12px}.crop-icn{width:40px}.file-active{border:1px dashed #00f!important}.url-down{display:flex;height:100%;padding-right:25%}.icn-down-pos{position:absolute;right:10px;bottom:20px;top:175px;z-index:1}.icn-down-crop{position:absolute;right:60px;bottom:20px;top:175px;z-index:1}.icn-down-crop-pro{position:absolute;z-index:1;bottom:20px;right:40px}.file-cnt-image{width:486px;border:1px solid #e4e5e6;border-radius:3px;background-color:#f8f8f8;position:relative;cursor:pointer}.file-height{height:480px}.file-flx{display:flex;justify-content:center}.main-file-drop{width:265px;border-radius:3px;border:1px solid #e4e5e6;background-color:#d8d8d8;position:relative;cursor:pointer;height:330px;margin:10px 0}.img-txt-image{padding-top:12px}.break-txt{word-break:break-all;width:201px;text-align:center!important}.image-cnt-new{vertical-align:middle;margin:0 -50% 0 0;position:absolute;top:51%;left:50%;transform:translate(-50%,-50%)}.img-ic{border-radius:3px;padding:10px;align-items:center;display:flex}.img-ic-new{align-items:center;display:flex}.url-img{height:335px;width:466px;-o-object-fit:cover;object-fit:cover}.url-img-port{height:330px;width:266px;-o-object-fit:cover;object-fit:cover}.change-btn{display:flex;align-items:center;padding-right:12px}.img-new-cnt{flex:1;padding:12px}.text-msg-image{color:#9b9b9b;font-family:Poppins;font-size:12px;text-align:left;padding-left:10px}.file-btn-image{position:absolute;bottom:-40px;left:50%;transform:translate(-50%,-50%);width:96%;background:#fff;display:flex;justify-content:space-around}.inner-cnt{height:332px;border:1px dashed #d7d7d7;border-radius:3px;background-color:#fff;margin:10px}.inner-cnt-prot{border:1px dashed #d7d7d7;border-radius:3px;background-color:#fff;height:328px}.file-change{color:#5c6bdd!important;font-size:12px!important}.image-cnt{vertical-align:middle;margin:0 -50% 0 0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.file-image-height{top:37.8%}.img-txt{padding-left:24px;padding-top:10px}.txt-cnt{color:#61636a;font-family:Poppins;font-size:16px;text-align:center;text-overflow:ellipsis;max-width:275px;overflow:auto}.txt-cnt-left{color:#41434c;font-family:Poppins;font-size:12px;text-align:left;text-overflow:ellipsis;max-width:275px;overflow:auto}.txt-cnt-image{color:#41434c;font-family:Poppins;font-size:12px;text-overflow:ellipsis;max-width:275px;overflow:auto;text-align:left}.txt-msg{color:#9b9b9b;font-family:Poppins;font-size:12px;text-align:left;width:275px}.pad-12{padding-top:12px}.txt-msg-cn{text-align:center;color:#9b9b9b;font-family:Poppins;font-size:12px;width:275px}.txt-msg-image{color:#9b9b9b;font-family:Poppins;font-size:12px;text-align:left;width:275px}"]
        })
    ], FileUploadComponent);
    return FileUploadComponent;
}());
var FileUploadModel = /** @class */ (function () {
    function FileUploadModel() {
    }
    return FileUploadModel;
}());

var ButtonRoundedComponent = /** @class */ (function () {
    function ButtonRoundedComponent() {
        this.clicked = new EventEmitter();
    }
    ButtonRoundedComponent.prototype.ngOnInit = function () {
        this.theme = this.theme ? this.theme : 'primary';
    };
    ButtonRoundedComponent.prototype.clickedButton = function (event) {
        this.clicked.emit(event);
    };
    __decorate([
        Input()
    ], ButtonRoundedComponent.prototype, "showProgress", void 0);
    __decorate([
        Input()
    ], ButtonRoundedComponent.prototype, "isContained", void 0);
    __decorate([
        Input()
    ], ButtonRoundedComponent.prototype, "focused", void 0);
    __decorate([
        Input()
    ], ButtonRoundedComponent.prototype, "isStroked", void 0);
    __decorate([
        Input()
    ], ButtonRoundedComponent.prototype, "theme", void 0);
    __decorate([
        Input()
    ], ButtonRoundedComponent.prototype, "shouldBeDisabled", void 0);
    __decorate([
        Input()
    ], ButtonRoundedComponent.prototype, "showIcon", void 0);
    __decorate([
        Output()
    ], ButtonRoundedComponent.prototype, "clicked", void 0);
    ButtonRoundedComponent = __decorate([
        Component({
            selector: 'nitrozen-button-rounded',
            template: "<div class=\"primary-theme\" [ngClass]=\"{\n    'primary-section': theme === 'primary' ,\n    'secondary-section': theme === 'accent'\n  }\">\n\t<button mat-button   class=\"btn-nitrozen\" \n[ngClass]=\"{\n    'mat-stroked-button': isStroked,\n    'mat-flat-button':isContained,\n    'btn-focused':focused,\n    'hover-state':showProgress\n  }\"\n  [disabled]=\"shouldBeDisabled\"\n  (click)=\"clickedButton($event)\"\n\n>\n\n<div class=\"btn-icon-show\">\n  <span class=\"btn-txt\" \n  [ngClass]=\"{\n    'btn-show-icn': showIcon,\n    'btn-stroke-color':isStroked,\n    'btn-contained-color':isContained,\n    'btn-progress': !showProgress,\n    'btn-notprogress' : showProgress\n  }\">\n    <ng-content></ng-content>\n  </span>\n\n  <div class=\"btn-spin\" [ngClass]=\"{\n    'btn-spin-stroke': isStroked,\n    'btn-spin-contained':isContained,\n    'btn-progress': !showProgress,\n    'btn-notprogress' : showProgress\n  }\" *ngIf=\"showIcon\">\n  <img src=\"./../../assets/icons/Bag_Icon.svg\">\n</div>\n <div class=\"btn-spin fx-wt\" [ngClass]=\"{\n    'btn-spin-stroke': isStroked,\n    'btn-spin-contained':isContained,\n    'btn-notprogress': !showProgress,\n    'btn-progress' : showProgress\n  }\" *ngIf=\"!shouldBeDisabled\">\n  <img *ngIf=\"isContained\" class=\"btn-spinner\" style=\"width: 40px;\" src=\"../../../assets/icons/loader-white-1.gif\">\n  <img *ngIf=\"isStroked && theme === 'primary'\" class=\"btn-spinner\" style=\"width: 40px;\" src=\"../../../assets/icons/loader-blue.gif\">\n  <img *ngIf=\"isStroked && theme === 'accent'\" class=\"btn-spinner\" style=\"width: 40px;\" src=\"../../../assets/icons/loader-blue.gif\">\n  <!-- <mat-progress-spinner\n    class=\"btn-spinner\"\n    [ngClass]=\"{'c-button__spinner--active': showProgress && !shouldBeDisabled}\"\n    diameter=\"21\"\n    mode=\"indeterminate\"\n  ></mat-progress-spinner> -->\n</div>\n</div>\n\n\n<!-- <span class=\"btn-txt\" *ngIf=\"!showProgress && !showIcon\">\n    <ng-content></ng-content>\n  </span> -->\n\n \n</button>\n\n\n</div>\n",
            styles: [".btn-nitrozen{height:40px;border-radius:21px;padding:0 32px;outline:0;cursor:pointer}.hover-state{pointer-events:none}.btn-notprogress{opacity:0;transition:opacity .25s ease-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.btn-progress{opacity:1}.fx-wt{width:66.38px}.primary-section .mat-flat-button.btn-focused{text-decoration:underline;color:#fff;text-underline-position:under}.primary-section .mat-stroked-button.btn-focused{text-decoration:underline;color:#5c6bdd;text-underline-position:under}.primary-section .mat-flat-button{background-color:#5c6bdd}.primary-section .mat-flat-button:hover:not([disabled]){background-color:#4f5ecc}.primary-section .mat-flat-button:focus{text-decoration:underline;color:#fff;text-underline-position:under}.primary-section .mat-stroked-button{border:1px solid #5c6bdd!important}.primary-section .mat-stroked-button:hover:not([disabled]){background-color:rgba(79,94,204,.12)}.primary-section .mat-stroked-button:focus{text-decoration:underline;color:#5c6bdd;text-underline-position:under}.primary-section .btn-spin-stroke .mat-spinner circle,.primary-section .btn-spin-stroke ::ng-deep .mat-progress-spinner circle{stroke:#5c6bdd}.primary-section .btn-spin-contained .mat-spinner circle,.primary-section .btn-spin-contained ::ng-deep .mat-progress-spinner circle{stroke:#fff}.primary-section .mat-flat-button:disabled,.primary-section .mat-flat-button[disabled=disabled]{background-color:rgba(54,204,155,.4)!important}.primary-section .btn-txt{font-family:Poppins;font-size:16px;font-weight:700;line-height:25px;text-align:center}.primary-section .btn-stroke-color{color:#5c6bdd}.primary-section .btn-contained-color{color:#fff}.primary-section .btn-spinner{text-align:center}.primary-section .btn-spin{display:flex;justify-content:center}.primary-section .btn-fynd-icon{height:48px;width:190px;border-radius:3px;background-color:#5c6bdd}.primary-section .btn-fynd-icon:hover:not([disabled]){background-color:#2eb589}.primary-section .btn-fynd-icon:focus{text-decoration:underline;color:#fff;text-underline-position:under}.primary-section .btn-show-icn{padding-left:10px}.primary-section .btn-icon-show{display:flex;flex-direction:row-reverse;justify-content:center}.secondary-section .mat-flat-button.btn-focused{text-decoration:underline;color:#fff;text-underline-position:under}.secondary-section .mat-stroked-button.btn-focused{text-decoration:underline;color:#5c6bdd;text-underline-position:under}.secondary-section .mat-flat-button{background-color:#5c6bdd}.secondary-section .mat-flat-button:hover:not([disabled]){background-color:#4f5ecc}.secondary-section .mat-flat-button:focus{text-decoration:underline;color:#fff;text-underline-position:under}.secondary-section .mat-stroked-button{border:1px solid #5c6bdd}.secondary-section .mat-stroked-button:hover:not([disabled]){background-color:rgba(79,94,204,.12)}.secondary-section .mat-stroked-button:focus{text-decoration:underline;color:#5c6bdd;text-underline-position:under}.secondary-section .btn-spin-stroke .mat-spinner circle,.secondary-section .btn-spin-stroke ::ng-deep .mat-progress-spinner circle{stroke:#5c6bdd}.secondary-section .btn-spin-contained .mat-spinner circle,.secondary-section .btn-spin-contained ::ng-deep .mat-progress-spinner circle{stroke:#fff}.secondary-section .mat-flat-button:disabled,.secondary-section .mat-flat-button[disabled=disabled]{background-color:rgba(92,107,221,.4)!important}.secondary-section .mat-stroked-button:disabled .btn-stroke-color,.secondary-section .mat-stroked-button[disabled=disabled] .btn-stroke-color{color:rgba(92,107,221,.4)!important}.secondary-section .btn-txt{font-family:Poppins;font-size:16px;font-weight:700;line-height:25px;text-align:center}.secondary-section .btn-stroke-color{color:#5c6bdd}.secondary-section .btn-contained-color{color:#fff}.secondary-section .btn-spinner{text-align:center}.secondary-section .btn-spin{display:flex;justify-content:center}.secondary-section .btn-fynd-icon{height:48px;width:190px;border-radius:3px;background-color:#5c6bdd}.secondary-section .btn-fynd-icon:hover:not([disabled]){background-color:#2eb589}.secondary-section .btn-fynd-icon:focus{text-decoration:underline;color:#fff;text-underline-position:under}.secondary-section .btn-show-icn{padding-left:10px}.secondary-section .btn-icon-show{display:flex;flex-direction:row-reverse;justify-content:center}"]
        })
    ], ButtonRoundedComponent);
    return ButtonRoundedComponent;
}());

var ButtonRoundedModule = /** @class */ (function () {
    function ButtonRoundedModule() {
    }
    ButtonRoundedModule = __decorate([
        NgModule({
            declarations: [ButtonRoundedComponent],
            imports: [
                CommonModule,
                MatButtonModule,
                MatProgressSpinnerModule
            ],
            exports: [
                ButtonRoundedComponent,
                MatButtonModule,
                MatProgressSpinnerModule
            ]
        })
    ], ButtonRoundedModule);
    return ButtonRoundedModule;
}());

var DragDropDirective = /** @class */ (function () {
    function DragDropDirective() {
        this.onFileDropped = new EventEmitter();
    }
    // @HostBinding('style.background-color') private background = '#f5fcff'
    // @HostBinding('style.opacity') private opacity = '1'
    //Dragover listener
    DragDropDirective.prototype.onDragOver = function (evt) {
        evt.preventDefault();
        evt.stopPropagation();
        // this.background = '#9ecbec';
        // this.opacity = '0.8'
    };
    //Dragleave listener
    DragDropDirective.prototype.onDragLeave = function (evt) {
        evt.preventDefault();
        evt.stopPropagation();
        // this.background = '#f5fcff'
        // this.opacity = '1'
    };
    //Drop listener
    DragDropDirective.prototype.ondrop = function (evt) {
        evt.preventDefault();
        evt.stopPropagation();
        // this.background = '#f5fcff'
        // this.opacity = '1'
        var files = evt.dataTransfer.files;
        if (files.length > 0) {
            this.onFileDropped.emit(files);
        }
    };
    __decorate([
        Output()
    ], DragDropDirective.prototype, "onFileDropped", void 0);
    __decorate([
        HostListener('dragover', ['$event'])
    ], DragDropDirective.prototype, "onDragOver", null);
    __decorate([
        HostListener('dragleave', ['$event'])
    ], DragDropDirective.prototype, "onDragLeave", null);
    __decorate([
        HostListener('drop', ['$event'])
    ], DragDropDirective.prototype, "ondrop", null);
    DragDropDirective = __decorate([
        Directive({
            selector: '[appDragDrop]'
        })
    ], DragDropDirective);
    return DragDropDirective;
}());

var FileUploadModule = /** @class */ (function () {
    function FileUploadModule() {
    }
    FileUploadModule = __decorate([
        NgModule({
            declarations: [FileUploadComponent, DragDropDirective, CropModalComponent],
            imports: [
                CommonModule,
                MatButtonModule,
                ButtonTextModule,
                ButtonModule,
                ButtonRoundedModule,
                MatProgressSpinnerModule,
                MatProgressBarModule,
                ImageCropperModule,
                MatIconModule
            ],
            exports: [
                FileUploadComponent,
                MatButtonModule,
                MatProgressSpinnerModule,
                MatProgressBarModule,
                MatIconModule
            ],
            entryComponents: [CropModalComponent]
        })
    ], FileUploadModule);
    return FileUploadModule;
}());

/**
 * Generated bundle index. Do not edit.
 */

export { ButtonModule, ButtonTextModule, CheckboxModule, FileUploadModule, InputModule, RadioButtonModule, SearchableSelectModule, SelectModule, SnackBarModule, TabsModule, VerticalTabsModule, ɵ0, ButtonComponent as ɵa, ButtonTextComponent as ɵb, CheckboxComponent as ɵc, RadioButtonComponent as ɵd, InputComponent as ɵe, InputSuffixComponent as ɵf, InputPrefixComponent as ɵg, SelectComponent as ɵh, SearchableSelectComponent as ɵi, SelectCheckAllComponent as ɵj, SnackBarComponent as ɵk, CustomSnackbarComponent as ɵl, VerticalTabsComponent as ɵm, TabsComponent as ɵn, FileUploadComponent as ɵo, DragDropDirective as ɵp, CropModalComponent as ɵq, ButtonRoundedModule as ɵr, ButtonRoundedComponent as ɵs };
//# sourceMappingURL=nitrozen.js.map