How to use the @stencil/core.Listen function in @stencil/core

) : null}
            
          
        
      
    );
  }

  //--------------------------------------------------------------------------
  //
  //  Event Listeners
  //
  //--------------------------------------------------------------------------

  @Listen("click") onClick(e: Event) {
    console.log(e);
  }

  //--------------------------------------------------------------------------
  //
  //  Events
  //
  //--------------------------------------------------------------------------

  @Event() open: EventEmitter;

  /**
   * If using the header programatically, you can pass in the data structure
   * to the init method, and it will create all sub elements for you.
   */
  @Method() async init(detail): Promise {

radio.name = this.name;

    // add radio to internal list
    this.radios.push(radio);

    // this radio-group does not have a value
    // but this radio is checked, so let's set the
    // radio-group's value from the checked radio
    if (this.value == null && radio.checked) {
      this.value = radio.value;
    } else {
      this.updateRadios();
    }
  }

  @Listen('ionRadioDidUnload')
  onRadioDidUnload(ev: Event) {
    const index = this.radios.indexOf(ev.target as HTMLIonRadioElement);
    if (index > -1) {
      this.radios.splice(index, 1);
    }
  }

  @Listen('ionSelect')
  onRadioSelect(ev: Event) {
    const selectedRadio = ev.target as HTMLIonRadioElement | null;
    if (selectedRadio) {
      this.value = selectedRadio.value;
    }
  }

  @Listen('ionDeselect')

subscriptions.set(topic, handlers);
  }

  @Method()
  unsubscribe(topic: string, handler: (event?: any) => void) {
    const handlers = subscriptions.get(topic) || [];
    const newHandlers = handlers.filter(fun => fun !== handler);
    subscriptions.set(topic, newHandlers);
  }

  @Method()
  publish(topic: string, event?: any) {
    return publishImpl(topic, event);
  }

  @Listen('window:online')
  @Listen('window:offline')
  @Listen('window:orientationchange')
  online(event: Event) {
   return publishImpl(`app:${event.type}`, event);
  }

  @Listen('window:statusTap')
  statusTap(event: Event) {
    return publishImpl(`app:${event.type}`, event);
  }

}

// make this method async just to give the browser a chance to chill and do what it needs to do before firing this off
function publishImpl(topic: string, event: any): Promise {
  return Promise.resolve().then(() => {

shadow: true,
})
export class Bar {
  @Element() public el: HTMLStencilElement;
  /** (optional) Bar size */
  @Prop() public size?: string = '';
  /** (optional) Bar theme */
  @Prop() public theme?: string = '';
  /** (optional) Bar variant */
  @Prop() public variant?: string = '';
  @Prop({ reflectToAttr: true }) public open?: boolean = false;
  @State() public hideSlots?: boolean = false;

  // private hideSlots: boolean = false;

  @Listen('scroll', { target: 'window' })
  public handleScroll(scrollEvent) {
    const scrollPos = scrollEvent.path[1].scrollY;
    if (scrollPos > 1000) {
      this.hideSlots = true;
    } else {
      this.hideSlots = false;
    }
  }

  @Method()
  public async openBar() {
    this.open = true;
  }

  public render() {
    if (!this.open) {

}

  componentDidLoad() {
    this.win.addEventListener('ionRouteRedirectChanged', debounce(this.onRedirectChanged.bind(this), 10));
    this.win.addEventListener('ionRouteDataChanged', debounce(this.onRoutesChanged.bind(this), 100));
  }

  @Listen('window:popstate')
  protected onPopState() {
    const direction = this.historyDirection();
    const path = this.getPath();
    console.debug('[ion-router] URL changed -> update nav', path, direction);
    return this.writeNavStateRoot(path, direction);
  }

  @Listen('document:ionBackButton')
  protected onBackButton(ev: BackButtonEvent) {
    ev.detail.register(0, () => this.back());
  }

  /**
   * Navigate to the specified URL.
   */
  @Method()
  push(url: string, direction: RouterDirection = 'forward') {
    if (url.startsWith('.')) {
      url = (new URL(url, this.win.location.href)).pathname;
    }
    console.debug('[ion-router] URL pushed -> updating nav', url, direction);

    const path = parsePath(url);
    this.setPath(path, direction);

//
  //--------------------------------------------------------------------------

  @Listen("calciteTabChange", { target: "parent" }) tabChangeHandler(
    event: CustomEvent
  ) {
    if (this.tab) {
      this.isActive = this.tab === event.detail.tab;
    } else {
      this.getTabIndex().then(index => {
        this.isActive = index === event.detail.tab;
      });
    }
  }

  @Listen("click") onClick() {
    this.calciteTabsActivate.emit({
      tab: this.tab
    });
  }

  @Listen("keydown") keyDownHandler(e: KeyboardEvent) {
    switch (e.keyCode) {
      case SPACE:
      case ENTER:
        this.calciteTabsActivate.emit({
          tab: this.tab
        });
        e.preventDefault();
        break;
      case RIGHT:
        if (getElementDir(this.el) === "ltr") {

variable = '';

    @State() status: DotFieldStatus = getOriginalStatus();
    @State() errorMessage = '';
    @State() uploadFileInProgress = false;

    private fieldsStatus: { [key: string]: { [key: string]: boolean } } = {};
    private value = {};

    /**
     * Update the form value when valueChange in any of the child fields.
     *
     * @param CustomEvent event
     * @memberof DotFormComponent
     */
    @Listen('valueChange')
    onValueChange(event: CustomEvent): void {
        const { tagName } = event.target as HTMLElement;
        const { name, value } = event.detail;
        const process = fieldCustomProcess[tagName];
        if (tagName === 'DOT-BINARY-FILE' && value) {
            this.uploadFile(event).then((tempFile: DotCMSTempFile) => {
                this.value[name] = tempFile && tempFile.id;
            });
        } else {
            this.value[name] = process ? process(value) : value;
        }
    }

    /**
     * Update the form status when statusChange in any of the child fields
     *

import { createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';


@Component({
  tag: 'ion-modal-controller'
})
export class ModalController implements OverlayController {

  private modals = new Map();

  @Listen('body:ionModalWillPresent')
  protected modalWillPresent(ev: ModalEvent) {
    this.modals.set(ev.target.overlayId, ev.target);
  }

  @Listen('body:ionModalWillDismiss, body:ionModalDidUnload')
  protected modalWillDismiss(ev: ModalEvent) {
    this.modals.delete(ev.target.overlayId);
  }

  @Listen('body:keyup.escape')
  protected escapeKeyUp() {
    removeLastOverlay(this.modals);
  }

  /*
   * Create a modal overlay with modal options.
   */
  @Method()
  create(opts?: ModalOptions): Promise {
    return createOverlay(document.createElement('ion-modal'), opts);
  }

componentDidUnload() {
    this.blocker.destroy();
    this.menuCtrl!._unregister(this);
    if (this.animation) {
      this.animation.destroy();
    }
    if (this.gesture) {
      this.gesture.destroy();
      this.gesture = undefined;
    }

    this.animation = undefined;
    this.contentEl = this.backdropEl = this.menuInnerEl = undefined;
  }

  @Listen('body:ionSplitPaneVisible')
  onSplitPaneChanged(ev: CustomEvent) {
    this.isPaneVisible = ev.detail.isPane(this.el);
    this.updateState();
  }

  @Listen('click', { enabled: false, capture: true })
  onBackdropClick(ev: any) {
    if (this.lastOnEnd < ev.timeStamp - 100) {
      const shouldClose = (ev.composedPath)
        ? !ev.composedPath().includes(this.menuInnerEl)
        : false;

      if (shouldClose) {
        ev.preventDefault();
        ev.stopPropagation();
        this.close();

@Listen('ionDismiss')
  protected onDismiss(ev: UIEvent) {
    ev.stopPropagation();
    ev.preventDefault();

    this.dismiss();
  }

  @Listen('ionBackdropTap')
  protected onBackdropTap() {
    this.dismiss(null, BACKDROP);
  }

  @Listen('ionPopoverDidPresent')
  @Listen('ionPopoverWillPresent')
  @Listen('ionPopoverWillDismiss')
  @Listen('ionPopoverDidDismiss')
  protected lifecycle(modalEvent: CustomEvent) {
    const el = this.usersElement;
    const name = LIFECYCLE_MAP[modalEvent.type];
    if (el && name) {
      const event = new CustomEvent(name, {
        bubbles: false,
        cancelable: false,
        detail: modalEvent.detail
      });
      el.dispatchEvent(event);
    }
  }

  /**