npm - vcomply-workflow-engine - Versions diffs - 2.9.30 → 2.9.32 - Mend

vcomply-workflow-engine 2.9.30 → 2.9.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (216) hide show

package/esm2015/lib/sharedComponents/checkpoint/checkpoints-questions/checkpoints-questions.component.js CHANGED Viewed

@@ -90,7 +90,7 @@ CheckpointsQuestionsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-checkpoints-questions',
                 template: "<!-- <p>checkpoints-questions works!</p> -->\r\n<div class=\"checkpoints-questions\">\r\n    <div class=\"checkpoints-questions-blocks instruction\"\r\n        [class.filled]=\"checkpointInstruction.length>0 && !addInstruction\">\r\n        <div class=\"container\">\r\n            <h3 class=\"question\">\r\n                <span class=\"counter\" *ngIf=\"!addInstruction\"><i class=\"icons\">&#xe932;</i></span>\r\n                <span class=\"text\" *ngIf=\"!addInstruction\" \r\n                    [innerHTML]=\"checkpointInstruction.length>0 ? (checkpointInstruction | formatHtml) :'Add instruction'\"></span>\r\n                <span class=\"text\" *ngIf=\"addInstruction && false\">\r\n                    <marx-editor [(ngModel)]=\"checkpointInstruction\" [editorConfig]=\"{mode: 'prime',\r\n                    colorPalette: true,\r\n                    link: true,\r\n                    placeholder: 'Add instruction',\r\n                    buttonName:'SAVE', id:'checkpoint-instructions'}\" (comment)=\"saveDescription()\"></marx-editor>\r\n                </span>\r\n            </h3>\r\n        </div>\r\n    </div>\r\n\r\n    <ng-container *ngFor=\"let question of checkpointData; let questionIndex = index\">\r\n        <div  class=\"checkpoints-questions-blocks\"\r\n            *ngIf=\"['textbox','date','upload'].includes(question?.type)\"\r\n            [class.error]=\"errorIndex === questionIndex\">\r\n            <div class=\"container\">\r\n                <h3 class=\"question\">\r\n                    <span class=\"counter\">{{questionIndex+1}}. <span class=\"required\"\r\n                            *ngIf=\"question.required\">*</span></span>\r\n                    <input class=\"text\" type=\"text\" [placeholder]=\"placeholder[question.type]\"\r\n                        [(ngModel)]=\"question.label\" readonly>\r\n                </h3>\r\n                <ng-container class=\"preview\" *ngIf=\"activeQuestionIndex !== questionIndex\">\r\n                    <label class=\"file-upload\" *ngIf=\"question.type==='upload'\">\r\n                        <input type=\"file\" disabled>\r\n                        <span><i class=\"icons\">&#xe9ed;</i> Browse File</span>\r\n                    </label>\r\n                    <ng-container *ngIf=\"question.type === 'date'\">\r\n                        <div class=\"date-picker\">\r\n                            <i class=\"icons\">&#xe92d;</i>\r\n                            <input type=\"text\" placeholder=\"Select date\"\r\n                                (click)=\"openDatePicker();$event.stopPropagation(); datePickerOverlay = true;\" disabled>\r\n                            <dp-date-picker #datePicker (click)=\"$event.stopPropagation();\"> </dp-date-picker>\r\n                            <div class=\"vx-overlay\" (click)=\"closeDatepicker();$event.stopPropagation();\"\r\n                                *ngIf=\"datePickerOverlay\"></div>\r\n                        </div>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </div>\r\n            <div class=\"footer\">\r\n                <div class=\"left\">\r\n                    <app-cs-checkbox [ngValue]=\"question.required\" (ngValueChange)=\"question.required = $event\">Is\r\n                        required</app-cs-checkbox>\r\n                </div>\r\n                <div class=\"right\">\r\n                    <ul>\r\n                        <li>\r\n                            <button [appTooltip]=\"'Add new'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"\r\n                                (click)=\"blankClone(question.type,questionIndex);$event.stopPropagation();\">\r\n                                <i class=\"icons\">&#xe915;</i>\r\n                            </button>\r\n                        </li>\r\n                        <li>\r\n                            <button class=\"delete\" [appTooltip]=\"'Delete'\" placement=\"bottom\" delay=\"0\"\r\n                                [tooltipMandatory]=\"true\"\r\n                                (click)=\"removeQuestion(questionIndex);$event.stopPropagation();\">\r\n                                <i class=\"icons\">&#xe923;</i>\r\n                            </button>\r\n                        </li>\r\n                        <li>\r\n                            <!-- <button [appTooltip]=\"'Copy'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"\r\n                                (click)=\"cloneQuestion(questionIndex);$event.stopPropagation();\">\r\n                                <i class=\"icons\">&#xe9b6;</i>\r\n                            </button> -->\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div  class=\"checkpoints-questions-blocks\"\r\n            *ngIf=\"question?.type === 'radio'\"\r\n            [class.error]=\"errorIndex === questionIndex\">\r\n            <div class=\"container\">\r\n                <h3 class=\"question\">\r\n                    <span class=\"counter\">{{questionIndex+1}}. <span class=\"required\"\r\n                            *ngIf=\"question.required\">*</span></span>\r\n                    <input class=\"text\" type=\"text\" [placeholder]=\"placeholder[question.type]\"\r\n                        [(ngModel)]=\"question.label\"readonly>\r\n                </h3>\r\n                <ul class=\"list\">\r\n\r\n                    <li *ngFor=\"let option of question?.options; let opIndex = index\">\r\n                        <app-cs-radio [oneLine]=\"true\" [readonly]=\"true\"\r\n                            [disabled]=\"activeQuestionIndex === questionIndex\"><input [(ngModel)]=\"option.label\"\r\n                                \r\n                                [id]=\"'radio-' + '' + questionIndex + '' + opIndex\" type=\"text\" placeholder=\"Option\">\r\n                        </app-cs-radio>\r\n                        <!-- <button class=\"close\" (click)=\"deleteOption(questionIndex,opIndex,question.type)\"\r\n                            *ngIf=\"activeQuestionIndex === questionIndex && question?.options.length > 1\"><i\r\n                                class=\"icons\">&#xe90d;</i></button> -->\r\n                    </li>\r\n                    <!-- <li *ngIf=\"activeQuestionIndex === questionIndex && false\" class=\"add-new\">\r\n                        <app-cs-radio [oneLine]=\"true\" [readonly]=\"true\">\r\n                            <input type=\"text\" readonly placeholder=\"Add more option\"\r\n                                (click)=\"addOption(questionIndex,question?.options?.length-1,question.type)\">\r\n                        </app-cs-radio>\r\n                    </li> -->\r\n                </ul>\r\n            </div>\r\n\r\n            <div class=\"footer\">\r\n                <div class=\"left\">\r\n                    <app-cs-checkbox [ngValue]=\"question.required\" (ngValueChange)=\"question.required = $event\">Is required</app-cs-checkbox>\r\n                </div>\r\n                <div class=\"right\">\r\n                    <ul>\r\n                        <!-- <li>\r\n                            <button [appTooltip]=\"'Add new'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"\r\n                                (click)=\"blankClone(question.type,questionIndex);$event.stopPropagation();\">\r\n                                <i class=\"icons\">&#xe915;</i>\r\n                            </button>\r\n                        </li> -->\r\n                        <li>\r\n                            <button class=\"delete\" [appTooltip]=\"'Delete'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"\r\n                                (click)=\"removeQuestion(questionIndex);$event.stopPropagation();\">\r\n                                <i class=\"icons\">&#xe923;</i>\r\n                            </button>\r\n                        </li>\r\n                        <!-- <li>\r\n                            <button [appTooltip]=\"'Copy'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"\r\n                                (click)=\"cloneQuestion(questionIndex);$event.stopPropagation();\">\r\n                                <i class=\"icons\">&#xe9b6;</i>\r\n                            </button>\r\n                        </li> -->\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div  class=\"checkpoints-questions-blocks\"\r\n            *ngIf=\"question?.type === 'select'\" \r\n            [class.error]=\"errorIndex === questionIndex\">\r\n            <div class=\"container\">\r\n                <h3 class=\"question\">\r\n                    <span class=\"counter\">{{questionIndex+1}}. <span class=\"required\"\r\n                            *ngIf=\"question.required\">*</span></span>\r\n                    <input class=\"text\" type=\"text\" [placeholder]=\"placeholder[question.type]\"\r\n                        [(ngModel)]=\"question.label\"readonly>\r\n                </h3>\r\n                <ul class=\"list\">\r\n\r\n                    <li *ngFor=\"let option of question?.options; let opIndex = index\">\r\n                        <app-cs-radio [oneLine]=\"true\" readonly\r\n                            [disabled]=\"activeQuestionIndex === questionIndex\">\r\n                            <input [(ngModel)]=\"option.label\"\r\n                                name =\"'select-' + '' + questionIndex + '' + opIndex\" (keydown.enter)=\"addOption(questionIndex,opIndex,question.type)\"\r\n                                (keydown.backspace)=\"deleteOnBackspace(questionIndex,opIndex,question.type)\"\r\n                                [id]=\"'select-' + '' + questionIndex + '' + opIndex\" type=\"text\" placeholder=\"Option\">\r\n                        </app-cs-radio>\r\n                        <!-- <button class=\"close\" (click)=\"deleteOption(questionIndex,opIndex,question.type)\"\r\n                            *ngIf=\"activeQuestionIndex === questionIndex && question?.options.length > 1\"><i\r\n                                class=\"icons\">&#xe90d;</i></button> -->\r\n                    </li>\r\n<!-- \r\n                    <li *ngIf=\"activeQuestionIndex === questionIndex\" class=\"add-new\">\r\n                        <app-cs-radio [oneLine]=\"true\" [readonly]=\"true\"><input readonly type=\"text\"\r\n                                placeholder=\"Add more option\"\r\n                                (click)=\"addOption(questionIndex,question?.options?.length-1,question.type)\">\r\n                        </app-cs-radio>\r\n                    </li> -->\r\n                    <!-- <button (click)=\"addOption(questionIndex,question?.options?.length,question.type)\"\r\n                        *ngIf=\"activeQuestionIndex === questionIndex\">Add More Options</button> -->\r\n                </ul>\r\n            </div>\r\n\r\n            <div class=\"footer\">\r\n                <div class=\"left\">\r\n                    <app-cs-checkbox [ngValue]=\"question.required\" (ngValueChange)=\"question.required = $event\">Is\r\n                        required</app-cs-checkbox>\r\n                </div>\r\n                <div class=\"right\">\r\n                    <ul>\r\n                        <!-- <li>\r\n                            <button [appTooltip]=\"'Add new'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"\r\n                                (click)=\"blankClone(question.type,questionIndex);$event.stopPropagation();\">\r\n                                <i class=\"icons\">&#xe915;</i>\r\n                            </button>\r\n                        </li> -->\r\n                        <li>\r\n                            <button class=\"delete\" [appTooltip]=\"'Delete'\" placement=\"bottom\" delay=\"0\"\r\n                                [tooltipMandatory]=\"true\"\r\n                                (click)=\"removeQuestion(questionIndex);$event.stopPropagation();\">\r\n                                <i class=\"icons\">&#xe923;</i>\r\n                            </button>\r\n                        </li>\r\n                        <!-- <li>\r\n                            <button [appTooltip]=\"'Copy'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"\r\n                                (click)=\"cloneQuestion(questionIndex);$event.stopPropagation();\">\r\n                                <i class=\"icons\">&#xe9b6;</i>\r\n                            </button>\r\n                        </li> -->\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div  class=\"checkpoints-questions-blocks\"\r\n            *ngIf=\"question?.type === 'checkbox'\" \r\n            [class.error]=\"errorIndex === questionIndex\">\r\n            <div class=\"container\">\r\n                <h3 class=\"question\">\r\n                    <span class=\"counter\">{{questionIndex+1}}. <span class=\"required\"\r\n                            *ngIf=\"question.required\">*</span></span>\r\n                    <input class=\"text\" type=\"text\" [placeholder]=\"placeholder[question.type]\"\r\n                        [(ngModel)]=\"question.label\"readonly>\r\n                </h3>\r\n                <ul class=\"list\">\r\n                    <li *ngFor=\"let option of question?.options; let opIndex = index\">\r\n                        <app-cs-checkbox [oneLine]=\"true\" [readonly]=\"true\">\r\n                            <input [(ngModel)]=\"option.label\" type=\"text\" placeholder=\"Option\"\r\n                                [id]=\"'checkbox-' + '' + questionIndex + '' + opIndex\"\r\n                                (keydown.enter)=\"addOption(questionIndex,opIndex,question.type)\"\r\n                                (keydown.backspace)=\"deleteOnBackspace(questionIndex,opIndex,question.type)\">\r\n                        </app-cs-checkbox>\r\n                        <!-- <button class=\"close\" (click)=\"deleteOption(questionIndex,opIndex,question.type)\"\r\n                            *ngIf=\"activeQuestionIndex === questionIndex && question?.options.length > 1\"><i\r\n                                class=\"icons\">&#xe90d;</i></button> -->\r\n                    </li>\r\n                    <!-- <li *ngIf=\"activeQuestionIndex === questionIndex\" class=\"add-new\">\r\n                        <app-cs-checkbox [oneLine]=\"true\"\r\n                            (click)=\"addOption(questionIndex,question?.options?.length-1,question.type)\"\r\n                            [disabled]=\"true\">\r\n                            <input [disabled]=\"true\" type=\"text\" placeholder=\"Add more option\">\r\n                        </app-cs-checkbox>\r\n                    </li> -->\r\n                </ul>\r\n            </div>\r\n\r\n            <div class=\"footer\">\r\n                <div class=\"left\">\r\n                    <app-cs-checkbox [ngValue]=\"question.required\" (ngValueChange)=\"question.required = $event\">Is\r\n                        required</app-cs-checkbox>\r\n                </div>\r\n                <div class=\"right\">\r\n                    <ul>\r\n                        <!-- <li>\r\n                            <button [appTooltip]=\"'Add new'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"\r\n                                (click)=\"blankClone(question.type,questionIndex);$event.stopPropagation();\">\r\n                                <i class=\"icons\">&#xe915;</i>\r\n                            </button>\r\n                        </li> -->\r\n                        <li>\r\n                            <button class=\"delete\" [appTooltip]=\"'Delete'\" placement=\"bottom\" delay=\"0\"\r\n                                [tooltipMandatory]=\"true\"\r\n                                (click)=\"removeQuestion(questionIndex);$event.stopPropagation();\">\r\n                                <i class=\"icons\">&#xe923;</i>\r\n                            </button>\r\n                        </li>\r\n                        <!-- <li>\r\n                            <button [appTooltip]=\"'Copy'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\"\r\n                                (click)=\"cloneQuestion(questionIndex);$event.stopPropagation();\">\r\n                                <i class=\"icons\">&#xe9b6;</i>\r\n                            </button>\r\n                        </li> -->\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <!-- <div class=\"checkpoints-questions-blocks\" [class.active]=\"true\">\r\n        <div class=\"container\">\r\n            <h3 class=\"question\">\r\n                <span class=\"counter\">2. <span class=\"required\">*</span></span>\r\n                <input class=\"text\" type=\"text\" placeholder=\"Type your question here [Select Box]\" value=\"Has the previous audit report been closed out?\">\r\n            </h3>\r\n            <ul class=\"list\">\r\n                <li>\r\n                    <app-cs-radio [oneLine]=\"true\"><span>Yes</span></app-cs-radio> <button class=\"close\"><i class=\"icons\">&#xe90d;</i></button>\r\n                </li>\r\n                <li>\r\n                    <app-cs-radio [oneLine]=\"true\"><span>No</span></app-cs-radio><button class=\"close\"><i class=\"icons\">&#xe90d;</i></button>\r\n                </li>\r\n                <li>\r\n                    <app-cs-radio [oneLine]=\"true\"><span>N/A</span></app-cs-radio><button class=\"close\"><i class=\"icons\">&#xe90d;</i></button>\r\n                </li>\r\n                <li>\r\n                    <app-cs-radio [oneLine]=\"true\"><input type=\"text\" placeholder=\"Option\"></app-cs-radio> <button class=\"close\"><i class=\"icons\">&#xe90d;</i></button>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n        <div class=\"footer\">\r\n            <div class=\"left\">\r\n                <app-cs-checkbox [ngValue]=\"question.required\" (ngValueChange)=\"question.required = $event\">Is required</app-cs-checkbox>\r\n            </div>\r\n            <div class=\"right\">\r\n                <ul>\r\n                    <li><button><i class=\"icons\">&#xe915;</i></button></li>\r\n                    <li><button><i class=\"icons\">&#xe923;</i></button></li>\r\n                    <li><button><i class=\"icons\">&#xe9b6;</i></button></li>\r\n                </ul>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n    </ng-container>\r\n    <!-- <button class=\"btn-add-new\" type=\"button\" appPopover (click)=\"newCheckpoint.popover()\" placement=\"left\">+ Add a new\r\n        checkpoint</button> -->\r\n    <!-- <app-popover #newCheckpoint>\r\n\r\n        <ul class=\"checkpoint-type-list\">\r\n            <li><span class=\"checkpoint-type-list-title\">Add Checkpoints</span></li>\r\n            <li *ngFor=\"let type of questionTypeList\">\r\n                <button (click)=\"addQuestion(type)\">\r\n                    <i class=\"icons\" [innerHTML]=\"type.icon\"></i>\r\n                    <span class=\"value\">\r\n                        {{type?.text}}\r\n                    </span>\r\n                </button>\r\n            </li>\r\n        </ul>\r\n    </app-popover> -->\r\n</div>\r\n",
-                styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .checkpoints-questions-blocks{padding:0;overflow:hidden;border-radius:4px}::ng-deep .checkpoints-questions-blocks .container{padding:28px 32px 24px 45px}::ng-deep .checkpoints-questions-blocks .question{font-size:16px;font-weight:300;color:#161b2f;line-height:24px;position:relative;display:flex;align-items:flex-start;margin:0}::ng-deep .checkpoints-questions-blocks .question:before{top:1px;left:-45px;height:24px;width:4px;content:\"\";background:#DBDBDB;position:absolute}::ng-deep .checkpoints-questions-blocks .question span.counter{display:inline-block;font-weight:600;width:auto;padding:0 0 0 8px;position:absolute;left:-41px;top:1px;line-height:25px}::ng-deep .checkpoints-questions-blocks .question span.counter .required{color:#eb2424;position:absolute;top:0;right:-6px}::ng-deep .checkpoints-questions-blocks .question input.text{font-size:16px;font-weight:300;color:#161b2f;line-height:24px;width:calc(100% - 28px);border:none;border-bottom:1px solid transparent;outline:none;padding-left:0;margin:0}::ng-deep .checkpoints-questions-blocks .question input.text:focus{border-color:#1e5dd3}::ng-deep .checkpoints-questions-blocks .question input.text:read-only{border:none}::ng-deep .checkpoints-questions-blocks .date-picker{margin:12px 0;position:relative;width:400px}::ng-deep .checkpoints-questions-blocks .date-picker input{width:100%;border:1px solid #DBDBDB;height:36px;line-height:24px;border-radius:4px;padding:4px 8px 4px 28px}::ng-deep .checkpoints-questions-blocks .date-picker input:focus{outline:none;color:#1e5dd3}::ng-deep .checkpoints-questions-blocks .date-picker i{font-size:16px;margin-right:8px;position:absolute;top:10px;left:10px;color:#747576}::ng-deep .checkpoints-questions-blocks .file-upload{position:relative;display:block;margin:12px 0;cursor:pointer;width:400px}::ng-deep .checkpoints-questions-blocks .file-upload input{opacity:0;width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer}::ng-deep .checkpoints-questions-blocks .file-upload span{background:#1E5DD3;height:32px;border-radius:4px;display:flex;color:#fff;font-weight:400;font-size:11px;padding:8px 12px;justify-content:flex-starts;cursor:pointer;align-items:center}::ng-deep .checkpoints-questions-blocks .file-upload span i{margin-right:8px}::ng-deep .checkpoints-questions-blocks dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep .checkpoints-questions-blocks dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep .checkpoints-questions-blocks dp-date-picker input:focus{outline:none}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000000;display:inline-flex}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-open+div{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}::ng-deep .checkpoints-questions-blocks .footer{background:#F1F1F180;display:none;border-top:1px solid #DBDBDB;justify-content:space-between;padding:0 0 0 8px;align-items:center}::ng-deep .checkpoints-questions-blocks .footer .left{width:150px;display:flex;align-items:center}::ng-deep .checkpoints-questions-blocks .footer .left app-cs-checkbox{display:flex}::ng-deep .checkpoints-questions-blocks .footer .left app-cs-checkbox label.checkbox-item span.value{white-space:nowrap;text-transform:uppercase;font-size:11px;font-weight:500}::ng-deep .checkpoints-questions-blocks .footer .right{width:calc(100% - 100px);display:flex;justify-content:flex-end}::ng-deep .checkpoints-questions-blocks .footer .right ul{padding:0;margin:0;display:flex}::ng-deep .checkpoints-questions-blocks .footer .right ul li{list-style:none;border-left:1px solid #DBDBDB;padding:0}::ng-deep .checkpoints-questions-blocks .footer .right ul li button{width:48px;height:36px;font-size:15px;color:#1e5dd3;outline:none;display:flex;align-items:center;justify-content:center;background:transparent;border:none}::ng-deep .checkpoints-questions-blocks .footer .right ul li button.delete{color:#ee3939}::ng-deep .checkpoints-questions-blocks ul.list{padding:8px 0;margin:0;display:inline-block;min-width:400px}::ng-deep .checkpoints-questions-blocks ul.list li{list-style:none;display:flex;padding:0;position:relative}::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox{display:block;width:100%;pointer-events:none}::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.radio-item,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.radio-item,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.checkbox-item,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.checkbox-item{width:100%}::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.radio-item span.checkbox,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.radio-item span.checkbox,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.checkbox-item span.checkbox,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.checkbox-item span.checkbox,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.radio-item span.radio,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.radio-item span.radio,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.checkbox-item span.radio,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.checkbox-item span.radio{position:absolute!important;top:9px;left:8px;height:20px!important;width:20px!important}::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.radio-item span.value,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.radio-item span.value,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.checkbox-item span.value,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.checkbox-item span.value{padding:8px 8px 8px 40px;width:100%;max-width:100%!important;justify-content:flex-start;border:1px solid #BCBCBC;border-radius:4px;color:#161b2f!important}::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.radio-item svg,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.radio-item svg,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.checkbox-item svg,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.checkbox-item svg{position:absolute;top:8px;bottom:8px;left:8px;height:20px!important;width:20px!important}::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.radio-item input:checked~span.value,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.radio-item input:checked~span.value,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.checkbox-item input:checked~span.value,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.checkbox-item input:checked~span.value{background:#EEFCF0;border-color:#34aa44}::ng-deep .checkpoints-questions-blocks ul.list li input,::ng-deep .checkpoints-questions-blocks ul.list li span{color:#161b2f;font-size:14px;line-height:20px;display:block;border:none;outline:none;margin-left:0!important;margin:0;padding:0}::ng-deep .checkpoints-questions-blocks ul.list li input{height:20px;background:transparent;width:100%}::ng-deep .checkpoints-questions-blocks ul.list li+li{margin-top:8px}::ng-deep .checkpoints-questions-blocks ul.list li button.close{font-size:12px;color:#9c1d22;padding:8px;cursor:pointer;background:transparent;border:none;outline:none}::ng-deep .checkpoints-questions-blocks.active{border:1px solid #1E5DD3;padding-bottom:0;box-shadow:0 3px 6px #1e5dd326}::ng-deep .checkpoints-questions-blocks.active .question:before{background:#1E5DD3}::ng-deep .checkpoints-questions-blocks.active .footer{display:flex}::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox{display:block;width:100%;pointer-events:auto}::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.radio-item,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.radio-item,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.checkbox-item,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item{width:100%}::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.radio-item span.value,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.radio-item span.value,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.checkbox-item span.value,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item span.value{width:100%;max-width:100%!important;justify-content:flex-start;border:1px solid transparent;border-radius:4px;color:#161b2f!important}::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.radio-item svg,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.radio-item svg,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.checkbox-item svg,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item svg{position:absolute;top:8px;bottom:8px;left:8px}::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.radio-item input:checked~span.value,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.radio-item input:checked~span.value,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.checkbox-item input:checked~span.value,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item input:checked~span.value{background:#EEFCF0;border:1px solid #34AA44}::ng-deep .checkpoints-questions-blocks.active ul.list li.add-new{opacity:.6;cursor:pointer}::ng-deep .checkpoints-questions-blocks.active ul.list li.add-new app-cs-radio label.radio-item span.value input,::ng-deep .checkpoints-questions-blocks.active ul.list li.add-new app-cs-checkbox label.radio-item span.value input,::ng-deep .checkpoints-questions-blocks.active ul.list li.add-new app-cs-radio label.checkbox-item span.value input,::ng-deep .checkpoints-questions-blocks.active ul.list li.add-new app-cs-checkbox label.checkbox-item span.value input{cursor:pointer}::ng-deep .checkpoints-questions-blocks.instruction{border:1px solid #DBDBDB;margin-bottom:12px}::ng-deep .checkpoints-questions-blocks.instruction .question span.counter i{font-weight:400;color:#f2bf19}::ng-deep .checkpoints-questions-blocks.instruction .question span.text{width:100%;cursor:pointer}::ng-deep .checkpoints-questions-blocks.instruction .question span.text marx-editor{cursor:text}::ng-deep .checkpoints-questions-blocks.instruction .question span.text *{margin-top:0}::ng-deep .checkpoints-questions-blocks.instruction.filled{background:#F8F8F8;max-height:100px;overflow:auto}::ng-deep .checkpoints-questions-blocks.instruction.filled .container{padding:12px 12px 12px 32px}::ng-deep .checkpoints-questions-blocks.instruction.filled .container .question{font-size:14px;line-height:22px}::ng-deep .checkpoints-questions-blocks.instruction.filled .container .question:before{left:-32px}::ng-deep .checkpoints-questions-blocks.instruction.filled .container .question span.counter{left:-32px}::ng-deep .checkpoints-questions .btn-add-new{display:flex;justify-content:center;align-items:center;line-height:16px;height:36px;border-radius:4px;color:#1e5dd3;border:1px dashed #1E5DD3;margin-top:20px;width:100%;background:transparent;text-transform:uppercase;font-weight:600}.checkpoint-type-list{background:#FFFFFF;padding:0;margin:0;width:220px;box-shadow:0 3px 6px #1c5bd140;border-radius:4px}.checkpoint-type-list-title{font-size:12px;font-weight:500;color:#161b2f;text-transform:uppercase;line-height:20px;padding:8px 12px;display:block}.checkpoint-type-list li{list-style:none}.checkpoint-type-list li+li{border-top:1px solid #f8f8f8}.checkpoint-type-list li button{padding:4px;background:transparent;border:none;outline:none;display:flex;justify-content:flex-start;cursor:pointer;width:100%}.checkpoint-type-list li button i{font-size:16px;color:#1e5dd3;padding:0 4px;display:flex;justify-content:center;width:40px;height:32px;align-items:center;margin-right:8px}.checkpoint-type-list li button span.value{width:calc(100% - 48px);display:block;color:#747576;font-size:11px;line-height:32px;text-transform:uppercase;text-align:left}.checkpoint-type-list li button:hover{background:#f8f8f8}.error{border-color:red}.vx-overlay{position:fixed;z-index:1;top:0;right:0;bottom:0;left:0}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .checkpoints-questions-blocks{padding:0;overflow:hidden;border-radius:4px}::ng-deep .checkpoints-questions-blocks .container{padding:28px 32px 24px 45px}::ng-deep .checkpoints-questions-blocks .question{font-size:16px;font-weight:300;color:#161b2f;line-height:24px;position:relative;display:flex;align-items:flex-start;margin:0}::ng-deep .checkpoints-questions-blocks .question:before{top:1px;left:-45px;height:24px;width:4px;content:\"\";background:#dbdbdb;position:absolute}::ng-deep .checkpoints-questions-blocks .question span.counter{display:inline-block;font-weight:600;width:auto;padding:0 0 0 8px;position:absolute;left:-41px;top:1px;line-height:25px}::ng-deep .checkpoints-questions-blocks .question span.counter .required{color:#eb2424;position:absolute;top:0;right:-6px}::ng-deep .checkpoints-questions-blocks .question input.text{font-size:16px;font-weight:300;color:#161b2f;line-height:24px;width:calc(100% - 28px);border:none;border-bottom:1px solid transparent;outline:none;padding-left:0;margin:0}::ng-deep .checkpoints-questions-blocks .question input.text:focus{border-color:#1e5dd3}::ng-deep .checkpoints-questions-blocks .question input.text:-moz-read-only{border:none}::ng-deep .checkpoints-questions-blocks .question input.text:read-only{border:none}::ng-deep .checkpoints-questions-blocks .date-picker{margin:12px 0;position:relative;width:400px}::ng-deep .checkpoints-questions-blocks .date-picker input{width:100%;border:1px solid #dbdbdb;height:36px;line-height:24px;border-radius:4px;padding:4px 8px 4px 28px}::ng-deep .checkpoints-questions-blocks .date-picker input:focus{outline:none;color:#1e5dd3}::ng-deep .checkpoints-questions-blocks .date-picker i{font-size:16px;margin-right:8px;position:absolute;top:10px;left:10px;color:#747576}::ng-deep .checkpoints-questions-blocks .file-upload{position:relative;display:block;margin:12px 0;cursor:pointer;width:400px}::ng-deep .checkpoints-questions-blocks .file-upload input{opacity:0;width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer}::ng-deep .checkpoints-questions-blocks .file-upload span{background:#1e5dd3;height:32px;border-radius:4px;display:flex;color:#fff;font-weight:400;font-size:11px;padding:8px 12px;justify-content:flex-starts;cursor:pointer;align-items:center}::ng-deep .checkpoints-questions-blocks .file-upload span i{margin-right:8px}::ng-deep .checkpoints-questions-blocks dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep .checkpoints-questions-blocks dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep .checkpoints-questions-blocks dp-date-picker input:focus{outline:none}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover{background-color:#f3f3f3}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays{display:flex;justify-content:space-around}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover{background-color:#f3f3f3}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected{background:#1e5dd3}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep .checkpoints-questions-blocks dp-date-picker .dp-open+div{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}::ng-deep .checkpoints-questions-blocks .footer{background:#f1f1f180;display:none;border-top:1px solid #dbdbdb;justify-content:space-between;padding:0 0 0 8px;align-items:center}::ng-deep .checkpoints-questions-blocks .footer .left{width:150px;display:flex;align-items:center}::ng-deep .checkpoints-questions-blocks .footer .left app-cs-checkbox{display:flex}::ng-deep .checkpoints-questions-blocks .footer .left app-cs-checkbox label.checkbox-item span.value{white-space:nowrap;text-transform:uppercase;font-size:11px;font-weight:500}::ng-deep .checkpoints-questions-blocks .footer .right{width:calc(100% - 100px);display:flex;justify-content:flex-end}::ng-deep .checkpoints-questions-blocks .footer .right ul{padding:0;margin:0;display:flex}::ng-deep .checkpoints-questions-blocks .footer .right ul li{list-style:none;border-left:1px solid #dbdbdb;padding:0}::ng-deep .checkpoints-questions-blocks .footer .right ul li button{width:48px;height:36px;font-size:15px;color:#1e5dd3;outline:none;display:flex;align-items:center;justify-content:center;background:transparent;border:none}::ng-deep .checkpoints-questions-blocks .footer .right ul li button.delete{color:#ee3939}::ng-deep .checkpoints-questions-blocks ul.list{padding:8px 0;margin:0;display:inline-block;min-width:400px}::ng-deep .checkpoints-questions-blocks ul.list li{list-style:none;display:flex;padding:0;position:relative}::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio{display:block;width:100%;pointer-events:none}::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.checkbox-item,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.radio-item,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.checkbox-item,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.radio-item{width:100%}::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.checkbox-item span.checkbox,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.checkbox-item span.radio,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.radio-item span.checkbox,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.radio-item span.radio,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.checkbox-item span.checkbox,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.checkbox-item span.radio,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.radio-item span.checkbox,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.radio-item span.radio{position:absolute!important;top:9px;left:8px;height:20px!important;width:20px!important}::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.checkbox-item span.value,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.radio-item span.value,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.checkbox-item span.value,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.radio-item span.value{padding:8px 8px 8px 40px;width:100%;max-width:100%!important;justify-content:flex-start;border:1px solid #bcbcbc;border-radius:4px;color:#161b2f!important}::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.checkbox-item svg,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.radio-item svg,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.checkbox-item svg,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.radio-item svg{position:absolute;top:8px;bottom:8px;left:8px;height:20px!important;width:20px!important}::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.checkbox-item input:checked~span.value,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-checkbox label.radio-item input:checked~span.value,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.checkbox-item input:checked~span.value,::ng-deep .checkpoints-questions-blocks ul.list li app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .checkpoints-questions-blocks ul.list li input,::ng-deep .checkpoints-questions-blocks ul.list li span{color:#161b2f;font-size:14px;line-height:20px;display:block;border:none;outline:none;margin-left:0!important;margin:0;padding:0}::ng-deep .checkpoints-questions-blocks ul.list li input{height:20px;background:transparent;width:100%}::ng-deep .checkpoints-questions-blocks ul.list li+li{margin-top:8px}::ng-deep .checkpoints-questions-blocks ul.list li button.close{font-size:12px;color:#9c1d22;padding:8px;cursor:pointer;background:transparent;border:none;outline:none}::ng-deep .checkpoints-questions-blocks.active{border:1px solid #1e5dd3;padding-bottom:0;box-shadow:0 3px 6px #1e5dd326}::ng-deep .checkpoints-questions-blocks.active .question:before{background:#1e5dd3}::ng-deep .checkpoints-questions-blocks.active .footer{display:flex}::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio{display:block;width:100%;pointer-events:auto}::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.radio-item,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.checkbox-item,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.radio-item{width:100%}::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item span.value,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.radio-item span.value,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.checkbox-item span.value,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.radio-item span.value{width:100%;max-width:100%!important;justify-content:flex-start;border:1px solid transparent;border-radius:4px;color:#161b2f!important}::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item svg,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.radio-item svg,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.checkbox-item svg,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.radio-item svg{position:absolute;top:8px;bottom:8px;left:8px}::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item input:checked~span.value,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-checkbox label.radio-item input:checked~span.value,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.checkbox-item input:checked~span.value,::ng-deep .checkpoints-questions-blocks.active ul.list li app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border:1px solid #34aa44}::ng-deep .checkpoints-questions-blocks.active ul.list li.add-new{opacity:.6;cursor:pointer}::ng-deep .checkpoints-questions-blocks.active ul.list li.add-new app-cs-checkbox label.checkbox-item span.value input,::ng-deep .checkpoints-questions-blocks.active ul.list li.add-new app-cs-checkbox label.radio-item span.value input,::ng-deep .checkpoints-questions-blocks.active ul.list li.add-new app-cs-radio label.checkbox-item span.value input,::ng-deep .checkpoints-questions-blocks.active ul.list li.add-new app-cs-radio label.radio-item span.value input{cursor:pointer}::ng-deep .checkpoints-questions-blocks.instruction{border:1px solid #dbdbdb;margin-bottom:12px}::ng-deep .checkpoints-questions-blocks.instruction .question span.counter i{font-weight:400;color:#f2bf19}::ng-deep .checkpoints-questions-blocks.instruction .question span.text{width:100%;cursor:pointer}::ng-deep .checkpoints-questions-blocks.instruction .question span.text marx-editor{cursor:text}::ng-deep .checkpoints-questions-blocks.instruction .question span.text *{margin-top:0}::ng-deep .checkpoints-questions-blocks.instruction.filled{background:#f8f8f8;max-height:100px;overflow:auto}::ng-deep .checkpoints-questions-blocks.instruction.filled .container{padding:12px 12px 12px 32px}::ng-deep .checkpoints-questions-blocks.instruction.filled .container .question{font-size:14px;line-height:22px}::ng-deep .checkpoints-questions-blocks.instruction.filled .container .question:before{left:-32px}::ng-deep .checkpoints-questions-blocks.instruction.filled .container .question span.counter{left:-32px}::ng-deep .checkpoints-questions .btn-add-new{display:flex;justify-content:center;align-items:center;line-height:16px;height:36px;border-radius:4px;color:#1e5dd3;border:1px dashed #1e5dd3;margin-top:20px;width:100%;background:transparent;text-transform:uppercase;font-weight:600}.checkpoint-type-list{background:#fff;padding:0;margin:0;width:220px;box-shadow:0 3px 6px #1c5bd140;border-radius:4px}.checkpoint-type-list-title{font-size:12px;font-weight:500;color:#161b2f;text-transform:uppercase;line-height:20px;padding:8px 12px;display:block}.checkpoint-type-list li{list-style:none}.checkpoint-type-list li+li{border-top:1px solid #f8f8f8}.checkpoint-type-list li button{padding:4px;background:transparent;border:none;outline:none;display:flex;justify-content:flex-start;cursor:pointer;width:100%}.checkpoint-type-list li button i{font-size:16px;color:#1e5dd3;padding:0 4px;display:flex;justify-content:center;width:40px;height:32px;align-items:center;margin-right:8px}.checkpoint-type-list li button span.value{width:calc(100% - 48px);display:block;color:#747576;font-size:11px;line-height:32px;text-transform:uppercase;text-align:left}.checkpoint-type-list li button:hover{background:#f8f8f8}.error{border-color:red}.vx-overlay{position:fixed;z-index:1;top:0;right:0;bottom:0;left:0}@-webkit-keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}"]
             },] }
 ];
 CheckpointsQuestionsComponent.ctorParameters = () => [

package/esm2015/lib/sharedComponents/checkpoint-floating-bar/checkpoint-floating-bar.component.js CHANGED Viewed

@@ -23,7 +23,7 @@ CheckpointFloatingBarComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-checkpoint-floating-bar',
                 template: "<div class=\"checkpoint-floating-bar\">\r\n  <div class=\"checkpoint-floating-bar-container\">\r\n    <div class=\"left\">\r\n      <div class=\"counter\">{{count}}</div>\r\n      <div class=\"name\">\r\n        <span *ngIf=\"count < 2\">{{singularText}}</span>\r\n        <span *ngIf=\"count > 1\">{{pluralText}}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"mid\" *ngIf=\"isPolicyCheckpoint\">\r\n      <div class=\"name\" *ngIf=\"true\" >\r\n        <div class=\"label\">Total Points : {{count}}</div>\r\n        <em>Each question carries 1 point</em>\r\n        <span class=\"required\">*</span>\r\n        <!-- <i class=\"icons\">&#xe91f;</i> -->\r\n      </div>\r\n      <div class=\"name points\" *ngIf=\"true\">\r\n        <div>\r\n          <div class=\"label\">Points required<br>to attest\r\n            <span class=\"required\">*</span>\r\n            <i class=\"icons\" appPopover (click)=\"policyPassing.popover()\" placement=\"right\">&#xe91f;</i> :\r\n          </div>\r\n        </div>\r\n        <div>\r\n          <input type=\"number\" [(ngModel)]=\"requiredPoint\" [max]=\"count\"   onkeydown=\"return event.keyCode !== 190\" min=\"0\"\r\n          oninput=\"this.value = Math.abs(this.value);\" (ngModelChange)=\"requiredPointChange.emit(requiredPoint)\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"right\">\r\n      <!-- <ng-container *ngIf=\"isPolicyCheckpoint\">\r\n      <div class=\"name\" *ngIf=\"true\" >\r\n        Total Points : {{count}}<br>\r\n        <i>Each question carries 1 point</i>\r\n        <span class=\"required\">*</span>\r\n        <i class=\"icons\">&#xe91f;</i>\r\n      </div>\r\n      <div class=\"name\" *ngIf=\"true\">\r\n        Points required to attest\r\n        <span class=\"required\">*</span>\r\n        <i class=\"icons\">&#xe91f;</i>\r\n        <input type=\"number\" [(ngModel)]=\"requiredPoint\" [max]=\"count\"   onkeydown=\"return event.keyCode !== 190\" min=\"0\"\r\n        oninput=\"this.value = Math.abs(this.value);\" (ngModelChange)=\"requiredPointChange.emit(requiredPoint)\"/>\r\n      </div>\r\n    </ng-container> -->\r\n      <app-cs-select *ngIf=\"false\"></app-cs-select>\r\n      <button appRipple class=\"cancel\" (click)=\"close()\">Cancel</button>\r\n      <button (click)=\"next()\" appRipple>Next <i class=\"icons\">&#xe91e;</i></button>\r\n    </div>\r\n  </div>\r\n</div>\r\n<app-popover #policyPassing [dontCloseonClick]=\"true\">\r\n  <div  class=\"pop\">\r\n   Every correct answer choice carries 1 point. You can specify the total number of questions that the reader must answer correctly in order to attest the policy.\r\n  </div>\r\n</app-popover>\r\n",
-                styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{appearance:none;-webkit-appearance:none;margin:0}::ng-deep .checkpoint-floating-bar{padding:0 16px 32px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}::ng-deep .checkpoint-floating-bar-container{height:50px;border-radius:4px;box-shadow:0 6px 12px #4681ef40;border:1px solid #f8f8f8;padding:12px 15px;display:flex;justify-content:space-between}::ng-deep .checkpoint-floating-bar-container .left{display:flex;align-items:center;max-width:70%}::ng-deep .checkpoint-floating-bar-container .left .chip{padding:0 5px;height:24px;display:inline-flex;color:#1e5dd3;border-radius:2px;align-items:center;background:#fff;max-width:100%;box-shadow:0 2px 6px #4681ef20}::ng-deep .checkpoint-floating-bar-container .left .chip i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .checkpoint-floating-bar-container .left .chip span{display:block;width:auto;font-size:12px;font-weight:500;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}::ng-deep .checkpoint-floating-bar-container .left .chip span.no-action{max-width:100%}::ng-deep .checkpoint-floating-bar-container .left .chip+.chip{margin-left:4px}::ng-deep .checkpoint-floating-bar-container .left .counter{border-radius:2px;background:#66bf72;border:1px solid #66bf72;height:24px;padding:0 5px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;margin-left:5px;min-width:24px;justify-content:center;line-height:24px;margin-right:5px}::ng-deep .checkpoint-floating-bar-container .left .name{margin-left:4px;color:#707070;font-size:12px;font-weight:500;line-height:18px;white-space:nowrap}::ng-deep .checkpoint-floating-bar-container .mid{display:flex;align-items:center}::ng-deep .checkpoint-floating-bar-container .mid .name{color:#747576;font-size:10px;font-weight:500;line-height:16px;white-space:nowrap}::ng-deep .checkpoint-floating-bar-container .mid .name .label{color:#161b2f;font-size:11px;font-weight:500;text-transform:uppercase}::ng-deep .checkpoint-floating-bar-container .mid .name span.required{color:#eb2424;font-size:14px}::ng-deep .checkpoint-floating-bar-container .mid .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .checkpoint-floating-bar-container .mid .name.points{display:flex;align-items:center;margin-left:40px}::ng-deep .checkpoint-floating-bar-container .mid .name.points input[type=number]{-moz-appearance:textfield;border:1px solid #DCDCDC;border-radius:2px;width:30px;height:30px;text-align:center;margin-left:16px;color:#747576;font-size:11px;font-weight:600}::ng-deep .checkpoint-floating-bar-container .mid .name.points input[type=number]:focus{outline:none}::ng-deep .checkpoint-floating-bar-container .right{display:flex;align-items:center}::ng-deep .checkpoint-floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .checkpoint-floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .checkpoint-floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .checkpoint-floating-bar-container .right button{border-radius:2px;height:28px;background:#1e5dd3;width:72px;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff;text-transform:uppercase;font-size:11px;border:1px solid #1e5dd3;padding:0;margin:0}::ng-deep .checkpoint-floating-bar-container .right button i{margin-left:8px;font-size:16px}::ng-deep .checkpoint-floating-bar-container .right button.cancel{background:transparent;border:none;color:#eb2424;margin-right:4px}.pop{width:280px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;position:static;display:block;padding:10px;font-size:12px;color:#6e717e}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{appearance:none;-webkit-appearance:none;margin:0}::ng-deep .checkpoint-floating-bar{padding:0 16px 32px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}::ng-deep .checkpoint-floating-bar-container{height:50px;border-radius:4px;box-shadow:0 6px 12px #4681ef40;border:1px solid #f8f8f8;padding:12px 15px;display:flex;justify-content:space-between}::ng-deep .checkpoint-floating-bar-container .left{display:flex;align-items:center;max-width:70%}::ng-deep .checkpoint-floating-bar-container .left .chip{padding:0 5px;height:24px;display:inline-flex;color:#1e5dd3;border-radius:2px;align-items:center;background:#fff;max-width:100%;box-shadow:0 2px 6px #4681ef20}::ng-deep .checkpoint-floating-bar-container .left .chip i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex}::ng-deep .checkpoint-floating-bar-container .left .chip span{display:block;width:auto;font-size:12px;font-weight:500;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}::ng-deep .checkpoint-floating-bar-container .left .chip span.no-action{max-width:100%}::ng-deep .checkpoint-floating-bar-container .left .chip+.chip{margin-left:4px}::ng-deep .checkpoint-floating-bar-container .left .counter{border-radius:2px;background:#66bf72;border:1px solid #66bf72;height:24px;padding:0 5px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;margin-left:5px;min-width:24px;justify-content:center;line-height:24px;margin-right:5px}::ng-deep .checkpoint-floating-bar-container .left .name{margin-left:4px;color:#707070;font-size:12px;font-weight:500;line-height:18px;white-space:nowrap}::ng-deep .checkpoint-floating-bar-container .mid{display:flex;align-items:center}::ng-deep .checkpoint-floating-bar-container .mid .name{color:#747576;font-size:10px;font-weight:500;line-height:16px;white-space:nowrap}::ng-deep .checkpoint-floating-bar-container .mid .name .label{color:#161b2f;font-size:11px;font-weight:500;text-transform:uppercase}::ng-deep .checkpoint-floating-bar-container .mid .name span.required{color:#eb2424;font-size:14px}::ng-deep .checkpoint-floating-bar-container .mid .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .checkpoint-floating-bar-container .mid .name.points{display:flex;align-items:center;margin-left:40px}::ng-deep .checkpoint-floating-bar-container .mid .name.points input[type=number]{-moz-appearance:textfield;border:1px solid #dcdcdc;border-radius:2px;width:30px;height:30px;text-align:center;margin-left:16px;color:#747576;font-size:11px;font-weight:600}::ng-deep .checkpoint-floating-bar-container .mid .name.points input[type=number]:focus{outline:none}::ng-deep .checkpoint-floating-bar-container .right{display:flex;align-items:center}::ng-deep .checkpoint-floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .checkpoint-floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .checkpoint-floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .checkpoint-floating-bar-container .right button{border-radius:2px;height:28px;background:#1e5dd3;width:72px;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff;text-transform:uppercase;font-size:11px;border:1px solid #1e5dd3;padding:0;margin:0}::ng-deep .checkpoint-floating-bar-container .right button i{margin-left:8px;font-size:16px}::ng-deep .checkpoint-floating-bar-container .right button.cancel{background:transparent;border:none;color:#eb2424;margin-right:4px}.pop{width:280px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;position:static;display:block;padding:10px;font-size:12px;color:#6e717e}"]
             },] }
 ];
 CheckpointFloatingBarComponent.ctorParameters = () => [];

package/esm2015/lib/sharedComponents/checkpoint-policy/checkpoints-policy-container/checkpoints-policy-container.component.js CHANGED Viewed

@@ -57,7 +57,7 @@ CheckpointsPolicyContainerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-checkpoints-policy-container',
                 template: "<!-- <p>checkpoints works!</p> -->\r\n<div class=\"checkpoints\" [class.animate]=\"animation\">\r\n    <div class=\"checkpoints-head\">\r\n        <h3 class=\"checkpoints-title\">Add Checkpoints</h3>\r\n    </div>\r\n    <div class=\"checkpoints-body\">\r\n        <!-- <app-checkpoints-list></app-checkpoints-list> -->\r\n        <app-checkpoints-policy-questions [(requiredPoint)]=\"requiredPoint\" (changeMax)=\"requiredPoint = $event\" #checkpoint [checkpointDetails]=\"checkpointData\" (saveValidQuestions)=\"saveQuestions($event)\"></app-checkpoints-policy-questions>\r\n    </div>\r\n    <div class=\"checkpoints-footer\">\r\n        <app-checkpoint-floating-bar [isPolicyCheckpoint]=\"true\" (closeList)=\"closeCheckPoint.emit()\" [pluralText]=\"'Checkpoints selected'\" [singularText]=\"'Checkpoint selected'\" (saveList)=\"next()\" [(requiredPoint)]=\"requiredPoint\" [count]=\"checkpointData?.length\"></app-checkpoint-floating-bar>\r\n    </div>\r\n</div>\r\n",
-                styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.checkpoints{position:fixed;top:0;right:500px;bottom:0;left:0;background:#FFFFFF;border-top:3px solid #1E5DD3}.checkpoints-head{background:#FBFBFB;height:44px;padding:0 12px;display:flex;align-items:center}.checkpoints-title{color:#161b2f;font-size:14px;margin:0;padding:0;line-height:20px;font-weight:500}.checkpoints-body{padding:60px 156px;height:calc(100vh - 110px);overflow:auto}.checkpoints-body::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}.checkpoints-body::-webkit-scrollbar{width:1px;height:1px;background-color:transparent;position:absolute}.checkpoints-body::-webkit-scrollbar-thumb{border-radius:1px;background-color:#dbdbdb;position:absolute}.checkpoints-footer{display:block}.checkpoints.animate{animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@keyframes animate-right{0%{transform:translate(100%)}to{transform:translate(0)}}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");.checkpoints{position:fixed;top:0;right:500px;bottom:0;left:0;background:#fff;border-top:3px solid #1e5dd3}.checkpoints-head{background:#fbfbfb;height:44px;padding:0 12px;display:flex;align-items:center}.checkpoints-title{color:#161b2f;font-size:14px;margin:0;padding:0;line-height:20px;font-weight:500}.checkpoints-body{padding:60px 156px;height:calc(100vh - 110px);overflow:auto}.checkpoints-body::-webkit-scrollbar-track{background-color:#f1f1f1;position:absolute}.checkpoints-body::-webkit-scrollbar{width:1px;height:1px;background-color:transparent;position:absolute}.checkpoints-body::-webkit-scrollbar-thumb{border-radius:1px;background-color:#dbdbdb;position:absolute}.checkpoints-footer{display:block}.checkpoints.animate{-webkit-animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;animation:animate-right .2s cubic-bezier(.25,.46,.45,.94) both;z-index:-1}@-webkit-keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes animate-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}"]
             },] }
 ];
 CheckpointsPolicyContainerComponent.ctorParameters = () => [

package/esm2015/lib/sharedComponents/checkpoint-policy/checkpoints-policy-list/checkpoints-policy-list.component.js CHANGED Viewed

@@ -8,7 +8,7 @@ CheckpointsPolicyListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-checkpoints-policy-list',
                 template: "<!-- <p>checkpoints-list works!</p> -->\r\n<div class=\"checkpoints-list\">\r\n    <ul class=\"list-of-type\">\r\n        <li>\r\n            <button>\r\n                <i class=\"icons\">&#xeace;</i>\r\n                <span class=\"value\">\r\n                    <span class=\"title\">Text</span>\r\n                    <span class=\"description\">Select a text area.</span>\r\n                </span>\r\n            </button>\r\n        </li>\r\n        <li>\r\n            <button>\r\n                <i class=\"icons\">&#xeab9;</i>\r\n                <span class=\"value\">\r\n                    <span class=\"title\">Dropdown</span>\r\n                    <span class=\"description\">Choose an option from a multiple select box.</span>\r\n                </span>\r\n            </button>\r\n        </li>\r\n        <li>\r\n            <button>\r\n                <i class=\"icons\">&#xeab5;</i>\r\n                <span class=\"value\">\r\n                    <span class=\"title\">Single selection</span>\r\n                    <span class=\"description\">Select only one option with a radio button.</span>\r\n                </span>\r\n            </button>\r\n        </li>\r\n        <li>\r\n            <button>\r\n                <i class=\"icons\">&#xeab4;</i>\r\n                <span class=\"value\">\r\n                    <span class=\"title\">Multiple selection</span>\r\n                    <span class=\"description\">Select multiple options using a checkbox.</span>\r\n                </span>\r\n            </button>\r\n        </li>\r\n        <li>\r\n            <button>\r\n                <i class=\"icons\">&#xeaba;</i>\r\n                <span class=\"value\">\r\n                    <span class=\"title\">Date</span>\r\n                    <span class=\"description\">Select date from a date picker.</span>\r\n                </span>\r\n            </button>\r\n        </li>\r\n        <li>\r\n            <button>\r\n                <i class=\"icons\">&#xea97;</i>\r\n                <span class=\"value\">\r\n                    <span class=\"title\">Upload File</span>\r\n                    <span class=\"description\">Upload documents & files.</span>\r\n                </span>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n</div>",
-                styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";.checkpoints-list{position:relative;display:flex;justify-content:center;align-items:center;margin:0 -100px;height:100%}.checkpoints-list ul{display:flex;flex-wrap:wrap;padding:0;margin:0;width:100%}.checkpoints-list ul li{list-style:none;padding:4px;width:calc(100% / 3);animation:zoom-in .5s cubic-bezier(.25,.46,.45,.94) both}.checkpoints-list ul li button{display:flex;align-items:center;padding:12px;box-shadow:0 0 5px #fbfbfb;transition:all .3s ease-in-out;background:#fff;cursor:pointer;border-radius:4px;height:100%;width:100%;border:1px solid #F1F1F1}.checkpoints-list ul li button i{height:32px;width:32px;border-radius:2px;background:#f1f1f1;font-size:16px;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#1e5dd3;margin-right:8px}.checkpoints-list ul li button span{text-align:left}.checkpoints-list ul li button span.value{display:block;width:calc(100% - 40px)}.checkpoints-list ul li button span.title{font-size:16px;color:#161b2f;width:100%;display:block}.checkpoints-list ul li button span.description{font-size:12px;color:#747576;display:block}.checkpoints-list ul li button:hover{box-shadow:0 0 5px #1e5d08}@keyframes zoom-in{0%{transform:scale(0)}to{transform:scale(1)}}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");.checkpoints-list{position:relative;display:flex;justify-content:center;align-items:center;margin:0 -100px;height:100%}.checkpoints-list ul{display:flex;flex-wrap:wrap;padding:0;margin:0;width:100%}.checkpoints-list ul li{list-style:none;padding:4px;width:calc(100% / 3);-webkit-animation:zoom-in .5s cubic-bezier(.25,.46,.45,.94) both;animation:zoom-in .5s cubic-bezier(.25,.46,.45,.94) both}.checkpoints-list ul li button{display:flex;align-items:center;padding:12px;box-shadow:0 0 5px 0 #fbfbfb;transition:all .3s ease-in-out;background:#fff;cursor:pointer;border-radius:4px;height:100%;width:100%;border:1px solid #f1f1f1}.checkpoints-list ul li button i{height:32px;width:32px;border-radius:2px;background:#f1f1f1;font-size:16px;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#1e5dd3;margin-right:8px}.checkpoints-list ul li button span{text-align:left}.checkpoints-list ul li button span.value{display:block;width:calc(100% - 40px)}.checkpoints-list ul li button span.title{font-size:16px;color:#161b2f;width:100%;display:block}.checkpoints-list ul li button span.description{font-size:12px;color:#747576;display:block}.checkpoints-list ul li button:hover{box-shadow:0 0 5px rgba(30,93,211,.27)}@-webkit-keyframes zoom-in{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes zoom-in{0%{transform:scale(0)}to{transform:scale(1)}}"]
             },] }
 ];
 CheckpointsPolicyListComponent.ctorParameters = () => [];

package/esm2015/lib/sharedComponents/checkpoint-policy/checkpoints-policy-questions/checkpoints-policy-questions.component.js CHANGED Viewed

@@ -172,7 +172,7 @@ CheckpointsPolicyQuestionsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-checkpoints-policy-questions',
                 template: "<!-- <p>checkpoints-questions works!</p> -->\r\n<div class=\"checkpoints-policy-questions\">\r\n    <!-- <div class=\"checkpoints-questions-blocks instruction\">\r\n        <div class=\"container\">\r\n            <h3 class=\"question\">\r\n                <span class=\"counter\"><i class=\"icons\">&#xe932;</i></span>\r\n                <span class=\"text\">Add instruction</span>\r\n            </h3>\r\n        </div>\r\n    </div> -->\r\n    <!-- <small>\r\n      <pre>\r\n        {{checkPointQuestions |json}}\r\n      </pre>\r\n    </small> -->\r\n    <ng-container *ngFor=\"let questionValue of checkPointQuestions; let questionIndex = index\">\r\n      <!-- [class.error]=\"questionIndex === 0\" -->\r\n        <div class=\"checkpoints-policy-questions-blocks\" [appScrollInView]=\"activeQuestionIndex === questionIndex\"   [class.active]=\"activeQuestionIndex === questionIndex\" (click)=\"changeActiveQuestion(questionIndex)\">\r\n            <div class=\"container\">\r\n                <h3 class=\"question\" >\r\n                    <span class=\"counter\">{{questionIndex + 1}}.\r\n                      <!-- <span class=\"required\">*</span> -->\r\n                    </span>\r\n                    <input [appConditionalFocus]=\"activeQuestionIndex === questionIndex\" [(ngModel)]=\"questionValue.question\" class=\"text\" type=\"text\"\r\n                        placeholder=\"Type your question here\" (ngModelChange)=\"reValidate(questionIndex)\"\r\n                       >\r\n                </h3>\r\n                <p class=\"error-message\" *ngIf=\"errorTracker[questionIndex]?.type === 'QUESTION'\">{{errorTracker[questionIndex]?.message}}</p>\r\n                <ul class=\"list\">\r\n\r\n                    <li *ngFor=\"let option of questionValue.answers; let optionIndex = index;trackBy:trackByFn\">\r\n                        <app-cs-radio  [readonly]=\"option?.trim()?.length === 0\" [name]=\"'option-' + '' + questionIndex + '' + optionIndex\" [checked]=\"rightAnswerIndex[questionIndex] === optionIndex ? true  :false \"\r\n                        (checkedEvent)=\"selectRightAnswer($event,questionIndex,optionIndex)\" [oneLine]=\"true\" [id]=\"optionIndex + 'wee'\" >\r\n                          <input  [id]=\"'option-' + '' + questionIndex + '' + optionIndex\" (ngModelChange)=\"reValidate(questionIndex)\"\r\n                          (keydown.enter)=\"addOption(questionIndex,optionIndex)\"\r\n                          (keydown.backspace)=\"deleteOnBackspace(questionIndex,optionIndex)\"\r\n                          placeholder=\"Option\" [(ngModel)]=\"questionValue.answers[optionIndex]\" type=\"text\" placeholder=\"Option\" />\r\n                        </app-cs-radio>\r\n                        <button *ngIf=\"questionValue?.answers?.length > 2 && activeQuestionIndex === questionIndex\" (click)=\"deleteOption(questionIndex,optionIndex)\" class=\"close\" ><i class=\"icons\">&#xe90d;</i></button>\r\n                    </li>\r\n\r\n                    <li class=\"add-new\" *ngIf=\"activeQuestionIndex === questionIndex\">\r\n                        <app-cs-radio [oneLine]=\"true\" [readonly]=\"true\">\r\n                            <input type=\"text\" readonly placeholder=\"Add more option\"\r\n                                (click)=\"addOption(questionIndex,questionValue?.answers?.length-1)\">\r\n                        </app-cs-radio>\r\n                    </li>\r\n                </ul>\r\n                <p class=\"error-message\" *ngIf=\"errorTracker[questionIndex]?.type === 'OPTION'\">{{errorTracker[questionIndex]?.message}}</p>\r\n            </div>\r\n\r\n            <div class=\"footer\">\r\n                <div class=\"left\">\r\n                    <!-- <app-cs-checkbox>Is required</app-cs-checkbox> -->\r\n                </div>\r\n                <div class=\"right\">\r\n                    <ul>\r\n                        <li>\r\n                            <button (click)=\"cloneQuestion(questionIndex,true);$event.stopPropagation();\" [appTooltip]=\"'Add new'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n                                <i class=\"icons\">&#xe915;</i>\r\n                            </button>\r\n                        </li>\r\n                        <li>\r\n                            <button  (click)=\"deleteQuestion(questionIndex)\" class=\"delete\" [appTooltip]=\"'Delete'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n                                <i class=\"icons\">&#xe923;</i>\r\n                            </button>\r\n                        </li>\r\n                        <li>\r\n                            <button (click)=\"cloneQuestion(questionIndex,false);$event.stopPropagation();\" [appTooltip]=\"'Copy'\" placement=\"bottom\" delay=\"0\" [tooltipMandatory]=\"true\">\r\n                                <i class=\"icons\">&#xe9b6;</i>\r\n                            </button>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <button class=\"btn-add-new\" type=\"button\" (click)=\"cloneQuestion(checkPointQuestions.length -1,true);$event.stopPropagation();\">+ Add a new checkpoint</button>\r\n</div>\r\n",
-                styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .checkpoints-policy-questions-blocks{padding:0;overflow:hidden;border-radius:4px}::ng-deep .checkpoints-policy-questions-blocks .container{padding:28px 32px 24px 45px}::ng-deep .checkpoints-policy-questions-blocks .question{font-size:16px;font-weight:300;color:#161b2f;line-height:24px;position:relative;display:flex;align-items:flex-start;margin:0}::ng-deep .checkpoints-policy-questions-blocks .question:before{top:1px;left:-45px;height:24px;width:4px;content:\"\";background:#DBDBDB;position:absolute}::ng-deep .checkpoints-policy-questions-blocks .question span.counter{display:inline-block;font-weight:600;width:auto;padding:0 0 0 8px;position:absolute;left:-41px;top:1px;line-height:25px}::ng-deep .checkpoints-policy-questions-blocks .question span.counter .required{color:#eb2424;position:absolute;top:0;right:-6px}::ng-deep .checkpoints-policy-questions-blocks .question input.text{font-size:16px;font-weight:300;color:#161b2f;line-height:24px;width:calc(100% - 28px);border:none;border-bottom:1px solid transparent;outline:none;padding-left:0;margin:0}::ng-deep .checkpoints-policy-questions-blocks .question input.text:focus{border-color:#1e5dd3}::ng-deep .checkpoints-policy-questions-blocks .question input.text:read-only{border:none}::ng-deep .checkpoints-policy-questions-blocks .date-picker{margin:12px 0;position:relative;width:400px}::ng-deep .checkpoints-policy-questions-blocks .date-picker input{width:100%;border:1px solid #DBDBDB;height:36px;line-height:24px;border-radius:4px;padding:4px 8px 4px 28px}::ng-deep .checkpoints-policy-questions-blocks .date-picker input:focus{outline:none;color:#1e5dd3}::ng-deep .checkpoints-policy-questions-blocks .date-picker i{font-size:16px;margin-right:8px;position:absolute;top:10px;left:10px;color:#747576}::ng-deep .checkpoints-policy-questions-blocks .file-upload{position:relative;display:block;margin:12px 0;cursor:pointer;width:400px}::ng-deep .checkpoints-policy-questions-blocks .file-upload input{opacity:0;width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer}::ng-deep .checkpoints-policy-questions-blocks .file-upload span{background:#1E5DD3;height:32px;border-radius:4px;display:flex;color:#fff;font-weight:400;font-size:11px;padding:8px 12px;justify-content:flex-starts;cursor:pointer;align-items:center}::ng-deep .checkpoints-policy-questions-blocks .file-upload span i{margin-right:8px}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker input:focus{outline:none}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000000;display:inline-flex}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-open+div{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}::ng-deep .checkpoints-policy-questions-blocks .footer{background:#F1F1F180;display:none;border-top:1px solid #DBDBDB;justify-content:space-between;padding:0 0 0 8px;align-items:center}::ng-deep .checkpoints-policy-questions-blocks .footer .left{width:150px;display:flex;align-items:center}::ng-deep .checkpoints-policy-questions-blocks .footer .left app-cs-checkbox{display:flex}::ng-deep .checkpoints-policy-questions-blocks .footer .left app-cs-checkbox label.checkbox-item span.value{white-space:nowrap;text-transform:uppercase;font-size:11px;font-weight:500}::ng-deep .checkpoints-policy-questions-blocks .footer .right{width:calc(100% - 100px);display:flex;justify-content:flex-end}::ng-deep .checkpoints-policy-questions-blocks .footer .right ul{padding:0;margin:0;display:flex}::ng-deep .checkpoints-policy-questions-blocks .footer .right ul li{list-style:none;border-left:1px solid #DBDBDB;padding:0}::ng-deep .checkpoints-policy-questions-blocks .footer .right ul li button{width:48px;height:36px;font-size:15px;color:#1e5dd3;outline:none;display:flex;align-items:center;justify-content:center;background:transparent;border:none}::ng-deep .checkpoints-policy-questions-blocks .footer .right ul li button.delete{color:#ee3939}::ng-deep .checkpoints-policy-questions-blocks ul.list{padding:8px 0;margin:0;display:inline-block;min-width:400px}::ng-deep .checkpoints-policy-questions-blocks ul.list li{list-style:none;display:flex;padding:0;position:relative}::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox{display:block;width:100%;pointer-events:none}::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.radio-item,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.radio-item,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.checkbox-item,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.checkbox-item{width:100%}::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.radio-item span.checkbox,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.radio-item span.checkbox,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.checkbox-item span.checkbox,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.checkbox-item span.checkbox,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.radio-item span.radio,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.radio-item span.radio,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.checkbox-item span.radio,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.checkbox-item span.radio{position:absolute!important;top:9px;left:8px;height:20px!important;width:20px!important}::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.radio-item span.value,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.radio-item span.value,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.checkbox-item span.value,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.checkbox-item span.value{padding:8px 8px 8px 40px;width:100%;max-width:100%!important;justify-content:flex-start;border:1px solid #BCBCBC;border-radius:4px;color:#161b2f!important}::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.radio-item svg,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.radio-item svg,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.checkbox-item svg,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.checkbox-item svg{position:absolute;top:8px;bottom:8px;left:8px;height:20px!important;width:20px!important}::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.radio-item input:checked~span.value,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.radio-item input:checked~span.value,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.checkbox-item input:checked~span.value,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.checkbox-item input:checked~span.value{background:#EEFCF0;border-color:#34aa44}::ng-deep .checkpoints-policy-questions-blocks ul.list li input,::ng-deep .checkpoints-policy-questions-blocks ul.list li span{color:#161b2f;font-size:14px;line-height:20px;display:block;border:none;outline:none;margin-left:0!important;margin:0;padding:0}::ng-deep .checkpoints-policy-questions-blocks ul.list li input{height:20px;background:transparent;width:100%}::ng-deep .checkpoints-policy-questions-blocks ul.list li+li{margin-top:8px}::ng-deep .checkpoints-policy-questions-blocks ul.list li button.close{font-size:12px;color:#9c1d22;padding:8px;cursor:pointer;background:transparent;border:none;outline:none}::ng-deep .checkpoints-policy-questions-blocks.active{border:1px solid #1E5DD3;padding-bottom:0;box-shadow:0 3px 6px #1e5dd326}::ng-deep .checkpoints-policy-questions-blocks.active .question:before{background:#1E5DD3}::ng-deep .checkpoints-policy-questions-blocks.active .footer{display:flex}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox{display:block;width:100%;pointer-events:auto}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.radio-item,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.radio-item,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.checkbox-item,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item{width:100%}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.radio-item span.value,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.radio-item span.value,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.checkbox-item span.value,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item span.value{width:100%;max-width:100%!important;justify-content:flex-start;border:1px solid transparent;border-radius:4px;color:#161b2f!important}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.radio-item svg,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.radio-item svg,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.checkbox-item svg,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item svg{position:absolute;top:8px;bottom:8px;left:8px}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.radio-item input:checked~span.value,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.radio-item input:checked~span.value,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.checkbox-item input:checked~span.value,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item input:checked~span.value{background:#EEFCF0;border:1px solid #34AA44}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li.add-new{opacity:.6;cursor:pointer}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li.add-new app-cs-radio label.radio-item span.value input,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li.add-new app-cs-checkbox label.radio-item span.value input,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li.add-new app-cs-radio label.checkbox-item span.value input,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li.add-new app-cs-checkbox label.checkbox-item span.value input{cursor:pointer}::ng-deep .checkpoints-policy-questions-blocks.instruction{border:1px solid #DBDBDB;margin-bottom:12px}::ng-deep .checkpoints-policy-questions-blocks.instruction .question span.counter i{font-weight:400;color:#f2bf19}::ng-deep .checkpoints-policy-questions-blocks.instruction .question span.text{width:100%;cursor:pointer}::ng-deep .checkpoints-policy-questions-blocks.instruction .question span.text marx-editor{cursor:text}::ng-deep .checkpoints-policy-questions-blocks.instruction .question span.text *{margin-top:0}::ng-deep .checkpoints-policy-questions-blocks.instruction.filled{background:#F8F8F8;max-height:100px;overflow:auto}::ng-deep .checkpoints-policy-questions-blocks.instruction.filled .container{padding:12px 12px 12px 32px}::ng-deep .checkpoints-policy-questions-blocks.instruction.filled .container .question{font-size:14px;line-height:22px}::ng-deep .checkpoints-policy-questions-blocks.instruction.filled .container .question:before{left:-32px}::ng-deep .checkpoints-policy-questions-blocks.instruction.filled .container .question span.counter{left:-32px}::ng-deep .checkpoints-policy-questions .btn-add-new{display:flex;justify-content:center;align-items:center;line-height:16px;height:36px;border-radius:4px;color:#1e5dd3;border:1px dashed #1E5DD3;margin-top:20px;width:100%;background:transparent}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:0;margin-bottom:0}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .checkpoints-policy-questions-blocks{padding:0;overflow:hidden;border-radius:4px}::ng-deep .checkpoints-policy-questions-blocks .container{padding:28px 32px 24px 45px}::ng-deep .checkpoints-policy-questions-blocks .question{font-size:16px;font-weight:300;color:#161b2f;line-height:24px;position:relative;display:flex;align-items:flex-start;margin:0}::ng-deep .checkpoints-policy-questions-blocks .question:before{top:1px;left:-45px;height:24px;width:4px;content:\"\";background:#dbdbdb;position:absolute}::ng-deep .checkpoints-policy-questions-blocks .question span.counter{display:inline-block;font-weight:600;width:auto;padding:0 0 0 8px;position:absolute;left:-41px;top:1px;line-height:25px}::ng-deep .checkpoints-policy-questions-blocks .question span.counter .required{color:#eb2424;position:absolute;top:0;right:-6px}::ng-deep .checkpoints-policy-questions-blocks .question input.text{font-size:16px;font-weight:300;color:#161b2f;line-height:24px;width:calc(100% - 28px);border:none;border-bottom:1px solid transparent;outline:none;padding-left:0;margin:0}::ng-deep .checkpoints-policy-questions-blocks .question input.text:focus{border-color:#1e5dd3}::ng-deep .checkpoints-policy-questions-blocks .question input.text:-moz-read-only{border:none}::ng-deep .checkpoints-policy-questions-blocks .question input.text:read-only{border:none}::ng-deep .checkpoints-policy-questions-blocks .date-picker{margin:12px 0;position:relative;width:400px}::ng-deep .checkpoints-policy-questions-blocks .date-picker input{width:100%;border:1px solid #dbdbdb;height:36px;line-height:24px;border-radius:4px;padding:4px 8px 4px 28px}::ng-deep .checkpoints-policy-questions-blocks .date-picker input:focus{outline:none;color:#1e5dd3}::ng-deep .checkpoints-policy-questions-blocks .date-picker i{font-size:16px;margin-right:8px;position:absolute;top:10px;left:10px;color:#747576}::ng-deep .checkpoints-policy-questions-blocks .file-upload{position:relative;display:block;margin:12px 0;cursor:pointer;width:400px}::ng-deep .checkpoints-policy-questions-blocks .file-upload input{opacity:0;width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer}::ng-deep .checkpoints-policy-questions-blocks .file-upload span{background:#1e5dd3;height:32px;border-radius:4px;display:flex;color:#fff;font-weight:400;font-size:11px;padding:8px 12px;justify-content:flex-starts;cursor:pointer;align-items:center}::ng-deep .checkpoints-policy-questions-blocks .file-upload span i{margin-right:8px}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker input:focus{outline:none}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup{width:412px;box-shadow:0 0 20px #161b2f26;background-color:#fff;border-radius:4px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover{background-color:#f3f3f3}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:before{content:\"\";height:10px;width:10px;border-radius:50%;background:#000;display:inline-flex}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays{display:flex;justify-content:space-around}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday{width:52px;border-left:none;border-bottom-color:#fff;color:#747576;font-size:11px;font-weight:600;text-transform:uppercase}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button{width:40px;height:40px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover{background-color:#f3f3f3}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected{background:#1e5dd3}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-current-day,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day{border:1px solid rgba(0,0,0,.38);color:#1e5dd3;background-color:#fff}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container .dp-nav-header button{color:#000;font-size:17px;font-weight:500;margin:0 0 0 12px;padding:0}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep .checkpoints-policy-questions-blocks dp-date-picker .dp-open+div{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}::ng-deep .checkpoints-policy-questions-blocks .footer{background:#f1f1f180;display:none;border-top:1px solid #dbdbdb;justify-content:space-between;padding:0 0 0 8px;align-items:center}::ng-deep .checkpoints-policy-questions-blocks .footer .left{width:150px;display:flex;align-items:center}::ng-deep .checkpoints-policy-questions-blocks .footer .left app-cs-checkbox{display:flex}::ng-deep .checkpoints-policy-questions-blocks .footer .left app-cs-checkbox label.checkbox-item span.value{white-space:nowrap;text-transform:uppercase;font-size:11px;font-weight:500}::ng-deep .checkpoints-policy-questions-blocks .footer .right{width:calc(100% - 100px);display:flex;justify-content:flex-end}::ng-deep .checkpoints-policy-questions-blocks .footer .right ul{padding:0;margin:0;display:flex}::ng-deep .checkpoints-policy-questions-blocks .footer .right ul li{list-style:none;border-left:1px solid #dbdbdb;padding:0}::ng-deep .checkpoints-policy-questions-blocks .footer .right ul li button{width:48px;height:36px;font-size:15px;color:#1e5dd3;outline:none;display:flex;align-items:center;justify-content:center;background:transparent;border:none}::ng-deep .checkpoints-policy-questions-blocks .footer .right ul li button.delete{color:#ee3939}::ng-deep .checkpoints-policy-questions-blocks ul.list{padding:8px 0;margin:0;display:inline-block;min-width:400px}::ng-deep .checkpoints-policy-questions-blocks ul.list li{list-style:none;display:flex;padding:0;position:relative}::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio{display:block;width:100%;pointer-events:none}::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.checkbox-item,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.radio-item,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.checkbox-item,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.radio-item{width:100%}::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.checkbox-item span.checkbox,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.checkbox-item span.radio,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.radio-item span.checkbox,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.radio-item span.radio,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.checkbox-item span.checkbox,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.checkbox-item span.radio,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.radio-item span.checkbox,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.radio-item span.radio{position:absolute!important;top:9px;left:8px;height:20px!important;width:20px!important}::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.checkbox-item span.value,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.radio-item span.value,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.checkbox-item span.value,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.radio-item span.value{padding:8px 8px 8px 40px;width:100%;max-width:100%!important;justify-content:flex-start;border:1px solid #bcbcbc;border-radius:4px;color:#161b2f!important}::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.checkbox-item svg,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.radio-item svg,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.checkbox-item svg,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.radio-item svg{position:absolute;top:8px;bottom:8px;left:8px;height:20px!important;width:20px!important}::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.checkbox-item input:checked~span.value,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-checkbox label.radio-item input:checked~span.value,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.checkbox-item input:checked~span.value,::ng-deep .checkpoints-policy-questions-blocks ul.list li app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border-color:#34aa44}::ng-deep .checkpoints-policy-questions-blocks ul.list li input,::ng-deep .checkpoints-policy-questions-blocks ul.list li span{color:#161b2f;font-size:14px;line-height:20px;display:block;border:none;outline:none;margin-left:0!important;margin:0;padding:0}::ng-deep .checkpoints-policy-questions-blocks ul.list li input{height:20px;background:transparent;width:100%}::ng-deep .checkpoints-policy-questions-blocks ul.list li+li{margin-top:8px}::ng-deep .checkpoints-policy-questions-blocks ul.list li button.close{font-size:12px;color:#9c1d22;padding:8px;cursor:pointer;background:transparent;border:none;outline:none}::ng-deep .checkpoints-policy-questions-blocks.active{border:1px solid #1e5dd3;padding-bottom:0;box-shadow:0 3px 6px #1e5dd326}::ng-deep .checkpoints-policy-questions-blocks.active .question:before{background:#1e5dd3}::ng-deep .checkpoints-policy-questions-blocks.active .footer{display:flex}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio{display:block;width:100%;pointer-events:auto}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.radio-item,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.checkbox-item,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.radio-item{width:100%}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item span.value,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.radio-item span.value,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.checkbox-item span.value,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.radio-item span.value{width:100%;max-width:100%!important;justify-content:flex-start;border:1px solid transparent;border-radius:4px;color:#161b2f!important}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item svg,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.radio-item svg,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.checkbox-item svg,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.radio-item svg{position:absolute;top:8px;bottom:8px;left:8px}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.checkbox-item input:checked~span.value,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-checkbox label.radio-item input:checked~span.value,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.checkbox-item input:checked~span.value,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li app-cs-radio label.radio-item input:checked~span.value{background:#eefcf0;border:1px solid #34aa44}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li.add-new{opacity:.6;cursor:pointer}::ng-deep .checkpoints-policy-questions-blocks.active ul.list li.add-new app-cs-checkbox label.checkbox-item span.value input,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li.add-new app-cs-checkbox label.radio-item span.value input,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li.add-new app-cs-radio label.checkbox-item span.value input,::ng-deep .checkpoints-policy-questions-blocks.active ul.list li.add-new app-cs-radio label.radio-item span.value input{cursor:pointer}::ng-deep .checkpoints-policy-questions-blocks.instruction{border:1px solid #dbdbdb;margin-bottom:12px}::ng-deep .checkpoints-policy-questions-blocks.instruction .question span.counter i{font-weight:400;color:#f2bf19}::ng-deep .checkpoints-policy-questions-blocks.instruction .question span.text{width:100%;cursor:pointer}::ng-deep .checkpoints-policy-questions-blocks.instruction .question span.text marx-editor{cursor:text}::ng-deep .checkpoints-policy-questions-blocks.instruction .question span.text *{margin-top:0}::ng-deep .checkpoints-policy-questions-blocks.instruction.filled{background:#f8f8f8;max-height:100px;overflow:auto}::ng-deep .checkpoints-policy-questions-blocks.instruction.filled .container{padding:12px 12px 12px 32px}::ng-deep .checkpoints-policy-questions-blocks.instruction.filled .container .question{font-size:14px;line-height:22px}::ng-deep .checkpoints-policy-questions-blocks.instruction.filled .container .question:before{left:-32px}::ng-deep .checkpoints-policy-questions-blocks.instruction.filled .container .question span.counter{left:-32px}::ng-deep .checkpoints-policy-questions .btn-add-new{display:flex;justify-content:center;align-items:center;line-height:16px;height:36px;border-radius:4px;color:#1e5dd3;border:1px dashed #1e5dd3;margin-top:20px;width:100%;background:transparent}p.error-message{font-size:11px;font-weight:400;color:#eb2424;line-height:16px;margin-top:0;margin-bottom:0}"]
             },] }
 ];
 CheckpointsPolicyQuestionsComponent.ctorParameters = () => [];

package/esm2015/lib/sharedComponents/document-section/document-section.component.js CHANGED Viewed

@@ -166,7 +166,7 @@ DocumentSectionComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-document-section',
                 template: "<div class=\"document-section\">\r\n    <div class=\"document-section-inner\">\r\n        <div class=\"message-box\">\r\n            <svg version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n                x=\"0px\" y=\"0px\" viewBox=\"0 0 480.8 480.8\" style=\"enable-background:new 0 0 480.8 480.8;\"\r\n                xml:space=\"preserve\">\r\n                <path style=\"fill:#FFD517;\"\r\n                    d=\"M317.112,314.4c-22.4,22.4-19.6,67.6-19.6,67.6h-113.6c0,0,2.4-45.2-19.6-67.6\r\n                                        c-24.4-21.6-40-52.8-40-87.6c0-64,52-116,116-116s116,52,116,116C356.312,261.6,341.112,292.8,317.112,314.4L317.112,314.4z\" />\r\n                <g>\r\n                    <path style=\"fill:#E5E5E5;\" d=\"M300.712,417.6c0,6-4.8,10.8-10.8,10.8h-98.8c-6,0-10.8-4.8-10.8-10.8l0,0c0-6,4.8-10.8,10.8-10.8\r\n                                            h98.4C295.512,406.8,300.712,411.6,300.712,417.6L300.712,417.6z\" />\r\n                    <path style=\"fill:#E5E5E5;\" d=\"M285.912,462.4c0,6-4.8,10.8-10.8,10.8h-69.2c-6,0-10.8-4.8-10.8-10.8l0,0c0-6,4.8-10.8,10.8-10.8\r\n                                            h69.2C281.112,451.6,285.912,456.4,285.912,462.4L285.912,462.4z\" />\r\n                </g>\r\n                <g>\r\n                    <path style=\"fill:#210B20;\" d=\"M323.112,318.4c26-23.6,40.8-56.8,40.8-91.6c0-68-55.6-123.6-123.6-123.6s-123.6,55.6-123.6,123.6\r\n                                            c0,35.6,15.6,69.6,42,92.8c19.6,19.6,17.6,61.2,17.6,61.6c0,2,0.8,4,2,5.6c1.6,1.6,3.6,2.4,5.6,2.4h113.2c2,0,4-0.8,5.6-2.4\r\n                                            s2-3.6,2-5.6c0-0.4-2-42,17.6-61.6C322.712,319.2,323.112,318.8,323.112,318.4z M311.912,308.4c-0.8,0.4-1.2,1.2-1.6,2\r\n                                            c-17.6,18.8-20.4,49.6-20.8,64h-98c-0.4-14.8-3.6-46.8-22.4-65.6c-23.6-20.8-37.2-50.4-37.2-81.6c0-60,48.8-108.4,108.4-108.4\r\n                                            c60,0,108.4,48.8,108.4,108.4C348.712,258,335.512,288,311.912,308.4z\" />\r\n                    <path style=\"fill:#210B20;\"\r\n                        d=\"M240.312,135.2c-4,0-7.6,3.2-7.6,7.6c0,4,3.2,7.6,7.6,7.6c44.8,0,81.2,36.4,81.2,81.2\r\n                                            c0,4,3.2,7.6,7.6,7.6c4,0,7.6-3.2,7.6-7.6C336.712,178.4,293.512,135.2,240.312,135.2z\" />\r\n                    <path style=\"fill:#210B20;\"\r\n                        d=\"M308.312,417.6c0-10.4-8.4-18.4-18.4-18.4h-98.8c-10.4,0-18.4,8.4-18.4,18.4\r\n                                            c0,10.4,8.4,18.4,18.4,18.4h98.4C299.912,436,308.312,428,308.312,417.6z M289.512,420.8h-98.4c-2,0-3.2-1.6-3.2-3.2\r\n                                            c0-2,1.6-3.2,3.2-3.2h98.4c2,0,3.2,1.6,3.2,3.2C293.112,419.6,291.512,420.8,289.512,420.8z\" />\r\n                    <path style=\"fill:#210B20;\"\r\n                        d=\"M275.112,444h-69.2c-10.4,0-18.4,8.4-18.4,18.4c0,10.4,8.4,18.4,18.4,18.4h69.2\r\n                                            c10.4,0,18.4-8.4,18.4-18.4C293.512,452.4,285.112,444,275.112,444z M275.112,465.6h-69.2c-2,0-3.2-1.6-3.2-3.2\r\n                                            c0-2,1.6-3.2,3.2-3.2h69.2c2,0,3.2,1.6,3.2,3.2C278.312,464.4,277.112,465.6,275.112,465.6z\" />\r\n                    <path style=\"fill:#210B20;\" d=\"M247.912,58.8V7.6c0-4-3.2-7.6-7.6-7.6c-4,0-7.6,3.2-7.6,7.6v51.6c0,4,3.2,7.6,7.6,7.6\r\n                                            C244.712,66.4,247.912,63.2,247.912,58.8z\" />\r\n                    <path style=\"fill:#210B20;\" d=\"M366.312,38c-3.6-2.4-8-1.2-10.4,2l-28.4,42.8c-2.4,3.6-1.2,8,2,10.4c1.2,0.8,2.8,1.2,4,1.2\r\n                                            c2.4,0,4.8-1.2,6.4-3.2l28.4-42.8C370.712,45.2,369.512,40.4,366.312,38z\" />\r\n                    <path style=\"fill:#210B20;\"\r\n                        d=\"M149.912,92.8c1.2,0,2.8-0.4,4-1.2c3.6-2.4,4.4-6.8,2.4-10.4l-27.6-43.2c-2.4-3.6-6.8-4.4-10.4-2.4\r\n                                            c-3.6,2.4-4.4,6.8-2.4,10.4l27.6,43.2C145.112,91.6,147.512,92.8,149.912,92.8z\" />\r\n                    <path style=\"fill:#210B20;\"\r\n                        d=\"M43.912,128.8l45.2,24.4c1.2,0.8,2.4,0.8,3.6,0.8c2.8,0,5.2-1.6,6.8-4c2-3.6,0.8-8.4-3.2-10.4\r\n                                            l-45.2-24.4c-3.6-2-8.4-0.8-10.4,3.2C39.112,122.4,40.312,126.8,43.912,128.8z\" />\r\n                    <path style=\"fill:#210B20;\"\r\n                        d=\"M387.912,154.4c1.2,0,2.4-0.4,3.6-0.8l45.2-24.4c3.6-2,5.2-6.4,3.2-10.4c-2-3.6-6.4-5.2-10.4-3.2\r\n                                            l-45.2,24.4c-3.6,2-5.2,6.4-3.2,10.4C382.312,152.8,385.112,154.4,387.912,154.4z\" />\r\n                </g>\r\n            </svg>\r\n            <p>There are multiple ways to create a policy on VComply. You can either draft it from scratch using\r\n                VComply\u2019s online editor or upload an existing DOCX or PDF file.</p>\r\n        </div>\r\n        <label class=\"document-box\" [class.active]=\"selectedDocumentType=='draft'\">\r\n            <input type=\"radio\" (change)=\"changeDocType('draft')\" [checked]=\"selectedDocumentType==='draft'\">\r\n            <svg class=\"doc-svg\" version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 64 64\" style=\"enable-background:new 0 0 64 64;\" xml:space=\"preserve\">\r\n                <style type=\"text/css\">\r\n                    .p1{fill:#F8F8F8;}\r\n                    .p2{fill:#747576;}\r\n                    .p3{fill:#BDBDBD;}\r\n                    .p4{fill:#DBDBDB;}\r\n                    .p5{fill:#1E5DD3;}\r\n                    .p6{fill:#FFFFFF;}\r\n                </style>\r\n                <path class=\"p1\" d=\"M52,16.2V58c0,1.1-0.9,2-2,2H14c-1.1,0-2-0.9-2-2V6c0-1.1,0.9-2,2-2h25.9\" />\r\n                <image style=\"overflow:visible;\" width=\"1920\" height=\"1080\" xlink:href=\"94778146.jpg\" transform=\"matrix(1 0 0 1 -8160 -8160)\">\r\n                </image>\r\n                <path class=\"p2\" d=\"M52,12v12H12V6c0-1.1,0.9-2,2-2h30\" />\r\n                <path class=\"p3\" d=\"M44,4v6.7c0,0.7,0.6,1.3,1.3,1.3H52\" />\r\n                <g>\r\n                    <path class=\"p4\" d=\"M46.2,30.1H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,30.1,46.2,30.1z\" />\r\n                </g>\r\n                <g>\r\n                    <path class=\"p4\" d=\"M46.2,34.5H17.9c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1h28.3c0.6,0,1,0.4,1,1C47.2,34.1,46.8,34.5,46.2,34.5z\" />\r\n                </g>\r\n                <g>\r\n                    <path class=\"p4\" d=\"M46.2,39H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,39,46.2,39z\" />\r\n                </g>\r\n                <g>\r\n                    <path class=\"p4\" d=\"M46.2,43.4H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,43.4,46.2,43.4z\" />\r\n                </g>\r\n                <g>\r\n                    <path class=\"p4\" d=\"M46.2,47.8H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,47.8,46.2,47.8z\" />\r\n                </g>\r\n                <g>\r\n                    <path class=\"p4\" d=\"M46.2,52.2H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,52.2,46.2,52.2z\" />\r\n                </g>\r\n                <g>\r\n                    <path class=\"p4\" d=\"M46.2,56.6H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,56.6,46.2,56.6z\" />\r\n                </g>\r\n                <g>\r\n                    <path class=\"p6\" d=\"M24.6,16.9c-0.2,0.4-0.6,0.8-1,1s-1,0.4-1.6,0.4h-2v-5.6h2c0.6,0,1.1,0.1,1.6,0.3c0.4,0.2,0.8,0.6,1,1\r\n                    c0.2,0.4,0.4,0.9,0.4,1.5C24.9,16,24.8,16.5,24.6,16.9z M23.3,16.8c0.3-0.3,0.5-0.8,0.5-1.3c0-0.6-0.2-1-0.5-1.4\r\n                    c-0.3-0.3-0.8-0.5-1.4-0.5h-0.8v3.7h0.8C22.5,17.2,23,17.1,23.3,16.8z\" />\r\n                    <path class=\"p6\" d=\"M28.7,18.2L27.4,16h-0.5v2.2h-1.1v-5.6h2.2c0.7,0,1.2,0.2,1.5,0.5s0.5,0.7,0.5,1.3c0,0.4-0.1,0.8-0.4,1.1\r\n                    s-0.6,0.5-1,0.6l1.4,2.3H28.7z M26.9,15.3h0.9c0.6,0,1-0.3,1-0.9c0-0.3-0.1-0.5-0.2-0.6c-0.2-0.2-0.4-0.2-0.7-0.2h-0.9V15.3z\" />\r\n                    <path class=\"p6\" d=\"M34.1,17.1h-2.3l-0.4,1.1h-1.2l2.1-5.6h1.3l2.1,5.6h-1.2L34.1,17.1z M33.8,16.3L33,13.9l-0.8,2.4H33.8z\" />\r\n                    <path class=\"p6\" d=\"M39.8,12.6v0.9h-2.4V15h1.9v0.9h-1.9v2.4h-1.1v-5.6H39.8z\" />\r\n                    <path class=\"p6\" d=\"M44.4,12.6v0.9h-1.6v4.8h-1.1v-4.8h-1.6v-0.9H44.4z\" />\r\n                </g>\r\n                <path class=\"p5\" d=\"M32,33.1c-5.2,0-9.4,4.2-9.4,9.4s4.2,9.4,9.4,9.4s9.4-4.2,9.4-9.4C41.4,37.3,37.2,33.2,32,33.1z\" />\r\n                <g>\r\n                    <path class=\"p6\" d=\"M36.1,40.8l-5.8,5.8L28,44.4l5.8-5.8c0.2-0.2,0.4-0.2,0.6,0l1.7,1.7C36.2,40.4,36.2,40.7,36.1,40.8z\" />\r\n                    <path class=\"p6\" d=\"M36.8,38c-0.5-0.5-1.3-0.5-1.7,0l-0.4,0.3c0,0,0.1,0,0.1,0.1l1.7,1.7c0,0,0,0.1,0.1,0.1l0.4-0.4\r\n                    c0.2-0.2,0.4-0.5,0.4-0.9C37.1,38.5,37,38.2,36.8,38L36.8,38z\" />\r\n                    <path class=\"p6\" d=\"M27.9,44.9l-1,2.6c-0.1,0.1,0,0.2,0.1,0.4c0.1,0.1,0.1,0.1,0.2,0.1c0.1,0,0.1,0,0.1,0l2.6-1L27.9,44.9z\" />\r\n                    <path class=\"p6\" d=\"M30.2,41.3c0.1,0,0.2-0.1,0.2-0.1l2.2-2.2c0.1-0.1,0.3-0.1,0.4-0.1l0.5-0.5c-0.4-0.3-0.9-0.3-1.3,0.1L30,40.7\r\n                    c-0.1,0.1-0.1,0.4,0,0.5C30,41.2,30,41.3,30.2,41.3L30.2,41.3z\" />\r\n                </g>\r\n            </svg>\r\n            <div class=\"label-right\">\r\n                <div class=\"value\"><strong>Create</strong> a Policy</div>\r\n                <div class=\"check-circle\">\r\n                    <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                    </svg>\r\n                </div>\r\n            </div>\r\n        </label>\r\n        <label class=\"document-box\" *ngIf=\"showDocxBlock\" [class.active]=\"selectedDocumentType=='docx' && !docxError?.visible\" [class.error]=\"docxError?.visible\">\r\n            <input type=\"file\" accept=\".docx\" id=\"DOCfile\" \r\n            (change)=\"handleFileInput($event.target.files)\" onclick=\"event.stopPropagation();\" #docxUploadButton>\r\n            <svg class=\"doc-svg\" version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 64 64\" style=\"enable-background:new 0 0 64 64;\" xml:space=\"preserve\">\r\n                <style type=\"text/css\">\r\n                    .d1{fill:#F8F8F8;}\r\n                    .d2{fill:#337DBE;}\r\n                    .d3{fill:#3C92DF;}\r\n                    .d4{fill:#DBDBDB;}\r\n                    .d5{fill:#F2BF19;}\r\n                    .d6{fill:#FAFAFA;}\r\n                </style>\r\n                <path class=\"d1\" d=\"M52,16.2V58c0,1.1-0.9,2-2,2H14c-1.1,0-2-0.9-2-2V6c0-1.1,0.9-2,2-2h25.9\" />\r\n                <path class=\"d2\" d=\"M52,12v12H12V6c0-1.1,0.9-2,2-2h30\" />\r\n                <path class=\"d3\" d=\"M44,4v6.7c0,0.7,0.6,1.3,1.3,1.3H52\" />\r\n                <g>\r\n                    <path class=\"d4\" d=\"M46.2,30.1H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,30.1,46.2,30.1z\" />\r\n                </g>\r\n                <g>\r\n                    <path class=\"d4\" d=\"M46.2,34.5H17.9c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1h28.3c0.6,0,1,0.4,1,1C47.2,34.1,46.8,34.5,46.2,34.5z\" />\r\n                </g>\r\n                <g>\r\n                    <path class=\"d4\" d=\"M46.2,39H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,39,46.2,39z\" />\r\n                </g>\r\n                <g>\r\n                    <path class=\"d4\" d=\"M46.2,43.4H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,43.4,46.2,43.4z\" />\r\n                </g>\r\n                <g>\r\n                    <path class=\"d4\" d=\"M46.2,47.8H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,47.8,46.2,47.8z\" />\r\n                </g>\r\n                <g>\r\n                    <path class=\"d4\" d=\"M46.2,52.2H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,52.2,46.2,52.2z\" />\r\n                </g>\r\n                <g>\r\n                    <path class=\"d4\" d=\"M46.2,56.6H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,56.6,46.2,56.6z\" />\r\n                </g>\r\n                <g>\r\n                    <path class=\"d1\" d=\"M25.4,16.9c-0.2,0.4-0.6,0.8-1,1s-1,0.4-1.6,0.4h-2v-5.6h2c0.6,0,1.1,0.1,1.6,0.3c0.4,0.2,0.8,0.6,1,1\r\n                    c0.2,0.4,0.4,0.9,0.4,1.5C25.7,16,25.6,16.5,25.4,16.9z M24.1,16.8c0.3-0.3,0.5-0.8,0.5-1.3c0-0.6-0.2-1-0.5-1.4\r\n                    c-0.3-0.3-0.8-0.5-1.4-0.5h-0.8v3.7h0.8C23.3,17.2,23.8,17.1,24.1,16.8z\" />\r\n                    <path class=\"d1\" d=\"M30.7,12.9c0.4,0.2,0.8,0.6,1,1s0.4,0.9,0.4,1.5s-0.1,1.1-0.4,1.5c-0.2,0.4-0.6,0.8-1,1\r\n                    c-0.4,0.2-0.9,0.4-1.4,0.4c-0.5,0-1-0.1-1.4-0.4c-0.4-0.2-0.8-0.6-1-1c-0.2-0.4-0.4-0.9-0.4-1.5s0.1-1.1,0.4-1.5s0.6-0.8,1-1\r\n                    c0.4-0.2,0.9-0.4,1.4-0.4C29.8,12.5,30.2,12.6,30.7,12.9z M28.4,13.8c-0.3,0.1-0.4,0.4-0.6,0.6c-0.1,0.3-0.2,0.6-0.2,1\r\n                    c0,0.4,0.1,0.7,0.2,1c0.1,0.3,0.3,0.5,0.6,0.6c0.3,0.1,0.5,0.2,0.9,0.2c0.3,0,0.6-0.1,0.9-0.2c0.3-0.1,0.4-0.4,0.6-0.6\r\n                    c0.1-0.3,0.2-0.6,0.2-1c0-0.4-0.1-0.7-0.2-1c-0.1-0.3-0.3-0.5-0.6-0.6c-0.3-0.1-0.5-0.2-0.9-0.2C28.9,13.6,28.6,13.6,28.4,13.8z\" />\r\n                    <path class=\"d1\" d=\"M37.2,13.1c0.5,0.4,0.8,0.9,0.9,1.5H37c-0.1-0.3-0.3-0.5-0.6-0.7c-0.3-0.2-0.6-0.3-0.9-0.3\r\n                    c-0.3,0-0.6,0.1-0.8,0.2s-0.4,0.4-0.6,0.6c-0.1,0.3-0.2,0.6-0.2,1c0,0.4,0.1,0.7,0.2,1c0.1,0.3,0.3,0.5,0.6,0.6s0.5,0.2,0.8,0.2\r\n                    c0.4,0,0.7-0.1,0.9-0.3c0.3-0.2,0.4-0.4,0.6-0.7h1.2c-0.1,0.6-0.5,1.1-0.9,1.5c-0.5,0.4-1,0.5-1.8,0.5c-0.5,0-1-0.1-1.4-0.4\r\n                    c-0.4-0.2-0.7-0.6-1-1c-0.2-0.4-0.3-0.9-0.3-1.5c0-0.6,0.1-1.1,0.3-1.5c0.2-0.4,0.5-0.8,1-1c0.4-0.2,0.9-0.4,1.4-0.4\r\n                    C36.2,12.5,36.8,12.7,37.2,13.1z\" />\r\n                    <path class=\"d1\" d=\"M42.3,18.2L41,16.3l-1.1,1.9h-1.3l1.8-2.9l-1.8-2.8h1.3l1.2,1.9l1.1-1.9h1.3l-1.8,2.8l1.9,2.8H42.3z\" />\r\n                </g>\r\n                <path class=\"d5\" d=\"M32,33.1c-5.2,0-9.4,4.2-9.4,9.4s4.2,9.4,9.4,9.4s9.4-4.2,9.4-9.4C41.4,37.3,37.2,33.2,32,33.1z\" />\r\n                <path class=\"d6\" d=\"M38,41.8l-5.7-5.7c-0.2-0.2-0.4-0.2-0.6,0L26,41.8c-0.1,0.1-0.1,0.2-0.1,0.3c0,0.2,0.2,0.4,0.4,0.4h2.9v6.1\r\n                c0,0.2,0.2,0.4,0.4,0.4h4.9c0.2,0,0.4-0.2,0.4-0.4v-6.1h2.9c0.2,0,0.3-0.1,0.4-0.3C38.1,42.1,38.1,42,38,41.8z\" />\r\n            </svg>\r\n            <div class=\"label-right\">\r\n                <div class=\"value\">\r\n                    <ng-container *ngIf=\"!(selectedDocumentType=='docx' && filename)\">Upload a <strong>DOCX</strong></ng-container>\r\n                    <ng-container *ngIf=\"(selectedDocumentType=='docx') && filename\">{{filename}}</ng-container>\r\n                </div>\r\n                <div class=\"error-msg-text\" *ngIf=\"docxError?.visible\">{{docxError?.message}}</div>\r\n                <div class=\"check-circle\" *ngIf=\"!docxError?.visible\">\r\n                    <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                    </svg>\r\n                </div>\r\n                <i class=\"icons error-icon\"  *ngIf=\"docxError?.visible\">&#xe914;</i>\r\n            </div>\r\n            <div class=\"line-progress\" *ngIf=\"selectedDocumentType=='docx' && isUploading\">\r\n                <div class=\"line-progress-bar\"></div>\r\n            </div>\r\n        </label>\r\n        <label class=\"document-box\" *ngIf=\"showPdfBlock\" [class.active]=\"selectedDocumentType=='pdf'\" >\r\n            <input type=\"file\" accept=\".pdf\" id=\"PDFfile\" \r\n            (change)=\"handleFileInput($event.target.files)\" onclick=\"event.stopPropagation();\" #pdfUploadButton>\r\n            <svg class=\"doc-svg\" version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 64 64\" style=\"enable-background:new 0 0 64 64;\" xml:space=\"preserve\">\r\n                <style type=\"text/css\">\r\n                    .pd1{fill:#F8F8F8;}\r\n                    .pd2{fill:#EE3939;}\r\n                    .pd3{fill:#F95858;}\r\n                    .pd4{fill:#DBDBDB;}\r\n                    .pd5{fill:#34AA44;}\r\n                    .pd6{fill:#FAFAFA;}\r\n                </style>\r\n                <path class=\"pd1\" d=\"M52,16.2V58c0,1.1-0.9,2-2,2H14c-1.1,0-2-0.9-2-2V6c0-1.1,0.9-2,2-2h25.9\" />\r\n                <path class=\"pd2\" d=\"M52,12v12H12V6c0-1.1,0.9-2,2-2h30\" />\r\n                <path class=\"pd3\" d=\"M44,4v6.7c0,0.7,0.6,1.3,1.3,1.3H52\" />\r\n                <g>\r\n                    <path class=\"pd4\" d=\"M46.2,30.1H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,30.1,46.2,30.1z\" />\r\n                </g>\r\n                <g>\r\n                    <path class=\"pd4\" d=\"M46.2,34.5H17.9c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1h28.3c0.6,0,1,0.4,1,1C47.2,34.1,46.8,34.5,46.2,34.5z\" />\r\n                </g>\r\n                <g>\r\n                    <path class=\"pd4\" d=\"M46.2,39H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,39,46.2,39z\" />\r\n                </g>\r\n                <g>\r\n                    <path class=\"pd4\" d=\"M46.2,43.4H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,43.4,46.2,43.4z\" />\r\n                </g>\r\n                <g>\r\n                    <path class=\"pd4\" d=\"M46.2,47.8H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,47.8,46.2,47.8z\" />\r\n                </g>\r\n                <g>\r\n                    <path class=\"pd4\" d=\"M46.2,52.2H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,52.2,46.2,52.2z\" />\r\n                </g>\r\n                <g>\r\n                    <path class=\"pd4\" d=\"M46.2,56.6H17.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h28.3c0.6,0,1,0.4,1,1S46.8,56.6,46.2,56.6z\" />\r\n                </g>\r\n                <g>\r\n                    <path class=\"pd1\" d=\"M26.2,16.2v2.1h-1.1v-5.6h2.1c0.7,0,1.2,0.2,1.5,0.5c0.3,0.3,0.5,0.8,0.5,1.3c0,0.5-0.2,1-0.5,1.3\r\n                    c-0.3,0.3-0.8,0.5-1.5,0.5H26.2z M28,14.4c0-0.3-0.1-0.5-0.2-0.6c-0.2-0.1-0.4-0.2-0.8-0.2h-0.8v1.7H27C27.7,15.2,28,15,28,14.4z\" />\r\n                    <path class=\"pd1\" d=\"M34.5,16.9c-0.2,0.4-0.6,0.8-1,1s-1,0.4-1.6,0.4h-2v-5.6h2c0.6,0,1.1,0.1,1.6,0.3c0.4,0.2,0.8,0.6,1,1\r\n                    c0.2,0.4,0.4,0.9,0.4,1.5C34.8,16,34.7,16.5,34.5,16.9z M33.2,16.8c0.3-0.3,0.5-0.8,0.5-1.3c0-0.6-0.2-1-0.5-1.4\r\n                    c-0.3-0.3-0.8-0.5-1.4-0.5H31v3.7h0.8C32.4,17.2,32.9,17.1,33.2,16.8z\" />\r\n                    <path class=\"pd1\" d=\"M39.2,12.6v0.9h-2.4V15h1.9v0.9h-1.9v2.4h-1.1v-5.6H39.2z\" />\r\n                </g>\r\n                <path class=\"pd5\" d=\"M32,33.1c-5.2,0-9.4,4.2-9.4,9.4s4.2,9.4,9.4,9.4s9.4-4.2,9.4-9.4C41.4,37.3,37.2,33.2,32,33.1z\" />\r\n                <path class=\"pd6\" d=\"M38,41.8l-5.7-5.7c-0.2-0.2-0.4-0.2-0.6,0L26,41.8c-0.1,0.1-0.1,0.2-0.1,0.3c0,0.2,0.2,0.4,0.4,0.4h2.9v6.1\r\n                c0,0.2,0.2,0.4,0.4,0.4h4.9c0.2,0,0.4-0.2,0.4-0.4v-6.1h2.9c0.2,0,0.3-0.1,0.4-0.3C38.1,42.1,38.1,42,38,41.8z\" />\r\n            </svg>\r\n            <div class=\"label-right\">\r\n                <div class=\"value\">\r\n                    <ng-container *ngIf=\"!(selectedDocumentType=='pdf' && filename)\">Upload a <strong>PDF</strong></ng-container>\r\n                    <ng-container *ngIf=\"(selectedDocumentType=='pdf') && filename\">{{filename}}</ng-container>\r\n                </div>\r\n                <div class=\"check-circle\">\r\n                    <svg class=\"checkIcon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52 52\">\r\n                        <circle class=\"checkIcon__circle\" cx=\"26\" cy=\"26\" r=\"25\" fill=\"none\" />\r\n                        <path class=\"checkIcon__check\" fill=\"none\" d=\"M14.1 27.2l7.1 7.2 16.7-16.8\" />\r\n                    </svg>\r\n                </div>\r\n            </div>\r\n            <div class=\"line-progress\" *ngIf=\"selectedDocumentType=='pdf' && isUploading\">\r\n                <div class=\"line-progress-bar\"></div>\r\n            </div>\r\n        </label>\r\n    </div>\r\n</div>\r\n<div class=\"bottom-button\">\r\n    <button type=\"button\" (click)=\"editPolicyEmit()\" class=\"back\"><i class=\"icons\">&#xe91d;</i> Back</button>\r\n    <button type=\"button\"  (click)=\"editor(selectedDocumentType)\" class=\"next\" [class.disabled]=\"!selectedDocumentType\">Next <i class=\"icons\">&#xe91e;</i></button>\r\n</div>",
-                styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .document-section{display:flex;align-items:center;height:calc(100vh - 50px);position:absolute;top:0;right:0;background:#fff;z-index:10;padding:50px;width:100%}::ng-deep .document-section-inner .message-box{background:#fbfbfb;border-radius:4px;border:1px solid #f1f1f1;padding:16px 8px 12px 16px;margin-bottom:20px;display:flex;align-items:flex-start}::ng-deep .document-section-inner .message-box svg{background:#fff;width:33px;min-width:33px;border-radius:4px;box-shadow:0 3px 6px #1e5dd333;margin-right:12px;padding:4px}::ng-deep .document-section-inner .message-box p{font-size:12px;font-weight:500;color:#747576;margin:0}::ng-deep .document-section-inner .document-box{position:relative;cursor:pointer;display:flex;align-items:center;justify-content:space-between;border:1px solid #dbdbdb;border-radius:4px;width:100%;background:transparent;height:100px;margin-bottom:8px}::ng-deep .document-section-inner .document-box.error{border:1px solid #dbdbdb}::ng-deep .document-section-inner .document-box input{width:100%;position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;z-index:1;opacity:0;height:100%;pointer-events:none}::ng-deep .document-section-inner .document-box svg.doc-svg{width:82px}::ng-deep .document-section-inner .document-box .label-right{width:calc(100% - 82px);display:flex;align-items:center;justify-content:center;position:relative}::ng-deep .document-section-inner .document-box .label-right .value{font-size:16px;line-height:24px;color:#747576;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word;width:250px;margin-right:35px;text-align:center}::ng-deep .document-section-inner .document-box .label-right .value strong{font-weight:500}::ng-deep .document-section-inner .document-box .label-right .error-msg-text{color:#d93b41;font-size:10px;position:absolute;top:28px;left:0;right:0;text-align:center;width:250px}::ng-deep .document-section-inner .document-box .label-right .check-circle{display:none;width:32px;height:32px;position:absolute;right:14px;top:-3px}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon{width:32px;height:32px;background:#ffffff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 #34aa44;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-right:10px;position:static}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .document-section-inner .document-box .label-right .error-icon{color:#d93b41;font-size:32px;position:relative;top:-4px;right:14px}::ng-deep .document-section-inner .document-box.active{background:#EEFCF0;border:1px solid #34AA44}::ng-deep .document-section-inner .document-box.active .label-right .check-circle{display:block}::ng-deep .document-section-inner .document-box.error{background:#FFEAEA;border:1px solid #D93B41}.bottom-button{background:#fff;display:flex;align-items:center;position:absolute;bottom:0;right:0;width:100%;z-index:10}.bottom-button button{background:#1E5DD3;border:none;border-radius:0;color:#fff;font-size:13px;font-weight:600;text-transform:uppercase;width:100%;padding:0;position:relative;margin:0!important;height:50px;display:flex;align-items:center;justify-content:center;line-height:19px;letter-spacing:3.08px;outline:none}.bottom-button button i{position:absolute;top:16px;font-size:18px;font-weight:500}.bottom-button button.next i{right:16px}.bottom-button button.disabled{pointer-events:none!important;opacity:.3!important;filter:grayscale(1)!important}.bottom-button button.back{background:#F1F1F1;color:#1e5dd3}.bottom-button button.back i{left:16px}.line-progress{position:absolute;left:0;top:0;height:2px;display:block;width:100%;background-color:#d4e2fc;background-clip:padding-box;overflow:hidden}.line-progress-bar{bottom:0;width:40%;background:#34aa44;border-radius:5px;display:inline-block;position:absolute;animation:linear infinite;animation-name:run;animation-duration:1s;top:0}@keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes run{0%{left:0}50%{left:60%}to{left:0}}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .document-section{display:flex;align-items:center;height:calc(100vh - 50px);position:absolute;top:0;right:0;background:#fff;z-index:10;padding:50px;width:100%}::ng-deep .document-section-inner .message-box{background:#fbfbfb;border-radius:4px;border:1px solid #f1f1f1;padding:16px 8px 12px 16px;margin-bottom:20px;display:flex;align-items:flex-start}::ng-deep .document-section-inner .message-box svg{background:#fff;width:33px;min-width:33px;border-radius:4px;box-shadow:0 3px 6px #1e5dd333;margin-right:12px;padding:4px}::ng-deep .document-section-inner .message-box p{font-size:12px;font-weight:500;color:#747576;margin:0}::ng-deep .document-section-inner .document-box{position:relative;cursor:pointer;display:flex;align-items:center;justify-content:space-between;border:1px solid #dbdbdb;border-radius:4px;width:100%;background:transparent;height:100px;margin-bottom:8px}::ng-deep .document-section-inner .document-box.error{border:1px solid #dbdbdb}::ng-deep .document-section-inner .document-box input{width:100%;position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;z-index:1;opacity:0;height:100%;pointer-events:none}::ng-deep .document-section-inner .document-box svg.doc-svg{width:82px}::ng-deep .document-section-inner .document-box .label-right{width:calc(100% - 82px);display:flex;align-items:center;justify-content:center;position:relative}::ng-deep .document-section-inner .document-box .label-right .value{font-size:16px;line-height:24px;color:#747576;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word;width:250px;margin-right:35px;text-align:center}::ng-deep .document-section-inner .document-box .label-right .value strong{font-weight:500}::ng-deep .document-section-inner .document-box .label-right .error-msg-text{color:#d93b41;font-size:10px;position:absolute;top:28px;left:0;right:0;text-align:center;width:250px}::ng-deep .document-section-inner .document-box .label-right .check-circle{display:none;width:32px;height:32px;position:absolute;right:14px;top:-3px}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon{width:32px;height:32px;background:#fff;border-radius:50%;stroke-width:4;stroke:#34aa44;stroke-miterlimit:10;box-shadow:inset 0 0 0 #34aa44;-webkit-animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;animation:fillCheck .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;margin-right:10px;position:static}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#34aa44;fill:none;-webkit-animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards;animation:strokeCheck .6s cubic-bezier(.65,0,.45,1) forwards}::ng-deep .document-section-inner .document-box .label-right .check-circle .checkIcon__check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;-webkit-animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards;animation:strokeCheck .3s cubic-bezier(.65,0,.45,1) .8s forwards}::ng-deep .document-section-inner .document-box .label-right .error-icon{color:#d93b41;font-size:32px;position:relative;top:-4px;right:14px}::ng-deep .document-section-inner .document-box.active{background:#eefcf0;border:1px solid #34aa44}::ng-deep .document-section-inner .document-box.active .label-right .check-circle{display:block}::ng-deep .document-section-inner .document-box.error{background:#ffeaea;border:1px solid #d93b41}.bottom-button{background:#fff;position:absolute;bottom:0;right:0;z-index:10}.bottom-button,.bottom-button button{display:flex;align-items:center;width:100%}.bottom-button button{background:#1e5dd3;border:none;border-radius:0;color:#fff;font-size:13px;font-weight:600;text-transform:uppercase;padding:0;position:relative;margin:0!important;height:50px;justify-content:center;line-height:19px;letter-spacing:3.08px;outline:none}.bottom-button button i{position:absolute;top:16px;font-size:18px;font-weight:500}.bottom-button button.next i{right:16px}.bottom-button button.disabled{pointer-events:none!important;opacity:.3!important;filter:grayscale(1)!important}.bottom-button button.back{background:#f1f1f1;color:#1e5dd3}.bottom-button button.back i{left:16px}.line-progress{position:absolute;left:0;top:0;height:2px;display:block;width:100%;background-color:#d4e2fc;background-clip:padding-box;overflow:hidden}.line-progress-bar{bottom:0;width:40%;background:#34aa44;border-radius:5px;display:inline-block;position:absolute;-webkit-animation:linear infinite;animation:linear infinite;-webkit-animation-name:run;animation-name:run;-webkit-animation-duration:1s;animation-duration:1s;top:0}@-webkit-keyframes strokeCheck{to{stroke-dashoffset:0}}@keyframes strokeCheck{to{stroke-dashoffset:0}}@-webkit-keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes fillCheck{to{box-shadow:inset 0 0 0 2px #34aa44}}@keyframes run{0%{left:0}50%{left:60%}to{left:0}}@-webkit-keyframes run{0%{left:0}50%{left:60%}to{left:0}}"]
             },] }
 ];
 DocumentSectionComponent.ctorParameters = () => [

package/esm2015/lib/sharedComponents/floating-bar/floating-bar.component.js CHANGED Viewed

@@ -62,7 +62,7 @@ FloatingBarComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-floating-bar',
                 template: "<div class=\"userGroup-floating-bar\">\r\n  <div class=\"userGroup-floating-bar-container\">\r\n    <div class=\"left user-group-left\">\r\n      <ng-container *ngIf=\"selectedData.length > 0 && !groupsEnabled\">\r\n        <div class=\"chip\" *ngFor=\"let element of selectedData?.slice(0,1);let i = index\">\r\n          <ng-container *ngIf=\"element\">\r\n            <i class=\"icons\" *ngIf=\"!nonRemovableUsersList.includes(element[elementId]) && removePosition != 'right'\"\r\n              (click)=\"deleteSelected(element)\">&#xe90d;</i>\r\n            <span class=\"step\" *ngIf=\"selectedWorkflow=='SEQUENTIAL' && showWorkflow\">\r\n              {{((selectedData.length<=2) && (i==selectedData.length-1)) && selectedData.length > 1? 'Final' : (i+1) }} </span>\r\n                <span  *ngIf=\"(element[displayElementKey]|dataType) !== 'object'\" [appTooltip]=\"element[displayElementKey]\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{element[displayElementKey]}}</span>\r\n                <span *ngIf=\"(element[displayElementKey]|dataType) === 'object'\">{{element[displayElementKey] | slice:\r\n                  element[displayElementKey].length -1 }}</span>\r\n                <i class=\"icons\"\r\n                  *ngIf=\"!nonRemovableUsersList.includes(element[elementId]) && removePosition == 'right'\"\r\n                  (click)=\"deleteSelected(element)\">&#xe90d;</i>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"counter\" *ngIf=\"selectedData?.length>1\" appPopover (click)=\"userPopover.popover()\" placement=\"left\">+{{selectedData?.slice(1)?.length}}</div>\r\n        <div class=\"name\" *ngIf=\"selectedData?.length>1\">\r\n          <span *ngIf=\"selectedData?.slice(1).length === 1\">{{singularText}}</span>\r\n          <span *ngIf=\"selectedData?.slice(1).length > 1\">{{pluralText}}</span>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"groupsEnabled\">\r\n        <div class=\"user-group-chip\" *ngIf=\"selectedData?.length\">\r\n          <i  (click)=\"deleteSelected(selectedData[0])\" class=\"icons cross\">&#xe9ae;</i>\r\n          <div class=\"user-group-name\">{{selectedData[0][displayElementKey]}}</div>\r\n        </div>\r\n        <div class=\"name userGroup-name\" *ngIf=\"selectedData?.length>0 && groupsEnabled\">\r\n          <div class=\"counter\" *ngIf=\"selectedData?.length>1\" appPopover (click)=\"UserWithFeatureFlagPopover.popover()\" placement=\"left\">+{{selectedData?.length - 1}}</div>\r\n          <span class=\"userGroup-text\" *ngIf=\"selectedData?.length === 1\"> {{selectedGroups && selectedGroups?.length > 0 ?' & ':''}}</span>\r\n          <span class=\"userGroup-text\" *ngIf=\"selectedData?.length > 1\">Users {{selectedGroups && selectedGroups?.length > 0 ?' & ':'selected'}}</span>\r\n        </div>\r\n        <div class=\"user-group-chip\" *ngIf=\"selectedGroups?.length\">\r\n          <i class=\"icons cross\" (click)=\"deleteSelectedGroup(selectedGroups[0])\">&#xe9ae;</i>\r\n          <div class=\"user-group-name\">{{selectedGroups[0]?.group_name}}</div>\r\n        </div>\r\n        <div class=\"counter group\" *ngIf=\"selectedGroups.length > 1\" appPopover (click)=\"groupPopover.popover()\" placement=\"left\">+{{selectedGroups.length -1}}</div>\r\n        <div class=\"name userGroup-name\" *ngIf=\"selectedGroups.length > 0\">{{selectedGroups?.length > 1 ?' User Groups selected ':''}}</div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"showFrequencyText\">\r\n        <div class=\"name vx-ml-0\">\r\n          <span>You have selected <span class=\"vx-fw-500 vx-label-txt\">{{currentFrequency}}</span> frequency.</span>\r\n        </div>\r\n      </ng-container>\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <div class=\"center\" *ngIf=\"(showWorkflow && mode === 'CREATE' )||(showWorkflow && workflowList.includes('ROUND-ROBIN'))\">\r\n      <label>\r\n        {{workflowText}}\r\n        <span class=\"icon\" *ngIf=\"workflowText=='Approval Workflow'\" libPopoverHover (mouseover)=\"dataTooltip.popover()\" (mouseleave)=\"dataTooltip.closePopover()\"\r\n                    placement=\"right\"><i class=\"icons\">&#xe91f;</i></span>\r\n\r\n      </label>\r\n                <popover-hover #dataTooltip>\r\n                    <div class=\"vx-info-card\">\r\n                      <div class=\"vx-info-card-body\">\r\n                        You can select from the following three options:<br>\r\n                        <strong>Sequential:</strong> The policy would be sent for approval one at a time in the sequence defined by you.<br>\r\n                        <strong>Round-robin:</strong> The policy will be sent for approval to all approvers at the same time. However, it is mandatory for all approvers to take action.<br>\r\n                        <strong>Any One:</strong> The policy will be sent for approval to all approvers at the same time. If anyone of the approver approves the policy, it will be considered as approved.\r\n                      </div>\r\n\r\n                    </div>\r\n                </popover-hover>\r\n      <cs-select [(ngModel)]=\"selectedWorkflow\" (ngModelChange)=\"selectedWorkflowChange($event)\" [placeholder]=\"'Approval WorkFlow *'\"  [setMaxWidth]=\"true\">\r\n        <cs-option *ngFor=\"let data of workflowList\" [value]=\"data\">\r\n          {{data}}\r\n        </cs-option>\r\n      </cs-select>\r\n    </div>\r\n    <div class=\"right\">\r\n      <button appRipple class=\"cancel\" (click)=\"close()\">Cancel</button>\r\n      <button *ngIf=\"showNextButton\" [disabled]=\"isDisabled\" (click)=\"next()\" appRipple>Next <i class=\"icons\">&#xe91e;</i></button>\r\n    </div>\r\n  </div>\r\n</div>\r\n<app-popover #userPopover [dontCloseonClick]=\"true\">\r\n  <div class=\"action-list\">\r\n    <ul class=\"action-item\">\r\n      <!-- <li class=\"multiple-program\" *ngIf=\"defaultSelected?.category_id\">\r\n        <div class=\"avatar-card\">\r\n          <span class=\"value\">\r\n            <i class=\"icons\" [class.disabled]=\"true\">&#xe90d;</i>\r\n            {{defaultSelected?.name}}\r\n          </span>\r\n          <div class=\"primary-label\">PRIMARY</div>\r\n        </div>\r\n      </li> -->\r\n      <li *ngFor=\"let element of selectedData?.slice(1); let i =index\">\r\n        <div class=\"avatar-card\">\r\n          <span class=\"value\" *ngIf=\"(element[displayElementKey]|dataType) !== 'object'\">\r\n            <i class=\"icons\" *ngIf=\"!nonRemovableUsersList.includes(element[elementId])\"\r\n              (click)=\"deleteSelected(element)\">&#xe90d;</i>\r\n            <span class=\"step\" *ngIf=\"selectedWorkflow=='SEQUENTIAL' && showWorkflow\">\r\n              {{(i==selectedData.slice(1).length-1)? 'Final' : (i+2) }}\r\n            </span>\r\n            {{element[displayElementKey]}}\r\n          </span>\r\n\r\n          <span class=\"value\" *ngIf=\"(element[displayElementKey]|dataType) === 'object'\">\r\n            <i class=\"icons\" *ngIf=\"!nonRemovableUsersList.includes(element[elementId])\"\r\n              (click)=\"deleteSelected(element)\">&#xe90d;</i>\r\n            {{element[displayElementKey]}}\r\n          </span>\r\n          <div *ngIf=\"defaultSelected?.category_id && defaultSelected?.category_id === element?.category_id\" class=\"primary-label\">PRIMARY</div>\r\n        </div>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</app-popover>\r\n<app-popover #UserWithFeatureFlagPopover [dontCloseonClick]=\"true\">\r\n  <div class=\"action-list\">\r\n    <ul class=\"action-item\">\r\n      <li *ngFor=\"let data of selectedData | slice: 1\">\r\n        <div class=\"avatar-card\">\r\n          <span class=\"value\"><i class=\"icons\" (click)=\"deleteSelected(data)\">&#xe90d;</i>{{data[displayElementKey]}}</span>\r\n        </div>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</app-popover>\r\n<app-popover #groupPopover [dontCloseonClick]=\"true\">\r\n  <div class=\"action-list\">\r\n    <ul class=\"action-item\">\r\n      <li *ngFor=\"let data of selectedGroups | slice: 1\">\r\n        <div class=\"avatar-card\">\r\n          <span class=\"value\"><i class=\"icons\" (click)=\"deleteSelectedGroup(data)\">&#xe90d;</i>{{data['group_name']}}</span>\r\n        </div>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</app-popover>\r\n",
-                styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";::ng-deep .userGroup-floating-bar{padding:0 16px 32px}::ng-deep .userGroup-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef40;border:1px solid #f8f8f8;padding:8px 12px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#FFFFFF}::ng-deep .userGroup-floating-bar-container .left{display:flex;align-items:center;width:40%}::ng-deep .userGroup-floating-bar-container .left.user-group-left{width:50%}::ng-deep .userGroup-floating-bar-container .left .chip{padding:0 5px;height:24px;display:inline-flex;color:#1e5dd3;border-radius:2px;align-items:center;background:#fff;max-width:100%;box-shadow:0 2px 6px #4681ef20}::ng-deep .userGroup-floating-bar-container .left .chip i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex;margin-left:4px}::ng-deep .userGroup-floating-bar-container .left .chip span{width:auto;font-size:12px;font-weight:500;overflow:hidden;display:block;text-overflow:ellipsis;white-space:nowrap;max-width:120px}::ng-deep .userGroup-floating-bar-container .left .chip span.no-action{max-width:100%}::ng-deep .userGroup-floating-bar-container .left .chip span+i{margin-left:8px;margin-right:0}::ng-deep .userGroup-floating-bar-container .left .chip+.chip{margin-left:5px}::ng-deep .userGroup-floating-bar-container .left .counter{border-radius:2px;background:#34aa44;border:none;height:24px;color:#fff;font-size:12px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;margin:0 4px;padding:0 4px;justify-content:center;line-height:24px}::ng-deep .userGroup-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .userGroup-floating-bar-container .left .name{margin-left:4px;color:#747576;font-size:12px;line-height:18px;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .left .name b{color:#161b2f;font-weight:500!important;text-transform:lowercase}::ng-deep .userGroup-floating-bar-container .left .name.userGroup-name{margin-left:0}::ng-deep .userGroup-floating-bar-container .left .user-group-chip{background:#FFFFFF;border-radius:.125rem;box-shadow:0 2px 4px #1e5dd31a;height:1.5rem;display:inline-flex;align-items:center;padding:0 4px;max-width:13rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .cross{color:#1e5dd3;font-size:12px;margin-right:8px;position:relative;top:.0625rem;cursor:pointer}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .user-group-name{color:#1e5dd3;font-size:12px;font-weight:500;display:block;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:7.5rem}::ng-deep .userGroup-floating-bar-container .left .userGroup-text{margin-right:4px}::ng-deep .userGroup-floating-bar-container .center{width:40%;display:flex;justify-content:flex-start;align-items:center}::ng-deep .userGroup-floating-bar-container .center label{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:0;display:block;text-transform:uppercase;width:auto;margin-right:8px;text-align:left;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .center label .icon i{color:#1e5dd3}::ng-deep .userGroup-floating-bar-container .center cs-select{width:100%}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group{position:relative}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group input.value{background:transparent!important;height:32px!important;padding:8px 20px 8px 8px!important;border-radius:2px!important}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group:before{border:1px solid #707070;border-top:none;border-left:none;content:\"\";display:inline-block;right:8px;position:absolute;top:12px;width:5px;height:5px;transform:rotate(45deg)}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .select-options cs-option .list label span.value{font-size:13px!important}::ng-deep .userGroup-floating-bar-container .right{display:flex;align-items:center}::ng-deep .userGroup-floating-bar-container .right .name{margin-left:15px;color:#707070;font-size:12px;font-weight:500;line-height:18px;display:flex;align-items:center;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .right .name span.required{color:#eb2424;font-size:14px}::ng-deep .userGroup-floating-bar-container .right .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .userGroup-floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .userGroup-floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .userGroup-floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .userGroup-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .userGroup-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .userGroup-floating-bar-container .right button:disabled{background:#F1F1F1!important;color:#747576!important;opacity:1}::ng-deep .userGroup-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}::ng-deep span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}.action-list{width:220px}.action-list ul{padding:0;margin:0;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button .file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 16px)}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;min-width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{background:#fff;width:100%;height:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.disabled{color:#dbdbdb;pointer-events:none}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .avatar-card i.delete-icon{color:#d93b41;cursor:pointer;font-size:14px}.action-list ul.action-item li .avatar-card .primary-label{background:#7AA7F7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-left:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li.multiple-program{background:#F8F8F8;margin-top:8px}.action-list ul.action-item li.multiple-program .avatar-card{padding:2px 7.5px}.action-list ul.action-item li.multiple-program .avatar-card span.value{color:#747576;font-size:11px;font-weight:600;width:unset}.action-list ul.action-item li.multiple-program .avatar-card span.value i.disabled{color:#dbdbdb;pointer-events:none}.action-list ul.action-item li.multiple-program .avatar-card .primary-label{background:#7AA7F7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.action-list ul.action-item li:first-child{animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}.vx-overlay{position:fixed;z-index:1;top:0;right:0;bottom:0;left:0}.vx-info-card{width:280px;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#ffffff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;position:static;display:block}.vx-info-card-head{font-size:13px;border-bottom:1px solid #dcdcdc;padding:8px 12px;font-weight:500;text-transform:none;color:#161b2f}.vx-info-card-body{font-size:11px;padding:8px 12px;margin:0;font-weight:400;text-transform:none;color:#747576}\n"]
+                styles: ["@import url(\"https://cdn.v-comply.com/design-system/css/icons/icons.css\");::ng-deep .userGroup-floating-bar{padding:0 16px 32px}::ng-deep .userGroup-floating-bar-container{height:48px;border-radius:4px;box-shadow:0 6px 12px #4681ef40;border:1px solid #f8f8f8;padding:8px 12px;display:flex;justify-content:space-between;position:relative;align-items:center;background:#fff}::ng-deep .userGroup-floating-bar-container .left{display:flex;align-items:center;width:40%}::ng-deep .userGroup-floating-bar-container .left.user-group-left{width:50%}::ng-deep .userGroup-floating-bar-container .left .chip{padding:0 5px;height:24px;display:inline-flex;color:#1e5dd3;border-radius:2px;align-items:center;background:#fff;max-width:100%;box-shadow:0 2px 6px #4681ef20}::ng-deep .userGroup-floating-bar-container .left .chip i{margin-right:7px;font-size:10px;cursor:pointer;display:inline-flex;margin-left:4px}::ng-deep .userGroup-floating-bar-container .left .chip span{width:auto;font-size:12px;font-weight:500;overflow:hidden;display:block;text-overflow:ellipsis;white-space:nowrap;max-width:120px}::ng-deep .userGroup-floating-bar-container .left .chip span.no-action{max-width:100%}::ng-deep .userGroup-floating-bar-container .left .chip span+i{margin-left:8px;margin-right:0}::ng-deep .userGroup-floating-bar-container .left .chip+.chip{margin-left:5px}::ng-deep .userGroup-floating-bar-container .left .counter{border-radius:2px;background:#34aa44;border:none;height:24px;color:#fff;font-size:12px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;margin:0 4px;padding:0 4px;justify-content:center;line-height:24px}::ng-deep .userGroup-floating-bar-container .left .counter.group{background:#1e5dd3}::ng-deep .userGroup-floating-bar-container .left .name{margin-left:4px;color:#747576;font-size:12px;line-height:18px;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .left .name b{color:#161b2f;font-weight:500!important;text-transform:lowercase}::ng-deep .userGroup-floating-bar-container .left .name.userGroup-name{margin-left:0}::ng-deep .userGroup-floating-bar-container .left .user-group-chip{background:#fff;border-radius:.125rem;box-shadow:0 2px 4px #1e5dd31a;height:1.5rem;display:inline-flex;align-items:center;padding:0 4px;max-width:13rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .cross{color:#1e5dd3;font-size:12px;margin-right:8px;position:relative;top:.0625rem;cursor:pointer}::ng-deep .userGroup-floating-bar-container .left .user-group-chip .user-group-name{color:#1e5dd3;font-size:12px;font-weight:500;display:block;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:7.5rem}::ng-deep .userGroup-floating-bar-container .left .userGroup-text{margin-right:4px}::ng-deep .userGroup-floating-bar-container .center{width:40%;display:flex;justify-content:flex-start;align-items:center}::ng-deep .userGroup-floating-bar-container .center label{color:#161b2f;font-size:11px;font-weight:500;line-height:16px;margin-bottom:0;display:block;text-transform:uppercase;width:auto;margin-right:8px;text-align:left;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .center label .icon i{color:#1e5dd3}::ng-deep .userGroup-floating-bar-container .center cs-select{width:100%}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group{position:relative}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group input.value{background:transparent!important;height:32px!important;padding:8px 20px 8px 8px!important;border-radius:2px!important}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group i{right:12px!important;top:12px!important}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .input-group:before{border:1px solid #707070;border-top:none;border-left:none;content:\"\";display:inline-block;right:8px;position:absolute;top:12px;width:5px;height:5px;transform:rotate(45deg)}::ng-deep .userGroup-floating-bar-container .center cs-select .selection-wrap .select-options cs-option .list label span.value{font-size:13px!important}::ng-deep .userGroup-floating-bar-container .right{display:flex;align-items:center}::ng-deep .userGroup-floating-bar-container .right .name{margin-left:15px;color:#707070;font-size:12px;font-weight:500;line-height:18px;display:flex;align-items:center;white-space:nowrap}::ng-deep .userGroup-floating-bar-container .right .name span.required{color:#eb2424;font-size:14px}::ng-deep .userGroup-floating-bar-container .right .name i{margin-left:3px;color:#1e5dd3;cursor:pointer}::ng-deep .userGroup-floating-bar-container .right app-cs-select{margin-left:12px;width:125px;display:flex}::ng-deep .userGroup-floating-bar-container .right app-cs-select .input-group .custom-select-box input{height:32px}::ng-deep .userGroup-floating-bar-container .right app-cs-select .input-group .custom-select-box span.arrow{bottom:6px}::ng-deep .userGroup-floating-bar-container .right button{border-radius:2px;height:24px;background:#1e5dd3!important;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff!important;text-transform:uppercase;font-size:11px;font-weight:500;border:none!important;padding:0 8px;margin:0 0 0 8px}::ng-deep .userGroup-floating-bar-container .right button i{margin-left:8px;font-size:11px}::ng-deep .userGroup-floating-bar-container .right button:disabled{background:#f1f1f1!important;color:#747576!important;opacity:1}::ng-deep .userGroup-floating-bar-container .right button.cancel{background:transparent!important;color:#eb2424!important}::ng-deep span.step{background:#1e5dd3;border-radius:2px;color:#fff;font-size:9px;line-height:14px;padding:0 4px;font-weight:400;text-align:center;min-width:auto;margin-right:4px}.action-list{width:220px}.action-list ul{padding:0;margin:0;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;max-height:220px;overflow:auto}.action-list ul.action-item{display:block}.action-list ul.action-item li{list-style:none;border:none;border-bottom:1px solid #f1f1f1;display:block;width:100%;padding:0;background:transparent;border-radius:0;margin:0;height:auto;justify-content:flex-start;box-shadow:none}.action-list ul.action-item li button{color:#6e717e;text-align:left;text-decoration:none;cursor:pointer;background:transparent;font-size:12px;text-transform:capitalize;display:flex;width:100%;padding:7.5px 11px;border:none}.action-list ul.action-item li button .file-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:calc(100% - 16px)}.action-list ul.action-item li button i{font-size:17px;margin-right:10px;color:#1c5bd1}.action-list ul.action-item li button:hover{background:#f3f3f3}.action-list ul.action-item li .avatar-card{display:flex;align-items:center;width:100%;padding:7.5px}.action-list ul.action-item li .avatar-card.within-con{display:block}.action-list ul.action-item li .avatar-card .avatar{height:24px;width:24px!important;min-width:24px!important;overflow:hidden;background:#4681ef;color:#fff;font-size:10px;display:inline-flex;margin-right:5px;border-radius:50%;align-items:center;justify-content:center;text-transform:uppercase}.action-list ul.action-item li .avatar-card .avatar img{background:#fff;width:100%;height:100%}.action-list ul.action-item li .avatar-card .avatar+span.value{width:calc(100% - 29px)}.action-list ul.action-item li .avatar-card span.value{color:#6e717e;text-decoration:none;background:transparent;font-size:12px;text-transform:capitalize;display:block;font-weight:400;-moz-text-align-last:left;text-align-last:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}.action-list ul.action-item li .avatar-card span.value i{font-size:8px;color:#1c5bd1;cursor:pointer;margin-right:4px}.action-list ul.action-item li .avatar-card span.value i.disabled{color:#dbdbdb;pointer-events:none}.action-list ul.action-item li .avatar-card.no-image{display:block}.action-list ul.action-item li .avatar-card.no-image span.value{width:100%;display:block}.action-list ul.action-item li .avatar-card i.delete-icon{color:#d93b41;cursor:pointer;font-size:14px}.action-list ul.action-item li .avatar-card .primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.action-list ul.action-item li .chip-item{color:#1e5dd3;padding:10px;display:flex;align-items:center}.action-list ul.action-item li .chip-item i{margin-left:7px;font-size:10px;cursor:pointer;display:inline-flex}.action-list ul.action-item li .chip-item span{display:block;width:auto;width:calc(100% - 17px);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list ul.action-item li .chip-item span.chip-block{display:block;width:100%}.action-list ul.action-item li .chip-item span.id{font-size:9px}.action-list ul.action-item li .within{display:flex;align-items:center;justify-content:flex-start}.action-list ul.action-item li .within .block{background:#f1f1f1;border-radius:2px;padding:0 2px;line-height:14px;font-size:9px;font-weight:500;color:#042e7d;margin-right:6px;display:block;text-transform:uppercase}.action-list ul.action-item li .within .data{width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#747576;font-size:11px;font-weight:400;line-height:17px}.action-list ul.action-item li.multiple-program{background:#f8f8f8;margin-top:8px}.action-list ul.action-item li.multiple-program .avatar-card{padding:2px 7.5px}.action-list ul.action-item li.multiple-program .avatar-card span.value{color:#747576;font-size:11px;font-weight:600;width:unset}.action-list ul.action-item li.multiple-program .avatar-card span.value i.disabled{color:#dbdbdb;pointer-events:none}.action-list ul.action-item li.multiple-program .avatar-card .primary-label{background:#7aa7f7;border-radius:2px;color:#fff;font-size:9px;font-weight:500;text-transform:uppercase;padding:0 4px;line-height:12px;margin:0 4px}.action-list ul.action-item li:first-child{-webkit-animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .25s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(2){-webkit-animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .35s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(3){-webkit-animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .45s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(4){-webkit-animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .55s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(5){-webkit-animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .65s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(6){-webkit-animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .75s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(7){-webkit-animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .85s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(8){-webkit-animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open .95s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(9){-webkit-animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.05s cubic-bezier(.25,.46,.45,.94) both}.action-list ul.action-item li:nth-child(10){-webkit-animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both;animation:action-list-open 1.15s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes action-list-open{0%{transform:translateY(50px)}to{transform:translateY(0)}}.vx-overlay{position:fixed;z-index:1;top:0;right:0;bottom:0;left:0}.vx-info-card{width:280px;-webkit-animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center .2s cubic-bezier(.39,.575,.565,1) both;background:#fff;box-shadow:0 3px 6px #1c5bd140;border-radius:4px;position:static;display:block}.vx-info-card-head{font-size:13px;border-bottom:1px solid #dcdcdc;padding:8px 12px;font-weight:500;text-transform:none;color:#161b2f}.vx-info-card-body{font-size:11px;padding:8px 12px;margin:0;font-weight:400;text-transform:none;color:#747576}"]
             },] }
 ];
 FloatingBarComponent.ctorParameters = () => [];