update to angular v15

[damingerdai]

1. update angular v15
2. update angular material v15
3. update angular eslint v15
4. Migrating to MDC-based Angular Material Components

[JelleBruisten]

I found a issue that when updating to angular 15 the datepicker will suddenly render like this:

I checked out why, and it seems that there was a release/change that changed the use of a <span> to a <button mat-button> . This will cause the datepicker to render the leftside incorrectly because angular material moved all mat-button to legacy and the datepicker is referencing the new version?.

[nzbin]

@JelleBruisten OK, I know this issue. Because the class .mat-button is replaced with .mdc-button. I will improve it.

[JelleBruisten]

Yeah, otherwise the datepicker seems to be working correctly with v15. Cannot speak for other components currently in @ng-matero/extensions since currently we don't use them, we might in future though!

[nzbin]

@JelleBruisten v14.6.1 has fixed it, please have a try.

[JelleBruisten]

@nzbin I will test it right away, will keep you posted

[JelleBruisten]

@nzbin

I does seem to work however the time seems a bit off in comparison with older version:

For now I will use a small workaround:

.mtx-calendar-header-date.mdc-button.mat-mdc-button {
  height: unset;
}

This will make it like this:

Thanks for the quick edit

[mastersamm-db]

is this version 14.6.2 is not compatible with Angular 14, the css styles are not applied correctly you have to force them manually one case, I am going to try with version 14.4.1 that came out before the version of angular 15.

.mtx-calendar-header .mtx-calendar-header-year {
    line-height: 24px !important;
  }

  .mtx-calendar-header .mtx-calendar-header-year{
    padding: 0 4px !important;
  }

.mtx-calendar-header .mtx-calendar-header-date {
    padding: 0 4px !important;
    line-height: inherit !important;
}

.mtx-calendar-header .mtx-calendar-header-hours {
    padding: 0 4px !important;
    line-height: inherit !important;
}

.mtx-calendar-header .mtx-calendar-header-minutes {
    padding: 0 4px !important;
    line-height: inherit !important;
}

.mtx-calendar .mtx-calendar-header-ampm {
    padding: 4px !important;
}
.mtx-calendar-header .mtx-calendar-header-ampm{
    line-height: inherit !important;
}

[nzbin]

Now v15 has released.