Migrate state cards from Polymer to Lit

[silamon]

Proposed change

Migrate state cards from Polymer to Lit (except number state card)

Some notes:

• HaWaterHeaterControl was removed as I couldn't find references
• StateCardConfigurator hasn't been tested
• StateCardNumber is left behind since it involves changes around the sliders

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[silamon]

I've applied the dynamicElement as suggested, the state summary cards appear as before but you may want to take a look at the commit before moving on.

Also, since the other PR's are merged, there will be no more polymer elements in the codebase after merging this PR.

[bramkragten]

Also, since the other PR's are merged, there will be no more polymer elements in the codebase after merging this PR.

PARTY TIME! 🥳

[Misiu]

@silamon there are still some packages in package.json - https://github.com/home-assistant/frontend/blob/dev/package.json#L87-L95
They all are based on polymer and are still used in the codebase.
I can try to help with removal, do you have plans for them?

[silamon]

@silamon there are still some packages in package.json - https://github.com/home-assistant/frontend/blob/dev/package.json#L87-L95 They all are based on polymer and are still used in the codebase. I can try to help with removal, do you have plans for them?

@Misiu I'm aware of that, with Polymer elements I referred to own custom webcomponents that extend PolymerElement.

The polymer components provided by the packages are still used, summarized into:

• paper-inputs & one paper-textarea in zigbee parts and supervisor frontend. All other references have been done already in the past few months.
• paper-items: References in different lists in the main HomeAssistant frontend.
• paper-list: One in cast application, one in the zone HomeAssistant frontend and one in the sidebar implementation.
• paper-tabs: That's a hard one, since there's no equal function in the material web implementation. We need a custom component that adds a left and right arrow if screen width exceeds and it should be scrollable on mobile. Then we can replace a few paper-tabs left in the HomeAssistant frontend.
• paper-toast: There's only one reference in the codebase and the material web implementation doesn't handle toasts very well with no duration.
• polymer: This can be removed when above is done, since we import "setCancelSyntheticClickEvents" here and there and the components use that.

I don't have specific plans, just continue on this from time to time. If you want to help out, feel free to do whatever you can.
Edit: The sidebar references have an open pull request, so there's no need to do these.