@iamproperty/components 7.1.0--beta7 → 7.2.0

package/assets/ts/components/menu/menu.component.ts

@@ -0,0 +1,222 @@
+class iamMenu 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/menu.component.css";`;
+
+    const template = document.createElement('template');
+
+    template.innerHTML = `
+    <style>
+    ${loadCSS}
+    </style>
+    <div class="menu--inner" part="inner">
+      <slot></slot>
+    </div>`;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    const menuID = this.hasAttribute('id') ? this.getAttribute('id') : false;
+    const menuButton = document.querySelector(`[popovertarget="${menuID}"]`);
+
+    const menuInner = this.shadowRoot.querySelector('.menu--inner');
+    const topLevelmenuItems = this.querySelectorAll(':scope > a, :scope > button, :scope > details > summary');
+    const menuItems = this.querySelectorAll('a, button');
+    const subMenus = this.querySelectorAll('details');
+
+    let subNextIndex;
+    let subPrevIndex;
+
+    // Set the needed CSS styles to connect the ID attribute to the anchor name
+    if (menuID && menuButton) {
+      menuInner?.setAttribute('role', 'menu');
+      this.style['position-anchor'] = `--${menuID}`;
+
+      menuButton?.setAttribute('aria-haspopup', 'true');
+      menuButton?.style['anchor-name'] = `--${menuID}`;
+      menuButton?.setAttribute('aria-controls', menuID);
+
+      subMenus.forEach((item, index) => {
+        item.setAttribute('role', 'menu');
+      });
+
+      menuItems.forEach((item, index) => {
+        item.setAttribute('role', 'menuitem');
+        item.setAttribute('tabindex', '0');
+
+        if (index == 0) {
+          item.setAttribute('autofocus', true);
+        }
+      });
+
+      this.addEventListener('keydown', (event) => {
+        if (event && event.target instanceof HTMLElement && event.target.closest('a, button, summary')) {
+          const activeItem = document.activeElement;
+          const prevIndex = Array.from(topLevelmenuItems).indexOf(activeItem) - 1;
+          const nextIndex = Array.from(topLevelmenuItems).indexOf(activeItem) + 1;
+
+          switch (
+            event.keyCode // change to event.key to key to use the above variable
+          ) {
+            case 27: // Esc
+              if (activeItem.closest('details')) {
+                event.stopPropagation();
+                event.preventDefault();
+                activeItem.closest('details').removeAttribute('open');
+                activeItem.closest('details').querySelector(':scope summary').focus();
+              } else {
+                event.stopPropagation();
+                menuButton.focus();
+              }
+
+              break;
+            case 32: // Space
+            case 13: // Enter
+              if (activeItem.matches('summary') && !activeItem.parentElement.matches('details[open]')) {
+                activeItem.parentElement.setAttribute('open', true);
+                const subMenuItems = activeItem
+                  .closest('details')
+                  .querySelectorAll('a, button, :scope details > summary');
+                Array.from(subMenuItems)[0].focus();
+              }
+
+              break;
+            case 35: // end
+              event.stopPropagation();
+              event.preventDefault();
+
+              this.querySelector('details[open]').removeAttribute('open');
+              Array.from(menuItems)[menuItems.length - 1].focus();
+
+              break;
+            case 36: // home
+              event.stopPropagation();
+              event.preventDefault();
+
+              this.querySelector('details[open]').removeAttribute('open');
+              Array.from(menuItems)[0].focus();
+
+              break;
+            case 38: // up
+              event.stopPropagation();
+              event.preventDefault();
+
+              if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {
+                if (Array.from(topLevelmenuItems)[prevIndex] != undefined)
+                  Array.from(topLevelmenuItems)[prevIndex].focus();
+                else Array.from(topLevelmenuItems)[topLevelmenuItems.length - 1].focus();
+              } else if (activeItem.closest('details')) {
+                const subMenuItems = activeItem
+                  .closest('details')
+                  .querySelectorAll('a, button, :scope details > summary');
+                subPrevIndex = Array.from(subMenuItems).indexOf(activeItem) - 1;
+
+                if (Array.from(subMenuItems)[subPrevIndex] != undefined) Array.from(subMenuItems)[subPrevIndex].focus();
+                else Array.from(subMenuItems)[subMenuItems.length - 1].focus();
+              }
+
+              break;
+            case 40: // down
+              event.stopPropagation();
+              event.preventDefault();
+
+              if (Array.from(topLevelmenuItems).indexOf(activeItem) > -1) {
+                if (Array.from(topLevelmenuItems)[nextIndex] != undefined)
+                  Array.from(topLevelmenuItems)[nextIndex].focus();
+                else Array.from(topLevelmenuItems)[0].focus();
+              } else if (activeItem.closest('details')) {
+                const subMenuItems = activeItem
+                  .closest('details')
+                  .querySelectorAll('a, button, :scope details > summary');
+                subNextIndex = Array.from(subMenuItems).indexOf(activeItem) + 1;
+
+                if (Array.from(subMenuItems)[subNextIndex] != undefined) Array.from(subMenuItems)[subNextIndex].focus();
+                else Array.from(subMenuItems)[0].focus();
+              }
+
+              break;
+          }
+        }
+      });
+    }
+
+    // insert extra CSS to help style inline details and summary items to allow collapsible sub menus
+    if (this.querySelector('details') && !document.getElementById('menuGlobalStyles'))
+      document.head.insertAdjacentHTML(
+        'beforeend',
+        `<style id="menuGlobalStyles">
+iam-menu details > * {
+  background: unset !important;
+  border: unset !important;
+  color: inherit!important;
+  font-weight: inherit!important;
+  font-family: inherit!important;
+  font-size: 1rem!important;
+  display: block!important;
+  margin: var(--menu-item-margin, 0 0 0.25rem 0)!important;
+  padding: var(--menu-item-padding, 0)!important;
+  width: var(--menu-item-width, 100%)!important;
+  text-align: var(--menu-item-text-align, left)!important;
+  cursor: var(--menu-item-cursor, pointer)!important;
+}
+iam-menu details > *:after,
+iam-menu details > *:not(summary):before {
+  display: none!important;
+}
+iam-menu details :is(button,a) {
+  padding-inline-start: var(--menu-dialog-offset,1rem)!important;
+}
+iam-menu details :is(button,a):last-child {
+  margin-block-end: var(--menu-dialog-offset,1rem)!important;
+}
+iam-menu details summary {
+  padding: 0 !important;
+  margin: var(--menu-item-margin, 0 0 0.25rem 0)!important;
+}
+iam-menu details summary:before {
+  text-align: center;
+  display: inline-block!important;
+  vertical-align: bottom;
+  float: right;
+  color: inherit;
+  height: 1em;
+  width: 1em;
+}
+
+iam-menu details summary[class*="fa-"]:before {
+  font-family: var(--fa-font-family, "Font Awesome 6 Pro");
+}
+
+iam-menu details summary:not([class*="fa-"]:before {
+  --icon-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3e%3cpath d='M6.5,2l9,9-9,9' style='fill:none;stroke:%23000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px'/%3e%3c/svg%3e");  
+  
+  content: ""!important;
+  height: 1.2rem;
+  width: 1.2rem;
+  background: var(--colour-primary-theme);
+  mask-image: var(--icon, var(--icon-arrow));
+  mask-size: 50%;
+  mask-repeat: no-repeat;
+  mask-position: 50% 50%;
+  -webkit-mask-image: var(--icon, var(--icon-arrow));
+  -webkit-mask-size: 50%;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 50% 50%;
+  z-index: 2;
+  display: inline-block;
+  vertical-align: bottom;
+  float: right;
+  rotate: 90deg;
+  color: inherit;
+}
+</style>`
+      );
+  }
+}
+
+export default iamMenu;

package/assets/ts/components/multi-step/multi-step.component.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { trackComponent, trackComponentRegistered } from '../_global';
 
 trackComponentRegistered('iam-multi-step');
@@ -26,7 +25,8 @@ class iamMultiStep extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const MultiStepComponent = this;
     const steps = this.shadowRoot.querySelector('.steps');
     const form = this.querySelector('form');
@@ -70,13 +70,13 @@ class iamMultiStep extends HTMLElement {
       const fieldsetID = fieldset.getAttribute('data-title');
 
       if (fieldset.querySelector('.is-invalid')) {
-        Array.from(MultiStepComponent.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element, index) => {
+        Array.from(MultiStepComponent.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element) => {
           element.classList.add('active');
         });
 
         break;
       } else {
-        Array.from(MultiStepComponent.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element, index) => {
+        Array.from(MultiStepComponent.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element) => {
           element.classList.add('valid');
         });
       }
@@ -86,14 +86,14 @@ class iamMultiStep extends HTMLElement {
     MultiStepComponent.addEventListener(
       'invalid',
       (function () {
-        return function (e) {
+        return function (e): any {
           e.preventDefault();
         };
       })(),
       true
     );
 
-    function validateFieldset(button) {
+    function validateFieldset(button): void {
       const currentFieldset = MultiStepComponent.querySelector(`fieldset.active`)
         ? MultiStepComponent.querySelector(`fieldset.active`)
         : MultiStepComponent.querySelector(`fieldset[data-title]`);
@@ -102,32 +102,28 @@ class iamMultiStep extends HTMLElement {
 
       currentFieldset.classList.add('was-validated');
 
-      Array.from(currentFieldset.querySelectorAll('input')).forEach((input, index) => {
+      Array.from(currentFieldset.querySelectorAll('input')).forEach((input) => {
         if (!input.checkValidity()) isFieldsetValid = false;
       });
 
       // If valid mode to next field set
       if (!isFieldsetValid) {
-        Array.from(MultiStepComponent.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach(
-          (element, index) => {
-            element.classList.remove('valid');
-          }
-        );
+        Array.from(MultiStepComponent.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element) => {
+          element.classList.remove('valid');
+        });
 
         Array.from(MultiStepComponent.shadowRoot.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach(
-          (element, index) => {
+          (element) => {
             element.classList.remove('valid');
           }
         );
       } else {
-        Array.from(MultiStepComponent.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach(
-          (element, index) => {
-            element.classList.add('valid');
-          }
-        );
+        Array.from(MultiStepComponent.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element) => {
+          element.classList.add('valid');
+        });
 
         Array.from(MultiStepComponent.shadowRoot.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach(
-          (element, index) => {
+          (element) => {
             element.classList.add('valid');
           }
         );
@@ -142,10 +138,10 @@ class iamMultiStep extends HTMLElement {
           `.steps button[data-title="${button.getAttribute('data-title')}"]`
         );
 
-        Array.from(MultiStepComponent.querySelectorAll('button')).forEach((button, index) => {
+        Array.from(MultiStepComponent.querySelectorAll('button')).forEach((button) => {
           button.classList.remove('active');
         });
-        Array.from(MultiStepComponent.querySelectorAll('fieldset')).forEach((button, index) => {
+        Array.from(MultiStepComponent.querySelectorAll('fieldset')).forEach((button) => {
           button.classList.remove('active');
         });
 
@@ -202,11 +198,11 @@ class iamMultiStep extends HTMLElement {
     trackComponent(MultiStepComponent, 'iam-multi-step', []);
   }
 
-  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/multiselect/multiselect.component.ts

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
@@ -45,7 +43,8 @@ class iamMultiselect extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const multiselect = this;
     const form = this.closest('form');
     const wrapper = this.shadowRoot.querySelector('.wrapper');
@@ -91,7 +90,7 @@ class iamMultiselect extends HTMLElement {
     }
 
     // Set the correct attributes
-    function setItem(inputToSet) {
+    function setItem(inputToSet): void {
       if (inputToSet.checked == false) {
         inputToSet.closest('label').removeAttribute('slot');
         inputToSet.closest('label').removeAttribute('style');
@@ -121,13 +120,13 @@ class iamMultiselect extends HTMLElement {
     }
 
     // Set on load
-    Array.from(multiselect.querySelectorAll(`label input[type="checkbox"]:checked`)).forEach((checkbox, index) => {
+    Array.from(multiselect.querySelectorAll(`label input[type="checkbox"]:checked`)).forEach((checkbox) => {
       setItem(checkbox);
     });
 
     // Filter list
-    search.addEventListener('input', (event) => {
-      Array.from(multiselect.querySelectorAll(`label:not([slot="checked"])`)).forEach((label, index) => {
+    search.addEventListener('input', () => {
+      Array.from(multiselect.querySelectorAll(`label:not([slot="checked"])`)).forEach((label) => {
         const checkbox = label.querySelector('input');
         const searchValue = checkbox.value;
         const labelText = label.textContent;
@@ -145,12 +144,12 @@ class iamMultiselect extends HTMLElement {
 
     // Add a delayed hover effect for non hover devices
     let hoverTimeout;
-    multiselect.addEventListener('focus', (event) => {
+    multiselect.addEventListener('focus', () => {
       multiselect.classList.add('hover');
       clearTimeout(hoverTimeout);
     });
 
-    search.addEventListener('blur', (event) => {
+    search.addEventListener('blur', () => {
       clearTimeout(hoverTimeout);
       hoverTimeout = setTimeout(function () {
         multiselect.classList.remove('hover');
@@ -174,8 +173,8 @@ class iamMultiselect extends HTMLElement {
     });
 
     // Clear all
-    button.addEventListener('click', function (event) {
-      Array.from(multiselect.querySelectorAll(`label input[type="checkbox"]`)).forEach((checkbox, index) => {
+    button.addEventListener('click', function () {
+      Array.from(multiselect.querySelectorAll(`label input[type="checkbox"]`)).forEach((checkbox) => {
         checkbox.checked = false;
 
         setItem(checkbox);
@@ -239,7 +238,7 @@ class iamMultiselect extends HTMLElement {
       }
     });
 
-    function checkLastTag() {
+    function checkLastTag(): Element | null {
       if (order == 0) return false;
 
       let lastTag = multiselect.querySelector(`label[data-order="${order}"]`);
@@ -281,11 +280,11 @@ class iamMultiselect extends HTMLElement {
     });
 
     // Fix for the inline edit multiselect
-    multiselect.addEventListener('mousedown', (event) => {
+    multiselect.addEventListener('mousedown', () => {
       wrapper.setAttribute('data-mousedown', 'true');
     });
 
-    multiselect.addEventListener('mouseup', (event) => {
+    multiselect.addEventListener('mouseup', () => {
       wrapper.removeAttribute('data-mousedown');
     });
   }

package/assets/ts/components/nav/nav.component.ts

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
@@ -18,7 +16,7 @@ class iamNav 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/nav.css";`;
+    const loadCSS = `@import "${assetLocation}/css/components/nav.component.css";`;
     const loadExtraCSS = `@import "${assetLocation}/css/components/nav.global.css";`;
 
     const template = document.createElement('template');
@@ -63,7 +61,7 @@ class iamNav extends HTMLElement {
       document.head.insertAdjacentHTML('beforeend', `<style id="navGlobal">${loadExtraCSS}</style>`);
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
     // Load external CSS if needed
     if (this.hasAttribute('data-css'))
       this.shadowRoot
@@ -72,6 +70,7 @@ class iamNav extends HTMLElement {
 
     const menuButton = this.shadowRoot.querySelector('.btn-menu');
     const menu = this.shadowRoot.querySelector('.menu');
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const iamNav = this;
     const backdrop = this.shadowRoot.querySelector('.backdrop');
     const buttonsHolder = this.shadowRoot.querySelector('.buttons-holder');
@@ -225,14 +224,14 @@ class iamNav extends HTMLElement {
     );
 
     // Allow outside JS to close the menu
-    this.addEventListener('request-close', (event) => {
+    this.addEventListener('request-close', () => {
       menuButton.removeAttribute('aria-expanded');
       menu.classList.remove('open');
       iamNav.classList.remove('open');
     });
 
     // Close the menu on the click of the backdrop on desktop
-    backdrop.addEventListener('click', (event) => {
+    backdrop.addEventListener('click', () => {
       const openMenu = this.querySelector('details[open] summary');
 
       if (openMenu) openMenu.click();
@@ -275,7 +274,7 @@ class iamNav extends HTMLElement {
           });
 
           // Close any other dropdowns on the same level
-          Array.from(wrapper.querySelectorAll(':scope > details')).forEach((detailsArrayElement, index) => {
+          Array.from(wrapper.querySelectorAll(':scope > details')).forEach((detailsArrayElement) => {
             if (detailsArrayElement != details) detailsArrayElement.removeAttribute('open');
           });
 
@@ -334,14 +333,14 @@ class iamNav extends HTMLElement {
         searchButton.setAttribute('aria-expanded', true);
       }
 
-      searchButton.addEventListener('click', (event) => {
+      searchButton.addEventListener('click', () => {
         searchDialog.setAttribute('open', 'open');
         this.classList.add('search-open');
 
         searchButton.setAttribute('aria-expanded', true);
       });
 
-      searchClose.addEventListener('click', (event) => {
+      searchClose.addEventListener('click', () => {
         searchDialog.removeAttribute('open');
         this.classList.remove('search-open');
 

package/assets/ts/components/notification/notification.component.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import setupNotification, { closeNotification } from '../../modules/notification';
 
 // Data layer Web component created
@@ -43,6 +42,7 @@ class iamNotification extends HTMLElement {
   }
 
   connectedCallback(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const wrapper = this;
     const statusBG = this.hasAttribute('data-status') ? this.getAttribute('data-status') : 'white';
 
@@ -69,7 +69,7 @@ class iamNotification extends HTMLElement {
 
     const buttons = this.querySelectorAll('a,button');
 
-    Array.from(buttons).forEach((button, index) => {
+    Array.from(buttons).forEach((button) => {
       button.setAttribute('slot', 'btns');
       button.classList.add('link');
     });
@@ -90,7 +90,7 @@ class iamNotification extends HTMLElement {
 
       this.shadowRoot.querySelector('.notification__dismiss [data-dismiss-button]').addEventListener(
         'click',
-        function (e) {
+        function () {
           closeNotification(wrapper);
         },
         false

package/assets/ts/components/pagination/pagination.component.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 class iamPagination extends HTMLElement {
   constructor() {
     super();
@@ -53,7 +52,7 @@ class iamPagination extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
     // Set default attributes
     const params = new URLSearchParams(window.location.search);
 
@@ -82,12 +81,12 @@ class iamPagination extends HTMLElement {
     });
 
     // Next and previous buttons will simply trigger and on change on the select which in turn will dispatch an event
-    next.addEventListener('click', (event) => {
+    next.addEventListener('click', () => {
       select.value = parseInt(select.value) + 1;
       select.dispatchEvent(new Event('change'));
     });
 
-    prev.addEventListener('click', (event) => {
+    prev.addEventListener('click', () => {
       select.value = parseInt(select.value) - 1;
       select.dispatchEvent(new Event('change'));
     });
@@ -97,7 +96,7 @@ class iamPagination extends HTMLElement {
       this.setAttribute('data-increment', event.target.value);
     });
 
-    loadMore.addEventListener('click', (event) => {
+    loadMore.addEventListener('click', () => {
       const newValue = parseInt(this.getAttribute('data-show')) + parseInt(this.getAttribute('data-increment'));
       this.setAttribute('data-show', newValue);
 
@@ -107,7 +106,7 @@ class iamPagination extends HTMLElement {
     });
   }
 
-  setup() {
+  setup(): void {
     // Elements
     const wrapper = this.shadowRoot.querySelector('.pagination');
     const select = this.shadowRoot.querySelector('.page-jump select');
@@ -160,11 +159,11 @@ class iamPagination extends HTMLElement {
     perPage.value = increment;
   }
 
-  static get observedAttributes() {
+  static get observedAttributes(): any {
     return ['data-total', 'data-increment', 'data-page', 'data-show'];
   }
 
-  attributeChangedCallback(attrName, oldVal, newVal) {
+  attributeChangedCallback(attrName, oldVal, newVal): void {
     switch (attrName) {
       case 'data-total': {
         if (oldVal != newVal) {

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

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { trackComponent, trackComponentRegistered } from '../_global';
 import { cardHTML, setupCard } from '../../modules/card.module';
 
@@ -27,27 +26,26 @@ class iamRecordCard extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  async connectedCallback() {
-    const cardComponent = this;
-    const cardHead = cardComponent.shadowRoot.querySelector('.card__head');
-    setupCard(cardComponent);
+  async connectedCallback(): void {
+    const cardHead = this.shadowRoot.querySelector('.card__head');
+    setupCard(this);
 
-    Array.from(cardComponent.querySelectorAll(':scope > *:not([slot])')).forEach((element, index) => {
+    Array.from(this.querySelectorAll(':scope > *:not([slot])')).forEach((element) => {
       element.setAttribute('slot', 'details');
     });
 
-    if (cardComponent.hasAttribute('data-avatar')) {
-      cardHead.innerHTML += `<img src="${cardComponent.getAttribute('data-avatar')}" alt="" loading="lazy" class="card__avatar" part="avatar" />`;
+    if (this.hasAttribute('data-avatar')) {
+      cardHead.innerHTML += `<img src="${this.getAttribute('data-avatar')}" alt="" loading="lazy" class="card__avatar" part="avatar" />`;
     }
 
-    trackComponent(cardComponent, 'iam-record-card', []);
+    trackComponent(this, 'iam-record-card', []);
   }
 
-  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) {