<!-- temporary HTML --><html><head></head><body><encoded-original> </encoded-original><encoded-original2>PGkxOG4tYXR0ci1yZXBvPgogIDx0ZW1wbGF0ZSBpZD0iY3VzdG9tIj4KICAgIDxpbnB1dCBpMThuLXRhcmdldC1hdHRyPSIkIj4KICA8L3RlbXBsYXRlPgo8L2kxOG4tYXR0ci1yZXBvPg==</encoded-original2><link rel="import" href="../../../i18n-element.html"><!-- start of innerHTML --><i18n-attr-repo>
  <template id="custom">
    <input i18n-target-attr="$">
  </template>
</i18n-attr-repo><!-- end of innerHTML --><dom-module id="i18n-behavior-demo"><template localizable-text="embedded">
    <style>
    .text {
      font-size: 18px;
    }
    .code {
      font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
    }
    </style>

    <h2>{{text.h2_1}}</h2>
    <span id="simple" class="text">{{text.simple}}</span>

    <h2>{{text.h2_3}}</h2>
    <input id="simple-input" placeholder="{{model.simple-input.placeholder}}" i18n-target-attr$="{{model.simple-input.i18n-target-attr}}">

    <h2>{{text.h2_5}}</h2>
    <p id="example-sentence" class="text"><i18n-format lang="{{effectiveLang}}"><span>{{text.example-sentence.0}}</span><i slot="1">{{text.example-sentence.1}}</i><b slot="2">{{text.example-sentence.2}}</b><a class="code" href="https://github.com/t2ym/i18n-format" slot="3">{{text.example-sentence.3}}</a></i18n-format></p>

    <h2>{{text.h2_7}}</h2>
    <p>
      <i18n-format id="compound-format-text" class="text" lang="{{effectiveLang}}">
        <json-data>{{serialize(text.compound-format-text.0)}}</json-data>
        <i18n-number offset="1" slot="1" lang="{{effectiveLang}}">{{recipients.length}}</i18n-number>
        <span slot="2">{{recipients.0.gender}}</span>
        <span slot="3">{{model.data.sender.name}}</span>
        <span slot="4">{{recipients.0.name}}</span>
        <span slot="5">{{text.compound-format-text.5}}</span>
      </i18n-format>
    </p>

    <h2>{{text.h2_9}}</h2>
    <pre class="code"><i18n-format lang="{{effectiveLang}}"><span>{{text.pre_10.0}}</span><span slot="1">{{effectiveLang}}</span><span slot="2">{{_getLangName(effectiveLang,text.langNames)}}</span></i18n-format></pre>
    <pre class="code"><i18n-format lang="{{effectiveLang}}"><span>{{text.pre_11.0}}</span><span slot="1">{{_getStringifiedUser(model.data.sender)}}</span></i18n-format></pre>
    <pre class="code"><i18n-format lang="{{effectiveLang}}"><span>{{text.pre_12.0}}</span><span slot="1">{{_getStringifiedRecipients(recipients)}}</span></i18n-format></pre>

    <template>
      <!-- manually define model data -->
      <json-data id="data" sender="{{model.data.sender}}" recipients="{{model.data.recipients}}"></json-data>
      <!-- define UI data -->
      <json-data id="langNames">{{text.langNames}}</json-data>
    </template>
<template id="localizable-text">
<json-data>
{
  "meta": {},
  "model": {
    "simple-input": {
      "placeholder": "Placeholder String",
      "i18n-target-attr": "Custom I18n Target Attribute String"
    },
    "data": {
      "sender": {
        "name": "Joe",
        "gender": "male"
      },
      "recipients": [
        {
          "name": "Alice",
          "gender": "female"
        },
        {
          "name": "Bob",
          "gender": "male"
        },
        {
          "name": "Yoda",
          "gender": "other"
        }
      ]
    }
  },
  "h2_1": "Simple String",
  "simple": "UI Text String",
  "h2_3": "Simple Attribute",
  "h2_5": "Automatic Format",
  "example-sentence": [
    "This {1} with {2} is automatically converted to {3} to translate it as a whole with any parameter order.",
    "example sentence",
    "some parameters or embedded tags",
    "&lt;i18n-format&gt;"
  ],
  "h2_7": "Compound Format with &lt;i18n-format&gt;",
  "compound-format-text": [
    {
      "0": "You ({3}) gave no gifts.",
      "1": {
        "male": "You ({3}) gave him ({4}) {5}.",
        "female": "You ({3}) gave her ({4}) {5}.",
        "other": "You ({3}) gave them ({4}) {5}."
      },
      "one": {
        "male": "You ({3}) gave him ({4}) and one other person {5}.",
        "female": "You ({3}) gave her ({4}) and one other person {5}.",
        "other": "You ({3}) gave them ({4}) and one other person {5}."
      },
      "other": "You ({3}) gave them ({4}) and {1} other people gifts."
    },
    "{{recipients.length - 1}}",
    "{{recipients.0.gender}}",
    "{{model.data.sender.name}}",
    "{{recipients.0.name}}",
    "a gift"
  ],
  "h2_9": "Parameters",
  "pre_10": [
    "lang = {1} ({2})",
    "{{effectiveLang}}",
    "{{_getLangName(effectiveLang,text.langNames)}}"
  ],
  "pre_11": [
    "sender = {1}",
    "{{_getStringifiedUser(model.data.sender)}}"
  ],
  "pre_12": [
    "recipients = {1}",
    "{{_getStringifiedRecipients(recipients)}}"
  ],
  "langNames": {
    "en": "English",
    "ja": "Japanese",
    "fr": "French"
  }
}
</json-data>
</template>
</template></dom-module><!-- end of polymer3 dom-module id="i18n-behavior-demo" -->
</body></html>