Merge pull request #60 from jedgar1mx/issue.53

Issue.53
CityOfDetroit · Jun 13, 2023 · 6f4138a · 6f4138a
2 parents 610fd97 + 2883f9e
commit 6f4138a
Show file tree

Hide file tree

Showing 23 changed files with 435 additions and 196 deletions.
diff --git a/src/components/atoms/Alert/Alert.js b/src/components/atoms/Alert/Alert.js
@@ -23,7 +23,8 @@ export default class Alert extends HTMLElement {
     shadow.addEventListener( 'slotchange', ev => {  
       let tempElements = Array.from(this.children);  
       tempElements.forEach((node)=>{
-        this.alert.querySelector('#alert-content').append(node);
+        let nodeClasses = node.className.split(' ');
+        (nodeClasses.includes('no-wc')) ? node.remove() : this.alert.querySelector('#alert-content').append(node);
       })
     });
   }

diff --git a/src/components/atoms/Breadcrumb/Breadcrumb.js b/src/components/atoms/Breadcrumb/Breadcrumb.js
@@ -21,10 +21,18 @@ export default class Container extends HTMLElement {
       shadow.appendChild(template.content.cloneNode(true));
       this.nav = shadow.querySelector('nav');
       this.breadcrumb = shadow.querySelector('ol');
-        shadow.addEventListener( 'slotchange', ev => {      
-        let node = this.querySelector( 'li' )
-        node && this.breadcrumb.append( node )
+      shadow.addEventListener( 'slotchange', ev => {   
+        let tempElements = Array.from(this.children);  
+        tempElements.forEach((node)=>{
+          let nodeClasses = node.className.split(' ');
+          if(nodeClasses.includes('no-wc')){
+            node.remove();
+          }else{
+            let crumb = this.querySelector( 'li' );
+            crumb && this.breadcrumb.append( crumb );
+          }
         });
+      });
       const bootStyles = document.createElement('style');
       bootStyles.textContent = bootstrapStyles;
       const variableStyles = document.createElement('style');

diff --git a/src/components/molecules/ButtonGroup/ButtonGroup.js b/src/components/molecules/ButtonGroup/ButtonGroup.js
@@ -20,21 +20,22 @@ export default class FormCheckGroup extends HTMLElement {
       shadow.appendChild(template.content.cloneNode(true));
       this.btnGroup = shadow.querySelector('div');
       shadow.addEventListener( 'slotchange', ev => {  
-      let tempElements = Array.from(this.children);  
-      tempElements.forEach((node)=>{
-        this.btnGroup.append(node);
-      });
+        let tempElements = Array.from(this.children);  
+        tempElements.forEach((node)=>{
+          let nodeClasses = node.className.split(' ');
+          (nodeClasses.includes('no-wc')) ? node.remove() : this.btnGroup.append(node);
+        });
       });
       // setting up styles
-        const bootStyles = document.createElement('style');
-        bootStyles.textContent = bootstrapStyles;
-        const variableStyles = document.createElement('style');
-        variableStyles.textContent = varStyles;
-        const formSelectStyles = document.createElement('style');
-        formSelectStyles.textContent = styles;
-        shadow.appendChild(bootStyles);
-        shadow.appendChild(variableStyles);
-        shadow.appendChild(formSelectStyles);
+      const bootStyles = document.createElement('style');
+      bootStyles.textContent = bootstrapStyles;
+      const variableStyles = document.createElement('style');
+      variableStyles.textContent = varStyles;
+      const formSelectStyles = document.createElement('style');
+      formSelectStyles.textContent = styles;
+      shadow.appendChild(bootStyles);
+      shadow.appendChild(variableStyles);
+      shadow.appendChild(formSelectStyles);
     }
 
     connectedCallback() {

diff --git a/src/components/molecules/Dropdown/Dropdown.js b/src/components/molecules/Dropdown/Dropdown.js
@@ -25,7 +25,8 @@ export default class Dropdown extends HTMLElement {
       this.shadowRoot.addEventListener( 'slotchange', ev => {  
         let tempElements = Array.from(this.children);  
         tempElements.forEach((node)=>{
-          this.dropdown.append(node);
+          let nodeClasses = node.className.split(' ');
+          (nodeClasses.includes('no-wc')) ? node.remove() : this.dropdown.append(node);
         });
       });
 

diff --git a/src/components/molecules/ListGroup/ListGroup.js b/src/components/molecules/ListGroup/ListGroup.js
@@ -11,73 +11,74 @@ template.innerHTML = `
 export default class FormCheckGroup extends HTMLElement {
 
     constructor() {
-      // Always call super first in constructor
-      super();
-      // Create a shadow root
-      const shadow = this.attachShadow({ mode: 'open' });
-      shadow.appendChild(template.content.cloneNode(true));
-      this.listGroup = null;
-      // setting up styles
-    const bootStyles = document.createElement('style');
-    bootStyles.textContent = bootstrapStyles;
-    const variableStyles = document.createElement('style');
-    variableStyles.textContent = varStyles;
-    const listGroupStyles = document.createElement('style');
-    listGroupStyles.textContent = styles;
-    shadow.appendChild(bootStyles);
-    shadow.appendChild(variableStyles);
-    shadow.appendChild(listGroupStyles);
+        // Always call super first in constructor
+        super();
+        // Create a shadow root
+        const shadow = this.attachShadow({ mode: 'open' });
+        shadow.appendChild(template.content.cloneNode(true));
+        this.listGroup = null;
+        // setting up styles
+        const bootStyles = document.createElement('style');
+        bootStyles.textContent = bootstrapStyles;
+        const variableStyles = document.createElement('style');
+        variableStyles.textContent = varStyles;
+        const listGroupStyles = document.createElement('style');
+        listGroupStyles.textContent = styles;
+        shadow.appendChild(bootStyles);
+        shadow.appendChild(variableStyles);
+        shadow.appendChild(listGroupStyles);
     }
-  
+
     connectedCallback() {
-      // setting up styles
-      let tag = this.getAttribute('data-tag');
-      let flushed = this.getAttribute('data-flushed');
-      let numbered = this.getAttribute('data-numbered');
-      let horizontal = this.getAttribute('data-horizontal');
-      let extraClasses = this.getAttribute('data-extra-classes');
-      this.listGroup = document.createElement(tag);
-      (flushed == 'true') ? flushed = 'list-group-flush' : flushed = null;
-      (numbered == 'true') ? numbered = 'list-group-numbered' : numbered = null;
-      (horizontal == 'true') ? horizontal = 'list-group-horizontal' : horizontal = null;
-      this.listGroup.className = [`list-group`, `${flushed || ''}`, `${numbered || ''}`, `${horizontal || ''}`, `${extraClasses || ''}`].join(' ');
-
-      if(!this.shadowRoot.querySelector(tag)){
-        this.shadowRoot.addEventListener( 'slotchange', ev => {  
-            let tempElements = Array.from(this.children);  
-            let tempLength = tempElements.length;
-            tempElements.forEach((node, index)=>{
-                let pClasses = null;
-                switch (index) {
-                    case 0:
-                        node.setAttribute('data-order', 'first');
-                        break;
+        // setting up styles
+        let tag = this.getAttribute('data-tag');
+        let flushed = this.getAttribute('data-flushed');
+        let numbered = this.getAttribute('data-numbered');
+        let horizontal = this.getAttribute('data-horizontal');
+        let extraClasses = this.getAttribute('data-extra-classes');
+        this.listGroup = document.createElement(tag);
+        (flushed == 'true') ? flushed = 'list-group-flush' : flushed = null;
+        (numbered == 'true') ? numbered = 'list-group-numbered' : numbered = null;
+        (horizontal == 'true') ? horizontal = 'list-group-horizontal' : horizontal = null;
+        this.listGroup.className = [`list-group`, `${flushed || ''}`, `${numbered || ''}`, `${horizontal || ''}`, `${extraClasses || ''}`].join(' ');
+
+        if (!this.shadowRoot.querySelector(tag)) {
+            this.shadowRoot.addEventListener('slotchange', ev => {
+                let tempElements = Array.from(this.children);
+                let tempLength = tempElements.length;
+                tempElements.forEach((node, index) => {
+                    let pClasses = null;
+                    switch (index) {
+                        case 0:
+                            node.setAttribute('data-order', 'first');
+                            break;
+
+                        case (tempLength - 1):
+                            node.setAttribute('data-order', 'last');
+                            break;
 
-                    case (tempLength - 1):
-                        node.setAttribute('data-order', 'last');
-                        break;
-
-                    default:
-                        node.setAttribute('data-order', 'middle');
-                        break;
-                }
-                if(flushed){
-                    pClasses = `${flushed} `;
-                }
-                if(numbered){
-                    pClasses = `${numbered} `;
-                    node.setAttribute('data-order-index', (index + 1));
-                }
-                if(horizontal){
-                    pClasses = `${horizontal} `;
-                }
-                if(pClasses){
-                    node.setAttribute('data-parent-classes', pClasses);
-                }
-                this.listGroup.append(node);
+                        default:
+                            node.setAttribute('data-order', 'middle');
+                            break;
+                    }
+                    if (flushed) {
+                        pClasses = `${flushed} `;
+                    }
+                    if (numbered) {
+                        pClasses = `${numbered} `;
+                        node.setAttribute('data-order-index', (index + 1));
+                    }
+                    if (horizontal) {
+                        pClasses = `${horizontal} `;
+                    }
+                    if (pClasses) {
+                        node.setAttribute('data-parent-classes', pClasses);
+                    }
+                    let nodeClasses = node.className.split(' ');
+                    (nodeClasses.includes('no-wc')) ? node.remove() : this.listGroup.append(node);
+                });
             });
-        });
-        this.shadowRoot.appendChild(this.listGroup);
-      }
+            this.shadowRoot.appendChild(this.listGroup);
+        }
     }
-  };
+};
diff --git a/src/components/molecules/Nav/Nav.js b/src/components/molecules/Nav/Nav.js
@@ -25,6 +25,8 @@ export default class Nav extends HTMLElement {
           navItem.className = 'nav-item';
           navItem.appendChild(node);
           this.nav.append(navItem);
+          let nodeClasses = node.className.split(' ');
+          (nodeClasses.includes('no-wc')) ? node.remove() : this.nav.append(navItem);
         });
       });
 

diff --git a/src/components/molecules/Pagination/Pagination.js b/src/components/molecules/Pagination/Pagination.js
@@ -35,7 +35,8 @@ export default class Pagination extends HTMLElement {
           paginationItem.className = paginationItemClasses.join(' ');
           node.setAttribute('data-index', index);
           paginationItem.appendChild(node);
-          this.pagination.append(paginationItem);
+          let nodeClasses = node.className.split(' ');
+          (nodeClasses.includes('no-wc')) ? node.remove() : this.pagination.append(paginationItem);
         });
       });
       this.paginationContainer.appendChild(this.pagination);