Angular Material 15 support

[EMokro]

The generator currently does not support the latest version of the @angular/material package.

[arciisine]

I wansn't aware of any changes in Material 15. Do you have any more information on the incompatibilities?

[EMokro]

I didn't had time to take a closer look at the updates yet, but the function @include mat.core($fontConfig); won't take any arguments anymore. Also it seems like they applied rules that the current generated scss don't match, causing warnings in the console:

Angular Material themes should be created from a map containing the keys "color", "typography", and "density". The color value should be a map containing the palette values for "primary", "accent", and "warn". See https://material.angular.io/guide/theming for more information.

[alljinx]

I can confirm. The template still works but use deprecated methods :'(

[arciisine]

It looks like Angular Material 15 made some pretty aggressive changes under the hood. I'll need to take a look at what they did and see what is compatible with the tool. Hopefully not, but it may end up being a full overhaul depending on what was done internally.

[arciisine]

So just dug into the changes for Angular Material 15, and its a complete overhaul, with significant internal DOM changes to align with MDC. What this ultimately means there will need to be a new version of the application. Currently pre-11 through 14 all generate, roughly the same css output (even with scss changes).

This will no longer be the case, which means the preview app styles and generated scss (and ultimately outputted css) will be unique. This may also mean that certain features may be lost in the translation depending on what was changed.

As noted, this deprecation is a full year out, but would be great to support the new component architecture sooner than later.

[DmitryEfimenko]

FYI, one of the big changes is that the palettes map "must define hues for 50 and each hundred between 100 and 900"
So the following does not work:

$mat-primary: (
  main: #3a9f1d,
  lighter: #c4e2bb,
  darker: #258311,
  200: #3a9f1d, // For slide toggle,
  contrast : (
    main: $light-primary-text,
    lighter: $dark-primary-text,
    darker: $light-primary-text,
  )
);

[WTIGER001]

Hi. I love this capability, but we also moved to angular material 15. Is there an idea on when this may become available?

[optimistex]

Is there any chance to have an updated generator?

[ccpatrut]

Hi,

This one did it for me:
https://github.com/angular/components/blob/main/guides/v15-mdc-migration.md

[MatteoFe]

If you create new project, add material design and try to add generated theme:

SassError: Only 0 arguments allowed, but 1 was passed.
  ┌──> src\waml-theme.scss
147│ @include mat.core($fontConfig);
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ invocation

Is there any correction or workaround?

[arciisine]

Hey, just to follow up on all the general requests, the level of effort here is still pretty high. I'm definitely open to pull requests, but I'm almost thinking a whole new application is in order (forked from the current) that does not try to provide support across all versions of angular material. Much of the existing code can be reused, but ensure that each control is properly targetting the new style structure is where most of the work will be.

As it stands now, I don't have a time frame to make this shift. Angular material should still support the older format as a legacy mode, but that will also be removed in about 6 months it seems.

[swapnil0545]

I recently started working on material theme. And to my surprise most of the articles are based on older version on material. Its been pretty hectic to get things working. This project looked pretty good in terms of material implementation. Would love to see support for newer version soon.

[NicolasGorga]

This project is amazing. I found the changes in Material v15 were pretty aggressive and limiting. Checking the source code for example, they seem to forcefully override many options like the background color, so you can no longer can have whatever you want.

[biel-correa]

Found this link, the awnser from Cueball 6118 solves almost everything the only thing missing is that @include mat.core does not have any parameters, so call it as @include mat.core();