custom-cards / custom-card-helpers Goto Github PK

breaking all cards that use this custom functionality

please see #beta in Discord.

app-drawer-layout was replaced by mwc-drawer

link to Discord: https://discord.com/channels/330944238910963714/427516175237382144/1090920193947074642

hasConfigOrEntityChanged no longer has the forceUpdate parameter

https://github.com/home-assistant/frontend/blob/fe4322e64bcc5bd456476c7110c4885024acfa5b/src/panels/lovelace/common/has-changed.ts?_pjax=%23js-repo-pjax-container%2C%20div%5Bitemtype%3D%22http%3A%2F%2Fschema.org%2FSoftwareSourceCode%22%5D%20main%2C%20%5Bdata-pjax-container%5D#L28

Please add support for disable haptic for repeated actions

My use of

relativeTime(new Date(stateStrInterp), this.hass?.localize);

has been returning an empty string for a while now. Your latest updates show the parameters have changed for both computeStateDisplay() and relativeTime(). which I use.

I've not been able to find any examples for how to get/specify the FrontEndTranslationData which is now needed. Do you have any advice? Examples? (I wish the doc also contained example invocations for these methods. I'm fairly new at this but have a couple of published cards already ;-)

Currently all binary sensors are represented by mdi:radiobox-blank or mdi:checkbox-marked-circle.

It would be helpful if this function could also take device class as a parameter to allow for the correct representation of each device.

This is exhibited in Multiple Entity Row #217 which uses this as a dependency. I haven't heard from the repo owner and am hoping I can fix the issue myself but I am not sure if this issue is something within the clickHandler or on the Multiple Entity Row side of things.

Curious on your thoughts and any help is much appreciated!

Custom-card-helpers still depends on the lit-element package.
According to the upgrade guide this should be replaced by lit.

Please set the right example 🙂

Hey,

Home Assistant changed the serivce_data to data for tab_action, hold_action and double_tab_action. See here: https://www.home-assistant.io/dashboards/actions/#data

I noticed this in the costume-card multiple-entity-row which depends on this repository.

Greeting

When I install 1.0.6 branch locally, long-press is broken as well which makes it pretty difficult to debug. Need to find some time to debug this further though.

I'm using https://github.com/adizanni/floor3d-card, and getting this error with a white dimmable LED that has no color options:

Uncaught (in promise) TypeError: t.attributes.rgb_color is not iterable (cannot read property undefined)

Code:

fireEvent(this, 'hass-more-info', { entityId: entity.entity });

Absolutely love the library and I'm glad it got a new release recently!

However, after pulling the latest version I noticed that the functions secondsToDuration and durationToSeconds no longer import.

(!) Plugin typescript: @rollup/plugin-typescript TS2305: Module '"custom-card-helpers"' has no exported member 'durationToSeconds'.
src/helpers.ts: (2:10)

2 import { durationToSeconds, formatTime, HomeAssistant } from "custom-card-helpers";
           ~~~~~~~~~~~~~~~~~

test/util.ts: (1:10)

1 import { durationToSeconds } from "custom-card-helpers";
           ~~~~~~~~~~~~~~~~~

(!) Plugin typescript: @rollup/plugin-typescript TS2305: Module '"custom-card-helpers"' has no exported member 'secondsToDuration'.
src/timer-bar-entity-row.ts: (6:51)

6 import { HomeAssistant, hasConfigOrEntityChanged, secondsToDuration, computeStateDisplay } from 'custom-card-helpers';
                                                    ~~~~~~~~~~~~~~~~~

I was poking around and it seems that e754e75 might have something to do with the issue.

It looks like secondsToDuration has been removed from index.m.js even though it is still in the source code:

Thank you!

So I'm rather new to the ts world which might be the reason I'm doing something horribly wrong. But maybe I'm not and you can help me out.
I have created a rather popular card here: https://github.com/reptilex/tesla-style-solar-power-card
The problem is that when I try to create a visual card editor following the boilercard template the card either does not compile with babel, it throws a punctuation error on the line where fecha and fireEvent are in js or has an error about a functiona not being named. It all disappears when I comment out the line 371 in my editor class. I know it's not just terser having a hickup.
Could you take a look. Any pointers would be greatly appreciated. Here is my package.json.

When calling createThing before hui-error-card has been initialized, there is the potential for infinite recursion. When a component's setConfig method is not yet defined, createThing attempts to create an error card:

try {
  element.setConfig(config);
} catch (err) {
  console.error(tag, err);
  return _createError(err.message, config);
}

If hui-error-card is not yet loaded, the setConfig method does not exist on the error card, causing infinite recursion.

Duration option is not useful for long running equipment, it's shows hours:minutes:seconds so for 9 days it's will show something like 216:23:51.

More info about problem you can find here
Thanks in advance.

Hello everyone,

Maybe not really the place but don't know where else to reach allot of possible custom card developers.

I have a custom card which makes an dedicated sidebar in hass and it has an option to also generate any card in the sidebar.
This works for most card but for example it does not work for hui-vertical-stack-card this card is not avaialable in the customelements that is the reason it throws an error on setting the config. It does work when i add the hui-vertical-stack-card somewhere in my view because then it loads it in the custom elements.

Someone an idea how i can make sure it is avaiable but more importantly if it is not how can i add it to the customelements?

Thank you for your help!

When running rollup:

(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en/#error-this-is-undefined
node_modules/@formatjs/intl-utils/lib/src/diff.js
1: var __assign = (this && this.__assign) || function () {
                   ^
2:     __assign = Object.assign || function(t) {
3:         for (var s, i = 1, n = arguments.length; i < n; i++) {
...and 1 other occurrence
node_modules/@formatjs/intl-utils/lib/src/resolve-locale.js
1: var __extends = (this && this.__extends) || (function () {
                    ^
2:     var extendStatics = function (d, b) {
3:         extendStatics = Object.setPrototypeOf ||
...and 3 other occurrences

This seems to be caused by the use of @formatjs/intl-utils, which seems to have been deprecated in favor of @formatjs/ecma402-abstract.

I would upgrade it by myself and send a PR, but it seems that the newest version of the library does not provide the selectUnit function any longer. Which I'm not sure how to proceed. I found the following reference, it may help:

• formatjs/formatjs#1934

Using the handleAction function with toggle or call_service on mobile can be very irritating because of the long vibrations / haptic feedback. On iOS it vibrates twice quickly (compared to once when toggling native entity cards) and on android it vibrates for around 0.5 seconds which can be very irritating.

Disabling vibrations in the Home Assistant settings on Android seems to have no effect on this.

This is so irritating that for me all cards using this helper are utterly useless at the moment.

Hi, I'm back and still just as unsuccessful. re: (my #34)

For more than a year now I've had the interval since the last update not showing up on my card : https://github.com/ironsheep/lovelace-rpi-monitor-card

It was working long ago but changes to the underlying helper methods stopped the display from appearing. You can see the value in the screenshots at the repo. It was working... I'd like to get it working again.

And... it seems (#42) also pointed out this issue...

The issue is that I've spent hours twice now trying to figure out how to call these methods.

The 2nd time the parameters have changed yet again. Can someone please provide examples for how to call these methods in the latest version of these helpers... ??

I even found https://custom-cards.github.io/custom-card-helpers/ which is pretty but does not show any example invocations of any of the methods.

I'm attempting to use computeStateDisplay() and relativeTime()

I apologize if I'm new enough that you deem that this was obvious. Please feel free to send me to examples to study.

Here's what I think I should be doing but it doesn't compile due to the new third parameter data type changing. I'm trying to make the change but am unsuccessful.

private _getRelativeTimeSinceUpdate(): string {
    const stateObj = this._config.entity ? this.hass.states[this._config.entity] : undefined;
    const stateStrInterp = computeStateDisplay(this.hass?.localize, stateObj!, this.hass?.locale);
    const relativeInterp =
      stateStrInterp === undefined ? '{unknown}' : relativeTime(new Date(stateStrInterp), this.hass?.localize);
    const desiredValue = this._sensorAvailable ? relativeInterp : '{unknown}';
    return desiredValue;
  }

  private _getMinutesSinceUpdate(): number {
    const stateObj = this._config.entity ? this.hass.states[this._config.entity] : undefined;
    const stateStrInterp = computeStateDisplay(this.hass?.localize, stateObj!, this.hass?.locale);
    const then = new Date(stateStrInterp);
    const now = new Date();
    let diff = (now.getTime() - then.getTime()) / 1000;
    diff /= 60;
    return Math.abs(Math.round(diff));
  }

The issue is I don't know from where to get the locale value for the 3rd parameter of computeStateDisplay() since there is one in hass (HomeAssistant) I'm trying to use it but the value can come back as undefined which now fails to compile as you might expect.

Since the 2021.10 update, all translations related to relative_time are broken.

E.g. a call to:

this.hass.localize('ui.components.relative_time.just_now')

Results in ' ' (empty space that is).

I would like to raise awareness for a problem which I addressed as well in #35 (which was recently closed).

The HomeAssistant.locale property is considered optional (link).
This breaks a simple call like:

computeStateDisplay(hass.localize, hass.states["switch.my_switch"], hass.locale)

Due to hass.locale being "possibly undefined".

My project is still depending on 1.7.0 of custom-card-helpers (dated february), since the broken function calls block me from updating.

How are we supposed to use the helper functions which require the hass.locale as input?

It would be helpful adding support for a popup with custom card, like this one.

https://github.com/thomasloven/lovelace-card-tools/blob/master/src/popup.js

I am not sure if its already available. But I couldn't find it in documentation page.

Six months ago, changes were made to the project (specifically in this commit), they broke the "stateIcon" function, so the second argument is not passed for binary_sensor and the device type is now not determined

JonahKr pls fix your code

Being able to call the turn_on service would be ideal. For example, if using a scene, the most common action would be to use scene.turn_on.

At the moment, the only way to do this with integrations using custom-card-helpers is to use the call-service hook

The package @formatjs/intl-utils is deprecated and should be replaced with @formatjs/ecma-abstract.

See also logs during npm install:

npm WARN deprecated @formatjs/[email protected]: the package is rather renamed to @formatjs/ecma-abstract with some changes in functionality (primarily selectUnit is removed and we don't plan to make any further changes to this package

Node Version: 16.10.0
NPM Version: 7.24.0

The latest version introduces locale.time_format please could support be added for this?

When I try to update custom-card-helper package I get an error:
`Cannot find module './translations/localize' or its corresponding type declarations.

2 import { LocalizeFunc } from "./translations/localize";`

This are my packages and my update instruction:

It seems it requires an update on typescript and this may lead to the error. My packages after the update are:

I know this might be very specific to what I have here, but could you at least point me into the right direction? I suffer with all this typescript babel package stuff. Thanks