@aurodesignsystem/auro-accordion 4.3.1 → 4.4.0

package/index.js

@@ -1,7 +1,3 @@
 import { AuroAccordion } from './src/auro-accordion.js';
-import { AuroAccordionGroup } from './src/auro-accordion-group.js';
-import { AuroAccordionButton } from './src/auro-accordion-button.js';
 
 AuroAccordion.register();
-AuroAccordionGroup.register();
-AuroAccordionButton.register();

package/package.json

@@ -7,7 +7,7 @@
     "================================================================================"
   ],
   "name": "@aurodesignsystem/auro-accordion",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "description": "auro-accordion HTML custom element",
   "repository": {
     "type": "git",

package/src/auro-accordion.js

@@ -10,10 +10,13 @@ import { LitElement, nothing } from "lit";
 import { html } from 'lit/static-html.js';
 import { classMap } from 'lit/directives/class-map.js';
 
-import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+import { AuroAccordionGroup } from './auro-accordion-group.js';
+import { AuroAccordionButton } from './auro-accordion-button.js';
 
 import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
 
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
 import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
 import iconVersion from './iconVersion.js';
 
@@ -56,6 +59,16 @@ export class AuroAccordion extends LitElement {
      */
     this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
 
+    /**
+     * @private
+     */
+    this.buttonNameHash = this.generateRandomLetters(4); //eslint-disable-line
+
+    /**
+     * @private
+     */
+    this.buttonTag = versioning.generateTag('auro-accordion-button', this.buttonNameHash, AuroAccordionButton);
+
     /**
      * @private
      */
@@ -115,7 +128,9 @@ export class AuroAccordion extends LitElement {
    *
    */
   static register(name = "auro-accordion") {
+    const nameGroup = `${name}-group`;
     AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroAccordion);
+    AuroAccordionGroup.register(nameGroup);
   }
 
   firstUpdated() {
@@ -138,6 +153,23 @@ export class AuroAccordion extends LitElement {
     return html`${svg}`;
   }
 
+  /**
+   * Generates a random string of letters.
+   * @private
+   * @param {number} length - The number of characters to generate in the string.
+   * @returns {string} - The generated string.
+   */
+  generateRandomLetters(length) {
+    let result = '';
+    const characters = 'abcdefghijklmnopqrstuvwxyz';
+    const charactersLength = characters.length;
+    for (let index = 0; index < length; index += 1) {
+      result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+
+    return result;
+  }
+
   /**
    * Toggles the visibility of the accordion content.
    */
@@ -164,7 +196,7 @@ export class AuroAccordion extends LitElement {
 
     return html`
       <div class="componentWrapper" part="accordion">
-        <auro-accordion-button
+        <${this.buttonTag}
           ?fluid="${this.emphasis}"
           class="${classMap(buttonClasses)}"
           id="accordionTrigger"
@@ -181,7 +213,7 @@ export class AuroAccordion extends LitElement {
             </${this.iconTag}>
           `}
           <slot name="trigger" part="triggerSlot"></slot>
-        </auro-accordion-button>
+        </${this.buttonTag}>
         <div class="content" id="accordionContent" aria-labelledby="accordionTrigger" inert="${!this.expanded || nothing}" part="content">
           <div class="contentWrapper" part="contentWrapper">
             <slot></slot>

package/test/auro-accordion.test.js

@@ -3,6 +3,8 @@ import { AuroAccordion } from '../src/auro-accordion';
 
 AuroAccordion.register();
 
+// import './../index.js';
+
 describe('auro-accordion', () => {
   it('auro-accordion is accessible', async () => {
     const el = await defaultFixture();