Internationalization (I18n)

First, a dependency on the multilingual component is added in the instance configuration:

"lang": [
  "ccm.instance",
  "https://ccmjs.github.io/tkless-components/lang/versions/ccm.lang-1.0.0.js",
  {
    "translations": {
      "de": {
        "abstract": "Kurzbeschreibung",
        "cancel": "Abbrechen",
        "create_similar_app": "Ähnliche App erstellen",
        "flag": "https://ccmjs.github.io/tkless-components/lang/resources/de.svg"
      },
      "en": {
        "abstract": "Abstract",
        "cancel": "Cancel",
        "create_similar_app": "Create Similar App",
        "flag": "https://ccmjs.github.io/tkless-components/lang/resources/en.svg",
      }
    },
    "active": "en"
  }
],

The configuration of the multilingual instance contains the translations for each language.

Then add the translation indexes in the HTML templates:

<ccm-template key="overview">
  <div id="overview">
    <div id="abstract" class="section">
      <div class="caption">
        <span data-lang="abstract">Abstract</span>
      </div>
      <div class="content">%subject%</div>
    </div>
    <div id="description" class="section">
      <div class="caption">
        <span data-lang="description">Description</span>
      </div>
      <div class="content">%description%</div>
    </div>
    <div id="details" class="section">
      <div class="caption">
        <span data-lang="info">Additional Informations</span>
      </div>
      <div class="content"></div>
    </div>
    <div id="demo" class="section">
      <div class="caption" data-lang="demos">Demos</div>
      <div class="content"></div>
    </div>
  </div>
</ccm-template>

Lastly in the start method of the instance or whenever content has changed and after the content has been created, at the end, call:

// translate content
this.lang && this.lang.translate();