@iamproperty/components 7.2.0 → 7.2.1--beta2

package/assets/ts/components/table-basic/table-basic.component.ts

@@ -0,0 +1,56 @@
+import { setupBasicTable, paginateRows, findForm, paginateTable } from '../../modules/table';
+
+class iamTableBasic extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+
+    const loadCSS = `@import "${assetLocation}/css/components/table.component.css";`;
+    const loadExtraCSS = `@import "${assetLocation}/css/components/table-basic.global.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${loadCSS}
+
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <div class="table__container" part="container">
+      <slot name="before"></slot>
+      <div class="table--cta">
+        <div class="table__wrapper" part="wrapper">
+          <slot></slot>
+        </div>
+      </div>
+      <iam-pagination part="pagination" class="pagination--table" ${this.hasAttribute('data-page') ? `data-page="${this.getAttribute('data-page')}"` : ''} ></iam-pagination>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+    // insert extra CSS
+    if (
+      !document.getElementById('tableBasicExtras') &&
+      !document.getElementById('tableSingleExtras') &&
+      !document.getElementById('tableExtras')
+    ) {
+      document.head.insertAdjacentHTML('beforeend', `<style id="tableBasicExtras">${loadExtraCSS}</style>`);
+    }
+  }
+
+  connectedCallback(): void {
+    const pagination = this.shadowRoot.querySelector('iam-pagination');
+    const table = this.querySelector('table');
+    const form = findForm(this, table);
+
+    setupBasicTable(this, table, form, pagination);
+
+    paginateTable(this, table, form, pagination, () => {
+      paginateRows(component);
+    });
+  }
+}
+
+export default iamTableBasic;

package/assets/ts/components/table-no-submit/table-no-submit.component.ts

@@ -0,0 +1,134 @@
+import {
+  setupBasicTable,
+  findForm,
+  setupAdvancedTable,
+  setupNoSubmitTable,
+  paginateRows,
+  paginateTable,
+} from '../../modules/table';
+
+class iamTableNoSubmit extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+
+    const loadCSS = `@import "${assetLocation}/css/components/table.component.css";`;
+    const loadExtraCSS = `@import "${assetLocation}/css/components/table.global.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${loadCSS}
+
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <div class="table__container">
+      <slot name="before"></slot>
+      <div class="table--cta">
+        <div class="table__wrapper">
+          <slot></slot>
+        </div>
+      </div>
+      <iam-pagination part="pagination" class="pagination--table" ${this.hasAttribute('data-page') ? `data-page="${this.getAttribute('data-page')}"` : ''} ></iam-pagination>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+    // insert extra CSS
+    if (!document.getElementById('tableSingleExtras') && !document.getElementById('tableExtras')) {
+      document.head.insertAdjacentHTML('beforeend', `<style id="tableSingleExtras">${loadExtraCSS}</style>`);
+    }
+  }
+
+  connectedCallback(): void {
+    const pagination = this.shadowRoot.querySelector('iam-pagination');
+    const table = this.querySelector('table');
+
+    const savedTableBody = table.querySelector('tbody').cloneNode(true);
+
+    const form = findForm(this, table);
+
+    setupBasicTable(this, table, form, pagination);
+
+    setupAdvancedTable(this, table);
+
+    setupNoSubmitTable(this, table, form, pagination, savedTableBody);
+
+    paginateRows(this);
+
+    if (pagination) {
+      paginateTable(this, table, form, pagination, () => {
+        paginateRows(this);
+      });
+    }
+
+    // #region shared advanced functions
+
+    //endregion
+
+    // select all
+    // search
+    // filter
+    // sort
+
+    /*
+    // Push up the pagination events
+    pagination.addEventListener('update-show', (event) => {
+      const show = event.detail.show;
+
+      const updateEvent = new CustomEvent('update-show', { detail: { show: show } });
+      this.dispatchEvent(updateEvent);
+
+      updateAttributes(this, pagination);
+    });
+
+    pagination.addEventListener('update-page', (event) => {
+      const page = event.detail.page;
+
+      const updateEvent = new CustomEvent('update-page', { detail: { page: page } });
+      this.dispatchEvent(updateEvent);
+
+      updateAttributes(this, pagination);
+    });
+
+*/
+  }
+  /*
+  static get observedAttributes(): any {
+    return ['data-total', 'data-page', 'data-show'];
+  }
+
+  attributeChangedCallback(attrName, oldVal, newVal): void {
+    const pagination = this.shadowRoot.querySelector('iam-pagination');
+
+    switch (attrName) {
+      case 'data-total': {
+        if (oldVal != newVal) {
+          pagination.setAttribute('data-total', newVal);
+          paginateRows(this);
+        }
+        break;
+      }
+      case 'data-show': {
+        if (oldVal != newVal) {
+          pagination.setAttribute('data-show', newVal);
+          paginateRows(this);
+        }
+        break;
+      }
+      case 'data-page': {
+        if (oldVal != newVal) {
+          pagination.setAttribute('data-page', newVal);
+          paginateRows(this);
+        }
+        break;
+      }
+    }
+  }
+    */
+}
+
+export default iamTableNoSubmit;

package/assets/ts/components/table-submit/table-submit.component.ts

@@ -0,0 +1,64 @@
+import { setupBasicTable, findForm, setupAdvancedTable, setupSubmitTable, paginateTable } from '../../modules/table';
+
+class iamTableSubmit extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+
+    const loadCSS = `@import "${assetLocation}/css/components/table.component.css";`;
+    const loadExtraCSS = `@import "${assetLocation}/css/components/table.global.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${loadCSS}
+
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <div class="table__container">
+      <slot name="before"></slot>
+      <div class="table--cta">
+        <div class="table__wrapper">
+          <slot></slot>
+        </div>
+      </div>
+      <iam-pagination part="pagination" class="pagination--table" ></iam-pagination>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+    // insert extra CSS
+    if (!document.getElementById('tableSingleExtras') && !document.getElementById('tableExtras')) {
+      document.head.insertAdjacentHTML('beforeend', `<style id="tableSingleExtras">${loadExtraCSS}</style>`);
+    }
+  }
+
+  connectedCallback(): void {
+    const params = new URLSearchParams(window.location.search);
+
+    const pagination = this.shadowRoot.querySelector('iam-pagination');
+    const table = this.querySelector('table');
+    const form = findForm(this, table);
+
+    if (params.has('page')) this.setAttribute('data-page', params.get('page'));
+    if (params.has('show')) this.setAttribute('data-show', params.get('show'));
+
+    if (params.has('page')) pagination.setAttribute('data-page', params.get('page'));
+    if (params.has('show')) pagination.setAttribute('data-show', params.get('show'));
+
+    setupBasicTable(this, table, form, pagination);
+
+    setupAdvancedTable(this, table, form, pagination);
+
+    setupSubmitTable(this, table, form, pagination);
+
+    paginateTable(this, table, form, pagination, () => {
+      form.submit();
+    });
+  }
+}
+
+export default iamTableSubmit;

package/assets/ts/components/tabs/tabs.component.ts

@@ -34,6 +34,8 @@ class iamTabs extends HTMLElement {
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
     <div class="tabs" part="tabs">
+      <div class="tabs__dropdown" part="tab-dropdown"></div>
+
       <div class="tabs__links__wrapper" part="wrapper">
         <div class="tabs__links" part="tab-links"></div>
       </div>

package/assets/ts/modules/helpers.ts

@@ -177,3 +177,9 @@ export const getSwipeDirection = (touchstartX, touchstartY, touchendX, touchendY
     return 'tap';
   }
 };
+
+export const uniqueID = (index = 1): number => {
+  const ID = Math.floor(Math.random() * Date.now() * (index + 1));
+
+  return ID;
+};