fix(wc): build errors (#11398)

* fix(wc): build errors * fix(format): cleanup --------- Co-authored-by: Ignacio Becerra <[email protected]>
carbon-design-system · Feb 7, 2024 · c37386f · c37386f
1 parent eb16a29
commit c37386f
Show file tree

Hide file tree

Showing 11 changed files with 66 additions and 62 deletions.
diff --git a/packages/web-components/src/components/background-media/background-media.ts b/packages/web-components/src/components/background-media/background-media.ts
@@ -31,31 +31,6 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
 
 @customElement(`${c4dPrefix}-background-media`)
 class C4DBackgroundMedia extends C4DImage {
-  /**
-   * Returns a class-name based on the Gradient Direction type
-   */
-  protected _getGradientClass() {
-    return classMap({
-      [`${prefix}--background-media--gradient`]: true,
-      [`${prefix}--background-media--gradient--${this.gradientDirection}`]:
-        this.gradientDirection,
-    });
-  }
-
-  /**
-   * Returns a class-name based on the Mobile Position type
-   */
-  protected _getMobilePositionClass() {
-    return classMap({
-      [`${prefix}--background-media--container`]: true,
-      [`${prefix}--background-media--mobile-position`]: true,
-      [`${prefix}--background-media--mobile-position--${this.mobilePosition}`]:
-        this.mobilePosition,
-      [`${prefix}--background-media--image`]: this.videoPlayer === null,
-      [`${prefix}--background-media--video`]: this.videoPlayer !== null,
-    });
-  }
-
   /**
    * The opacity of the background image or video. 100 is fully visible, 0 is fully transparent.
    */
@@ -106,6 +81,27 @@ class C4DBackgroundMedia extends C4DImage {
   @property()
   videoPlayer: C4DVideoPlayer | null = null;
 
+  /**
+   * Returns a class-name based on the Gradient Direction type
+   */
+  protected _getGradientClass = {
+    [`${prefix}--background-media--gradient`]: true,
+    [`${prefix}--background-media--gradient--${this.gradientDirection}`]:
+      this.gradientDirection,
+  };
+
+  /**
+   * Returns a class-name based on the Mobile Position type
+   */
+  protected _getMobilePositionClass = {
+    [`${prefix}--background-media--container`]: true,
+    [`${prefix}--background-media--mobile-position`]: true,
+    [`${prefix}--background-media--mobile-position--${this.mobilePosition}`]:
+      this.mobilePosition,
+    [`${prefix}--background-media--image`]: this.videoPlayer === null,
+    [`${prefix}--background-media--video`]: this.videoPlayer !== null,
+  };
+
   /**
    * Conditionally runs super.render() if all children are `c4d-image-item`
    */
@@ -156,7 +152,7 @@ class C4DBackgroundMedia extends C4DImage {
   }
 
   renderGradient() {
-    return html` <div class="${this._getGradientClass()}"></div> `;
+    return html` <div class="${classMap(this._getGradientClass)}"></div> `;
   }
 
   _getMediaOpacity() {
@@ -186,7 +182,7 @@ class C4DBackgroundMedia extends C4DImage {
 
   render() {
     return html`
-      <div class="${this._getMobilePositionClass()}">
+      <div class="${classMap(this._getMobilePositionClass)}">
         ${this.gradientHidden ? '' : this.renderGradient()}
         <div
           class="${prefix}--background-media--item"

diff --git a/packages/web-components/src/components/button/button-expressive.ts b/packages/web-components/src/components/button/button-expressive.ts
@@ -53,15 +53,15 @@ class C4DButtonExpressive extends FocusMixin(StableSelectorMixin(LitElement)) {
       _hasIcon: hasIcon,
       _hasMainContent: hasMainContent,
     } = this;
-    return classMap({
+    return {
       [`${prefix}--btn`]: true,
       [`${prefix}--btn--${kind}`]: kind,
       [`${prefix}--btn--disabled`]: disabled,
       [`${prefix}--btn--icon-only`]: hasIcon && !hasMainContent,
       [`${prefix}--btn--expressive`]: true,
       [`${prefix}--btn--${size}`]: size,
       [`${prefix}-ce--btn--has-icon`]: hasIcon,
-    });
+    };
   }
 
   /**
@@ -89,7 +89,9 @@ class C4DButtonExpressive extends FocusMixin(StableSelectorMixin(LitElement)) {
   protected _renderDisabledLink() {
     const { _classes: classes } = this;
     return html`
-      <p id="button" part="button" class="${classes}">${this._renderInner()}</p>
+      <p id="button" part="button" class="${classMap(classes)}">
+        ${this._renderInner()}
+      </p>
     `;
   }
 
@@ -208,7 +210,7 @@ class C4DButtonExpressive extends FocusMixin(StableSelectorMixin(LitElement)) {
               id="button"
               part="button"
               role="${ifDefined(linkRole)}"
-              class="${classes}"
+              class="${classMap(classes)}"
               download="${ifDefined(download)}"
               href="${ifDefined(href)}"
               hreflang="${ifDefined(hreflang)}"
@@ -225,7 +227,7 @@ class C4DButtonExpressive extends FocusMixin(StableSelectorMixin(LitElement)) {
       <button
         id="button"
         part="button"
-        class="${classes}"
+        class="${classMap(classes)}"
         ?autofocus="${autofocus}"
         ?disabled="${disabled}"
         type="${ifDefined(type)}"

diff --git a/packages/web-components/src/components/content-block-cards/content-block-cards.ts b/packages/web-components/src/components/content-block-cards/content-block-cards.ts
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css, Part } from 'lit';
+import { css } from 'lit';
 import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import C4DContentBlock from '../content-block/content-block';
@@ -27,8 +27,11 @@ class C4DContentBlockCards extends StableSelectorMixin(C4DContentBlock) {
    * The CSS class list for the container (grid) node.
    */
   // eslint-disable-next-line class-methods-use-this
-  protected _getContainerClasses(): string | ((part: Part) => void) {
-    return `${prefix}--content-layout ${prefix}--content-layout--card-group`;
+  protected _getContainerClasses() {
+    return {
+      [`${prefix}--content-layout`]: true,
+      [`${prefix}--content-layout--card-group`]: true,
+    };
   }
 
   static get stableSelector() {

diff --git a/packages/web-components/src/components/content-block-headlines/content-block-headlines.ts b/packages/web-components/src/components/content-block-headlines/content-block-headlines.ts
@@ -28,7 +28,11 @@ class C4DContentBlockHeadlines extends StableSelectorMixin(C4DContentBlock) {
    */
   // eslint-disable-next-line class-methods-use-this
   protected _getContainerClasses() {
-    return `${prefix}--content-layout ${prefix}--content-layout--with-headlines ${prefix}--layout--border`;
+    return {
+      [`${prefix}--content-layout`]: true,
+      [`${prefix}--content-layout--with-headlines`]: true,
+      [`${prefix}--layout--border`]: true,
+    };
   }
 
   protected _renderInnerBody(): TemplateResult | string | void {

diff --git a/packages/web-components/src/components/content-block-segmented/content-block-segmented.ts b/packages/web-components/src/components/content-block-segmented/content-block-segmented.ts
@@ -7,7 +7,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit/directives/class-map.js';
 import { css, html } from 'lit';
 import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import C4DContentBlock, {
@@ -34,15 +33,15 @@ class C4DContentBlockSegmented extends C4DContentBlock {
       _hasHeading: hasHeading,
       _hasMedia: hasMedia,
     } = this;
-    return classMap({
+    return {
       [`${prefix}--content-layout`]: true,
       [`${prefix}--content-layout--with-complementary`]: hasComplementary,
       [`${c4dPrefix}-ce--content-layout--with-adjacent-heading-content`]:
         hasHeading && hasContent && !hasCopy && !hasMedia,
       [`${prefix}--layout--border`]:
         complementaryStyleScheme ===
         CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME.WITH_BORDER,
-    });
+    };
   }
 
   protected _renderInnerBody() {

diff --git a/packages/web-components/src/components/content-block/content-block.ts b/packages/web-components/src/components/content-block/content-block.ts
@@ -86,13 +86,13 @@ class C4DContentBlock extends StableSelectorMixin(LitElement) {
   protected _getContainerClasses() {
     const { complementaryStyleScheme, _hasComplementary: hasComplementary } =
       this;
-    return classMap({
+    return {
       [`${prefix}--content-layout`]: true,
       [`${prefix}--content-layout--with-complementary`]: hasComplementary,
       [`${prefix}--layout--border`]:
         complementaryStyleScheme ===
         CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME.WITH_BORDER,
-    });
+    };
   }
 
   /**
@@ -219,7 +219,7 @@ class C4DContentBlock extends StableSelectorMixin(LitElement) {
 
   render() {
     return html`
-      <div class="${this._getContainerClasses()}">
+      <div class="${classMap(this._getContainerClasses())}">
         ${this._renderHeading()}${this._renderBody()}${this._renderComplementary()}
       </div>
     `;

diff --git a/packages/web-components/src/components/footer/legal-nav.ts b/packages/web-components/src/components/footer/legal-nav.ts
@@ -47,10 +47,10 @@ class C4DLegalNav extends StableSelectorMixin(LitElement) {
    * Returns a class-name based on the type parameter type
    */
   protected _getTypeClass() {
-    return classMap({
+    return {
       [`${c4dPrefix}--legal-nav__list`]: true,
       [`${c4dPrefix}--legal-nav__micro`]: this.size === FOOTER_SIZE.MICRO,
-    });
+    };
   }
 
   /**
@@ -70,7 +70,7 @@ class C4DLegalNav extends StableSelectorMixin(LitElement) {
     return this.size !== FOOTER_SIZE.MICRO
       ? html`
           <nav class="${c4dPrefix}--legal-nav">
-            <div class="${this._getTypeClass()}">
+            <div class="${classMap(this._getTypeClass())}">
               <ul>
                 <slot></slot>
               </ul>
@@ -85,7 +85,7 @@ class C4DLegalNav extends StableSelectorMixin(LitElement) {
         `
       : html`
           <nav class="${c4dPrefix}--legal-nav">
-            <div class="${this._getTypeClass()}">
+            <div class="${classMap(this._getTypeClass())}">
               <div>
                 <slot name="brand"></slot>
                 <ul>

diff --git a/packages/web-components/src/components/leadspace-with-search/leadspace-with-search.ts b/packages/web-components/src/components/leadspace-with-search/leadspace-with-search.ts
@@ -77,11 +77,11 @@ class C4DLeadspaceWithSearch extends StableSelectorMixin(LitElement) {
    * Returns a class-name based on the Adjacent theme type
    */
   protected _getSearchClass() {
-    return classMap({
+    return {
       [`${prefix}--search-container`]: true,
       [`${prefix}--search-container-dual-theme`]:
         this.adjacentTheme === ADJACENT_THEMES.DUAL_THEME,
-    });
+    };
   }
 
   protected firstUpdated() {
@@ -123,7 +123,7 @@ class C4DLeadspaceWithSearch extends StableSelectorMixin(LitElement) {
           <slot name="copy"></slot>
         </div>
       </div>
-      <div class="${this._getSearchClass()}">
+      <div class="${classMap(this._getSearchClass())}">
         <div class="${prefix}--search-container-inner">
           <div class="${prefix}--sticky-header">${this._heading}</div>
           <slot name="search"></slot>

diff --git a/packages/web-components/src/components/leadspace/leadspace.ts b/packages/web-components/src/components/leadspace/leadspace.ts
@@ -54,25 +54,25 @@ class C4DLeadSpace extends StableSelectorMixin(LitElement) {
    * Returns a class-name based on the gradient parameter type
    */
   protected _getGradientClass() {
-    return classMap({
+    return {
       [`${c4dPrefix}--leadspace--gradient`]: this.defaultSrc,
       [`${c4dPrefix}--leadspace__overlay`]: true,
-    });
+    };
   }
 
   /**
    * Returns a class-name based on the type parameter type
    */
   protected _getTypeClass() {
-    return classMap({
+    return {
       [`${c4dPrefix}--leadspace--centered`]:
         this.type === LEADSPACE_TYPE.CENTERED,
       [`${c4dPrefix}--leadspace--centered__image`]:
         this.type === LEADSPACE_TYPE.CENTERED && this.defaultSrc,
       [`${c4dPrefix}--leadspace--productive`]:
         this.type === LEADSPACE_TYPE.SMALL,
       [`${c4dPrefix}--leadspace__section`]: true,
-    });
+    };
   }
 
   /**
@@ -163,9 +163,9 @@ class C4DLeadSpace extends StableSelectorMixin(LitElement) {
   render() {
     const { gradientStyleScheme, type, size } = this;
     return html`
-      <section class="${this._getTypeClass()}" part="section">
+      <section class="${classMap(this._getTypeClass())}" part="section">
         <div class="${c4dPrefix}--leadspace__container">
-          <div class="${this._getGradientClass()}">
+          <div class="${classMap(this._getGradientClass())}">
             ${gradientStyleScheme === LEADSPACE_GRADIENT_STYLE_SCHEME.NONE
               ? undefined
               : svg`

diff --git a/packages/web-components/src/components/locale-modal/region-item.ts b/packages/web-components/src/components/locale-modal/region-item.ts
@@ -36,12 +36,12 @@ class C4DRegionItem extends C4DCard {
   @property({ reflect: true })
   name = '';
 
-  protected _cardClasses = classMap({
+  protected _cardClasses = {
     [`${prefix}--tile`]: true,
     [`${prefix}--card`]: true,
     [`${prefix}--tile--clickable`]: true,
     [`${prefix}--card--link`]: true,
-  });
+  };
 
   /**
    * @returns The disabled link content.
@@ -50,7 +50,7 @@ class C4DRegionItem extends C4DCard {
     const { _classes: classes, _cardClasses: cardClasses } = this;
     return html`
       <button id="link" class="${classes}" disabled type="button">
-        <div class="${cardClasses}">${this._renderInner()}</div>
+        <div class="${classMap(cardClasses)}">${this._renderInner()}</div>
       </button>
     `;
   }
@@ -61,7 +61,7 @@ class C4DRegionItem extends C4DCard {
       ? this._renderDisabledLink()
       : html`
           <button id="link" class="${classes}" type="button">
-            <div class="${cardClasses}">${this._renderInner()}</div>
+            <div class="${classMap(cardClasses)}">${this._renderInner()}</div>
           </button>
         `;
   }

diff --git a/packages/web-components/src/components/masthead/megamenu-right-navigation.ts b/packages/web-components/src/components/masthead/megamenu-right-navigation.ts
@@ -41,11 +41,11 @@ class C4DMegaMenuRightNavigation extends StableSelectorMixin(LitElement) {
    * Returns a class-name(s) for megamenu container
    */
   protected _getClassNames() {
-    return classMap({
+    return {
       [`${prefix}--masthead__megamenu-container`]: true,
       [`${prefix}--masthead__megamenu-container--has-sidebar`]:
         this.styleScheme === MEGAMENU_RIGHT_NAVIGATION_STYLE_SCHEME.HAS_SIDEBAR,
-    });
+    };
   }
 
   /**
@@ -84,7 +84,7 @@ class C4DMegaMenuRightNavigation extends StableSelectorMixin(LitElement) {
 
   render() {
     return html`
-      <div class="${this._getClassNames()}">
+      <div class="${classMap(this._getClassNames())}">
         <div class="${prefix}--masthead__megamenu-container-inner">
           <div class="${prefix}--masthead__megamenu__heading">
             <slot name="heading"></slot>