mis-crystal-design-system 14.0.4 → 14.0.43-test
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/daterangepicker_v2/tz-drp-container/tz-drp-container.component.d.ts +1 -1
- package/dynamic-form/dynamic-form.component.d.ts +0 -1
- package/esm2020/async-search-dropdown/async-dropdown.component.mjs +4 -4
- package/esm2020/datepicker_v2/tz-dp-container/tz-dp-container.component.mjs +24 -14
- package/esm2020/daterangepicker_v2/models/drp-config.model.mjs +1 -1
- package/esm2020/daterangepicker_v2/tz-drp-container/tz-drp-container.component.mjs +43 -34
- package/esm2020/dynamic-form/dynamic-form.component.mjs +11 -6
- package/esm2020/phone-input/phone-input.component.mjs +63 -38
- package/esm2020/specificdatepicker/tz-sdp-container/tz-sdp-container.component.mjs +68 -44
- package/esm2020/table/table.component.mjs +2 -2
- package/esm2020/timepicker/timepicker.component.mjs +54 -48
- package/esm2020/timerangepicker/timerangepicker.component.mjs +46 -42
- package/fesm2015/mis-crystal-design-system-async-search-dropdown.mjs +3 -3
- package/fesm2015/mis-crystal-design-system-async-search-dropdown.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-datepicker_v2.mjs +23 -13
- package/fesm2015/mis-crystal-design-system-datepicker_v2.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-daterangepicker_v2.mjs +43 -33
- package/fesm2015/mis-crystal-design-system-daterangepicker_v2.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-dynamic-form.mjs +10 -4
- package/fesm2015/mis-crystal-design-system-dynamic-form.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-phone-input.mjs +66 -36
- package/fesm2015/mis-crystal-design-system-phone-input.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-specificdatepicker.mjs +72 -47
- package/fesm2015/mis-crystal-design-system-specificdatepicker.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-table.mjs +2 -2
- package/fesm2015/mis-crystal-design-system-table.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-timepicker.mjs +53 -47
- package/fesm2015/mis-crystal-design-system-timepicker.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-timerangepicker.mjs +45 -41
- package/fesm2015/mis-crystal-design-system-timerangepicker.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-async-search-dropdown.mjs +3 -3
- package/fesm2020/mis-crystal-design-system-async-search-dropdown.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-datepicker_v2.mjs +23 -13
- package/fesm2020/mis-crystal-design-system-datepicker_v2.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-daterangepicker_v2.mjs +42 -32
- package/fesm2020/mis-crystal-design-system-daterangepicker_v2.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-dynamic-form.mjs +10 -4
- package/fesm2020/mis-crystal-design-system-dynamic-form.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-phone-input.mjs +61 -36
- package/fesm2020/mis-crystal-design-system-phone-input.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-specificdatepicker.mjs +67 -43
- package/fesm2020/mis-crystal-design-system-specificdatepicker.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-table.mjs +2 -2
- package/fesm2020/mis-crystal-design-system-table.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-timepicker.mjs +53 -47
- package/fesm2020/mis-crystal-design-system-timepicker.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-timerangepicker.mjs +45 -41
- package/fesm2020/mis-crystal-design-system-timerangepicker.mjs.map +1 -1
- package/package.json +1 -1
- package/phone-input/phone-input.component.d.ts +19 -14
- package/specificdatepicker/tz-sdp-container/tz-sdp-container.component.d.ts +2 -1
- package/timepicker/timepicker.component.d.ts +2 -2
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
|
|
3
3
|
import * as i2 from '@angular/forms';
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
4
|
+
import { FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
5
|
+
import { PhoneNumberUtil } from 'google-libphonenumber';
|
|
6
|
+
import { getCountries, getCountryCallingCode } from 'libphonenumber-js';
|
|
6
7
|
import * as i1 from '@angular/common';
|
|
7
8
|
import { CommonModule } from '@angular/common';
|
|
8
9
|
import * as i3 from 'mis-crystal-design-system/dropdown';
|
|
@@ -13,67 +14,96 @@ import { ScrollingModule } from '@angular/cdk-experimental/scrolling';
|
|
|
13
14
|
const _c0 = function (a0) { return { "height": a0 }; };
|
|
14
15
|
class PhoneInputComponent {
|
|
15
16
|
constructor() {
|
|
16
|
-
this.dropdownHeight =
|
|
17
|
-
this.dropdownWidth =
|
|
17
|
+
this.dropdownHeight = '';
|
|
18
|
+
this.dropdownWidth = '';
|
|
18
19
|
this.dropdownData = [];
|
|
19
|
-
this.dropdownSelectedItem = { value:
|
|
20
|
-
this.defaultCountryCode = 'IN';
|
|
20
|
+
this.dropdownSelectedItem = { value: '', label: '', countryCode: '' };
|
|
21
21
|
this.inputPlaceholder = 'Enter';
|
|
22
|
-
this.inputFormControl = new
|
|
22
|
+
this.inputFormControl = new FormControl();
|
|
23
23
|
this.onDropdownSelection = new EventEmitter();
|
|
24
24
|
this.onInvalidPhoneNumber = new EventEmitter();
|
|
25
|
-
this.dropdownListWidth =
|
|
26
|
-
this.dropdownListHeight =
|
|
25
|
+
this.dropdownListWidth = '';
|
|
26
|
+
this.dropdownListHeight = '';
|
|
27
27
|
this.searchEnabled = true;
|
|
28
|
-
this.inputType =
|
|
29
|
-
this.searchLabel =
|
|
30
|
-
this.
|
|
31
|
-
this.
|
|
28
|
+
this.inputType = 'number';
|
|
29
|
+
this.searchLabel = 'Search Keyword';
|
|
30
|
+
this.defaultCountry = 'IN';
|
|
31
|
+
this.phoneValidator = true;
|
|
32
|
+
this.countryCodes = [{ label: '', value: '', countryCode: '' }];
|
|
32
33
|
this.selectedCountryName = '';
|
|
34
|
+
this.validationMessage = '';
|
|
35
|
+
this.phoneUtil = PhoneNumberUtil.getInstance();
|
|
33
36
|
}
|
|
34
37
|
ngOnInit() {
|
|
38
|
+
var _a, _b;
|
|
35
39
|
if (this.phoneValidator) {
|
|
36
40
|
this.loadCountryCodes();
|
|
37
41
|
this.dropdownData = this.countryCodes;
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
this.dropdownSelectedItem = selectedCountry;
|
|
44
|
-
this.selectedCountryName = selectedCountry.label;
|
|
42
|
+
const countryCodeToSelect = this.defaultCountry;
|
|
43
|
+
const def = this.countryCodes.find(item => item.countryCode === countryCodeToSelect);
|
|
44
|
+
if (def) {
|
|
45
|
+
this.dropdownSelectedItem = def;
|
|
46
|
+
this.selectedCountryName = def.label;
|
|
45
47
|
}
|
|
48
|
+
this.validatePhoneNumber((_a = this.inputFormControl) === null || _a === void 0 ? void 0 : _a.value, (_b = this.dropdownSelectedItem) === null || _b === void 0 ? void 0 : _b.countryCode);
|
|
46
49
|
}
|
|
50
|
+
this.inputFormControl.valueChanges.subscribe((value) => {
|
|
51
|
+
var _a;
|
|
52
|
+
this.validatePhoneNumber(value, (_a = this.dropdownSelectedItem) === null || _a === void 0 ? void 0 : _a.countryCode);
|
|
53
|
+
});
|
|
47
54
|
}
|
|
48
55
|
handleDropdownSelection(item) {
|
|
56
|
+
var _a, _b;
|
|
49
57
|
this.dropdownSelectedItem = item;
|
|
50
|
-
this.onDropdownSelection.emit(item);
|
|
58
|
+
this.onDropdownSelection.emit(item.countryCode);
|
|
51
59
|
this.selectedCountryName = item.label;
|
|
52
|
-
this.validatePhoneNumber(this.inputFormControl.value, this.dropdownSelectedItem.
|
|
60
|
+
this.validatePhoneNumber((_a = this.inputFormControl) === null || _a === void 0 ? void 0 : _a.value, (_b = this.dropdownSelectedItem) === null || _b === void 0 ? void 0 : _b.countryCode);
|
|
61
|
+
this.inputFormControl.patchValue({ countryCode: item.countryCode }, { emitEvent: false });
|
|
53
62
|
}
|
|
54
63
|
loadCountryCodes() {
|
|
55
64
|
const countries = getCountries();
|
|
56
|
-
this.countryCodes = countries.map(countryCode => ({
|
|
57
|
-
value: countryCode,
|
|
58
|
-
label: `${countryCode} (+${getCountryCallingCode(countryCode)})
|
|
65
|
+
this.countryCodes = countries.map((countryCode) => ({
|
|
66
|
+
value: getCountryCallingCode(countryCode).toString(),
|
|
67
|
+
label: `${countryCode} (+${getCountryCallingCode(countryCode)})`,
|
|
68
|
+
countryCode: countryCode,
|
|
59
69
|
}));
|
|
60
70
|
}
|
|
61
|
-
validatePhoneNumber(
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
71
|
+
validatePhoneNumber(value, countryCode) {
|
|
72
|
+
var _a, _b;
|
|
73
|
+
const phoneNumber = (value === null || value === void 0 ? void 0 : value.phoneNumber) || value;
|
|
74
|
+
if (phoneNumber && countryCode) {
|
|
75
|
+
try {
|
|
76
|
+
const number = this.phoneUtil.parseAndKeepRawInput(phoneNumber, countryCode);
|
|
77
|
+
const isValid = this.phoneUtil.isValidNumberForRegion(number, countryCode);
|
|
78
|
+
if (isValid) {
|
|
79
|
+
this.validationMessage = null;
|
|
80
|
+
this.onInvalidPhoneNumber.emit('');
|
|
81
|
+
}
|
|
82
|
+
else {
|
|
83
|
+
this.validationMessage = `Phone number invalid for country code: +${(_a = this.dropdownSelectedItem) === null || _a === void 0 ? void 0 : _a.value}(${(_b = this.dropdownSelectedItem) === null || _b === void 0 ? void 0 : _b.countryCode})`;
|
|
84
|
+
this.onInvalidPhoneNumber.emit(this.validationMessage);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
catch (error) {
|
|
88
|
+
this.validationMessage = 'Invalid input';
|
|
89
|
+
this.onInvalidPhoneNumber.emit(this.validationMessage);
|
|
90
|
+
}
|
|
65
91
|
}
|
|
66
92
|
}
|
|
93
|
+
onBlur() {
|
|
94
|
+
var _a, _b;
|
|
95
|
+
this.validatePhoneNumber((_a = this.inputFormControl) === null || _a === void 0 ? void 0 : _a.value, (_b = this.dropdownSelectedItem) === null || _b === void 0 ? void 0 : _b.countryCode);
|
|
96
|
+
}
|
|
67
97
|
}
|
|
68
98
|
PhoneInputComponent.ɵfac = function PhoneInputComponent_Factory(t) { return new (t || PhoneInputComponent)(); };
|
|
69
|
-
PhoneInputComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PhoneInputComponent, selectors: [["mis-phone-input"]], inputs: { dropdownHeight: "dropdownHeight", dropdownWidth: "dropdownWidth", inputHeight: "inputHeight", dropdownData: "dropdownData", dropdownSelectedItem: "dropdownSelectedItem",
|
|
99
|
+
PhoneInputComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PhoneInputComponent, selectors: [["mis-phone-input"]], inputs: { dropdownHeight: "dropdownHeight", dropdownWidth: "dropdownWidth", inputHeight: "inputHeight", dropdownData: "dropdownData", dropdownSelectedItem: "dropdownSelectedItem", label: "label", inputPlaceholder: "inputPlaceholder", inputFormControl: "inputFormControl", dropdownListWidth: "dropdownListWidth", dropdownListHeight: "dropdownListHeight", searchEnabled: "searchEnabled", inputType: "inputType", searchLabel: "searchLabel", defaultCountry: "defaultCountry", phoneValidator: "phoneValidator" }, outputs: { onDropdownSelection: "onDropdownSelection", onInvalidPhoneNumber: "onInvalidPhoneNumber" }, decls: 5, vars: 16, consts: [[1, "main-container-phone"], [3, "height", "dropdownListWidth", "dropdownListHeight", "width", "data", "selectedItem", "label", "searchEnabled", "multiLine", "searchLabel", "onChange"], [1, "details-field"], [1, "input-box"], [1, "black-text", 3, "ngStyle", "placeholder", "formControl", "type", "blur"]], template: function PhoneInputComponent_Template(rf, ctx) {
|
|
70
100
|
if (rf & 1) {
|
|
71
101
|
i0.ɵɵelementStart(0, "div", 0)(1, "mis-dropdown", 1);
|
|
72
102
|
i0.ɵɵlistener("onChange", function PhoneInputComponent_Template_mis_dropdown_onChange_1_listener($event) { return ctx.handleDropdownSelection($event); });
|
|
73
103
|
i0.ɵɵelementEnd();
|
|
74
|
-
i0.ɵɵelementStart(2, "div", 2)(3, "div", 3);
|
|
75
|
-
i0.ɵɵ
|
|
76
|
-
i0.ɵɵelementEnd()()();
|
|
104
|
+
i0.ɵɵelementStart(2, "div", 2)(3, "div", 3)(4, "input", 4);
|
|
105
|
+
i0.ɵɵlistener("blur", function PhoneInputComponent_Template_input_blur_4_listener() { return ctx.onBlur(); });
|
|
106
|
+
i0.ɵɵelementEnd()()()();
|
|
77
107
|
}
|
|
78
108
|
if (rf & 2) {
|
|
79
109
|
i0.ɵɵadvance(1);
|
|
@@ -85,7 +115,7 @@ PhoneInputComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PhoneIn
|
|
|
85
115
|
(function () {
|
|
86
116
|
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PhoneInputComponent, [{
|
|
87
117
|
type: Component,
|
|
88
|
-
args: [{ selector: "mis-phone-input", template: "<div class=\"main-container-phone\">\n <mis-dropdown [height]=\"dropdownHeight\" [dropdownListWidth]=\"dropdownListWidth\"[dropdownListHeight]=\"dropdownListHeight\" [width]=\"dropdownWidth\" [data]=\"dropdownData\"
|
|
118
|
+
args: [{ selector: "mis-phone-input", template: "<div class=\"main-container-phone\">\n <mis-dropdown \n [height]=\"dropdownHeight\" \n [dropdownListWidth]=\"dropdownListWidth\"\n [dropdownListHeight]=\"dropdownListHeight\" \n [width]=\"dropdownWidth\" \n [data]=\"dropdownData\"\n [selectedItem]=\"dropdownSelectedItem\" \n [label]=\"label\" \n [searchEnabled]=\"searchEnabled\" \n [multiLine]=\"false\"\n (onChange)=\"handleDropdownSelection($event)\" \n [searchLabel]=\"searchLabel\">\n </mis-dropdown>\n <div class=\"details-field\">\n <div class=\"input-box\">\n <input\n [ngStyle]=\"{'height': inputHeight }\"\n class=\"black-text\" \n [placeholder]=\"inputPlaceholder\"\n [formControl]=\"inputFormControl\" \n [type]=\"inputType\"\n (blur)=\"onBlur()\"\n />\n </div>\n </div>\n</div>\n", styles: [".main-container-phone{display:flex;border:1px solid #E0E0E0;border-radius:6px}.details-field label{display:inline-block;min-width:224px;margin-right:24px}.details-field .input-box{width:100%}.details-field .input-box input{width:100%;height:32px}input{padding:10px 16px;border:none;outline:none;color:#181f33;line-height:24px;font-size:16px;width:100%;height:auto;border-radius:6px}.black-text{color:#181f33;font-size:16px;line-height:24px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.main-container-phone ::ng-deep .item{padding:8px!important}.main-container-phone ::ng-deep .dropdown{border:unset!important}\n"] }]
|
|
89
119
|
}], function () { return []; }, { dropdownHeight: [{
|
|
90
120
|
type: Input
|
|
91
121
|
}], dropdownWidth: [{
|
|
@@ -96,8 +126,6 @@ PhoneInputComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PhoneIn
|
|
|
96
126
|
type: Input
|
|
97
127
|
}], dropdownSelectedItem: [{
|
|
98
128
|
type: Input
|
|
99
|
-
}], defaultCountryCode: [{
|
|
100
|
-
type: Input
|
|
101
129
|
}], label: [{
|
|
102
130
|
type: Input
|
|
103
131
|
}], inputPlaceholder: [{
|
|
@@ -118,6 +146,8 @@ PhoneInputComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PhoneIn
|
|
|
118
146
|
type: Input
|
|
119
147
|
}], searchLabel: [{
|
|
120
148
|
type: Input
|
|
149
|
+
}], defaultCountry: [{
|
|
150
|
+
type: Input
|
|
121
151
|
}], phoneValidator: [{
|
|
122
152
|
type: Input
|
|
123
153
|
}] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mis-crystal-design-system-phone-input.mjs","sources":["../../../projects/mis-components/phone-input/phone-input.component.ts","../../../projects/mis-components/phone-input/phone-input.component.html","../../../projects/mis-components/phone-input/phone-input.module.ts","../../../projects/mis-components/phone-input/mis-crystal-design-system-phone-input.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from \"@angular/core\";\nimport { UntypedFormControl } from \"@angular/forms\";\nimport { parsePhoneNumberFromString, getCountryCallingCode, CountryCode, getCountries } from 'libphonenumber-js';\nimport { DropdownItem } from \"mis-crystal-design-system/dropdown\";\n\n@Component({\n selector: \"mis-phone-input\",\n templateUrl: \"./phone-input.component.html\",\n styleUrls: [\"./phone-input.component.scss\"]\n})\nexport class PhoneInputComponent implements OnInit {\n @Input() dropdownHeight?: string = \"\";\n @Input() dropdownWidth?: string = \"\";\n @Input() inputHeight?;\n @Input() dropdownData: DropdownItem[] = [];\n @Input() dropdownSelectedItem: DropdownItem = { value: \"\", label: \"\" };\n @Input() defaultCountryCode?: string = 'IN';\n @Input() label: string;\n @Input() inputPlaceholder: string = 'Enter';\n @Input() inputFormControl: UntypedFormControl = new UntypedFormControl();\n @Output() onDropdownSelection = new EventEmitter<any>();\n @Output() onInvalidPhoneNumber = new EventEmitter<string>();\n @Input() dropdownListWidth = \"\";\n @Input() dropdownListHeight = \"\";\n @Input() searchEnabled: boolean = true;\n @Input() inputType: string = \"number\";\n @Input() searchLabel: string = \"Search Keyword\"; \n @Input() phoneValidator? = false;\n \n countryCodes: DropdownItem[] = [{label:'',value:''}];\n countryCode: CountryCode | undefined;\n selectedCountryName: string = '';\n\n constructor() {}\n\n ngOnInit() {\n if (this.phoneValidator) {\n this.loadCountryCodes();\n this.dropdownData = this.countryCodes;\n this.selectedCountryName = this.dropdownSelectedItem.label;\n }\n\n if (this.defaultCountryCode) {\n const selectedCountry = this.dropdownData.find(\n country => country.value.toUpperCase() === this.defaultCountryCode.toUpperCase()\n );\n if (selectedCountry) {\n this.dropdownSelectedItem = selectedCountry;\n this.selectedCountryName = selectedCountry.label;\n }\n }\n }\n\n handleDropdownSelection(item: DropdownItem){\n this.dropdownSelectedItem = item;\n this.onDropdownSelection.emit(item);\n this.selectedCountryName = item.label;\n this.validatePhoneNumber(this.inputFormControl.value, this.dropdownSelectedItem.value);\n }\n\n loadCountryCodes() {\n const countries = getCountries();\n this.countryCodes = countries.map(countryCode => ({\n value: countryCode,\n label: `${countryCode} (+${getCountryCallingCode(countryCode)})`\n }));\n }\n\n validatePhoneNumber(phoneNumber: string, countryCode: string) {\n const parsedPhoneNumber = parsePhoneNumberFromString(phoneNumber, countryCode as CountryCode);\n\n if (!parsedPhoneNumber || !parsedPhoneNumber.isValid()) {\n this.onInvalidPhoneNumber.emit(`Phone number is invalid for ${this.selectedCountryName}`);\n }\n }\n\n}\n","<div class=\"main-container-phone\">\n <mis-dropdown [height]=\"dropdownHeight\" [dropdownListWidth]=\"dropdownListWidth\"[dropdownListHeight]=\"dropdownListHeight\" [width]=\"dropdownWidth\" [data]=\"dropdownData\" [selectedItem]=\"dropdownSelectedItem\" [label]=\"label\" [searchEnabled]=\"searchEnabled\" [multiLine]=\"false\" (onChange)=\"handleDropdownSelection($event)\" [searchLabel]=\"searchLabel\"></mis-dropdown>\n <div class=\"details-field\">\n <div class=\"input-box\">\n <input\n [ngStyle]=\"{'height': inputHeight }\"\n class=\"black-text\" \n [placeholder]=\"inputPlaceholder\"\n [formControl]=\"inputFormControl\" \n [type]=\"inputType\"\n />\n </div>\n </div>\n</div>\n","import { CommonModule } from \"@angular/common\";\nimport { FormsModule } from \"@angular/forms\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { PhoneInputComponent } from \"./phone-input.component\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { ScrollingModule } from \"@angular/cdk-experimental/scrolling\";\nimport { DropdownModule } from \"mis-crystal-design-system/dropdown\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\n\n\n@NgModule({\n declarations: [PhoneInputComponent],\n imports: [CommonModule,ReactiveFormsModule, FormsModule, OverlayModule, ScrollingModule, DropdownModule],\n exports: [PhoneInputComponent]\n})\nexport class PhoneInputModule {\n static forRoot(): ModuleWithProviders<PhoneInputModule> {\n return { ngModule: PhoneInputModule, providers: [] };\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;MAUa,mBAAmB,CAAA;AAuB9B,IAAA,WAAA,GAAA;AAtBS,QAAA,IAAc,CAAA,cAAA,GAAY,EAAE,CAAC;AAC7B,QAAA,IAAa,CAAA,aAAA,GAAY,EAAE,CAAC;AAE5B,QAAA,IAAY,CAAA,YAAA,GAAmB,EAAE,CAAC;AAClC,QAAA,IAAoB,CAAA,oBAAA,GAAiB,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;AAC9D,QAAA,IAAkB,CAAA,kBAAA,GAAY,IAAI,CAAC;AAEnC,QAAA,IAAgB,CAAA,gBAAA,GAAW,OAAO,CAAC;AACnC,QAAA,IAAA,CAAA,gBAAgB,GAAuB,IAAI,kBAAkB,EAAE,CAAC;AAC/D,QAAA,IAAA,CAAA,mBAAmB,GAAG,IAAI,YAAY,EAAO,CAAC;AAC9C,QAAA,IAAA,CAAA,oBAAoB,GAAG,IAAI,YAAY,EAAU,CAAC;AACnD,QAAA,IAAiB,CAAA,iBAAA,GAAG,EAAE,CAAC;AACvB,QAAA,IAAkB,CAAA,kBAAA,GAAG,EAAE,CAAC;AACxB,QAAA,IAAa,CAAA,aAAA,GAAY,IAAI,CAAC;AAC9B,QAAA,IAAS,CAAA,SAAA,GAAW,QAAQ,CAAC;AAC7B,QAAA,IAAW,CAAA,WAAA,GAAW,gBAAgB,CAAC;AACvC,QAAA,IAAc,CAAA,cAAA,GAAI,KAAK,CAAC;AAEjC,QAAA,IAAA,CAAA,YAAY,GAAmB,CAAC,EAAC,KAAK,EAAC,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,CAAC,CAAC;AAErD,QAAA,IAAmB,CAAA,mBAAA,GAAW,EAAE,CAAC;KAEjB;IAEhB,QAAQ,GAAA;QACN,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,gBAAgB,EAAE,CAAC;AACxB,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;YACtC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC;AAC5D,SAAA;QAED,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAC3B,MAAM,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAC5C,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC,kBAAkB,CAAC,WAAW,EAAE,CACjF,CAAC;AACF,YAAA,IAAI,eAAe,EAAE;AACnB,gBAAA,IAAI,CAAC,oBAAoB,GAAG,eAAe,CAAC;AAC5C,gBAAA,IAAI,CAAC,mBAAmB,GAAG,eAAe,CAAC,KAAK,CAAC;AAClD,aAAA;AACF,SAAA;KACF;AAED,IAAA,uBAAuB,CAAC,IAAkB,EAAA;AACxC,QAAA,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;AACjC,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACpC,QAAA,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC;AACtC,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;KACxF;IAED,gBAAgB,GAAA;AACd,QAAA,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;QACjC,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC,GAAG,CAAC,WAAW,KAAK;AAChD,YAAA,KAAK,EAAE,WAAW;YAClB,KAAK,EAAE,GAAG,WAAW,CAAA,GAAA,EAAM,qBAAqB,CAAC,WAAW,CAAC,CAAG,CAAA,CAAA;AACjE,SAAA,CAAC,CAAC,CAAC;KACL;IAED,mBAAmB,CAAC,WAAmB,EAAE,WAAmB,EAAA;QAC1D,MAAM,iBAAiB,GAAG,0BAA0B,CAAC,WAAW,EAAE,WAA0B,CAAC,CAAC;QAE9F,IAAI,CAAC,iBAAiB,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,EAAE;YACtD,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAA+B,4BAAA,EAAA,IAAI,CAAC,mBAAmB,CAAE,CAAA,CAAC,CAAC;AAC3F,SAAA;KACF;;sFAhEU,mBAAmB,GAAA,CAAA,EAAA,CAAA;sEAAnB,mBAAmB,EAAA,SAAA,EAAA,CAAA,CAAA,iBAAA,CAAA,CAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,aAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,YAAA,EAAA,cAAA,EAAA,oBAAA,EAAA,sBAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,KAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,aAAA,EAAA,eAAA,EAAA,SAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,mBAAA,EAAA,qBAAA,EAAA,oBAAA,EAAA,sBAAA,EAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,CAAA,CAAA,CAAA,EAAA,sBAAA,CAAA,EAAA,CAAA,CAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,oBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,cAAA,EAAA,OAAA,EAAA,eAAA,EAAA,WAAA,EAAA,aAAA,EAAA,UAAA,CAAA,EAAA,CAAA,CAAA,EAAA,eAAA,CAAA,EAAA,CAAA,CAAA,EAAA,WAAA,CAAA,EAAA,CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,SAAA,EAAA,aAAA,EAAA,aAAA,EAAA,MAAA,CAAA,CAAA,EAAA,QAAA,EAAA,SAAA,4BAAA,CAAA,EAAA,EAAA,GAAA,EAAA;QAAA,IAAA,EAAA,GAAA,CAAA,EAAA;ACVhC,YAAA,EAAA,CAAA,cAAA,CAAA,CAAA,EAAA,KAAA,EAAA,CAAA,CAAkC,CAAA,CAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA;YACiP,EAAA,CAAA,UAAA,CAAA,UAAA,EAAA,SAAA,6DAAA,CAAA,MAAA,EAAA,EAAA,OAAY,mCAA+B,CAAC,EAAA,CAAA,CAAA;YAA6B,EAAe,CAAA,YAAA,EAAA,CAAA;AACzW,YAAA,EAAA,CAAA,cAAA,CAAA,CAAA,EAAA,KAAA,EAAA,CAAA,CAA2B,CAAA,CAAA,EAAA,KAAA,EAAA,CAAA,CAAA,CAAA;YAEvB,EAME,CAAA,SAAA,CAAA,CAAA,EAAA,OAAA,EAAA,CAAA,CAAA,CAAA;AACJ,YAAA,EAAA,CAAA,YAAA,EAAM,EAAA,EAAA,CAAA;;;AAVM,YAAA,EAAyB,CAAA,SAAA,CAAA,CAAA,CAAA,CAAA;AAAzB,YAAA,EAAyB,CAAA,UAAA,CAAA,QAAA,EAAA,GAAA,CAAA,cAAA,CAAA,CAAA,mBAAA,EAAA,GAAA,CAAA,iBAAA,CAAA,8CAAA,CAAA,OAAA,EAAA,GAAA,CAAA,aAAA,CAAA,CAAA,MAAA,EAAA,GAAA,CAAA,YAAA,CAAA,0CAAA,CAAA,OAAA,EAAA,GAAA,CAAA,KAAA,CAAA,CAAA,eAAA,EAAA,GAAA,CAAA,aAAA,CAAA,oBAAA,CAAA,aAAA,EAAA,GAAA,CAAA,WAAA,CAAA,CAAA;AAInC,YAAA,EAAoC,CAAA,SAAA,CAAA,CAAA,CAAA,CAAA;AAApC,YAAA,EAAoC,CAAA,UAAA,CAAA,SAAA,EAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,GAAA,EAAA,GAAA,CAAA,WAAA,CAAA,CAAA,CAAA,aAAA,EAAA,GAAA,CAAA,gBAAA,CAAA,qCAAA,CAAA,MAAA,EAAA,GAAA,CAAA,SAAA,CAAA,CAAA;;;;4EDK7B,mBAAmB,EAAA,CAAA;kBAL/B,SAAS;+BACE,iBAAiB,EAAA,QAAA,EAAA,suBAAA,EAAA,MAAA,EAAA,CAAA,4pBAAA,CAAA,EAAA,CAAA;0CAKlB,cAAc,EAAA,CAAA;sBAAtB,KAAK;gBACG,aAAa,EAAA,CAAA;sBAArB,KAAK;gBACG,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,YAAY,EAAA,CAAA;sBAApB,KAAK;gBACG,oBAAoB,EAAA,CAAA;sBAA5B,KAAK;gBACG,kBAAkB,EAAA,CAAA;sBAA1B,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,gBAAgB,EAAA,CAAA;sBAAxB,KAAK;gBACG,gBAAgB,EAAA,CAAA;sBAAxB,KAAK;gBACI,mBAAmB,EAAA,CAAA;sBAA5B,MAAM;gBACG,oBAAoB,EAAA,CAAA;sBAA7B,MAAM;gBACE,iBAAiB,EAAA,CAAA;sBAAzB,KAAK;gBACG,kBAAkB,EAAA,CAAA;sBAA1B,KAAK;gBACG,aAAa,EAAA,CAAA;sBAArB,KAAK;gBACG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBACG,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,cAAc,EAAA,CAAA;sBAAtB,KAAK;;;;MEZK,gBAAgB,CAAA;AAC3B,IAAA,OAAO,OAAO,GAAA;QACZ,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;KACtD;;gFAHU,gBAAgB,GAAA,CAAA,EAAA,CAAA;kEAAhB,gBAAgB,EAAA,CAAA,CAAA;sEAHjB,YAAY,EAAC,mBAAmB,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAE,cAAc,CAAA,EAAA,CAAA,CAAA;;4EAG5F,gBAAgB,EAAA,CAAA;kBAL5B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,mBAAmB,CAAC;AACnC,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAC,mBAAmB,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAE,cAAc,CAAC;oBACxG,OAAO,EAAE,CAAC,mBAAmB,CAAC;iBAC/B,CAAA;;;AACY,CAAA,YAAA,EAAA,CAAA,OAAA,SAAA,KAAA,WAAA,IAAA,SAAA,KAAA,EAAA,CAAA,kBAAA,CAAA,gBAAgB,EAJZ,EAAA,YAAA,EAAA,CAAA,mBAAmB,CACxB,EAAA,OAAA,EAAA,CAAA,YAAY,EAAC,mBAAmB,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAE,cAAc,aAC7F,mBAAmB,CAAA,EAAA,CAAA,CAAA,EAAA,GAAA;;ACb/B;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-phone-input.mjs","sources":["../../../projects/mis-components/phone-input/phone-input.component.ts","../../../projects/mis-components/phone-input/phone-input.component.html","../../../projects/mis-components/phone-input/phone-input.module.ts","../../../projects/mis-components/phone-input/mis-crystal-design-system-phone-input.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { PhoneNumberUtil } from 'google-libphonenumber';\nimport { getCountries, getCountryCallingCode, CountryCode } from 'libphonenumber-js';\nimport { DropdownItem } from 'mis-crystal-design-system/dropdown';\n\ninterface CustomDropdownItem extends DropdownItem {\n countryCode: string;\n}\n\n@Component({\n selector: \"mis-phone-input\",\n templateUrl: \"./phone-input.component.html\",\n styleUrls: [\"./phone-input.component.scss\"]\n})\nexport class PhoneInputComponent implements OnInit {\n @Input() dropdownHeight?: string = '';\n @Input() dropdownWidth?: string = '';\n @Input() inputHeight?;\n @Input() dropdownData: CustomDropdownItem[] = [];\n @Input() dropdownSelectedItem: CustomDropdownItem = { value: '', label: '', countryCode: '' };\n @Input() label: string;\n @Input() inputPlaceholder: string = 'Enter';\n @Input() inputFormControl: FormControl = new FormControl();\n @Output() onDropdownSelection = new EventEmitter<string>();\n @Output() onInvalidPhoneNumber = new EventEmitter<string>();\n @Input() dropdownListWidth = '';\n @Input() dropdownListHeight = '';\n @Input() searchEnabled: boolean = true;\n @Input() inputType: string = 'number';\n @Input() searchLabel: string = 'Search Keyword';\n @Input() defaultCountry: string = 'IN';\n @Input() phoneValidator? = true;\n\n countryCodes: CustomDropdownItem[] = [{ label: '', value: '', countryCode: '' }];\n selectedCountryName: string = '';\n validationMessage: string = '';\n private phoneUtil: PhoneNumberUtil;\n\n constructor() {\n this.phoneUtil = PhoneNumberUtil.getInstance();\n }\n\n ngOnInit() {\n if (this.phoneValidator) {\n this.loadCountryCodes();\n this.dropdownData = this.countryCodes;\n const countryCodeToSelect = this.defaultCountry;\n const def = this.countryCodes.find(item => item.countryCode === countryCodeToSelect);\n if (def) {\n this.dropdownSelectedItem = def;\n this.selectedCountryName = def.label;\n }\n this.validatePhoneNumber(this.inputFormControl?.value, this.dropdownSelectedItem?.countryCode);\n }\n\n this.inputFormControl.valueChanges.subscribe((value) => {\n this.validatePhoneNumber(value, this.dropdownSelectedItem?.countryCode);\n });\n }\n\n handleDropdownSelection(item: CustomDropdownItem) {\n this.dropdownSelectedItem = item;\n this.onDropdownSelection.emit(item.countryCode);\n this.selectedCountryName = item.label;\n this.validatePhoneNumber(this.inputFormControl?.value, this.dropdownSelectedItem?.countryCode);\n this.inputFormControl.patchValue({ countryCode: item.countryCode }, { emitEvent: false });\n }\n\n loadCountryCodes() {\n const countries = getCountries();\n this.countryCodes = countries.map((countryCode) => ({\n value: getCountryCallingCode(countryCode).toString(),\n label: `${countryCode} (+${getCountryCallingCode(countryCode)})`,\n countryCode: countryCode,\n }));\n }\n\n public validatePhoneNumber(value: any, countryCode: string) {\n const phoneNumber = value?.phoneNumber || value;\n if (phoneNumber && countryCode) {\n try {\n const number = this.phoneUtil.parseAndKeepRawInput(phoneNumber, countryCode);\n const isValid = this.phoneUtil.isValidNumberForRegion(number, countryCode);\n if (isValid) {\n this.validationMessage = null;\n this.onInvalidPhoneNumber.emit('');\n } else {\n this.validationMessage = `Phone number invalid for country code: +${this.dropdownSelectedItem?.value}(${this.dropdownSelectedItem?.countryCode})`;\n this.onInvalidPhoneNumber.emit(this.validationMessage);\n }\n } catch (error) {\n this.validationMessage = 'Invalid input';\n this.onInvalidPhoneNumber.emit(this.validationMessage);\n }\n }\n }\n\n onBlur() {\n this.validatePhoneNumber(this.inputFormControl?.value, this.dropdownSelectedItem?.countryCode);\n }\n}\n","<div class=\"main-container-phone\">\n <mis-dropdown \n [height]=\"dropdownHeight\" \n [dropdownListWidth]=\"dropdownListWidth\"\n [dropdownListHeight]=\"dropdownListHeight\" \n [width]=\"dropdownWidth\" \n [data]=\"dropdownData\"\n [selectedItem]=\"dropdownSelectedItem\" \n [label]=\"label\" \n [searchEnabled]=\"searchEnabled\" \n [multiLine]=\"false\"\n (onChange)=\"handleDropdownSelection($event)\" \n [searchLabel]=\"searchLabel\">\n </mis-dropdown>\n <div class=\"details-field\">\n <div class=\"input-box\">\n <input\n [ngStyle]=\"{'height': inputHeight }\"\n class=\"black-text\" \n [placeholder]=\"inputPlaceholder\"\n [formControl]=\"inputFormControl\" \n [type]=\"inputType\"\n (blur)=\"onBlur()\"\n />\n </div>\n </div>\n</div>\n","import { CommonModule } from \"@angular/common\";\nimport { FormsModule } from \"@angular/forms\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { PhoneInputComponent } from \"./phone-input.component\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { ScrollingModule } from \"@angular/cdk-experimental/scrolling\";\nimport { DropdownModule } from \"mis-crystal-design-system/dropdown\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\n\n\n@NgModule({\n declarations: [PhoneInputComponent],\n imports: [CommonModule,ReactiveFormsModule, FormsModule, OverlayModule, ScrollingModule, DropdownModule],\n exports: [PhoneInputComponent]\n})\nexport class PhoneInputModule {\n static forRoot(): ModuleWithProviders<PhoneInputModule> {\n return { ngModule: PhoneInputModule, providers: [] };\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { InjectionToken, Component, Inject, ViewChild, EventEmitter, Injector, Directive, Self, Optional, Input, Output, HostListener, NgModule } from '@angular/core';
|
|
3
|
-
import { parseZone } from 'moment-timezone';
|
|
4
3
|
import * as i1$1 from '@angular/forms';
|
|
5
4
|
import { UntypedFormControl } from '@angular/forms';
|
|
6
5
|
import * as i5 from 'mis-crystal-design-system/datepicker_v2';
|
|
7
6
|
import { TzDatepickerDirective, DatepickerModuleV2 } from 'mis-crystal-design-system/datepicker_v2';
|
|
7
|
+
import dayjs from 'dayjs';
|
|
8
|
+
import timezone from 'dayjs/plugin/timezone';
|
|
9
|
+
import utc from 'dayjs/plugin/utc';
|
|
10
|
+
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
|
|
11
|
+
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
|
|
12
|
+
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
|
8
13
|
import * as i1 from 'mis-crystal-design-system/toast';
|
|
9
14
|
import { ToastModule } from 'mis-crystal-design-system/toast';
|
|
10
15
|
import * as i2 from '@angular/common';
|
|
@@ -219,7 +224,7 @@ function TzDrpContainerComponent_span_39_Template(rf, ctx) {
|
|
|
219
224
|
if (rf & 2) {
|
|
220
225
|
const ctx_r6 = i0.ɵɵnextContext();
|
|
221
226
|
i0.ɵɵadvance(2);
|
|
222
|
-
i0.ɵɵtextInterpolate1("", (ctx_r6.localSelectedDates[0] == null ? null : ctx_r6.localSelectedDates[0].selectedDate) ? ctx_r6.localSelectedDates.length : ctx_r6.localSelectedDates.length - 1 && 0, " ");
|
|
227
|
+
i0.ɵɵtextInterpolate1("", ctx_r6.data.isSPickerSelected && (ctx_r6.localSelectedDates[0] == null ? null : ctx_r6.localSelectedDates[0].selectedDate) ? ctx_r6.localSelectedDates.length : ctx_r6.localSelectedDates.length - 1 && 0, " ");
|
|
223
228
|
}
|
|
224
229
|
}
|
|
225
230
|
function TzDrpContainerComponent_span_40_Template(rf, ctx) {
|
|
@@ -264,13 +269,18 @@ function TzDrpContainerComponent_button_45_Template(rf, ctx) {
|
|
|
264
269
|
}
|
|
265
270
|
const _c6 = function (a0) { return { "display": a0 }; };
|
|
266
271
|
const _c7 = function (a0) { return { "disabled-month": a0 }; };
|
|
272
|
+
dayjs.extend(utc);
|
|
273
|
+
dayjs.extend(timezone);
|
|
274
|
+
dayjs.extend(customParseFormat);
|
|
275
|
+
dayjs.extend(isSameOrAfter);
|
|
276
|
+
dayjs.extend(isSameOrBefore);
|
|
267
277
|
class TzDrpContainerComponent {
|
|
268
278
|
constructor(data, toast, cdr) {
|
|
269
|
-
var _a, _b, _c, _d, _e, _f;
|
|
279
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
270
280
|
this.toast = toast;
|
|
271
281
|
this.cdr = cdr;
|
|
272
|
-
this.
|
|
273
|
-
return
|
|
282
|
+
this.dayjsInstance = (...args) => {
|
|
283
|
+
return dayjs(...args);
|
|
274
284
|
};
|
|
275
285
|
this.rawWeekDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
|
|
276
286
|
this.weekDays = [];
|
|
@@ -291,17 +301,18 @@ class TzDrpContainerComponent {
|
|
|
291
301
|
this.singleDateSelectedValue = '';
|
|
292
302
|
this.data = data;
|
|
293
303
|
this.localSelectedDatesRange = this.data.datesRange;
|
|
294
|
-
const startDate =
|
|
295
|
-
const endDate =
|
|
304
|
+
const startDate = dayjs((_a = this.localSelectedDatesRange) === null || _a === void 0 ? void 0 : _a.startDate, this.data.dpConfig.format);
|
|
305
|
+
const endDate = dayjs((_b = this.localSelectedDatesRange) === null || _b === void 0 ? void 0 : _b.endDate, this.data.dpConfig.format);
|
|
296
306
|
if (startDate && endDate) {
|
|
297
|
-
this.dateRangeLength =
|
|
307
|
+
this.dateRangeLength = endDate.diff(startDate, 'day') + 1;
|
|
298
308
|
}
|
|
299
309
|
this.localSelectedDates = this.data.dates;
|
|
300
310
|
if (!this.data.isSPickerSelected) {
|
|
301
311
|
this.formControl.setValue("Date Range");
|
|
302
312
|
this.isDatesValid = false;
|
|
303
|
-
if (this.localSelectedDatesRange.startDate && this.localSelectedDatesRange.endDate) {
|
|
313
|
+
if (((_c = this.localSelectedDatesRange) === null || _c === void 0 ? void 0 : _c.startDate) && ((_d = this.localSelectedDatesRange) === null || _d === void 0 ? void 0 : _d.endDate)) {
|
|
304
314
|
this.isDatesValid = true;
|
|
315
|
+
this.calculateDateRangeLength();
|
|
305
316
|
}
|
|
306
317
|
}
|
|
307
318
|
else {
|
|
@@ -310,22 +321,22 @@ class TzDrpContainerComponent {
|
|
|
310
321
|
this.isDatesValid = true;
|
|
311
322
|
}
|
|
312
323
|
}
|
|
313
|
-
if ((
|
|
314
|
-
this.
|
|
315
|
-
return
|
|
324
|
+
if ((_f = (_e = this.data) === null || _e === void 0 ? void 0 : _e.dpConfig) === null || _f === void 0 ? void 0 : _f.timezone) {
|
|
325
|
+
this.dayjsInstance = (...args) => {
|
|
326
|
+
return dayjs(...args).tz(this.data.dpConfig.timezone);
|
|
316
327
|
};
|
|
317
328
|
}
|
|
318
|
-
this.currentMonthNumber = this.
|
|
319
|
-
this.nextMonthNumber = this.
|
|
329
|
+
this.currentMonthNumber = this.dayjsInstance().month();
|
|
330
|
+
this.nextMonthNumber = this.dayjsInstance().add(1, "month").month();
|
|
320
331
|
this.currentMonth = getMonth(this.currentMonthNumber);
|
|
321
332
|
this.nextMonth = getMonth(this.nextMonthNumber);
|
|
322
|
-
this.currentYearNumber = this.
|
|
323
|
-
this.nextYearNumber = this.
|
|
333
|
+
this.currentYearNumber = this.dayjsInstance().year();
|
|
334
|
+
this.nextYearNumber = this.dayjsInstance().add(1, "month").year();
|
|
324
335
|
this.weekDays = this.rawWeekDays.map((day, index) => ({
|
|
325
336
|
label: `${day[0]}${day.slice(1).toLowerCase()}`,
|
|
326
|
-
isCurrentDay: this.
|
|
337
|
+
isCurrentDay: this.dayjsInstance().day() === index
|
|
327
338
|
}));
|
|
328
|
-
if (!((
|
|
339
|
+
if (!((_h = (_g = this.data) === null || _g === void 0 ? void 0 : _g.dpConfig) === null || _h === void 0 ? void 0 : _h.format)) {
|
|
329
340
|
this.data.dpConfig = Object.assign(Object.assign({}, this.data.dpConfig), { format: DATE_FORMAT });
|
|
330
341
|
}
|
|
331
342
|
}
|
|
@@ -350,16 +361,16 @@ class TzDrpContainerComponent {
|
|
|
350
361
|
this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
|
|
351
362
|
return;
|
|
352
363
|
}
|
|
353
|
-
selectedStartDate = this.
|
|
364
|
+
selectedStartDate = this.dayjsInstance((_b = this.localSelectedDatesRange) === null || _b === void 0 ? void 0 : _b.startDate, this.data.dpConfig.format);
|
|
354
365
|
}
|
|
355
366
|
else {
|
|
356
|
-
selectedStartDate = this.
|
|
367
|
+
selectedStartDate = this.dayjsInstance((_c = this.localSelectedDates) === null || _c === void 0 ? void 0 : _c[0].selectedDate, this.data.dpConfig.format);
|
|
357
368
|
}
|
|
358
369
|
if (selectedStartDate.isValid()) {
|
|
359
370
|
this.currentYearNumber = selectedStartDate.year();
|
|
360
371
|
this.nextYearNumber = selectedStartDate.add(1, "month").year();
|
|
361
|
-
this.currentMonthNumber = selectedStartDate.get("month")
|
|
362
|
-
this.nextMonthNumber = selectedStartDate.add(1, "month").month()
|
|
372
|
+
this.currentMonthNumber = selectedStartDate.get("month");
|
|
373
|
+
this.nextMonthNumber = selectedStartDate.add(1, "month").month();
|
|
363
374
|
if (this.currentMonthNumber === -1) {
|
|
364
375
|
this.currentMonthNumber = 11;
|
|
365
376
|
}
|
|
@@ -373,18 +384,18 @@ class TzDrpContainerComponent {
|
|
|
373
384
|
this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
|
|
374
385
|
}
|
|
375
386
|
calculateMinMaxDays() {
|
|
376
|
-
const currentInstance = this.
|
|
377
|
-
const minDate = this.
|
|
387
|
+
const currentInstance = this.dayjsInstance().year(this.currentYearNumber).month(this.currentMonthNumber);
|
|
388
|
+
const minDate = !!this.data.dpConfig.minDate ? this.dayjsInstance(this.data.dpConfig.minDate, this.data.dpConfig.format) : dayjs('invalid');
|
|
378
389
|
if (minDate.isValid()) {
|
|
379
390
|
this.isPreviousMonthDisabled = minDate.isSameOrAfter(currentInstance, "month");
|
|
380
391
|
}
|
|
381
|
-
const maxDate = this.
|
|
392
|
+
const maxDate = !!this.data.dpConfig.maxDate ? this.dayjsInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format) : dayjs('invalid');
|
|
382
393
|
if (maxDate.isValid()) {
|
|
383
394
|
this.isNextMonthDisabled = maxDate.isSameOrBefore(currentInstance, "month");
|
|
384
395
|
}
|
|
385
396
|
}
|
|
386
397
|
navigateMonth(direction) {
|
|
387
|
-
let thisMonth =
|
|
398
|
+
let thisMonth = dayjs().year(this.currentYearNumber).month(this.currentMonthNumber);
|
|
388
399
|
if (direction === "NEXT") {
|
|
389
400
|
thisMonth = thisMonth.add(1, "month");
|
|
390
401
|
}
|
|
@@ -417,22 +428,23 @@ class TzDrpContainerComponent {
|
|
|
417
428
|
generateDates(month, currentYearNumber) {
|
|
418
429
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
419
430
|
let dates = [];
|
|
420
|
-
const daysInMonth =
|
|
431
|
+
const daysInMonth = dayjs().year(currentYearNumber).month(month).daysInMonth();
|
|
421
432
|
for (let currentDate = 1; currentDate <= daysInMonth; currentDate++) {
|
|
422
|
-
const date = this.
|
|
433
|
+
const date = this.dayjsInstance().year(currentYearNumber).month(month).date(currentDate);
|
|
423
434
|
const dateString = date.format(this.data.dpConfig.format);
|
|
424
435
|
let isDisabledDay = this.data.datesDisabled.some(d => d === dateString);
|
|
425
|
-
const minDate = this.
|
|
436
|
+
const minDate = !!this.data.dpConfig.minDate ? this.dayjsInstance(this.data.dpConfig.minDate, this.data.dpConfig.format) : dayjs('invalid');
|
|
426
437
|
if (!isDisabledDay && minDate.isValid()) {
|
|
427
438
|
isDisabledDay = minDate.isAfter(date, "day");
|
|
428
439
|
}
|
|
429
|
-
const maxDate = this.
|
|
440
|
+
const maxDate = !!this.data.dpConfig.maxDate ? this.dayjsInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format) : dayjs('invalid');
|
|
430
441
|
if (!isDisabledDay && maxDate.isValid()) {
|
|
431
442
|
isDisabledDay = maxDate.isBefore(date, "day");
|
|
432
443
|
}
|
|
433
|
-
const isCurrentDay = this.
|
|
434
|
-
this.
|
|
444
|
+
const isCurrentDay = this.dayjsInstance().year(currentYearNumber).month(month).date(currentDate).format(this.data.dpConfig.format) ===
|
|
445
|
+
this.dayjsInstance().format(this.data.dpConfig.format);
|
|
435
446
|
let isSelectedDay = false;
|
|
447
|
+
console.log('abhay12', this.localSelectedDates);
|
|
436
448
|
for (const selectedDateConfig of this.localSelectedDates) {
|
|
437
449
|
if (!isSelectedDay && date.format(this.data.dpConfig.format) === selectedDateConfig.selectedDate) {
|
|
438
450
|
isSelectedDay = true;
|
|
@@ -449,8 +461,8 @@ class TzDrpContainerComponent {
|
|
|
449
461
|
const isSelectedStartDay = !isDisabledDay &&
|
|
450
462
|
((_b = (_a = this.localSelectedDatesRange) === null || _a === void 0 ? void 0 : _a.startDate) !== null && _b !== void 0 ? _b : false) &&
|
|
451
463
|
date.format(this.data.dpConfig.format) === ((_c = this.localSelectedDatesRange) === null || _c === void 0 ? void 0 : _c.startDate);
|
|
452
|
-
const isAfterSelectedStartDate = this.
|
|
453
|
-
const isBeforeSelectedEndDate = this.
|
|
464
|
+
const isAfterSelectedStartDate = this.dayjsInstance(date).isAfter(dayjs((_d = this.localSelectedDatesRange) === null || _d === void 0 ? void 0 : _d.startDate, this.data.dpConfig.format), "day");
|
|
465
|
+
const isBeforeSelectedEndDate = this.dayjsInstance(date).isBefore(dayjs((_e = this.localSelectedDatesRange) === null || _e === void 0 ? void 0 : _e.endDate, this.data.dpConfig.format), "day");
|
|
454
466
|
const inRangeDay = ((_g = (_f = this.localSelectedDatesRange) === null || _f === void 0 ? void 0 : _f.startDate) !== null && _g !== void 0 ? _g : false) &&
|
|
455
467
|
((_j = (_h = this.localSelectedDatesRange) === null || _h === void 0 ? void 0 : _h.endDate) !== null && _j !== void 0 ? _j : false) &&
|
|
456
468
|
isAfterSelectedStartDate &&
|
|
@@ -478,19 +490,19 @@ class TzDrpContainerComponent {
|
|
|
478
490
|
return dates;
|
|
479
491
|
}
|
|
480
492
|
selectDay(from, day) {
|
|
481
|
-
var _a, _b, _c
|
|
493
|
+
var _a, _b, _c;
|
|
482
494
|
if (day.date <= 0)
|
|
483
495
|
return;
|
|
484
496
|
if (!this.data.isSPickerSelected) {
|
|
485
497
|
if (!day.isDisabledDay) {
|
|
486
498
|
if (this.selectionStarted) {
|
|
487
|
-
const
|
|
499
|
+
const dayjsDay = dayjs()
|
|
488
500
|
.year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
|
|
489
501
|
.month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
|
|
490
502
|
.date(day.date);
|
|
491
|
-
if (
|
|
503
|
+
if (dayjsDay.isBefore(dayjs((_a = this.localSelectedDatesRange) === null || _a === void 0 ? void 0 : _a.startDate, this.data.dpConfig.format), "day")) {
|
|
492
504
|
this.localSelectedDatesRange = {
|
|
493
|
-
startDate:
|
|
505
|
+
startDate: dayjsDay.format(this.data.dpConfig.format),
|
|
494
506
|
endDate: null
|
|
495
507
|
};
|
|
496
508
|
this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
|
|
@@ -498,12 +510,12 @@ class TzDrpContainerComponent {
|
|
|
498
510
|
return;
|
|
499
511
|
}
|
|
500
512
|
this.selectionStarted = false;
|
|
501
|
-
this.localSelectedDatesRange = Object.assign(Object.assign({}, this.localSelectedDatesRange), { endDate:
|
|
513
|
+
this.localSelectedDatesRange = Object.assign(Object.assign({}, this.localSelectedDatesRange), { endDate: dayjsDay.format(this.data.dpConfig.format) });
|
|
502
514
|
}
|
|
503
515
|
else {
|
|
504
516
|
this.selectionStarted = true;
|
|
505
517
|
this.localSelectedDatesRange = {
|
|
506
|
-
startDate:
|
|
518
|
+
startDate: dayjs()
|
|
507
519
|
.year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
|
|
508
520
|
.month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
|
|
509
521
|
.date(day.date)
|
|
@@ -518,14 +530,10 @@ class TzDrpContainerComponent {
|
|
|
518
530
|
this.isDatesValid = true;
|
|
519
531
|
}
|
|
520
532
|
}
|
|
521
|
-
|
|
522
|
-
const endDate = new Date((_e = this.localSelectedDatesRange) === null || _e === void 0 ? void 0 : _e.endDate);
|
|
523
|
-
if (startDate && endDate) {
|
|
524
|
-
this.dateRangeLength = (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24) + 1;
|
|
525
|
-
}
|
|
533
|
+
this.calculateDateRangeLength();
|
|
526
534
|
}
|
|
527
535
|
else {
|
|
528
|
-
const currentSelection =
|
|
536
|
+
const currentSelection = dayjs()
|
|
529
537
|
.year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
|
|
530
538
|
.month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
|
|
531
539
|
.date(day.date).format(this.data.dpConfig.format);
|
|
@@ -576,11 +584,19 @@ class TzDrpContainerComponent {
|
|
|
576
584
|
this.data.close();
|
|
577
585
|
}
|
|
578
586
|
changePicker(event) {
|
|
587
|
+
var _a, _b;
|
|
579
588
|
this.formControl.setValue(event);
|
|
580
589
|
this.singleDatePickerSelected = false;
|
|
590
|
+
this.data.isSPickerSelected = false;
|
|
591
|
+
this.data.isSPickerSelected = false;
|
|
592
|
+
this.openElement = false;
|
|
581
593
|
if (event === "Date Range") {
|
|
582
594
|
this.openElement = false;
|
|
583
595
|
this.data.isSPickerSelected = false;
|
|
596
|
+
if (((_a = this.localSelectedDatesRange) === null || _a === void 0 ? void 0 : _a.startDate) && ((_b = this.localSelectedDatesRange) === null || _b === void 0 ? void 0 : _b.endDate)) {
|
|
597
|
+
this.isDatesValid = true;
|
|
598
|
+
this.calculateDateRangeLength();
|
|
599
|
+
}
|
|
584
600
|
}
|
|
585
601
|
else if (event === "Single Date") {
|
|
586
602
|
this.singleDatePickerSelected = true;
|
|
@@ -591,6 +607,15 @@ class TzDrpContainerComponent {
|
|
|
591
607
|
this.data.isSPickerSelected = true;
|
|
592
608
|
}
|
|
593
609
|
}
|
|
610
|
+
calculateDateRangeLength() {
|
|
611
|
+
if (this.localSelectedDatesRange) {
|
|
612
|
+
const startDate = !!this.localSelectedDatesRange.startDate ? this.dayjsInstance(this.localSelectedDatesRange.startDate, this.data.dpConfig.format) : dayjs('invalid');
|
|
613
|
+
const endDate = !!this.localSelectedDatesRange.endDate ? this.dayjsInstance(this.localSelectedDatesRange.endDate, this.data.dpConfig.format) : dayjs('invalid');
|
|
614
|
+
if (startDate && endDate) {
|
|
615
|
+
this.dateRangeLength = endDate.diff(startDate, 'day') + 1;
|
|
616
|
+
}
|
|
617
|
+
}
|
|
618
|
+
}
|
|
594
619
|
ngOnDestroy() {
|
|
595
620
|
if (this.singleDatePickerElement) {
|
|
596
621
|
this.singleDatePickerElement.close();
|
|
@@ -710,7 +735,7 @@ TzDrpContainerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TzD
|
|
|
710
735
|
(function () {
|
|
711
736
|
(typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TzDrpContainerComponent, [{
|
|
712
737
|
type: Component,
|
|
713
|
-
args: [{ selector: "mis-tz-sdp", template: "<div class=\"daterangepicker-container\" [ngClass]=\"data.isSingleDatePickerEnable?'single-date-picker-enabled':''\">\n <div class=\"radio-container\">\n <!-- <label>\n <input type=\"radio\" (change)=\"changePicker($event)\" name=\"dateSelection\" value=\"SpecificDate\" [checked]=\"data.isSPickerSelected\"> Specific Date(s)\n</label>\n<label>\n <input type=\"radio\" (change)=\"changePicker($event)\" name=\"dateSelection\" value=\"DateRange\" [checked]=\"!data.isSPickerSelected\" >Date Range\n</label> -->\n<div class=\"label\" *ngFor=\"let picker of datePickerValue\">\n <mis-radio class=\"input\" [name]=\"'dateSelection'\" [value]=\"picker\" (valueChange)=\"changePicker($event)\" ngDefaultControl [formControl]=\"formControl\"></mis-radio>\n <span>{{picker}}</span>\n</div>\n</div>\n<div class=\"specific-datepicker-container\" [ngStyle]=\"{'display': singleDatePickerSelected ? 'none' : ''}\">\n <div class=\"daterangepicker-container__view\">\n <div class=\"datepicker__left\">\n <div class=\"daterangepicker-container__header__prabu\">\n <div\n class=\"daterangepicker-container__arrow__icon\"\n (click)=\"!isPreviousMonthDisabled && navigateMonth('PREVIOUS')\"\n [ngClass]=\"{\n 'disabled-month': isPreviousMonthDisabled\n }\"\n >\n <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z\"\n fill=\"#181F33\"\n ></path>\n </svg>\n </div>\n <span> {{ currentMonth }} {{ currentYearNumber }} </span>\n <div></div>\n </div>\n <div class=\"daterangepicker-container__body\">\n <div class=\"daterangepicker-container__weekdays\">\n <div class=\"daterangepicker-container__weekday\" *ngFor=\"let weekDay of weekDays\">\n <span [ngClass]=\"{\n 'current-day': weekDay.isCurrentDay && (currentMonthNumber === todayMonthNumber)\n }\">{{ weekDay.label }}</span>\n </div>\n </div>\n <div class=\"daterangepicker-container__days\">\n <div\n class=\"daterangepicker-container__day\"\n [ngClass]=\"{\n 'selected-day': day.isSelectedDay && data.isSPickerSelected,\n 'disabled-day': day.isDisabledDay,\n 'selected-start-day': day.isSelectedStartDay && !data.isSPickerSelected,\n 'selected-end-day': day.isSelectedEndDay && !data.isSPickerSelected,\n 'in-range-day': day.inRangeDay && !data.isSPickerSelected,\n 'is-valid-date': day.date > 0 && !data.isSPickerSelected && !(day.isSelectedStartDay && day.isSelectedEndDay)\n }\"\n [ngStyle]=\"{'margin-right': !data.isSPickerSelected ? '0px' : '1px','width': !data.isSPickerSelected ? '36px' : '35px','justify-content': day.isHoliday ? 'flex-start' : 'center','padding-top': day.isHoliday ? '2.8px' : '0px','height': day.isHoliday ? '33px' : '36px'}\"\n *ngFor=\"let day of currentMonthDates\"\n (click)=\"selectDay('LEFT',day)\"\n >\n <div [ngClass]=\"{\n 'circular-dot': day.isHoliday\n }\"></div>\n <span *ngIf=\"day.date > 0\" [ngClass]=\"{\n 'current-day': day.isCurrentDay,\n 'holiday-text': day.isHoliday || day.isWeekOff\n }\" >\n {{ day.date }}\n </span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"datepicker__right\">\n <div class=\"daterangepicker-container__header__prabu\">\n <div></div>\n <span> {{ nextMonth }} {{ nextYearNumber }} </span>\n <div\n class=\"daterangepicker-container__arrow__icon\"\n (click)=\"!isNextMonthDisabled && navigateMonth('NEXT')\"\n [ngClass]=\"{\n 'disabled-month': isNextMonthDisabled\n }\"\n >\n <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z\"\n fill=\"#181F33\"\n ></path>\n </svg>\n </div>\n </div>\n <div class=\"daterangepicker-container__body\">\n <div class=\"daterangepicker-container__weekdays\">\n <div class=\"daterangepicker-container__weekday\" *ngFor=\"let weekDay of weekDays\" >\n <span >{{ weekDay.label }}</span>\n </div>\n </div>\n <div class=\"daterangepicker-container__days\">\n <div\n class=\"daterangepicker-container__day\"\n [ngClass]=\"{\n 'selected-day': day.isSelectedDay && data.isSPickerSelected,\n 'disabled-day': day.isDisabledDay,\n 'selected-start-day': day.isSelectedStartDay && !data.isSPickerSelected,\n 'selected-end-day': day.isSelectedEndDay && !data.isSPickerSelected,\n 'in-range-day': day.inRangeDay && !data.isSPickerSelected,\n 'is-valid-date': day.date > 0 && !data.isSPickerSelected && !(day.isSelectedStartDay && day.isSelectedEndDay)\n }\"\n [ngStyle]=\"{ 'margin-right': !data.isSPickerSelected ? '0px' : '1px','width': !data.isSPickerSelected ? '36px' : '35px','justify-content': day.isHoliday ? 'flex-start' : 'center','padding-top': day.isHoliday ? '3px' : '0px','height': day.isHoliday ? '33px' : '36px'}\"\n *ngFor=\"let day of nextMonthDates\"\n (click)=\"selectDay('RIGHT',day)\"\n >\n <div [ngClass]=\"{\n 'circular-dot': day.isHoliday\n }\"></div>\n <span *ngIf=\"day.date > 0\" [ngClass]=\"{\n 'current-day': day.isCurrentDay && (currentMonthNumber === todayMonthNumber),\n 'holiday-text': day.isHoliday || day.isWeekOff\n }\" >\n {{ day.date }}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"weekOffs_holidays_container\">\n <span>Weekly offs: <span *ngFor=\"let weekOff of data.weekOffs; let last = last\">{{weekOff}} <span *ngIf=\"!last\">,</span></span></span>\n <span >Holidays <span class=\"circular-dot\" style=\"display: inline-block; margin-left: 10px;\"></span></span>\n </div>\n <div class=\"daterangepicker__footer\">\n <span *ngIf=\"data.isSPickerSelected\"><span>{{localSelectedDates[0]?.selectedDate ? localSelectedDates.length : (localSelectedDates.length -1 && 0)}} </span>day(s) selected</span>\n <span *ngIf=\"!data.isSPickerSelected\"><span>{{dateRangeLength > 0 ? dateRangeLength : 0 }} </span>day(s) selected</span>\n <div class=\"footer_action_btn\">\n <button mis-button size=\"md\" type=\"none\" (click)=\"cancelDatePicker()\" >Cancel</button>\n <button *ngIf=\"data.isSPickerSelected\" mis-button size=\"md\" type=\"primary\" (click)=\"applyDates()\" [disabled]=\"!isDatesValid\" >Apply</button>\n <button *ngIf=\"!data.isSPickerSelected\" mis-button size=\"md\" type=\"primary\" (click)=\"applyDatesRange()\" [disabled]=\"!isDatesValid || (dateRangeLength === 0)\" >Apply</button>\n </div>\n </div>\n </div>\n <div class=\"single-datepicker-container\" [ngStyle]=\"{'display': !singleDatePickerSelected ? 'none' : 'block'}\">\n <input\n misTzDp\n misInput\n type=\"text\"\n readonly\n class=\"date-input\"\n [dpConfig]=\"data.dpConfig\"\n placeholder=\"Select\"\n (dateChange)=\"onSingleDateChange($event)\"\n [selectedDate]=\"singleDateSelectedValue\"\n positionX=\"center\"\n positionY=\"top\"\n offsetX = 71\n offsetY = -1\n [value]=\"singleDateSelectedValue\"\n [disableBoxShadow]=\"true\"\n [disableOverLay]=\"true\"\n [openElement]=\"openElement\"\n #singleDatePickerElement\n />\n </div>\n\n</div>\n", styles: [".daterangepicker-container{background:#ffffff;border:1px solid #e0e0e0;box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:12px;display:flex;flex-direction:column;font-family:Lato;overflow:hidden;-webkit-user-select:none;user-select:none}.daterangepicker-container.single-date-picker-enabled{flex-direction:row}.daterangepicker-container .radio-container{display:flex;align-items:center;height:48px;padding:8px 0;justify-content:center;border-radius:12px 12px 0 0;border-bottom:1px solid var(--lt-bg-ntrl-seperators, #e0e0e0);background:var(--lt-text-white, #fff)}.daterangepicker-container .radio-container .label{display:flex;align-items:center}.daterangepicker-container .radio-container .label .input{margin-right:8px;width:20px;height:20px}.daterangepicker-container .radio-container .label:first-child{padding-right:16px;border-right:1px solid #e0e0e0}.daterangepicker-container .radio-container .label:nth-child(2){padding-left:16px}.daterangepicker-container.single-date-picker-enabled .radio-container{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:16px;height:288px;padding:20px;border-right:1px solid #e0e0e0!important;border-radius:0}.daterangepicker-container.single-date-picker-enabled .radio-container .label:first-child{padding-right:0;border-right:0px}.daterangepicker-container.single-date-picker-enabled .radio-container .label:nth-child(2){padding-left:0}.daterangepicker-container .daterangepicker-container__view{display:flex;gap:24px;padding:16px}.daterangepicker-container .daterangepicker-container__view .datepicker__left,.daterangepicker-container .daterangepicker-container__view .datepicker__right{display:flex;flex-direction:column}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu{display:flex;height:32px;justify-content:space-between;align-items:center;width:100%;padding-bottom:16px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu span{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon.disabled-month{opacity:.5;cursor:not-allowed}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon:not(.disabled-month):hover{cursor:pointer;background-color:#cbddfb}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon:nth-child(1){transform:rotate(180deg)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body{height:100%;width:252px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays{width:100%;display:flex;padding-bottom:10px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday{width:36px;height:18px;text-align:center}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday span{font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.2px;text-align:center;color:#6a737d}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday span.current-day{font-weight:700;letter-spacing:.25px;color:#181f33}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days{display:flex;flex-wrap:wrap}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day{flex-direction:column;width:35px;height:36px;display:flex;align-items:center;justify-content:center;margin-bottom:1px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day:not(.in-range-day):not(.selected-start-day):not(.selected-end-day){border-radius:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day{cursor:default}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day:hover{background-color:transparent}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day>span{color:#6a737d}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-start-day):not(.selected-end-day):hover{background-color:#cbddfb;cursor:pointer}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.2px;text-align:center;color:#181f33}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.current-day{font-weight:700;letter-spacing:.25px;color:#0937b2}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.selected-day{color:#fff}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.disabled-day{color:#6a737d}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-start-day{background-color:#0937b2;border-radius:20px 4px 4px 20px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-start-day>span{color:#fff!important}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day{background-color:#0937b2;border-radius:0 20px 20px 0}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day>span{color:#fff!important}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day.selected-start-day{border-radius:50%!important}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .in-range-day:not(.disabled-day){background-color:#cbddfb}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-day{background-color:#0937b2;border-radius:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-day>span{color:#fff!important}.daterangepicker-container .weekOffs_holidays_container{font-size:12px;color:var(--lt-text-muted, #6a737d);padding:8px 24px 12px}.daterangepicker-container .weekOffs_holidays_container>span{margin-right:16px}.daterangepicker-container .weekOffs_holidays_container>span>span{color:#181f33}.daterangepicker-container .daterangepicker__footer{display:flex;justify-content:space-between;border-top:1px solid #e0e0e0;padding:16px 24px;word-spacing:4px}.daterangepicker-container .daterangepicker__footer span{font-family:Lato;font-size:15px;font-weight:400;align-self:center}.daterangepicker-container .daterangepicker__footer span span{font-weight:700}.daterangepicker-container .daterangepicker__footer .footer_action_btn{display:flex}.daterangepicker-container .daterangepicker__footer button{width:104px;height:44px;border-radius:8px;margin-left:24px;font-weight:700}.circular-dot{width:5px;height:5px;background-color:#ed711c;border-radius:50%}.holiday-text{color:#6a737d!important}.display-none{display:none!important}.single-datepicker-container{width:291px}\n"] }]
|
|
738
|
+
args: [{ selector: "mis-tz-sdp", template: "<div class=\"daterangepicker-container\" [ngClass]=\"data.isSingleDatePickerEnable?'single-date-picker-enabled':''\">\n <div class=\"radio-container\">\n <!-- <label>\n <input type=\"radio\" (change)=\"changePicker($event)\" name=\"dateSelection\" value=\"SpecificDate\" [checked]=\"data.isSPickerSelected\"> Specific Date(s)\n</label>\n<label>\n <input type=\"radio\" (change)=\"changePicker($event)\" name=\"dateSelection\" value=\"DateRange\" [checked]=\"!data.isSPickerSelected\" >Date Range\n</label> -->\n<div class=\"label\" *ngFor=\"let picker of datePickerValue\">\n <mis-radio class=\"input\" [name]=\"'dateSelection'\" [value]=\"picker\" (valueChange)=\"changePicker($event)\" ngDefaultControl [formControl]=\"formControl\"></mis-radio>\n <span>{{picker}}</span>\n</div>\n</div>\n<div class=\"specific-datepicker-container\" [ngStyle]=\"{'display': singleDatePickerSelected ? 'none' : ''}\">\n <div class=\"daterangepicker-container__view\">\n <div class=\"datepicker__left\">\n <div class=\"daterangepicker-container__header__prabu\">\n <div\n class=\"daterangepicker-container__arrow__icon\"\n (click)=\"!isPreviousMonthDisabled && navigateMonth('PREVIOUS')\"\n [ngClass]=\"{\n 'disabled-month': isPreviousMonthDisabled\n }\"\n >\n <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z\"\n fill=\"#181F33\"\n ></path>\n </svg>\n </div>\n <span> {{ currentMonth }} {{ currentYearNumber }} </span>\n <div></div>\n </div>\n <div class=\"daterangepicker-container__body\">\n <div class=\"daterangepicker-container__weekdays\">\n <div class=\"daterangepicker-container__weekday\" *ngFor=\"let weekDay of weekDays\">\n <span [ngClass]=\"{\n 'current-day': weekDay.isCurrentDay && (currentMonthNumber === todayMonthNumber)\n }\">{{ weekDay.label }}</span>\n </div>\n </div>\n <div class=\"daterangepicker-container__days\">\n <div\n class=\"daterangepicker-container__day\"\n [ngClass]=\"{\n 'selected-day': day.isSelectedDay && data.isSPickerSelected,\n 'disabled-day': day.isDisabledDay,\n 'selected-start-day': day.isSelectedStartDay && !data.isSPickerSelected,\n 'selected-end-day': day.isSelectedEndDay && !data.isSPickerSelected,\n 'in-range-day': day.inRangeDay && !data.isSPickerSelected,\n 'is-valid-date': day.date > 0 && !data.isSPickerSelected && !(day.isSelectedStartDay && day.isSelectedEndDay)\n }\"\n [ngStyle]=\"{'margin-right': !data.isSPickerSelected ? '0px' : '1px','width': !data.isSPickerSelected ? '36px' : '35px','justify-content': day.isHoliday ? 'flex-start' : 'center','padding-top': day.isHoliday ? '2.8px' : '0px','height': day.isHoliday ? '33px' : '36px'}\"\n *ngFor=\"let day of currentMonthDates\"\n (click)=\"selectDay('LEFT',day)\"\n >\n <div [ngClass]=\"{\n 'circular-dot': day.isHoliday\n }\"></div>\n <span *ngIf=\"day.date > 0\" [ngClass]=\"{\n 'current-day': day.isCurrentDay,\n 'holiday-text': day.isHoliday || day.isWeekOff\n }\" >\n {{ day.date }}\n </span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"datepicker__right\">\n <div class=\"daterangepicker-container__header__prabu\">\n <div></div>\n <span> {{ nextMonth }} {{ nextYearNumber }} </span>\n <div\n class=\"daterangepicker-container__arrow__icon\"\n (click)=\"!isNextMonthDisabled && navigateMonth('NEXT')\"\n [ngClass]=\"{\n 'disabled-month': isNextMonthDisabled\n }\"\n >\n <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M19.7071 8.70711C20.0976 8.31658 20.0976 7.68342 19.7071 7.29289L13.3431 0.928933C12.9526 0.538409 12.3195 0.538409 11.9289 0.928933C11.5384 1.31946 11.5384 1.95262 11.9289 2.34315L17.5858 8L11.9289 13.6569C11.5384 14.0474 11.5384 14.6805 11.9289 15.0711C12.3195 15.4616 12.9526 15.4616 13.3431 15.0711L19.7071 8.70711ZM-8.74228e-08 9L19 9L19 7L8.74228e-08 7L-8.74228e-08 9Z\"\n fill=\"#181F33\"\n ></path>\n </svg>\n </div>\n </div>\n <div class=\"daterangepicker-container__body\">\n <div class=\"daterangepicker-container__weekdays\">\n <div class=\"daterangepicker-container__weekday\" *ngFor=\"let weekDay of weekDays\" >\n <span >{{ weekDay.label }}</span>\n </div>\n </div>\n <div class=\"daterangepicker-container__days\">\n <div\n class=\"daterangepicker-container__day\"\n [ngClass]=\"{\n 'selected-day': day.isSelectedDay && data.isSPickerSelected,\n 'disabled-day': day.isDisabledDay,\n 'selected-start-day': day.isSelectedStartDay && !data.isSPickerSelected,\n 'selected-end-day': day.isSelectedEndDay && !data.isSPickerSelected,\n 'in-range-day': day.inRangeDay && !data.isSPickerSelected,\n 'is-valid-date': day.date > 0 && !data.isSPickerSelected && !(day.isSelectedStartDay && day.isSelectedEndDay)\n }\"\n [ngStyle]=\"{ 'margin-right': !data.isSPickerSelected ? '0px' : '1px','width': !data.isSPickerSelected ? '36px' : '35px','justify-content': day.isHoliday ? 'flex-start' : 'center','padding-top': day.isHoliday ? '3px' : '0px','height': day.isHoliday ? '33px' : '36px'}\"\n *ngFor=\"let day of nextMonthDates\"\n (click)=\"selectDay('RIGHT',day)\"\n >\n <div [ngClass]=\"{\n 'circular-dot': day.isHoliday\n }\"></div>\n <span *ngIf=\"day.date > 0\" [ngClass]=\"{\n 'current-day': day.isCurrentDay && (currentMonthNumber === todayMonthNumber),\n 'holiday-text': day.isHoliday || day.isWeekOff\n }\" >\n {{ day.date }}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"weekOffs_holidays_container\">\n <span>Weekly offs: <span *ngFor=\"let weekOff of data.weekOffs; let last = last\">{{weekOff}} <span *ngIf=\"!last\">,</span></span></span>\n <span >Holidays <span class=\"circular-dot\" style=\"display: inline-block; margin-left: 10px;\"></span></span>\n </div>\n <div class=\"daterangepicker__footer\">\n <span *ngIf=\"data.isSPickerSelected\"><span>{{data.isSPickerSelected && localSelectedDates[0]?.selectedDate ? localSelectedDates.length : (localSelectedDates.length -1 && 0)}} </span>day(s) selected</span>\n <span *ngIf=\"!data.isSPickerSelected\"><span>{{dateRangeLength > 0 ? dateRangeLength : 0 }} </span>day(s) selected</span>\n <div class=\"footer_action_btn\">\n <button mis-button size=\"md\" type=\"none\" (click)=\"cancelDatePicker()\" >Cancel</button>\n <button *ngIf=\"data.isSPickerSelected\" mis-button size=\"md\" type=\"primary\" (click)=\"applyDates()\" [disabled]=\"!isDatesValid\" >Apply</button>\n <button *ngIf=\"!data.isSPickerSelected\" mis-button size=\"md\" type=\"primary\" (click)=\"applyDatesRange()\" [disabled]=\"!isDatesValid || (dateRangeLength === 0)\" >Apply</button>\n </div>\n </div>\n </div>\n <div class=\"single-datepicker-container\" [ngStyle]=\"{'display': !singleDatePickerSelected ? 'none' : 'block'}\">\n <input\n misTzDp\n misInput\n type=\"text\"\n readonly\n class=\"date-input\"\n [dpConfig]=\"data.dpConfig\"\n placeholder=\"Select\"\n (dateChange)=\"onSingleDateChange($event)\"\n [selectedDate]=\"singleDateSelectedValue\"\n positionX=\"center\"\n positionY=\"top\"\n offsetX = 71\n offsetY = -1\n [value]=\"singleDateSelectedValue\"\n [disableBoxShadow]=\"true\"\n [disableOverLay]=\"true\"\n [openElement]=\"openElement\"\n #singleDatePickerElement\n />\n </div>\n\n</div>\n", styles: [".daterangepicker-container{background:#ffffff;border:1px solid #e0e0e0;box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:12px;display:flex;flex-direction:column;font-family:Lato;overflow:hidden;-webkit-user-select:none;user-select:none}.daterangepicker-container.single-date-picker-enabled{flex-direction:row}.daterangepicker-container .radio-container{display:flex;align-items:center;height:48px;padding:8px 0;justify-content:center;border-radius:12px 12px 0 0;border-bottom:1px solid var(--lt-bg-ntrl-seperators, #e0e0e0);background:var(--lt-text-white, #fff)}.daterangepicker-container .radio-container .label{display:flex;align-items:center}.daterangepicker-container .radio-container .label .input{margin-right:8px;width:20px;height:20px}.daterangepicker-container .radio-container .label:first-child{padding-right:16px;border-right:1px solid #e0e0e0}.daterangepicker-container .radio-container .label:nth-child(2){padding-left:16px}.daterangepicker-container.single-date-picker-enabled .radio-container{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:16px;height:288px;padding:20px;border-right:1px solid #e0e0e0!important;border-radius:0}.daterangepicker-container.single-date-picker-enabled .radio-container .label:first-child{padding-right:0;border-right:0px}.daterangepicker-container.single-date-picker-enabled .radio-container .label:nth-child(2){padding-left:0}.daterangepicker-container .daterangepicker-container__view{display:flex;gap:24px;padding:16px}.daterangepicker-container .daterangepicker-container__view .datepicker__left,.daterangepicker-container .daterangepicker-container__view .datepicker__right{display:flex;flex-direction:column}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu{display:flex;height:32px;justify-content:space-between;align-items:center;width:100%;padding-bottom:16px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu span{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon.disabled-month{opacity:.5;cursor:not-allowed}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon:not(.disabled-month):hover{cursor:pointer;background-color:#cbddfb}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__header__prabu .daterangepicker-container__arrow__icon:nth-child(1){transform:rotate(180deg)}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body{height:100%;width:252px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays{width:100%;display:flex;padding-bottom:10px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday{width:36px;height:18px;text-align:center}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday span{font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.2px;text-align:center;color:#6a737d}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__weekdays .daterangepicker-container__weekday span.current-day{font-weight:700;letter-spacing:.25px;color:#181f33}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days{display:flex;flex-wrap:wrap}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day{flex-direction:column;width:35px;height:36px;display:flex;align-items:center;justify-content:center;margin-bottom:1px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day:not(.in-range-day):not(.selected-start-day):not(.selected-end-day){border-radius:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day{cursor:default}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day:hover{background-color:transparent}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.disabled-day>span{color:#6a737d}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day.is-valid-date:not(.disabled-day):not(.selected-start-day):not(.selected-end-day):hover{background-color:#cbddfb;cursor:pointer}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.2px;text-align:center;color:#181f33}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.current-day{font-weight:700;letter-spacing:.25px;color:#0937b2}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.selected-day{color:#fff}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .daterangepicker-container__day span.disabled-day{color:#6a737d}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-start-day{background-color:#0937b2;border-radius:20px 4px 4px 20px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-start-day>span{color:#fff!important}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day{background-color:#0937b2;border-radius:0 20px 20px 0}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day>span{color:#fff!important}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-end-day.selected-start-day{border-radius:50%!important}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .in-range-day:not(.disabled-day){background-color:#cbddfb}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-day{background-color:#0937b2;border-radius:4px}.daterangepicker-container .daterangepicker-container__view .daterangepicker-container__body .daterangepicker-container__days .selected-day>span{color:#fff!important}.daterangepicker-container .weekOffs_holidays_container{font-size:12px;color:var(--lt-text-muted, #6a737d);padding:8px 24px 12px}.daterangepicker-container .weekOffs_holidays_container>span{margin-right:16px}.daterangepicker-container .weekOffs_holidays_container>span>span{color:#181f33}.daterangepicker-container .daterangepicker__footer{display:flex;justify-content:space-between;border-top:1px solid #e0e0e0;padding:16px 24px;word-spacing:4px}.daterangepicker-container .daterangepicker__footer span{font-family:Lato;font-size:15px;font-weight:400;align-self:center}.daterangepicker-container .daterangepicker__footer span span{font-weight:700}.daterangepicker-container .daterangepicker__footer .footer_action_btn{display:flex}.daterangepicker-container .daterangepicker__footer button{width:104px;height:44px;border-radius:8px;margin-left:24px;font-weight:700}.circular-dot{width:5px;height:5px;background-color:#ed711c;border-radius:50%}.holiday-text{color:#6a737d!important}.display-none{display:none!important}.single-datepicker-container{width:291px}\n"] }]
|
|
714
739
|
}], function () {
|
|
715
740
|
return [{ type: undefined, decorators: [{
|
|
716
741
|
type: Inject,
|