@iamproperty/components 7.1.0--beta7 → 7.2.1--beta1

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import tabs from '../../modules/tabs';
 
 // Data layer Web component created
@@ -19,7 +18,7 @@ class iamTabs extends HTMLElement {
     const coreCSS = document.body.hasAttribute('data-core-css')
       ? document.body.getAttribute('data-core-css')
       : `${assetLocation}/css/core.min.css`;
-    const loadCSS = `@import "${assetLocation}/css/components/tabs.css";`;
+    const loadCSS = `@import "${assetLocation}/css/components/tabs.component.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
@@ -35,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>
@@ -45,7 +46,7 @@ class iamTabs extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
     const classList = this.classList.toString().replace('container', '');
     this.shadowRoot.querySelector('.tabs').setAttribute('class', `tabs ${classList}`);
 

package/assets/ts/components/video-card/video-card.component.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { trackComponent, trackComponentRegistered } from '../_global';
 import { cardHTML, setupCard } from '../../modules/card.module';
 
@@ -30,7 +29,8 @@ class iamVideoCard extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  async connectedCallback() {
+  async connectedCallback(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const cardComponent = this;
     const cardHead = cardComponent.shadowRoot.querySelector('.card__head');
 
@@ -72,6 +72,7 @@ class iamVideoCard extends HTMLElement {
     if (cardComponent.hasAttribute('data-youtube')) {
       // Load the scripts only once
       if (!document.body.classList.contains('youtubeLoaded')) {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const loaded = await this.loadYouTubeScripts();
       }
       cardHead.addEventListener('click', function () {
@@ -84,7 +85,7 @@ class iamVideoCard extends HTMLElement {
         dialog.showModal();
       });
 
-      dialog.addEventListener('close', (event) => {
+      dialog.addEventListener('close', () => {
         if (
           window.player[embed.getAttribute('id')] &&
           typeof window.player[embed.getAttribute('id')].pauseVideo == 'function'
@@ -114,7 +115,7 @@ class iamVideoCard extends HTMLElement {
         dialog.showModal();
       });
 
-      dialog.addEventListener('close', (event) => {
+      dialog.addEventListener('close', () => {
         embed.innerHTML = ``; // Remove the video since we cant pause it
 
         const customEvent = new CustomEvent('close-video', {
@@ -127,10 +128,10 @@ class iamVideoCard extends HTMLElement {
     trackComponent(cardComponent, 'iam-video-card', ['play-video', 'close-video']);
   }
 
-  loadYouTubeScripts() {
+  loadYouTubeScripts(): any {
     return new Promise((resolve, reject) => {
       const image = new Image();
-      image.onload = function () {
+      image.onload = function (): any {
         // This code loads the IFrame Player API code asynchronously.
         const tag = document.createElement('script');
         tag.src = 'https://www.youtube.com/iframe_api';
@@ -139,14 +140,14 @@ class iamVideoCard extends HTMLElement {
         document.body.classList.add('youtubeLoaded');
         resolve(true);
       };
-      image.onerror = function () {
+      image.onerror = function (): any {
         reject(false);
       };
       image.src = 'https://youtube.com/favicon.ico';
     });
   }
 
-  createYoutTubeVideo(target) {
+  createYoutTubeVideo(target): void | boolean {
     if (typeof window.player == 'undefined') {
       window.player = [];
     }
@@ -184,7 +185,7 @@ class iamVideoCard extends HTMLElement {
     //onYouTubeIframeAPIReady();
 
     // The API will call this function when the video player is ready.
-    function onPlayerReady(event) {
+    function onPlayerReady(event): void {
       // Play the video straight away
       event.target.playVideo();
     }
@@ -192,7 +193,7 @@ class iamVideoCard extends HTMLElement {
     // The API calls this function when the player's state changes.
     // The function indicates that when playing a video (state=1)
     let done = false;
-    function onPlayerStateChange(event) {
+    function onPlayerStateChange(event): void {
       if (event.data == YT.PlayerState.PLAYING && !done) {
         const link = document.getElementById(link_id);
         link.classList.add('player-ready');
@@ -202,11 +203,11 @@ class iamVideoCard extends HTMLElement {
     }
   }
 
-  static get observedAttributes() {
+  static get observedAttributes(): any {
     return ['data-image'];
   }
 
-  attributeChangedCallback(attrName, oldVal, newVal) {
+  attributeChangedCallback(attrName, oldVal, newVal): void {
     switch (attrName) {
       case 'data-image': {
         if (oldVal != newVal) {

package/assets/ts/modules/applied-filters.ts

@@ -1,6 +1,5 @@
-// @ts-nocheck
-function createAppliedFilters(container, filters) {
-  function addFilterButton(filters, input, notSet = true) {
+function createAppliedFilters(container, filters): void {
+  function addFilterButton(filters, input, notSet = true): void | boolean {
     let shouldRemoveFilter = false;
     let inputName = input.getAttribute('name');
 
@@ -95,7 +94,7 @@ function createAppliedFilters(container, filters) {
   // check for inputs on load
   Array.from(
     container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')
-  ).forEach((input, index) => {
+  ).forEach((input) => {
     addFilterButton(filters, input, false);
   });
 
@@ -106,7 +105,7 @@ function createAppliedFilters(container, filters) {
       if (event[0].attributeName == 'open') {
         Array.from(
           container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')
-        ).forEach((input, index) => {
+        ).forEach((input) => {
           addFilterButton(filters, input, false);
         });
       }
@@ -115,11 +114,11 @@ function createAppliedFilters(container, filters) {
     observer.observe(dialog, { attributes: true });
   }
 
-  container.addEventListener('tags-set', function (event) {
+  container.addEventListener('tags-set', function () {
     filters.innerHTML = '';
     Array.from(
       container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')
-    ).forEach((input, index) => {
+    ).forEach((input) => {
       addFilterButton(filters, input, false);
     });
   });
@@ -127,7 +126,7 @@ function createAppliedFilters(container, filters) {
   // check for change in displayed inputs
   Array.from(
     container.querySelectorAll('input[type="checkbox"]:checked, input:not([type="checkbox"]):not([type="radio"])')
-  ).forEach((input, index) => {
+  ).forEach((input) => {
     input.addEventListener('change', function (event) {
       if (!container.hasAttribute('data-keep-same')) addFilterButton(filters, input);
 
@@ -155,7 +154,7 @@ function createAppliedFilters(container, filters) {
           let selector = `[name="${name}"]`;
 
           if (name.match(/\[(.*)\]/)) {
-            const newName = name.replace(/\[(.*)\]/, `[]`);
+            //const newName = name.replace(/\[(.*)\]/, `[]`);
             const value = name.replace(/.*\[(.*)\]/, `$1`);
             selector = `[value="${value}"]`;
           }
@@ -168,12 +167,12 @@ function createAppliedFilters(container, filters) {
             if (input.getAttribute('type') != 'radio' && input.getAttribute('type') != 'checkbox') {
               input.value = '';
 
-              var event = new Event('force');
+              const event = new Event('force');
               if (!container.hasAttribute('data-nosubmit')) input.closest('form').dispatchEvent(event);
             } else {
               input.checked = false;
 
-              var event = new Event('force');
+              const event = new Event('force');
               if (!container.hasAttribute('data-nosubmit')) input.closest('form').dispatchEvent(event);
             }
           }

package/assets/ts/modules/card.module.ts

@@ -14,7 +14,7 @@ export const cardHTML = `<div class="card__head" part="head">
   <slot name="footer"></slot>
 </div>`;
 
-export const setupCard = (cardComponent: any) => {
+export const setupCard = (cardComponent: any): void => {
   cardComponent.classList.add('card');
   const cardHead = cardComponent.shadowRoot.querySelector('.card__head');
   const cardBody = cardComponent.shadowRoot.querySelector('.card__body');

package/assets/ts/modules/carousel.ts

@@ -1,6 +1,4 @@
-// @ts-nocheck
-
-export const generateThumbnailList = function (carouselComponent) {
+export const generateThumbnailList = function (carouselComponent): any {
   const thumbnailImages = [];
 
   Array.from(carouselComponent.querySelectorAll(':scope > div')).forEach((slide, index) => {
@@ -12,7 +10,7 @@ export const generateThumbnailList = function (carouselComponent) {
   return thumbnailImages;
 };
 
-export const generatePipsHTML = function (carouselComponent, thumbnailImages) {
+export const generatePipsHTML = function (carouselComponent, thumbnailImages): string {
   const itemCount = carouselComponent.querySelectorAll(':scope > div').length;
 
   let pips = '';
@@ -33,7 +31,7 @@ export const generatePipsHTML = function (carouselComponent, thumbnailImages) {
   return pips;
 };
 
-const getProgressMax = function (itemCount, visibleItems) {
+export const getProgressMax = function (itemCount, visibleItems): number {
   if (visibleItems == 1) {
     return itemCount;
   }
@@ -43,11 +41,11 @@ const getProgressMax = function (itemCount, visibleItems) {
   return max + 1;
 };
 
-const getProgressPercent = function (value, max) {
+const getProgressPercent = function (value, max): number {
   return ((value - 1) / (max - 1)) * 100;
 };
 
-export const carousel = function (carouselComponent) {
+export const carousel = function (carouselComponent): void {
   let scrollTimeout;
 
   const carouselElement = carouselComponent.shadowRoot.querySelector('.carousel');
@@ -84,7 +82,7 @@ export const carousel = function (carouselComponent) {
   // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
   carouselInner.addEventListener(
     'scroll',
-    function (e) {
+    function () {
       clearTimeout(scrollTimeout);
       scrollTimeout = setTimeout(function () {
         const scrollArea = carouselInner.clientWidth;
@@ -109,7 +107,7 @@ export const carousel = function (carouselComponent) {
           targetSlide = Math.floor(itemCount / visibleItems) * visibleItems + 1;
         }
 
-        Array.from(carouselElement.querySelectorAll('.carousel__controls button')).forEach((button, index) => {
+        Array.from(carouselElement.querySelectorAll('.carousel__controls button')).forEach((button) => {
           button.removeAttribute('aria-current');
         });
 
@@ -145,7 +143,7 @@ export const carousel = function (carouselComponent) {
         if (typeof target.matches == 'function' && target.matches('button')) {
           e.preventDefault();
 
-          Array.from(carouselControls.querySelectorAll('button')).forEach((button, index) => {
+          Array.from(carouselControls.querySelectorAll('button')).forEach((button) => {
             button.removeAttribute('aria-current');
           });
           target.setAttribute('aria-current', true);
@@ -177,7 +175,7 @@ export const carousel = function (carouselComponent) {
     'click',
     function (e) {
       const scrollArea = carouselInner.clientWidth;
-      const scrollWidth = carouselInner.scrollWidth;
+      //const scrollWidth = carouselInner.scrollWidth;
       const itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
 
       const visibleItems = Math.round(scrollArea / itemWidth);
@@ -227,7 +225,7 @@ export const carousel = function (carouselComponent) {
     false
   );
 
-  carouselProgress.addEventListener(stepperStart, function (event) {
+  carouselProgress.addEventListener(stepperStart, function () {
     clearInterval(stepperInterval);
     stepperInterval = setInterval(function () {
       scrollArea = carouselInner.clientWidth;
@@ -242,13 +240,13 @@ export const carousel = function (carouselComponent) {
     }, 10);
   });
 
-  carouselProgress.addEventListener(stepperEvent, function (event) {
+  carouselProgress.addEventListener(stepperEvent, function () {
     clearInterval(stepperInterval);
   });
 
   carouselProgress.addEventListener(
     'change',
-    function (e) {
+    function () {
       clearInterval(stepperInterval);
       const target = carouselComponent.querySelector(`:scope > *:nth-child(${carouselProgress.value})`);
 
@@ -258,7 +256,7 @@ export const carousel = function (carouselComponent) {
         behavior: 'smooth',
       });
 
-      const direction = target.matches('.btn-next') ? 'next' : 'prev';
+      //const direction = target.matches('.btn-next') ? 'next' : 'prev';
 
       const customEvent = new CustomEvent(`slider-changed`, {
         detail: {