@iamproperty/components 7.7.1--beta6 → 7.7.1--beta8

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

@@ -1,130 +1,130 @@
-import {
-  setupBasicTable,
-  findForm,
-  setupAdvancedTable,
-  setupNoSubmitTable,
-  paginateRows,
-  paginateTable,
-  updateAttributes
-} from '../../modules/table';
-import iamMenu from '../menu/menu.component';
-
-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);
-
-    const assetLocation = document.body.hasAttribute('data-assets-location')
-      ? document.body.getAttribute('data-assets-location')
-      : '/assets';
-
-    if (!window.customElements.get(`iam-menu`)) window.customElements.define(`iam-menu`, iamMenu);
-
-    setupBasicTable(this, table, form, pagination);
-    setupAdvancedTable(this, table);
-    setupNoSubmitTable(this, table, form, pagination, savedTableBody);
-
-
-    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);
-    });
-
-
-    // For when the table contents is updated with an ajax call
-    this.addEventListener('update-table', (event) => {
-      
-      setupBasicTable(this, table, form, pagination);
-      setupAdvancedTable(this, table);
-      setupNoSubmitTable(this, table, form, pagination, savedTableBody);
-    });
-
-  }
-  /*
-  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;
+import {
+  setupBasicTable,
+  findForm,
+  setupAdvancedTable,
+  setupNoSubmitTable,
+  paginateRows,
+  paginateTable,
+  updateAttributes
+} from '../../modules/table';
+import iamMenu from '../menu/menu.component';
+
+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);
+
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+
+    if (!window.customElements.get(`iam-menu`)) window.customElements.define(`iam-menu`, iamMenu);
+
+    setupBasicTable(this, table, form, pagination);
+    setupAdvancedTable(this, table);
+    setupNoSubmitTable(this, table, form, pagination, savedTableBody);
+
+
+    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);
+    });
+
+
+    // For when the table contents is updated with an ajax call
+    this.addEventListener('update-table', (event) => {
+      
+      setupBasicTable(this, table, form, pagination);
+      setupAdvancedTable(this, table);
+      setupNoSubmitTable(this, table, form, pagination, savedTableBody);
+    });
+
+  }
+  /*
+  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

@@ -1,71 +1,71 @@
-import { setupBasicTable, findForm, setupAdvancedTable, setupSubmitTable, paginateTable } from '../../modules/table';
-import iamMenu from '../menu/menu.component';
-
-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'));
-
-    const assetLocation = document.body.hasAttribute('data-assets-location')
-      ? document.body.getAttribute('data-assets-location')
-      : '/assets';
-
-    if (!window.customElements.get(`iam-menu`)) window.customElements.define(`iam-menu`, iamMenu);
-
-    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;
+import { setupBasicTable, findForm, setupAdvancedTable, setupSubmitTable, paginateTable } from '../../modules/table';
+import iamMenu from '../menu/menu.component';
+
+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'));
+
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+
+    if (!window.customElements.get(`iam-menu`)) window.customElements.define(`iam-menu`, iamMenu);
+
+    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

@@ -1,70 +1,70 @@
-import tabs from '../../modules/tabs';
-
-// Data layer Web component created
-window.dataLayer = window.dataLayer || [];
-window.dataLayer.push({
-  event: 'customElementRegistered',
-  element: 'tabs',
-});
-
-class iamTabs 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/tabs.component.css";`;
-
-    const template = document.createElement('template');
-    template.innerHTML = `
-    <style>
-    
-    ${loadCSS}
-    
-    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
-    </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.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>
-      <slot></slot>
-      <button part="next-button" class="btn btn-secondary btn-sm btn-compact fa-regular fa-chevron-right tabs__next">Next</button>
-    </div>
-    `;
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
-  }
-
-  connectedCallback(): void {
-    const classList = this.classList.toString().replace('container', '');
-    this.shadowRoot.querySelector('.tabs').setAttribute('class', `tabs ${classList}`);
-
-    tabs(this);
-
-    // #region Allow togle tags to control the tabs
-    Array.from(this.querySelectorAll('details[id]')).forEach((details) => {
-      const detailsID = details.getAttribute('id');
-
-      Array.from(document.querySelectorAll(`[command="show-tab"][commandfor="${detailsID}"]`)).forEach((radioField) => {
-
-        radioField.closest('label').addEventListener('click', (e) => {
-        
-          details.setAttribute('open','open');
-
-          Array.from(document.querySelectorAll(`input[type="radio"][command="show-tab"][commandfor="${detailsID}"]`)).forEach((input) => {
-
-            input.checked = true;
-          });
-        });
-      });
-    });
-    // #endregion
-  }
-}
-
-export default iamTabs;
+import tabs from '../../modules/tabs';
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  event: 'customElementRegistered',
+  element: 'tabs',
+});
+
+class iamTabs 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/tabs.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    
+    ${loadCSS}
+    
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.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>
+      <slot></slot>
+      <button part="next-button" class="btn btn-secondary btn-sm btn-compact fa-regular fa-chevron-right tabs__next">Next</button>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    const classList = this.classList.toString().replace('container', '');
+    this.shadowRoot.querySelector('.tabs').setAttribute('class', `tabs ${classList}`);
+
+    tabs(this);
+
+    // #region Allow togle tags to control the tabs
+    Array.from(this.querySelectorAll('details[id]')).forEach((details) => {
+      const detailsID = details.getAttribute('id');
+
+      Array.from(document.querySelectorAll(`[command="show-tab"][commandfor="${detailsID}"]`)).forEach((radioField) => {
+
+        radioField.closest('label').addEventListener('click', (e) => {
+        
+          details.setAttribute('open','open');
+
+          Array.from(document.querySelectorAll(`input[type="radio"][command="show-tab"][commandfor="${detailsID}"]`)).forEach((input) => {
+
+            input.checked = true;
+          });
+        });
+      });
+    });
+    // #endregion
+  }
+}
+
+export default iamTabs;