@iamproperty/components 7.1.0--beta7 → 7.2.0

package/assets/ts/components/search/search.component.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import Cookies from 'js-cookie';
 import { safeID, resolvePath, isTraversable } from '../../modules/helpers';
 
@@ -33,6 +32,9 @@ class iamSearch extends HTMLElement {
     }
     .optional-text {
       display: none;
+    } 
+    .js-hide {
+      display: none !important;
     }
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
@@ -41,7 +43,8 @@ class iamSearch extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  async connectedCallback() {
+  async connectedCallback(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const searchWrapper = this;
     const inputField = this.querySelector('input');
     const valueSchema = this.hasAttribute('data-value-schema') ? this.getAttribute('data-value-schema') : 'value';
@@ -49,6 +52,7 @@ class iamSearch extends HTMLElement {
     const loopSchema = this.hasAttribute('data-schema') ? this.getAttribute('data-schema') : '';
     let datalist = this.querySelector('datalist');
     const searched = [];
+    let ajaxURL = this.getAttribute('data-url');
 
     // Clone original input field, re-name and use for display purposes
     const displayInputField = inputField.cloneNode();
@@ -73,7 +77,7 @@ class iamSearch extends HTMLElement {
 
     // Search the endpoint when 3 characters has been added
     if (searchWrapper.hasAttribute('data-url')) {
-      displayInputField.addEventListener('input', (event) => {
+      displayInputField.addEventListener('input', () => {
         if (displayInputField.value.length == 3 && !searched.includes(displayInputField.value)) {
           search(displayInputField.value);
           searched.push(displayInputField.value);
@@ -81,7 +85,7 @@ class iamSearch extends HTMLElement {
       });
     }
 
-    function checkMatch() {
+    function checkMatch(): void {
       const match = datalist.querySelector(`option[value="${displayInputField.value}"]`);
       const subMatch = datalist.querySelector(`option[value*="${displayInputField.value}" i]`);
 
@@ -97,12 +101,11 @@ class iamSearch extends HTMLElement {
     }
 
     // on change update oringinal field with the actual value and use displayed input for the nice display text
-    displayInputField.addEventListener('input', (event) => {
+    displayInputField.addEventListener('input', () => {
       checkMatch();
     });
 
-    const search = async (searchterm) => {
-      let ajaxURL = searchWrapper.getAttribute('data-url');
+    const search = async (searchterm): any => {
       ajaxURL += `${encodeURI(searchterm)}`;
 
       // Setup controller vars if not already set
@@ -134,7 +137,7 @@ class iamSearch extends HTMLElement {
             const loopValues = resolvePath(response, loopSchema, '');
 
             if (isTraversable(loopValues) && typeof loopValues.forEach == 'function') {
-              loopValues.forEach((item, index) => {
+              loopValues.forEach((item) => {
                 const actualValue = resolvePath(item, valueSchema, '');
                 const displayValue = resolvePath(item, displaySchema, '').replace('\n', ', ');
 
@@ -146,7 +149,7 @@ class iamSearch extends HTMLElement {
             } else if (typeof loopValues == 'object') {
               for (const [key, value] of Object.entries(loopValues)) {
                 if (isTraversable(value) && typeof value.forEach == 'function') {
-                  value.forEach((item, index) => {
+                  value.forEach((item) => {
                     const actualValue = resolvePath(item, valueSchema, '');
                     const displayValue = resolvePath(item, displaySchema, '').replace('\n', ', ');
 

package/assets/ts/components/slider/slider.component.ts

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
@@ -38,7 +36,8 @@ class iamSlider extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const slider = this;
     const minElement = this.shadowRoot.querySelector('.min');
     const maxElement = this.shadowRoot.querySelector('.max');
@@ -56,7 +55,7 @@ class iamSlider extends HTMLElement {
       stepperStart = 'touchstart';
     }
 
-    const stepperFunction = function (input, eventType) {
+    const stepperFunction = function (input): void {
       const value = input.value;
 
       const min = slider.shadowRoot.querySelector('.is-first').getAttribute('min');
@@ -118,16 +117,16 @@ class iamSlider extends HTMLElement {
     const sliders = this.shadowRoot.querySelectorAll('input');
 
     Array.from(inputs).forEach((input, index) => {
-      input.addEventListener('keyup', function (event) {
+      input.addEventListener('keyup', function () {
         sliders[index].value = input.value;
         stepperFunction(sliders[index]);
       });
-      input.addEventListener('keydown', function (event) {
+      input.addEventListener('keydown', function () {
         sliders[index].value = input.value;
         stepperFunction(sliders[index]);
       });
 
-      input.addEventListener('change', function (event) {
+      input.addEventListener('change', function () {
         sliders[index].value = input.value;
         stepperFunction(sliders[index]);
       });
@@ -136,7 +135,7 @@ class iamSlider extends HTMLElement {
     Array.from(sliders).forEach((input, index) => {
       stepperFunction(input, 'start');
 
-      input.addEventListener(stepperStart, function (event) {
+      input.addEventListener(stepperStart, function () {
         clearInterval(stepperInterval);
         stepperInterval = setInterval(function () {
           stepperFunction(input, 'drag');
@@ -144,11 +143,11 @@ class iamSlider extends HTMLElement {
         }, 10);
       });
 
-      input.addEventListener(stepperEvent, function (event) {
+      input.addEventListener(stepperEvent, function () {
         clearInterval(stepperInterval);
       });
 
-      input.addEventListener('change', function (event) {
+      input.addEventListener('change', function () {
         clearInterval(stepperInterval);
         stepperFunction(input, 'click');
         inputs[index].value = input.value;

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import * as tableModule from '../../modules/table';
 class iamTable extends HTMLElement {
   constructor() {
@@ -10,7 +9,7 @@ class iamTable 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/table.css";`;
+    const loadCSS = `@import "${assetLocation}/css/components/table.component.css";`;
     const loadExtraCSS = `@import "${assetLocation}/css/components/table.global.css";`;
 
     const template = document.createElement('template');
@@ -47,7 +46,7 @@ class iamTable extends HTMLElement {
     }
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
     const params = new URLSearchParams(window.location.search);
 
     // Set default attributes
@@ -139,7 +138,7 @@ class iamTable extends HTMLElement {
     }
 
     // Event listeners
-    tableModule.addTableEventListeners(this.table);
+    tableModule.addTableEventListeners(this.table, this);
     tableModule.addFilterEventListeners(this.table, this.form, this.pagination, this, this.savedTableBody);
     tableModule.addPaginationEventListeners(this.table, this.form, this.pagination, this);
     tableModule.addExportEventListeners(this.shadowRoot.querySelector('[data-export]'), this.table);
@@ -147,7 +146,7 @@ class iamTable extends HTMLElement {
     if (this.form.getAttribute('data-ajax')) {
       tableModule.loadAjaxTable(this.table, this.form, this.pagination, this);
     } else {
-      function uniqueID(index = 1) {
+      function uniqueID(index = 1): number {
         const ID = Math.floor(Math.random() * Date.now() * (index + 1));
 
         return ID;
@@ -163,18 +162,17 @@ class iamTable extends HTMLElement {
           ? this.querySelector('iam-actionbar[data-selectall]')
           : document.querySelector(`iam-actionbar[data-for='${this.getAttribute('id')}']`);
 
-        Array.from(this.table.querySelectorAll('thead tr')).forEach((row, index) => {
+        Array.from(this.table.querySelectorAll('thead tr')).forEach((row) => {
           row.insertAdjacentHTML('afterbegin', `<th class="th--fixed"></th>`);
         });
 
         Array.from(this.table.querySelectorAll('tbody tr')).forEach((row, index) => {
-
-          if(!row.querySelector('.selectrow')){
+          if (!row.querySelector('.selectrow')) {
             const rowID = `row${uniqueID(index)}`;
             row.insertAdjacentHTML(
               'afterbegin',
               `<td class="td--fixed selectrow selected"><input type="checkbox" name="row" id="${rowID}" ${row.hasAttribute('data-selected') ? `checked="true"` : ''}/><label for="${rowID}"><span class="visually-hidden">Select row</span></label></td>`
-            );            
+            );
           }
         });
 
@@ -189,11 +187,11 @@ class iamTable extends HTMLElement {
 
         actionbar.addEventListener('selected', (event) => {
           if (event.detail.selected == '0') {
-            Array.from(this.table.querySelectorAll('.selectrow input[type="checkbox"]')).forEach((input, index) => {
+            Array.from(this.table.querySelectorAll('.selectrow input[type="checkbox"]')).forEach((input) => {
               input.checked = false;
             });
           } else if (event.detail.selected == 'all') {
-            Array.from(this.table.querySelectorAll('.selectrow input[type="checkbox"]')).forEach((input, index) => {
+            Array.from(this.table.querySelectorAll('.selectrow input[type="checkbox"]')).forEach((input) => {
               input.checked = true;
             });
           }
@@ -202,7 +200,7 @@ class iamTable extends HTMLElement {
 
       // Make the dialog menus columns fixed
       let colIndex = -1;
-      Array.from(this.table.querySelectorAll('tbody tr')).forEach((row, index) => {
+      Array.from(this.table.querySelectorAll('tbody tr')).forEach((row) => {
         if (row.querySelector(':scope > td > .dialog__wrapper')) {
           const columnn = row.querySelector(':scope > td > .dialog__wrapper').parentNode;
 
@@ -215,7 +213,7 @@ class iamTable extends HTMLElement {
       if (colIndex != -1) {
         this.table.querySelector(`thead tr th:nth-child(${colIndex + 1})`).classList.add('th--fixed');
 
-        Array.from(this.table.querySelectorAll(`tbody tr td:nth-child(${colIndex + 1})`)).forEach((col, index) => {
+        Array.from(this.table.querySelectorAll(`tbody tr td:nth-child(${colIndex + 1})`)).forEach((col) => {
           col.classList.add('td--fixed');
         });
       }
@@ -227,7 +225,7 @@ class iamTable extends HTMLElement {
       tableModule.populateDataQueries(this.table, this.form);
     }
 
-    this.shadowRoot.querySelector('.table__wrapper').addEventListener('scroll', (event) => {
+    this.shadowRoot.querySelector('.table__wrapper').addEventListener('scroll', () => {
       if (this.table.querySelector('dialog[open]')) {
         this.table.querySelector('dialog[open]').close();
         this.table.querySelector('.dialog__wrapper > button.active').classList.remove('active');
@@ -250,11 +248,11 @@ class iamTable extends HTMLElement {
     });
   }
 
-  static get observedAttributes() {
+  static get observedAttributes(): any {
     return ['data-total', 'data-page', 'data-show'];
   }
 
-  attributeChangedCallback(attrName, oldVal, newVal) {
+  attributeChangedCallback(attrName, oldVal, newVal): void {
     this.pagination = this.shadowRoot.querySelector('iam-pagination');
 
     switch (attrName) {

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 = `
@@ -45,7 +44,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: {