SyntaxError: Unexpected identifier

[rcjkierkels]

Checklist:

• [X ] I updated to the latest version available
• [ X] I cleared the cache of my browser

Release with the issue: v1.3.1

Last working release (if known): Have never seen it working

Browser and Operating System: Chrome 91.0.4472.164 (Windows 10)

Description of problem:

I use one of your examples. But all examples do not seem to work. For example I have a lovelace dashboard with this yaml config:

panel: true
path: test2
title: Test2
cards:
  - type: "custom:config-template-card"
    variables:
      - states['light.leeslamp'].state
    entities:
      - light.leeslamp
    card:
      type: entities
      title: Entities card sample ${vars[0]}
      entities:
        - light.leeslamp

Without the use of ${vars[0]} it's working fine. If I use the config as above I get a syntax error and my dashboard stays empty.

Javascript errors shown in the web inspector (if applicable):

VM7750:1 Uncaught (in promise) SyntaxError: Unexpected identifier
    at HTMLElement._evaluateTemplate (config-template-card.js:3450)
    at config-template-card.js:3398
    at Array.forEach (<anonymous>)
    at HTMLElement._evaluateConfig (config-template-card.js:3387)
    at HTMLElement.render (config-template-card.js:3362)
    at HTMLElement.update (config-template-card.js:3227)
    at HTMLElement.performUpdate (config-template-card.js:2429)
    at HTMLElement._enqueueUpdate (config-template-card.js:2382)

Additional information:

When I use the javascript debugger in chrome I see these values:

Same issue when using a different example in your docs:

panel: true
path: test2
title: Test2
cards:
  - type: picture-elements
    image: http://hs.sbcounty.gov/CN/Photo%20Gallery/_t/Sample%20Picture%20-%20Koala_jpg.jpg?Mobile=0
    elements:
      - type: "custom:config-template-card"
        variables:
          - states['light.leeslamp'].state
        entities:
          - light.leeslamp
        element:
          type: icon
          icon: "${vars[0] === 'on' ? 'mdi:home' : 'mdi:circle'}"
          style:
            top: 47%
            left: 75%

[rcjkierkels]

@iantrich I am using version: Core Version core-2021.7.4 Supervisor Version supervisor-2021.06.8 Operating System Home Assistant OS 6.1

[rcjkierkels]

Nevermind. Whole template has to be enclosed by ${}. Didn't see the note at the bottom of your readme