@iamproperty/components 7.2.2--beta2 → 7.2.2--beta3

package/assets/sass/elements/links.scss

@@ -58,7 +58,7 @@ $darkMode: 'true' !default;
     position: relative;
     font-weight: bold;
 
-    &:not(.text-decoration-none) {
+    &:not(.text-decoration-none)  {
       &:after {
         position: absolute;
         content: '';
@@ -159,3 +159,51 @@ $darkMode: 'true' !default;
 
   // #endregion
 }
+
+:is(.youtube-link[data-youtube], .vimeo-link[data-vimeo]){
+
+  position: relative;
+
+  &:before {
+    content: '';
+    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;
+  }
+
+  &: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;
+    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%;
+  }
+
+  &:is(:hover, :focus) {
+    --video-btn-colour: var(--colour-canvas);
+  }
+  &:is(:active) {
+    --video-btn-colour: color-mix(in oklab, var(--colour-success), #000000 20%) !important;
+  }
+}

package/assets/sass/elements/toggle-button.scss

@@ -0,0 +1,55 @@
+@use '../_func' as *;
+
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@include layer('elements', $layers) {
+
+// #region toggle
+  .toggle {
+    --outline-width: 0.25rem!important;
+    padding-left: 3.25rem !important;
+  }
+
+  .toggle:before {
+    border-radius: 2rem !important;
+    background-color: var(--colour-canvas) !important;
+    border: 2px solid var(--colour-heading) !important;
+    transition: 0.4s !important;
+    width: 2.5rem !important;
+    left: 0.25rem !important;
+  }
+
+  label.toggle:has(:is(input[type='checkbox'],input[type="radio"]):not([disabled]):checked):before {
+    background: var(--colour-primary-theme) !important;
+  }
+
+  .toggle:after {
+    position: absolute !important;
+    content: '' !important;
+    display: block!important;
+    top: 0.5rem !important;
+    height: 1em !important;
+    width: 1em !important;
+    left: 0.25em !important;
+    background-color: var(--colour-heading) !important;
+    -webkit-transition: 0.4s !important;
+    transition: 0.4s !important;
+    margin: 0.25em !important;
+    border-radius: 0.5em;
+  }
+
+  label.toggle:has(:is(input[type='checkbox'],input[type='radio']):not([disabled]):not([disabled]):checked):after {
+    background: var(--colour-primary-theme) !important;
+    background-color: white !important;
+    -webkit-transform: translateX(1rem) !important;
+    -ms-transform: translateX(1rem) !important;
+    transform: translateX(1rem) !important;
+  }
+  // #endregion
+
+  label.toggle:has(+ label.toggle) {
+    margin-bottom: 0!important;
+  }
+}

package/assets/sass/elements/type.scss

@@ -17,19 +17,18 @@ $darkMode: 'true' !default;
   // #region headings
 
   %heading {
-    --line-height: #{$headings-line-height};
-    // From bootstrap reboot
+
     margin-top: 0; // 1
-    margin-bottom: $headings-margin-bottom;
+    margin-bottom: 0;
     font-family: $headings-font-family;
     font-style: $headings-font-style;
     font-weight: bold;
-    line-height: var(--line-height);
+
+    line-height: round(calc(1em * var(--type-scale)),0.25rem);
+    padding-bottom: round(calc(1em * var(--type-scale)),0.25rem);
     color: $headings-color;
-    // END:Bootstap reboot
     clear: both;
     display: block;
-    padding-bottom: 2rem;
 
     [class*='fa-'] {
       margin-right: 0.5rem;
@@ -41,60 +40,31 @@ $darkMode: 'true' !default;
   }
 
   :is(.h1, h1) {
-    --line-height: #{rem(map.get($heading-sizes, 'h1_lh'))};
 
-    font-size: rem(map.get($heading-sizes, 'h1_fs'));
-    padding-bottom: rem(map.get($heading-sizes, 'h1_pb'));
+    font-size: map.get($heading-sizes, 'h1_fs');
     font-weight: 900;
-
-    @include media-breakpoint-up(sm, $mobileOnly) {
-      font-size: rem(map.get($heading-sizes, 'h1_fs_sm'));
-      --line-height: #{rem(map.get($heading-sizes, 'h1_lh_sm'))};
-      padding-bottom: rem(map.get($heading-sizes, 'h1_pb_sm'));
-    }
   }
 
+
   :is(h2, .h2) {
-    font-size: rem(map.get($heading-sizes, 'h2_fs'));
-    --line-height: #{rem(map.get($heading-sizes, 'h2_lh'))};
-    padding-bottom: rem(map.get($heading-sizes, 'h1_pb'));
+    font-size: map.get($heading-sizes, 'h2_fs');
     font-weight: 900;
-
-    @include media-breakpoint-up(sm, $mobileOnly) {
-      font-size: rem(map.get($heading-sizes, 'h2_fs_sm'));
-      --line-height: #{rem(map.get($heading-sizes, 'h2_lh_sm'))};
-      padding-bottom: rem(map.get($heading-sizes, 'h2_pb_sm'));
-    }
   }
 
   :is(h3, .h3) {
-    font-size: rem(map.get($heading-sizes, 'h3_fs'));
-    --line-height: #{rem(map.get($heading-sizes, 'h3_lh'))};
-    padding-bottom: rem(map.get($heading-sizes, 'h3_pb'));
+    font-size: map.get($heading-sizes, 'h3_fs');
     max-width: var(--content-max-width);
-    font-weight: 900;
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
-      font-size: rem(map.get($heading-sizes, 'h3_fs_sm'));
-      --line-height: #{rem(map.get($heading-sizes, 'h3_lh_sm'))};
-      padding-bottom: rem(map.get($heading-sizes, 'h3_pb_sm'));
-    }
+    line-height: round(calc(1em * var(--type-scale)),0.25rem);
+    padding-bottom: round(calc(1em * var(--type-scale)),0.25rem);
   }
 
   :is(.h4, h4, .h5, h5, .h6, h6) {
-    font-size: rem(map.get($heading-sizes, 'h4_fs'));
-    --line-height: #{rem(map.get($heading-sizes, 'h4_lh'))};
-    padding-bottom: rem(map.get($heading-sizes, 'h4_pb'));
+    font-size: map.get($heading-sizes, 'h4_fs');
     max-width: var(--content-max-width);
-
-    /* The values for mobile and tablet are exactly the same, but if that changes this block needs to be re-instated 
-  @include media-breakpoint-up(sm,$mobileOnly) {
-
-    font-size: rem(map.get($heading-sizes,"h4_fs_sm"));
-    line-height: rem(map.get($heading-sizes,"h4_lh_sm"));
-    padding-bottom: rem(map.get($heading-sizes,"h4_pb_sm"));
-  }
-  */
+    
+    line-height: round(calc(1em * var(--type-scale)),0.25rem);
+    padding-bottom: round(calc(1em * var(--type-scale)),0.25rem);
   }
   // #endregion
 
@@ -125,7 +95,6 @@ $darkMode: 'true' !default;
     line-height: rem(map.get($heading-sizes, 'small_lh'));
     padding-bottom: rem(map.get($heading-sizes, 'small_pb'));
     max-width: var(--content-max-width);
-    font-family: arial, sans-serif;
     font-weight: normal;
   }
 

package/assets/sass/error.scss

@@ -20,17 +20,11 @@
 
 @include layer('elements') {
   .h1 {
-    --line-height: #{rem(map.get($heading-sizes, 'h1_lh'))};
+    --line-height: #{map.get($heading-sizes, 'h1_lh')};
 
-    font-size: rem(map.get($heading-sizes, 'h1_fs'));
-    padding-bottom: rem(map.get($heading-sizes, 'h1_pb'));
+    font-size: map.get($heading-sizes, 'h1_fs');
+    padding-bottom: map.get($heading-sizes, 'h1_pb');
     font-weight: 900;
-
-    @include media-breakpoint-up(sm, $mobileOnly) {
-      font-size: rem(map.get($heading-sizes, 'h1_fs_sm'));
-      --line-height: #{rem(map.get($heading-sizes, 'h1_lh_sm'))};
-      padding-bottom: rem(map.get($heading-sizes, 'h1_pb_sm'));
-    }
   }
 }
 

package/assets/sass/templates/form.scss

@@ -31,16 +31,12 @@ $darkMode: 'true' !default;
 
     // Make H2's look like H3's
     :is(h2, .h2) {
-      font-size: rem(map.get($heading-sizes, 'h3_fs'));
-      line-height: rem(map.get($heading-sizes, 'h3_lh'));
-      padding-bottom: rem(map.get($heading-sizes, 'h3_pb'));
+      font-size: map.get($heading-sizes, 'h3_fs');
+      line-height: map.get($heading-sizes, 'h3_lh');
+      padding-bottom: map.get($heading-sizes, 'h3_pb');
       max-width: var(--content-max-width);
 
-      @include media-breakpoint-up(sm, $mobileOnly) {
-        font-size: rem(map.get($heading-sizes, 'h3_fs_sm'));
-        line-height: rem(map.get($heading-sizes, 'h3_lh_sm'));
-        padding-bottom: rem(map.get($heading-sizes, 'h3_pb_sm'));
-      }
+
     }
 
     @include light-mode($darkMode) {

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

package/assets/ts/modules/videos.ts

@@ -0,0 +1,194 @@
+const videoSupport = async(body): void => {
+
+if (document.querySelector('.youtube-link[data-youtube]') && !document.body.classList.contains('youtubeLoaded')) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const loaded = await loadYouTubeScripts();
+}
+setTimeout(async() => {
+  
+  if (document.querySelector('.youtube-link[data-youtube]') && !document.body.classList.contains('youtubeLoaded')) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const loaded = await loadYouTubeScripts();
+  }
+}, "2000");
+
+
+  body.addEventListener('click', async(event) => {
+
+    let target = (event.target as HTMLElement).closest<HTMLElement>('.youtube-link[data-youtube]');
+
+    if(!target){
+      target = (event.target as HTMLElement).closest<HTMLElement>('.vimeo-link[data-vimeo]');
+    }
+      
+
+    if(target && target.hasAttribute('data-youtube')){
+
+
+      event.preventDefault();
+
+      if (!document.body.classList.contains('youtubeLoaded')) {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const loaded = await loadYouTubeScripts();
+      }
+
+      const link_id = 'youtube-' + target.getAttribute('data-youtube');
+        
+      if (!document.getElementById(`${link_id}-dialog`)) {
+        document.body.insertAdjacentHTML(
+          'beforeend',
+          `<dialog id="${link_id}-dialog"><div class="embed" id="${link_id}"></div></dialog>`
+        );
+      }
+
+      const dialog = document.getElementById(`${link_id}-dialog`);
+      const embed = document.getElementById(link_id);
+
+      const customEvent = new CustomEvent('play-video', {
+        detail: { 'Video Type': 'YoutTube', ID: target.getAttribute('data-youtube') },
+      });
+      target.dispatchEvent(customEvent);
+      window.dataLayer.push(customEvent.detail);
+      
+      createYoutTubeVideo(embed, target.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: target.getAttribute('data-youtube') },
+        });
+        target.dispatchEvent(customEvent);
+        window.dataLayer.push(customEvent.detail);
+      });
+      
+    }
+    else if(target && target.hasAttribute('data-vimeo')){
+
+      event.preventDefault();
+
+      const link_id = 'vimeo-' + target.getAttribute('data-youtube');
+        
+      if (!document.getElementById(`${link_id}-dialog`)) {
+        document.body.insertAdjacentHTML(
+          'beforeend',
+          `<dialog id="${link_id}-dialog"><div class="embed" id="${link_id}"></div></dialog>`
+        );
+      }
+
+      const dialog = document.getElementById(`${link_id}-dialog`);
+      const embed = document.getElementById(link_id);
+
+
+      const videoId = target.getAttribute('data-vimeo');
+
+      const customEvent = new CustomEvent('play-video', {
+        detail: { 'Video Type': 'Vimeo', ID: videoId },
+      });
+      target.dispatchEvent(customEvent);
+      window.dataLayer.push(customEvent.detail);
+
+      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>`;
+
+      dialog.showModal();
+
+
+      dialog.addEventListener('close', () => {
+        embed.innerHTML = ``; // Remove the video since we cant pause it
+
+        const customEvent = new CustomEvent('close-video', {
+          detail: { 'Video Type': 'Vimeo', ID: target.getAttribute('data-vimeo') },
+        });
+        target.dispatchEvent(customEvent);
+        window.dataLayer.push(customEvent.detail);
+      });
+    }
+
+    
+  });
+
+}
+
+
+export const loadYouTubeScripts = async(): 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';
+  });
+}
+
+
+export const createYoutTubeVideo = async(target, video_id): void | boolean => {
+  if (typeof window.player == 'undefined') {
+    window.player = [];
+  }
+
+  const link_id = target.getAttribute('id');
+
+  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;
+    }
+  }
+}
+
+export default videoSupport;

package/assets/ts/scripts.ts

@@ -4,6 +4,7 @@ import extendDialogs from './modules/dialogs';
 import createDataLayer from './modules/data-layer';
 import extendInputs from './modules/inputs';
 import createDynamicEvents from './modules/dynamicEvents';
+import videoSupport from './modules/videos';
 
 const components = [
   'accordion',
@@ -39,7 +40,7 @@ const components = [
 ];
 
 // Attach classes to dom elements
-document.addEventListener('DOMContentLoaded', function () {
+document.addEventListener('DOMContentLoaded', async():void => {
   createDataLayer();
   createDynamicEvents();
 
@@ -49,6 +50,11 @@ document.addEventListener('DOMContentLoaded', function () {
 
   extendDialogs(document.body);
   extendInputs(document.body);
+
+  videoSupport(document.body);
+
+
+
   /*
   const prefix = 'iam';
   const options = {