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

package/assets/sass/components/tabs.config.scss

@@ -11,6 +11,10 @@
 iam-tabs {
   --colour-tab-underline: var(--colour-info);
 
+  details[open] {
+    padding-top: 2rem;
+  }
+
   details:not([open]) {
     padding-bottom: 0;
   }
@@ -65,7 +69,7 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
 
   .tabs__links__wrapper {
     position: relative;
-    margin: 0 auto 2rem;
+    margin: 0 auto;
 
     &:after {
       content: '';

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/advanced-select/advanced-select.component.ts

@@ -49,6 +49,8 @@ class iamAdvancedSelect extends HTMLElement {
     if (!inputField) return;
 
     const displayInputField = inputField.cloneNode() as HTMLInputElement;
+    displayInputField.value = '';
+    displayInputField.removeAttribute('value');
     displayInputField.setAttribute('name', `${inputField.getAttribute('name')}Alt`);
     inputField.removeAttribute('data-change-events');
     displayInputField.removeAttribute('id');
@@ -68,30 +70,46 @@ class iamAdvancedSelect extends HTMLElement {
       searchWrapper.appendChild(datalist);
 
       displayInputField.setAttribute('list', listID);
+    } else {
+      displayInputField.setAttribute('list', datalist.id);
     }
 
-    if(datalist.querySelector(`[value="${inputField.value}"]`))
+    if (datalist && datalist.querySelector(`[value="${inputField.value}"]`)) {
       datalist.querySelector(`[value="${inputField.value}"]`)?.classList.add('active');
+    }
 
     advancedSelect(this, displayInputField, datalist);
 
-    // Apply initial value passed to the component host
-    const initialValue = this.getAttribute('value') || '';
-    if (!initialValue) return;
+    // Apply initial value passed to the component host or original input
+    const initialValue = this.getAttribute('value') || inputField.value || '';
+
+    if (!initialValue)
+      return;
 
     inputField.value = initialValue;
     inputField.setAttribute('value', initialValue);
 
-    displayInputField.value = '';
-    displayInputField.setAttribute('placeholder', initialValue);
-    displayInputField.setAttribute('data-value', initialValue);
+    let displayValue = initialValue;
 
     if (datalist) {
+      const selectedOption = Array.from(datalist.querySelectorAll('option')).find((option) => {
+        return option.getAttribute('value') === initialValue;
+      }) as HTMLOptionElement | undefined;
+
+      if (selectedOption) {
+        displayValue = selectedOption.textContent?.trim() || selectedOption.value;
+      }
+
       Array.from(datalist.querySelectorAll('option')).forEach((option) => {
         const isMatch = option.getAttribute('value') === initialValue;
         option.classList.toggle('active', isMatch);
       });
     }
+
+    displayInputField.value = displayValue;
+    displayInputField.setAttribute('placeholder', displayValue);
+    displayInputField.setAttribute('data-value', displayValue);
+    displayInputField.removeAttribute('value');
   }
 }
 

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;