Merge branch 'development'

dist/collection/components/accordion-container/accordion-container.js

@@ -3,7 +3,7 @@ export class AccordionContainer {
     render() {
         const classAttributes = ["hy-accordion-container", "js-hy-accordion"];
         const id = this.accordionid.toLowerCase().replace(/\W/g, '-');
-        return (h("div", { id: id, class: classAttributes.join(" "), "data-allow-multiple": "true" },
+        return (h("div", { id: id, class: classAttributes.join(" "), "data-allow-multiple": "true", "data-allow-toggle": "true" },
             h("slot", null)));
     }
     static get is() { return "hy-accordion-container"; }

dist/collection/components/accordion-item/accordion-item.js

@@ -57,6 +57,7 @@ export class AccordionItem {
                             accordion.querySelector(`#${target.getAttribute('aria-controls')}`).setAttribute('aria-hidden', 'true');
                         }
                         event.preventDefault();
+                        event.stopImmediatePropagation();
                     }
                 });
                 if (accordion) {

src/components/accordion-container/accordion-container.tsx

@@ -12,7 +12,7 @@ export class AccordionContainer {
     const classAttributes = ["hy-accordion-container", "js-hy-accordion"];
     const id = this.accordionid.toLowerCase().replace(/\W/g,'-');
     return (
-      <div id={id} class={classAttributes.join(" ")} data-allow-multiple="true">
+      <div id={id} class={classAttributes.join(" ")} data-allow-multiple="true" data-allow-toggle="true">
         <slot></slot>
       </div>
     );

src/components/accordion-item/accordion-item.tsx

@@ -28,7 +28,6 @@ export class AccordionItem {
 
     if (this.ready && containerId.length > 0) {
       document.querySelectorAll(`#${containerId}`).forEach(function (accordion) {
-
         const allowMultiple = accordion.hasAttribute('data-allow-multiple');
         const allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle');
         
@@ -36,7 +35,7 @@ export class AccordionItem {
 
         accordion.addEventListener('click', function (event) {
           let target = event.target as HTMLTextAreaElement;
-      
+
           if (target && target.classList.contains('hy-accordion__button')) {
             let targetParent = target.closest('.hy-accordion__item');
             let targetContent = targetParent.querySelectorAll('.hy-accordion__content')[0];
@@ -77,6 +76,7 @@ export class AccordionItem {
             }
       
             event.preventDefault();
+            event.stopImmediatePropagation();
           }
         });
       

src/index.html

@@ -305,6 +305,13 @@
             </hy-grid-item>
           </hy-grid-row>
         </hy-grid-item>
+      <hy-grid-item columns="12">
+        <hy-accordion-container accordionid="example-2">
+          <hy-accordion-item accordiontitle="This is accordion item 1">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </hy-accordion-item>
+        </hy-accordion-container>
+      </hy-grid-item>
       </hy-grid-row>
   </hy-grid-container>
   </body>

www/index.html

@@ -40,4 +40,4 @@
                 elit.</hy-tiny-text> </hy-grid-item> <hy-grid-item columns="4" columnssm="12" columnslg="3" contentalign="right"> <hy-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing
                 elit.</hy-tiny-text> </hy-grid-item> <hy-grid-item columns="4" columnssm="12" columnslg="3" contentalign="left"> <hy-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing
                 elit.</hy-tiny-text> </hy-grid-item> <hy-grid-item columns="4" columnssm="12" columnslg="3" contentalign="center"> <hy-tiny-text>Lorem ipsum dolor sit amet, consectetur adipiscing
-                elit.</hy-tiny-text> </hy-grid-item> </hy-grid-row> </hy-grid-item> </hy-grid-row> </hy-grid-container> </body></html>
+                elit.</hy-tiny-text> </hy-grid-item> </hy-grid-row> </hy-grid-item> <hy-grid-item columns="12"> <hy-accordion-container accordionid="example-2"> <hy-accordion-item accordiontitle="This is accordion item 1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </hy-accordion-item> </hy-accordion-container> </hy-grid-item> </hy-grid-row> </hy-grid-container> </body></html>
\ No newline at end of file