How to use @stencil/core - 10 common examples

) : 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 {

/**
   * An optional description for this item.  This will appear below the label text.
   */
  @Prop({ reflect: true }) textDescription?: string;

  @Watch("textDescription") textDescriptionWatchHandler() {
    this.calciteListItemPropsUpdated.emit();
  }

  /**
   * The main label for this item. This will appear next to the icon.
   */
  @Prop({ reflect: true }) textLabel: string;

  @Watch("textLabel") textLabelWatchHandler() {
    this.calciteListItemPropsUpdated.emit();
  }

  /**
   * A unique value used to identify this item - similar to the value attribute on an <input>.
   */
  @Prop({ reflect: true }) value!: string;

  // --------------------------------------------------------------------------
  //
  //  Private Properties
  //
  // --------------------------------------------------------------------------

  @Element() el: HTMLCalcitePickListItemElement;

const detail = { visible };
    this.ionChange.emit(detail);
    this.ionSplitPaneVisible.emit(detail);
  }

  componentDidLoad() {
    this._styleChildren();
    this.whenChanged();
  }

  componentDidUnload() {
    this.rmL && this.rmL();
    this.rmL = null;
  }

  @Watch('when')
  protected whenChanged() {
    this.rmL && this.rmL();
    this.rmL = null;

    // Check if the split-pane is disabled
    if (this.disabled) {
      this.visible = false;
      return;
    }

    // When query is a boolean
    const query = this.when;
    if (typeof query === 'boolean') {
      this.visible = query;
      return;
    }

componentDidLoad() {
    const tree = readRoutes(this.el);
    this.routes = flattenRouterTree(tree);
    this.redirects = readRedirects(this.el);

    if (Build.isDev) {
      console.debug('%c[@ionic/core]', 'font-weight: bold', `ion-router registered ${this.routes.length} routes`);
      for (const chain of this.routes) {
        const path: string[] = [];
        chain.forEach(r => path.push(...r.path));
        const ids = chain.map(r => r.id);
        console.debug(`%c ${generatePath(path)}`, 'font-weight: bold; padding-left: 20px', '=>\t', `(${ids.join(', ')})`);
      }
    }

    // perform first write
    this.dom.raf(() => {
      console.debug('[OUT] page load -> write nav state');
      this.onPopState();
    });
  }

async get(menu) {
        if (Build.isDev) {
            if (menu === 'left') {
                console.error('menu.side=left is deprecated, use "start" instead');
                return undefined;
            }
            if (menu === 'right') {
                console.error('menu.side=right is deprecated, use "end" instead');
                return undefined;
            }
        }
        await this.waitUntilReady();
        if (menu === 'start' || menu === 'end') {
            // there could be more than one menu on the same side
            // so first try to get the enabled one
            const menuRef = this.find(m => m.side === menu && !m.disabled);
            if (menuRef) {
                return menuRef;

/*
   * @input {boolean} If true, the radios can be deselected. Default false.
   */
  @Prop() allowEmptySelection: boolean = false;

  /*
   * @input {boolean} If true, the user cannot interact with the radio group. Default false.
   */
  @Prop({ mutable: true }) disabled: boolean = false;

  /**
   * @input {string} the value of the radio group.
   */
  @Prop({ mutable: true }) value: string;

  @PropDidChange('value')
  protected valueChanged() {
    this.update();
    this.ionChange.emit(this);
  }

  @Listen('ionRadioDidLoad')
  protected radioDidLoad(ev: RadioEvent) {
    const radio = ev.detail.radio;
    this.radios.push(radio);
    radio.radioId = 'rb-' + this.radioGroupId + '-' + (++this.ids);

    // if the value is not defined then use its unique id
    radio.value = !radio.value ? radio.radioId : radio.value;

    if (radio.checked && !this.value) {
      this.value = radio.value;

resolve();
    });
  }

  private lazyLoadAllContent(): Promise {
    const promises = [];

    for (let i = 0; i < this.length; i++) {
      promises.push(this.lazyLoadContent(i));
    }

    return Promise.all(promises);
  }

  @Method()
  isMobile(): Promise {
    return new Promise((resolve) => {
      resolve(isMobile());
    });
  }

  /* END: Utils */

  /* BEGIN: Reveal */

  @Watch('reveal')
  async onRevealChange() {
    if (!this.reveal) {
      await this.revealAllContent();
    } else {
      await this.redoRevealContent();

}

  /**
   * @hidden
   */
  @Method()
  _register(menu: Menu) {
    if (this.menus.indexOf(menu) < 0) {
      this.menus.push(menu);
    }
  }

  /**
   * @hidden
   */
  @Method()
  _unregister(menu: Menu) {
    const index = this.menus.indexOf(menu);
    if (index > -1) {
      this.menus.splice(index, 1);
    }
  }

  /**
   * @hidden
   */
  @Method()
  _setActiveMenu(menu: Menu) {
    // if this menu should be enabled
    // then find all the other menus on this same side
    // and automatically disable other same side menus
    const side = menu.side;

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(() => {