@iamproperty/components 7.1.0--beta6 → 7.2.0

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { trackComponent, trackComponentRegistered } from '../_global';
 import { cardHTML, setupCard } from '../../modules/card.module';
 
@@ -28,12 +27,10 @@ class iamCard 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');
     const cardBody = cardComponent.shadowRoot.querySelector('.card__body');
-    const cardMenu = cardComponent.shadowRoot.querySelector('.dialog__wrapper');
-    const btn = cardComponent.shadowRoot.querySelector('.dialog__wrapper button');
 
     setupCard(cardComponent);
 
@@ -63,7 +60,7 @@ class iamCard extends HTMLElement {
     }
 
     // Make sure slotted buttons and links have correct button classes
-    Array.from(cardComponent.querySelectorAll('[slot="btns"]')).forEach((button, index) => {
+    Array.from(cardComponent.querySelectorAll('[slot="btns"]')).forEach((button) => {
       button.classList.add('btn');
       button.classList.add('btn-action');
     });
@@ -72,11 +69,11 @@ class iamCard extends HTMLElement {
     if (cardComponent.querySelector('[slot="checkbox"],[slot="secondary"]')) {
       const element = cardComponent.querySelector('[slot="checkbox"],[slot="secondary"]');
 
-      element.addEventListener('mouseenter', (event) => {
+      element.addEventListener('mouseenter', () => {
         cardComponent.classList.add('prevent-hover');
       });
 
-      element.addEventListener('mouseleave', (event) => {
+      element.addEventListener('mouseleave', () => {
         cardComponent.classList.remove('prevent-hover');
       });
     }
@@ -84,11 +81,11 @@ class iamCard extends HTMLElement {
     if (cardComponent.shadowRoot.querySelector('.dialog__wrapper')) {
       const element = cardComponent.shadowRoot.querySelector('.dialog__wrapper');
 
-      element.addEventListener('mouseenter', (event) => {
+      element.addEventListener('mouseenter', () => {
         cardComponent.classList.add('prevent-hover');
       });
 
-      element.addEventListener('mouseleave', (event) => {
+      element.addEventListener('mouseleave', () => {
         cardComponent.classList.remove('prevent-hover');
       });
     }
@@ -96,7 +93,7 @@ class iamCard extends HTMLElement {
     // Dispatch events of selecting checkboxes
     const checkbox = cardComponent.querySelector('input[type="checkbox"]');
     if (checkbox) {
-      checkbox.addEventListener('change', (event) => {
+      checkbox.addEventListener('change', () => {
         if (checkbox.checked) {
           const customEvent = new CustomEvent('select-card', {
             detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') },
@@ -114,7 +111,7 @@ class iamCard extends HTMLElement {
     // Dispatch events of click onto secondary buttons
     const secondaryBtn = cardComponent.querySelector('[slot="secondary"]');
     if (secondaryBtn) {
-      secondaryBtn.addEventListener('click', (event) => {
+      secondaryBtn.addEventListener('click', () => {
         const customEvent = new CustomEvent('secondary-button-clicked', {
           detail: { Title: secondaryBtn.getAttribute('title') },
         });
@@ -124,8 +121,8 @@ class iamCard extends HTMLElement {
 
     // Dispatch events of click onto action buttons
     const actionBtns = cardComponent.querySelectorAll('[slot="btns"]');
-    Array.from(actionBtns).forEach((button, index) => {
-      button.addEventListener('click', (event) => {
+    Array.from(actionBtns).forEach((button) => {
+      button.addEventListener('click', () => {
         const customEvent = new CustomEvent('action-button-clicked', {
           detail: { Title: button.getAttribute('title') },
         });
@@ -141,11 +138,11 @@ class iamCard 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-total': {
         if (this.shadowRoot.querySelector('.card__total'))

package/assets/ts/components/carousel/carousel.component.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { generateThumbnailList, generatePipsHTML, carousel } from '../../modules/carousel';
 import { trackComponent, trackComponentRegistered } from '../_global';
 
@@ -48,10 +47,11 @@ class iamCarousel extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const carouselComponent = this;
-    const carouselElement = this.shadowRoot.querySelector('.carousel');
-    const row = this.shadowRoot.querySelector('.row');
+    //const carouselElement = this.shadowRoot.querySelector('.carousel');
+    //const row = this.shadowRoot.querySelector('.row');
 
     let thumbnailImages = [];
 
@@ -69,7 +69,7 @@ class iamCarousel extends HTMLElement {
       carouselComponent.querySelectorAll(
         ':scope > div > img:first-child:last-child, :scope > div > picture:first-child:last-child img'
       )
-    ).forEach((image, index) => {
+    ).forEach((image) => {
       image.style.inset = '0 0.5rem 0 0.5rem';
       image.style.position = 'absolute';
       image.style.width = 'calc(100% - 1rem)';
@@ -88,8 +88,6 @@ class iamCarousel extends HTMLElement {
       'slider-changed',
     ]);
   }
-
-  attributeChangedCallback(attrName, oldVal, newVal) {}
 }
 
 export default iamCarousel;

package/assets/ts/components/chart/chart.component.ts

@@ -1,5 +1,4 @@
-// @ts-nocheck
-import { setupChart, setEventObservers, setEventHandlers } from '../../modules/chart';
+import { setupChart, setEventObservers } from '../../modules/chart';
 
 class iamChart extends HTMLElement {
   constructor() {
@@ -10,9 +9,6 @@ class iamChart extends HTMLElement {
       ? document.body.getAttribute('data-assets-location')
       : '/assets';
     const loadCSS = `@import "${assetLocation}/css/components/charts.css";`;
-    const chartID = `chart-${Date.now() + (Math.floor(Math.random() * 100) + 1)}`;
-    const chartType = this.hasAttribute('data-type') ? this.getAttribute('data-type') : 'column';
-    const availableTypes = this.hasAttribute('data-types') ? this.getAttribute('data-types').split(',') : [];
 
     const template = document.createElement('template');
     template.innerHTML = `
@@ -40,7 +36,8 @@ class iamChart extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const element = this;
     const orginalTable = this.querySelector('table');
     const newTable = orginalTable.cloneNode(true);
@@ -59,7 +56,7 @@ class iamChart extends HTMLElement {
       threshold: 0.1,
     };
 
-    const callback = (entries: any) => {
+    const callback = (entries: any): void => {
       entries.forEach((entry: any) => {
         if (entry.intersectionRatio > 0) {
           chartOuter.classList.add('animating');
@@ -79,8 +76,6 @@ class iamChart extends HTMLElement {
     const intObserver = new IntersectionObserver(callback, options);
     intObserver.observe(element);
   }
-
-  attributeChangedCallback(attrName, oldVal, newVal) {}
 }
 
 export default iamChart;

package/assets/ts/components/collapsible-side/collapsible-side.component.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
@@ -45,7 +44,7 @@ class iamCollapsibleSideMenu extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
     const sideMenu = this.shadowRoot.querySelector('.side-menu');
     const sideMenuContent = this.shadowRoot.querySelector('.side-menu-content');
     const mainContent = this.shadowRoot.querySelector('.main-content');
@@ -74,7 +73,7 @@ class iamCollapsibleSideMenu extends HTMLElement {
     }
 
     // Open the menu
-    button.addEventListener('click', (event) => {
+    button.addEventListener('click', () => {
       if (!sideMenu.classList.contains('open')) {
         sideMenuContent.classList.remove('closed');
 
@@ -99,7 +98,7 @@ class iamCollapsibleSideMenu extends HTMLElement {
     });
 
     // Mimic hover event on desktop so that we can control when classes are set and which order
-    sideMenu.addEventListener('mouseenter', (event) => {
+    sideMenu.addEventListener('mouseenter', () => {
       if (window.innerWidth > 992) {
         if (!sideMenu.classList.contains('open')) sideMenuContent.classList.remove('closed');
 
@@ -107,13 +106,13 @@ class iamCollapsibleSideMenu extends HTMLElement {
       }
     });
 
-    sideMenu.addEventListener('mousemove', (event) => {
+    sideMenu.addEventListener('mousemove', () => {
       if (window.innerWidth > 992) {
         if (!sideMenu.classList.contains('open')) sideMenuContent.classList.remove('closed');
       }
     });
 
-    sideMenu.addEventListener('mouseleave', (event) => {
+    sideMenu.addEventListener('mouseleave', () => {
       if (window.innerWidth > 992) {
         sideMenu.classList.remove('hover');
 

package/assets/ts/components/doughnutchart/doughnutchart.component.ts

@@ -0,0 +1,85 @@
+import { addClasses, setupChart, setEventListener, setEventObservers } from '../../modules/chart.module';
+import { trackComponent, trackComponentRegistered } from '../_global';
+
+trackComponentRegistered('iam-doughnutchart');
+
+class iamDoughnutChart 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/doughnutchart.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    
+    ${loadCSS}
+    </style>
+    <div class="chart__outer" part="outer">
+      <div class="chart__key" part="chart-key"></div>
+      <div class="chart__wrapper" part="wrapper">
+        <div class="chart__yaxis" part="yaxis"></div>
+        <div class="chart" part="chart">
+          <div class="chart__guidelines" part="guidelines"></div>
+        </div>
+      </div>
+      <div class="chart__spacer"><span part="spacer"></span</div>
+    </div>`;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const chartComponent = this;
+    //const chartID = `chart-${Date.now() + (Math.floor(Math.random() * 100) + 1)}`;
+    const orginalTable = this.querySelector('table');
+    const clonedTable = orginalTable.cloneNode(true);
+    const chart = this.shadowRoot.querySelector('.chart');
+    const chartOuter = this.shadowRoot.querySelector('.chart__outer');
+    //const barCount = chart.querySelectorAll('td:not(:first-child)').length;
+
+    chart.appendChild(clonedTable);
+    addClasses(chartComponent, chartOuter);
+
+    setupChart(chartComponent, chartOuter, clonedTable);
+    setEventObservers(chartComponent, chartOuter);
+    setEventListener(chartComponent, chartOuter);
+
+    // Set events on the paths
+    chart.addEventListener('mousemove', (event: any) => {
+      if (event && event.target.closest('.doughnut')) {
+        const column = event.target.closest('.doughnut');
+        const rect = column.getBoundingClientRect();
+
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        chart.setAttribute('style', `--cursor-x: ${x}px; --cursor-y: ${y}px;`);
+      }
+    });
+
+    chart?.querySelectorAll('.doughnut').forEach((doughnut) => {
+      let count = 1;
+
+      doughnut?.querySelectorAll('path').forEach((path) => {
+        const rect = path.getBoundingClientRect();
+        const doughnutRect = doughnut.getBoundingClientRect();
+        const x = rect.left - doughnutRect.left + rect.width / 2;
+        const y = rect.top - doughnutRect.top + rect.height / 2;
+
+        doughnut.style.setProperty(`--middle-${count}-x`, `${x}px`);
+        doughnut.style.setProperty(`--middle-${count}-y`, `${y}px`);
+        count++;
+      });
+    });
+
+    trackComponent(chartComponent, 'iam-doughnutchart', ['view-change']);
+  }
+}
+
+export default iamDoughnutChart;

package/assets/ts/components/fileupload/fileupload.component.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import fileupload from '../../modules/fileupload';
 
 // Data layer Web component created
@@ -36,14 +35,14 @@ class iamFileupload extends HTMLElement {
       <hr/>
       <slot></slot>
       <div class="files" part="files"><slot name="files"></slot></div>
-      <span class="invalid-feedback ext">Some files did not match the accpeted extension type.</span>
-      <span class="invalid-feedback size">Some files Were too large to upload.</span>
+      <span class="invalid-feedback ext">Some files did not match the accepted extension type.</span>
+      <span class="invalid-feedback size">Some files were too large to upload.</span>
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
     this.innerHTML += '<i class="fa-regular fa-arrow-up-from-bracket me-2" aria-hidden="true" slot="btn"></i>';
 
     const wrapper = this.shadowRoot.querySelector('.file-upload');
@@ -56,11 +55,11 @@ class iamFileupload extends HTMLElement {
     fileupload(this, wrapper);
   }
 
-  static get observedAttributes() {
+  static get observedAttributes(): any {
     return ['data-filename'];
   }
 
-  attributeChangedCallback(attrName, oldVal, newVal) {
+  attributeChangedCallback(attrName, oldVal, newVal): void {
     switch (attrName) {
       case 'data-filename': {
         if (oldVal != newVal) {

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { trackComponent, trackComponentRegistered } from '../_global';
 import { cardHTML, setupCard } from '../../modules/card.module';
 
@@ -27,16 +26,16 @@ class iamFilerCard 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');
 
     setupCard(cardComponent);
 
     // Dispatch events of selecting checkboxes
     const checkbox = cardComponent.parentElement.querySelector('input[type="checkbox"]');
     if (checkbox) {
-      checkbox.addEventListener('change', (event) => {
+      checkbox.addEventListener('change', () => {
         if (checkbox.checked) {
           const customEvent = new CustomEvent('select-card', {
             detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') },
@@ -56,7 +55,7 @@ class iamFilerCard extends HTMLElement {
     if (cardComponent.parentElement.matches('button')) {
       const button = cardComponent.parentElement;
 
-      button.addEventListener('click', (event) => {
+      button.addEventListener('click', () => {
         if (!cardComponent.classList.contains('active')) {
           const customEvent = new CustomEvent('select-card', {
             detail: { 'button name': button.getAttribute('name') },

package/assets/ts/components/filterlist/filterlist.component.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import filterlist from '../../modules/filterlist';
 
 // Data layer Web component created
@@ -52,7 +51,7 @@ class iamFilterlist extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
     const classList = this.classList.toString();
     this.shadowRoot.querySelector('.list__wrapper').setAttribute('class', `list__wrapper ${classList}`);
 

package/assets/ts/components/header/header.component.ts

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
@@ -39,7 +37,7 @@ class iamHeader extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
     this.classList.add('bg-primary');
 
     const picture = this.shadowRoot.querySelector('picture');

package/assets/ts/components/inline-edit/inline-edit.component.ts

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
@@ -42,12 +40,11 @@ class iamInlineEdit extends HTMLElement {
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const inlineEdit = this;
     const saveButton = this.shadowRoot.querySelector('#save');
     const cancelButton = this.shadowRoot.querySelector('#cancel');
-
-    const label = this.querySelector('label');
     const input = this.querySelector('input, textarea, select');
     const preview = this.querySelector('.preview');
 
@@ -59,7 +56,7 @@ class iamInlineEdit extends HTMLElement {
     let originalValue = input.value;
 
     // cancel
-    cancelButton.addEventListener('click', (event) => {
+    cancelButton.addEventListener('click', () => {
       input.value = originalValue;
 
       input.blur();
@@ -75,7 +72,7 @@ class iamInlineEdit extends HTMLElement {
     });
 
     // Save
-    saveButton.addEventListener('click', (event) => {
+    saveButton.addEventListener('click', () => {
       if (inlineEdit.querySelector(':invalid')) {
         inlineEdit.classList.add('was-validated');
 
@@ -123,7 +120,7 @@ class iamInlineEdit extends HTMLElement {
     }
 
     // Saved
-    inlineEdit.addEventListener('inline-edit-saved', (event) => {
+    inlineEdit.addEventListener('inline-edit-saved', () => {
       setTimeout(() => {
         statusSaving.classList.add('d-none');
         statusSaved.classList.remove('d-none');
@@ -147,7 +144,7 @@ class iamInlineEdit extends HTMLElement {
 
     // enter key saves
     if (input.tagName === 'SELECT') {
-      input.addEventListener('change', (event) => {
+      input.addEventListener('change', () => {
         originalValue = input.value;
 
         const saveEvent = new CustomEvent('inline-edit-save', {
@@ -163,13 +160,13 @@ class iamInlineEdit extends HTMLElement {
     }
 
     if (input.tagName != 'SELECT') {
-      input.addEventListener('focus', (event) => {
+      input.addEventListener('focus', () => {
         input.select();
       });
     }
 
     //blur it should autosave
-    input.addEventListener('blur', (event) => {
+    input.addEventListener('blur', () => {
       if (input.value != originalValue) {
         if (inlineEdit.hasAttribute('data-autosave')) {
           originalValue = input.value;

package/assets/ts/components/marketing/marketing.component.ts

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
@@ -36,7 +34,7 @@ class iamMarketing extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
     this.classList.add('invert-colours');
 
     if (this.hasAttribute('data-img')) {