vcomply-workflow-engine 3.3.0 → 3.3.2
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.
- package/esm2020/lib/sharedComponents/assessment-editor/components/preview/preview-matrix-dropdown/preview-matrix-dropdown.component.mjs +10 -7
- package/esm2020/lib/sharedComponents/assessment-editor/components/preview/preview-wrapper/preview-wrapper.component.mjs +1 -1
- package/esm2020/lib/sharedComponents/assessment-editor/components/preview/preview.module.mjs +7 -3
- package/esm2020/lib/sharedComponents/assessment-preview/assessment-preview.module.mjs +13 -10
- package/esm2020/lib/sharedComponents/assessment-preview/checkbox-question/checkbox-question.component.mjs +2 -2
- package/esm2020/lib/sharedComponents/assessment-preview/date-time/date-time.component.mjs +2 -2
- package/esm2020/lib/sharedComponents/assessment-preview/file-upload/file-upload.component.mjs +2 -2
- package/esm2020/lib/sharedComponents/assessment-preview/preview/preview.component.mjs +14 -12
- package/esm2020/lib/sharedComponents/assessment-preview/quick-settings/quick-settings.component.mjs +7 -5
- package/esm2020/lib/sharedComponents/assessment-preview/radio-question/radio-question.component.mjs +2 -2
- package/esm2020/lib/sharedComponents/assessment-preview/select-question/select-question.component.mjs +2 -2
- package/esm2020/lib/sharedComponents/assessment-preview/single-textbox/single-textbox.component.mjs +2 -2
- package/esm2020/lib/sharedComponents/v-loader/loader/loader.component.mjs +1 -1
- package/esm2020/lib/sharedComponents/v-loader/loader-inline/loader-inline.component.mjs +1 -1
- package/fesm2015/vcomply-workflow-engine.mjs +211 -205
- package/fesm2015/vcomply-workflow-engine.mjs.map +1 -1
- package/fesm2020/vcomply-workflow-engine.mjs +211 -205
- package/fesm2020/vcomply-workflow-engine.mjs.map +1 -1
- package/lib/sharedComponents/assessment-editor/components/preview/preview-matrix-dropdown/preview-matrix-dropdown.component.d.ts +5 -2
- package/lib/sharedComponents/assessment-editor/components/preview/preview.module.d.ts +2 -1
- package/lib/sharedComponents/assessment-preview/assessment-preview.module.d.ts +14 -13
- package/lib/sharedComponents/assessment-preview/quick-settings/quick-settings.component.d.ts +1 -1
- package/lib/sharedComponents/v-loader/loader/loader.component.d.ts +1 -1
- package/lib/sharedComponents/v-loader/loader-inline/loader-inline.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -21,10 +21,10 @@ export class DateTimeComponent {
|
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
DateTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
24
|
-
DateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateTimeComponent, selector: "app-date-time", inputs: { question: "question", questionIndex: "questionIndex" }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }], ngImport: i0, template: "<div class=\"question-block\">\r\n <div class=\"question-head vx-d-flex vx-mb-4\">\r\n <span class=\"count vx-paragraph-txt vx-fs-20 vx-fw-400\">{{questionIndex}}.</span>\r\n <span class=\"heading vx-pl-3\">\r\n <span class=\"vx-fw-300 vx-label-txt vx-fs-20\" [innerHTML]=\"question?.title=='' ? 'Question' : question?.title\"></span>\r\n <span class=\"required vx-fw-400 vx-txt-red vx-fs-24 vx-ml-2\" *ngIf=\"question?.isRequired\">*</span>\r\n </span>\r\n </div>\r\n <div class=\"question-details vx-fs-13 vx-paragraph-txt\" *ngIf=\"question?.hasDescription && question?.description?.trim().length > 0 \" [innerHTML]=\"question?.description\"></div>\r\n <div class=\"question-options\">\r\n <div class=\"textbox-group vx-mt-5\">\r\n <div class=\"input-group vx-d-flex vx-mb-2\" *ngIf=\"question?.hasDate\">\r\n <span class=\"label vx-bg-grey vx-label-txt vx-lh-24 vx-d-flex vx-tt-uppercase vx-fs-11 vx-text-center vx-p-2 vx-justify-center vx-align-center\"><span class=\"vx-d-block\" [appTooltip]=\"question?.date?.title==''?'Date Label':question?.date?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{question?.date?.title==''?'Date Label':question?.date?.title}}</span></span>\r\n <div class=\"date-time-area\">\r\n <i class=\"icons vx-fs-14 vx-paragraph-txt\"></i>\r\n <input class=\"datePicker\" (click)=\"openDatePicker()\" placeholder=\"Select Date\">\r\n <dp-date-picker #datePicker placeholder=\"Select Date\" (click)=\"openDatePicker()\" (click)=\"closeDatepicker()\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeDatepicker()\" *ngIf=\"datepickerOverlay\"></div>\r\n </div>\r\n </div>\r\n <div class=\"input-group vx-d-flex vx-mb-10\" *ngIf=\"question?.hasTime\">\r\n <span class=\"label vx-bg-grey vx-label-txt vx-lh-24 vx-d-flex vx-tt-uppercase vx-fs-11 vx-text-center vx-p-2 vx-justify-center vx-align-center\"><span class=\"vx-d-block\" [appTooltip]=\"question?.time?.title==''?'Time Label':question?.time?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{question?.time?.title==''?'Time Label':question?.time?.title}}</span></span>\r\n <div class=\"date-time-area\">\r\n <input aria-label=\"12hr format\" [ngxTimepicker]=\"timeOnly\" readonly placeholder=\"Select Time\" />\r\n <i class=\"icons vx-fs-14 vx-paragraph-txt\"></i>\r\n <ngx-material-timepicker #timeOnly></ngx-material-timepicker>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"question-quick-settings\">\r\n <app-quick-settings [question]=\"question\"></app-quick-settings>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .question-block{position:relative;margin-bottom:3rem}::ng-deep .question-head{padding-right:4rem}::ng-deep .question-head .count{min-width:1.5rem}::ng-deep .question-head .heading .required{position:relative;top:-.25rem}::ng-deep .question-details{padding-right:4rem;padding-left:2.5rem}::ng-deep .question-options{margin-left:2.5rem;margin-top:1.875rem}::ng-deep .question-options .textbox-group{display:block;max-width:31.25rem}::ng-deep .question-options .textbox-group .input-group{border:1px solid #F1F1F1;border-radius:.25rem;position:relative}::ng-deep .question-options .textbox-group .input-group .label{width:5.875rem}::ng-deep .question-options .textbox-group .input-group .label span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .question-options .textbox-group .input-group .date-time-area{width:calc(100% - 5.875rem);height:2.5rem;position:relative}::ng-deep .question-options .textbox-group .input-group .date-time-area input{background:transparent;border:none;border-radius:0;width:100%;height:100%;outline:none;cursor:pointer;margin:0;padding:8px;position:relative;z-index:1}::ng-deep .question-options .textbox-group .input-group .date-time-area input.datePicker{opacity:0}::ng-deep .question-options .textbox-group .input-group .date-time-area i{position:absolute;top:.75rem;right:.5rem}::ng-deep .question-options .textbox-group .input-group .date-time-area .overlay{z-index:2}::ng-deep .question-options .textbox-group .input-group .date-time-area dp-date-picker .dp-input-container input{top:-2.25rem;z-index:-1}::ng-deep .question-quick-settings{position:absolute;top:-.25rem;right:-2.25rem}::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: i3.NgxMaterialTimepickerComponent, selector: "ngx-material-timepicker", inputs: ["ESC", "hoursOnly", "ngxMaterialTimepickerTheme", "format", "minutesGap", "cancelBtnTmpl", "editableHintTmpl", "confirmBtnTmpl", "enableKeyboardInput", "preventOverlayClick", "disableAnimation", "appendToInput", "defaultTime", "timepickerClass", "theme", "min", "max"], outputs: ["timeSet", "opened", "closed", "hourSelected", "timeChanged"] }, { kind: "directive", type: i3.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "value", "min", "max", "ngxTimepicker", "disabled", "disableClick"] }, { kind: "component", type: i4.DatePickerComponent, selector: "dp-date-picker", inputs: ["mode", "placeholder", "disabled", "config", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "component", type: i5.QuickSettingsComponent, selector: "app-quick-settings", inputs: ["question"] }] });
|
|
24
|
+
DateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateTimeComponent, selector: "app-date-time", inputs: { question: "question", questionIndex: "questionIndex" }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }], ngImport: i0, template: "<div class=\"question-block\">\r\n <div class=\"question-head vx-d-flex vx-mb-4\">\r\n <span class=\"count vx-paragraph-txt vx-fs-20 vx-fw-400\">{{questionIndex}}.</span>\r\n <span class=\"heading vx-pl-3\">\r\n <span class=\"vx-fw-300 vx-label-txt vx-fs-20\" [innerHTML]=\"question?.title=='' ? 'Question' : question?.title\"></span>\r\n <span class=\"required vx-fw-400 vx-txt-red vx-fs-24 vx-ml-2\" *ngIf=\"question?.isRequired\">*</span>\r\n </span>\r\n </div>\r\n <div class=\"question-details vx-fs-13 vx-paragraph-txt\" *ngIf=\"question?.hasDescription && question?.description?.trim().length > 0 \" [innerHTML]=\"question?.description\"></div>\r\n <div class=\"question-options\">\r\n <div class=\"textbox-group vx-mt-5\">\r\n <div class=\"input-group vx-d-flex vx-mb-2\" *ngIf=\"question?.hasDate\">\r\n <span class=\"label vx-bg-grey vx-label-txt vx-lh-24 vx-d-flex vx-tt-uppercase vx-fs-11 vx-text-center vx-p-2 vx-justify-center vx-align-center\"><span class=\"vx-d-block\" [appTooltip]=\"question?.date?.title==''?'Date Label':question?.date?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{question?.date?.title==''?'Date Label':question?.date?.title}}</span></span>\r\n <div class=\"date-time-area\">\r\n <i class=\"icons vx-fs-14 vx-paragraph-txt\"></i>\r\n <input class=\"datePicker\" (click)=\"openDatePicker()\" placeholder=\"Select Date\">\r\n <dp-date-picker #datePicker placeholder=\"Select Date\" (click)=\"openDatePicker()\" (click)=\"closeDatepicker()\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeDatepicker()\" *ngIf=\"datepickerOverlay\"></div>\r\n </div>\r\n </div>\r\n <div class=\"input-group vx-d-flex vx-mb-10\" *ngIf=\"question?.hasTime\">\r\n <span class=\"label vx-bg-grey vx-label-txt vx-lh-24 vx-d-flex vx-tt-uppercase vx-fs-11 vx-text-center vx-p-2 vx-justify-center vx-align-center\"><span class=\"vx-d-block\" [appTooltip]=\"question?.time?.title==''?'Time Label':question?.time?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{question?.time?.title==''?'Time Label':question?.time?.title}}</span></span>\r\n <div class=\"date-time-area\">\r\n <input aria-label=\"12hr format\" [ngxTimepicker]=\"timeOnly\" readonly placeholder=\"Select Time\" />\r\n <i class=\"icons vx-fs-14 vx-paragraph-txt\"></i>\r\n <ngx-material-timepicker #timeOnly></ngx-material-timepicker>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"question-quick-settings\">\r\n <app-quick-settings [question]=\"question\"></app-quick-settings>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .question-block{position:relative;margin-bottom:3rem}::ng-deep .question-head{padding-right:4rem}::ng-deep .question-head .count{min-width:1.5rem}::ng-deep .question-head .heading .required{position:relative;top:-.25rem}::ng-deep .question-details{padding-right:4rem;padding-left:2.5rem}::ng-deep .question-options{margin-left:2.5rem;margin-top:1.875rem}::ng-deep .question-options .textbox-group{display:block;max-width:31.25rem}::ng-deep .question-options .textbox-group .input-group{border:1px solid #F1F1F1;border-radius:.25rem;position:relative}::ng-deep .question-options .textbox-group .input-group .label{width:5.875rem}::ng-deep .question-options .textbox-group .input-group .label span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .question-options .textbox-group .input-group .date-time-area{width:calc(100% - 5.875rem);height:2.5rem;position:relative}::ng-deep .question-options .textbox-group .input-group .date-time-area input{background:transparent;border:none;border-radius:0;width:100%;height:100%;outline:none;cursor:pointer;margin:0;padding:8px;position:relative;z-index:1}::ng-deep .question-options .textbox-group .input-group .date-time-area input.datePicker{opacity:0}::ng-deep .question-options .textbox-group .input-group .date-time-area i{position:absolute;top:.75rem;right:.5rem}::ng-deep .question-options .textbox-group .input-group .date-time-area .overlay{z-index:2}::ng-deep .question-options .textbox-group .input-group .date-time-area dp-date-picker .dp-input-container input{top:-2.25rem;z-index:-1}::ng-deep .question-quick-settings{position:absolute;top:-.25rem;right:-3.75rem}::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: i3.NgxMaterialTimepickerComponent, selector: "ngx-material-timepicker", inputs: ["ESC", "hoursOnly", "ngxMaterialTimepickerTheme", "format", "minutesGap", "cancelBtnTmpl", "editableHintTmpl", "confirmBtnTmpl", "enableKeyboardInput", "preventOverlayClick", "disableAnimation", "appendToInput", "defaultTime", "timepickerClass", "theme", "min", "max"], outputs: ["timeSet", "opened", "closed", "hourSelected", "timeChanged"] }, { kind: "directive", type: i3.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "value", "min", "max", "ngxTimepicker", "disabled", "disableClick"] }, { kind: "component", type: i4.DatePickerComponent, selector: "dp-date-picker", inputs: ["mode", "placeholder", "disabled", "config", "displayDate", "theme", "minDate", "maxDate", "minTime", "maxTime"], outputs: ["open", "close", "onChange", "onGoToCurrent", "onLeftNav", "onRightNav", "onSelect"] }, { kind: "component", type: i5.QuickSettingsComponent, selector: "app-quick-settings", inputs: ["question"] }] });
|
|
25
25
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateTimeComponent, decorators: [{
|
|
26
26
|
type: Component,
|
|
27
|
-
args: [{ selector: 'app-date-time', template: "<div class=\"question-block\">\r\n <div class=\"question-head vx-d-flex vx-mb-4\">\r\n <span class=\"count vx-paragraph-txt vx-fs-20 vx-fw-400\">{{questionIndex}}.</span>\r\n <span class=\"heading vx-pl-3\">\r\n <span class=\"vx-fw-300 vx-label-txt vx-fs-20\" [innerHTML]=\"question?.title=='' ? 'Question' : question?.title\"></span>\r\n <span class=\"required vx-fw-400 vx-txt-red vx-fs-24 vx-ml-2\" *ngIf=\"question?.isRequired\">*</span>\r\n </span>\r\n </div>\r\n <div class=\"question-details vx-fs-13 vx-paragraph-txt\" *ngIf=\"question?.hasDescription && question?.description?.trim().length > 0 \" [innerHTML]=\"question?.description\"></div>\r\n <div class=\"question-options\">\r\n <div class=\"textbox-group vx-mt-5\">\r\n <div class=\"input-group vx-d-flex vx-mb-2\" *ngIf=\"question?.hasDate\">\r\n <span class=\"label vx-bg-grey vx-label-txt vx-lh-24 vx-d-flex vx-tt-uppercase vx-fs-11 vx-text-center vx-p-2 vx-justify-center vx-align-center\"><span class=\"vx-d-block\" [appTooltip]=\"question?.date?.title==''?'Date Label':question?.date?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{question?.date?.title==''?'Date Label':question?.date?.title}}</span></span>\r\n <div class=\"date-time-area\">\r\n <i class=\"icons vx-fs-14 vx-paragraph-txt\"></i>\r\n <input class=\"datePicker\" (click)=\"openDatePicker()\" placeholder=\"Select Date\">\r\n <dp-date-picker #datePicker placeholder=\"Select Date\" (click)=\"openDatePicker()\" (click)=\"closeDatepicker()\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeDatepicker()\" *ngIf=\"datepickerOverlay\"></div>\r\n </div>\r\n </div>\r\n <div class=\"input-group vx-d-flex vx-mb-10\" *ngIf=\"question?.hasTime\">\r\n <span class=\"label vx-bg-grey vx-label-txt vx-lh-24 vx-d-flex vx-tt-uppercase vx-fs-11 vx-text-center vx-p-2 vx-justify-center vx-align-center\"><span class=\"vx-d-block\" [appTooltip]=\"question?.time?.title==''?'Time Label':question?.time?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{question?.time?.title==''?'Time Label':question?.time?.title}}</span></span>\r\n <div class=\"date-time-area\">\r\n <input aria-label=\"12hr format\" [ngxTimepicker]=\"timeOnly\" readonly placeholder=\"Select Time\" />\r\n <i class=\"icons vx-fs-14 vx-paragraph-txt\"></i>\r\n <ngx-material-timepicker #timeOnly></ngx-material-timepicker>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"question-quick-settings\">\r\n <app-quick-settings [question]=\"question\"></app-quick-settings>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .question-block{position:relative;margin-bottom:3rem}::ng-deep .question-head{padding-right:4rem}::ng-deep .question-head .count{min-width:1.5rem}::ng-deep .question-head .heading .required{position:relative;top:-.25rem}::ng-deep .question-details{padding-right:4rem;padding-left:2.5rem}::ng-deep .question-options{margin-left:2.5rem;margin-top:1.875rem}::ng-deep .question-options .textbox-group{display:block;max-width:31.25rem}::ng-deep .question-options .textbox-group .input-group{border:1px solid #F1F1F1;border-radius:.25rem;position:relative}::ng-deep .question-options .textbox-group .input-group .label{width:5.875rem}::ng-deep .question-options .textbox-group .input-group .label span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .question-options .textbox-group .input-group .date-time-area{width:calc(100% - 5.875rem);height:2.5rem;position:relative}::ng-deep .question-options .textbox-group .input-group .date-time-area input{background:transparent;border:none;border-radius:0;width:100%;height:100%;outline:none;cursor:pointer;margin:0;padding:8px;position:relative;z-index:1}::ng-deep .question-options .textbox-group .input-group .date-time-area input.datePicker{opacity:0}::ng-deep .question-options .textbox-group .input-group .date-time-area i{position:absolute;top:.75rem;right:.5rem}::ng-deep .question-options .textbox-group .input-group .date-time-area .overlay{z-index:2}::ng-deep .question-options .textbox-group .input-group .date-time-area dp-date-picker .dp-input-container input{top:-2.25rem;z-index:-1}::ng-deep .question-quick-settings{position:absolute;top:-.25rem;right:-2.25rem}::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}\n"] }]
|
|
27
|
+
args: [{ selector: 'app-date-time', template: "<div class=\"question-block\">\r\n <div class=\"question-head vx-d-flex vx-mb-4\">\r\n <span class=\"count vx-paragraph-txt vx-fs-20 vx-fw-400\">{{questionIndex}}.</span>\r\n <span class=\"heading vx-pl-3\">\r\n <span class=\"vx-fw-300 vx-label-txt vx-fs-20\" [innerHTML]=\"question?.title=='' ? 'Question' : question?.title\"></span>\r\n <span class=\"required vx-fw-400 vx-txt-red vx-fs-24 vx-ml-2\" *ngIf=\"question?.isRequired\">*</span>\r\n </span>\r\n </div>\r\n <div class=\"question-details vx-fs-13 vx-paragraph-txt\" *ngIf=\"question?.hasDescription && question?.description?.trim().length > 0 \" [innerHTML]=\"question?.description\"></div>\r\n <div class=\"question-options\">\r\n <div class=\"textbox-group vx-mt-5\">\r\n <div class=\"input-group vx-d-flex vx-mb-2\" *ngIf=\"question?.hasDate\">\r\n <span class=\"label vx-bg-grey vx-label-txt vx-lh-24 vx-d-flex vx-tt-uppercase vx-fs-11 vx-text-center vx-p-2 vx-justify-center vx-align-center\"><span class=\"vx-d-block\" [appTooltip]=\"question?.date?.title==''?'Date Label':question?.date?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{question?.date?.title==''?'Date Label':question?.date?.title}}</span></span>\r\n <div class=\"date-time-area\">\r\n <i class=\"icons vx-fs-14 vx-paragraph-txt\"></i>\r\n <input class=\"datePicker\" (click)=\"openDatePicker()\" placeholder=\"Select Date\">\r\n <dp-date-picker #datePicker placeholder=\"Select Date\" (click)=\"openDatePicker()\" (click)=\"closeDatepicker()\"></dp-date-picker>\r\n <div class=\"overlay\" (click)=\"closeDatepicker()\" *ngIf=\"datepickerOverlay\"></div>\r\n </div>\r\n </div>\r\n <div class=\"input-group vx-d-flex vx-mb-10\" *ngIf=\"question?.hasTime\">\r\n <span class=\"label vx-bg-grey vx-label-txt vx-lh-24 vx-d-flex vx-tt-uppercase vx-fs-11 vx-text-center vx-p-2 vx-justify-center vx-align-center\"><span class=\"vx-d-block\" [appTooltip]=\"question?.time?.title==''?'Time Label':question?.time?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{question?.time?.title==''?'Time Label':question?.time?.title}}</span></span>\r\n <div class=\"date-time-area\">\r\n <input aria-label=\"12hr format\" [ngxTimepicker]=\"timeOnly\" readonly placeholder=\"Select Time\" />\r\n <i class=\"icons vx-fs-14 vx-paragraph-txt\"></i>\r\n <ngx-material-timepicker #timeOnly></ngx-material-timepicker>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div class=\"question-quick-settings\">\r\n <app-quick-settings [question]=\"question\"></app-quick-settings>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .question-block{position:relative;margin-bottom:3rem}::ng-deep .question-head{padding-right:4rem}::ng-deep .question-head .count{min-width:1.5rem}::ng-deep .question-head .heading .required{position:relative;top:-.25rem}::ng-deep .question-details{padding-right:4rem;padding-left:2.5rem}::ng-deep .question-options{margin-left:2.5rem;margin-top:1.875rem}::ng-deep .question-options .textbox-group{display:block;max-width:31.25rem}::ng-deep .question-options .textbox-group .input-group{border:1px solid #F1F1F1;border-radius:.25rem;position:relative}::ng-deep .question-options .textbox-group .input-group .label{width:5.875rem}::ng-deep .question-options .textbox-group .input-group .label span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .question-options .textbox-group .input-group .date-time-area{width:calc(100% - 5.875rem);height:2.5rem;position:relative}::ng-deep .question-options .textbox-group .input-group .date-time-area input{background:transparent;border:none;border-radius:0;width:100%;height:100%;outline:none;cursor:pointer;margin:0;padding:8px;position:relative;z-index:1}::ng-deep .question-options .textbox-group .input-group .date-time-area input.datePicker{opacity:0}::ng-deep .question-options .textbox-group .input-group .date-time-area i{position:absolute;top:.75rem;right:.5rem}::ng-deep .question-options .textbox-group .input-group .date-time-area .overlay{z-index:2}::ng-deep .question-options .textbox-group .input-group .date-time-area dp-date-picker .dp-input-container input{top:-2.25rem;z-index:-1}::ng-deep .question-quick-settings{position:absolute;top:-.25rem;right:-3.75rem}::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar,::ng-deep dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}::ng-deep dp-date-picker .dp-popup dp-day-calendar button,::ng-deep dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,::ng-deep dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,::ng-deep 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 dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}::ng-deep dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,::ng-deep dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}::ng-deep dp-date-picker .dp-open+div{position:fixed!important;inset:0!important;display:flex;justify-content:center;align-items:center;z-index:99;pointer-events:none;background:rgba(0,0,0,.3)}\n"] }]
|
|
28
28
|
}], ctorParameters: function () { return []; }, propDecorators: { question: [{
|
|
29
29
|
type: Input
|
|
30
30
|
}], questionIndex: [{
|
package/esm2020/lib/sharedComponents/assessment-preview/file-upload/file-upload.component.mjs
CHANGED
|
@@ -9,10 +9,10 @@ export class FileUploadComponent {
|
|
|
9
9
|
}
|
|
10
10
|
}
|
|
11
11
|
FileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12
|
-
FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FileUploadComponent, selector: "app-file-upload", inputs: { question: "question", questionIndex: "questionIndex" }, ngImport: i0, template: "<div class=\"question-block\">\r\n <div class=\"question-head vx-d-flex vx-mb-4\">\r\n <span class=\"count vx-paragraph-txt vx-fs-20 vx-fw-400\">{{questionIndex}}.</span>\r\n <span class=\"heading vx-pl-3\">\r\n <span class=\"vx-fw-300 vx-label-txt vx-fs-20\" [innerHTML]=\"question?.title=='' ? 'Question' : question?.title\">How long have you been a customer of our product have you been a customer of our product?</span>\r\n <span class=\"required vx-fw-400 vx-txt-red vx-fs-24 vx-ml-2\" *ngIf=\"question?.isRequired\">*</span>\r\n </span>\r\n </div>\r\n <div class=\"question-details vx-fs-13 vx-paragraph-txt\" *ngIf=\"question?.hasDescription && question?.description.trim().length > 0 \" [innerHTML]=\"question?.description\"></div>\r\n <div class=\"question-options\" >\r\n <div class=\"custom-file-upload vx-d-flex vx-align-center vx-mt-5 vx-p-1\">\r\n <input type=\"file\">\r\n <span class=\"value vx-fs-11 vx-label-txt vx-d-block vx-pl-2\">Select file</span>\r\n <span class=\"button vx-d-flex vx-align-center vx-justify-center vx-txt-white vx-bg-blue vx-fs-12 vx-tt-uppercase\">Browse</span>\r\n </div>\r\n <ul class=\"file-list vx-p-0 vx-pt-5 vx-m-0\" *ngIf=\"false\">\r\n <li class=\"file vx-pb-1\">\r\n <div class=\"file-box vx-d-flex vx-align-center vx-pt-2 vx-pb-2\">\r\n <span class=\"file pdf\">\r\n <i class=\"icons\"></i>\r\n <span class=\"format\">pdf</span>\r\n </span>\r\n <div class=\"file-name vx-fs-12 vx-label-txt\" [appTooltip]=\"'Tooltip.pdf'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">file-name.pdf</div>\r\n <button class=\"delete-btn vx-fs-14 vx-txt-red vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"><i class=\"icons vx-ml-3\"></i></button>\r\n <div class=\"line-progress\">\r\n <div class=\"line-progress-bar\"></div>\r\n </div>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n <div class=\"question-quick-settings\">\r\n <app-quick-settings [question]=\"question\"></app-quick-settings>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .question-block{position:relative;margin-bottom:3rem}::ng-deep .question-head{padding-right:4rem}::ng-deep .question-head .count{min-width:1.5rem}::ng-deep .question-head .heading .required{position:relative;top:-.25rem}::ng-deep .question-details{padding-right:4rem;padding-left:2.5rem}::ng-deep .question-options{margin-left:2.5rem;margin-top:1.875rem}::ng-deep .question-options .custom-file-upload{position:relative;max-width:25rem;width:100%;border:1px solid #DBDBDB;box-shadow:0 0 10px #f1f1f1;height:2.5rem;border-radius:.25rem}::ng-deep .question-options .custom-file-upload input{position:absolute;top:0;right:0;height:100%;width:100%;opacity:0;cursor:pointer;z-index:1}::ng-deep .question-options .custom-file-upload span.value{width:calc(100% - 6.25rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .question-options .custom-file-upload span.button{height:1.875rem;width:6.25rem;border-radius:.25rem}::ng-deep .question-options ul.file-list{list-style:none;width:37.5rem}::ng-deep .question-options ul.file-list li.file .file-box{border-bottom:1px solid #F1F1F1;position:relative}::ng-deep .question-options ul.file-list li.file .file-box .file-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:calc(100% - 1.25rem)}::ng-deep .question-options ul.file-list li.file .file-box button.delete-btn{background:transparent;border:none;border-radius:0}::ng-deep .question-options ul.file-list li.file .file-box .line-progress{left:1.625rem;top:auto;bottom:.5rem;width:92%}::ng-deep .question-quick-settings{position:absolute;top:-.25rem;right:-
|
|
12
|
+
FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FileUploadComponent, selector: "app-file-upload", inputs: { question: "question", questionIndex: "questionIndex" }, ngImport: i0, template: "<div class=\"question-block\">\r\n <div class=\"question-head vx-d-flex vx-mb-4\">\r\n <span class=\"count vx-paragraph-txt vx-fs-20 vx-fw-400\">{{questionIndex}}.</span>\r\n <span class=\"heading vx-pl-3\">\r\n <span class=\"vx-fw-300 vx-label-txt vx-fs-20\" [innerHTML]=\"question?.title=='' ? 'Question' : question?.title\">How long have you been a customer of our product have you been a customer of our product?</span>\r\n <span class=\"required vx-fw-400 vx-txt-red vx-fs-24 vx-ml-2\" *ngIf=\"question?.isRequired\">*</span>\r\n </span>\r\n </div>\r\n <div class=\"question-details vx-fs-13 vx-paragraph-txt\" *ngIf=\"question?.hasDescription && question?.description.trim().length > 0 \" [innerHTML]=\"question?.description\"></div>\r\n <div class=\"question-options\" >\r\n <div class=\"custom-file-upload vx-d-flex vx-align-center vx-mt-5 vx-p-1\">\r\n <input type=\"file\">\r\n <span class=\"value vx-fs-11 vx-label-txt vx-d-block vx-pl-2\">Select file</span>\r\n <span class=\"button vx-d-flex vx-align-center vx-justify-center vx-txt-white vx-bg-blue vx-fs-12 vx-tt-uppercase\">Browse</span>\r\n </div>\r\n <ul class=\"file-list vx-p-0 vx-pt-5 vx-m-0\" *ngIf=\"false\">\r\n <li class=\"file vx-pb-1\">\r\n <div class=\"file-box vx-d-flex vx-align-center vx-pt-2 vx-pb-2\">\r\n <span class=\"file pdf\">\r\n <i class=\"icons\"></i>\r\n <span class=\"format\">pdf</span>\r\n </span>\r\n <div class=\"file-name vx-fs-12 vx-label-txt\" [appTooltip]=\"'Tooltip.pdf'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">file-name.pdf</div>\r\n <button class=\"delete-btn vx-fs-14 vx-txt-red vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"><i class=\"icons vx-ml-3\"></i></button>\r\n <div class=\"line-progress\">\r\n <div class=\"line-progress-bar\"></div>\r\n </div>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n <div class=\"question-quick-settings\">\r\n <app-quick-settings [question]=\"question\"></app-quick-settings>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .question-block{position:relative;margin-bottom:3rem}::ng-deep .question-head{padding-right:4rem}::ng-deep .question-head .count{min-width:1.5rem}::ng-deep .question-head .heading .required{position:relative;top:-.25rem}::ng-deep .question-details{padding-right:4rem;padding-left:2.5rem}::ng-deep .question-options{margin-left:2.5rem;margin-top:1.875rem}::ng-deep .question-options .custom-file-upload{position:relative;max-width:25rem;width:100%;border:1px solid #DBDBDB;box-shadow:0 0 10px #f1f1f1;height:2.5rem;border-radius:.25rem}::ng-deep .question-options .custom-file-upload input{position:absolute;top:0;right:0;height:100%;width:100%;opacity:0;cursor:pointer;z-index:1}::ng-deep .question-options .custom-file-upload span.value{width:calc(100% - 6.25rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .question-options .custom-file-upload span.button{height:1.875rem;width:6.25rem;border-radius:.25rem}::ng-deep .question-options ul.file-list{list-style:none;width:37.5rem}::ng-deep .question-options ul.file-list li.file .file-box{border-bottom:1px solid #F1F1F1;position:relative}::ng-deep .question-options ul.file-list li.file .file-box .file-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:calc(100% - 1.25rem)}::ng-deep .question-options ul.file-list li.file .file-box button.delete-btn{background:transparent;border:none;border-radius:0}::ng-deep .question-options ul.file-list li.file .file-box .line-progress{left:1.625rem;top:auto;bottom:.5rem;width:92%}::ng-deep .question-quick-settings{position:absolute;top:-.25rem;right:-3.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { kind: "component", type: i3.QuickSettingsComponent, selector: "app-quick-settings", inputs: ["question"] }] });
|
|
13
13
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
14
14
|
type: Component,
|
|
15
|
-
args: [{ selector: 'app-file-upload', template: "<div class=\"question-block\">\r\n <div class=\"question-head vx-d-flex vx-mb-4\">\r\n <span class=\"count vx-paragraph-txt vx-fs-20 vx-fw-400\">{{questionIndex}}.</span>\r\n <span class=\"heading vx-pl-3\">\r\n <span class=\"vx-fw-300 vx-label-txt vx-fs-20\" [innerHTML]=\"question?.title=='' ? 'Question' : question?.title\">How long have you been a customer of our product have you been a customer of our product?</span>\r\n <span class=\"required vx-fw-400 vx-txt-red vx-fs-24 vx-ml-2\" *ngIf=\"question?.isRequired\">*</span>\r\n </span>\r\n </div>\r\n <div class=\"question-details vx-fs-13 vx-paragraph-txt\" *ngIf=\"question?.hasDescription && question?.description.trim().length > 0 \" [innerHTML]=\"question?.description\"></div>\r\n <div class=\"question-options\" >\r\n <div class=\"custom-file-upload vx-d-flex vx-align-center vx-mt-5 vx-p-1\">\r\n <input type=\"file\">\r\n <span class=\"value vx-fs-11 vx-label-txt vx-d-block vx-pl-2\">Select file</span>\r\n <span class=\"button vx-d-flex vx-align-center vx-justify-center vx-txt-white vx-bg-blue vx-fs-12 vx-tt-uppercase\">Browse</span>\r\n </div>\r\n <ul class=\"file-list vx-p-0 vx-pt-5 vx-m-0\" *ngIf=\"false\">\r\n <li class=\"file vx-pb-1\">\r\n <div class=\"file-box vx-d-flex vx-align-center vx-pt-2 vx-pb-2\">\r\n <span class=\"file pdf\">\r\n <i class=\"icons\"></i>\r\n <span class=\"format\">pdf</span>\r\n </span>\r\n <div class=\"file-name vx-fs-12 vx-label-txt\" [appTooltip]=\"'Tooltip.pdf'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">file-name.pdf</div>\r\n <button class=\"delete-btn vx-fs-14 vx-txt-red vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"><i class=\"icons vx-ml-3\"></i></button>\r\n <div class=\"line-progress\">\r\n <div class=\"line-progress-bar\"></div>\r\n </div>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n <div class=\"question-quick-settings\">\r\n <app-quick-settings [question]=\"question\"></app-quick-settings>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .question-block{position:relative;margin-bottom:3rem}::ng-deep .question-head{padding-right:4rem}::ng-deep .question-head .count{min-width:1.5rem}::ng-deep .question-head .heading .required{position:relative;top:-.25rem}::ng-deep .question-details{padding-right:4rem;padding-left:2.5rem}::ng-deep .question-options{margin-left:2.5rem;margin-top:1.875rem}::ng-deep .question-options .custom-file-upload{position:relative;max-width:25rem;width:100%;border:1px solid #DBDBDB;box-shadow:0 0 10px #f1f1f1;height:2.5rem;border-radius:.25rem}::ng-deep .question-options .custom-file-upload input{position:absolute;top:0;right:0;height:100%;width:100%;opacity:0;cursor:pointer;z-index:1}::ng-deep .question-options .custom-file-upload span.value{width:calc(100% - 6.25rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .question-options .custom-file-upload span.button{height:1.875rem;width:6.25rem;border-radius:.25rem}::ng-deep .question-options ul.file-list{list-style:none;width:37.5rem}::ng-deep .question-options ul.file-list li.file .file-box{border-bottom:1px solid #F1F1F1;position:relative}::ng-deep .question-options ul.file-list li.file .file-box .file-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:calc(100% - 1.25rem)}::ng-deep .question-options ul.file-list li.file .file-box button.delete-btn{background:transparent;border:none;border-radius:0}::ng-deep .question-options ul.file-list li.file .file-box .line-progress{left:1.625rem;top:auto;bottom:.5rem;width:92%}::ng-deep .question-quick-settings{position:absolute;top:-.25rem;right:-
|
|
15
|
+
args: [{ selector: 'app-file-upload', template: "<div class=\"question-block\">\r\n <div class=\"question-head vx-d-flex vx-mb-4\">\r\n <span class=\"count vx-paragraph-txt vx-fs-20 vx-fw-400\">{{questionIndex}}.</span>\r\n <span class=\"heading vx-pl-3\">\r\n <span class=\"vx-fw-300 vx-label-txt vx-fs-20\" [innerHTML]=\"question?.title=='' ? 'Question' : question?.title\">How long have you been a customer of our product have you been a customer of our product?</span>\r\n <span class=\"required vx-fw-400 vx-txt-red vx-fs-24 vx-ml-2\" *ngIf=\"question?.isRequired\">*</span>\r\n </span>\r\n </div>\r\n <div class=\"question-details vx-fs-13 vx-paragraph-txt\" *ngIf=\"question?.hasDescription && question?.description.trim().length > 0 \" [innerHTML]=\"question?.description\"></div>\r\n <div class=\"question-options\" >\r\n <div class=\"custom-file-upload vx-d-flex vx-align-center vx-mt-5 vx-p-1\">\r\n <input type=\"file\">\r\n <span class=\"value vx-fs-11 vx-label-txt vx-d-block vx-pl-2\">Select file</span>\r\n <span class=\"button vx-d-flex vx-align-center vx-justify-center vx-txt-white vx-bg-blue vx-fs-12 vx-tt-uppercase\">Browse</span>\r\n </div>\r\n <ul class=\"file-list vx-p-0 vx-pt-5 vx-m-0\" *ngIf=\"false\">\r\n <li class=\"file vx-pb-1\">\r\n <div class=\"file-box vx-d-flex vx-align-center vx-pt-2 vx-pb-2\">\r\n <span class=\"file pdf\">\r\n <i class=\"icons\"></i>\r\n <span class=\"format\">pdf</span>\r\n </span>\r\n <div class=\"file-name vx-fs-12 vx-label-txt\" [appTooltip]=\"'Tooltip.pdf'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">file-name.pdf</div>\r\n <button class=\"delete-btn vx-fs-14 vx-txt-red vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-justify-center\"><i class=\"icons vx-ml-3\"></i></button>\r\n <div class=\"line-progress\">\r\n <div class=\"line-progress-bar\"></div>\r\n </div>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n <div class=\"question-quick-settings\">\r\n <app-quick-settings [question]=\"question\"></app-quick-settings>\r\n </div>\r\n</div>", styles: ["@import\"https://cdn.v-comply.com/design-system/css/icons/icons.css\";@import\"https://cdn.v-comply.com/design-system/css/mixin/mixin.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .question-block{position:relative;margin-bottom:3rem}::ng-deep .question-head{padding-right:4rem}::ng-deep .question-head .count{min-width:1.5rem}::ng-deep .question-head .heading .required{position:relative;top:-.25rem}::ng-deep .question-details{padding-right:4rem;padding-left:2.5rem}::ng-deep .question-options{margin-left:2.5rem;margin-top:1.875rem}::ng-deep .question-options .custom-file-upload{position:relative;max-width:25rem;width:100%;border:1px solid #DBDBDB;box-shadow:0 0 10px #f1f1f1;height:2.5rem;border-radius:.25rem}::ng-deep .question-options .custom-file-upload input{position:absolute;top:0;right:0;height:100%;width:100%;opacity:0;cursor:pointer;z-index:1}::ng-deep .question-options .custom-file-upload span.value{width:calc(100% - 6.25rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::ng-deep .question-options .custom-file-upload span.button{height:1.875rem;width:6.25rem;border-radius:.25rem}::ng-deep .question-options ul.file-list{list-style:none;width:37.5rem}::ng-deep .question-options ul.file-list li.file .file-box{border-bottom:1px solid #F1F1F1;position:relative}::ng-deep .question-options ul.file-list li.file .file-box .file-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:calc(100% - 1.25rem)}::ng-deep .question-options ul.file-list li.file .file-box button.delete-btn{background:transparent;border:none;border-radius:0}::ng-deep .question-options ul.file-list li.file .file-box .line-progress{left:1.625rem;top:auto;bottom:.5rem;width:92%}::ng-deep .question-quick-settings{position:absolute;top:-.25rem;right:-3.75rem}\n"] }]
|
|
16
16
|
}], ctorParameters: function () { return []; }, propDecorators: { question: [{
|
|
17
17
|
type: Input
|
|
18
18
|
}], questionIndex: [{
|