template() {
    let cssClass = '';
    let protoClasses = '';
    let disabled = '';
    let icon = '';
    let tabIndex = 'tabindex="0"';
    let text = '';
    let type = '';
    if (this.state?.cssClass) {
      cssClass = ` ${this.state.cssClass.join(' ')}`;
    }
    if (this.state?.disabled) {
      disabled = ` disabled="true"`;
    }
    if (this.state?.tabIndex) {
      tabIndex = `tabindex="${this.state.tabIndex}"`;
    }
    if (this.state?.icon) {
      icon = `<ids-icon slot="icon" part="icon" icon="${this.state.icon}"></ids-icon>`;
    }
    if (this.state?.text) {
      text = `<span slot="text" part="text">${this.state.text}</span>`;
    }
    if (this.state && this.state?.type !== 'default') {
      type = ` btn-${this.state.type}`;
    }

    if (this.hasAttribute(attributes.SQUARE)) {
      cssClass += ' square';
    }

    if (this.protoClasses.length) {
      protoClasses = `${this.protoClasses.join(' ')}`;
    }

    let alignCSS = ' align-icon-start';
    let namedSlots = `<slot name="icon" part="icon">${icon}</slot><slot name="text">${text}</slot>`;
    if (this.state?.iconAlign === 'end') {
      alignCSS = ' align-icon-end';
      namedSlots = `<slot name="text" part="text">${text}</slot><slot name="icon">${icon}</slot>`;
    }

    return `<button part="button" class="${protoClasses}${type}${alignCSS}${cssClass}" ${tabIndex}${disabled}>
      ${namedSlots}
      <slot>${icon}${text}</slot>
    </button>`;
  }
/**
   * Inner template contents
   * @returns {string} The template
   */
Inner template contents
@returns {string} The template
Inner template contents @returns { string } The template
template() {
    let cssClass = '';
    let protoClasses = '';
    let disabled = '';
    let icon = '';
    let tabIndex = 'tabindex="0"';
    let text = '';
    let type = '';
    if (this.state?.cssClass) {
      cssClass = ` ${this.state.cssClass.join(' ')}`;
    }
    if (this.state?.disabled) {
      disabled = ` disabled="true"`;
    }
    if (this.state?.tabIndex) {
      tabIndex = `tabindex="${this.state.tabIndex}"`;
    }
    if (this.state?.icon) {
      icon = `<ids-icon slot="icon" part="icon" icon="${this.state.icon}"></ids-icon>`;
    }
    if (this.state?.text) {
      text = `<span slot="text" part="text">${this.state.text}</span>`;
    }
    if (this.state && this.state?.type !== 'default') {
      type = ` btn-${this.state.type}`;
    }
    if (this.hasAttribute(attributes.SQUARE)) {
      cssClass += ' square';
    }
    if (this.protoClasses.length) {
      protoClasses = `${this.protoClasses.join(' ')}`;
    }
    let alignCSS = ' align-icon-start';
    let namedSlots = `<slot name="icon" part="icon">${icon}</slot><slot name="text">${text}</slot>`;
    if (this.state?.iconAlign === 'end') {
      alignCSS = ' align-icon-end';
      namedSlots = `<slot name="text" part="text">${text}</slot><slot name="icon">${icon}</slot>`;
    }
    return `<button part="button" class="${protoClasses}${type}${alignCSS}${cssClass}" ${tabIndex}${disabled}>
      ${namedSlots}
      <slot>${icon}${text}</slot>
    </button>`;
  }
template ( ) { let cssClass = '' ; let protoClasses = '' ; let disabled = '' ; let icon = '' ; let tabIndex = 'tabindex="0"' ; let text = '' ; let type = '' ; if ( this . state ?. cssClass ) { cssClass = ` ${ this . state . cssClass . join ( ' ' ) } ` ; } if ( this . state ?. disabled ) { disabled = ` ` ; } if ( this . state ?. tabIndex ) { tabIndex = ` ${ this . state . tabIndex } ` ; } if ( this . state ?. icon ) { icon = ` ${ this . state . icon } ` ; } if ( this . state ?. text ) { text = ` ${ this . state . text } ` ; } if ( this . state && this . state ?. type !== 'default' ) { type = ` ${ this . state . type } ` ; } if ( this . hasAttribute ( attributes . SQUARE ) ) { cssClass += ' square' ; } if ( this . protoClasses . length ) { protoClasses = ` ${ this . protoClasses . join ( ' ' ) } ` ; } let alignCSS = ' align-icon-start' ; let namedSlots = ` ${ icon } ${ text } ` ; if ( this . state ?. iconAlign === 'end' ) { alignCSS = ' align-icon-end' ; namedSlots = ` ${ text } ${ icon } ` ; } return ` ${ protoClasses } ${ type } ${ alignCSS } ${ cssClass } ${ tabIndex } ${ disabled } ${ namedSlots } ${ icon } ${ text } ` ; }
Inner template contents
 @returns {string} The template
Inner template contents @returns { string } The template