Can't add behavior IronControlState to component

[joshmutus]

(asked in stackoverflow as well http://stackoverflow.com/questions/32599151/importing-polymer-behavior-in-polymerts/32599461#32599461)

Trying to add the behavior for IronControlState to my web component. Here's a minimal working example:
Html Template"

<link rel="import" href="../bower_components/iron-behaviors/iron-control-state.html">

<dom-module id="beh-test">
  <template>
    <button on-click="func">BUTTON</button>
    <content></content>
  </template>
</dom-module>

TS code:

declare var Polymer: {IronControlState: {focused: boolean} };

@component('beh-test')
@behavior(Polymer.IronControlState)
export class BehTest extends polymer.Base {

  func() {
    console.log(this.focused);
    console.log(Polymer.IronControlState);
  }

  ready() {
    console.log('beh-test ready');
  }
}

Polymer.IronControlState is being imported correctly (it get printed to the console when func() is called ), but it's behaviour isn't being added. The browser console kicks out the warning [beh-test::_flattenBehaviorsList]: behavior is null, check for missing or 404 import

What am I doing wrong?

[nippur72]

I think the @behavior(param) decorator expects param to be a TypeScript class with a .prototype property where to read from. It doesn't work with plain objects.

Perhaps we could extend it to accept plain objects too.

But first I would check this is the issue, can you confirm?

[joshmutus]

This sounds like it's the issue. It would be nice to extend to plain objects so I can use behaviours from the generic Polymer components library

[nippur72]

It was an easy fix, if there is a .prototype works the old way, otherwise use the plain javascript object. Tell me if does (not) work.

[joshmutus]

This certainly solves the problem of my minimal example. I'm having trouble registering focus-changed events from my component, but I don't know if this is my fault or if the behavior isn't being completely inherited. I'll let you know if I can't solve the problem.

Thanks for addressing this so quickly!

[shawnhwei]

@joshmutus why is it necessary to export the class in your example to get this to work? I noticed it won't compile without the export keyword. I want to achieve the same thing, but I don't want any export syntax in the js output.

[joshmutus]

@meetshawn It's been a while since I was looking at this and I actually forget what I was doing. Something about clicking on a component and wanting to shift focus to another component. I ended up abandoning it since it introduced a variety of bugs and I've been meaning to get back to it.

[shawnhwei]

@joshmutus I see. I realized I could just use bracket notation.

@behavior(Polymer['NeonAnimationRunnerBehavior'])

This gives me no compile time errors, since the compiler just skips over it. Seems to work fine with the change made for this issue.