template() {
    let disabledClass = '';
    let disabledAttr = '';
    if (this.state?.disabled) {
      disabledClass = ' is-disabled';
      disabledAttr = ' disabled';
    }

    // Check
    const check = '<span class="check" part="check"></span>';

    // Icon
    let icon = '';
    if (this.state?.icon) {
      icon = `<ids-icon slot="icon" icon="${this.state.icon}" size="${MENU_ITEM_SIZE}" part="icon"></ids-icon>`;
    }
    const iconSlot = `<slot name="icon">${icon}</slot>`;

    // Selected
    let selectedClass = '';
    if (this.state?.selected) {
      selectedClass = ' selected';
    }

    // Submenu
    let submenuClass = '';
    if (this.submenu) {
      submenuClass = ' has-submenu';
    }

    // Tabindex
    let tabindex = 'tabindex="0"';
    if (this.state?.tabIndex && !this.state?.disabled) {
      tabindex = ` tabindex="${this.state.tabIndex}"`;
    }

    // Text
    const textSlot = `<span class="ids-menu-item-text" part="text"><slot></slot></span>`;

    // Main
    return `<li role="none" part="menu-item" class="ids-menu-item${disabledClass}${selectedClass}${submenuClass}">
      <a ${tabindex} ${disabledAttr}>
        ${check}${iconSlot}${textSlot}
      </a>
      <slot name="submenu"></slot>
    </li>`;
  }
/**
   * Inner template contents
   * @returns {string} The template
   */
Inner template contents
@returns {string} The template
Inner template contents @returns { string } The template
template() {
    let disabledClass = '';
    let disabledAttr = '';
    if (this.state?.disabled) {
      disabledClass = ' is-disabled';
      disabledAttr = ' disabled';
    }
    const check = '<span class="check" part="check"></span>';
    let icon = '';
    if (this.state?.icon) {
      icon = `<ids-icon slot="icon" icon="${this.state.icon}" size="${MENU_ITEM_SIZE}" part="icon"></ids-icon>`;
    }
    const iconSlot = `<slot name="icon">${icon}</slot>`;
    let selectedClass = '';
    if (this.state?.selected) {
      selectedClass = ' selected';
    }
    let submenuClass = '';
    if (this.submenu) {
      submenuClass = ' has-submenu';
    }
    let tabindex = 'tabindex="0"';
    if (this.state?.tabIndex && !this.state?.disabled) {
      tabindex = ` tabindex="${this.state.tabIndex}"`;
    }
    const textSlot = `<span class="ids-menu-item-text" part="text"><slot></slot></span>`;
    return `<li role="none" part="menu-item" class="ids-menu-item${disabledClass}${selectedClass}${submenuClass}">
      <a ${tabindex} ${disabledAttr}>
        ${check}${iconSlot}${textSlot}
      </a>
      <slot name="submenu"></slot>
    </li>`;
  }
template ( ) { let disabledClass = '' ; let disabledAttr = '' ; if ( this . state ?. disabled ) { disabledClass = ' is-disabled' ; disabledAttr = ' disabled' ; } const check = '<span class="check" part="check"></span>' ; let icon = '' ; if ( this . state ?. icon ) { icon = ` ${ this . state . icon } ${ MENU_ITEM_SIZE } ` ; } const iconSlot = ` ${ icon } ` ; let selectedClass = '' ; if ( this . state ?. selected ) { selectedClass = ' selected' ; } let submenuClass = '' ; if ( this . submenu ) { submenuClass = ' has-submenu' ; } let tabindex = 'tabindex="0"' ; if ( this . state ?. tabIndex && ! this . state ?. disabled ) { tabindex = ` ${ this . state . tabIndex } ` ; } const textSlot = ` ` ; return ` ${ disabledClass } ${ selectedClass } ${ submenuClass } ${ tabindex } ${ disabledAttr } ${ check } ${ iconSlot } ${ textSlot } ` ; }
Inner template contents
 @returns {string} The template
Inner template contents @returns { string } The template
// Check // Icon // Selected // Submenu // Tabindex // Text // Main