@@ -18,14 +18,13 @@ import {
18
18
handleAction ,
19
19
LovelaceCardEditor ,
20
20
getLovelace ,
21
- } from 'custom-card-helpers' ;
21
+ } from 'custom-card-helpers' ; // This is a community maintained npm module with common helper functions/types
22
22
23
23
import './editor' ;
24
24
25
- import { BoilerplateCardConfig } from './types' ;
25
+ import type { BoilerplateCardConfig } from './types' ;
26
26
import { actionHandler } from './action-handler-directive' ;
27
27
import { CARD_VERSION } from './const' ;
28
-
29
28
import { localize } from './localize/localize' ;
30
29
31
30
/* eslint no-console: 0 */
@@ -35,6 +34,7 @@ console.info(
35
34
'color: white; font-weight: bold; background: dimgray' ,
36
35
) ;
37
36
37
+ // This puts your card into the UI card picker dialog
38
38
( window as any ) . customCards = ( window as any ) . customCards || [ ] ;
39
39
( window as any ) . customCards . push ( {
40
40
type : 'boilerplate-card' ,
@@ -54,9 +54,11 @@ export class BoilerplateCard extends LitElement {
54
54
}
55
55
56
56
// TODO Add any properities that should cause your element to re-render here
57
+ // https://lit-element.polymer-project.org/guide/properties
57
58
@property ( { attribute : false } ) public hass ! : HomeAssistant ;
58
59
@internalProperty ( ) private config ! : BoilerplateCardConfig ;
59
60
61
+ // https://lit-element.polymer-project.org/guide/properties#accessors-custom
60
62
public setConfig ( config : BoilerplateCardConfig ) : void {
61
63
// TODO Check for required fields and that they are of the proper format
62
64
if ( ! config ) {
@@ -73,6 +75,7 @@ export class BoilerplateCard extends LitElement {
73
75
} ;
74
76
}
75
77
78
+ // https://lit-element.polymer-project.org/guide/lifecycle#shouldupdate
76
79
protected shouldUpdate ( changedProps : PropertyValues ) : boolean {
77
80
if ( ! this . config ) {
78
81
return false ;
@@ -81,6 +84,7 @@ export class BoilerplateCard extends LitElement {
81
84
return hasConfigOrEntityChanged ( this , changedProps , false ) ;
82
85
}
83
86
87
+ // https://lit-element.polymer-project.org/guide/templates
84
88
protected render ( ) : TemplateResult | void {
85
89
// TODO Check for stateObj or other necessary things and render a warning if missing
86
90
if ( this . config . show_warning ) {
@@ -130,6 +134,7 @@ export class BoilerplateCard extends LitElement {
130
134
` ;
131
135
}
132
136
137
+ // https://lit-element.polymer-project.org/guide/styles
133
138
static get styles ( ) : CSSResult {
134
139
return css `` ;
135
140
}
0 commit comments