@iamproperty/components 7.7.1--beta3 → 7.7.1--beta5

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

@@ -1,6 +1,7 @@
 import { trackComponent, trackComponentRegistered } from '../_global';
 import { cardHTML, setupCard } from '../../modules/card.module';
-import { loadYouTubeScripts, createYoutTubeVideo } from '../../modules/videos';
+import { videoHTML, loadYouTubeScripts, createYoutTubeVideo,openYoutubeVideo,openVimeoVideo } from '../../modules/videos';
+import { openModal,closeModal,closeButtonHtml } from '../../modules/modal';
 
 trackComponentRegistered('iam-video-card');
 
@@ -21,9 +22,11 @@ class iamVideoCard extends HTMLElement {
     
     ${loadCSS}
     </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous" />
     ${cardHTML}
     <dialog>
-      <div class="embed"></div>
+      ${closeButtonHtml}
+      ${videoHTML}
     </dialog>
     `;
 
@@ -34,97 +37,73 @@ class iamVideoCard extends HTMLElement {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const cardComponent = this;
     const cardHead = cardComponent.shadowRoot.querySelector('.card__head');
+    const closeButton = this.shadowRoot?.querySelector('[data-close]');
 
-    const randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
-    const link_id = randLetter + Date.now();
-
-    let dialog;
-    let embed;
+    this.insertAdjacentHTML('beforeend', `<div class="embed" slot="video"></div>`);
+    const embed = this.querySelector('.embed');
 
     setupCard(cardComponent);
+    
+    if (cardComponent.querySelector('[data-youtube]')){
+      
+      cardComponent.setAttribute('data-youtube',cardComponent.querySelector('[data-youtube]').getAttribute('data-youtube'));
+      cardComponent.querySelector('[data-youtube]')?.remove();
+    }
 
-    // Check if youtube or vimeo video link is present
-    if (cardComponent.querySelector('[data-youtube]'))
-      cardComponent.setAttribute(
-        'data-youtube',
-        cardComponent.querySelector('[data-youtube]').getAttribute('data-youtube')
-      );
-
-    if (cardComponent.querySelector('[data-vimeo]'))
+    if (cardComponent.querySelector('[data-vimeo]')){
+      
       cardComponent.setAttribute('data-vimeo', cardComponent.querySelector('[data-vimeo]').getAttribute('data-vimeo'));
+      cardComponent.querySelector('[data-vimeo]')?.remove();
+    }
+    
+    
 
-    // General dialog stuff
-    if (cardComponent.hasAttribute('data-youtube') || cardComponent.hasAttribute('data-vimeo')) {
-      cardHead.setAttribute('tabindex', '0');
-
-      // Add dialog to page
-      if (!document.getElementById(`${link_id}-dialog`)) {
-        document.body.insertAdjacentHTML(
+    cardHead.insertAdjacentHTML(
           'beforeend',
-          `<dialog id="${link_id}-dialog"><div class="embed" id="${link_id}"></div></dialog>`
+          `<button class="btn btn-compact fa-play colour-success">Play</button>`
         );
-      }
-
-      dialog = document.getElementById(`${link_id}-dialog`);
-      embed = document.getElementById(link_id);
-    }
-
-    // Youtube
-    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 loadYouTubeScripts();
-      }
-      cardHead.addEventListener('click', function () {
-        const customEvent = new CustomEvent('play-video', {
-          detail: { 'Video Type': 'YoutTube', ID: cardComponent.getAttribute('data-youtube') },
-        });
-        cardComponent.dispatchEvent(customEvent);
-
-        createYoutTubeVideo(embed, this.getAttribute('[data-youtube]'));
-        dialog.showModal();
-      });
-
-      dialog.addEventListener('close', () => {
-        if (
-          window.player[embed.getAttribute('id')] &&
-          typeof window.player[embed.getAttribute('id')].pauseVideo == 'function'
-        ) {
-          window.player[embed.getAttribute('id')].pauseVideo();
-        }
 
-        const customEvent = new CustomEvent('close-video', {
-          detail: { 'Video Type': 'YoutTube', ID: cardComponent.getAttribute('data-youtube') },
-        });
-        cardComponent.dispatchEvent(customEvent);
-      });
-    } else if (cardComponent.hasAttribute('data-vimeo')) {
-      // Vimeo
+        
+    const button = cardHead?.querySelector('button');
 
-      cardHead.addEventListener('click', function () {
-        const videoId = cardComponent.getAttribute('data-vimeo');
+    cardHead.tabIndex = 6;
+    button?.tabIndex = -1;
 
-        const customEvent = new CustomEvent('play-video', {
-          detail: { 'Video Type': 'Vimeo', ID: videoId },
-        });
-        cardComponent.dispatchEvent(customEvent);
+    cardHead.addEventListener('click', () => {
+      
+      if(this.hasAttribute('data-youtube')){
+        const youtubeId = this.getAttribute('data-youtube');
+        embed?.setAttribute('id',youtubeId);
+        openYoutubeVideo(this);
+        openModal(this);
+      }
+      else if(this.hasAttribute('data-vimeo')) {
+        openVimeoVideo(this);
+        openModal(this);
+      }
+    });
 
-        if (!embed.querySelector('iframe'))
-          embed.innerHTML = `<iframe src="https://player.vimeo.com/video/${videoId}?autoplay=1" width="100%" height="100%" frameborder="0" allow="autoplay; encrypted-media" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`;
+    closeButton?.addEventListener('click', () => {
+      closeModal(this);
 
-        dialog.showModal();
-      });
+      if(this.hasAttribute('data-youtube')){
+        const youtubeId = this.getAttribute('data-youtube');
 
-      dialog.addEventListener('close', () => {
+        if (window.player[youtubeId] && typeof window.player[youtubeId].pauseVideo == 'function') {
+          window.player[youtubeId].pauseVideo();
+        }
+      }
+      else if(this.hasAttribute('data-vimeo')) {
+        
         embed.innerHTML = ``; // Remove the video since we cant pause it
 
         const customEvent = new CustomEvent('close-video', {
-          detail: { 'Video Type': 'Vimeo', ID: cardComponent.getAttribute('data-vimeo') },
+          detail: { 'Video Type': 'Vimeo', ID: this.getAttribute('data-vimeo') },
         });
-        cardComponent.dispatchEvent(customEvent);
-      });
-    }
+        this.dispatchEvent(customEvent);
+        window.dataLayer.push(customEvent.detail);
+      }
+    });
 
     trackComponent(cardComponent, 'iam-video-card', ['play-video', 'close-video']);
   }

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

@@ -1,5 +1,5 @@
 import { trackComponent, trackComponentRegistered } from '../_global';
-import { loadYouTubeScripts, createYoutTubeVideo } from '../../modules/videos';
+import { videoHTML, loadYouTubeScripts, createYoutTubeVideo,openYoutubeVideo,openVimeoVideo } from '../../modules/videos';
 import { openModal,closeModal,closeButtonHtml } from '../../modules/modal';
 
 trackComponentRegistered('iam-video-modal');
@@ -26,74 +26,22 @@ class iamVideoCard extends HTMLElement {
 
     <dialog>
       ${closeButtonHtml}
-      <slot></slot>
+      ${videoHTML}
     </dialog>
     `;
 
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  openYoutubeVideo = async (id, component):void => {
-
-    const embed = component.querySelector('.embed');
-
-    openModal(id, component);
-
-    const youtubeId = component.getAttribute('data-youtube');
-    let loaded;
-    if (!document.body.classList.contains('youtubeLoaded')) {
-      
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      loaded = await loadYouTubeScripts();
-    }
-
-    const customEvent = new CustomEvent('play-video', {
-      detail: { 'Video Type': 'YoutTube', ID: youtubeId },
-    });
-    component.dispatchEvent(customEvent);
-
-    const interval = setInterval(():void => {
-
-      if(typeof YT != "undefined"){
-        clearInterval(interval);
-        createYoutTubeVideo(embed, youtubeId);
-      }
-    }, 200);
-    // Limit the number of calls
-    setTimeout(function() {
-      clearInterval(interval)
-    }, 2000);
-
-  } 
-  
-  openVimeoVideo = async (id, component):void => {
-
-    const embed = component.querySelector('.embed');
-
-    openModal(id, component);
-
-    const vimeoId = component.getAttribute('data-vimeo');
-
-    const customEvent = new CustomEvent('play-video', {
-      detail: { 'Video Type': 'Vimeo', ID: vimeoId },
-    });
-    component.dispatchEvent(customEvent);
-    window.dataLayer.push(customEvent.detail);
-
-    if (!embed.querySelector('iframe'))
-      embed.innerHTML = `<iframe src="https://player.vimeo.com/video/${vimeoId}?autoplay=1" width="100%" height="100%" frameborder="0" allow="autoplay; encrypted-media" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`;
-
-  } 
-
   async connectedCallback(): void {
     
     const id = this.getAttribute('id');
     const closeButton = this.shadowRoot?.querySelector('[data-close]');
     
-    this.innerHTML = `<div class="embed"></div>`
+    this.innerHTML = `<div class="embed" slot="video"></div>`;
     const embed = this.querySelector('.embed');
 
-    document.addEventListener('click', async (e) => {
+    document.addEventListener('click', (e) => {
 
       if(e.target.closest(`[command="show-modal"][commandfor="${id}"]`)){
 
@@ -102,16 +50,19 @@ class iamVideoCard extends HTMLElement {
         if(this.hasAttribute('data-youtube')){
           const youtubeId = this.getAttribute('data-youtube');
           embed?.setAttribute('id',youtubeId);
-          this.openYoutubeVideo(id, this);
+          openYoutubeVideo(this);
+          openModal(this);
         }
         else if(this.hasAttribute('data-vimeo')) {
-          this.openVimeoVideo(id, this);
+          openVimeoVideo(this);
+          openModal(this);
         }
       }
     });
+
     
     closeButton?.addEventListener('click', () => {
-      closeModal(id, this);
+      closeModal(this);
 
       if(this.hasAttribute('data-youtube')){
         const youtubeId = this.getAttribute('data-youtube');

package/assets/ts/modules/advanced-select.ts

@@ -24,13 +24,6 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
 
   });
 
-  displayInputField.addEventListener('keyup', function () {
-    
-    if(displayInputField.value != ""){
-      displayInputField.setAttribute('data-value', displayInputField.value);
-    }
-  });
-
   displayInputField.addEventListener('blur', function () {
     if (displayInputField.hasAttribute('data-value')) {
       displayInputField.value = displayInputField.getAttribute('data-value');
@@ -46,9 +39,20 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
 
   datalist.addEventListener('click', function (event) {
     if (event && event.target instanceof HTMLElement && event.target.closest('option')) {
-      const option = event.target.closest('option');
+      const option = event.target.closest('option') as HTMLOptionElement;
+      const optionText = option.textContent?.trim() || option.value;
+
+      // Store actual value on the original input
+      const originalInput = advancedSelect.querySelector('input[type="hidden"]') as HTMLInputElement | null;
+      if (originalInput) {
+        originalInput.value = option.value;
+        originalInput.setAttribute('value', option.value);
+      }
 
-      displayInputField.value = option.value;
+      // Show label text in the visible field
+      displayInputField.value = optionText;
+      displayInputField.setAttribute('data-value', optionText);
+      displayInputField.setAttribute('placeholder', optionText);
 
       if (typeof window.triggerDynamicEvent == 'function') window.triggerDynamicEvent(displayInputField);
 
@@ -60,7 +64,10 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
 
       setTimeout(() => {
         advancedSelect.dispatchEvent(new CustomEvent('update-value', {
-          detail: { value: option.value },
+          detail: {
+            value: option.value,
+            text: optionText,
+          },
         }));
       }, 0);
     }
@@ -70,19 +77,21 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
     displayInputField.removeAttribute('data-value');
     currentFocus = -1;
 
-    if(advancedSelect.tagName != "IAM-ADDRESS-LOOKUP"){
+    if (advancedSelect.tagName != "IAM-ADDRESS-LOOKUP") {
       const text = displayInputField.value.toUpperCase();
+
       for (const option of datalist.options) {
-        if (option.value.toUpperCase().indexOf(text) > -1) {
+        const optionText = (option.textContent || option.value).toUpperCase();
+
+        if (optionText.indexOf(text) > -1) {
           option.style.display = 'block';
           option.classList.remove('hide');
         } else {
           option.style.display = 'none';
           option.classList.add('hide');
         }
-      }      
+      }
     }
-
   });
 
   advancedSelect.addEventListener('keydown', function (e) {
@@ -127,6 +136,12 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
 
 
   const emptyField = (): void => {
+    const originalInput = advancedSelect.querySelector('input[type="hidden"]') as HTMLInputElement | null;
+
+    if (originalInput) {
+      originalInput.value = '';
+      originalInput.setAttribute('value', '');
+    }
 
     displayInputField.removeAttribute('placeholder');
 
@@ -139,15 +154,21 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
 
     for (const optionInner of datalist.options) {
       optionInner.classList.remove('active');
+      optionInner.classList.remove('hide');
       optionInner.removeAttribute('style');
     }
 
     const updateEvent = new CustomEvent('close-button-pressed');
     advancedSelect.dispatchEvent(updateEvent);
-  }
-
-
 
+    // Notify consumers the value was cleared
+    advancedSelect.dispatchEvent(new CustomEvent('update-value', {
+      detail: {
+        value: '',
+        text: '',
+      },
+    }));
+  }
 
   const closeBtn = advancedSelect.querySelector('.empty') ? advancedSelect.querySelector('.empty') : advancedSelect.shadowRoot.querySelector('.empty');
 

package/assets/ts/modules/modal.ts

@@ -1,6 +1,7 @@
-export const openModal = (id, modal): void => {
+export const openModal = (modal): void => {
 
   const dialog = modal.shadowRoot?.querySelector('dialog');
+  const id = modal.hasAttribute('id') ? modal.getAttribute('id') : 'unknown';
 
   dialog?.showModal();
   dialog?.focus();
@@ -20,9 +21,10 @@ export const openModal = (id, modal): void => {
   });
 }
 
-export const closeModal = (id, modal): void => {
+export const closeModal = (modal): void => {
 
   const dialog = modal.shadowRoot?.querySelector('dialog');
+  const id = modal.hasAttribute('id') ? modal.getAttribute('id') : 'unknown';
 
   dialog?.close();
   

package/assets/ts/modules/videos.ts

@@ -101,6 +101,14 @@ const videoSupport = async (body): void => {
   });
 };
 
+export const videoHTML = `<div class="video-wrapper">
+  <slot name="video"></slot>
+  <picture>
+    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" lazy="" />
+  </picture>
+  <button class="btn btn-compact fa-play m-0 colour-success">Play</button>
+</div>`;
+
 export const loadYouTubeScripts = async (): any => {
   return new Promise((resolve, reject) => {
     const image = new Image();
@@ -133,6 +141,9 @@ export const createYoutTubeVideo = async (target, video_id): void | boolean => {
     return false;
   }
 
+  console.log('hi2');
+  
+
   // This function creates an <iframe> (and YouTube player) after the API code downloads.
   //function onYouTubeIframeAPIReady() {
 
@@ -173,4 +184,50 @@ export const createYoutTubeVideo = async (target, video_id): void | boolean => {
   }
 };
 
+export const openYoutubeVideo = async (component):void => {
+
+    const embed = component.shadowRoot.querySelector('.embed');
+    const youtubeId = component.getAttribute('data-youtube');
+
+    let loaded;
+    if (!document.body.classList.contains('youtubeLoaded')) {
+      
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      loaded = await loadYouTubeScripts();
+    }
+
+    const customEvent = new CustomEvent('play-video', {
+      detail: { 'Video Type': 'YoutTube', ID: youtubeId },
+    });
+    component.dispatchEvent(customEvent);
+
+    const interval = setInterval(():void => {
+
+      if(typeof YT != "undefined"){
+        clearInterval(interval);
+        createYoutTubeVideo(embed, youtubeId);
+      }
+    }, 200);
+    // Limit the number of calls
+    setTimeout(function() {
+      clearInterval(interval)
+    }, 2000);
+
+  } 
+
+export const openVimeoVideo = async (component):void => {
+
+  const embed = component.querySelector('.embed');
+  const vimeoId = component.getAttribute('data-vimeo');
+
+  const customEvent = new CustomEvent('play-video', {
+    detail: { 'Video Type': 'Vimeo', ID: vimeoId },
+  });
+  component.dispatchEvent(customEvent);
+  window.dataLayer.push(customEvent.detail);
+
+  if (!embed.querySelector('iframe'))
+    embed.innerHTML = `<iframe src="https://player.vimeo.com/video/${vimeoId}?autoplay=1" width="100%" height="100%" frameborder="0" allow="autoplay; encrypted-media" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`;
+} 
+
 export default videoSupport;