i18n-element
Version:
I18N Base Element for lit-html and Polymer
14 lines • 12.2 kB
HTML
<html lang="en" preferred="" locales-path="locales"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"><script src="../../../webcomponentsjs/webcomponents.min.js"></script><script src="../../../wct-browser-legacy/browser.js"></script><style>
.test-container.running-test {
display: block;
}
.test-container:not(.running-test) {
display: none;
}
</style></head><body><div hidden="" by-vulcanize=""><dom-module id="i18n-number" assetpath="../../../i18n-number/"><template strip-whitespace=""><span id="number"></span></template></dom-module><dom-module id="i18n-format" assetpath="../../../i18n-format/"><template></template></dom-module><dom-module id="iron-localstorage" assetpath="../../../iron-localstorage/"></dom-module><dom-module id="i18n-preference" assetpath="../../"><template><iron-localstorage id="storage" name="i18n-behavior-preference"></iron-localstorage></template></dom-module><dom-module id="i18n-attr-repo" assetpath="../../"><template><template id="standard"><input placeholder="" value="type=button|submit"><any-elements title="" aria-label="$" aria-valuetext="$"></any-elements><paper-input label="" error-message="" placeholder=""></paper-input><paper-textarea label="" error-message="" placeholder=""></paper-textarea><paper-dropdown-menu label=""></paper-dropdown-menu><paper-toast text=""></paper-toast><paper-badge label=""></paper-badge><google-chart options="" cols="" rows="" data=""></google-chart><google-signin label-signin="" label-signout="" label-additional=""></google-signin><platinum-push-messaging title="" message=""></platinum-push-messaging><json-data any-attributes=""></json-data></template></template></dom-module><dom-module id="empty-element" assetpath="edge-case/"><template localizable-text="embedded"><template id="localizable-text"><json-data>{ "meta": {}, "model": {} }</json-data></template></template></dom-module><dom-module id="no-template-element" assetpath="edge-case/"></dom-module><dom-module id="complex-compound-binding-element" assetpath="edge-case/"><template localizable-text="embedded"><h5 id="item-update2"><i18n-format lang="{{effectiveLang}}"><span>{{text.item-update2:text.0}}</span><span param="1">{{text.updated}}</span></i18n-format><template is="dom-repeat" items="{{text.authors}}">{{item.name}}</template>{{text.item-update2:text_2}}<template is="dom-if" if="true"><span><b>{{text.item-update2:template_3:span:b}}</b></span></template><b>{{text.item-update2:b_4}}</b><template is="dom-if" if="true">{{text.item-update2:template_5:text}}</template>{{text.item-update2:text_6}}</h5><h5 id="item-update"><i18n-format lang="{{effectiveLang}}"><span>{{text.item-update.0}}</span><span param="1">{{text.updated}}</span><template is="dom-repeat" items="{{text.authors}}"><span param="2">{{item.name}}</span></template><template is="dom-if" if="true"><b param="3">{{text.item-update.3}}</b></template><b param="4">{{text.item-update.4}}</b><template is="dom-if" if="true"><span param="5">{{text.item-update.5}}</span></template><template is="dom-if" if="true"><span param="6"></span></template><template is="dom-if" if="true"><span param="7">{{text.updated}}</span></template></i18n-format></h5><h5 id="item-update3"><i18n-format lang="{{effectiveLang}}"><span>{{text.item-update3:text.0}}</span><span param="1">{{text.updated}}</span></i18n-format><template is="dom-repeat" items="{{text.authors}}">{{item.name}}</template>{{text.item-update3:text_2}}<template is="dom-if" if="true"><b>{{text.item-update3:template_3:b}}</b><b>{{text.item-update3:template_3:b_1}}</b></template><b>{{text.item-update3:b_4}}</b><template is="dom-if" if="true">{{text.item-update3:template_5:text}}</template>{{text.item-update3:text_6}}</h5><h5 id="item-update4"><i18n-format lang="{{effectiveLang}}"><span>{{text.item-update4:text.0}}</span><span param="1">{{text.updated}}</span></i18n-format><template is="dom-repeat" items="{{text.authors}}"><i18n-format lang="{{effectiveLang}}"><span>{{text.item-update4:template_1:text.0}}</span><span param="1">{{item.name}}</span><span param="2">{{text.updated}}</span></i18n-format></template>{{text.item-update4:text_2}}<template is="dom-if" if="true"><b>{{text.item-update4:template_3:b}}</b></template><b>{{text.item-update4:b_4}}</b><template is="dom-if" if="true">{{text.item-update4:template_5:text}}</template>{{text.item-update4:text_6}}</h5><p id="paragraph"><i18n-format lang="{{effectiveLang}}"><span>{{text.paragraph.0}}</span><template is="dom-repeat" items="{{text.parameters}}"><i param="1">{{item}}</i></template><code param="2">{{text.paragraph.2}}</code></i18n-format></p><p id="paragraph2">{{text.paragraph2:text}}<template is="dom-repeat" items="{{text.parameters}}"><span><i>{{item}}</i></span></template>{{text.paragraph2:text_2}}<b>{{text.paragraph2:b_3}}</b>{{text.paragraph2:text_4}}<code>{{text.paragraph2:code_5}}</code>{{text.paragraph2:text_6}}<template is="dom-if" if="false"></template><template is="dom-if" if="false"></template><template is="dom-if" if="false">{{text.updated}}</template></p><template><json-data id="authors">{{text.authors}}</json-data><span id="updated">{{text.updated}}</span><json-data id="parameters">{{text.parameters}}</json-data></template><template id="localizable-text"><json-data>{ "meta": {}, "model": {}, "item-update2:text": [ "updated: {1}, by: ", "{{text.updated}}" ], "item-update2:text_2": " xxx ", "item-update2:template_3:span:b": "IF CONTENT", "item-update2:b_4": "abc", "item-update2:template_5:text": "IF CONTENT 2", "item-update2:text_6": " hello ", "item-update": [ "updated: {1}, by: \n {2}\n xxx\n {3}\n {4}\n {5}\n hello\n \n {6}\n {7} ", "{{text.updated}}", " {{item.name}} ", "IF CONTENT", "abc", "IF CONTENT 2", "<template>", "{{text.updated}}" ], "item-update3:text": [ "updated: {1}, by: ", "{{text.updated}}" ], "item-update3:text_2": " xxx ", "item-update3:template_3:b": "IF", "item-update3:template_3:b_1": "CONTENT", "item-update3:b_4": "abc", "item-update3:template_5:text": "IF CONTENT 2", "item-update3:text_6": " hello ", "item-update4:text": [ "updated: {1}, by: ", "{{text.updated}}" ], "item-update4:template_1:text": [ " {1} = {2} ", "{{item.name}}", "{{text.updated}}" ], "item-update4:text_2": " xxx ", "item-update4:template_3:b": "IF CONTENT", "item-update4:b_4": "abc", "item-update4:template_5:text": "IF CONTENT 2", "item-update4:text_6": " hello ", "paragraph": [ "A paragraph with \n {1}\n is converted to \n {2}. ", "{{item}} ", "<i18n-format>" ], "paragraph2:text": "A paragraph with deep ", "paragraph2:text_2": " is ", "paragraph2:b_3": "not", "paragraph2:text_4": " converted to ", "paragraph2:code_5": "<i18n-format>", "paragraph2:text_6": ". ", "authors": [ { "name": "Joe" }, { "name": "Alice" } ], "updated": "Jan 1st, 2016", "parameters": [ "parameter 1", "parameter 2" ] }</json-data></template></template></dom-module><dom-module id="iron-a11y-announcer" assetpath="../../../iron-a11y-announcer/"><template><style>
:host {
display: inline-block;
position: fixed;
clip: rect(0px,0px,0px,0px);
}
</style><div aria-live$="[[mode]]">[[_text]]</div></template></dom-module><dom-module id="advanced-binding-element" assetpath="edge-case/"><template localizable-text="embedded"><span id="status">{{tr(status,text.statusMessages)}}</span> <span id="default">{{or(value,text.defaultValue)}}</span><i18n-format id="annotated-format" lang="{{effectiveLang}}"><span>{{tr(status,text.statusMessageFormats)}}</span> <span param="1">{{parameter}}</span> <span param="2">{{text.annotated-format.2}}</span></i18n-format><input is="iron-input" id="aria-attributes" title="{{model.aria-attributes.title}}" aria-label$="{{model.aria-attributes.aria-label}}" aria-valuetext$="{{model.aria-attributes.aria-valuetext}}" bind-value="{{value}}"> <span>{{tr('key',text.nodefault)}}</span> <span><i18n-format lang="{{effectiveLang}}"><span>{{text.span_5.0}}</span><span param="1">{{text.defaultValue}}</span><span param="2">{{text.defaultValue}}</span></i18n-format></span><template><json-data text-id="statusMessages">{{text.statusMessages}}</json-data><span text-id="defaultValue">{{text.defaultValue}}</span><json-data text-id="statusMessageFormats">{{text.statusMessageFormats}}</json-data><json-data text-id="nodefault">{{text.nodefault}}</json-data></template><template id="localizable-text"><json-data>{ "meta": {}, "model": { "aria-attributes": { "title": "tooltip text", "aria-label": "aria label text", "aria-valuetext": "aria value text" } }, "annotated-format": [ "{{tr(status,text.statusMessageFormats)}}", "{{parameter}}", "string parameter" ], "span_5": [ "{1} {2}", "{{text.defaultValue}}", "{{text.defaultValue}}" ], "statusMessages": { "ok": "healthy status", "busy": "busy status", "error": "error status", "default": "unknown status" }, "defaultValue": "default value", "statusMessageFormats": { "ok": "healthy status", "busy": "busy status with {2}", "error": "error status with {1} and {2}", "default": "unknown status" }, "nodefault": { "ok": "ok status" } }</json-data></template></template></dom-module></div><h2 id="test-name"></h2><test-fixture class="test-container" id="empty-element-fixture"><template><empty-element></empty-element></template></test-fixture><test-fixture class="test-container" id="bound-empty-element-fixture"><template is="dom-template"><empty-element lang="{{lang}}" observe-html-lang="{{observeHtmlLang}}"></empty-element></template></test-fixture><test-fixture class="test-container" id="no-template-element-fixture"><template><no-template-element></no-template-element></template></test-fixture><test-fixture class="test-container" id="complex-compound-binding-element-fixture"><template is="dom-template"><complex-compound-binding-element lang="{{lang}}" observe-html-lang="{{observeHtmlLang}}"></complex-compound-binding-element></template></test-fixture><test-fixture class="test-container" id="advanced-binding-element-fixture"><template is="dom-template"><advanced-binding-element lang="{{lang}}" observe-html-lang="{{observeHtmlLang}}" status="{{status}}" value="{{value}}" parameter="{{parameter}}"></advanced-binding-element></template></test-fixture><div class="test-container"><template id="edge-case-dom-bind" is="i18n-dom-bind" assetpath="/" localizable-text="embedded"><i18n-format lang="{{effectiveLang}}"><span>{{text.text.0}}</span><span param="1">{{text.name}}</span></i18n-format><i18n-number lang="{{effectiveLang}}">{{text.i18n-number_1}}</i18n-number><i18n-format lang="{{effectiveLang}}"><json-data>{{serialize(text.format)}}</json-data><i18n-number offset="" param="1" lang="{{effectiveLang}}">{{text.i18n-format_2.1}}</i18n-number></i18n-format><i18n-format lang="{{effectiveLang}}"><span>{{text.i18n-format_3.0}}</span><br param="1"></i18n-format><span>{{tr('key')}}</span> <span>{{tr('key',text.table)}}</span> <span>{{tr('key','string')}}</span> <input placeholder="{ invalid: json }"><p><i18n-format lang="{{effectiveLang}}"><span>{{text.p_8.0}}</span><br param="1"><span param="2"></span><span param="3"></span></i18n-format></p><p><i18n-format lang="{{effectiveLang}}"><span>{{text.p_9.0}}</span><template is="dom-repeat" items="[0,1]"><br param="1"></template></i18n-format></p>{{text.text_10}}<br><span></span> <span></span>{{text.text_14}}<template id="localizable-text"><json-data>{ "meta": {}, "model": {}, "text": [ " name = {1} ", "{{text.name}}" ], "i18n-number_1": "1", "i18n-format_2": [ "{{text.format}}", "1" ], "i18n-format_3": [ "format", "" ], "p_8": [ "hello {1}{2} {3} world", "<br>", "<span>", "<span>" ], "p_9": [ "hello{1}world", "<br>" ], "text_10": " hello ", "text_14": " world " }</json-data></template></template><template><json-data text-id="target" data="{}"></json-data><json-data id="func">{ "func": or }</json-data><json-data text-id="format">{ "other": "other format" }</json-data><json-data text-id="table">{ "message-id": "message 1" }</json-data><span text-id="name">John</span></template></div><i18n-preference></i18n-preference><script src="./edge-case-test.js"></script></body></html>