How to use the lit-html/directives/classMap.js.classMap function in lit-html

render() {
    const {label, disabled, box} = this;
    return html`
      <style>
        :host {
          display: inline-flex;
        }
        .mdc-select {
          flex: 1;
        }
      </style>
      ${menuStyle}${style}
      <div aria-disabled="${disabled}" role="listbox" class="mdc-select ${classMap({'mdc-select--box': box})}">
        <div tabindex="0" class="mdc-select__surface">
          <div class="mdc-select__label">${label}</div>
          <div class="mdc-select__selected-text"></div>
          <div class="mdc-select__bottom-line"></div>
        </div>
        <div class="mdc-menu mdc-select__menu">
          <div class="mdc-list mdc-menu__items">
            
          </div>
        </div>
      </div>`;
  }

render() {
        const classes = {
            'mdc-button--raised': this.raised,
            'mdc-button--unelevated': this.unelevated,
            'mdc-button--outlined': this.outlined,
            'mdc-button--dense': this.dense,
        };
        return html `
      ${this.renderStyle()}
      <button aria-label="${this.label || this.icon}" class="mdc-button ${classMap(classes)}">
        ${this.icon ? html `<span class="material-icons mdc-button__icon">${this.icon}</span>` : ''}
        ${this.label}
        
      </button>`;
    }
};

render() {
        const classes = {
            'mdc-ripple-surface--primary': this.primary,
            'mdc-ripple-surface--accent': this.accent,
        };
        const { disabled, unbounded, active, interactionNode } = this;
        const rippleOptions = { disabled, unbounded, interactionNode };
        if (active !== undefined) {
            rippleOptions.active = active;
        }
        return html `
      ${this.renderStyle()}
      <div class="mdc-ripple-surface ${classMap(classes)}"></div>`;
    }
};

render() {
        const classes = {
            'mdc-button--raised': this.raised,
            'mdc-button--unelevated': this.unelevated,
            'mdc-button--outlined': this.outlined,
            'mdc-button--dense': this.dense,
        };
        return html `
      ${this.renderStyle()}
      <button aria-label="${this.label || this.icon}" class="mdc-button ${classMap(classes)}">
        ${this.icon ? html `<span class="material-icons mdc-button__icon">${this.icon}</span>` : ''}
        ${this.label}
        
      </button>`;
    }
};

render() {
        const classes = {
            'mdc-fab--mini': this.mini,
            'mdc-fab--exited': this.exited,
            'mdc-fab--extended': this.extended,
        };
        const showLabel = this.label !== '' && this.extended;
        return html `
      ${this.renderStyle()}
      <button aria-label="${this.label || this.icon}" class="mdc-fab ${classMap(classes)}">
        ${showLabel &amp;&amp; this.showIconAtEnd ? this.label : ''}
        ${this.icon ? html `<span class="material-icons mdc-fab__icon">${this.icon}</span>` : ''}
        ${showLabel &amp;&amp; !this.showIconAtEnd ? this.label : ''}
      </button>`;
    }
};

render() {
        return html `${this.renderStyle()}
      <div class="mdc-form-field ${classMap({ 'mdc-form-field--align-end': this.alignEnd })}">
        
        <label class="mdc-label">${this.label}</label>
      </div>`;
    }
}

render() {
    const {value, label, box, outlined, disabled, icon, iconTrailing, fullWidth, required, placeHolder, helperText, type} = this;
    const hostClassInfo = {
      'mdc-text-field--with-leading-icon': icon && !iconTrailing,
      'mdc-text-field--with-trailing-icon': icon && iconTrailing,
      'mdc-text-field--box': !fullWidth && box,
      'mdc-text-field--outlined': !fullWidth && outlined,
      'mdc-text-field--disabled': disabled,
      'mdc-text-field--fullwidth': fullWidth,
    };
    return html`
      ${this.renderStyle()}
      <div class="mdc-text-field mdc-text-field--upgraded ${classMap(hostClassInfo)}">
        ${!fullWidth &amp;&amp; icon ? html`<i tabindex="0" class="material-icons mdc-text-field__icon">${icon}</i>` : ''}
        ${this._renderInput({value, required, type, placeHolder, label})}
        ${!fullWidth &amp;&amp; label ? html`<label for="text-field" class="mdc-floating-label ${value ? 'mdc-floating-label--float-above' : ''}">${label}</label>` : ''}
        ${!fullWidth &amp;&amp; outlined ? html`<div class="mdc-notched-outline">
            <svg><path class="mdc-notched-outline__path"></path></svg>
          </div>
          <div class="mdc-notched-outline__idle"></div>` :
    html`<div class="mdc-line-ripple"></div>`}
      </div>
      ${helperText ? html`<p aria-hidden="true" class="mdc-text-field-helper-text">${helperText}</p>` : ''}`;
  }

render() {
        const classes = {
            'mdc-fab--mini': this.mini,
            'mdc-fab--exited': this.exited,
            'mdc-fab--extended': this.extended,
        };
        const showLabel = this.label !== '' && this.extended;
        return html `
      ${this.renderStyle()}
      <button aria-label="${this.label || this.icon}" class="mdc-fab ${classMap(classes)}">
        ${showLabel &amp;&amp; this.showIconAtEnd ? this.label : ''}
        ${this.icon ? html `<span class="material-icons mdc-fab__icon">${this.icon}</span>` : ''}
        ${showLabel &amp;&amp; !this.showIconAtEnd ? this.label : ''}
      </button>`;
    }
};