support to pass array value to localize() method

[rudzikdawid]

Description

Currently it is difficult to translate data with additional arguments coming from server. If translation key isn't static but comes dynamic for example from server we need use some workarounds:

in our locales.json we have:

{
  "en": {
    "paid": "Hello {name} please pay {charge}",
  },
  "fr": {
    "paid": "Bonjour {name} S'il vous plaît, n'hésitez pas {charge}"
  }
}

logic:

attached: function() {
    this.loadResources(this.resolveUrl('locales.json'));
    this.getTitleLabel().then(response => {
        this.paymentTitle = response; //['paid', 'name', 'Ethan', 'charge', 21.37]
    })
}

view

<p>{{localize(paymentTitle)}}</p>

It doesn't work because localize() method does not support array value as argument We can call this.localize() in response handler but sometimes it work only with setTimeout()

this.getTitleLabel().then(response => {
    setTimeout(() => {
        this.paymentTitle = this.localize(...response); //'Hello Ethan please pay 21.37'
    })
})

this workaround works, but it is ugly.

<p>{{paymentTitle}}</p>

render

<p>Hello Ethan please pay 21.37</p>

Expected outcome

attached: function() {
    this.loadResources(this.resolveUrl('locales.json'));
    this.getTitleLabel().then(response => {
        this.paymentTitle = response; //['paid', 'name', 'Ethan', 'charge', 21.37]
    })
}

view template

<p>{{localize(paymentTitle)}}</p>

should render DOM:

<p>Hello Ethan please pay 21.37</p>

Actual outcome

localize() method return undefined when we pass array value as argument

Pull Request

PR https://github.com/PolymerElements/app-localize-behavior/pull/140