mis-crystal-design-system 14.0.43-test → 14.0.44-test

package/fesm2020/mis-crystal-design-system-phone-input.mjs

@@ -2,8 +2,6 @@ import * as i0 from '@angular/core';
 import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { PhoneNumberUtil } from 'google-libphonenumber';
-import { getCountries, getCountryCallingCode } from 'libphonenumber-js';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from 'mis-crystal-design-system/dropdown';
@@ -14,90 +12,29 @@ import { ScrollingModule } from '@angular/cdk-experimental/scrolling';
 const _c0 = function (a0) { return { "height": a0 }; };
 class PhoneInputComponent {
     constructor() {
-        this.dropdownHeight = '';
-        this.dropdownWidth = '';
         this.dropdownData = [];
-        this.dropdownSelectedItem = { value: '', label: '', countryCode: '' };
+        this.dropdownSelectedItem = { value: "", label: "" };
         this.inputPlaceholder = 'Enter';
         this.inputFormControl = new FormControl();
         this.onDropdownSelection = new EventEmitter();
-        this.onInvalidPhoneNumber = new EventEmitter();
-        this.dropdownListWidth = '';
-        this.dropdownListHeight = '';
-        this.searchEnabled = true;
-        this.inputType = 'number';
-        this.searchLabel = 'Search Keyword';
-        this.defaultCountry = 'IN';
-        this.phoneValidator = true;
-        this.countryCodes = [{ label: '', value: '', countryCode: '' }];
-        this.selectedCountryName = '';
-        this.validationMessage = '';
-        this.phoneUtil = PhoneNumberUtil.getInstance();
+        this.searchEnabled = false;
+        this.inputType = "number";
+        this.searchLabel = "Search Keyword";
     }
     ngOnInit() {
-        if (this.phoneValidator) {
-            this.loadCountryCodes();
-            this.dropdownData = this.countryCodes;
-            const countryCodeToSelect = this.defaultCountry;
-            const def = this.countryCodes.find(item => item.countryCode === countryCodeToSelect);
-            if (def) {
-                this.dropdownSelectedItem = def;
-                this.selectedCountryName = def.label;
-            }
-            this.validatePhoneNumber(this.inputFormControl?.value, this.dropdownSelectedItem?.countryCode);
-        }
-        this.inputFormControl.valueChanges.subscribe((value) => {
-            this.validatePhoneNumber(value, this.dropdownSelectedItem?.countryCode);
-        });
     }
     handleDropdownSelection(item) {
-        this.dropdownSelectedItem = item;
-        this.onDropdownSelection.emit(item.countryCode);
-        this.selectedCountryName = item.label;
-        this.validatePhoneNumber(this.inputFormControl?.value, this.dropdownSelectedItem?.countryCode);
-        this.inputFormControl.patchValue({ countryCode: item.countryCode }, { emitEvent: false });
-    }
-    loadCountryCodes() {
-        const countries = getCountries();
-        this.countryCodes = countries.map((countryCode) => ({
-            value: getCountryCallingCode(countryCode).toString(),
-            label: `${countryCode} (+${getCountryCallingCode(countryCode)})`,
-            countryCode: countryCode,
-        }));
-    }
-    validatePhoneNumber(value, countryCode) {
-        const phoneNumber = value?.phoneNumber || value;
-        if (phoneNumber && countryCode) {
-            try {
-                const number = this.phoneUtil.parseAndKeepRawInput(phoneNumber, countryCode);
-                const isValid = this.phoneUtil.isValidNumberForRegion(number, countryCode);
-                if (isValid) {
-                    this.validationMessage = null;
-                    this.onInvalidPhoneNumber.emit('');
-                }
-                else {
-                    this.validationMessage = `Phone number invalid for country code: +${this.dropdownSelectedItem?.value}(${this.dropdownSelectedItem?.countryCode})`;
-                    this.onInvalidPhoneNumber.emit(this.validationMessage);
-                }
-            }
-            catch (error) {
-                this.validationMessage = 'Invalid input';
-                this.onInvalidPhoneNumber.emit(this.validationMessage);
-            }
-        }
-    }
-    onBlur() {
-        this.validatePhoneNumber(this.inputFormControl?.value, this.dropdownSelectedItem?.countryCode);
+        this.onDropdownSelection.emit(item);
     }
 }
 PhoneInputComponent.ɵfac = function PhoneInputComponent_Factory(t) { return new (t || PhoneInputComponent)(); };
-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) { if (rf & 1) {
+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" }, outputs: { onDropdownSelection: "onDropdownSelection" }, 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"]], template: function PhoneInputComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0)(1, "mis-dropdown", 1);
         i0.ɵɵlistener("onChange", function PhoneInputComponent_Template_mis_dropdown_onChange_1_listener($event) { return ctx.handleDropdownSelection($event); });
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(2, "div", 2)(3, "div", 3)(4, "input", 4);
-        i0.ɵɵlistener("blur", function PhoneInputComponent_Template_input_blur_4_listener() { return ctx.onBlur(); });
-        i0.ɵɵelementEnd()()()();
+        i0.ɵɵelementStart(2, "div", 2)(3, "div", 3);
+        i0.ɵɵelement(4, "input", 4);
+        i0.ɵɵelementEnd()()();
     } if (rf & 2) {
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("height", ctx.dropdownHeight)("dropdownListWidth", ctx.dropdownListWidth)("dropdownListHeight", ctx.dropdownListHeight)("width", ctx.dropdownWidth)("data", ctx.dropdownData)("selectedItem", ctx.dropdownSelectedItem)("label", ctx.label)("searchEnabled", ctx.searchEnabled)("multiLine", false)("searchLabel", ctx.searchLabel);
@@ -106,7 +43,7 @@ PhoneInputComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PhoneIn
     } }, dependencies: [i1.NgStyle, i2.DefaultValueAccessor, i2.NgControlStatus, i2.FormControlDirective, i3.DropdownComponent], styles: [".main-container-phone[_ngcontent-%COMP%]{display:flex;border:1px solid #E0E0E0;border-radius:6px}.details-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]{display:inline-block;min-width:224px;margin-right:24px}.details-field[_ngcontent-%COMP%]   .input-box[_ngcontent-%COMP%]{width:100%}.details-field[_ngcontent-%COMP%]   .input-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{width:100%;height:32px}input[_ngcontent-%COMP%]{padding:10px 16px;border:none;outline:none;color:#181f33;line-height:24px;font-size:16px;width:100%;height:auto;border-radius:6px}.black-text[_ngcontent-%COMP%]{color:#181f33;font-size:16px;line-height:24px}input[_ngcontent-%COMP%]::-webkit-outer-spin-button, input[_ngcontent-%COMP%]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.main-container-phone[_ngcontent-%COMP%]     .item{padding:8px!important}.main-container-phone[_ngcontent-%COMP%]     .dropdown{border:unset!important}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PhoneInputComponent, [{
         type: Component,
-        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"] }]
+        args: [{ selector: "mis-phone-input", template: "<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", 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"] }]
     }], function () { return []; }, { dropdownHeight: [{
             type: Input
         }], dropdownWidth: [{
@@ -125,8 +62,6 @@ PhoneInputComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PhoneIn
             type: Input
         }], onDropdownSelection: [{
             type: Output
-        }], onInvalidPhoneNumber: [{
-            type: Output
         }], dropdownListWidth: [{
             type: Input
         }], dropdownListHeight: [{
@@ -137,10 +72,6 @@ PhoneInputComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PhoneIn
             type: Input
         }], searchLabel: [{
             type: Input
-        }], defaultCountry: [{
-            type: Input
-        }], phoneValidator: [{
-            type: Input
         }] }); })();
 
 class PhoneInputModule {

package/fesm2020/mis-crystal-design-system-phone-input.mjs.map

@@ -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 { 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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"}
+{"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 { 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?: string;\n  @Input() dropdownData: DropdownItem[] = [];\n  @Input() dropdownSelectedItem:DropdownItem = { value: \"\", label: \"\" } \n  @Input() label: string;\n\n  @Input() inputPlaceholder: string = 'Enter';\n  @Input() inputFormControl: FormControl = new FormControl();\n\n  @Output() onDropdownSelection = new EventEmitter<any>();\n  @Input() dropdownListWidth;\n  @Input() dropdownListHeight;\n  @Input() searchEnabled:boolean=false;\n  @Input() inputType: string = \"number\";\n  @Input() searchLabel:string = \"Search Keyword\"\n  \n  constructor() {}\n  ngOnInit() {\n  }\n\n  handleDropdownSelection(item: DropdownItem){\n    this.onDropdownSelection.emit(item);\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":"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"}

package/fesm2020/mis-crystal-design-system-specificdatepicker.mjs

@@ -1,15 +1,10 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Component, Inject, ViewChild, EventEmitter, Injector, Directive, Self, Optional, Input, Output, HostListener, NgModule } from '@angular/core';
+import { parseZone } from 'moment-timezone';
 import * as i1$1 from '@angular/forms';
 import { UntypedFormControl } from '@angular/forms';
 import * as i5 from 'mis-crystal-design-system/datepicker_v2';
 import { TzDatepickerDirective, DatepickerModuleV2 } from 'mis-crystal-design-system/datepicker_v2';
-import dayjs from 'dayjs';
-import timezone from 'dayjs/plugin/timezone';
-import utc from 'dayjs/plugin/utc';
-import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
 import * as i1 from 'mis-crystal-design-system/toast';
 import { ToastModule } from 'mis-crystal-design-system/toast';
 import * as i2 from '@angular/common';
@@ -196,7 +191,7 @@ function TzDrpContainerComponent_span_39_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r6 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    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, " ");
+    i0.ɵɵtextInterpolate1("", (ctx_r6.localSelectedDates[0] == null ? null : ctx_r6.localSelectedDates[0].selectedDate) ? ctx_r6.localSelectedDates.length : ctx_r6.localSelectedDates.length - 1 && 0, " ");
 } }
 function TzDrpContainerComponent_span_40_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span")(1, "span");
@@ -231,17 +226,12 @@ function TzDrpContainerComponent_button_45_Template(rf, ctx) { if (rf & 1) {
 } }
 const _c6 = function (a0) { return { "display": a0 }; };
 const _c7 = function (a0) { return { "disabled-month": a0 }; };
-dayjs.extend(utc);
-dayjs.extend(timezone);
-dayjs.extend(customParseFormat);
-dayjs.extend(isSameOrAfter);
-dayjs.extend(isSameOrBefore);
 class TzDrpContainerComponent {
     constructor(data, toast, cdr) {
         this.toast = toast;
         this.cdr = cdr;
-        this.dayjsInstance = (...args) => {
-            return dayjs(...args);
+        this.parseZoneInstance = (...args) => {
+            return parseZone(...args);
         };
         this.rawWeekDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
         this.weekDays = [];
@@ -262,10 +252,10 @@ class TzDrpContainerComponent {
         this.singleDateSelectedValue = '';
         this.data = data;
         this.localSelectedDatesRange = this.data.datesRange;
-        const startDate = dayjs(this.localSelectedDatesRange?.startDate, this.data.dpConfig.format);
-        const endDate = dayjs(this.localSelectedDatesRange?.endDate, this.data.dpConfig.format);
+        const startDate = new Date(this.localSelectedDatesRange?.startDate);
+        const endDate = new Date(this.localSelectedDatesRange?.endDate);
         if (startDate && endDate) {
-            this.dateRangeLength = endDate.diff(startDate, 'day') + 1;
+            this.dateRangeLength = (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24) + 1;
         }
         this.localSelectedDates = this.data.dates;
         if (!this.data.isSPickerSelected) {
@@ -283,19 +273,19 @@ class TzDrpContainerComponent {
             }
         }
         if (this.data?.dpConfig?.timezone) {
-            this.dayjsInstance = (...args) => {
-                return dayjs(...args).tz(this.data.dpConfig.timezone);
+            this.parseZoneInstance = (...args) => {
+                return parseZone(...args).tz(this.data.dpConfig.timezone);
             };
         }
-        this.currentMonthNumber = this.dayjsInstance().month();
-        this.nextMonthNumber = this.dayjsInstance().add(1, "month").month();
+        this.currentMonthNumber = this.parseZoneInstance().month();
+        this.nextMonthNumber = this.parseZoneInstance().add(1, "month").month();
         this.currentMonth = getMonth(this.currentMonthNumber);
         this.nextMonth = getMonth(this.nextMonthNumber);
-        this.currentYearNumber = this.dayjsInstance().year();
-        this.nextYearNumber = this.dayjsInstance().add(1, "month").year();
+        this.currentYearNumber = this.parseZoneInstance().year();
+        this.nextYearNumber = this.parseZoneInstance().add(1, "month").year();
         this.weekDays = this.rawWeekDays.map((day, index) => ({
             label: `${day[0]}${day.slice(1).toLowerCase()}`,
-            isCurrentDay: this.dayjsInstance().day() === index
+            isCurrentDay: this.parseZoneInstance().day() === index
         }));
         if (!this.data?.dpConfig?.format) {
             this.data.dpConfig = {
@@ -323,16 +313,16 @@ class TzDrpContainerComponent {
                 this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
                 return;
             }
-            selectedStartDate = this.dayjsInstance(this.localSelectedDatesRange?.startDate, this.data.dpConfig.format);
+            selectedStartDate = this.parseZoneInstance(this.localSelectedDatesRange?.startDate, this.data.dpConfig.format);
         }
         else {
-            selectedStartDate = this.dayjsInstance(this.localSelectedDates?.[0].selectedDate, this.data.dpConfig.format);
+            selectedStartDate = this.parseZoneInstance(this.localSelectedDates?.[0].selectedDate, this.data.dpConfig.format);
         }
         if (selectedStartDate.isValid()) {
             this.currentYearNumber = selectedStartDate.year();
             this.nextYearNumber = selectedStartDate.add(1, "month").year();
-            this.currentMonthNumber = selectedStartDate.get("month");
-            this.nextMonthNumber = selectedStartDate.add(1, "month").month();
+            this.currentMonthNumber = selectedStartDate.get("month") - 1;
+            this.nextMonthNumber = selectedStartDate.add(1, "month").month() - 1;
             if (this.currentMonthNumber === -1) {
                 this.currentMonthNumber = 11;
             }
@@ -346,18 +336,18 @@ class TzDrpContainerComponent {
         this.nextMonthDates = this.generateDates(this.nextMonthNumber, this.nextYearNumber);
     }
     calculateMinMaxDays() {
-        const currentInstance = this.dayjsInstance().year(this.currentYearNumber).month(this.currentMonthNumber);
-        const minDate = !!this.data.dpConfig.minDate ? this.dayjsInstance(this.data.dpConfig.minDate, this.data.dpConfig.format) : dayjs('invalid');
+        const currentInstance = this.parseZoneInstance().year(this.currentYearNumber).month(this.currentMonthNumber);
+        const minDate = this.parseZoneInstance(this.data.dpConfig.minDate, this.data.dpConfig.format);
         if (minDate.isValid()) {
             this.isPreviousMonthDisabled = minDate.isSameOrAfter(currentInstance, "month");
         }
-        const maxDate = !!this.data.dpConfig.maxDate ? this.dayjsInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format) : dayjs('invalid');
+        const maxDate = this.parseZoneInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format);
         if (maxDate.isValid()) {
             this.isNextMonthDisabled = maxDate.isSameOrBefore(currentInstance, "month");
         }
     }
     navigateMonth(direction) {
-        let thisMonth = dayjs().year(this.currentYearNumber).month(this.currentMonthNumber);
+        let thisMonth = parseZone().year(this.currentYearNumber).month(this.currentMonthNumber);
         if (direction === "NEXT") {
             thisMonth = thisMonth.add(1, "month");
         }
@@ -389,23 +379,22 @@ class TzDrpContainerComponent {
     }
     generateDates(month, currentYearNumber) {
         let dates = [];
-        const daysInMonth = dayjs().year(currentYearNumber).month(month).daysInMonth();
+        const daysInMonth = parseZone().year(currentYearNumber).month(month).daysInMonth();
         for (let currentDate = 1; currentDate <= daysInMonth; currentDate++) {
-            const date = this.dayjsInstance().year(currentYearNumber).month(month).date(currentDate);
+            const date = this.parseZoneInstance().year(currentYearNumber).month(month).date(currentDate);
             const dateString = date.format(this.data.dpConfig.format);
             let isDisabledDay = this.data.datesDisabled.some(d => d === dateString);
-            const minDate = !!this.data.dpConfig.minDate ? this.dayjsInstance(this.data.dpConfig.minDate, this.data.dpConfig.format) : dayjs('invalid');
+            const minDate = this.parseZoneInstance(this.data.dpConfig.minDate, this.data.dpConfig.format);
             if (!isDisabledDay && minDate.isValid()) {
                 isDisabledDay = minDate.isAfter(date, "day");
             }
-            const maxDate = !!this.data.dpConfig.maxDate ? this.dayjsInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format) : dayjs('invalid');
+            const maxDate = this.parseZoneInstance(this.data.dpConfig.maxDate, this.data.dpConfig.format);
             if (!isDisabledDay && maxDate.isValid()) {
                 isDisabledDay = maxDate.isBefore(date, "day");
             }
-            const isCurrentDay = this.dayjsInstance().year(currentYearNumber).month(month).date(currentDate).format(this.data.dpConfig.format) ===
-                this.dayjsInstance().format(this.data.dpConfig.format);
+            const isCurrentDay = this.parseZoneInstance().year(currentYearNumber).month(month).date(currentDate).format(this.data.dpConfig.format) ===
+                this.parseZoneInstance().format(this.data.dpConfig.format);
             let isSelectedDay = false;
-            console.log('abhay12', this.localSelectedDates);
             for (const selectedDateConfig of this.localSelectedDates) {
                 if (!isSelectedDay && date.format(this.data.dpConfig.format) === selectedDateConfig.selectedDate) {
                     isSelectedDay = true;
@@ -422,8 +411,8 @@ class TzDrpContainerComponent {
             const isSelectedStartDay = !isDisabledDay &&
                 (this.localSelectedDatesRange?.startDate ?? false) &&
                 date.format(this.data.dpConfig.format) === this.localSelectedDatesRange?.startDate;
-            const isAfterSelectedStartDate = this.dayjsInstance(date).isAfter(dayjs(this.localSelectedDatesRange?.startDate, this.data.dpConfig.format), "day");
-            const isBeforeSelectedEndDate = this.dayjsInstance(date).isBefore(dayjs(this.localSelectedDatesRange?.endDate, this.data.dpConfig.format), "day");
+            const isAfterSelectedStartDate = this.parseZoneInstance(date).isAfter(parseZone(this.localSelectedDatesRange?.startDate, this.data.dpConfig.format), "day");
+            const isBeforeSelectedEndDate = this.parseZoneInstance(date).isBefore(parseZone(this.localSelectedDatesRange?.endDate, this.data.dpConfig.format), "day");
             const inRangeDay = (this.localSelectedDatesRange?.startDate ?? false) &&
                 (this.localSelectedDatesRange?.endDate ?? false) &&
                 isAfterSelectedStartDate &&
@@ -456,13 +445,13 @@ class TzDrpContainerComponent {
         if (!this.data.isSPickerSelected) {
             if (!day.isDisabledDay) {
                 if (this.selectionStarted) {
-                    const dayjsDay = dayjs()
+                    const momentDay = parseZone()
                         .year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
                         .month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
                         .date(day.date);
-                    if (dayjsDay.isBefore(dayjs(this.localSelectedDatesRange?.startDate, this.data.dpConfig.format), "day")) {
+                    if (momentDay.isBefore(parseZone(this.localSelectedDatesRange?.startDate, this.data.dpConfig.format), "day")) {
                         this.localSelectedDatesRange = {
-                            startDate: dayjsDay.format(this.data.dpConfig.format),
+                            startDate: momentDay.format(this.data.dpConfig.format),
                             endDate: null
                         };
                         this.currentMonthDates = this.generateDates(this.currentMonthNumber, this.currentYearNumber);
@@ -472,13 +461,13 @@ class TzDrpContainerComponent {
                     this.selectionStarted = false;
                     this.localSelectedDatesRange = {
                         ...this.localSelectedDatesRange,
-                        endDate: dayjsDay.format(this.data.dpConfig.format)
+                        endDate: momentDay.format(this.data.dpConfig.format)
                     };
                 }
                 else {
                     this.selectionStarted = true;
                     this.localSelectedDatesRange = {
-                        startDate: dayjs()
+                        startDate: parseZone()
                             .year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
                             .month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
                             .date(day.date)
@@ -496,7 +485,7 @@ class TzDrpContainerComponent {
             this.calculateDateRangeLength();
         }
         else {
-            const currentSelection = dayjs()
+            const currentSelection = parseZone()
                 .year(from === "LEFT" ? this.currentYearNumber : this.nextYearNumber)
                 .month(from === "LEFT" ? this.currentMonthNumber : this.nextMonthNumber)
                 .date(day.date).format(this.data.dpConfig.format);
@@ -549,9 +538,6 @@ class TzDrpContainerComponent {
     changePicker(event) {
         this.formControl.setValue(event);
         this.singleDatePickerSelected = false;
-        this.data.isSPickerSelected = false;
-        this.data.isSPickerSelected = false;
-        this.openElement = false;
         if (event === "Date Range") {
             this.openElement = false;
             this.data.isSPickerSelected = false;
@@ -571,10 +557,10 @@ class TzDrpContainerComponent {
     }
     calculateDateRangeLength() {
         if (this.localSelectedDatesRange) {
-            const startDate = !!this.localSelectedDatesRange.startDate ? this.dayjsInstance(this.localSelectedDatesRange.startDate, this.data.dpConfig.format) : dayjs('invalid');
-            const endDate = !!this.localSelectedDatesRange.endDate ? this.dayjsInstance(this.localSelectedDatesRange.endDate, this.data.dpConfig.format) : dayjs('invalid');
+            const startDate = this.parseZoneInstance(this.localSelectedDatesRange.startDate, this.data.dpConfig.format).toDate();
+            const endDate = this.parseZoneInstance(this.localSelectedDatesRange.endDate, this.data.dpConfig.format).toDate();
             if (startDate && endDate) {
-                this.dateRangeLength = endDate.diff(startDate, 'day') + 1;
+                this.dateRangeLength = (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24) + 1;
             }
         }
     }
@@ -690,7 +676,7 @@ TzDrpContainerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TzD
     } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgStyle, i3.ButtonDirective, i4.RadioButtonComponent, i5.TzDatepickerDirective], styles: [".daterangepicker-container[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]{flex-direction:row}.daterangepicker-container[_ngcontent-%COMP%]   .radio-container[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]   .radio-container[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]{display:flex;align-items:center}.daterangepicker-container[_ngcontent-%COMP%]   .radio-container[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]   .input[_ngcontent-%COMP%]{margin-right:8px;width:20px;height:20px}.daterangepicker-container[_ngcontent-%COMP%]   .radio-container[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]:first-child{padding-right:16px;border-right:1px solid #e0e0e0}.daterangepicker-container[_ngcontent-%COMP%]   .radio-container[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]:nth-child(2){padding-left:16px}.daterangepicker-container.single-date-picker-enabled[_ngcontent-%COMP%]   .radio-container[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]   .radio-container[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]:first-child{padding-right:0;border-right:0px}.daterangepicker-container.single-date-picker-enabled[_ngcontent-%COMP%]   .radio-container[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]:nth-child(2){padding-left:0}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]{display:flex;gap:24px;padding:16px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .datepicker__left[_ngcontent-%COMP%], .daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .datepicker__right[_ngcontent-%COMP%]{display:flex;flex-direction:column}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]{display:flex;height:32px;justify-content:space-between;align-items:center;width:100%;padding-bottom:16px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:.2px;text-align:center}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .daterangepicker-container__arrow__icon[_ngcontent-%COMP%]{height:20px;width:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:4px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .daterangepicker-container__arrow__icon.disabled-month[_ngcontent-%COMP%]{opacity:.5;cursor:not-allowed}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .daterangepicker-container__arrow__icon[_ngcontent-%COMP%]:not(.disabled-month):hover{cursor:pointer;background-color:#cbddfb}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__header__prabu[_ngcontent-%COMP%]   .daterangepicker-container__arrow__icon[_ngcontent-%COMP%]:nth-child(1){transform:rotate(180deg)}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]{height:100%;width:252px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]{width:100%;display:flex;padding-bottom:10px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]   .daterangepicker-container__weekday[_ngcontent-%COMP%]{width:36px;height:18px;text-align:center}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]   .daterangepicker-container__weekday[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:12px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:.2px;text-align:center;color:#6a737d}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__weekdays[_ngcontent-%COMP%]   .daterangepicker-container__weekday[_ngcontent-%COMP%]   span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px;color:#181f33}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]{flex-direction:column;width:35px;height:36px;display:flex;align-items:center;justify-content:center;margin-bottom:1px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]:not(.in-range-day):not(.selected-start-day):not(.selected-end-day){border-radius:4px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day.disabled-day[_ngcontent-%COMP%]{cursor:default}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day.disabled-day[_ngcontent-%COMP%]:hover{background-color:transparent}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day.disabled-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#6a737d}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day.is-valid-date[_ngcontent-%COMP%]:not(.disabled-day):not(.selected-start-day):not(.selected-end-day):hover{background-color:#cbddfb;cursor:pointer}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.2px;text-align:center;color:#181f33}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]   span.current-day[_ngcontent-%COMP%]{font-weight:700;letter-spacing:.25px;color:#0937b2}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]   span.selected-day[_ngcontent-%COMP%]{color:#fff}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .daterangepicker-container__day[_ngcontent-%COMP%]   span.disabled-day[_ngcontent-%COMP%]{color:#6a737d}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-start-day[_ngcontent-%COMP%]{background-color:#0937b2;border-radius:20px 4px 4px 20px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-start-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#fff!important}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-end-day[_ngcontent-%COMP%]{background-color:#0937b2;border-radius:0 20px 20px 0}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-end-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#fff!important}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-end-day.selected-start-day[_ngcontent-%COMP%]{border-radius:50%!important}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .in-range-day[_ngcontent-%COMP%]:not(.disabled-day){background-color:#cbddfb}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-day[_ngcontent-%COMP%]{background-color:#0937b2;border-radius:4px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker-container__view[_ngcontent-%COMP%]   .daterangepicker-container__body[_ngcontent-%COMP%]   .daterangepicker-container__days[_ngcontent-%COMP%]   .selected-day[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#fff!important}.daterangepicker-container[_ngcontent-%COMP%]   .weekOffs_holidays_container[_ngcontent-%COMP%]{font-size:12px;color:var(--lt-text-muted, #6a737d);padding:8px 24px 12px}.daterangepicker-container[_ngcontent-%COMP%]   .weekOffs_holidays_container[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{margin-right:16px}.daterangepicker-container[_ngcontent-%COMP%]   .weekOffs_holidays_container[_ngcontent-%COMP%] > span[_ngcontent-%COMP%] > span[_ngcontent-%COMP%]{color:#181f33}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker__footer[_ngcontent-%COMP%]{display:flex;justify-content:space-between;border-top:1px solid #e0e0e0;padding:16px 24px;word-spacing:4px}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker__footer[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-family:Lato;font-size:15px;font-weight:400;align-self:center}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker__footer[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-weight:700}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker__footer[_ngcontent-%COMP%]   .footer_action_btn[_ngcontent-%COMP%]{display:flex}.daterangepicker-container[_ngcontent-%COMP%]   .daterangepicker__footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{width:104px;height:44px;border-radius:8px;margin-left:24px;font-weight:700}.circular-dot[_ngcontent-%COMP%]{width:5px;height:5px;background-color:#ed711c;border-radius:50%}.holiday-text[_ngcontent-%COMP%]{color:#6a737d!important}.display-none[_ngcontent-%COMP%]{display:none!important}.single-datepicker-container[_ngcontent-%COMP%]{width:291px}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TzDrpContainerComponent, [{
         type: Component,
-        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"] }]
+        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"] }]
     }], function () { return [{ type: undefined, decorators: [{
                 type: Inject,
                 args: [CONTAINER_DATA]