vcomply-workflow-engine 3.5.0 → 3.5.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.
Files changed (10) hide show
  1. package/esm2020/lib/constants/time.constants.mjs +2 -2
  2. package/esm2020/lib/sharedComponents/assessment-editor/components/logic-questions/logic-date-time/logic-date-time.component.mjs +1 -1
  3. package/esm2020/lib/sharedComponents/assessment-editor/components/preview/preview-date-time/preview-date-time.component.mjs +1 -1
  4. package/esm2020/lib/sharedComponents/assessment-preview/date-time/date-time.component.mjs +1 -1
  5. package/esm2020/lib/workflow-compliance/workflow-compliance.component.mjs +1 -1
  6. package/fesm2015/vcomply-workflow-engine.mjs +5 -5
  7. package/fesm2015/vcomply-workflow-engine.mjs.map +1 -1
  8. package/fesm2020/vcomply-workflow-engine.mjs +5 -5
  9. package/fesm2020/vcomply-workflow-engine.mjs.map +1 -1
  10. package/package.json +2 -1
package/esm2020/lib/constants/time.constants.mjs CHANGED
@@ -1,3 +1,3 @@
1
- export const DEFAULT_TIME = '11:30 pm';
1
+ export const DEFAULT_TIME = '11:30 PM';
2
2
  export const DEFAULT_24HR = '23:30:00';
3
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGltZS5jb25zdGFudHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92eC13b3JrZmxvdy1lbmdpbmUvc3JjL2xpYi9jb25zdGFudHMvdGltZS5jb25zdGFudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFBTSxDQUFDLE1BQU0sWUFBWSxHQUFXLFVBQVUsQ0FBQztBQUMvQyxNQUFNLENBQUMsTUFBTSxZQUFZLEdBQVcsVUFBVSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGNvbnN0IERFRkFVTFRfVElNRTogc3RyaW5nID0gJzExOjMwIHBtJztcclxuZXhwb3J0IGNvbnN0IERFRkFVTFRfMjRIUjogc3RyaW5nID0gJzIzOjMwOjAwJztcclxuIl19
3
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGltZS5jb25zdGFudHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92eC13b3JrZmxvdy1lbmdpbmUvc3JjL2xpYi9jb25zdGFudHMvdGltZS5jb25zdGFudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFBTSxDQUFDLE1BQU0sWUFBWSxHQUFXLFVBQVUsQ0FBQztBQUMvQyxNQUFNLENBQUMsTUFBTSxZQUFZLEdBQVcsVUFBVSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGNvbnN0IERFRkFVTFRfVElNRTogc3RyaW5nID0gJzExOjMwIFBNJztcclxuZXhwb3J0IGNvbnN0IERFRkFVTFRfMjRIUjogc3RyaW5nID0gJzIzOjMwOjAwJztcclxuIl19
package/esm2020/lib/sharedComponents/assessment-editor/components/logic-questions/logic-date-time/logic-date-time.component.mjs CHANGED
@@ -26,7 +26,7 @@ export class LogicDateTimeComponent {
26
26
  }
27
27
  }
28
28
  LogicDateTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LogicDateTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
29
- LogicDateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LogicDateTimeComponent, selector: "app-logic-date-time", inputs: { question: "question" }, outputs: { changeEvent: "changeEvent" }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }], ngImport: i0, template: "<div class=\"logic-date-time vx-mb-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-lh-24 vx-d-flex vx-text-center vx-p-2 vx-justify-center vx-align-center\">\r\n <span class=\"value vx-fs-11 vx-label-txt vx-tt-uppercase\" [appTooltip]=\"'Date of birth'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{question?.date?.title ? question?.date?.title :'Date' }}</span>\r\n </span>\r\n <div class=\"date-time-area\">\r\n <i class=\"icons vx-fs-14 vx-paragraph-txt\">&#xe996;</i>\r\n <input class=\"datePicker\" (click)=\"openDatePicker()\" placeholder=\"Enter Date\">\r\n <dp-date-picker (onChange)=\"dateChanged($event)\" [(ngModel)]=\"question.date.value\" #datePicker [config]=\"{disableKeypress: true,format: 'DD MMM YYYY'}\" 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-lh-24 vx-d-flex vx-text-center vx-p-2 vx-justify-center vx-align-center\">\r\n <span class=\"value vx-fs-11 vx-label-txt vx-tt-uppercase\" [appTooltip]=\"'Time of birth'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{question?.time?.title ? question?.time?.title :'Time' }}</span>\r\n </span>\r\n <div class=\"date-time-area\">\r\n <input aria-label=\"12hr format\" [ngxTimepicker]=\"timeOnly\" readonly placeholder=\"Enter Time\" [(ngModel)]=\"question.time.value\" />\r\n <i class=\"icons vx-fs-14 vx-paragraph-txt\">&#xe955;</i>\r\n <ngx-material-timepicker #timeOnly></ngx-material-timepicker>\r\n </div>\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/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .logic-date-time{display:block;max-width:37.5rem}::ng-deep .logic-date-time .input-group{border:1px solid #F1F1F1;border-radius:.25rem;position:relative}::ng-deep .logic-date-time .input-group .label{width:5.875rem}::ng-deep .logic-date-time .input-group .label .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%}::ng-deep .logic-date-time .input-group .date-time-area{width:calc(100% - 5.875rem);height:2.5rem;position:relative}::ng-deep .logic-date-time .input-group .date-time-area input{background:transparent;border:none;border-radius:0;font-size:12px;width:100%;height:100%;outline:none;cursor:pointer;margin:0;padding:8px;position:relative;z-index:1}::ng-deep .logic-date-time .input-group .date-time-area input::placeholder{color:#747576;opacity:1}::ng-deep .logic-date-time .input-group .date-time-area input.datePicker{opacity:0}::ng-deep .logic-date-time .input-group .date-time-area i{position:absolute;top:.75rem;right:.5rem}::ng-deep .logic-date-time .input-group .date-time-area .overlay{z-index:2}::ng-deep dp-date-picker input.dp-picker-input{opacity:1;top:-54px;font-size:11px;color:#161b2f}::ng-deep dp-date-picker input.dp-picker-input::placeholder{color:#747576;opacity:1}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { 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.NgxMaterialTimepickerComponent, selector: "ngx-material-timepicker", inputs: ["cancelBtnTmpl", "editableHintTmpl", "confirmBtnTmpl", "ESC", "enableKeyboardInput", "preventOverlayClick", "disableAnimation", "appendToInput", "hoursOnly", "defaultTime", "timepickerClass", "theme", "min", "max", "ngxMaterialTimepickerTheme", "format", "minutesGap"], outputs: ["timeSet", "opened", "closed", "hourSelected", "timeChanged"] }, { kind: "directive", type: i5.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "min", "max", "ngxTimepicker", "value", "disabled", "disableClick"] }] });
29
+ LogicDateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LogicDateTimeComponent, selector: "app-logic-date-time", inputs: { question: "question" }, outputs: { changeEvent: "changeEvent" }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }], ngImport: i0, template: "<div class=\"logic-date-time vx-mb-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-lh-24 vx-d-flex vx-text-center vx-p-2 vx-justify-center vx-align-center\">\r\n <span class=\"value vx-fs-11 vx-label-txt vx-tt-uppercase\" [appTooltip]=\"'Date of birth'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{question?.date?.title ? question?.date?.title :'Date' }}</span>\r\n </span>\r\n <div class=\"date-time-area\">\r\n <i class=\"icons vx-fs-14 vx-paragraph-txt\">&#xe996;</i>\r\n <input class=\"datePicker\" (click)=\"openDatePicker()\" placeholder=\"Enter Date\">\r\n <dp-date-picker (onChange)=\"dateChanged($event)\" [(ngModel)]=\"question.date.value\" #datePicker [config]=\"{disableKeypress: true,format: 'DD MMM YYYY'}\" 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-lh-24 vx-d-flex vx-text-center vx-p-2 vx-justify-center vx-align-center\">\r\n <span class=\"value vx-fs-11 vx-label-txt vx-tt-uppercase\" [appTooltip]=\"'Time of birth'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{question?.time?.title ? question?.time?.title :'Time' }}</span>\r\n </span>\r\n <div class=\"date-time-area\">\r\n <input aria-label=\"12hr format\" [ngxTimepicker]=\"timeOnly\" readonly placeholder=\"Enter Time\" [(ngModel)]=\"question.time.value\" />\r\n <i class=\"icons vx-fs-14 vx-paragraph-txt\">&#xe955;</i>\r\n <ngx-material-timepicker #timeOnly></ngx-material-timepicker>\r\n </div>\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/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .logic-date-time{display:block;max-width:37.5rem}::ng-deep .logic-date-time .input-group{border:1px solid #F1F1F1;border-radius:.25rem;position:relative}::ng-deep .logic-date-time .input-group .label{width:5.875rem}::ng-deep .logic-date-time .input-group .label .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%}::ng-deep .logic-date-time .input-group .date-time-area{width:calc(100% - 5.875rem);height:2.5rem;position:relative}::ng-deep .logic-date-time .input-group .date-time-area input{background:transparent;border:none;border-radius:0;font-size:12px;width:100%;height:100%;outline:none;cursor:pointer;margin:0;padding:8px;position:relative;z-index:1}::ng-deep .logic-date-time .input-group .date-time-area input::placeholder{color:#747576;opacity:1}::ng-deep .logic-date-time .input-group .date-time-area input.datePicker{opacity:0}::ng-deep .logic-date-time .input-group .date-time-area i{position:absolute;top:.75rem;right:.5rem}::ng-deep .logic-date-time .input-group .date-time-area .overlay{z-index:2}::ng-deep dp-date-picker input.dp-picker-input{opacity:1;top:-54px;font-size:11px;color:#161b2f}::ng-deep dp-date-picker input.dp-picker-input::placeholder{color:#747576;opacity:1}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.ToolTipDirective, selector: "[appTooltip]", inputs: ["appTooltip", "placement", "type", "tooltipMandatory", "showTooltip", "animate"] }, { 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.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: i5.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "value", "min", "max", "ngxTimepicker", "disabled", "disableClick"] }] });
30
30
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LogicDateTimeComponent, decorators: [{
31
31
  type: Component,
32
32
  args: [{ selector: 'app-logic-date-time', template: "<div class=\"logic-date-time vx-mb-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-lh-24 vx-d-flex vx-text-center vx-p-2 vx-justify-center vx-align-center\">\r\n <span class=\"value vx-fs-11 vx-label-txt vx-tt-uppercase\" [appTooltip]=\"'Date of birth'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{question?.date?.title ? question?.date?.title :'Date' }}</span>\r\n </span>\r\n <div class=\"date-time-area\">\r\n <i class=\"icons vx-fs-14 vx-paragraph-txt\">&#xe996;</i>\r\n <input class=\"datePicker\" (click)=\"openDatePicker()\" placeholder=\"Enter Date\">\r\n <dp-date-picker (onChange)=\"dateChanged($event)\" [(ngModel)]=\"question.date.value\" #datePicker [config]=\"{disableKeypress: true,format: 'DD MMM YYYY'}\" 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-lh-24 vx-d-flex vx-text-center vx-p-2 vx-justify-center vx-align-center\">\r\n <span class=\"value vx-fs-11 vx-label-txt vx-tt-uppercase\" [appTooltip]=\"'Time of birth'\" placement=\"bottom-left\" delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{question?.time?.title ? question?.time?.title :'Time' }}</span>\r\n </span>\r\n <div class=\"date-time-area\">\r\n <input aria-label=\"12hr format\" [ngxTimepicker]=\"timeOnly\" readonly placeholder=\"Enter Time\" [(ngModel)]=\"question.time.value\" />\r\n <i class=\"icons vx-fs-14 vx-paragraph-txt\">&#xe955;</i>\r\n <ngx-material-timepicker #timeOnly></ngx-material-timepicker>\r\n </div>\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/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .logic-date-time{display:block;max-width:37.5rem}::ng-deep .logic-date-time .input-group{border:1px solid #F1F1F1;border-radius:.25rem;position:relative}::ng-deep .logic-date-time .input-group .label{width:5.875rem}::ng-deep .logic-date-time .input-group .label .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%}::ng-deep .logic-date-time .input-group .date-time-area{width:calc(100% - 5.875rem);height:2.5rem;position:relative}::ng-deep .logic-date-time .input-group .date-time-area input{background:transparent;border:none;border-radius:0;font-size:12px;width:100%;height:100%;outline:none;cursor:pointer;margin:0;padding:8px;position:relative;z-index:1}::ng-deep .logic-date-time .input-group .date-time-area input::placeholder{color:#747576;opacity:1}::ng-deep .logic-date-time .input-group .date-time-area input.datePicker{opacity:0}::ng-deep .logic-date-time .input-group .date-time-area i{position:absolute;top:.75rem;right:.5rem}::ng-deep .logic-date-time .input-group .date-time-area .overlay{z-index:2}::ng-deep dp-date-picker input.dp-picker-input{opacity:1;top:-54px;font-size:11px;color:#161b2f}::ng-deep dp-date-picker input.dp-picker-input::placeholder{color:#747576;opacity:1}\n"] }]
package/esm2020/lib/sharedComponents/assessment-editor/components/preview/preview-date-time/preview-date-time.component.mjs CHANGED
@@ -20,7 +20,7 @@ export class PreviewDateTimeComponent {
20
20
  }
21
21
  }
22
22
  PreviewDateTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PreviewDateTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
23
- PreviewDateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PreviewDateTimeComponent, selector: "app-preview-date-time", inputs: { question: "question" }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }], ngImport: i0, template: "<div class=\"preview-list\">\r\n <div class=\"date-time 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-lh-24 vx-d-flex vx-text-center vx-p-2 vx-justify-center vx-align-center\">\r\n <span class=\"value vx-fs-11 vx-label-txt vx-tt-uppercase\" [appTooltip]=\"question?.date?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" \r\n [tooltipMandatory]=\"false\">{{question?.date?.title==''?'Date Label':question?.date?.title}}</span>\r\n </span>\r\n <div class=\"date-time-area\">\r\n <i class=\"icons vx-fs-14 vx-paragraph-txt\">&#xe996;</i>\r\n <input class=\"datePicker\" (click)=\"openDatePicker()\" placeholder=\"Enter Date\">\r\n <dp-date-picker [config]=\"{disableKeypress: true,format: 'DD MMM YYYY'}\" #datePicker placeholder=\"Select Date\" (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-lh-24 vx-d-flex vx-text-center vx-p-2 vx-justify-center vx-align-center\">\r\n <span class=\"value vx-fs-11 vx-label-txt vx-tt-uppercase\" [appTooltip]=\"question?.time?.title\" placement=\"bottom-left\" \r\n delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{question?.time?.title==''?'Time Label':question?.time?.title}}</span>\r\n </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\">&#xe955;</i>\r\n <ngx-material-timepicker #timeOnly></ngx-material-timepicker>\r\n </div>\r\n </div>\r\n \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/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .preview-list .date-time{display:block;max-width:37.5rem}::ng-deep .preview-list .date-time .input-group{border:1px solid #F1F1F1;border-radius:.25rem;position:relative}::ng-deep .preview-list .date-time .input-group .label{width:5.875rem}::ng-deep .preview-list .date-time .input-group .label .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%}::ng-deep .preview-list .date-time .input-group .date-time-area{width:calc(100% - 5.875rem);height:2.5rem;position:relative}::ng-deep .preview-list .date-time .input-group .date-time-area input{background:transparent;border:none;border-radius:0;font-size:12px;width:100%;height:100%;outline:none;cursor:pointer;margin:0;padding:8px;position:relative;z-index:1}::ng-deep .preview-list .date-time .input-group .date-time-area input.dp-picker-input{top:3px}::ng-deep .preview-list .date-time .input-group .date-time-area input::placeholder{color:#747576;opacity:1}::ng-deep .preview-list .date-time .input-group .date-time-area input.datePicker{opacity:0;position:absolute;z-index:2}::ng-deep .preview-list .date-time .input-group .date-time-area i{position:absolute;top:.75rem;right:.5rem}::ng-deep .preview-list .date-time .input-group .date-time-area .overlay{z-index:2}::ng-deep dp-date-picker input.dp-picker-input{opacity:1;top:-54px;font-size:11px;color:#161b2f}::ng-deep dp-date-picker input.dp-picker-input::placeholder{color:#747576;opacity:1}::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.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: i4.NgxMaterialTimepickerComponent, selector: "ngx-material-timepicker", inputs: ["cancelBtnTmpl", "editableHintTmpl", "confirmBtnTmpl", "ESC", "enableKeyboardInput", "preventOverlayClick", "disableAnimation", "appendToInput", "hoursOnly", "defaultTime", "timepickerClass", "theme", "min", "max", "ngxMaterialTimepickerTheme", "format", "minutesGap"], outputs: ["timeSet", "opened", "closed", "hourSelected", "timeChanged"] }, { kind: "directive", type: i4.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "min", "max", "ngxTimepicker", "value", "disabled", "disableClick"] }] });
23
+ PreviewDateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PreviewDateTimeComponent, selector: "app-preview-date-time", inputs: { question: "question" }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }], ngImport: i0, template: "<div class=\"preview-list\">\r\n <div class=\"date-time 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-lh-24 vx-d-flex vx-text-center vx-p-2 vx-justify-center vx-align-center\">\r\n <span class=\"value vx-fs-11 vx-label-txt vx-tt-uppercase\" [appTooltip]=\"question?.date?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" \r\n [tooltipMandatory]=\"false\">{{question?.date?.title==''?'Date Label':question?.date?.title}}</span>\r\n </span>\r\n <div class=\"date-time-area\">\r\n <i class=\"icons vx-fs-14 vx-paragraph-txt\">&#xe996;</i>\r\n <input class=\"datePicker\" (click)=\"openDatePicker()\" placeholder=\"Enter Date\">\r\n <dp-date-picker [config]=\"{disableKeypress: true,format: 'DD MMM YYYY'}\" #datePicker placeholder=\"Select Date\" (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-lh-24 vx-d-flex vx-text-center vx-p-2 vx-justify-center vx-align-center\">\r\n <span class=\"value vx-fs-11 vx-label-txt vx-tt-uppercase\" [appTooltip]=\"question?.time?.title\" placement=\"bottom-left\" \r\n delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{question?.time?.title==''?'Time Label':question?.time?.title}}</span>\r\n </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\">&#xe955;</i>\r\n <ngx-material-timepicker #timeOnly></ngx-material-timepicker>\r\n </div>\r\n </div>\r\n \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/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .preview-list .date-time{display:block;max-width:37.5rem}::ng-deep .preview-list .date-time .input-group{border:1px solid #F1F1F1;border-radius:.25rem;position:relative}::ng-deep .preview-list .date-time .input-group .label{width:5.875rem}::ng-deep .preview-list .date-time .input-group .label .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%}::ng-deep .preview-list .date-time .input-group .date-time-area{width:calc(100% - 5.875rem);height:2.5rem;position:relative}::ng-deep .preview-list .date-time .input-group .date-time-area input{background:transparent;border:none;border-radius:0;font-size:12px;width:100%;height:100%;outline:none;cursor:pointer;margin:0;padding:8px;position:relative;z-index:1}::ng-deep .preview-list .date-time .input-group .date-time-area input.dp-picker-input{top:3px}::ng-deep .preview-list .date-time .input-group .date-time-area input::placeholder{color:#747576;opacity:1}::ng-deep .preview-list .date-time .input-group .date-time-area input.datePicker{opacity:0;position:absolute;z-index:2}::ng-deep .preview-list .date-time .input-group .date-time-area i{position:absolute;top:.75rem;right:.5rem}::ng-deep .preview-list .date-time .input-group .date-time-area .overlay{z-index:2}::ng-deep dp-date-picker input.dp-picker-input{opacity:1;top:-54px;font-size:11px;color:#161b2f}::ng-deep dp-date-picker input.dp-picker-input::placeholder{color:#747576;opacity:1}::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.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: i4.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: i4.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "value", "min", "max", "ngxTimepicker", "disabled", "disableClick"] }] });
24
24
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PreviewDateTimeComponent, decorators: [{
25
25
  type: Component,
26
26
  args: [{ selector: 'app-preview-date-time', template: "<div class=\"preview-list\">\r\n <div class=\"date-time 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-lh-24 vx-d-flex vx-text-center vx-p-2 vx-justify-center vx-align-center\">\r\n <span class=\"value vx-fs-11 vx-label-txt vx-tt-uppercase\" [appTooltip]=\"question?.date?.title\" placement=\"bottom-left\" delay=\"0\" type=\"black\" \r\n [tooltipMandatory]=\"false\">{{question?.date?.title==''?'Date Label':question?.date?.title}}</span>\r\n </span>\r\n <div class=\"date-time-area\">\r\n <i class=\"icons vx-fs-14 vx-paragraph-txt\">&#xe996;</i>\r\n <input class=\"datePicker\" (click)=\"openDatePicker()\" placeholder=\"Enter Date\">\r\n <dp-date-picker [config]=\"{disableKeypress: true,format: 'DD MMM YYYY'}\" #datePicker placeholder=\"Select Date\" (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-lh-24 vx-d-flex vx-text-center vx-p-2 vx-justify-center vx-align-center\">\r\n <span class=\"value vx-fs-11 vx-label-txt vx-tt-uppercase\" [appTooltip]=\"question?.time?.title\" placement=\"bottom-left\" \r\n delay=\"0\" type=\"black\" [tooltipMandatory]=\"false\">{{question?.time?.title==''?'Time Label':question?.time?.title}}</span>\r\n </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\">&#xe955;</i>\r\n <ngx-material-timepicker #timeOnly></ngx-material-timepicker>\r\n </div>\r\n </div>\r\n \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/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-top.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-left.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin-right.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-top.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-left.css\";@import\"https://cdn.v-comply.com/design-system/css/padding/padding-right.css\";::ng-deep .preview-list .date-time{display:block;max-width:37.5rem}::ng-deep .preview-list .date-time .input-group{border:1px solid #F1F1F1;border-radius:.25rem;position:relative}::ng-deep .preview-list .date-time .input-group .label{width:5.875rem}::ng-deep .preview-list .date-time .input-group .label .value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%}::ng-deep .preview-list .date-time .input-group .date-time-area{width:calc(100% - 5.875rem);height:2.5rem;position:relative}::ng-deep .preview-list .date-time .input-group .date-time-area input{background:transparent;border:none;border-radius:0;font-size:12px;width:100%;height:100%;outline:none;cursor:pointer;margin:0;padding:8px;position:relative;z-index:1}::ng-deep .preview-list .date-time .input-group .date-time-area input.dp-picker-input{top:3px}::ng-deep .preview-list .date-time .input-group .date-time-area input::placeholder{color:#747576;opacity:1}::ng-deep .preview-list .date-time .input-group .date-time-area input.datePicker{opacity:0;position:absolute;z-index:2}::ng-deep .preview-list .date-time .input-group .date-time-area i{position:absolute;top:.75rem;right:.5rem}::ng-deep .preview-list .date-time .input-group .date-time-area .overlay{z-index:2}::ng-deep dp-date-picker input.dp-picker-input{opacity:1;top:-54px;font-size:11px;color:#161b2f}::ng-deep dp-date-picker input.dp-picker-input::placeholder{color:#747576;opacity:1}::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"] }]
package/esm2020/lib/sharedComponents/assessment-preview/date-time/date-time.component.mjs CHANGED
@@ -22,7 +22,7 @@ export class DateTimeComponent {
22
22
  }
23
23
  }
24
24
  DateTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
25
- 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 vx-mb-1 vx-p-4\">\r\n <div class=\"question-heading vx-pb-3 vx-mb-3\">\r\n <span\r\n class=\"count vx-fs-13 vx-fw-400 vx-label-txt vx-d-flex vx-align-center vx-justify-center\"\r\n >{{ questionIndex }}</span\r\n >\r\n <span class=\"heading\">\r\n <span\r\n [innerHTML]=\"question?.title == '' ? 'Question' : question?.title\"\r\n class=\"vx-fs-16 vx-label-txt vx-lh-6\"\r\n ></span>\r\n <span\r\n *ngIf=\"question?.isRequired\"\r\n class=\"required vx-fs-20 vx-fw-300 vx-ml-1\"\r\n >*</span\r\n >\r\n </span>\r\n </div>\r\n <div class=\"question-inner vx-d-flex vx-justify-between\">\r\n <div class=\"question-inner-inside\">\r\n <ng-container\r\n *ngIf=\"\r\n question?.hasDescription && question?.description?.trim().length > 0\r\n \"\r\n >\r\n <app-description-preview\r\n [questionIndex]=\"questionIndex\"\r\n [description]=\"question?.description\"\r\n ></app-description-preview>\r\n </ng-container>\r\n <div class=\"question-option\">\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\r\n 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\"\r\n ><span\r\n class=\"vx-d-block\"\r\n [appTooltip]=\"\r\n question?.date?.title == ''\r\n ? 'Date Label'\r\n : question?.date?.title\r\n \"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{\r\n question?.date?.title == \"\"\r\n ? \"Date Label\"\r\n : question?.date?.title\r\n }}</span\r\n ></span\r\n >\r\n <div class=\"date-time-area\">\r\n <i class=\"icons vx-fs-14 vx-paragraph-txt\">&#xe996;</i>\r\n <input\r\n class=\"datePicker\"\r\n (click)=\"openDatePicker()\"\r\n placeholder=\"Select Date\"\r\n />\r\n <dp-date-picker\r\n #datePicker\r\n placeholder=\"Select Date\"\r\n (click)=\"openDatePicker()\"\r\n (click)=\"closeDatepicker()\"\r\n ></dp-date-picker>\r\n <div\r\n class=\"overlay\"\r\n (click)=\"closeDatepicker()\"\r\n *ngIf=\"datepickerOverlay\"\r\n ></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\r\n 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\"\r\n ><span\r\n class=\"vx-d-block\"\r\n [appTooltip]=\"\r\n question?.time?.title == ''\r\n ? 'Time Label'\r\n : question?.time?.title\r\n \"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{\r\n question?.time?.title == \"\"\r\n ? \"Time Label\"\r\n : question?.time?.title\r\n }}</span\r\n ></span\r\n >\r\n <div class=\"date-time-area\">\r\n <input\r\n aria-label=\"12hr format\"\r\n [ngxTimepicker]=\"timeOnly\"\r\n readonly\r\n placeholder=\"Select Time\"\r\n />\r\n <i class=\"icons vx-fs-14 vx-paragraph-txt\">&#xe955;</i>\r\n <ngx-material-timepicker #timeOnly></ngx-material-timepicker>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"question-quickSettings\">\r\n <app-quick-settings [question]=\"question\"></app-quick-settings>\r\n </div>\r\n </div>\r\n</div>\r\n", 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{background:#f8f8f8;border-radius:.25rem;position:relative;min-height:12.5rem}::ng-deep .question-heading{border-bottom:1px solid #dbdbdb;position:relative}::ng-deep .question-heading .count{background:#dbdbdb;border-radius:50%;border:.5rem solid #fff;min-width:2.75rem;height:2.75rem;position:absolute;top:-.625rem;left:-3.25rem}::ng-deep .question-heading .heading .required{color:#c7381b;position:relative;top:-.25rem}::ng-deep .question-inner{position:relative}::ng-deep .question-inner-inside{padding-right:4rem}@media screen and (max-width: 667px){::ng-deep .question-inner-inside{padding-right:2.5rem!important;width:100%!important}}::ng-deep .question-option .textbox-group{display:block;max-width:31.25rem}::ng-deep .question-option .textbox-group .input-group{border:1px solid #f1f1f1;border-radius:.25rem;position:relative}::ng-deep .question-option .textbox-group .input-group .label{width:5.875rem}::ng-deep .question-option .textbox-group .input-group .label .date-time-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .question-option .textbox-group .input-group .date-time-area{background:#fff;border-radius:0 .25rem .25rem 0;width:calc(100% - 5.875rem);height:2.5rem;position:relative}::ng-deep .question-option .textbox-group .input-group .date-time-area input{font-family:Poppins,sans-serif!important;background:transparent;border:none;border-radius:0;font-size:11px!important;color:#747476!important;width:100%;height:100%;outline:none;cursor:pointer;margin:0;padding:8px;position:relative;z-index:1}::ng-deep .question-option .textbox-group .input-group .date-time-area input::placeholder{font-size:11px!important;color:#74757690!important;font-weight:400}::ng-deep .question-option .textbox-group .input-group .date-time-area i{position:absolute;top:.75rem;right:.5rem}::ng-deep .question-option .textbox-group .input-group .date-time-area .overlay{z-index:2}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker{width:100%}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper{padding:0}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{padding:0!important;position:relative!important;top:-.25rem!important;left:.5rem!important;z-index:1!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix input.preview-datepicker-input{color:#747576!important;width:87%!important;padding-left:0!important;font-size:11px!important;top:-.25rem!important;font-family:Poppins,sans-serif!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix input.preview-datepicker-input::placeholder{font-size:11px!important;color:#747576!important;font-weight:400!important;opacity:1!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix .mat-form-field-label-wrapper .mat-form-field-label span{font-size:11px!important;color:#74757690!important;font-family:Poppins,sans-serif!important;position:relative!important;top:-1px!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-suffix{position:absolute!important;height:2.5rem!important;top:-1px!important;z-index:2!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-suffix mat-datepicker-toggle button{height:2.5rem!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-suffix mat-datepicker-toggle button .mat-button-wrapper svg{width:1.125rem!important;position:relative!important;right:.375rem!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-underline,::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-subscript-wrapper{display:none!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker.mat-form-field-should-float .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix .mat-form-field-label-wrapper{display:none!important}::ng-deep .question-quickSettings{position:absolute;top:0;right:0}::ng-deep .mat-form-field-suffix{position:absolute;width:100%;height:45px;top:6px}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle{position:absolute;left:0;top:0;width:100%}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle.mat-datepicker-toggle-active{color:#1e5dd3}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle button{width:100%;text-align:left;height:70px;border-radius:0}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle button ::ng-deep .mat-button-focus-overlay{opacity:0;display:none}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle button ::ng-deep .mat-button-ripple.mat-ripple{display:none}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle button svg{width:25px!important;float:right}\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: ["cancelBtnTmpl", "editableHintTmpl", "confirmBtnTmpl", "ESC", "enableKeyboardInput", "preventOverlayClick", "disableAnimation", "appendToInput", "hoursOnly", "defaultTime", "timepickerClass", "theme", "min", "max", "ngxMaterialTimepickerTheme", "format", "minutesGap"], outputs: ["timeSet", "opened", "closed", "hourSelected", "timeChanged"] }, { kind: "directive", type: i3.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "min", "max", "ngxTimepicker", "value", "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"] }, { kind: "component", type: i6.DescriptionPreviewComponent, selector: "app-description-preview", inputs: ["questionIndex", "description"] }] });
25
+ 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 vx-mb-1 vx-p-4\">\r\n <div class=\"question-heading vx-pb-3 vx-mb-3\">\r\n <span\r\n class=\"count vx-fs-13 vx-fw-400 vx-label-txt vx-d-flex vx-align-center vx-justify-center\"\r\n >{{ questionIndex }}</span\r\n >\r\n <span class=\"heading\">\r\n <span\r\n [innerHTML]=\"question?.title == '' ? 'Question' : question?.title\"\r\n class=\"vx-fs-16 vx-label-txt vx-lh-6\"\r\n ></span>\r\n <span\r\n *ngIf=\"question?.isRequired\"\r\n class=\"required vx-fs-20 vx-fw-300 vx-ml-1\"\r\n >*</span\r\n >\r\n </span>\r\n </div>\r\n <div class=\"question-inner vx-d-flex vx-justify-between\">\r\n <div class=\"question-inner-inside\">\r\n <ng-container\r\n *ngIf=\"\r\n question?.hasDescription && question?.description?.trim().length > 0\r\n \"\r\n >\r\n <app-description-preview\r\n [questionIndex]=\"questionIndex\"\r\n [description]=\"question?.description\"\r\n ></app-description-preview>\r\n </ng-container>\r\n <div class=\"question-option\">\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\r\n 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\"\r\n ><span\r\n class=\"vx-d-block\"\r\n [appTooltip]=\"\r\n question?.date?.title == ''\r\n ? 'Date Label'\r\n : question?.date?.title\r\n \"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{\r\n question?.date?.title == \"\"\r\n ? \"Date Label\"\r\n : question?.date?.title\r\n }}</span\r\n ></span\r\n >\r\n <div class=\"date-time-area\">\r\n <i class=\"icons vx-fs-14 vx-paragraph-txt\">&#xe996;</i>\r\n <input\r\n class=\"datePicker\"\r\n (click)=\"openDatePicker()\"\r\n placeholder=\"Select Date\"\r\n />\r\n <dp-date-picker\r\n #datePicker\r\n placeholder=\"Select Date\"\r\n (click)=\"openDatePicker()\"\r\n (click)=\"closeDatepicker()\"\r\n ></dp-date-picker>\r\n <div\r\n class=\"overlay\"\r\n (click)=\"closeDatepicker()\"\r\n *ngIf=\"datepickerOverlay\"\r\n ></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\r\n 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\"\r\n ><span\r\n class=\"vx-d-block\"\r\n [appTooltip]=\"\r\n question?.time?.title == ''\r\n ? 'Time Label'\r\n : question?.time?.title\r\n \"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{\r\n question?.time?.title == \"\"\r\n ? \"Time Label\"\r\n : question?.time?.title\r\n }}</span\r\n ></span\r\n >\r\n <div class=\"date-time-area\">\r\n <input\r\n aria-label=\"12hr format\"\r\n [ngxTimepicker]=\"timeOnly\"\r\n readonly\r\n placeholder=\"Select Time\"\r\n />\r\n <i class=\"icons vx-fs-14 vx-paragraph-txt\">&#xe955;</i>\r\n <ngx-material-timepicker #timeOnly></ngx-material-timepicker>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"question-quickSettings\">\r\n <app-quick-settings [question]=\"question\"></app-quick-settings>\r\n </div>\r\n </div>\r\n</div>\r\n", 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{background:#f8f8f8;border-radius:.25rem;position:relative;min-height:12.5rem}::ng-deep .question-heading{border-bottom:1px solid #dbdbdb;position:relative}::ng-deep .question-heading .count{background:#dbdbdb;border-radius:50%;border:.5rem solid #fff;min-width:2.75rem;height:2.75rem;position:absolute;top:-.625rem;left:-3.25rem}::ng-deep .question-heading .heading .required{color:#c7381b;position:relative;top:-.25rem}::ng-deep .question-inner{position:relative}::ng-deep .question-inner-inside{padding-right:4rem}@media screen and (max-width: 667px){::ng-deep .question-inner-inside{padding-right:2.5rem!important;width:100%!important}}::ng-deep .question-option .textbox-group{display:block;max-width:31.25rem}::ng-deep .question-option .textbox-group .input-group{border:1px solid #f1f1f1;border-radius:.25rem;position:relative}::ng-deep .question-option .textbox-group .input-group .label{width:5.875rem}::ng-deep .question-option .textbox-group .input-group .label .date-time-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .question-option .textbox-group .input-group .date-time-area{background:#fff;border-radius:0 .25rem .25rem 0;width:calc(100% - 5.875rem);height:2.5rem;position:relative}::ng-deep .question-option .textbox-group .input-group .date-time-area input{font-family:Poppins,sans-serif!important;background:transparent;border:none;border-radius:0;font-size:11px!important;color:#747476!important;width:100%;height:100%;outline:none;cursor:pointer;margin:0;padding:8px;position:relative;z-index:1}::ng-deep .question-option .textbox-group .input-group .date-time-area input::placeholder{font-size:11px!important;color:#74757690!important;font-weight:400}::ng-deep .question-option .textbox-group .input-group .date-time-area i{position:absolute;top:.75rem;right:.5rem}::ng-deep .question-option .textbox-group .input-group .date-time-area .overlay{z-index:2}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker{width:100%}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper{padding:0}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{padding:0!important;position:relative!important;top:-.25rem!important;left:.5rem!important;z-index:1!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix input.preview-datepicker-input{color:#747576!important;width:87%!important;padding-left:0!important;font-size:11px!important;top:-.25rem!important;font-family:Poppins,sans-serif!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix input.preview-datepicker-input::placeholder{font-size:11px!important;color:#747576!important;font-weight:400!important;opacity:1!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix .mat-form-field-label-wrapper .mat-form-field-label span{font-size:11px!important;color:#74757690!important;font-family:Poppins,sans-serif!important;position:relative!important;top:-1px!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-suffix{position:absolute!important;height:2.5rem!important;top:-1px!important;z-index:2!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-suffix mat-datepicker-toggle button{height:2.5rem!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-suffix mat-datepicker-toggle button .mat-button-wrapper svg{width:1.125rem!important;position:relative!important;right:.375rem!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-underline,::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-subscript-wrapper{display:none!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker.mat-form-field-should-float .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix .mat-form-field-label-wrapper{display:none!important}::ng-deep .question-quickSettings{position:absolute;top:0;right:0}::ng-deep .mat-form-field-suffix{position:absolute;width:100%;height:45px;top:6px}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle{position:absolute;left:0;top:0;width:100%}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle.mat-datepicker-toggle-active{color:#1e5dd3}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle button{width:100%;text-align:left;height:70px;border-radius:0}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle button ::ng-deep .mat-button-focus-overlay{opacity:0;display:none}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle button ::ng-deep .mat-button-ripple.mat-ripple{display:none}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle button svg{width:25px!important;float:right}\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"] }, { kind: "component", type: i6.DescriptionPreviewComponent, selector: "app-description-preview", inputs: ["questionIndex", "description"] }] });
26
26
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateTimeComponent, decorators: [{
27
27
  type: Component,
28
28
  args: [{ selector: 'app-date-time', template: "<div class=\"question-block vx-mb-1 vx-p-4\">\r\n <div class=\"question-heading vx-pb-3 vx-mb-3\">\r\n <span\r\n class=\"count vx-fs-13 vx-fw-400 vx-label-txt vx-d-flex vx-align-center vx-justify-center\"\r\n >{{ questionIndex }}</span\r\n >\r\n <span class=\"heading\">\r\n <span\r\n [innerHTML]=\"question?.title == '' ? 'Question' : question?.title\"\r\n class=\"vx-fs-16 vx-label-txt vx-lh-6\"\r\n ></span>\r\n <span\r\n *ngIf=\"question?.isRequired\"\r\n class=\"required vx-fs-20 vx-fw-300 vx-ml-1\"\r\n >*</span\r\n >\r\n </span>\r\n </div>\r\n <div class=\"question-inner vx-d-flex vx-justify-between\">\r\n <div class=\"question-inner-inside\">\r\n <ng-container\r\n *ngIf=\"\r\n question?.hasDescription && question?.description?.trim().length > 0\r\n \"\r\n >\r\n <app-description-preview\r\n [questionIndex]=\"questionIndex\"\r\n [description]=\"question?.description\"\r\n ></app-description-preview>\r\n </ng-container>\r\n <div class=\"question-option\">\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\r\n 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\"\r\n ><span\r\n class=\"vx-d-block\"\r\n [appTooltip]=\"\r\n question?.date?.title == ''\r\n ? 'Date Label'\r\n : question?.date?.title\r\n \"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{\r\n question?.date?.title == \"\"\r\n ? \"Date Label\"\r\n : question?.date?.title\r\n }}</span\r\n ></span\r\n >\r\n <div class=\"date-time-area\">\r\n <i class=\"icons vx-fs-14 vx-paragraph-txt\">&#xe996;</i>\r\n <input\r\n class=\"datePicker\"\r\n (click)=\"openDatePicker()\"\r\n placeholder=\"Select Date\"\r\n />\r\n <dp-date-picker\r\n #datePicker\r\n placeholder=\"Select Date\"\r\n (click)=\"openDatePicker()\"\r\n (click)=\"closeDatepicker()\"\r\n ></dp-date-picker>\r\n <div\r\n class=\"overlay\"\r\n (click)=\"closeDatepicker()\"\r\n *ngIf=\"datepickerOverlay\"\r\n ></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\r\n 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\"\r\n ><span\r\n class=\"vx-d-block\"\r\n [appTooltip]=\"\r\n question?.time?.title == ''\r\n ? 'Time Label'\r\n : question?.time?.title\r\n \"\r\n placement=\"bottom-left\"\r\n delay=\"0\"\r\n type=\"black\"\r\n [tooltipMandatory]=\"false\"\r\n >{{\r\n question?.time?.title == \"\"\r\n ? \"Time Label\"\r\n : question?.time?.title\r\n }}</span\r\n ></span\r\n >\r\n <div class=\"date-time-area\">\r\n <input\r\n aria-label=\"12hr format\"\r\n [ngxTimepicker]=\"timeOnly\"\r\n readonly\r\n placeholder=\"Select Time\"\r\n />\r\n <i class=\"icons vx-fs-14 vx-paragraph-txt\">&#xe955;</i>\r\n <ngx-material-timepicker #timeOnly></ngx-material-timepicker>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"question-quickSettings\">\r\n <app-quick-settings [question]=\"question\"></app-quick-settings>\r\n </div>\r\n </div>\r\n</div>\r\n", 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{background:#f8f8f8;border-radius:.25rem;position:relative;min-height:12.5rem}::ng-deep .question-heading{border-bottom:1px solid #dbdbdb;position:relative}::ng-deep .question-heading .count{background:#dbdbdb;border-radius:50%;border:.5rem solid #fff;min-width:2.75rem;height:2.75rem;position:absolute;top:-.625rem;left:-3.25rem}::ng-deep .question-heading .heading .required{color:#c7381b;position:relative;top:-.25rem}::ng-deep .question-inner{position:relative}::ng-deep .question-inner-inside{padding-right:4rem}@media screen and (max-width: 667px){::ng-deep .question-inner-inside{padding-right:2.5rem!important;width:100%!important}}::ng-deep .question-option .textbox-group{display:block;max-width:31.25rem}::ng-deep .question-option .textbox-group .input-group{border:1px solid #f1f1f1;border-radius:.25rem;position:relative}::ng-deep .question-option .textbox-group .input-group .label{width:5.875rem}::ng-deep .question-option .textbox-group .input-group .label .date-time-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::ng-deep .question-option .textbox-group .input-group .date-time-area{background:#fff;border-radius:0 .25rem .25rem 0;width:calc(100% - 5.875rem);height:2.5rem;position:relative}::ng-deep .question-option .textbox-group .input-group .date-time-area input{font-family:Poppins,sans-serif!important;background:transparent;border:none;border-radius:0;font-size:11px!important;color:#747476!important;width:100%;height:100%;outline:none;cursor:pointer;margin:0;padding:8px;position:relative;z-index:1}::ng-deep .question-option .textbox-group .input-group .date-time-area input::placeholder{font-size:11px!important;color:#74757690!important;font-weight:400}::ng-deep .question-option .textbox-group .input-group .date-time-area i{position:absolute;top:.75rem;right:.5rem}::ng-deep .question-option .textbox-group .input-group .date-time-area .overlay{z-index:2}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker{width:100%}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper{padding:0}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{padding:0!important;position:relative!important;top:-.25rem!important;left:.5rem!important;z-index:1!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix input.preview-datepicker-input{color:#747576!important;width:87%!important;padding-left:0!important;font-size:11px!important;top:-.25rem!important;font-family:Poppins,sans-serif!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix input.preview-datepicker-input::placeholder{font-size:11px!important;color:#747576!important;font-weight:400!important;opacity:1!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix .mat-form-field-label-wrapper .mat-form-field-label span{font-size:11px!important;color:#74757690!important;font-family:Poppins,sans-serif!important;position:relative!important;top:-1px!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-suffix{position:absolute!important;height:2.5rem!important;top:-1px!important;z-index:2!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-suffix mat-datepicker-toggle button{height:2.5rem!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-suffix mat-datepicker-toggle button .mat-button-wrapper svg{width:1.125rem!important;position:relative!important;right:.375rem!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-underline,::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker .mat-form-field-wrapper .mat-form-field-subscript-wrapper{display:none!important}::ng-deep .question-option .textbox-group .input-group .date-time-area mat-form-field.preview-datepicker.mat-form-field-should-float .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix .mat-form-field-label-wrapper{display:none!important}::ng-deep .question-quickSettings{position:absolute;top:0;right:0}::ng-deep .mat-form-field-suffix{position:absolute;width:100%;height:45px;top:6px}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle{position:absolute;left:0;top:0;width:100%}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle.mat-datepicker-toggle-active{color:#1e5dd3}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle button{width:100%;text-align:left;height:70px;border-radius:0}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle button ::ng-deep .mat-button-focus-overlay{opacity:0;display:none}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle button ::ng-deep .mat-button-ripple.mat-ripple{display:none}::ng-deep .mat-form-field-suffix .mat-datepicker-toggle button svg{width:25px!important;float:right}\n"] }]