Feature countdown-card for timers

[RickeyWard]

Description

Adds a new card that when showing state with the device_class of 'timestamp' will show a countdown refreshed client-side instead of the ha-relative-time component (uses a shared new mushroom-time-countdown which is just a lit element that handles date objects into countdown timers). It's mostly a copy of entity component with the change that it interprets timestamps as countdown targets instead of relative time targets.

when the entity is available but isUnknown the state string can be overridden with unknown_message, and when the timer is elapsed, the elapsed message can be overridden with timeup_message.

the timer follows the state, so if the primary is set to state it will be the timer countdown, same for default of secondary. all the usual mushroom config follows the entity card.

Related Issue

This PR fixes or closes issue: closes #684 and discussion #723

Motivation and Context

The rationale behind making it a new card type and not having some kind of flag on entity is 2 fold. Firstly, simplicity, no need to make the entity card more complex for niche use-case. Secondly, its desired to have override text for the new states that arise when a) timer's tend to be in the unknown state and its not a pretty message. b) the message when the timer is up should be customizable beyond just language.

Its is also desired by others in the issues tracker.

How Has This Been Tested

Running in my home assistant instance, works on windows 11 in chrome latest, iOS 15 on iPhone 11;
verified all the states work.

Types of changes

• 🐛 Bug fix (non-breaking change which fixes an issue)
• 🚀 New feature (non-breaking change which adds functionality)
• 🌎 Translation (addition or update a translation)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• My code follows the code style of this project.
• My change requires a change to the documentation.f
• I have updated the documentation accordingly.
• I have tested the change locally.
• I followed the steps if I add a new language . (didn't add new language, but new card uses translations lookups and english added)

[piitaya]

Hello. Thanks for the contribution. Unfortunately we can not merge a PR with 11 files only for a text change.
The only way to do this is to use a template. I agree, it's not a perfect solution but we can not increase the mushroom.js size for everyone only for a feature like this.
For now, the card are split by domain, not by features to have a limited number of cards choice.

[RickeyWard]

Currently all timestamp device classes are treated like relative-time, would you consider a config option for timestamp treatment that only appears when the state device-class is a timestamp?

This CANNOT be done in a template because the sensor value timestamp doesn't change, the template won't be re-rendered every second for the countdown and nor would you want it to be. The template needs calculated on backend and that's too much resource usage for a countdown timer, it needs to be done in JavaScript with a timeout.

[emansom]

@piitaya What'd be the best way to inject in-place JavaScript into a custom mushroom template card to emulate this?

[emansom]

@RickeyWard It would be beneficial towards the HA community at large to separate the mushroom timer card into its own HACS plugin, given this will likely not be merged. Keep up the good work.👍🏻

[RickeyWard]

@emansom if you want it This will play nice with mushroom and add a new a card

No current plans to develop it further.