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

package/assets/sass/components/video-card.component.scss

@@ -1,75 +1,49 @@
 @use '../_func' as *;
-@use 'card.module' as *;
+@use 'card.module';
+@use './modal.component';
+@use './video-modal.component';
+@use '../elements/buttons--global';
+@use '../elements/buttons--compact';
 
 :host {
   --card-right-padding: 1rem;
-
   --card-head-height: 10rem;
-
-  font-size: 1.5rem;
   --line-height: 2rem;
+  display: flex;
+  font-size: 1.5rem;
 }
 
-//video-card--top
-
-:host(:is([data-youtube], [data-vimeo]):not(.video-card--top)) .card__head {
+// #region video-card--top
+:host(:not(.video-card--top)) .card__head {
   order: 2;
 }
 
-:host(:is([data-youtube], [data-vimeo])) .card__head {
-  cursor: pointer;
-  position: relative;
-
-  > *:not(img) {
-    z-index: -1;
-  }
-
-  &:before {
-    content: '';
-    display: block;
-    background-color: var(--video-btn-colour, var(--colour-success));
-    height: 5rem;
-    width: 5rem;
-    position: absolute;
-    top: calc(50% - 2.5rem);
-    left: calc(50% - 2.5rem);
-    z-index: 2;
-    border-radius: 2.5rem;
+@layer components {
+  .card__head {
+    cursor: pointer;
+    position: relative;
+
+    > *:not(img) {
+      z-index: -1;
+    }
+
+    .fa-play {
+      position: absolute;
+      z-index: 1!important;
+      top: 50%;
+      left: 50%;
+      pointer-events: none;
+      margin: 0!important;
+      translate: -50% -50%;
+    }
+
+    &:is(:hover,:focus):not(:active) .fa-play {
+      --colour-btn-bg: var(--colour-white)!important;
+      --colour-btn-border: var(--colour-white)!important;
+    }
+    &:is(:active) .fa-play {
+      filter: brightness(85%);
+    }
   }
-
-  &:after {
-    $icon-play: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'/></svg>");
-    --icon: #{$icon-play};
-
-    content: '';
-    display: block;
-    height: 2rem;
-    width: 2rem;
-    position: absolute;
-    top: calc(50% - 1rem);
-    left: calc(50% - 0.8rem);
-    z-index: 5;
-    background: var(--colour-primary-theme);
-    mask-image: var(--icon);
-    mask-size: 80%;
-    mask-repeat: no-repeat;
-    mask-position: 50% 50%;
-    -webkit-mask-image: var(--icon);
-    -webkit-mask-size: 80%;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: 50% 50%;
-  }
-
-  &:is(:hover, :focus) {
-    --video-btn-colour: var(--colour-canvas);
-  }
-  &:is(:active) {
-    --video-btn-colour: color-mix(in oklab, var(--colour-success), #000000 20%) !important;
-  }
-}
-
-.embed {
-  aspect-ratio: 1 / 1;
-  display: block;
-  width: 10rem;
 }
+// #endregion

package/assets/sass/components/video-modal.component.scss

@@ -1,4 +1,5 @@
 @use './modal.component';
+@use './video.component';
 
 @layer components {
   
@@ -7,6 +8,7 @@
     max-width: 50rem !important;
     padding: 0;
     aspect-ratio: 16 / 9;
+    overflow: hidden;
 
     &[open]::before {
       
@@ -17,9 +19,9 @@
 
       display: none;
     }
-  }
-  ::slotted(.embed) {
-    aspect-ratio: 16 / 9;
-    width: 100%;
+
+    .video-wrapper button {
+      display: none;
+    }
   }
 }

package/assets/sass/components/video.component.scss

@@ -0,0 +1,75 @@
+@use '../foundations/animations';
+@use '../elements/buttons--global';
+@use '../elements/buttons--compact';
+@use '../utilities/colours';
+
+@layer components {
+  .video-wrapper {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: auto;
+    aspect-ratio: 16/9;
+    background-color: var(--colour-light);
+    margin-bottom: 2rem;
+    cursor: pointer;
+
+    &:before {
+      font-family: 'Font Awesome 7 Pro';
+      content: '\f3f4';
+      position: absolute;
+      font-weight: 900;
+      color: var(--colour-heading);
+      animation: spin 1.5s infinite steps(10);
+      font-size: 1.5em;
+      top: 50%;
+      left: 50%;
+      translate: -50% -50%;
+      z-index: 1;
+    }
+
+    img {
+      position: absolute;
+      inset: 0;
+      z-index: 3;
+      width: calc(100% + 2px);
+      height: 100%;
+      object-fit: cover;
+      margin-inline: -1px;
+    }
+
+    button {
+      
+      pointer-events: none;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: 4;
+      transform: translate(-50%, -50%);
+    }
+
+    &:is(:hover,:focus):not(:active) button {
+      --colour-btn-bg: var(--colour-white)!important;
+      --colour-btn-border: var(--colour-white)!important;
+    }
+    &:is(:active) button {
+      filter: brightness(85%);
+    }
+  }
+
+  dialog .video-wrapper {
+    margin-bottom: 0;
+  }
+}
+
+::slotted(.embed) {
+  
+  position: absolute;
+  inset: 0;
+  z-index: 4;
+  aspect-ratio: 16 / 9;
+  width: calc(100% + 2px);
+  height: 100%;
+  margin-inline: -1px;
+  margin-block: 0;
+}

package/assets/sass/elements/badge-tag.css

@@ -11,7 +11,7 @@
     color: #262626;
     position: relative;
     background: var(--wider-colour, var(--wider-colour-1));
-    margin-bottom: 1rem;
+    margin-bottom: 0.5rem;
 
     &:has(+ :is(.badge, .tag)) {
       margin-right: 0.375rem; /* 6 */

package/assets/sass/elements/buttons--action.css

@@ -24,6 +24,23 @@
       content: var(--fa);
       margin-right: 0.375rem; /* 6 */
     }
+    &.icon-only {
+      position: relative;
+      text-indent: -300vw;
+      overflow: hidden;
+      min-width: 1.75rem;
+
+      &:before {
+        position: absolute;
+        left: 0;
+        top: 0;
+        min-width: 1.75rem;
+        text-align: center;
+        text-indent: 0;
+        padding-inline: 0.25rem;
+        line-height: 1.85rem;
+      }
+    }
 
     a:not(.btn-primary):is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) &,
     &:not(.btn-primary):is(:hover, :focus, .hover, :focus-within):not([disabled], :active, .active) {

package/assets/sass/elements/buttons--global.scss

@@ -121,10 +121,14 @@
   // #endregion
 
   // #region btn with colour success
-  .btn.colour-success {
+  .btn.btn-complete {
+    --colour: var(--colour-success);
     --colour-btn-bg-hover: var(--colour);
     --colour-btn-border-hover: var(--colour);
     --colour-btn-hover: var(--colour-primary-theme);
+    --colour-btn-bg: var(--colour);
+    --colour-btn-border: var(--colour);
+
     position: relative;
     padding-left: 3.5rem; /*56 */
     padding-right: 3.5rem; /*56 */

package/assets/sass/elements/links.scss

@@ -171,50 +171,72 @@
   // #endregion
 }
 
-:is(.youtube-link, .vimeo-link) {
+:is(.video-link, .youtube-link, .vimeo-link) {
   position: relative;
+--compact-size: 3rem;
 
-  &:before {
-    content: '';
+  &:before, 
+  &:after {
+    content: "\f04b";
+    font-family: "Font Awesome 7 Pro" !important;
     display: block;
-    background-color: var(--video-btn-colour, var(--colour-success));
-    height: 3rem;
-    width: 3rem;
     position: absolute;
-    top: calc(50% - 1.5rem);
-    left: calc(50% - 1.5rem);
-    z-index: 2;
-    border-radius: 1.5rem;
+
+    text-indent: 0;
+    line-height: calc(var(--compact-size) - .25rem);
+    font-weight: 900;
+    font-size: 1rem !important;
+    text-align: center;
+
+
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 4;
+    transform: translate(-50%, -50%);
+
+
+    --compact-size: 3rem;
+    padding: 0 !important;
+    margin-bottom: .5rem;
+    text-align: center;
+    width: var(--compact-size);
+    min-width: var(--compact-size);
+    max-width: var(--compact-size);
+    height: var(--compact-size) !important;
+    min-height: var(--compact-size) !important;
+    max-height: var(--compact-size) !important;
+    align-content: center;
+    line-height: 1 !important;
+    overflow: hidden;
   }
 
   &:after {
-    $icon-play: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'/></svg>");
-    --icon: #{$icon-play};
 
-    content: '';
-    display: block;
-    height: 1rem;
-    width: 1rem;
+    border-radius: 50% !important;
     position: absolute;
-    top: calc(50% - 0.5rem);
-    left: calc(50% - 0.4rem);
-    z-index: 5;
-    background: var(--colour-primary-theme);
-    mask-image: var(--icon);
-    mask-size: 80%;
-    mask-repeat: no-repeat;
-    mask-position: 50% 50%;
-    -webkit-mask-image: var(--icon);
-    -webkit-mask-size: 80%;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: 50% 50%;
+    top: 50%;
+    left: 50%;
+    z-index: 3;
+    background-color: var(--colour-success);
+    border: 1px solid var(--colour-success);
   }
 
-  &:is(:hover, :focus) {
-    --video-btn-colour: var(--colour-canvas);
+
+  
+  &:is(:hover, :focus):not(:active) {
+    &:after {
+
+      background-color: var(--colour-white);
+      border-color: var(--colour-white);
+    }
   }
   &:is(:active) {
-    --video-btn-colour: color-mix(in oklab, var(--colour-success), #000000 20%) !important;
+    
+    &:after {
+
+      filter: brightness(85%);
+    }
   }
 }
 

package/assets/sass/foundations/animations.scss

@@ -1,2 +1,2 @@
 
-@keyframes spin {to{transform: rotate(1turn)}}
+@keyframes spin {to{rotate: 1turn}}

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

@@ -62,14 +62,14 @@ class iamModal extends HTMLElement {
     document.addEventListener('click', (e) => {
       
       if(e.target.matches(`[command="show-modal"][commandfor="${id}"]`) || e.target.matches(`[data-modal="${id}"]`)){
-        openModal(id, this);
+        openModal(this);
       }
     });
 
     document.addEventListener('click', (e) => {
       
       if(e.target.matches(`[command="close"][commandfor="${id}"]`)){
-        closeModal(id, this);
+        closeModal(this);
       }
     });
     

package/assets/ts/components/tabs/tabs.component.ts

@@ -45,6 +45,25 @@ class iamTabs extends HTMLElement {
     this.shadowRoot.querySelector('.tabs').setAttribute('class', `tabs ${classList}`);
 
     tabs(this);
+
+    // #region Allow togle tags to control the tabs
+    Array.from(this.querySelectorAll('details[id]')).forEach((details) => {
+      const detailsID = details.getAttribute('id');
+
+      Array.from(document.querySelectorAll(`[command="show-tab"][commandfor="${detailsID}"]`)).forEach((radioField) => {
+
+        radioField.closest('label').addEventListener('click', (e) => {
+        
+          details.setAttribute('open','open');
+
+          Array.from(document.querySelectorAll(`input[type="radio"][command="show-tab"][commandfor="${detailsID}"]`)).forEach((input) => {
+
+            input.checked = true;
+          });
+        });
+      });
+    });
+    // #endregion
   }
 }
 

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

@@ -0,0 +1,74 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+import { videoHTML, loadYouTubeScripts, createYoutTubeVideo, openYoutubeVideo, openVimeoVideo } from '../../modules/videos';
+
+trackComponentRegistered('iam-video-modal');
+
+class iamVideo 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/video.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = /*HTML*/`
+    <style>
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    
+    ${loadCSS}
+    </style>
+
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous" />
+    ${videoHTML}
+    `;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+
+  async connectedCallback(): void {
+    
+    const id = this.getAttribute('id');
+    const button = this.shadowRoot?.querySelector('button');
+    const videoWrapper = this.shadowRoot?.querySelector('.video-wrapper');
+    const img = this.shadowRoot.querySelector('img');
+
+    this.innerHTML = `<div class="embed" slot="video"></div>`;
+    const embed = this.querySelector('.embed');
+
+
+    videoWrapper.tabIndex = 6;
+    button?.tabIndex = -1;
+
+    if(this.hasAttribute('data-youtube')){
+      
+      const youtubeId = this.getAttribute('data-youtube');
+      img.setAttribute('src',`http://img.youtube.com/vi/${youtubeId}/hqdefault.jpg`);
+    
+      videoWrapper.addEventListener('click', async (e) => {
+
+        embed?.setAttribute('id',youtubeId);
+        openYoutubeVideo(this);
+        button?.remove();
+        img?.remove();
+      });
+    }
+    else if(this.hasAttribute('data-vimeo')){
+
+      const vimeoId = this.getAttribute('data-vimeo');
+
+      img.setAttribute('src',`https://vumbnail.com/${vimeoId}.jpg`);
+      
+      videoWrapper.addEventListener('click', async (e) => {
+        openVimeoVideo(this);
+        button?.remove();
+        img?.remove();
+      });
+    }
+  }
+}
+
+export default iamVideo;

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']);
   }