@iamproperty/components 7.6.3--beta1 → 7.6.3--beta3

package/assets/sass/utilities/flex.scss

@@ -1,4 +1,146 @@
 @layer utilities {
+
+  .flex-fill {
+    flex: 1 1 auto !important;
+  }
+
+  .flex-row {
+    flex-direction: row !important;
+  }
+
+  .flex-column {
+    flex-direction: column !important;
+  }
+
+  .flex-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+
+  .flex-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+
+  .flex-grow-0 {
+    flex-grow: 0 !important;
+  }
+
+  .flex-grow-1 {
+    flex-grow: 1 !important;
+  }
+
+  .flex-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+
+  .flex-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+
+  .flex-wrap {
+    flex-wrap: wrap !important;
+  }
+
+  .flex-nowrap {
+    flex-wrap: nowrap !important;
+  }
+
+  .flex-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
+
+  .justify-content-start {
+    justify-content: flex-start !important;
+  }
+
+  .justify-content-end {
+    justify-content: flex-end !important;
+  }
+
+  .justify-content-center {
+    justify-content: center !important;
+  }
+
+  .justify-content-between {
+    justify-content: space-between !important;
+  }
+
+  .justify-content-around {
+    justify-content: space-around !important;
+  }
+
+  .justify-content-evenly {
+    justify-content: space-evenly !important;
+  }
+
+  .align-items-start {
+    align-items: flex-start !important;
+  }
+
+  .align-items-end {
+    align-items: flex-end !important;
+  }
+
+  .align-items-center {
+    align-items: center !important;
+  }
+
+  .align-items-baseline {
+    align-items: baseline !important;
+  }
+
+  .align-items-stretch {
+    align-items: stretch !important;
+  }
+
+  .align-content-start {
+    align-content: flex-start !important;
+  }
+
+  .align-content-end {
+    align-content: flex-end !important;
+  }
+
+  .align-content-center {
+    align-content: center !important;
+  }
+
+  .align-content-between {
+    align-content: space-between !important;
+  }
+
+  .align-content-around {
+    align-content: space-around !important;
+  }
+
+  .align-content-stretch {
+    align-content: stretch !important;
+  }
+
+  .align-self-auto {
+    align-self: auto !important;
+  }
+
+  .align-self-start {
+    align-self: flex-start !important;
+  }
+
+  .align-self-end {
+    align-self: flex-end !important;
+  }
+
+  .align-self-center {
+    align-self: center !important;
+  }
+
+  .align-self-baseline {
+    align-self: baseline !important;
+  }
+
+  .align-self-stretch {
+    align-self: stretch !important;
+  }
+
+
   $breakpoints: (
     sm: 36em,
     md: 62em,

package/assets/sass/utilities/font-awesome-iso-fallbacks.scss

@@ -0,0 +1,32 @@
+@layer utilities {
+  .fa-right {
+    --iso: '\2192';
+  }
+  .fa-chevron-right {
+    --iso: '\003e';
+  }
+  .fa-left {
+    --iso: '\2190';
+  }
+  .fa-chevron-left {
+    --iso: '\003c';
+  }
+  .fa-up {
+    --iso: '\2191';
+  }
+  .fa-chevron-up {
+    --iso: '\2227';
+  }
+  .fa-down {
+    --iso: '\2193';
+  }
+  .fa-chevron-down {
+    --iso: '\2228';
+  }
+  .fa-plus {
+    --iso: '\002b';
+  }
+  .fa-bars {
+    --iso: '\039e';
+  }
+}

package/assets/sass/utilities/ratio.scss

@@ -1,5 +1,6 @@
 @layer utilities {
   .ratio {
+    display: block;
     position: relative;
     width: 100%;
 

package/assets/sass/utilities/text.scss

@@ -81,6 +81,11 @@
 
   .text-center {
     text-align: center !important;
+
+    > * {
+        
+      margin-inline: auto;
+    }
   }
 
   .text-decoration-none {
@@ -119,4 +124,68 @@
     word-wrap: break-word !important;
     word-break: break-word !important;
   }
+
+  @media screen and (min-width: 36em) {
+    .text-sm-start {
+      text-align: left !important;
+    }
+
+    .text-sm-end {
+      text-align: right !important;
+    }
+
+    .text-sm-center {
+      text-align: center !important;
+
+      > * {
+          
+        margin-inline: auto;
+      }
+    }
+
+    .text-sm-wrap {
+      white-space: normal !important;
+    }
+
+    .text-sm-nowrap {
+      white-space: nowrap !important;
+    }
+
+    .text-sm-break {
+      word-wrap: break-word !important;
+      word-break: break-word !important;
+    }
+  }
+
+  @media screen and (min-width: 62em) {
+    .text-md-start {
+      text-align: left !important;
+    }
+
+    .text-md-end {
+      text-align: right !important;
+    }
+
+    .text-md-center {
+      text-align: center !important;
+
+      > * {
+          
+        margin-inline: auto;
+      }
+    }
+
+    .text-md-wrap {
+      white-space: normal !important;
+    }
+
+    .text-md-nowrap {
+      white-space: nowrap !important;
+    }
+
+    .text-md-break {
+      word-wrap: break-word !important;
+      word-break: break-word !important;
+    }
+  }
 }

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

@@ -1,7 +1,5 @@
 import { trackComponent, trackComponentRegistered } from '../_global';
-import { cardHTML, setupCard } from '../../modules/card.module';
-import iamMenu from '../menu/menu.component';
-import Modal from '../../../../src/components/Modal/Modal.vue';
+import { openModal, closeModal, closeButtonHtml } from '../../modules/modal';
 
 trackComponentRegistered('iam-card');
 
@@ -24,7 +22,7 @@ class iamModal extends HTMLElement {
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
     <dialog>
-      <button class="btn btn-compact btn-secondary fa-xmark-large" data-close>Close</button>
+      ${closeButtonHtml}
       <div class="scroll">
         <i class="fa-light fa-circle" aria-hidden="true">
           <i class="fa-regular fa-${this.hasAttribute('data-icon') ? this.getAttribute('data-icon') : 'info'}" aria-hidden="true"></i>
@@ -56,31 +54,10 @@ class iamModal extends HTMLElement {
     const modalType = this.hasAttribute('data-type') ? this.getAttribute('data-type') : 'passive';
 
 
-
-
-    const openModal = (): void => {
-      dialog?.showModal();
-      dialog?.focus();
-
-      const closeEvent = new CustomEvent('modal-opened', {
-        bubbles: true,
-        cancelable: true,
-        detail: { modalId: id },
-      });
-
-      this.dispatchEvent(closeEvent);
-
-      window.dataLayer = window.dataLayer || [];
-      window.dataLayer.push({
-        event: 'openModal',
-        id: id,
-      });
-    }
-
     document.addEventListener('click', (e) => {
       
       if(e.target.matches(`[command="show-modal"][commandfor="${id}"]`) || e.target.matches(`[data-modal="${id}"]`)){
-        openModal();
+        openModal(id, this);
       }
     });
     
@@ -95,13 +72,13 @@ class iamModal extends HTMLElement {
     originalDialog?.addEventListener('command', (e) => {
 
       if (event.command == "close") {
-        closeModal();
+        closeModal(id, this);
       }
     });
 
     originalDialog?.addEventListener('close', (e) => {
 
-      closeModal();
+      closeModal(id, this);
     });
 
     // Move the submit button so that the slot functionality works
@@ -109,30 +86,12 @@ class iamModal extends HTMLElement {
       this.moveBefore(element, originalDialog);
     });
 
-    const closeModal = (): void => {
-      dialog?.close();
-      
-      const closeEvent = new CustomEvent('modal-closed', {
-        bubbles: true,
-        cancelable: true,
-        detail: { modalId: id },
-      });
-
-      this.dispatchEvent(closeEvent);
-
-      window.dataLayer = window.dataLayer || [];
-      window.dataLayer.push({
-        event: 'closeModal',
-        id: id,
-      });
-    }
-
     closeButton?.addEventListener('click', () => {
-      closeModal();
+      closeModal(id, this);
     });
 
     cancelButton?.addEventListener('click', () => {
-      closeModal();
+      closeModal(id, this);
     });
 
     agreedButton?.addEventListener('click', () => {
@@ -143,7 +102,7 @@ class iamModal extends HTMLElement {
 
       this.dispatchEvent(agreedEvent);
 
-      closeModal();
+      closeModal(id, this);
     });
     
     slottedAgreedButton?.addEventListener('click', () => {
@@ -154,11 +113,11 @@ class iamModal extends HTMLElement {
 
       this.dispatchEvent(agreedEvent);
 
-      closeModal();
+      closeModal(id, this);
     });
 
     this.addEventListener('close-modal', () => {
-      closeModal();
+      closeModal(id, this);
     });
 
     this.addEventListener('click', (event) => {
@@ -178,7 +137,7 @@ class iamModal extends HTMLElement {
           event.clientY > dialogDimensions.bottom
         ) {
           if (!event.target.closest('dialog *'))
-            closeModal(); // Weird bug when interacting with radio input fields within dialogs cuases it to close
+            closeModal(id, this); // Weird bug when interacting with radio input fields within dialogs cuases it to close
         }
       }
     });

package/assets/ts/components/multiselect/multiselect.component.ts

@@ -1,4 +1,5 @@
 import Cookies from 'js-cookie';
+import { filterList } from '../../modules/dropdown';
 
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
@@ -126,25 +127,6 @@ class iamMultiselect extends HTMLElement {
       setItem(checkbox);
     });
 
-    // Filter list
-    const filterList = (): void => {
-
-      Array.from(multiselect.querySelectorAll(`label:not([slot="checked"])`)).forEach((label) => {
-        const checkbox = label.querySelector('input');
-        const searchValue = checkbox.value;
-        const labelText = label.textContent;
-
-        if (
-          searchValue.toLowerCase().includes(search.value.toLowerCase()) ||
-          labelText.toLowerCase().includes(search.value.toLowerCase())
-        ) {
-          label.removeAttribute('slot');
-        } else {
-          label.setAttribute('slot', 'notmatched');
-        }
-      });
-    }
-
     search.addEventListener('input', () => {
 
       if (multiselect.hasAttribute('data-url')) {
@@ -154,7 +136,7 @@ class iamMultiselect extends HTMLElement {
         }
       } else {
           
-        filterList();
+        filterList(multiselect, search);
       }
     });
 
@@ -422,7 +404,7 @@ class iamMultiselect extends HTMLElement {
 
             multiselect.insertAdjacentHTML('beforeend', `${items}`);
             
-            filterList();
+            filterList(multiselect, search);
             return response;
           });
       } catch (error) {

package/assets/ts/components/tag/tag.component.ts

@@ -0,0 +1,107 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+import { searchAjax, filterList, setTag } from '../../modules/dropdown';
+
+trackComponentRegistered('iam-tag');
+
+class iamTag 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/tag.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+
+    ${loadCSS}
+    </style>
+    <div class="wrapper">
+      <input type="text" name="search" autocomplete="off" />
+      <slot name="checked"></slot>
+      <div class="admin-panel dropdown" part="dropdown">
+        <slot></slot>
+      </div>
+    </div>
+    `;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+
+    const search = this.shadowRoot.querySelector('input');
+
+    const input = this.querySelector(':checked');
+    const inputName = input?.getAttribute('name');
+    let tag = this.querySelector('label:has(:checked)');
+
+    setTag(tag);
+    
+
+    this.addEventListener('click',()=>{
+      if (event && event.target instanceof HTMLElement && event.target.closest('label:has(:checked)')) {
+        
+        search.focus();
+      }
+      
+    });
+
+    search.addEventListener('input', () => {
+
+      if (this.hasAttribute('data-url')) {
+      
+        if (search.value.length == 3) {
+          searchAjax(this, search, filterList);
+        }
+      } else {
+        filterList(this, search);
+      }
+    });
+
+
+
+    this.addEventListener('change', (event) => {
+      if (event && event.target instanceof HTMLElement && event.target.closest('input[type="radio"],input[type="checkbox"]')) {
+        const checkbox = event.target.closest('input[type="radio"],input[type="checkbox"]');
+
+        
+        tag.checked = false;
+        tag.removeAttribute('slot');
+
+        // Set the new tag
+        tag = this.querySelector('label:has(:checked)');
+        setTag(tag);
+
+        search?.blur();
+        search?.value = '';
+        filterList(this, search);
+
+        
+        // dispatch event
+
+        const changeEvent = new CustomEvent('tag-changed', { 
+          detail: {
+            value: tag?.querySelector(':checked').value,
+            title: tag?.textContent
+          } 
+        });
+
+        this?.dispatchEvent(changeEvent);
+      }
+    });
+
+
+
+    // TODO Add keyboard actions
+
+
+
+
+  }
+}
+
+export default iamTag;

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

@@ -82,7 +82,7 @@ class iamVideoCard extends HTMLElement {
         });
         cardComponent.dispatchEvent(customEvent);
 
-        createYoutTubeVideo(embed, this.getAttribute('[data-youtbue]'));
+        createYoutTubeVideo(embed, this.getAttribute('[data-youtube]'));
         dialog.showModal();
       });
 

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

@@ -0,0 +1,137 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+import { loadYouTubeScripts, createYoutTubeVideo } from '../../modules/videos';
+import { openModal,closeModal,closeButtonHtml } from '../../modules/modal';
+
+trackComponentRegistered('iam-video-modal');
+
+class iamVideoCard 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/modal.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    
+    ${loadCSS}
+    </style>
+
+    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
+
+    <dialog>
+      ${closeButtonHtml}
+      <slot></slot>
+    </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>`
+    const embed = this.querySelector('.embed');
+
+    document.addEventListener('click', async (e) => {
+
+      if(e.target.closest(`[command="show-modal"][commandfor="${id}"]`)){
+
+        e.preventDefault();
+
+        if(this.hasAttribute('data-youtube')){
+          const youtubeId = this.getAttribute('data-youtube');
+          embed?.setAttribute('id',youtubeId);
+          this.openYoutubeVideo(id, this);
+        }
+        else if(this.hasAttribute('data-vimeo')) {
+          this.openVimeoVideo(id, this);
+        }
+      }
+    });
+    
+    closeButton?.addEventListener('click', () => {
+      closeModal(id, this);
+
+      if(this.hasAttribute('data-youtube')){
+        const youtubeId = this.getAttribute('data-youtube');
+
+        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: this.getAttribute('data-vimeo') },
+        });
+        this.dispatchEvent(customEvent);
+        window.dataLayer.push(customEvent.detail);
+      }
+    });
+  }
+}
+
+export default iamVideoCard;