Angular v15 Material API Changes Causes Production Build Design Issues

[Will-at-FreedomDev]

Describe the bug

I wish I had more information on this, I'm still working through a suitable solution.

After upgrading from Angular 14 to 15, and still using the "Legacy" API for all Material related things, the only issue I've noticed is that any Material based component used by this library is not getting any style applied to it. It works and looks fine in development, but after building the production build and deploying, the styles are just not there/very ugly.

Minimal Reproduction

Start with an Angular 14 application, implement Angular Material + this library, then run the upgrades to angular 15. I believe the way the @include datepicker.theme($theme); is working is causing the library to use the "new" API rather than the legacy API.

It's possible I just need to bite the bullet and upgrade to the "new" Material MDC API. But it would be nice to have an option to provide a legacy theme builder to this library.

Expected behavior

I would expect the styles to look the same between dev and production.

Screenshots

Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 15.0.4
Node: 16.13.0
Package Manager: npm 8.1.0
OS: win32 x64

Angular: 15.0.4
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.4
@angular-devkit/build-angular   15.0.4
@angular-devkit/core            15.0.4
@angular-devkit/schematics      15.0.4
@angular/cdk                    15.0.3
@angular/material               15.0.3
@schematics/angular             15.0.4
rxjs                            6.6.7
typescript                      4.8.4

[Will-at-FreedomDev]

Update: I ended up spending the time to convert all the MatLegacy modules to use the new ones, and now I'm seeing this issue present on dev and on production.

@matheo if you are still around and supporting this library, if I make a pull request to fix these issues for v15, will you be able to review and approve my PR?

The issue is pretty minor, since I'm sure I could target the elements through global styles, but it would be much better to fix this for the community.

[craigchandler]

Update: I ended up spending the time to convert all the MatLegacy modules to use the new ones, and now I'm seeing this issue present on dev and on production.

@matheo if you are still around and supporting this library, if I make a pull request to fix these issues for v15, will you be able to review and approve my PR?

The issue is pretty minor, since I'm sure I could target the elements through global styles, but it would be much better to fix this for the community.

Got a fork?

[willherr]

Update: I ended up spending the time to convert all the MatLegacy modules to use the new ones, and now I'm seeing this issue present on dev and on production.

@matheo if you are still around and supporting this library, if I make a pull request to fix these issues for v15, will you be able to review and approve my PR?

The issue is pretty minor, since I'm sure I could target the elements through global styles, but it would be much better to fix this for the community.

Got a fork?

Sorry, no. Ended up going with a different package: https://www.npmjs.com/package/@ng-matero/extensions

(That other reply was my work account)

[davideas]

Quick solution to fix the styles of this deprecated library. Put this styles in your main app.component.theme.scss

@mixin......

$hover: map-get($background, hover);

.mat-custom-prev-next {
    align-items: center;
}

.mat-calendar-previous-button,
.mat-calendar-next-button {
    cursor: pointer;
    width: 42px;
    height: 42px;
    background-color: transparent;
    border-color: transparent;
    border-radius: 50%;
    margin: 0 2px;

    &:hover {
        background-color: $hover;
    }

    &::after {
        margin: 14px;
    }
}

.mat-custom-time-hour,
.mat-custom-time-minute {
    height: fit-content;
    font-size: 56px;
    line-height: 56px;
}