add changes

dist/Js/components/accordion/accordion.js

@@ -0,0 +1,110 @@
+class AccordionItem extends HTMLElement {
+    static get observedAttributes() {
+      return ['title'];
+    }
+  
+    #title = '';
+    #collapsed = true;
+  
+    constructor() {
+      super();
+      this.attachShadow({ mode: 'open' });
+    }
+  
+    connectedCallback() {
+      this.update();
+      this.shadowRoot.addEventListener('click', this.toggle.bind(this));
+    }
+  
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (name === 'title') {
+        this.#title = newValue;
+      }
+      this.update();
+    }
+  
+    toggle() {
+      this.#collapsed = !this.#collapsed;
+      this.update();
+  
+      // Dispatch a custom event to notify the parent AccordionElement
+      const event = new CustomEvent('accordion-item-toggle', {
+        bubbles: true,
+        detail: {
+          collapsed: this.#collapsed,
+          item: this,
+        },
+      });
+      this.dispatchEvent(event);
+    }
+  
+    update() {
+      this.shadowRoot.innerHTML = `
+        <style>
+          .accordion-item {
+          
+          }
+          .accordion-title {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            cursor: pointer;
+            padding: 0.5rem;
+            background-color: white;
+          }
+          .accordion-title:hover {
+            background-color: white;
+          }
+          .accordion-title::after {
+            content: '${this.#collapsed ? '+' : '−'}';
+            font-size: 1rem;
+            font-weight: bold;
+            color: #777;
+            margin-left: 0.5rem;
+          }
+          .accordion-content {
+            padding: 0.5rem;
+            display: ${this.#collapsed ? 'none' : 'block'};
+          }
+        </style>
+        <div class="accordion-item">
+          <div class="accordion-title">${this.#title}</div>
+          <div class="accordion-content">
+            <slot></slot>
+          </div>
+        </div>
+      `;
+    }
+  }
+
+  class AccordionElement extends HTMLElement {
+    #activeItem = null;
+  
+    constructor() {
+      super();
+      this.attachShadow({ mode: 'open' });
+      this.shadowRoot.innerHTML = '<slot></slot>';
+      this.addEventListener('accordion-item-toggle', this.handleItemToggle.bind(this));
+    }
+  
+    handleItemToggle(event) {
+      const { collapsed, item } = event.detail;
+  
+      // If the active item is different from the toggled item, collapse the active item
+      if (this.#activeItem && this.#activeItem !== item && !collapsed) {
+        this.#activeItem.toggle();
+      }
+
+      // Update the active item
+      if (!collapsed) {
+        this.#activeItem = item;
+      } else if (this.#activeItem === item) {
+        this.#activeItem = null;
+      }
+    }
+  }
+  
+  customElements.define('accordion-item', AccordionItem);
+  customElements.define('accordion-element', AccordionElement);
+  
+