Merge pull request #48 from jedgar1mx/issue.40

Issue.40

src/components/atoms/TableBody/TableBody.js

@@ -0,0 +1,47 @@
+import styles from '!!raw-loader!./TableBody.css';
+import varStyles from '!!raw-loader!../../../shared/variables.css';
+import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css';
+
+const template = document.createElement('template');
+
+template.innerHTML = `
+<slot></slot>
+`;
+
+
+export default class TableBody 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.tableBody = document.createElement('div');
+    this.tableBody.role = 'rowgroup';
+    shadow.addEventListener( 'slotchange', ev => {  
+      let tempElements = Array.from(this.children);  
+      tempElements.forEach((node, index)=>{
+        (this.getAttribute('data-striped-row') == 'true'  && (index % 2 == 0)) ? node.setAttribute('data-striped-row', 'true') : 0;
+        (this.getAttribute('data-hover') == 'true') ? node.setAttribute('data-hover', 'true') : 0;
+        (this.getAttribute('data-striped-col') == 'true') ? node.setAttribute('data-striped-col', 'true') : 0;
+        (this.getAttribute('data-vertical-align') == 'true') ? node.setAttribute('data-vertical-align', 'true') : 0;
+        (this.getAttribute('data-legacy-responsive') == 'true') ? node.setAttribute('data-legacy-responsive', 'true') : 0;
+        this.tableBody.append(node);
+      });
+    });
+
+    // Add styles   
+    const bootStyles = document.createElement('style');
+    bootStyles.textContent = bootstrapStyles;
+    const variableStyles = document.createElement('style');
+    variableStyles.textContent = varStyles;
+    const itemStyles = document.createElement('style');
+    itemStyles.textContent = styles;
+    shadow.appendChild(bootStyles);
+    shadow.appendChild(variableStyles);
+    shadow.appendChild(itemStyles);
+
+    shadow.appendChild(this.tableBody);
+  }
+};

src/components/atoms/TableBody/cod-table-body.js

@@ -0,0 +1,2 @@
+import TableBody from './TableBody';
+customElements.define('cod-table-body', TableBody);

src/components/atoms/TableCell/TableCell.css

@@ -0,0 +1,15 @@
+.table-cell{
+    padding: 0.5rem 0.5rem;
+    background-color: var(--bs-table-bg);
+    border-bottom: solid var(--bs-border-width) var(--bs-secondary);
+    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
+    height: 100%;
+}
+
+.table-cell.table-striped, .table-cell.table-striped-columns{
+    --bs-table-accent-bg: var(--bs-table-striped-bg);
+}
+
+.table-cell.table-legacy-responsive{
+    width: 5em;
+}

src/components/atoms/TableCell/TableCell.js

@@ -0,0 +1,58 @@
+import styles from '!!raw-loader!./TableCell.css';
+import varStyles from '!!raw-loader!../../../shared/variables.css';
+import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css';
+
+const template = document.createElement('template');
+
+template.innerHTML = `
+<slot></slot>
+`;
+
+
+export default class TableCell 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.tableCell = document.createElement('div');
+    this.tableCell.role = 'cell';
+    shadow.addEventListener( 'slotchange', ev => {  
+      let tempElements = Array.from(this.childNodes);
+      tempElements.forEach((node)=>{
+          this.tableCell.appendChild(node);
+      });
+    });
+
+    // Add styles   
+    const bootStyles = document.createElement('style');
+    bootStyles.textContent = bootstrapStyles;
+    const variableStyles = document.createElement('style');
+    variableStyles.textContent = varStyles;
+    const itemStyles = document.createElement('style');
+    itemStyles.textContent = styles;
+    shadow.appendChild(bootStyles);
+    shadow.appendChild(variableStyles);
+    shadow.appendChild(itemStyles);
+
+    shadow.appendChild(this.tableCell);
+  }
+
+  connectedCallback() {
+    // TableCell attributes
+    let stripedRow = this.getAttribute('data-striped-row');
+    let stripedCol = this.getAttribute('data-striped-col');
+    let legacyResponsive = this.getAttribute('data-legacy-responsive');
+    let verticalAlign = this.getAttribute('data-vertical-align');
+    let extraClasses = this.getAttribute('data-extra-classes');
+    let tableCellClasses = ['table-cell'];
+    (verticalAlign != undefined && verticalAlign != null) ? tableCellClasses.push(verticalAlign) : 0;
+    (legacyResponsive == 'true') ? tableCellClasses.push('table-legacy-responsive') : 0;
+    (stripedRow == 'true') ? tableCellClasses.push('table-striped') : 0;
+    (stripedCol == 'true') ? tableCellClasses.push('table-striped-columns') : 0;
+    (extraClasses != undefined && extraClasses != null) ? tableCellClasses.push(extraClasses) : 0;
+    this.tableCell.className = tableCellClasses.join(' ');
+  }
+};

src/components/atoms/TableCell/cod-table-cell.js

@@ -0,0 +1,2 @@
+import TableCell from './TableCell';
+customElements.define('cod-table-cell', TableCell);

src/components/atoms/TableCellHeader/TableCellHeader.css

@@ -0,0 +1,16 @@
+.table-cell-header{
+    padding: 0.5rem 0.5rem;
+    background-color: var(--bs-table-bg);
+    border-bottom: solid var(--bs-border-width) var(--bs-secondary);
+    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
+    font-weight: bold;
+    height: 100%;
+}
+
+.table-cell-header.table-striped-columns{
+    --bs-table-accent-bg: var(--bs-table-striped-bg);
+}
+
+.table-cell-header.table-legacy-responsive{
+    width: 5em;
+}

src/components/atoms/TableCellHeader/TableCellHeader.js

@@ -0,0 +1,58 @@
+import styles from '!!raw-loader!./TableCellHeader.css';
+import varStyles from '!!raw-loader!../../../shared/variables.css';
+import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css';
+
+const template = document.createElement('template');
+
+template.innerHTML = `
+<slot></slot>
+`;
+
+
+export default class TableCellHeader 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.tableCellHeader = document.createElement('div');
+    this.tableCellHeader.role = 'columnheader';
+    shadow.addEventListener( 'slotchange', ev => {  
+      let tempElements = Array.from(this.childNodes);
+      tempElements.forEach((node)=>{
+          this.tableCellHeader.appendChild(node);
+      });
+    });
+
+    // Add styles   
+    const bootStyles = document.createElement('style');
+    bootStyles.textContent = bootstrapStyles;
+    const variableStyles = document.createElement('style');
+    variableStyles.textContent = varStyles;
+    const itemStyles = document.createElement('style');
+    itemStyles.textContent = styles;
+    shadow.appendChild(bootStyles);
+    shadow.appendChild(variableStyles);
+    shadow.appendChild(itemStyles);
+
+    shadow.appendChild(this.tableCellHeader);
+  }
+
+  connectedCallback() {
+    // tableCellHeader attributes
+    let stripedRow = this.getAttribute('data-striped-row');
+    let stripedCol = this.getAttribute('data-striped-col');
+    let legacyResponsive = this.getAttribute('data-legacy-responsive');
+    let verticalAlign = this.getAttribute('data-vertical-align');
+    let extraClasses = this.getAttribute('data-extra-classes');
+    let tableCellHeaderClasses = ['table-cell-header'];
+    (verticalAlign != undefined && verticalAlign != null) ? tableCellHeaderClasses.push(verticalAlign) : 0;
+    (legacyResponsive == 'true') ? tableCellHeaderClasses.push('table-legacy-responsive') : 0;
+    (stripedRow == 'true') ? tableCellHeaderClasses.push('table-striped') : 0;
+    (stripedCol == 'true') ? tableCellHeaderClasses.push('table-striped-columns') : 0;
+    (extraClasses != undefined && extraClasses != null) ? tableCellHeaderClasses.push(extraClasses) : 0;
+    this.tableCellHeader.className = tableCellHeaderClasses.join(' ');
+  }
+};

src/components/atoms/TableCellHeader/cod-table-cell-header.js

@@ -0,0 +1,2 @@
+import TableCellHeader from './TableCellHeader';
+customElements.define('cod-table-cell-header', TableCellHeader);

src/components/atoms/TableHeader/TableHeader.js

@@ -0,0 +1,45 @@
+import styles from '!!raw-loader!./TableHeader.css';
+import varStyles from '!!raw-loader!../../../shared/variables.css';
+import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css';
+
+const template = document.createElement('template');
+
+template.innerHTML = `
+<slot></slot>
+`;
+
+
+export default class TableHeader 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.tableHeader = document.createElement('div');
+    this.tableHeader.role="rowgroup";
+    shadow.addEventListener( 'slotchange', ev => {  
+      let tempElements = Array.from(this.children);  
+      tempElements.forEach((node)=>{
+        (this.getAttribute('data-striped-col') == 'true') ? node.setAttribute('data-striped-col', 'true') : 0;
+        (this.getAttribute('data-vertical-align') == 'true') ? node.setAttribute('data-vertical-align', 'true') : 0;
+        (this.getAttribute('data-legacy-responsive') == 'true') ? node.setAttribute('data-legacy-responsive', 'true') : 0;
+        this.tableHeader.append(node);
+      });
+    });
+
+    // Add styles   
+    const bootStyles = document.createElement('style');
+    bootStyles.textContent = bootstrapStyles;
+    const variableStyles = document.createElement('style');
+    variableStyles.textContent = varStyles;
+    const itemStyles = document.createElement('style');
+    itemStyles.textContent = styles;
+    shadow.appendChild(bootStyles);
+    shadow.appendChild(variableStyles);
+    shadow.appendChild(itemStyles);
+
+    shadow.appendChild(this.tableHeader);
+  }
+};

src/components/atoms/TableHeader/cod-table-header.js

@@ -0,0 +1,2 @@
+import TableHeader from './TableHeader';
+customElements.define('cod-table-header', TableHeader);

src/components/atoms/TableRow/TableRow.css

@@ -0,0 +1,31 @@
+.table-row{
+    border-color: inherit;
+    border-style: solid;
+    border-width: 0;
+    display: flex;
+    align-items: stretch;
+}
+
+.table-row cod-table-cell, .table-row cod-table-cell-header{
+    flex: 1;
+}
+
+.table-row cod-table-cell[colspan="2"], .table-row cod-table-cell-header[colspan="2"]{
+    flex: 2;
+}
+
+.table-row cod-table-cell[colspan="3"], .table-row cod-table-cell-header[colspan="3"]{
+    flex: 3;
+}
+
+.table-row cod-table-cell[colspan="4"], .table-row cod-table-cell-header[colspan="4"]{
+    flex: 4;
+}
+
+.table-row cod-table-cell[colspan="5"], .table-row cod-table-cell-header[colspan="5"]{
+    flex: 5;
+}
+
+.table-row.table-hover:hover{
+    --bs-table-accent-bg: var(--bs-table-hover-bg);
+}

src/components/atoms/TableRow/TableRow.js

@@ -0,0 +1,56 @@
+import styles from '!!raw-loader!./TableRow.css';
+import varStyles from '!!raw-loader!../../../shared/variables.css';
+import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css';
+
+const template = document.createElement('template');
+
+template.innerHTML = `
+<slot></slot>
+`;
+
+
+export default class TableBody 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.tableRow = document.createElement('div');
+    this.tableRow.role = 'row';
+    shadow.addEventListener( 'slotchange', ev => {  
+      let tempElements = Array.from(this.children);  
+      tempElements.forEach((node, index)=>{
+        (this.getAttribute('data-striped-row') == 'true') ? node.setAttribute('data-striped-row', 'true') : 0;
+        (this.getAttribute('data-striped-col') == 'true'  && (index % 2 != 0)) ? node.setAttribute('data-striped-col', 'true') : 0;
+        (this.getAttribute('data-vertical-align') == 'true') ? node.setAttribute('data-vertical-align', 'true') : 0;
+        (this.getAttribute('data-legacy-responsive') == 'true') ? node.setAttribute('data-legacy-responsive', 'true') : 0;
+        this.tableRow.append(node);
+      });
+    });
+
+    // Add styles   
+    const bootStyles = document.createElement('style');
+    bootStyles.textContent = bootstrapStyles;
+    const variableStyles = document.createElement('style');
+    variableStyles.textContent = varStyles;
+    const itemStyles = document.createElement('style');
+    itemStyles.textContent = styles;
+    shadow.appendChild(bootStyles);
+    shadow.appendChild(variableStyles);
+    shadow.appendChild(itemStyles);
+
+    shadow.appendChild(this.tableRow);
+  }
+
+  connectedCallback() {
+    // TableRow attributes
+    let extraClasses = this.getAttribute('data-extra-classes');
+    let hover = this.getAttribute('data-hover');
+    let tableRowClasses = ['table-row'];
+    (hover == 'true') ? tableRowClasses.push('table-hover') : 0;
+    (extraClasses != undefined && extraClasses != null) ? tableRowClasses.push(extraClasses) : 0;
+    this.tableRow.className = tableRowClasses.join(' ');
+  }
+};

src/components/atoms/TableRow/cod-table-row.js

@@ -0,0 +1,2 @@
+import TableRow from './TableRow';
+customElements.define('cod-table-row', TableRow);