DXQ-48163 - add a enchanted component scoping logic

src/_tests_/unit/atomic-component/enchanted-data-grid-generic.test.ts

@@ -30,6 +30,7 @@ import { SampleDataRow } from '../../types';
 import { sampleData as sampleSearchResultResponse } from '../fixture/sampleData';
 import { initDataGridLocalizedStrings, pressKeyAndWait } from '../../helpers';
 import { ENCHANTED_DATA_GRID_COLUMNS, LONG_PAUSE, SHORT_PAUSE } from '../../constants';
+import { EnchantedDataGridGeneric } from '../../../components/atomic-component/enchanted-data-grid-generic';
 
 describe('Data Grid Generic testing', () => {
   const localization: Map<string, string> = initDataGridLocalizedStrings();
@@ -288,14 +289,14 @@ describe('Data Grid Generic testing', () => {
       document.body
     );
 
-    const grid = document.querySelector('enchanted-data-grid-generic');
+    const grid = document.querySelector('enchanted-data-grid-generic') as EnchantedDataGridGeneric;
     const rowPart = grid?.getRowPart(0);
     await expect(rowPart).toBeDefined();
     await expect(rowPart).toBe(DATA_GRID_PARTS.TABLE_ROW_BODY_CONTAINER);
   });
 
   it('EnchantedDataGridGeneric - should return correct sort button class based on direction', async () => {
-    const grid = document.createElement('enchanted-data-grid-generic');
+    const grid = document.createElement('enchanted-data-grid-generic') as EnchantedDataGridGeneric;
 
     grid.data.sortDirection = SortOrder.DESC;
     grid.data.sortAttribute = '_source.title';
@@ -484,7 +485,7 @@ describe('Data Grid Generic testing', () => {
 
     // Need to pause to allow rendering to complete
     await browser.pause(LONG_PAUSE);
-    const element = document.querySelector('enchanted-data-grid-generic');
+    const element = document.querySelector('enchanted-data-grid-generic') as EnchantedDataGridGeneric;
 
     if (element) {
       const mouseoverHeaderSpy = spyOn(element, 'handleHeaderOnMouseOver');
@@ -659,7 +660,7 @@ describe('Data Grid Generic testing', () => {
     await browser.execute("document.documentElement.setAttribute('dir', 'rtl')");
     // Need to pause to allow rendering to complete
     await browser.pause(SHORT_PAUSE);
-    const element = document.querySelector('enchanted-data-grid-generic');
+    const element = document.querySelector('enchanted-data-grid-generic') as EnchantedDataGridGeneric;
     if (element) {
       const tableRow = element.shadowRoot ?
       await element.shadowRoot.querySelector(`#table-row-0`) as HTMLElement:
@@ -704,7 +705,7 @@ describe('Data Grid Generic testing', () => {
     // Need to pause to allow rendering to complete
     await browser.pause(SHORT_PAUSE);
 
-    const element = await document.querySelector('enchanted-data-grid-generic');
+    const element = await document.querySelector('enchanted-data-grid-generic') as EnchantedDataGridGeneric;
 
     if (element) {
       const sortButton = element.shadowRoot ?
@@ -802,7 +803,7 @@ describe('Data Grid Generic testing', () => {
 
     // Need to pause to allow rendering to complete
     await browser.pause(SHORT_PAUSE);
-    const element = document.querySelector('enchanted-data-grid-generic');
+    const element = document.querySelector('enchanted-data-grid-generic') as EnchantedDataGridGeneric;
 
     if (!element) {
       throw new Error('EnchantedDataGridGeneric element not found');
@@ -824,7 +825,7 @@ describe('Data Grid Generic testing', () => {
       document.body
     );
 
-    const grid = document.querySelector('enchanted-data-grid-generic');
+    const grid = document.querySelector('enchanted-data-grid-generic') as EnchantedDataGridGeneric;
 
     await waitFor(() => {
       expect(grid).not.toBeNull();

src/components/atomic-component/enchanted-accordion-summary.ts

@@ -14,15 +14,14 @@
  * ======================================================================== */
 // External imports
 import { html } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 
 //Helper imports
 import { getCurrentDirection } from "../localization";
-import { LOCALE_DIRECTIONS } from "../constants";
+import { COMPONENT_PREFIX, LOCALE_DIRECTIONS } from "../constants";
 import { ACCORDION_SUMMARY_PARTS } from "../../types/cssClassEnums";
 import { EnchantedAcBaseElement } from "./enchanted-ac-base-element";
 
-@customElement("enchanted-accordion-summary")
 export class EnchantedAccordionSummary extends EnchantedAcBaseElement {
   @property({ type: String }) label = "";
   @property({ type: String }) secondaryText = "";
@@ -72,8 +71,5 @@ export class EnchantedAccordionSummary extends EnchantedAcBaseElement {
     `;
    }
 }
-declare global {
-  interface HTMLElementTagNameMap {
-    "enchanted-accordion-summary": EnchantedAccordionSummary;
-  }
-}
+
+customElements.define(`${COMPONENT_PREFIX}enchanted-accordion-summary`, EnchantedAccordionSummary);

src/components/atomic-component/enchanted-accordion.ts

@@ -14,7 +14,7 @@
  * ======================================================================== */
 // External imports
 import { html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 import { debounce } from "lodash";
 
 
@@ -23,14 +23,13 @@ import { EnchantedAcBaseElement } from "./enchanted-ac-base-element";
 
 // Helper imports
 import { getCurrentDirection } from "../localization";
-import { LOCALE_DIRECTIONS } from "../constants";
+import { COMPONENT_PREFIX, LOCALE_DIRECTIONS } from "../constants";
 import { ACCORDION_PARTS } from "../../types/cssClassEnums";
 
 //Icon import
 import "@hcl-software/enchanted-icons-web-component/dist/carbon/es/chevron--down";
 import { KeyboardInputKeys } from "../../utils/keyboardEventKeys";
 
-@customElement("enchanted-accordion")
 export class EnchantedAccordion extends EnchantedAcBaseElement {
   @property({ type: Boolean, reflect: true }) showCheckbox = false;
   @property({ type: Boolean, reflect: true }) disabled = false;
@@ -145,8 +144,5 @@ export class EnchantedAccordion extends EnchantedAcBaseElement {
     this.requestUpdate();
   }
 }
-declare global {
-  interface HTMLElementTagNameMap {
-    "enchanted-accordion": EnchantedAccordion;
-  }
-}
+
+customElements.define(`${COMPONENT_PREFIX}enchanted-accordion`, EnchantedAccordion);

src/components/atomic-component/enchanted-alert.ts

@@ -14,14 +14,15 @@
  * ======================================================================== */
 // External imports
 import { html, nothing, TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { localized } from '@lit/localize';
 
 // Component imports
 import { EnchantedAcBaseElement } from './enchanted-ac-base-element';
 
 // Helper imports
 import { ALERT, ALERT_SEVERITY, ALERT_VARIANTS } from '../../types/cssClassEnums';
+import { COMPONENT_PREFIX } from '../constants';
 
 // Icon imports
 import '@hcl-software/enchanted-icons-web-component/dist/carbon/es/checkmark--outline';
@@ -32,7 +33,6 @@ import '@hcl-software/enchanted-icons-web-component/dist/carbon/es/warning';
 /**
  * Alert component.
  */
-@customElement('enchanted-alert')
 @localized()
 export class EnchantedAlert extends EnchantedAcBaseElement {
 
@@ -124,8 +124,4 @@ export class EnchantedAlert extends EnchantedAcBaseElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'enchanted-alert': EnchantedAlert
-  }
-}
+customElements.define(`${COMPONENT_PREFIX}enchanted-alert`, EnchantedAlert);

src/components/atomic-component/enchanted-avatar.ts

@@ -13,16 +13,16 @@
  * limitations under the License.                                           *
  * ======================================================================== */
 // External imports
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { html, nothing, TemplateResult } from 'lit';
 
 // Component imports
 import { EnchantedAcBaseElement } from './enchanted-ac-base-element';
 
 // Helper imports
 import { AVATAR_PARTS, AVATAR_VARIANT, AVATAR_TYPE, AVATAR_COLOR } from '../../types/cssClassEnums';
+import { COMPONENT_PREFIX } from '../constants';
 
-@customElement('enchanted-avatar')
 export class EnchantedAvatar extends EnchantedAcBaseElement {
   @property()
   variant: string | undefined;
@@ -112,8 +112,4 @@ export class EnchantedAvatar extends EnchantedAcBaseElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'enchanted-avatar': EnchantedAvatar
-  }
-}
+customElements.define(`${COMPONENT_PREFIX}enchanted-avatar`, EnchantedAvatar);

src/components/atomic-component/enchanted-badge.ts

@@ -14,17 +14,16 @@
  * ======================================================================== */	
 // External imports
 import { html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 
 // Component imports
 import { EnchantedAcBaseElement } from './enchanted-ac-base-element';
 
 // Helper imports
 import { getCurrentDirection } from "../localization";
-import { LOCALE_DIRECTIONS } from "../constants";
+import { COMPONENT_PREFIX, LOCALE_DIRECTIONS } from "../constants";
 import { EnchantedBadgeColor, EnchantedBadgeBorder, EnchantedBadgeType, EnchantedBadgeParts } from '../../types/cssClassEnums';
 
-@customElement('enchanted-badge')
 export class EnchantedBadge extends EnchantedAcBaseElement {
 
 
@@ -55,9 +54,5 @@ export class EnchantedBadge extends EnchantedAcBaseElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'enchanted-badge': EnchantedBadge
-  }
-}
+
+customElements.define(`${COMPONENT_PREFIX}enchanted-badge`, EnchantedBadge);

src/components/atomic-component/enchanted-breadcrumbs-item.ts

@@ -13,8 +13,9 @@
  * limitations under the License.                                           *
  * ======================================================================== */
 // External imports
-import { html, TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { TemplateResult } from 'lit';
+import { html } from 'lit/static-html.js';
+import { property } from 'lit/decorators.js';
 
 // Component imports
 import { EnchantedAcBaseElement } from './enchanted-ac-base-element';
@@ -27,6 +28,8 @@ import { BREADCRUMBS_ICON_TYPE } from '../../types/enchanted-breadcrumbs';
 // Icon imports
 import '@hcl-software/enchanted-icons-web-component/dist/carbon/es/home';
 import '@hcl-software/enchanted-icons-web-component/dist/carbon/es/information';
+import { COMPONENT_PREFIX } from '../constants';
+import { ENCHANTED_SVG_ICON_TAG } from '../tags';
 
 export interface PathType {
   title?: string,
@@ -39,7 +42,6 @@ export interface PathType {
 /**
  * Breadcrumb item component.
  */
-@customElement('enchanted-breadcrumbs-item')
 export class EnchantedBreadcrumbsItem extends EnchantedAcBaseElement {
   @property({ type: Object }) path?: PathType;
   @property({ type: String }) partProp?: String;
@@ -66,7 +68,7 @@ export class EnchantedBreadcrumbsItem extends EnchantedAcBaseElement {
   renderIcon() {
     // Check if icon is provided, then render it
     if (this.path?.icon) {
-      return html`<enchanted-svg-icon .icon=${this.path.icon} part=${BREADCRUMBS_PART.BREADCRUMBS_ICON} color="#00000099" data-testid="breadcrumbs-item-icon"/>`;
+      return html`<${ENCHANTED_SVG_ICON_TAG} .icon=${this.path.icon} part=${BREADCRUMBS_PART.BREADCRUMBS_ICON} color="#00000099" data-testid="breadcrumbs-item-icon"></${ENCHANTED_SVG_ICON_TAG}>`;
     }
 
     // If iconName is provided, render the corresponding icon
@@ -111,8 +113,4 @@ export class EnchantedBreadcrumbsItem extends EnchantedAcBaseElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'enchanted-breadcrumbs-item': EnchantedBreadcrumbsItem
-  }
-}
+customElements.define(`${COMPONENT_PREFIX}enchanted-breadcrumbs-item`, EnchantedBreadcrumbsItem);

src/components/atomic-component/enchanted-breadcrumbs.ts

@@ -13,8 +13,8 @@
  * limitations under the License.                                           *
  * ======================================================================== */
 // External imports
-import { html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { html } from 'lit/static-html.js';
+import { property, state } from 'lit/decorators.js';
 
 // Component imports
 import { EnchantedAcBaseElement } from './enchanted-ac-base-element';
@@ -27,11 +27,12 @@ import { isLTR } from '../localization';
 // Icon imports
 import '@hcl-software/enchanted-icons-web-component/dist/carbon/es/chevron--right';
 import '@hcl-software/enchanted-icons-web-component/dist/carbon/es/chevron--left';
+import { COMPONENT_PREFIX } from '../constants';
+import { ENCHANTED_BREADCRUMBS_ITEM_TAG, ENCHANTED_SVG_ICON_TAG } from '../tags';
 
 /**
  * Breadcrumb component.
  */
-@customElement('enchanted-breadcrumbs')
 export class EnchantedBreadcrumbs extends EnchantedAcBaseElement {
   static override shadowRootOptions = {
     ...EnchantedAcBaseElement.shadowRootOptions,
@@ -65,7 +66,7 @@ export class EnchantedBreadcrumbs extends EnchantedAcBaseElement {
                   index < this.paths.length-1 ? 
                     html`
                       <li part="${BREADCRUMBS_PART.BREADCRUMBS_ITEM_LIST}" key="breadcrumb-${index}">
-                        <enchanted-breadcrumbs-item
+                        <${ENCHANTED_BREADCRUMBS_ITEM_TAG}
                           @click="${(event: Event) => {
                             if (this.handleBreadcrumbClick && !path.disabled) this.handleBreadcrumbClick(event, path);
                           }}"
@@ -74,24 +75,24 @@ export class EnchantedBreadcrumbs extends EnchantedAcBaseElement {
                           exportparts="${this.exportParts}"
                           data-testid="breadcrumbs-item"
                         >
-                        </enchanted-breadcrumbs-item>
+                        </${ENCHANTED_BREADCRUMBS_ITEM_TAG}>
                       </li>
                         <li part="${BREADCRUMBS_PART.BREADCRUMBS_SEPARATOR}" aria-hidden="true">
-                          <enchanted-svg-icon .icon=${ this.isLtr
+                          <${ENCHANTED_SVG_ICON_TAG} .icon=${ this.isLtr
                             ? html`<icon-chevron-right size="16"></icon-chevron-right>`
                             : html`<icon-chevron-left size="16"></icon-chevron-left>`
-                          } ?useCurrentColor=${true}></enchanted-svg-icon>
+                          } ?useCurrentColor=${true}></${ENCHANTED_SVG_ICON_TAG}>
                         </li>` :
                     html`
                       <li part="${BREADCRUMBS_PART.BREADCRUMBS_ITEM_LIST}" key="breadcrumb-${index}">
-                        <enchanted-breadcrumbs-item
+                        <${ENCHANTED_BREADCRUMBS_ITEM_TAG}
                           .path="${path}"
                           key="breadcrumb-${index}"
                           exportparts="${this.exportParts}"
                           partProp="${BREADCRUMBS_PART.BREADCRUMBS_ITEM_LAST}"
                           data-testid="breadcrumbs-item"
                           aria-current="page"
-                        />
+                        ></${ENCHANTED_BREADCRUMBS_ITEM_TAG}>
                       </li>`
                 }
               `;
@@ -104,8 +105,4 @@ export class EnchantedBreadcrumbs extends EnchantedAcBaseElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'enchanted-breadcrumbs': EnchantedBreadcrumbs
-  }
-}
+customElements.define(`${COMPONENT_PREFIX}enchanted-breadcrumbs`, EnchantedBreadcrumbs);

src/components/atomic-component/enchanted-button.ts

@@ -13,7 +13,7 @@
  * limitations under the License.                                           *
  * ======================================================================== */
 // External imports
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { html, nothing, TemplateResult } from 'lit';
 
 // Component imports
@@ -22,10 +22,9 @@ import { EnchantedAcBaseElement } from './enchanted-ac-base-element';
 // Helper imports
 import { BUTTON_PARTS, BUTTON_VARIANT, ICON_BUTTON_SIZES, ARIA_ROLES } from '../../types/cssClassEnums';
 import { getCurrentDirection } from '../localization';
-import { LOCALE_DIRECTIONS } from '../constants';
+import { COMPONENT_PREFIX, LOCALE_DIRECTIONS } from '../constants';
 import { KeyboardInputKeys } from '../../utils/keyboardEventKeys';
 
-@customElement('enchanted-button')
 export class EnchantedButton extends EnchantedAcBaseElement {
   static override shadowRootOptions = {
     ...EnchantedAcBaseElement.shadowRootOptions,
@@ -222,8 +221,4 @@ export class EnchantedButton extends EnchantedAcBaseElement {
   }
 }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'enchanted-button': EnchantedButton;
-  }
-}
+customElements.define(`${COMPONENT_PREFIX}enchanted-button`, EnchantedButton);