introducing cdk

.eslintrc.json

@@ -49,6 +49,16 @@
               "error"
             ]
           }
+        ],
+        "no-debugger": [
+          "error"
+        ],
+        "quotes": [
+          "error",
+          "single",
+          {
+            "allowTemplateLiterals": true
+          }
         ]
       }
     },

CHANGELOG.md

@@ -7,9 +7,13 @@ All notable changes to this project will be documented in this file.
 - Working with RTL ([575](https://github.com/vlio20/angular-datepicker/pull/575)) closes [#504](https://github.com/vlio20/angular-datepicker/issues/504) 
 
 # Breaking changes
-- Replace deprecated `Moment` with Dayjs  ([573](https://github.com/vlio20/angular-datepicker/pull/573)) closes [#530](https://github.com/vlio20/angular-datepicker/issues/530)  
+- Replace deprecated `Moment` with Dayjs ([573](https://github.com/vlio20/angular-datepicker/pull/573)) closes [#530](https://github.com/vlio20/angular-datepicker/issues/530)  
 Locale was removed from the library configuration, changing the locale should be done outside the component. More information can be found in the readme.md file under the Locale section.  
 Some formats also might be change due to the way Dayjs is implemented.
+- Replace internal position resolving with Angular material cdk library ([576](https://github.com/vlio20/angular-datepicker/pull/576)) closes [#570 ](https://github.com/vlio20/angular-datepicker/issues/570 )  
+This removal will drop the `attachTo` option from the library configuration.  
+*Note:* You will also need to add the cdk styles to your project. You can do so by adding `@import '~@angular/cdk/overlay-prebuilt.css';` to your global styles or by adding it to the styles attribute in your angular.json file.
+
 
 # [13.0.0] (2021-12-22)
 

e2e/app.po.ts

@@ -116,7 +116,7 @@ export class DemoPage {
   meridiemDisplayInline = $(`.dp-inline .dp-time-select-display-meridiem`);
   timeSeparatorDisplay = $(`${this.popupSelector} .dp-time-select-separator:nth-child(2)`);
   monthRows = $$('.dp-months-row');
-  numOfMonthRowsToggle2 = $('#numOfMonthRows2');
+  numOfMonthRowsToggle = $('#numOfMonthRows2');
 
   daytimePickerMenu = $('#daytimePickerMenu');
   daytimeInlineMenu = $('#daytimeInlineMenu');

e2e/bugs/debounce-open-e2e.spec.ts

@@ -14,7 +14,7 @@ describe('debounce open delay', () => {
     await page.dayPickerInput.click();
     await browser.waitForAngularEnabled(false);
     await browser.sleep(500);
-    expect(await page.datePickerPopup.isDisplayed()).toBe(false);
+    expect(await page.datePickerPopup.isPresent()).toBe(false);
     await browser.sleep(600);
     await browser.waitForAngularEnabled(true);
     expect(await page.datePickerPopup.isDisplayed()).toBe(true);
@@ -25,10 +25,10 @@ describe('debounce open delay', () => {
     await page.dayPickerInput.click();
     await browser.waitForAngularEnabled(false);
     await browser.sleep(500);
-    expect(await page.datePickerPopup.isDisplayed()).toBe(false);
+    expect(await page.datePickerPopup.isPresent()).toBe(false);
     await page.clickOnBody();
     await browser.sleep(600);
     await browser.waitForAngularEnabled(true);
-    expect(await page.datePickerPopup.isDisplayed()).toBe(false);
+    expect(await page.datePickerPopup.isPresent()).toBe(false);
   });
 });

e2e/configuration-e2e.spec.ts

@@ -15,7 +15,7 @@ describe('dpDayPicker configuration', () => {
     await page.openOnClickRadioOff.click();
     await page.openOnFocusRadioOff.click();
     await page.daytimePickerInput.click();
-    expect(await page.datePickerPopup.isDisplayed()).toBe(false);
+    expect(await page.datePickerPopup.isPresent()).toBe(false);
   });
 
   it('openOnClick = true, should open picker when clicked', async () => {

e2e/datepicker-e2e.spec.ts

@@ -16,7 +16,7 @@ describe('dpDayPicker dayPicker', () => {
     await page.dayPickerInput.click();
     expect(await page.datePickerPopup.isDisplayed()).toBe(true);
     await page.clickOnBody();
-    expect(await page.datePickerPopup.isDisplayed()).toBe(false);
+    expect(await page.datePickerPopup.isPresent()).toBe(false);
 
     await page.showOnOutsideClick.click();
     await page.dayPickerInput.click();
@@ -26,15 +26,18 @@ describe('dpDayPicker dayPicker', () => {
 
   it('should check that the theme is added and removed', async () => {
     await page.themeOnRadio.click();
+    await page.dayPickerInput.click();
     expect(await page.datePickerPopup.getAttribute('class')).toContain('dp-material');
     await page.themeOffRadio.click();
+    await page.dayPickerInput.click();
     expect(await page.datePickerPopup.getAttribute('class')).not.toContain('dp-material');
     await page.themeOnRadio.click();
+    await page.dayPickerInput.click();
     expect(await page.datePickerPopup.getAttribute('class')).toContain('dp-material');
   });
 
   it('should check that the onOpenDelay is working', async () => {
-    expect(await page.datePickerPopup.isDisplayed()).toBe(false);
+    expect(await page.datePickerPopup.isPresent()).toBe(false);
 
     await page.scrollIntoView(page.onOpenDelayInput, true);
     await page.setInputValue(page.onOpenDelayInput, '1000');
@@ -45,7 +48,7 @@ describe('dpDayPicker dayPicker', () => {
     await browser.waitForAngularEnabled(false);
     await page.scrollIntoView(page.dayPickerInput, true);
     await page.dayPickerInput.click();
-    expect(await page.datePickerPopup.isDisplayed()).toBe(false);
+    expect(await page.datePickerPopup.isPresent()).toBe(false);
     await browser.waitForAngularEnabled(true);
     browser.sleep(1000);
     expect(await page.datePickerPopup.isDisplayed()).toBe(true);
@@ -79,11 +82,19 @@ describe('dpDayPicker dayPicker', () => {
     expect(await page.weekNumbers.getText()).toEqual(['8', '9', '10', '11', '12', '13']);
   });
 
+  it('should remember last position', async () => {
+    await page.setInputValue(page.dayPickerInput, '28-03-2017');
+    await page.dayPickerInput.click();
+    expect(await page.dayCalendarNavHeaderBtn.getText()).toEqual('Mar, 2017');
+    await page.currentLocationBtn.click();
+    expect(await page.dayCalendarNavHeaderBtn.getText()).toEqual(dayjs().format('MMM, YYYY'));
+  });
+
   it('should hide calendar on tab (blur)', async () => {
     await page.dayPickerInput.click();
     expect(await page.datePickerPopup.isDisplayed()).toBe(true);
     await page.dayPickerInput.sendKeys(protractor.Key.TAB);
-    expect(await page.datePickerPopup.isDisplayed()).toBe(false);
+    expect(await page.datePickerPopup.isPresent()).toBe(false);
   });
 
   it('should disable/enable month selection', async () => {
@@ -141,7 +152,7 @@ describe('dpDayPicker dayPicker', () => {
     await page.pickerDisabledRadio.click();
     expect(await page.dayPickerInput.getAttribute('disabled')).toEqual('true');
     await page.dayPickerInput.click();
-    expect(await page.datePickerPopup.isDisplayed()).toBe(false);
+    expect(await page.datePickerPopup.isPresent()).toBe(false);
     await page.pickerEnabledRadio.click();
     expect(await page.dayPickerInput.getAttribute('disabled')).toBe(null);
   });
@@ -221,7 +232,7 @@ describe('dpDayPicker dayPicker', () => {
   it('should check that the date picker popup closes/opened after selection ', async () => {
     await page.dayPickerInput.click();
     await page.clickOnDayButton('15');
-    expect(await page.datePickerPopup.isDisplayed()).toBe(false);
+    expect(await page.datePickerPopup.isPresent()).toBe(false);
     await page.scrollIntoView(page.noCloseOnSelect, true);
     await page.noCloseOnSelect.click();
     await page.dayPickerInput.click();
@@ -238,8 +249,8 @@ describe('dpDayPicker dayPicker', () => {
     expect(await page.datePickerPopup.isDisplayed()).toBe(true);
     await browser.sleep(200);
     expect(await page.datePickerPopup.isDisplayed()).toBe(true);
-    await browser.sleep(1000);
-    expect(await page.datePickerPopup.isDisplayed()).toBe(false);
+    await browser.sleep(1100);
+    expect(await page.datePickerPopup.isPresent()).toBe(false);
   });
 
   it('should check weekday names', async () => {

e2e/directive-e2e.spec.ts

@@ -17,7 +17,7 @@ describe('dpDayPicker directive', () => {
     await page.dayDirectiveInput.click();
     expect(await page.datePickerPopup.isDisplayed()).toBe(true);
     await page.clickOnBody();
-    expect(await page.datePickerPopup.isDisplayed()).toBe(false);
+    expect(await page.datePickerPopup.isPresent()).toBe(false);
   });
 
   it('should make sure that day directive keeps the prev state of the calendar', async () => {
@@ -32,10 +32,13 @@ describe('dpDayPicker directive', () => {
 
   it('should check that the theme is added and removed', async () => {
     await page.themeOnRadio.click();
+    await page.dayDirectiveInput.click();
     expect(await page.datePickerPopup.getAttribute('class')).toContain('dp-material');
     await page.themeOffRadio.click();
+    await page.dayDirectiveInput.click();
     expect(await page.datePickerPopup.getAttribute('class')).not.toContain('dp-material');
     await page.themeOnRadio.click();
+    await page.dayDirectiveInput.click();
     expect(await page.datePickerPopup.getAttribute('class')).toContain('dp-material');
   });
 
@@ -48,7 +51,7 @@ describe('dpDayPicker directive', () => {
     await browser.sleep(200);
     await browser.waitForAngularEnabled(false);
     await page.dayDirectiveInput.click();
-    expect(await page.datePickerPopup.isDisplayed()).toBe(false);
+    expect(await page.datePickerPopup.isPresent()).toBe(false);
     await browser.waitForAngularEnabled(true);
     await browser.sleep(1000);
     expect(await page.datePickerPopup.isDisplayed()).toBe(true);

e2e/fetures/enter-keydown-e2e.spec.ts

@@ -14,7 +14,7 @@ describe('enter keypress', () => {
     await page.dayPickerInput.click();
     expect(await page.datePickerPopup.isDisplayed()).toBe(true);
     page.dayPickerInput.sendKeys(protractor.Key.ENTER);
-    expect(await page.datePickerPopup.isDisplayed()).toBe(false);
+    expect(await page.datePickerPopup.isPresent()).toBe(false);
 
     await page.disableCloseOnEnter.click();
     await page.dayPickerInput.click();

e2e/fetures/number-of-month-rows-e2e.spec.ts

@@ -15,8 +15,9 @@ describe('number of month rows', () => {
     await page.dayCalendarNavHeaderBtn.click();
     expect(await page.monthRows.count()).toEqual(3);
 
-    await page.numOfMonthRowsToggle2.click();
+    await page.numOfMonthRowsToggle.click();
     await page.dayPickerInput.click();
+    await page.dayCalendarNavHeaderBtn.click();
     expect(await page.monthRows.count()).toEqual(2);
   });
 
@@ -25,7 +26,7 @@ describe('number of month rows', () => {
     await page.monthPickerInput.click();
     expect(await page.monthRows.count()).toEqual(3);
 
-    await page.numOfMonthRowsToggle2.click();
+    await page.numOfMonthRowsToggle.click();
     await page.dayPickerInput.click();
     expect(await page.monthRows.count()).toEqual(2);
   });
@@ -34,7 +35,7 @@ describe('number of month rows', () => {
     await page.monthInlineMenu.click();
     expect(await page.monthRows.count()).toEqual(3);
 
-    await page.numOfMonthRowsToggle2.click();
+    await page.numOfMonthRowsToggle.click();
     expect(await page.monthRows.count()).toEqual(2);
   });
 });

package.json

@@ -13,6 +13,7 @@
     "test:ci": "ng test --watch=false --browsers=ChromeHeadless",
     "test:ci:lib": "ng test ng2-date-picker --watch=true --browsers=ChromeHeadless",
     "lint": "ng lint",
+    "lint:fix": "ng lint --fix",
     "e2e": "ng e2e --port 3200",
     "e2e:quick": "ng e2e --dev-server-target --webdriverUpdate=false",
     "e2e:headless": "HEADLESS=true ng e2e",
@@ -86,6 +87,7 @@
     "strictMetadataEmit": true
   },
   "dependencies": {
+    "@angular/cdk": "^13.1.1",
     "dayjs": "^1.10.7",
     "tslib": "^2.3.0"
   }

projects/ng2-date-picker/package.json

@@ -20,6 +20,7 @@
   "peerDependencies": {
     "@angular/common": "^13.1.1",
     "@angular/core": "^13.1.1",
+    "@angular/cdk": "^13.1.1",
     "dayjs": "^1.10.7"
   },
   "dependencies": {