what is the angularValueAccessorBindings on the new sencil angular plugin?

[dgesteves]

import { Config } from '@stencil/core'; import { angularOutputTarget, ValueAccessorConfig } from '@stencil/angular-output-target';

export const config: Config = { namespace: 'demo', outputTargets: [ angularOutputTarget({ componentCorePackage: 'component-library', directivesProxyFile: '../component-library-angular/src/directives/proxies.ts', valueAccessorConfigs: angularValueAccessorBindings, }), { type: 'dist', }, ], };

[dgesteves]

Just an update to let any one with the same question to know.

​
const EVENTS = {
  "Select": "duetSelect",
  "Change": "duetChange"
};
const ATTRS = {
  "Checked": "checked",
  "Value": "value"
};
const angularValueAccessorBindings: ValueAccessorConfig[] = [
  {
    elementSelectors: [ "duet-checkbox", "duet-toggle" ],
    event: EVENTS.Change,
    targetAttr: ATTRS.Checked,
    type: "boolean"
  },
  {
    elementSelectors: [ "duet-input[type=number]" ],
    event: EVENTS.Change,
    targetAttr: ATTRS.Value,
    type: "number"
  },
  {
    elementSelectors: [ "duet-radio" ],
    event: EVENTS.Select,
    targetAttr: ATTRS.Checked,
    type: "radio"
  },
  {
    elementSelectors: [ "duet-range-slider", "duet-select", "duet-radio-group" ],
    event: EVENTS.Change,
    targetAttr: ATTRS.Value,
    type: "select"
  },
  {
    elementSelectors: ["duet-input:not([type=number])", "duet-textarea"],
    event: EVENTS.Change,
    targetAttr: ATTRS.Value,
    type: "text"
  }
];
​
export const config: Config = {
  outputTargts: [
    angularOutputTarget({
      componentCorePackage: "@duetds/components",
      directivesProxyFile: "../angular/src/directives/proxies.ts",
      valueAccessorConfigs: angularValueAccessorBindings,
    })
    //...
  ]
}```

[yinonov]

Just an update to let any one with the same question to know.

​
const EVENTS = {
  "Select": "duetSelect",
  "Change": "duetChange"
};
const ATTRS = {
  "Checked": "checked",
  "Value": "value"
};
const angularValueAccessorBindings: ValueAccessorConfig[] = [
  {
    elementSelectors: [ "duet-checkbox", "duet-toggle" ],
    event: EVENTS.Change,
    targetAttr: ATTRS.Checked,
    type: "boolean"
  },
  {
    elementSelectors: [ "duet-input[type=number]" ],
    event: EVENTS.Change,
    targetAttr: ATTRS.Value,
    type: "number"
  },
  {
    elementSelectors: [ "duet-radio" ],
    event: EVENTS.Select,
    targetAttr: ATTRS.Checked,
    type: "radio"
  },
  {
    elementSelectors: [ "duet-range-slider", "duet-select", "duet-radio-group" ],
    event: EVENTS.Change,
    targetAttr: ATTRS.Value,
    type: "select"
  },
  {
    elementSelectors: ["duet-input:not([type=number])", "duet-textarea"],
    event: EVENTS.Change,
    targetAttr: ATTRS.Value,
    type: "text"
  }
];
​
export const config: Config = {
  outputTargts: [
    angularOutputTarget({
      componentCorePackage: "@duetds/components",
      directivesProxyFile: "../angular/src/directives/proxies.ts",
      valueAccessorConfigs: angularValueAccessorBindings,
    })
    //...
  ]
}```

what is the source of this?

[jthoms1]

@EstevesDiogo mind opening a PR with an update to README with this info? I would appreciate it.

[arielsalminen]

@yinonov This would be the source (taken from https://www.duetds.com): https://gist.github.com/viljamis/4ef368862b1ac1a914ac77ddf8b0a3aa

[Paul-Hebert]

Thanks for opening this issue and adding an example!

How would I determine the value of this if I'm not using it with Duet?

Do I need to define every custom element I'm making that will trigger events?

[rsurjano]

Hello, don't know how to bind stenciljs events is there a detailed examples for this?

[lornz]

It seems like some documentation or at least a detailed example is missing for angularValueAccessorBindings

[WickyNilliams]

There's a pretty detailed example here https://github.com/ionic-team/stencil-ds-output-targets/blob/ad7e6605c372e6e98672a26ddf9e99f7343a9fc8/packages/example-project/component-library/stencil.config.ts#L6-L37

[Bartz0210]

Hi, I have a problem related to this: I am trying to figure out how to define the Custom Events for my tab-navigation

tab-header.tsx

import {
  Component,
  Host,
  h,
  Element,
  Prop,
  Event,
  EventEmitter,
} from '@stencil/core';

@Component({
  tag: 'tab-header',
  styleUrl: 'tab-header.css',
  shadow: true,
})
export class MyTabHeader {
  @Element() el: HTMLElement;

  @Prop() label: string = 'Label';
  @Prop() ariaLabel?: string;
  @Prop() identifier?: string;
  @Prop() selected?: boolean;
  @Event({ eventName: 'tabclick' }) tabClick: EventEmitter; // <----here

  handleClick() {
    this.tabClick.emit(); //<----here
  }

  render() {
    return (
      <Host role="tab">
        <button onClick={() => this.handleClick()}>{this.label}</button>
      </Host>
    );
  }
}

tab-panel.tsx

import {
  Component,
  Host,
  h,
  Element,
  Prop,
  Event,
  EventEmitter,
} from '@stencil/core';

@Component({
  tag: 'tab-panel',
  styleUrl: 'tab-panel.css',
  shadow: true,
})
export class MyTabPanel {
  @Element() el: HTMLElement;

  @Prop() ariaLabel?: string;
  @Prop() identifier?: string;

  @Event() clickClose: EventEmitter; //<-----here

  emitClose() {
    this.clickClose.emit(); //<-----here
  }

  render() {
    return (
      <Host>
        <div class="container">
          <slot>Here goes the content</slot>
          <i class="close" tabIndex={0} onClick={() => this.emitClose()}> //<-----here
            ...
          </i>
        </div>
      </Host>
    );
  }
}

tab-nav.tsx

import { Component, Host, h, Element, State, Listen } from '@stencil/core';
import { MyTabHeader } from '../my-tab-header/my-tab-header';
import {MyTabPanel } from '../my-tab-panel/my-tab-panel';

@Component({
  tag: 'tab-nav',
  styleUrl: 'tab-nav.css',
  shadow: true,
})
export class StormMegaNav {
  @Element() el: HTMLElement;

  @State() navigation: boolean = false;

  @State() isVisible: boolean = false;

 ...
  @Listen('tabclick')
  clickHandler(ev: CustomEvent<MyTabHeader>) {
    this.selectTab(ev.target);

  @Listen('clickClose')
  closeListener(ev: CustomEvent<MyTabPanel>) {
    console.log('>>>>>>clickCloseEvent', ev);
    this.closeHandler();
  }
...

Question How do I register those events with angularValueAccessorBindings? I cannot figure out how to do it. And because of those the build always cancels with this errormessage:

yarn run v1.22.4
warning package.json: No license field
$ yarn build.ng
warning package.json: No license field
$ yarn build.es2015 && yarn build.es5
warning package.json: No license field
$ ngc -p tsconfig.json && rollup --config ./scripts/rollup.config.js
src/directives/proxies.ts(298,57): error TS2307: Cannot find module '../my-components/dist/types/components/my-tab-panel/my-tab-panel'.
src/directives/proxies.ts(312,53): error TS2307: Cannot find module '../my-components/dist/types/components/my-tab-header/my-tab-header'.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[WickyNilliams]

AFAIK you shouldn't need to do any value accessor stuff for tabs - it's exclusively for form/input components and integration with angular's reactive forms.

[Bartz0210]

Thanks :)