import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@vcomply/editor";
import * as i3 from "@angular/forms";
export class AddSegmentPopupComponent {
    constructor() {
        this.selectedColor = '#325cd3';
        this.save = new EventEmitter();
        this.closeSegment = new EventEmitter();
        this.segmentCollection = [];
        this.criteria = {
            id: '',
            segmentName: '',
            segmentDescription: '',
            toRange: 0,
            fromRange: 0,
            color: '#000000'
        };
        this.segmentError = [];
        this.description = {
            mode: 'prime',
            placeholder: 'Enter description for this segment',
        };
    }
    ngOnInit() {
        this.criteria = { ...this.criteria };
        // this.segmentCollection = {...this.segmentCollection}
    }
    fromManager(mode) {
        if (mode === '+') {
            this.criteria.fromRange = this.criteria.fromRange + 1;
        }
        else if (mode === '-') {
            if (this.criteria.fromRange > 0) {
                this.criteria.fromRange = this.criteria.fromRange - 1;
            }
        }
    }
    toManager(mode) {
        if (mode === '+') {
            this.criteria.toRange = this.criteria.toRange + 1;
        }
        else if (mode === '-') {
            if (this.criteria.toRange > 0) {
                this.criteria.toRange = this.criteria.toRange - 1;
            }
        }
    }
    saveSegment() {
        if (this.validateSegment()) {
            this.save.emit({ ...this.criteria });
        }
    }
    closeResult() {
        // this.closeSegment.emit();
    }
    validateSegment() {
        let fromRange = this.criteria.fromRange;
        let toRange = this.criteria.toRange;
        this.segmentError = [];
        let status;
        if (fromRange > this.maxRange || toRange > this.maxRange) {
            this.segmentError.push({ type: 'INVALID_RANGE', message: 'Please enter a valid range for this segment.' });
            return false;
        }
        if (this.criteria.segmentName.trim().length === 0) {
            this.segmentError.push({ type: 'NAME_MISSING', message: 'Please enter a name for this segment.' });
            return false;
        }
        else if (fromRange >= toRange) {
            this.segmentError.push({ type: 'RANGE_REVERSE', message: 'Please enter a valid range for this segment.' });
            return false;
        }
        else if (this.segmentCollection.length > 0) {
            status = this.segmentCollection.some((segment) => {
                if (this.mode === 'EDIT') {
                    if (segment.id !== this.criteria.id) {
                        return ((fromRange >= segment['fromRange'] && fromRange <= segment['toRange']) || (toRange >= segment['fromRange'] && toRange <= segment['toRange']));
                    }
                    else {
                        return false;
                    }
                }
                else {
                    return ((fromRange >= segment['fromRange'] && fromRange <= segment['toRange']) || (toRange >= segment['fromRange'] && toRange <= segment['toRange']));
                }
            });
        }
        else {
            return true;
        }
        if (status === true) {
            this.segmentError.push({ type: 'INVALID_RANGE', message: 'This score range already exists. Please select different values.' });
            return false;
        }
        else {
            return true;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddSegmentPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AddSegmentPopupComponent, selector: "app-add-segment-popup", inputs: { top: "top", left: "left", segmentCollection: "segmentCollection", mode: "mode", maxRange: "maxRange", criteria: "criteria" }, outputs: { save: "save", closeSegment: "closeSegment" }, ngImport: i0, template: "<div class=\"add-segment-popup vx-p-5 vx-pb-0\" [class.error]=\"segmentError.length > 0\">\n    <div class=\"form-item vx-mb-4\">\n        <div class=\"label vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">SEGMENT NAME <span class=\"vx-fs-16 vx-fw-400 vx-txt-red\">*</span></div>\n        <input type=\"text\" placeholder=\"Enter Segment Name\" [(ngModel)]=\"criteria.segmentName\">\n        <div class=\"action-color vx-d-flex vx-align-center vx-justify-center\">\n            <input type=\"color\" [(ngModel)]=\"criteria.color\" [ngModelOptions]=\"{standalone: true}\">\n            <i class=\"icons vx-fs-24\" [style.color]='criteria.color'>&#xeb01;</i>\n        </div>\n    </div>\n    <div class=\"form-item vx-mb-4\">\n        <div class=\"label vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">SEGMENT DESCRIPTION</div>\n        <vcomply-editor [editorConfig]=\"description\" [(ngModel)]=\"criteria.segmentDescription\"></vcomply-editor>\n    </div>\n    <div class=\"form-item vx-mb-4\">\n        <div class=\"label vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">SET SCORE RANGE <span class=\"vx-fs-16 vx-fw-400 vx-txt-red\">*</span></div>\n        <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n            <div class=\"score-field vx-d-flex vx-align-center vx-justify-between\">\n                <div class=\"name vx-fs-12 vx-paragraph-txt vx-pl-3\">From</div>\n                <div class=\"input-area vx-d-flex vx-align-center vx-pr-1\">\n                    <button (click)=\"fromManager('-')\" class=\"vx-fs-14 vx-fw-500 vx-paragraph-txt vx-p-0 vx-pl-2 vx-pr-2 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">-</button>\n                    <input type=\"number\" [(ngModel)]=\"criteria.fromRange\" type=\"number\">\n                    <button (click)=\"fromManager('+')\" class=\"vx-fs-14 vx-fw-500 vx-paragraph-txt vx-p-0 vx-pl-2 vx-pr-2 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">+</button>\n                </div>\n            </div>\n            <div class=\"score-field vx-d-flex vx-align-center vx-justify-between\">\n                <div class=\"name vx-fs-12 vx-paragraph-txt vx-pl-3\">To</div>\n                <div class=\"input-area vx-d-flex vx-align-center vx-pr-1\">\n                    <button (click)=\"toManager('-')\" class=\"vx-fs-14 vx-fw-500 vx-paragraph-txt vx-p-0 vx-pl-2 vx-pr-2 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">-</button>\n                    <input [(ngModel)]=\"criteria.toRange\" type=\"number\">\n                    <button (click)=\"toManager('+')\" class=\"vx-fs-14 vx-fw-500 vx-paragraph-txt vx-p-0 vx-pl-2 vx-pr-2 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">+</button>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"segment-popup-bottom vx-d-flex vx-align-center vx-justify-end vx-p-3 vx-pl-5 vx-pr-5\" *ngIf=\"segmentError.length === 0\">\n        <button (click)=\"saveSegment()\" class=\"save-btn vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">SAVE</button>\n    </div>\n    <div class=\"segment-popup-bottom error vx-d-flex vx-align-center vx-justify-between vx-p-3 vx-pl-5 vx-pr-5\" *ngIf=\"segmentError.length > 0\">\n        <div class=\"text vx-fs-12 vx-txt-white\">{{segmentError[0].message}}</div>\n        <button (click)=\"saveSegment()\" class=\"save-btn vx-fs-11 vx-fw-500 vx-txt-red vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">SAVE</button>\n    </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";.add-segment-popup{background:#fff;border-radius:.25rem;border:1px solid transparent;box-shadow:0 10px 20px #1e5dd326}.add-segment-popup.error{border-color:#d93b41}.add-segment-popup .form-item{position:relative}.add-segment-popup .form-item input{background:#fff;border:1px solid #DBDBDB;border-radius:.25rem;color:#747576;font-size:12px;padding:0 .75rem;height:2.25rem;width:100%;outline:none;transition:all .3s ease-in-out}.add-segment-popup .form-item input::placeholder{color:#747576;opacity:1}.add-segment-popup .form-item:hover input{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd326}.add-segment-popup .form-item:hover input:hover,.add-segment-popup .form-item:hover input:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd326}.add-segment-popup .form-item:hover .score-field .input-area input{box-shadow:none}.add-segment-popup .form-item:hover .score-field .input-area input:hover,.add-segment-popup .form-item:hover .score-field .input-area input:focus{box-shadow:none}.add-segment-popup .form-item .action-color{background:#f1f1f1;border-radius:.125rem;width:1.875rem;height:1.875rem;position:absolute;bottom:.1875rem;right:.1875rem}.add-segment-popup .form-item .action-color input{position:absolute;inset:0;margin:0;width:100%;height:100%;cursor:pointer;opacity:0}.add-segment-popup .form-item vcomply-editor .editor-container .editable-block{font-size:12px;padding:.5rem .75rem}.add-segment-popup .form-item vcomply-editor .editor-container .editable-block:before{color:#747576!important}.add-segment-popup .form-item .score-field{border:1px solid #DBDBDB;border-radius:.25rem;width:calc(50% - .5rem);height:2.25rem}.add-segment-popup .form-item .score-field .input-area button{background:transparent;border:none;border-radius:0;width:1.25rem;height:1.25rem}.add-segment-popup .form-item .score-field .input-area input{-moz-appearance:textfield!important;background:#fff;border:1px solid #F1F1F1;border-radius:.25rem;color:#747576;font-size:13px;text-align:center;width:44px;height:1.5rem;outline:none}.add-segment-popup .form-item .score-field .input-area input:hover,.add-segment-popup .form-item .score-field .input-area input:focus{box-shadow:none}.add-segment-popup .segment-popup-bottom{background:#fbfbfb;border-top:1px solid #F1F1F1;border-radius:0 0 3px 3px;margin:0 0 0 -1.3125rem;width:calc(100% + 2.625rem);position:relative;bottom:-.0625rem}.add-segment-popup .segment-popup-bottom button{border-radius:.125rem;height:1.875rem;width:5rem}.add-segment-popup .segment-popup-bottom button.save-btn{background:#1e5dd3;border:none}.add-segment-popup .segment-popup-bottom.error{background:#d93b41;border-color:#d93b41}.add-segment-popup .segment-popup-bottom.error button.save-btn{background:#fff;border-color:#d93b41}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MarxEditorComponent, selector: "vcomply-editor", inputs: ["editorConfig"], outputs: ["comment", "sendSavedFiles", "popup"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddSegmentPopupComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-add-segment-popup', template: "<div class=\"add-segment-popup vx-p-5 vx-pb-0\" [class.error]=\"segmentError.length > 0\">\n    <div class=\"form-item vx-mb-4\">\n        <div class=\"label vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">SEGMENT NAME <span class=\"vx-fs-16 vx-fw-400 vx-txt-red\">*</span></div>\n        <input type=\"text\" placeholder=\"Enter Segment Name\" [(ngModel)]=\"criteria.segmentName\">\n        <div class=\"action-color vx-d-flex vx-align-center vx-justify-center\">\n            <input type=\"color\" [(ngModel)]=\"criteria.color\" [ngModelOptions]=\"{standalone: true}\">\n            <i class=\"icons vx-fs-24\" [style.color]='criteria.color'>&#xeb01;</i>\n        </div>\n    </div>\n    <div class=\"form-item vx-mb-4\">\n        <div class=\"label vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">SEGMENT DESCRIPTION</div>\n        <vcomply-editor [editorConfig]=\"description\" [(ngModel)]=\"criteria.segmentDescription\"></vcomply-editor>\n    </div>\n    <div class=\"form-item vx-mb-4\">\n        <div class=\"label vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">SET SCORE RANGE <span class=\"vx-fs-16 vx-fw-400 vx-txt-red\">*</span></div>\n        <div class=\"vx-d-flex vx-align-center vx-justify-between\">\n            <div class=\"score-field vx-d-flex vx-align-center vx-justify-between\">\n                <div class=\"name vx-fs-12 vx-paragraph-txt vx-pl-3\">From</div>\n                <div class=\"input-area vx-d-flex vx-align-center vx-pr-1\">\n                    <button (click)=\"fromManager('-')\" class=\"vx-fs-14 vx-fw-500 vx-paragraph-txt vx-p-0 vx-pl-2 vx-pr-2 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">-</button>\n                    <input type=\"number\" [(ngModel)]=\"criteria.fromRange\" type=\"number\">\n                    <button (click)=\"fromManager('+')\" class=\"vx-fs-14 vx-fw-500 vx-paragraph-txt vx-p-0 vx-pl-2 vx-pr-2 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">+</button>\n                </div>\n            </div>\n            <div class=\"score-field vx-d-flex vx-align-center vx-justify-between\">\n                <div class=\"name vx-fs-12 vx-paragraph-txt vx-pl-3\">To</div>\n                <div class=\"input-area vx-d-flex vx-align-center vx-pr-1\">\n                    <button (click)=\"toManager('-')\" class=\"vx-fs-14 vx-fw-500 vx-paragraph-txt vx-p-0 vx-pl-2 vx-pr-2 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">-</button>\n                    <input [(ngModel)]=\"criteria.toRange\" type=\"number\">\n                    <button (click)=\"toManager('+')\" class=\"vx-fs-14 vx-fw-500 vx-paragraph-txt vx-p-0 vx-pl-2 vx-pr-2 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">+</button>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"segment-popup-bottom vx-d-flex vx-align-center vx-justify-end vx-p-3 vx-pl-5 vx-pr-5\" *ngIf=\"segmentError.length === 0\">\n        <button (click)=\"saveSegment()\" class=\"save-btn vx-fs-11 vx-fw-500 vx-txt-white vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">SAVE</button>\n    </div>\n    <div class=\"segment-popup-bottom error vx-d-flex vx-align-center vx-justify-between vx-p-3 vx-pl-5 vx-pr-5\" *ngIf=\"segmentError.length > 0\">\n        <div class=\"text vx-fs-12 vx-txt-white\">{{segmentError[0].message}}</div>\n        <button (click)=\"saveSegment()\" class=\"save-btn vx-fs-11 vx-fw-500 vx-txt-red vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\">SAVE</button>\n    </div>\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";.add-segment-popup{background:#fff;border-radius:.25rem;border:1px solid transparent;box-shadow:0 10px 20px #1e5dd326}.add-segment-popup.error{border-color:#d93b41}.add-segment-popup .form-item{position:relative}.add-segment-popup .form-item input{background:#fff;border:1px solid #DBDBDB;border-radius:.25rem;color:#747576;font-size:12px;padding:0 .75rem;height:2.25rem;width:100%;outline:none;transition:all .3s ease-in-out}.add-segment-popup .form-item input::placeholder{color:#747576;opacity:1}.add-segment-popup .form-item:hover input{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd326}.add-segment-popup .form-item:hover input:hover,.add-segment-popup .form-item:hover input:focus{border-color:#1e5dd3;box-shadow:0 3px 6px #1e5dd326}.add-segment-popup .form-item:hover .score-field .input-area input{box-shadow:none}.add-segment-popup .form-item:hover .score-field .input-area input:hover,.add-segment-popup .form-item:hover .score-field .input-area input:focus{box-shadow:none}.add-segment-popup .form-item .action-color{background:#f1f1f1;border-radius:.125rem;width:1.875rem;height:1.875rem;position:absolute;bottom:.1875rem;right:.1875rem}.add-segment-popup .form-item .action-color input{position:absolute;inset:0;margin:0;width:100%;height:100%;cursor:pointer;opacity:0}.add-segment-popup .form-item vcomply-editor .editor-container .editable-block{font-size:12px;padding:.5rem .75rem}.add-segment-popup .form-item vcomply-editor .editor-container .editable-block:before{color:#747576!important}.add-segment-popup .form-item .score-field{border:1px solid #DBDBDB;border-radius:.25rem;width:calc(50% - .5rem);height:2.25rem}.add-segment-popup .form-item .score-field .input-area button{background:transparent;border:none;border-radius:0;width:1.25rem;height:1.25rem}.add-segment-popup .form-item .score-field .input-area input{-moz-appearance:textfield!important;background:#fff;border:1px solid #F1F1F1;border-radius:.25rem;color:#747576;font-size:13px;text-align:center;width:44px;height:1.5rem;outline:none}.add-segment-popup .form-item .score-field .input-area input:hover,.add-segment-popup .form-item .score-field .input-area input:focus{box-shadow:none}.add-segment-popup .segment-popup-bottom{background:#fbfbfb;border-top:1px solid #F1F1F1;border-radius:0 0 3px 3px;margin:0 0 0 -1.3125rem;width:calc(100% + 2.625rem);position:relative;bottom:-.0625rem}.add-segment-popup .segment-popup-bottom button{border-radius:.125rem;height:1.875rem;width:5rem}.add-segment-popup .segment-popup-bottom button.save-btn{background:#1e5dd3;border:none}.add-segment-popup .segment-popup-bottom.error{background:#d93b41;border-color:#d93b41}.add-segment-popup .segment-popup-bottom.error button.save-btn{background:#fff;border-color:#d93b41}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { top: [{
                type: Input
            }], left: [{
                type: Input
            }], save: [{
                type: Output
            }], closeSegment: [{
                type: Output
            }], segmentCollection: [{
                type: Input
            }], mode: [{
                type: Input
            }], maxRange: [{
                type: Input
            }], criteria: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 