vcomply-workflow-engine 3.4.39 → 3.4.40
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/frequency/frequency-one-time/frequency-one-time.component.mjs +2 -2
- package/fesm2015/vcomply-workflow-engine.mjs +2 -2
- package/fesm2015/vcomply-workflow-engine.mjs.map +1 -1
- package/fesm2020/vcomply-workflow-engine.mjs +2 -2
- package/fesm2020/vcomply-workflow-engine.mjs.map +1 -1
- package/package.json +1 -1
package/esm2020/lib/sharedComponents/frequency/frequency-one-time/frequency-one-time.component.mjs
CHANGED
|
@@ -149,10 +149,10 @@ export class FrequencyOneTimeComponent {
|
|
|
149
149
|
}
|
|
150
150
|
}
|
|
151
151
|
FrequencyOneTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FrequencyOneTimeComponent, deps: [{ token: i1.FrequencyService }], target: i0.ɵɵFactoryTarget.Component });
|
|
152
|
-
FrequencyOneTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FrequencyOneTimeComponent, selector: "app-frequency-one-time", inputs: { pageType: "pageType", frequencyData: "frequencyData", mode: "mode" }, outputs: { frequencyDetails: "frequencyDetails" }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"mode !== 'policy'\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n DUE DATE FREQUENCY:\r\n </div>\r\n <div class=\"frequency-onetime\">\r\n <div class=\"frequency-onetime-inner vx-d-flex vx-align-center vx-p-3\">\r\n <div class=\"date-field vx-m-0 vx-mr-3\">\r\n <i class=\"icons calendar-icon vx-fs-16 vx-paragraph-txt vx-mr-3\"\r\n ></i\r\n >\r\n <input\r\n type=\"text\"\r\n [value]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n (click)=\"openDatePicker()\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div\r\n class=\"time-field\"\r\n appPopover\r\n (click)=\"timePicker.popover()\"\r\n placement=\"right\"\r\n >\r\n <input class=\"input\" [placeholder]=\"oneTimeStartTime\" readonly />\r\n <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\r\n <i class=\"icons vx-fs-12 vx-paragraph-txt\"></i>\r\n </div>\r\n </div>\r\n <app-popover #timePicker [dontCloseonClick]=\"true\">\r\n <app-time-picker\r\n [time]=\"oneTimeStartTime\"\r\n (onTimeSelection)=\"\r\n timeSelection($event); timePicker.closePopover('top')\r\n \"\r\n ></app-time-picker>\r\n </app-popover>\r\n </div>\r\n </div>\r\n <app-frequency-due-date\r\n [id]=\"6\"\r\n [mode]=\"mode\"\r\n [pageName]=\"'one-time'\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"oneTimeWindow\"\r\n [notCompletedValue]=\"oneTimeFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n </div>\r\n</ng-container>\r\n\r\n<!-- For Policy -->\r\n<ng-container *ngIf=\"mode === 'policy'\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n DUE DATE FREQUENCY:\r\n </div>\r\n <div class=\"frequency-onetime\">\r\n <div class=\"frequency-onetime-inner vx-d-flex vx-align-center vx-p-3\">\r\n <div class=\"date-field vx-m-0 vx-mr-3\">\r\n <i class=\"icons calendar-icon vx-fs-16 vx-paragraph-txt vx-mr-3\"\r\n ></i\r\n >\r\n <input\r\n type=\"text\"\r\n [value]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n (click)=\"openDatePicker()\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div\r\n class=\"time-field\"\r\n appPopover\r\n (click)=\"policyTimePicker.popover()\"\r\n placement=\"right\"\r\n >\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"oneTimeStartTime\"\r\n [placeholder]=\"DEFAULT_TIME\"\r\n readonly\r\n />\r\n <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\r\n <i class=\"icons vx-fs-12 vx-paragraph-txt\"></i>\r\n </div>\r\n </div>\r\n <app-popover #policyTimePicker [dontCloseonClick]=\"true\">\r\n <app-time-picker\r\n [time]=\"oneTimeStartTime\"\r\n (onTimeSelection)=\"\r\n timeSelection($event); policyTimePicker.closePopover('top')\r\n \"\r\n ></app-time-picker>\r\n </app-popover>\r\n </div>\r\n </div>\r\n <app-frequency-due-date\r\n [id]=\"6\"\r\n [mode]=\"mode\"\r\n [pageName]=\"'one-time'\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"oneTimeWindow\"\r\n [notCompletedValue]=\"oneTimeFailed\"\r\n [pageType]=\"pageType\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n </div>\r\n</ng-container>\r\n\r\n<dp-date-picker\r\n #datePicker\r\n [id]=\"'start-date-' + 6\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [(ngModel)]=\"selectedDate\"\r\n [config]=\"dateConfig\"\r\n (onSelect)=\"\r\n openDatePicker();\r\n dateChange($event);\r\n showDateError = false;\r\n datepickerOverlay = false\r\n \"\r\n></dp-date-picker>\r\n<div\r\n class=\"vx-overlay\"\r\n (click)=\"closeDatepicker()\"\r\n *ngIf=\"datepickerOverlay\"\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/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.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-top.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/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.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 .frequency-onetime{position:relative}::ng-deep .frequency-onetime-inner{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-onetime-inner .date-field{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;position:relative;width:12.25rem;height:2rem}::ng-deep .frequency-onetime-inner .date-field .calendar-icon{position:absolute;top:7px;left:.5rem}::ng-deep .frequency-onetime-inner .date-field input{background:transparent;border-radius:0;border:none;color:#747576;font-size:11px;padding:.5rem .5rem .5rem 2.25rem;margin:0;position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group{background:#fff;border-radius:.25rem;display:flex;position:relative}::ng-deep .frequency-onetime-inner .time-picker-group input{background:transparent;border-radius:.25rem;border:1px solid #DBDBDB;color:#747576;font-size:13px;font-weight:400;width:6.25rem;padding:0 .75rem;margin:0;height:2rem;outline:none;position:relative;z-index:1;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group input::placeholder{color:#747576}::ng-deep .frequency-onetime-inner .time-picker-group .time-field{position:relative;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group .time-field .clock-icon{height:2rem;width:.75rem;position:absolute;right:.75rem;top:0}dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}dp-date-picker input:focus{outline:none}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}dp-date-picker .dp-popup dp-day-calendar,dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}dp-date-picker .dp-popup dp-day-calendar button,dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,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}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,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}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,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}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,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}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,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}dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,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}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}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)}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.vx-overlay{position:fixed;z-index:1;inset:0}\n"], dependencies: [{ 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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: i5.PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.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: i7.TimePickerComponent, selector: "app-time-picker", inputs: ["time"], outputs: ["onTimeSelection"] }, { kind: "component", type: i8.FrequencyDueDateComponent, selector: "app-frequency-due-date", inputs: ["mode", "pageType", "completedRequired", "notCompletedRequired", "completedValue", "notCompletedValue", "deactivateValue", "isDeactivated", "id", "pageName"], outputs: ["valueChange"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
|
|
152
|
+
FrequencyOneTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FrequencyOneTimeComponent, selector: "app-frequency-one-time", inputs: { pageType: "pageType", frequencyData: "frequencyData", mode: "mode" }, outputs: { frequencyDetails: "frequencyDetails" }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"mode !== 'policy'\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n DUE DATE FREQUENCY:\r\n </div>\r\n <div class=\"frequency-onetime\">\r\n <div class=\"frequency-onetime-inner vx-d-flex vx-align-center vx-p-3\">\r\n <div class=\"date-field vx-m-0 vx-mr-3\">\r\n <i class=\"icons calendar-icon vx-fs-16 vx-paragraph-txt vx-mr-3\"\r\n ></i\r\n >\r\n <input\r\n type=\"text\"\r\n [value]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n (click)=\"openDatePicker()\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div\r\n class=\"time-field\"\r\n appPopover\r\n (click)=\"timePicker.popover()\"\r\n placement=\"right\"\r\n >\r\n <input class=\"input\" [placeholder]=\"oneTimeStartTime\" readonly />\r\n <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\r\n <i class=\"icons vx-fs-12 vx-paragraph-txt\"></i>\r\n </div>\r\n </div>\r\n <app-popover #timePicker [dontCloseonClick]=\"true\">\r\n <app-time-picker\r\n [time]=\"oneTimeStartTime\"\r\n (onTimeSelection)=\"\r\n timeSelection($event); timePicker.closePopover('top')\r\n \"\r\n ></app-time-picker>\r\n </app-popover>\r\n </div>\r\n </div>\r\n <app-frequency-due-date\r\n [id]=\"6\"\r\n [mode]=\"mode\"\r\n [pageName]=\"'one-time'\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"oneTimeWindow\"\r\n [notCompletedValue]=\"oneTimeFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n </div>\r\n</ng-container>\r\n\r\n<!-- For Policy -->\r\n<ng-container *ngIf=\"mode === 'policy'\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n DUE DATE FREQUENCY:\r\n </div>\r\n <div class=\"frequency-onetime\">\r\n <div class=\"frequency-onetime-inner vx-d-flex vx-align-center vx-p-3\">\r\n <div class=\"date-field vx-m-0 vx-mr-3\">\r\n <i class=\"icons calendar-icon vx-fs-16 vx-paragraph-txt vx-mr-3\"\r\n ></i\r\n >\r\n <input\r\n type=\"text\"\r\n [value]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n (click)=\"openDatePicker()\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div\r\n class=\"time-field\"\r\n appPopover\r\n (click)=\"policyTimePicker.popover()\"\r\n placement=\"right\"\r\n >\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"oneTimeStartTime\"\r\n [placeholder]=\"DEFAULT_TIME\"\r\n readonly\r\n />\r\n <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\r\n <i class=\"icons vx-fs-12 vx-paragraph-txt\"></i>\r\n </div>\r\n </div>\r\n <app-popover #policyTimePicker [dontCloseonClick]=\"true\">\r\n <app-time-picker\r\n [time]=\"oneTimeStartTime\"\r\n (onTimeSelection)=\"\r\n timeSelection($event); policyTimePicker.closePopover('top')\r\n \"\r\n ></app-time-picker>\r\n </app-popover>\r\n </div>\r\n </div>\r\n <app-frequency-due-date\r\n [id]=\"6\"\r\n [mode]=\"mode\"\r\n [pageName]=\"'one-time'\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"oneTimeWindow\"\r\n [notCompletedValue]=\"oneTimeFailed\"\r\n [pageType]=\"pageType\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n </div>\r\n</ng-container>\r\n\r\n<dp-date-picker\r\n #datePicker\r\n [id]=\"'start-date-' + 6\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [(ngModel)]=\"selectedDate\"\r\n [config]=\"dateConfig\"\r\n (onSelect)=\"\r\n openDatePicker();\r\n dateChange($event);\r\n showDateError = false;\r\n datepickerOverlay = false\r\n \"\r\n></dp-date-picker>\r\n<div\r\n class=\"vx-overlay\"\r\n (click)=\"closeDatepicker()\"\r\n *ngIf=\"datepickerOverlay\"\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/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.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-top.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/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.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 .frequency-onetime{position:relative}::ng-deep .frequency-onetime-inner{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-onetime-inner .date-field{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;position:relative;width:12.25rem;height:2rem}::ng-deep .frequency-onetime-inner .date-field .calendar-icon{position:absolute;top:7px;left:.5rem}::ng-deep .frequency-onetime-inner .date-field input{background:transparent;border-radius:0;border:none;color:#747576;font-size:11px;padding:.5rem .5rem .5rem 2.25rem;margin:0;position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group{background:#fff;border-radius:.25rem;display:flex;position:relative}::ng-deep .frequency-onetime-inner .time-picker-group input{background:transparent;border-radius:.25rem;border:1px solid #DBDBDB;color:#747576;font-size:13px;font-weight:400;width:6.25rem;padding:0 .75rem;margin:0;height:2rem;outline:none;position:relative;z-index:1;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group input::placeholder{color:#747576}::ng-deep .frequency-onetime-inner .time-picker-group .time-field{position:relative;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group .time-field .clock-icon{height:2rem;width:.75rem;position:absolute;right:.75rem;top:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::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)}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.vx-overlay{position:fixed;z-index:1;inset:0}\n"], dependencies: [{ 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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: i5.PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.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: i7.TimePickerComponent, selector: "app-time-picker", inputs: ["time"], outputs: ["onTimeSelection"] }, { kind: "component", type: i8.FrequencyDueDateComponent, selector: "app-frequency-due-date", inputs: ["mode", "pageType", "completedRequired", "notCompletedRequired", "completedValue", "notCompletedValue", "deactivateValue", "isDeactivated", "id", "pageName"], outputs: ["valueChange"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
|
|
153
153
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FrequencyOneTimeComponent, decorators: [{
|
|
154
154
|
type: Component,
|
|
155
|
-
args: [{ selector: 'app-frequency-one-time', template: "<ng-container *ngIf=\"mode !== 'policy'\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n DUE DATE FREQUENCY:\r\n </div>\r\n <div class=\"frequency-onetime\">\r\n <div class=\"frequency-onetime-inner vx-d-flex vx-align-center vx-p-3\">\r\n <div class=\"date-field vx-m-0 vx-mr-3\">\r\n <i class=\"icons calendar-icon vx-fs-16 vx-paragraph-txt vx-mr-3\"\r\n ></i\r\n >\r\n <input\r\n type=\"text\"\r\n [value]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n (click)=\"openDatePicker()\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div\r\n class=\"time-field\"\r\n appPopover\r\n (click)=\"timePicker.popover()\"\r\n placement=\"right\"\r\n >\r\n <input class=\"input\" [placeholder]=\"oneTimeStartTime\" readonly />\r\n <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\r\n <i class=\"icons vx-fs-12 vx-paragraph-txt\"></i>\r\n </div>\r\n </div>\r\n <app-popover #timePicker [dontCloseonClick]=\"true\">\r\n <app-time-picker\r\n [time]=\"oneTimeStartTime\"\r\n (onTimeSelection)=\"\r\n timeSelection($event); timePicker.closePopover('top')\r\n \"\r\n ></app-time-picker>\r\n </app-popover>\r\n </div>\r\n </div>\r\n <app-frequency-due-date\r\n [id]=\"6\"\r\n [mode]=\"mode\"\r\n [pageName]=\"'one-time'\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"oneTimeWindow\"\r\n [notCompletedValue]=\"oneTimeFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n </div>\r\n</ng-container>\r\n\r\n<!-- For Policy -->\r\n<ng-container *ngIf=\"mode === 'policy'\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n DUE DATE FREQUENCY:\r\n </div>\r\n <div class=\"frequency-onetime\">\r\n <div class=\"frequency-onetime-inner vx-d-flex vx-align-center vx-p-3\">\r\n <div class=\"date-field vx-m-0 vx-mr-3\">\r\n <i class=\"icons calendar-icon vx-fs-16 vx-paragraph-txt vx-mr-3\"\r\n ></i\r\n >\r\n <input\r\n type=\"text\"\r\n [value]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n (click)=\"openDatePicker()\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div\r\n class=\"time-field\"\r\n appPopover\r\n (click)=\"policyTimePicker.popover()\"\r\n placement=\"right\"\r\n >\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"oneTimeStartTime\"\r\n [placeholder]=\"DEFAULT_TIME\"\r\n readonly\r\n />\r\n <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\r\n <i class=\"icons vx-fs-12 vx-paragraph-txt\"></i>\r\n </div>\r\n </div>\r\n <app-popover #policyTimePicker [dontCloseonClick]=\"true\">\r\n <app-time-picker\r\n [time]=\"oneTimeStartTime\"\r\n (onTimeSelection)=\"\r\n timeSelection($event); policyTimePicker.closePopover('top')\r\n \"\r\n ></app-time-picker>\r\n </app-popover>\r\n </div>\r\n </div>\r\n <app-frequency-due-date\r\n [id]=\"6\"\r\n [mode]=\"mode\"\r\n [pageName]=\"'one-time'\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"oneTimeWindow\"\r\n [notCompletedValue]=\"oneTimeFailed\"\r\n [pageType]=\"pageType\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n </div>\r\n</ng-container>\r\n\r\n<dp-date-picker\r\n #datePicker\r\n [id]=\"'start-date-' + 6\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [(ngModel)]=\"selectedDate\"\r\n [config]=\"dateConfig\"\r\n (onSelect)=\"\r\n openDatePicker();\r\n dateChange($event);\r\n showDateError = false;\r\n datepickerOverlay = false\r\n \"\r\n></dp-date-picker>\r\n<div\r\n class=\"vx-overlay\"\r\n (click)=\"closeDatepicker()\"\r\n *ngIf=\"datepickerOverlay\"\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/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.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-top.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/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.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 .frequency-onetime{position:relative}::ng-deep .frequency-onetime-inner{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-onetime-inner .date-field{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;position:relative;width:12.25rem;height:2rem}::ng-deep .frequency-onetime-inner .date-field .calendar-icon{position:absolute;top:7px;left:.5rem}::ng-deep .frequency-onetime-inner .date-field input{background:transparent;border-radius:0;border:none;color:#747576;font-size:11px;padding:.5rem .5rem .5rem 2.25rem;margin:0;position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group{background:#fff;border-radius:.25rem;display:flex;position:relative}::ng-deep .frequency-onetime-inner .time-picker-group input{background:transparent;border-radius:.25rem;border:1px solid #DBDBDB;color:#747576;font-size:13px;font-weight:400;width:6.25rem;padding:0 .75rem;margin:0;height:2rem;outline:none;position:relative;z-index:1;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group input::placeholder{color:#747576}::ng-deep .frequency-onetime-inner .time-picker-group .time-field{position:relative;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group .time-field .clock-icon{height:2rem;width:.75rem;position:absolute;right:.75rem;top:0}dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}dp-date-picker input:focus{outline:none}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}dp-date-picker .dp-popup dp-day-calendar,dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}dp-date-picker .dp-popup dp-day-calendar button,dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,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}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,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}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,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}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,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}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,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}dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,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}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}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)}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.vx-overlay{position:fixed;z-index:1;inset:0}\n"] }]
|
|
155
|
+
args: [{ selector: 'app-frequency-one-time', template: "<ng-container *ngIf=\"mode !== 'policy'\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n DUE DATE FREQUENCY:\r\n </div>\r\n <div class=\"frequency-onetime\">\r\n <div class=\"frequency-onetime-inner vx-d-flex vx-align-center vx-p-3\">\r\n <div class=\"date-field vx-m-0 vx-mr-3\">\r\n <i class=\"icons calendar-icon vx-fs-16 vx-paragraph-txt vx-mr-3\"\r\n ></i\r\n >\r\n <input\r\n type=\"text\"\r\n [value]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n (click)=\"openDatePicker()\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div\r\n class=\"time-field\"\r\n appPopover\r\n (click)=\"timePicker.popover()\"\r\n placement=\"right\"\r\n >\r\n <input class=\"input\" [placeholder]=\"oneTimeStartTime\" readonly />\r\n <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\r\n <i class=\"icons vx-fs-12 vx-paragraph-txt\"></i>\r\n </div>\r\n </div>\r\n <app-popover #timePicker [dontCloseonClick]=\"true\">\r\n <app-time-picker\r\n [time]=\"oneTimeStartTime\"\r\n (onTimeSelection)=\"\r\n timeSelection($event); timePicker.closePopover('top')\r\n \"\r\n ></app-time-picker>\r\n </app-popover>\r\n </div>\r\n </div>\r\n <app-frequency-due-date\r\n [id]=\"6\"\r\n [mode]=\"mode\"\r\n [pageName]=\"'one-time'\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"oneTimeWindow\"\r\n [notCompletedValue]=\"oneTimeFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n </div>\r\n</ng-container>\r\n\r\n<!-- For Policy -->\r\n<ng-container *ngIf=\"mode === 'policy'\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n DUE DATE FREQUENCY:\r\n </div>\r\n <div class=\"frequency-onetime\">\r\n <div class=\"frequency-onetime-inner vx-d-flex vx-align-center vx-p-3\">\r\n <div class=\"date-field vx-m-0 vx-mr-3\">\r\n <i class=\"icons calendar-icon vx-fs-16 vx-paragraph-txt vx-mr-3\"\r\n ></i\r\n >\r\n <input\r\n type=\"text\"\r\n [value]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n (click)=\"openDatePicker()\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div\r\n class=\"time-field\"\r\n appPopover\r\n (click)=\"policyTimePicker.popover()\"\r\n placement=\"right\"\r\n >\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"oneTimeStartTime\"\r\n [placeholder]=\"DEFAULT_TIME\"\r\n readonly\r\n />\r\n <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\r\n <i class=\"icons vx-fs-12 vx-paragraph-txt\"></i>\r\n </div>\r\n </div>\r\n <app-popover #policyTimePicker [dontCloseonClick]=\"true\">\r\n <app-time-picker\r\n [time]=\"oneTimeStartTime\"\r\n (onTimeSelection)=\"\r\n timeSelection($event); policyTimePicker.closePopover('top')\r\n \"\r\n ></app-time-picker>\r\n </app-popover>\r\n </div>\r\n </div>\r\n <app-frequency-due-date\r\n [id]=\"6\"\r\n [mode]=\"mode\"\r\n [pageName]=\"'one-time'\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"oneTimeWindow\"\r\n [notCompletedValue]=\"oneTimeFailed\"\r\n [pageType]=\"pageType\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n </div>\r\n</ng-container>\r\n\r\n<dp-date-picker\r\n #datePicker\r\n [id]=\"'start-date-' + 6\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [(ngModel)]=\"selectedDate\"\r\n [config]=\"dateConfig\"\r\n (onSelect)=\"\r\n openDatePicker();\r\n dateChange($event);\r\n showDateError = false;\r\n datepickerOverlay = false\r\n \"\r\n></dp-date-picker>\r\n<div\r\n class=\"vx-overlay\"\r\n (click)=\"closeDatepicker()\"\r\n *ngIf=\"datepickerOverlay\"\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/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.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-top.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/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.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 .frequency-onetime{position:relative}::ng-deep .frequency-onetime-inner{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-onetime-inner .date-field{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;position:relative;width:12.25rem;height:2rem}::ng-deep .frequency-onetime-inner .date-field .calendar-icon{position:absolute;top:7px;left:.5rem}::ng-deep .frequency-onetime-inner .date-field input{background:transparent;border-radius:0;border:none;color:#747576;font-size:11px;padding:.5rem .5rem .5rem 2.25rem;margin:0;position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group{background:#fff;border-radius:.25rem;display:flex;position:relative}::ng-deep .frequency-onetime-inner .time-picker-group input{background:transparent;border-radius:.25rem;border:1px solid #DBDBDB;color:#747576;font-size:13px;font-weight:400;width:6.25rem;padding:0 .75rem;margin:0;height:2rem;outline:none;position:relative;z-index:1;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group input::placeholder{color:#747576}::ng-deep .frequency-onetime-inner .time-picker-group .time-field{position:relative;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group .time-field .clock-icon{height:2rem;width:.75rem;position:absolute;right:.75rem;top:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::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)}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.vx-overlay{position:fixed;z-index:1;inset:0}\n"] }]
|
|
156
156
|
}], ctorParameters: function () { return [{ type: i1.FrequencyService }]; }, propDecorators: { datePicker: [{
|
|
157
157
|
type: ViewChild,
|
|
158
158
|
args: ['datePicker']
|
|
@@ -20290,10 +20290,10 @@ class FrequencyOneTimeComponent {
|
|
|
20290
20290
|
}
|
|
20291
20291
|
}
|
|
20292
20292
|
FrequencyOneTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FrequencyOneTimeComponent, deps: [{ token: FrequencyService }], target: i0.ɵɵFactoryTarget.Component });
|
|
20293
|
-
FrequencyOneTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FrequencyOneTimeComponent, selector: "app-frequency-one-time", inputs: { pageType: "pageType", frequencyData: "frequencyData", mode: "mode" }, outputs: { frequencyDetails: "frequencyDetails" }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"mode !== 'policy'\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n DUE DATE FREQUENCY:\r\n </div>\r\n <div class=\"frequency-onetime\">\r\n <div class=\"frequency-onetime-inner vx-d-flex vx-align-center vx-p-3\">\r\n <div class=\"date-field vx-m-0 vx-mr-3\">\r\n <i class=\"icons calendar-icon vx-fs-16 vx-paragraph-txt vx-mr-3\"\r\n ></i\r\n >\r\n <input\r\n type=\"text\"\r\n [value]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n (click)=\"openDatePicker()\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div\r\n class=\"time-field\"\r\n appPopover\r\n (click)=\"timePicker.popover()\"\r\n placement=\"right\"\r\n >\r\n <input class=\"input\" [placeholder]=\"oneTimeStartTime\" readonly />\r\n <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\r\n <i class=\"icons vx-fs-12 vx-paragraph-txt\"></i>\r\n </div>\r\n </div>\r\n <app-popover #timePicker [dontCloseonClick]=\"true\">\r\n <app-time-picker\r\n [time]=\"oneTimeStartTime\"\r\n (onTimeSelection)=\"\r\n timeSelection($event); timePicker.closePopover('top')\r\n \"\r\n ></app-time-picker>\r\n </app-popover>\r\n </div>\r\n </div>\r\n <app-frequency-due-date\r\n [id]=\"6\"\r\n [mode]=\"mode\"\r\n [pageName]=\"'one-time'\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"oneTimeWindow\"\r\n [notCompletedValue]=\"oneTimeFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n </div>\r\n</ng-container>\r\n\r\n<!-- For Policy -->\r\n<ng-container *ngIf=\"mode === 'policy'\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n DUE DATE FREQUENCY:\r\n </div>\r\n <div class=\"frequency-onetime\">\r\n <div class=\"frequency-onetime-inner vx-d-flex vx-align-center vx-p-3\">\r\n <div class=\"date-field vx-m-0 vx-mr-3\">\r\n <i class=\"icons calendar-icon vx-fs-16 vx-paragraph-txt vx-mr-3\"\r\n ></i\r\n >\r\n <input\r\n type=\"text\"\r\n [value]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n (click)=\"openDatePicker()\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div\r\n class=\"time-field\"\r\n appPopover\r\n (click)=\"policyTimePicker.popover()\"\r\n placement=\"right\"\r\n >\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"oneTimeStartTime\"\r\n [placeholder]=\"DEFAULT_TIME\"\r\n readonly\r\n />\r\n <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\r\n <i class=\"icons vx-fs-12 vx-paragraph-txt\"></i>\r\n </div>\r\n </div>\r\n <app-popover #policyTimePicker [dontCloseonClick]=\"true\">\r\n <app-time-picker\r\n [time]=\"oneTimeStartTime\"\r\n (onTimeSelection)=\"\r\n timeSelection($event); policyTimePicker.closePopover('top')\r\n \"\r\n ></app-time-picker>\r\n </app-popover>\r\n </div>\r\n </div>\r\n <app-frequency-due-date\r\n [id]=\"6\"\r\n [mode]=\"mode\"\r\n [pageName]=\"'one-time'\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"oneTimeWindow\"\r\n [notCompletedValue]=\"oneTimeFailed\"\r\n [pageType]=\"pageType\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n </div>\r\n</ng-container>\r\n\r\n<dp-date-picker\r\n #datePicker\r\n [id]=\"'start-date-' + 6\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [(ngModel)]=\"selectedDate\"\r\n [config]=\"dateConfig\"\r\n (onSelect)=\"\r\n openDatePicker();\r\n dateChange($event);\r\n showDateError = false;\r\n datepickerOverlay = false\r\n \"\r\n></dp-date-picker>\r\n<div\r\n class=\"vx-overlay\"\r\n (click)=\"closeDatepicker()\"\r\n *ngIf=\"datepickerOverlay\"\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/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.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-top.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/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.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 .frequency-onetime{position:relative}::ng-deep .frequency-onetime-inner{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-onetime-inner .date-field{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;position:relative;width:12.25rem;height:2rem}::ng-deep .frequency-onetime-inner .date-field .calendar-icon{position:absolute;top:7px;left:.5rem}::ng-deep .frequency-onetime-inner .date-field input{background:transparent;border-radius:0;border:none;color:#747576;font-size:11px;padding:.5rem .5rem .5rem 2.25rem;margin:0;position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group{background:#fff;border-radius:.25rem;display:flex;position:relative}::ng-deep .frequency-onetime-inner .time-picker-group input{background:transparent;border-radius:.25rem;border:1px solid #DBDBDB;color:#747576;font-size:13px;font-weight:400;width:6.25rem;padding:0 .75rem;margin:0;height:2rem;outline:none;position:relative;z-index:1;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group input::placeholder{color:#747576}::ng-deep .frequency-onetime-inner .time-picker-group .time-field{position:relative;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group .time-field .clock-icon{height:2rem;width:.75rem;position:absolute;right:.75rem;top:0}dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}dp-date-picker input:focus{outline:none}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}dp-date-picker .dp-popup dp-day-calendar,dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}dp-date-picker .dp-popup dp-day-calendar button,dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,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}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,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}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,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}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,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}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,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}dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,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}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}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)}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.vx-overlay{position:fixed;z-index:1;inset:0}\n"], dependencies: [{ kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.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: TimePickerComponent, selector: "app-time-picker", inputs: ["time"], outputs: ["onTimeSelection"] }, { kind: "component", type: FrequencyDueDateComponent, selector: "app-frequency-due-date", inputs: ["mode", "pageType", "completedRequired", "notCompletedRequired", "completedValue", "notCompletedValue", "deactivateValue", "isDeactivated", "id", "pageName"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
|
|
20293
|
+
FrequencyOneTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FrequencyOneTimeComponent, selector: "app-frequency-one-time", inputs: { pageType: "pageType", frequencyData: "frequencyData", mode: "mode" }, outputs: { frequencyDetails: "frequencyDetails" }, viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"mode !== 'policy'\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n DUE DATE FREQUENCY:\r\n </div>\r\n <div class=\"frequency-onetime\">\r\n <div class=\"frequency-onetime-inner vx-d-flex vx-align-center vx-p-3\">\r\n <div class=\"date-field vx-m-0 vx-mr-3\">\r\n <i class=\"icons calendar-icon vx-fs-16 vx-paragraph-txt vx-mr-3\"\r\n ></i\r\n >\r\n <input\r\n type=\"text\"\r\n [value]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n (click)=\"openDatePicker()\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div\r\n class=\"time-field\"\r\n appPopover\r\n (click)=\"timePicker.popover()\"\r\n placement=\"right\"\r\n >\r\n <input class=\"input\" [placeholder]=\"oneTimeStartTime\" readonly />\r\n <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\r\n <i class=\"icons vx-fs-12 vx-paragraph-txt\"></i>\r\n </div>\r\n </div>\r\n <app-popover #timePicker [dontCloseonClick]=\"true\">\r\n <app-time-picker\r\n [time]=\"oneTimeStartTime\"\r\n (onTimeSelection)=\"\r\n timeSelection($event); timePicker.closePopover('top')\r\n \"\r\n ></app-time-picker>\r\n </app-popover>\r\n </div>\r\n </div>\r\n <app-frequency-due-date\r\n [id]=\"6\"\r\n [mode]=\"mode\"\r\n [pageName]=\"'one-time'\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"oneTimeWindow\"\r\n [notCompletedValue]=\"oneTimeFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n </div>\r\n</ng-container>\r\n\r\n<!-- For Policy -->\r\n<ng-container *ngIf=\"mode === 'policy'\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n DUE DATE FREQUENCY:\r\n </div>\r\n <div class=\"frequency-onetime\">\r\n <div class=\"frequency-onetime-inner vx-d-flex vx-align-center vx-p-3\">\r\n <div class=\"date-field vx-m-0 vx-mr-3\">\r\n <i class=\"icons calendar-icon vx-fs-16 vx-paragraph-txt vx-mr-3\"\r\n ></i\r\n >\r\n <input\r\n type=\"text\"\r\n [value]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n (click)=\"openDatePicker()\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div\r\n class=\"time-field\"\r\n appPopover\r\n (click)=\"policyTimePicker.popover()\"\r\n placement=\"right\"\r\n >\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"oneTimeStartTime\"\r\n [placeholder]=\"DEFAULT_TIME\"\r\n readonly\r\n />\r\n <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\r\n <i class=\"icons vx-fs-12 vx-paragraph-txt\"></i>\r\n </div>\r\n </div>\r\n <app-popover #policyTimePicker [dontCloseonClick]=\"true\">\r\n <app-time-picker\r\n [time]=\"oneTimeStartTime\"\r\n (onTimeSelection)=\"\r\n timeSelection($event); policyTimePicker.closePopover('top')\r\n \"\r\n ></app-time-picker>\r\n </app-popover>\r\n </div>\r\n </div>\r\n <app-frequency-due-date\r\n [id]=\"6\"\r\n [mode]=\"mode\"\r\n [pageName]=\"'one-time'\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"oneTimeWindow\"\r\n [notCompletedValue]=\"oneTimeFailed\"\r\n [pageType]=\"pageType\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n </div>\r\n</ng-container>\r\n\r\n<dp-date-picker\r\n #datePicker\r\n [id]=\"'start-date-' + 6\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [(ngModel)]=\"selectedDate\"\r\n [config]=\"dateConfig\"\r\n (onSelect)=\"\r\n openDatePicker();\r\n dateChange($event);\r\n showDateError = false;\r\n datepickerOverlay = false\r\n \"\r\n></dp-date-picker>\r\n<div\r\n class=\"vx-overlay\"\r\n (click)=\"closeDatepicker()\"\r\n *ngIf=\"datepickerOverlay\"\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/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.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-top.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/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.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 .frequency-onetime{position:relative}::ng-deep .frequency-onetime-inner{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-onetime-inner .date-field{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;position:relative;width:12.25rem;height:2rem}::ng-deep .frequency-onetime-inner .date-field .calendar-icon{position:absolute;top:7px;left:.5rem}::ng-deep .frequency-onetime-inner .date-field input{background:transparent;border-radius:0;border:none;color:#747576;font-size:11px;padding:.5rem .5rem .5rem 2.25rem;margin:0;position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group{background:#fff;border-radius:.25rem;display:flex;position:relative}::ng-deep .frequency-onetime-inner .time-picker-group input{background:transparent;border-radius:.25rem;border:1px solid #DBDBDB;color:#747576;font-size:13px;font-weight:400;width:6.25rem;padding:0 .75rem;margin:0;height:2rem;outline:none;position:relative;z-index:1;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group input::placeholder{color:#747576}::ng-deep .frequency-onetime-inner .time-picker-group .time-field{position:relative;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group .time-field .clock-icon{height:2rem;width:.75rem;position:absolute;right:.75rem;top:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::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)}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.vx-overlay{position:fixed;z-index:1;inset:0}\n"], dependencies: [{ kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PopoverComponent, selector: "app-popover", inputs: ["dontCloseonClick"] }, { kind: "directive", type: PopoverDirective, selector: "[appPopover]", inputs: ["refrence", "placement"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.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: TimePickerComponent, selector: "app-time-picker", inputs: ["time"], outputs: ["onTimeSelection"] }, { kind: "component", type: FrequencyDueDateComponent, selector: "app-frequency-due-date", inputs: ["mode", "pageType", "completedRequired", "notCompletedRequired", "completedValue", "notCompletedValue", "deactivateValue", "isDeactivated", "id", "pageName"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] });
|
|
20294
20294
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FrequencyOneTimeComponent, decorators: [{
|
|
20295
20295
|
type: Component,
|
|
20296
|
-
args: [{ selector: 'app-frequency-one-time', template: "<ng-container *ngIf=\"mode !== 'policy'\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n DUE DATE FREQUENCY:\r\n </div>\r\n <div class=\"frequency-onetime\">\r\n <div class=\"frequency-onetime-inner vx-d-flex vx-align-center vx-p-3\">\r\n <div class=\"date-field vx-m-0 vx-mr-3\">\r\n <i class=\"icons calendar-icon vx-fs-16 vx-paragraph-txt vx-mr-3\"\r\n ></i\r\n >\r\n <input\r\n type=\"text\"\r\n [value]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n (click)=\"openDatePicker()\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div\r\n class=\"time-field\"\r\n appPopover\r\n (click)=\"timePicker.popover()\"\r\n placement=\"right\"\r\n >\r\n <input class=\"input\" [placeholder]=\"oneTimeStartTime\" readonly />\r\n <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\r\n <i class=\"icons vx-fs-12 vx-paragraph-txt\"></i>\r\n </div>\r\n </div>\r\n <app-popover #timePicker [dontCloseonClick]=\"true\">\r\n <app-time-picker\r\n [time]=\"oneTimeStartTime\"\r\n (onTimeSelection)=\"\r\n timeSelection($event); timePicker.closePopover('top')\r\n \"\r\n ></app-time-picker>\r\n </app-popover>\r\n </div>\r\n </div>\r\n <app-frequency-due-date\r\n [id]=\"6\"\r\n [mode]=\"mode\"\r\n [pageName]=\"'one-time'\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"oneTimeWindow\"\r\n [notCompletedValue]=\"oneTimeFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n </div>\r\n</ng-container>\r\n\r\n<!-- For Policy -->\r\n<ng-container *ngIf=\"mode === 'policy'\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n DUE DATE FREQUENCY:\r\n </div>\r\n <div class=\"frequency-onetime\">\r\n <div class=\"frequency-onetime-inner vx-d-flex vx-align-center vx-p-3\">\r\n <div class=\"date-field vx-m-0 vx-mr-3\">\r\n <i class=\"icons calendar-icon vx-fs-16 vx-paragraph-txt vx-mr-3\"\r\n ></i\r\n >\r\n <input\r\n type=\"text\"\r\n [value]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n (click)=\"openDatePicker()\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div\r\n class=\"time-field\"\r\n appPopover\r\n (click)=\"policyTimePicker.popover()\"\r\n placement=\"right\"\r\n >\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"oneTimeStartTime\"\r\n [placeholder]=\"DEFAULT_TIME\"\r\n readonly\r\n />\r\n <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\r\n <i class=\"icons vx-fs-12 vx-paragraph-txt\"></i>\r\n </div>\r\n </div>\r\n <app-popover #policyTimePicker [dontCloseonClick]=\"true\">\r\n <app-time-picker\r\n [time]=\"oneTimeStartTime\"\r\n (onTimeSelection)=\"\r\n timeSelection($event); policyTimePicker.closePopover('top')\r\n \"\r\n ></app-time-picker>\r\n </app-popover>\r\n </div>\r\n </div>\r\n <app-frequency-due-date\r\n [id]=\"6\"\r\n [mode]=\"mode\"\r\n [pageName]=\"'one-time'\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"oneTimeWindow\"\r\n [notCompletedValue]=\"oneTimeFailed\"\r\n [pageType]=\"pageType\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n </div>\r\n</ng-container>\r\n\r\n<dp-date-picker\r\n #datePicker\r\n [id]=\"'start-date-' + 6\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [(ngModel)]=\"selectedDate\"\r\n [config]=\"dateConfig\"\r\n (onSelect)=\"\r\n openDatePicker();\r\n dateChange($event);\r\n showDateError = false;\r\n datepickerOverlay = false\r\n \"\r\n></dp-date-picker>\r\n<div\r\n class=\"vx-overlay\"\r\n (click)=\"closeDatepicker()\"\r\n *ngIf=\"datepickerOverlay\"\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/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.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-top.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/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.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 .frequency-onetime{position:relative}::ng-deep .frequency-onetime-inner{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-onetime-inner .date-field{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;position:relative;width:12.25rem;height:2rem}::ng-deep .frequency-onetime-inner .date-field .calendar-icon{position:absolute;top:7px;left:.5rem}::ng-deep .frequency-onetime-inner .date-field input{background:transparent;border-radius:0;border:none;color:#747576;font-size:11px;padding:.5rem .5rem .5rem 2.25rem;margin:0;position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group{background:#fff;border-radius:.25rem;display:flex;position:relative}::ng-deep .frequency-onetime-inner .time-picker-group input{background:transparent;border-radius:.25rem;border:1px solid #DBDBDB;color:#747576;font-size:13px;font-weight:400;width:6.25rem;padding:0 .75rem;margin:0;height:2rem;outline:none;position:relative;z-index:1;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group input::placeholder{color:#747576}::ng-deep .frequency-onetime-inner .time-picker-group .time-field{position:relative;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group .time-field .clock-icon{height:2rem;width:.75rem;position:absolute;right:.75rem;top:0}dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}dp-date-picker input:focus{outline:none}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}dp-date-picker .dp-popup dp-day-calendar,dp-date-picker .dp-popup dp-month-calendar{width:100%;pointer-events:auto}dp-date-picker .dp-popup dp-day-calendar button,dp-date-picker .dp-popup dp-month-calendar button{background:transparent;border:none;outline:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right,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}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-left:hover,dp-date-picker .dp-popup dp-day-calendar button.dp-calendar-nav-right:hover,dp-date-picker .dp-popup dp-month-calendar button.dp-calendar-nav-right:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn,dp-date-picker .dp-popup dp-month-calendar button.dp-current-location-btn{display:none}dp-date-picker .dp-popup dp-day-calendar button.dp-current-location-btn:before,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}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week{display:flex;justify-content:space-around}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays .dp-calendar-weekday,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week .dp-calendar-weekday,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}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button,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}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button:hover,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button:hover,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button:hover{background-color:#f3f3f3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-selected,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-selected,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-week button.dp-selected{background:#1e5dd3}dp-date-picker .dp-popup dp-day-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-month-calendar .dp-weekdays button.dp-current-day,dp-date-picker .dp-popup dp-day-calendar .dp-calendar-week button.dp-current-day,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}dp-date-picker .dp-popup dp-day-calendar .dp-day-calendar-container,dp-date-picker .dp-popup dp-month-calendar .dp-day-calendar-container{padding:20px;border-radius:2px}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-nav-container{display:flex;margin:0 0 20px;border:none}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-nav-container .dp-nav-header button,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}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container{width:80px;display:flex}dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-left button,dp-date-picker .dp-popup dp-day-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button,dp-date-picker .dp-popup dp-month-calendar .dp-nav-btns-container .dp-calendar-nav-container-right button{margin:0!important}dp-date-picker .dp-popup dp-day-calendar .dp-calendar-wrapper,dp-date-picker .dp-popup dp-month-calendar .dp-calendar-wrapper{border:none}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)}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.vx-overlay{position:fixed;z-index:1;inset:0}\n"] }]
|
|
20296
|
+
args: [{ selector: 'app-frequency-one-time', template: "<ng-container *ngIf=\"mode !== 'policy'\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n DUE DATE FREQUENCY:\r\n </div>\r\n <div class=\"frequency-onetime\">\r\n <div class=\"frequency-onetime-inner vx-d-flex vx-align-center vx-p-3\">\r\n <div class=\"date-field vx-m-0 vx-mr-3\">\r\n <i class=\"icons calendar-icon vx-fs-16 vx-paragraph-txt vx-mr-3\"\r\n ></i\r\n >\r\n <input\r\n type=\"text\"\r\n [value]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n (click)=\"openDatePicker()\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div\r\n class=\"time-field\"\r\n appPopover\r\n (click)=\"timePicker.popover()\"\r\n placement=\"right\"\r\n >\r\n <input class=\"input\" [placeholder]=\"oneTimeStartTime\" readonly />\r\n <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\r\n <i class=\"icons vx-fs-12 vx-paragraph-txt\"></i>\r\n </div>\r\n </div>\r\n <app-popover #timePicker [dontCloseonClick]=\"true\">\r\n <app-time-picker\r\n [time]=\"oneTimeStartTime\"\r\n (onTimeSelection)=\"\r\n timeSelection($event); timePicker.closePopover('top')\r\n \"\r\n ></app-time-picker>\r\n </app-popover>\r\n </div>\r\n </div>\r\n <app-frequency-due-date\r\n [id]=\"6\"\r\n [mode]=\"mode\"\r\n [pageName]=\"'one-time'\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"oneTimeWindow\"\r\n [notCompletedValue]=\"oneTimeFailed\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n </div>\r\n</ng-container>\r\n\r\n<!-- For Policy -->\r\n<ng-container *ngIf=\"mode === 'policy'\">\r\n <div class=\"vx-fs-11 vx-fw-500 vx-label-txt vx-tt-uppercase vx-mb-1\">\r\n DUE DATE FREQUENCY:\r\n </div>\r\n <div class=\"frequency-onetime\">\r\n <div class=\"frequency-onetime-inner vx-d-flex vx-align-center vx-p-3\">\r\n <div class=\"date-field vx-m-0 vx-mr-3\">\r\n <i class=\"icons calendar-icon vx-fs-16 vx-paragraph-txt vx-mr-3\"\r\n ></i\r\n >\r\n <input\r\n type=\"text\"\r\n [value]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n (click)=\"openDatePicker()\"\r\n readonly\r\n />\r\n </div>\r\n\r\n <div class=\"time-picker-group vx-d-flex\">\r\n <div\r\n class=\"time-field\"\r\n appPopover\r\n (click)=\"policyTimePicker.popover()\"\r\n placement=\"right\"\r\n >\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"oneTimeStartTime\"\r\n [placeholder]=\"DEFAULT_TIME\"\r\n readonly\r\n />\r\n <div class=\"clock-icon vx-d-flex vx-align-center vx-justify-center\">\r\n <i class=\"icons vx-fs-12 vx-paragraph-txt\"></i>\r\n </div>\r\n </div>\r\n <app-popover #policyTimePicker [dontCloseonClick]=\"true\">\r\n <app-time-picker\r\n [time]=\"oneTimeStartTime\"\r\n (onTimeSelection)=\"\r\n timeSelection($event); policyTimePicker.closePopover('top')\r\n \"\r\n ></app-time-picker>\r\n </app-popover>\r\n </div>\r\n </div>\r\n <app-frequency-due-date\r\n [id]=\"6\"\r\n [mode]=\"mode\"\r\n [pageName]=\"'one-time'\"\r\n [isDeactivated]=\"false\"\r\n [completedValue]=\"oneTimeWindow\"\r\n [notCompletedValue]=\"oneTimeFailed\"\r\n [pageType]=\"pageType\"\r\n (valueChange)=\"onValueChange($event)\"\r\n ></app-frequency-due-date>\r\n </div>\r\n</ng-container>\r\n\r\n<dp-date-picker\r\n #datePicker\r\n [id]=\"'start-date-' + 6\"\r\n [placeholder]=\"todayDate | date : 'dd MMM yyyy'\"\r\n [(ngModel)]=\"selectedDate\"\r\n [config]=\"dateConfig\"\r\n (onSelect)=\"\r\n openDatePicker();\r\n dateChange($event);\r\n showDateError = false;\r\n datepickerOverlay = false\r\n \"\r\n></dp-date-picker>\r\n<div\r\n class=\"vx-overlay\"\r\n (click)=\"closeDatepicker()\"\r\n *ngIf=\"datepickerOverlay\"\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/header/header.css\";@import\"https://cdn.v-comply.com/design-system/css/display/display.css\";@import\"https://cdn.v-comply.com/design-system/css/margin/margin.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-top.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/alignment/alignment.css\";@import\"https://cdn.v-comply.com/design-system/css/text/text.css\";@import\"https://cdn.v-comply.com/design-system/css/button/button.css\";@import\"https://cdn.v-comply.com/design-system/css/color/color.css\";@import\"https://cdn.v-comply.com/design-system/css/popover/popover.css\";@import\"https://cdn.v-comply.com/design-system/css/width/width.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 .frequency-onetime{position:relative}::ng-deep .frequency-onetime-inner{border-radius:.25rem;border:1px solid #f1f1f1}::ng-deep .frequency-onetime-inner .date-field{background:#fff;border-radius:.25rem;border:1px solid #dbdbdb;position:relative;width:12.25rem;height:2rem}::ng-deep .frequency-onetime-inner .date-field .calendar-icon{position:absolute;top:7px;left:.5rem}::ng-deep .frequency-onetime-inner .date-field input{background:transparent;border-radius:0;border:none;color:#747576;font-size:11px;padding:.5rem .5rem .5rem 2.25rem;margin:0;position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group{background:#fff;border-radius:.25rem;display:flex;position:relative}::ng-deep .frequency-onetime-inner .time-picker-group input{background:transparent;border-radius:.25rem;border:1px solid #DBDBDB;color:#747576;font-size:13px;font-weight:400;width:6.25rem;padding:0 .75rem;margin:0;height:2rem;outline:none;position:relative;z-index:1;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group input::placeholder{color:#747576}::ng-deep .frequency-onetime-inner .time-picker-group .time-field{position:relative;cursor:pointer}::ng-deep .frequency-onetime-inner .time-picker-group .time-field .clock-icon{height:2rem;width:.75rem;position:absolute;right:.75rem;top:0}::ng-deep dp-date-picker{width:100%;position:fixed!important;z-index:14;top:-40px;left:0}::ng-deep dp-date-picker input{width:100%;border:none;opacity:0;pointer-events:none}::ng-deep dp-date-picker input:focus{outline:none}::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)}@keyframes slide-bottom{0%{transform:translateY(-100px)}to{transform:translateY(0)}}.vx-overlay{position:fixed;z-index:1;inset:0}\n"] }]
|
|
20297
20297
|
}], ctorParameters: function () { return [{ type: FrequencyService }]; }, propDecorators: { datePicker: [{
|
|
20298
20298
|
type: ViewChild,
|
|
20299
20299
|
args: ['datePicker']
|