@gemeentenijmegen/web-components 0.0.2-alpha.64 → 0.0.2-alpha.66

package/dist/nijmegen-accordion.js

@@ -0,0 +1,88 @@
+(function () {
+  'use strict';
+
+  function styleInject(css, ref) {
+    if ( ref === void 0 ) ref = {};
+    var insertAt = ref.insertAt;
+
+    if (!css || typeof document === 'undefined') { return; }
+
+    var head = document.head || document.getElementsByTagName('head')[0];
+    var style = document.createElement('style');
+    style.type = 'text/css';
+
+    if (insertAt === 'top') {
+      if (head.firstChild) {
+        head.insertBefore(style, head.firstChild);
+      } else {
+        head.appendChild(style);
+      }
+    } else {
+      head.appendChild(style);
+    }
+
+    if (style.styleSheet) {
+      style.styleSheet.cssText = css;
+    } else {
+      style.appendChild(document.createTextNode(css));
+    }
+  }
+
+  var css_248z = "/* Nijmegen overrides */\n.utrecht-accordion__button {\n  align-items: flex-start; /* Nijmegen override */\n}\n.utrecht-accordion__button .utrecht-accordion__button-icon {\n  position: relative;\n  top: 1px; /* stylelint-disable-line property-disallowed-list */ /* Nijmegen override */\n}";
+  styleInject(css_248z);
+
+  var html = "<div class=\"utrecht-accordion\">\n  <slot></slot>\n</div>\n";
+
+  class NijmegenAccordion extends HTMLElement {
+    constructor() {
+      super();
+      const template = document.createElement('template');
+      template.innerHTML = html;
+
+      const shadowRoot = this.attachShadow({ mode: 'open' });
+      shadowRoot.appendChild(template.content.cloneNode(true));
+
+      const stylesheet = new CSSStyleSheet();
+      stylesheet.replaceSync(css_248z);
+      shadowRoot.adoptedStyleSheets = [stylesheet];
+    }
+
+    connectedCallback() {
+      Array.from(this.children).forEach((child) => {
+        const expandableElements = child.querySelectorAll('[aria-expanded]');
+        expandableElements.forEach((element) => {
+          element.addEventListener('click', (event) => {
+            // Find the closest element with aria-expanded attribute
+            let target = event.target.closest('[aria-expanded]');
+            this.handleClick(target, expandableElements);
+          });
+        });
+      });
+    }
+
+    handleClick(target, expandableElements) {
+      expandableElements.forEach((element) => {
+        if (element === target) {
+          const section = target.closest('.utrecht-accordion__section');
+          const panel = section ? section.querySelector('.utrecht-accordion__panel') : null;
+
+          if (panel) {
+            element.ariaExpanded = element.ariaExpanded === 'true' ? 'false' : 'true';
+            panel.ariaHidden = element.ariaExpanded === 'false' ? 'true' : 'false';
+
+            if (panel.ariaHidden === 'false') {
+              panel.removeAttribute('hidden');
+            } else {
+              panel.setAttribute('hidden', '');
+            }
+          }
+        }
+      });
+    }
+  }
+
+  if (!customElements.get('nijmegen-accordion')) {
+    customElements.define('nijmegen-accordion', NijmegenAccordion);
+  }
+
+})();

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.2-alpha.64",
+  "version": "0.0.2-alpha.66",
   "author": "gemeente Nijmegen",
   "description": "Web components for the gemeente Nijmegen design system",
   "license": "EUPL-1.2",
@@ -26,12 +26,12 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@gemeentenijmegen/components-css": "0.0.1-alpha.87",
+    "@gemeentenijmegen/components-css": "0.0.1-alpha.89",
     "postcss-discard-duplicates": "7.0.1",
     "rollup": "4.12.1",
     "rollup-plugin-html": "0.2.1",
     "rollup-plugin-node-resolve": "5.2.0",
     "rollup-plugin-postcss": "4.0.2"
   },
-  "gitHead": "4a4a6ec6821ea61c8711f69ddeeda9ab35e1e863"
+  "gitHead": "2919b0c1782fa193b64b3dcd804459a9e434598a"
 }

package/src/accordion/accordion.js

@@ -1,3 +1,4 @@
+import style from '@gemeentenijmegen/components-css/accordion/index.scss?inline';
 import html from './template.html?raw';
 
 class NijmegenAccordion extends HTMLElement {
@@ -8,6 +9,10 @@ class NijmegenAccordion extends HTMLElement {
 
     const shadowRoot = this.attachShadow({ mode: 'open' });
     shadowRoot.appendChild(template.content.cloneNode(true));
+
+    const stylesheet = new CSSStyleSheet();
+    stylesheet.replaceSync(style);
+    shadowRoot.adoptedStyleSheets = [stylesheet];
   }
 
   connectedCallback() {