card-tools for newbee

[madmicio]

i am a newbee. please help me understand how to insert the card-tools code into an example card taken by the home assistant dev-doc

`import "https://unpkg.com/wired-card@0.8.1/wired-card.js?module";
import "https://unpkg.com/wired-toggle@0.8.0/wired-toggle.js?module";
import {
LitElement,
html,
css
} from "https://unpkg.com/lit-element@2.0.1/lit-element.js?module";

function loadCSS(url) {
const link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.head.appendChild(link);
}

loadCSS("https://fonts.googleapis.com/css?family=Gloria+Hallelujah");

class WiredToggleCard extends LitElement {
static get properties() {
return {
hass: {},
config: {}
};
}

render() {
return html <wired-card elevation="2"> ${this.config.entities.map(ent => { const stateObj = this.hass.states[ent]; return stateObj ? html

${stateObj.attributes.friendly_name}
<wired-toggle
.checked="${stateObj.state === "on"}"
@change="${ev => this._toggle(stateObj)}"
>

: html

Entity ${ent} not found.

; })} </wired-card> ;
}

setConfig(config) {
if (!config.entities) {
throw new Error("You need to define entities");
}
this.config = config;
}

// The height of your card. Home Assistant uses this to automatically
// distribute all cards over the available columns.
getCardSize() {
return this.config.entities.length + 1;
}

_toggle(state) {
this.hass.callService("homeassistant", "toggle", {
entity_id: state.entity_id
});
}`

[KTibow]

Don't worry, everyone's a newbie at some point :)
According to the docs:

Card Developer Instructions

There are two ways you can get access to the card-tools functions.

1. If you are using npm and a packager:

Add the package as a dependency

> npm install thomasloven/lovelace-card-tools

And then import the parts you want

import { LitElement } from "card-tools/src/lit-element";

2. Have your users add card-tools.js to their lovelace resources and access the functions through the card-tools customElement:

customElements.whenDefined('card-tools').then(() => {
  var cardTools = customElements.get('card-tools');
  // YOUR CODE GOES IN HERE

  class MyPlugin extends cardTools.LitElement {
    setConfig(config) {
      this.name = config.name;
    }

    render() {
      return cardTools.LitHtml`
        ${this.name}
      `;
    }
  }

  customElements.define("my-plugin", MyPlugin);
}); // END OF .then(() => {

setTimeout(() => {
  if(customElements.get('card-tools')) return;
  customElements.define('my-plugin', class extends HTMLElement{
    setConfig() { throw new Error("Can't find card-tools. See https://github.com/thomasloven/lovelace-card-tools");}
  });
}, 2000);

The setTimeout block at the end will make your element display an error message if card-tools is not found. Make sure the element name is the same in both customElements.define() calls.