menuContentTemplate(contentsObj) {
    // Renders a separator
    const renderSeparator = () => `<ids-separator></ids-separator>`;

    // Renders a header
    const renderHeader = (elem) => {
      if (typeof elem.text !== 'string') {
        return '';
      }
      return `<ids-menu-header>${elem.text}</ids-menu-header>`;
    };

    // Renders the contents of a submenu
    const renderContents = (submenuContents) => {
      let html = '';
      submenuContents.forEach((elem) => {
        switch (elem.type) {
        case 'header':
          html += renderHeader(elem);
          break;
        case 'separator':
          html += renderSeparator();
          break;
        case 'group':
        default: // Assume "Group"
          // eslint-disable-next-line
          html += renderGroup(elem);
          break;
        }
      });
      return html;
    };

    // Renders a submenu wrapper
    const renderSubmenu = (submenuData) => {
      if (!Array.isArray(submenuData?.contents) || !submenuData.contents.length) {
        return '';
      }

      let id = '';
      if (submenuData.id) {
        id = ` id="${submenuData.id}"`;
      }
      const contents = renderContents(submenuData.contents);
      return `<ids-popup-menu slot="submenu"${id}>${contents}</ids-popup-menu>`;
    };

    // Renders a single item
    const renderItem = (item) => {
      if (typeof item.text !== 'string') {
        return '';
      }
      const text = `${item.text}`;

      let id = '';
      if (typeof item.id === 'string') {
        id = ` id="${item.id}"`;
      }
      let disabled = '';
      if (item.disabled) {
        disabled = ' disabled="true"';
      }
      let icon = '';
      if (typeof item.icon === 'string') {
        icon = ` icon="${item.icon}"`;
      }
      let selected = '';
      if (item.selected) {
        selected = ' selected="true"';
      }
      let submenu = '';
      if (item.submenu) {
        submenu = renderSubmenu(item.submenu);
      }

      return `<ids-menu-item${id}${disabled}${icon}${selected}>
        ${text}
        ${submenu}
      </ids-menu-item>`;
    };

    // Renders the contents of a group
    const renderGroup = (groupData) => {
      if (!Array.isArray(groupData?.items) || !groupData.items.length) {
        return '';
      }

      let id = '';
      if (groupData.id) {
        id = ` id="${groupData.id}"`;
      }
      let itemsHTML = '';
      groupData.items?.forEach((newItem) => {
        if (newItem?.type === 'separator') {
          itemsHTML += renderSeparator();
        } else {
          itemsHTML += renderItem(newItem);
        }
      });
      return `<ids-menu-group${id}>${itemsHTML}</ids-menu-group>`;
    };

    return renderContents(contentsObj);
  }
/**
   * @param {any} contentsObj a plain object structure with Popupmenu Contents
   * @returns {string} list of HTML
   */
@param {any} contentsObj a plain object structure with Popupmenu Contents
@returns {string} list of HTML
@param { any } contentsObj a plain object structure with Popupmenu Contents @returns { string } list of HTML
menuContentTemplate(contentsObj) {
    const renderSeparator = () => `<ids-separator></ids-separator>`;
    const renderHeader = (elem) => {
      if (typeof elem.text !== 'string') {
        return '';
      }
      return `<ids-menu-header>${elem.text}</ids-menu-header>`;
    };
    const renderContents = (submenuContents) => {
      let html = '';
      submenuContents.forEach((elem) => {
        switch (elem.type) {
        case 'header':
          html += renderHeader(elem);
          break;
        case 'separator':
          html += renderSeparator();
          break;
        case 'group':
        default: 
          html += renderGroup(elem);
          break;
        }
      });
      return html;
    };
    const renderSubmenu = (submenuData) => {
      if (!Array.isArray(submenuData?.contents) || !submenuData.contents.length) {
        return '';
      }
      let id = '';
      if (submenuData.id) {
        id = ` id="${submenuData.id}"`;
      }
      const contents = renderContents(submenuData.contents);
      return `<ids-popup-menu slot="submenu"${id}>${contents}</ids-popup-menu>`;
    };
    const renderItem = (item) => {
      if (typeof item.text !== 'string') {
        return '';
      }
      const text = `${item.text}`;
      let id = '';
      if (typeof item.id === 'string') {
        id = ` id="${item.id}"`;
      }
      let disabled = '';
      if (item.disabled) {
        disabled = ' disabled="true"';
      }
      let icon = '';
      if (typeof item.icon === 'string') {
        icon = ` icon="${item.icon}"`;
      }
      let selected = '';
      if (item.selected) {
        selected = ' selected="true"';
      }
      let submenu = '';
      if (item.submenu) {
        submenu = renderSubmenu(item.submenu);
      }
      return `<ids-menu-item${id}${disabled}${icon}${selected}>
        ${text}
        ${submenu}
      </ids-menu-item>`;
    };
    const renderGroup = (groupData) => {
      if (!Array.isArray(groupData?.items) || !groupData.items.length) {
        return '';
      }
      let id = '';
      if (groupData.id) {
        id = ` id="${groupData.id}"`;
      }
      let itemsHTML = '';
      groupData.items?.forEach((newItem) => {
        if (newItem?.type === 'separator') {
          itemsHTML += renderSeparator();
        } else {
          itemsHTML += renderItem(newItem);
        }
      });
      return `<ids-menu-group${id}>${itemsHTML}</ids-menu-group>`;
    };
    return renderContents(contentsObj);
  }
menuContentTemplate ( contentsObj ) { const renderSeparator = ( ) => ` ` ; const renderHeader = ( elem ) => { if ( typeof elem . text !== 'string' ) { return '' ; } return ` ${ elem . text } ` ; } ; const renderContents = ( submenuContents ) => { let html = '' ; submenuContents . forEach ( ( elem ) => { switch ( elem . type ) { case 'header' : html += renderHeader ( elem ) ; break ; case 'separator' : html += renderSeparator ( ) ; break ; case 'group' : default : html += renderGroup ( elem ) ; break ; } } ) ; return html ; } ; const renderSubmenu = ( submenuData ) => { if ( ! Array . isArray ( submenuData ?. contents ) || ! submenuData . contents . length ) { return '' ; } let id = '' ; if ( submenuData . id ) { id = ` ${ submenuData . id } ` ; } const contents = renderContents ( submenuData . contents ) ; return ` ${ id } ${ contents } ` ; } ; const renderItem = ( item ) => { if ( typeof item . text !== 'string' ) { return '' ; } const text = ` ${ item . text } ` ; let id = '' ; if ( typeof item . id === 'string' ) { id = ` ${ item . id } ` ; } let disabled = '' ; if ( item . disabled ) { disabled = ' disabled="true"' ; } let icon = '' ; if ( typeof item . icon === 'string' ) { icon = ` ${ item . icon } ` ; } let selected = '' ; if ( item . selected ) { selected = ' selected="true"' ; } let submenu = '' ; if ( item . submenu ) { submenu = renderSubmenu ( item . submenu ) ; } return ` ${ id } ${ disabled } ${ icon } ${ selected } ${ text } ${ submenu } ` ; } ; const renderGroup = ( groupData ) => { if ( ! Array . isArray ( groupData ?. items ) || ! groupData . items . length ) { return '' ; } let id = '' ; if ( groupData . id ) { id = ` ${ groupData . id } ` ; } let itemsHTML = '' ; groupData . items ?. forEach ( ( newItem ) => { if ( newItem ?. type === 'separator' ) { itemsHTML += renderSeparator ( ) ; } else { itemsHTML += renderItem ( newItem ) ; } } ) ; return ` ${ id } ${ itemsHTML } ` ; } ; return renderContents ( contentsObj ) ; }
@param {any} contentsObj a plain object structure with Popupmenu Contents
 @returns {string} list of HTML
@param { any } contentsObj a plain object structure with Popupmenu Contents @returns { string } list of HTML
// Renders a separator // Renders a header // Renders the contents of a submenu // Assume "Group" // eslint-disable-next-line // Renders a submenu wrapper // Renders a single item // Renders the contents of a group