I'm trying to create a checkbox component with a simple helper text

    class DenCheckboxHelper extends LitElement {
  render() {
    return html`
      <div>
        <vaadin-checkbox id="checkbox"></vaadin-checkbox>
        <div part="helper-text">
          <slot name="helper"></slot>
        </div>
      </div>
    `;
  }

}

I want to use the Vaadin interface because they created it for some reason. The helper is not being displayed but the title does.

This is the Java code

@JsModule("./src/component/den-checkbox-helper.ts")
@Tag("den-checkbox-helper")
public class DenCheckboxHelper extends LitTemplate implements LocaleChangeObserver, HasHelper, HasText, HasValue<HasValue.ValueChangeEvent<Boolean>,Boolean> {

    @Id("checkbox")
    private Checkbox checkbox;
    private String helperText;
    private final String key;
    private boolean translate = true;

    public DenCheckboxHelper(String title, String helperText) {
        super();
        this.key = title;
        this.helperText = helperText;
    }

    @Override
    public void localeChange(LocaleChangeEvent event) {
        if (key != null && translate) {
            checkbox.setLabel(getTranslation(key));
        }
        if (helperText != null && translate) {
            setHelperText(getTranslation(helperText));
        }
    }

    //Methods implemented by iterfaces
}

I think I'm missing something but not sure what.

I'm trying to create a checkbox component with a simple helper text

    class DenCheckboxHelper extends LitElement {
  render() {
    return html`
      <div>
        <vaadin-checkbox id="checkbox"></vaadin-checkbox>
        <div part="helper-text">
          <slot name="helper"></slot>
        </div>
      </div>
    `;
  }

}

I want to use the Vaadin interface because they created it for some reason. The helper is not being displayed but the title does.

This is the Java code

@JsModule("./src/component/den-checkbox-helper.ts")
@Tag("den-checkbox-helper")
public class DenCheckboxHelper extends LitTemplate implements LocaleChangeObserver, HasHelper, HasText, HasValue<HasValue.ValueChangeEvent<Boolean>,Boolean> {

    @Id("checkbox")
    private Checkbox checkbox;
    private String helperText;
    private final String key;
    private boolean translate = true;

    public DenCheckboxHelper(String title, String helperText) {
        super();
        this.key = title;
        this.helperText = helperText;
    }

    @Override
    public void localeChange(LocaleChangeEvent event) {
        if (key != null && translate) {
            checkbox.setLabel(getTranslation(key));
        }
        if (helperText != null && translate) {
            setHelperText(getTranslation(helperText));
        }
    }

    //Methods implemented by iterfaces
}

I think I'm missing something but not sure what.

• java
• vaadin

1 Answer 1

The method setHelperText(String); as you see from the interface is setting property helperText, but you do not have such propety in your Lit-template. You should add it and couple of other things. I do not have to test it now, but I'll drop here some code that needs to be there at least. There are some utility classes in Vaadin's Lumo design system you can import. You may need to fine tune it further.

  import { HelperController } from '@vaadin/field-base/src/helper-controller.js';
  import { FieldAriaController } from '@vaadin/a11y-base/src/field-aria-controller.js';
  // add your own imports

  @customElement('den-checkbox-helper')
  export class DenCheckboxHelper extends LitElement {

  @property()
  helperText : string | null = '';

  _tooltipController : HelperController | undefined;

  firstUpdated() {
    this._helperController = new HelperController(this);
    this._helperController.addEventListener('slot-content-changed', (event) => {
      const { hasContent, node } = event.detail;
      this.toggleAttribute('has-helper', hasContent);
      this.__helperChanged(hasContent, node);
    });
  }

  updated() {
    this._helperController.setHelperText(helperText);
  }

  __helperChanged(hasHelper, helperNode) {
    if (hasHelper) {
      this._fieldAriaController.setHelperId(helperNode.id);
    } else {
      this._fieldAriaController.setHelperId(null);
    }
  }

  render() {
    return html`
      <div>
        <vaadin-checkbox id="checkbox"></vaadin-checkbox>
        <div part="helper-text">
          <slot name="helper"></slot>
        </div>
      </div>
    `;
  }

}