@iamproperty/components 7.2.2--beta2 → 7.3.0

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

@@ -24,7 +24,6 @@ class iamMenu extends HTMLElement {
     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');
@@ -34,188 +33,170 @@ class iamMenu extends HTMLElement {
 
     // Set the needed CSS styles to connect the ID attribute to the anchor name
     if (menuID && menuButton) {
-      menuInner?.setAttribute('role', 'menu');
+      this.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
+    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();
-
-              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
+              activeItem.closest('details').removeAttribute('open');
+              activeItem.closest('details').querySelector(':scope summary').focus();
+            } else {
               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;
-          }
+              menuButton.focus();
+            }
+
+            break;
+          case 32: // Space
+          case 13: // Enter
+            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;
+        }
+      }
+    });
+
+    this.addEventListener('toggle', (e) => {
+      const updateEvent = new CustomEvent(e.newState, { detail: { id: this.getAttribute('id'), target: e.target } });
+      this.dispatchEvent(updateEvent);
+
+      if (this.hasAttribute('popover-open')) {
+        e.preventDefault();
+        this.removeAttribute('popover-open');
+        this.hidePopover();
+      }
+
+      if(this.matches(':popover-open') && document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)){
+
+        document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)?.setAttribute('aria-pressed','true');
+        document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)?.classList.add('active');
+      }
+      else {
+
+        document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)?.removeAttribute('aria-pressed');
+        document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)?.classList.remove('active');
+      }
+    });
+
+    this.addEventListener('click', (event) => {
+      if (
+        event &&
+        event.target instanceof HTMLElement &&
+        event.target.closest('button:has(+ iam-menu:not([popover]))')
+      ) {
+        const button = event.target.closest('button:has(+ iam-menu)');
+
+        button?.classList.toggle('open');
+      } else if (event && event.target instanceof HTMLElement && event.target.closest('button.selectable')) {
+        const button = event.target.closest('button.selectable');
+        if (this.hasAttribute('multiple')) {
+          button.classList.toggle('selected');
+        } else if (button?.classList.contains('selected')) {
+          this.querySelectorAll('.selected').forEach((item) => {
+            item.classList.remove('selected');
+          });
+        } else {
+          this.querySelectorAll('.selected').forEach((item) => {
+            item.classList.remove('selected');
+          });
+          button.classList.add('selected');
+        }
+      }
+    });
+
+    // safari and firefox anchor fix for cards
+    if (!CSS.supports('top', 'anchor(top)')) {
+      document.addEventListener('click', (event) => {
+        if (event.originalTarget && event.originalTarget.matches('[popovertarget]')) {
+          const button = event.originalTarget;
+          const popoverID = button.getAttribute('popovertarget');
+          const popover = document.getElementById(popoverID);
+
+          const viewportOffset = button.getBoundingClientRect();
+          const top = viewportOffset.top;
+          const left = viewportOffset.left;
+
+          popover.style.setProperty('top', top + 'px');
+          popover.style.setProperty('left', left + button.clientWidth + 'px');
         }
       });
     }
-
-    // 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>`
-      );
   }
 }
 

package/assets/ts/components/rank/rank.component.ts

@@ -247,17 +247,12 @@ class iamRank extends HTMLElement {
   }
 
   connectedCallback(): void {
-
-
     const position = this.hasAttribute('data-position') ? this.getAttribute('data-position') : this.textContent?.trim();
-    
-    this.setAttribute('data-position', position);
 
+    this.setAttribute('data-position', position);
 
-    
     trackComponent(this, 'iam-rank', ['select-card']);
   }
-
 }
 
 export default iamRank;

package/assets/ts/components/rankings/rankings.component.ts

@@ -33,8 +33,6 @@ class iamRankings extends HTMLElement {
   }
 
   connectedCallback(): void {
-
-
     const firstText = this.shadowRoot?.querySelector('.first-position');
     const secondText = this.shadowRoot?.querySelector('.second-position');
     const thirdText = this.shadowRoot?.querySelector('.third-position');
@@ -44,19 +42,15 @@ class iamRankings extends HTMLElement {
     secondText?.innerHTML = this.querySelector('tbody tr:nth-child(2) :is(td,th):nth-child(1)')?.textContent;
     thirdText?.innerHTML = this.querySelector('tbody tr:nth-child(3) :is(td,th):nth-child(1)')?.textContent;
 
-
-    
     this.querySelectorAll('tbody tr').forEach((element) => {
-
       const value = element.querySelector('td:last-child')?.textContent?.trim();
 
-      if(!element.querySelector(':first-child progress'))
+      if (!element.querySelector(':first-child progress'))
         element.querySelector(':first-child')?.innerHTML += `<progress max="${max}" value="${value}"></progress>`;
     });
 
     trackComponent(this, 'iam-rank', ['select-card']);
   }
-
 }
 
 export default iamRankings;

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

@@ -1,5 +1,7 @@
 import { trackComponent, trackComponentRegistered } from '../_global';
 import { cardHTML, setupCard } from '../../modules/card.module';
+import {loadYouTubeScripts,createYoutTubeVideo} from '../../modules/videos';
+
 
 trackComponentRegistered('iam-video-card');
 
@@ -73,7 +75,7 @@ class iamVideoCard extends HTMLElement {
       // 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();
+        const loaded = await loadYouTubeScripts();
       }
       cardHead.addEventListener('click', function () {
         const customEvent = new CustomEvent('play-video', {
@@ -81,7 +83,7 @@ class iamVideoCard extends HTMLElement {
         });
         cardComponent.dispatchEvent(customEvent);
 
-        cardComponent.createYoutTubeVideo(embed);
+        createYoutTubeVideo(embed,this.getAttribute('[data-youtbue]'));
         dialog.showModal();
       });
 
@@ -128,81 +130,6 @@ class iamVideoCard extends HTMLElement {
     trackComponent(cardComponent, 'iam-video-card', ['play-video', 'close-video']);
   }
 
-  loadYouTubeScripts(): any {
-    return new Promise((resolve, reject) => {
-      const image = new Image();
-      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';
-        const firstScriptTag = document.getElementsByTagName('script')[0];
-        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-        document.body.classList.add('youtubeLoaded');
-        resolve(true);
-      };
-      image.onerror = function (): any {
-        reject(false);
-      };
-      image.src = 'https://youtube.com/favicon.ico';
-    });
-  }
-
-  createYoutTubeVideo(target): void | boolean {
-    if (typeof window.player == 'undefined') {
-      window.player = [];
-    }
-
-    const link_id = target.getAttribute('id');
-    const video_id = this.getAttribute('data-youtube');
-
-    console.log(window.player);
-
-    if (typeof window.player[link_id] != 'undefined' && typeof window.player[link_id].pauseVideo == 'function') {
-      window.player[link_id].playVideo();
-
-      return false;
-    }
-
-    // This function creates an <iframe> (and YouTube player) after the API code downloads.
-    //function onYouTubeIframeAPIReady() {
-
-    window.player[link_id] = new YT.Player(link_id, {
-      height: '100%',
-      width: '100%',
-      videoId: video_id,
-      playerVars: {
-        modestbranding: 1,
-        playsinline: 1,
-        rel: 0,
-        showinfo: 0,
-      },
-      events: {
-        onReady: onPlayerReady,
-        onStateChange: onPlayerStateChange,
-      },
-    });
-    //}
-    //onYouTubeIframeAPIReady();
-
-    // The API will call this function when the video player is ready.
-    function onPlayerReady(event): void {
-      // Play the video straight away
-      event.target.playVideo();
-    }
-
-    // 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): void {
-      if (event.data == YT.PlayerState.PLAYING && !done) {
-        const link = document.getElementById(link_id);
-        link.classList.add('player-ready');
-
-        done = true;
-      }
-    }
-  }
-
   static get observedAttributes(): any {
     return ['data-image'];
   }