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

success: !this.primary && this.success && !this.warning && !this.danger,
      warning: !this.primary && !this.success && this.warning && !this.danger,
      danger: !this.primary && !this.success && !this.warning && this.danger,
      skeleton: this.skeleton,
      image: this.image != null,
    };

    // simple mode is default when no value or when there are multiple conflicting values
    modes.simple = !modes.primary && !modes.success && !modes.warning && !modes.danger;

    // outlined is not default except in simple mode
    modes.outlined = this.outlined || modes.simple;

    return html`<button class="${classMap(modes)}" type="button">
      <div class="${classMap({">
        ${this.image != null ? html`
          <img alt="" src="${this.image}">
        ` : ''}
        
      </div>
      
      ${this.delay != null ? html`</button>

const missingFixtures = fixtures.length === 0

    return html`
      <style>
        .warning {
          color: var(--mdc-theme-secondary);
        }

        .edit {
          background: var(--mdc-theme-secondary);
        }
      </style>

      ${isEditing
        ? html`
          <div class="item ${classMap({ edit: isEditing })}">

          ${missingFixtures
            ? html`warning`
            : html``
          }

          <form autocomplete="off">
            <input placeholder="x" required="" min="0" type="number" name="x">
            <input placeholder="y" required="" min="0" type="number" name="y">
            <input id="slotName" placeholder="Name" required="" type="text">
            <input placeholder="modV" required="" min="1" type="number" name="modv">

            <button type="submit">Update</button>
            
          </form>
</div>

render () {

    const skeleton = (this.orga == null);
    const orga = skeleton ? CcHeaderOrga.skeletonOrga : this.orga;
    const initials = skeleton ? '' : this.orga.name
      .split(' ')
      .slice(0, 2)
      .map((a) => a[0].toUpperCase())
      .join('');

    return html`
      <div class="wrapper ${classMap({ enterprise: orga.cleverEnterprise })}">
      
        ${this.error ? html`
          <div class="error"><img alt="" src="${warningSvg}" class="icon-img">${i18n('cc-header-orga.error')}</div>
        ` : ''}
        
        ${!this.error ? html`
          
          <div class="details">
            <div class="name ${classMap({ skeleton })}">${orga.name}</div>
            ${orga.cleverEnterprise ? html`
              <div class="spacer"></div>
              <div class="badge">
                <img alt="" src="${badgeSvg}" class="badge_img"> Clever Cloud Enterprise
              </div>
            ` : ''}
          </div></div>

aria-label="Previous month"
            @click="${this._updateMonth('previous')}"
          >${iconChevronLeft}
        `}

        <div class="month-selector-container">${hasMaxDate ? null : html`
          <button aria-label="Next month" class="btn__month-selector">${iconChevronRight}</button>
        `}</div>
      

      <div tabindex="0" class="${classMap({
          'calendars-container': true,
          'has-min-date': hasMinDate,
          'has-max-date': hasMaxDate,
        })}">${calendarsContent}</div>
    
    `;
  }

const { yesterday, last30Days } = skeleton ? CcTileConsumption._skeletonConsumption : this.consumption;

    return html`
      <div class="tile_title">${i18n('cc-tile-consumption.title')}</div>
      
      ${!this.error ? html`
        <div class="tile_body">      
          <div class="line">
            <span>${i18n('cc-tile-consumption.yesterday')}</span>
            <span class="separator"></span>
            <span class="value ${classMap({ skeleton })}">${i18n('cc-tile-consumption.amount', { amount: yesterday })}</span>
          </div>
          <div class="line">
            <span>${i18n('cc-tile-consumption.last-30-days')}</span>
            <span class="separator"></span>
            <span class="value ${classMap({ skeleton })}">${i18n('cc-tile-consumption.amount', { amount: last30Days })}</span>
          </div>
        </div>
      ` : ''}
      
      ${this.error ? html`
        <div class="tile_message"><img alt="" src="${warningSvg}" class="icon-img">${i18n('cc-tile-consumption.error')}</div>
      ` : ''}
    `;
  }

opacity: .5;
        }

        .menu {
          position: absolute;
          top: 0;
          right: 0;
          opacity: .5;
        }

        .menu:hover {
          opacity: 1;
        }
      

      <div style="${this.computeGridVars(width)}" class="container ${classMap({ live })}">
        ${itemTemplates}
      </div>
    `
  }

${this.heading != null ? html`
          <div class="heading">${this.heading}</div>
        ` : ''}

_renderCommit (commit, type, skeleton) {
    if (commit == null && type !== 'git') {
      return '';
    }
    return html`
      <span data-type="${type}" title="${ifDefined(skeleton" class="commit-item ${classMap({ 'is-deploying': (type === 'starting') })}">
        
        <img alt="" src="${commitIcon[type]}" class="commit_img">
        ${commit != null ? html`
          
          <span class="${classMap({">${(commit.slice(0, 8))}<span class="commit_rest">${(commit.slice(8))}</span></span>
        ` : ''}
        ${commit == null ? html`
          <span>${i18n('cc-header-app.commits.no-commits')}</span>
        ` : ''}
      </span>
    `;
  }

const skeleton = (this.scalability == null);
    const { minFlavor, maxFlavor, minInstances, maxInstances } = skeleton ? CcTileScalability._skeletonScalability : this.scalability;

    return html`
      <div class="tile_title">${i18n('cc-tile-scalability.title')}</div>
      
      ${!this.error ? html`
        <div class="tile_body">
          <div class="label">${i18n('cc-tile-scalability.size')}</div>
          <div class="info">
            <div title="${ifDefined(this._getFlavorDetails(minFlavor))}" class="size-label ${classMap({ skeleton })}">${this._formatFlavorName(minFlavor.name)}</div>
            <div class="separator"></div>
            <div title="${ifDefined(this._getFlavorDetails(maxFlavor))}" class="size-label ${classMap({ skeleton })}">${this._formatFlavorName(maxFlavor.name)}</div>
          </div>
          <div class="label">${i18n('cc-tile-scalability.number')}</div>
          <div class="info">
            <div class="count-bubble ${classMap({ skeleton })}">${minInstances}</div>
            <div class="separator"></div>
            <div class="count-bubble ${classMap({ skeleton })}">${maxInstances}</div>
          </div>
        </div>
      ` : ''}

      ${this.error ? html`
        <div class="tile_message"><img alt="" src="${warningSvg}" class="icon-img">${i18n('cc-tile-scalability.error')}</div>
      ` : ''}
    `;