@iamproperty/components 7.7.1--beta20 → 7.7.1--beta22

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

@@ -0,0 +1,101 @@
+@use '../elements/buttons--global';
+@use '../elements/buttons--tertiary';
+
+@layer components {
+
+
+  :host {
+    
+
+    padding: 1.5rem;
+    border-radius: 0.5rem;
+    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
+
+    margin-bottom: 2rem;
+    position: relative;
+    overflow: hidden;
+  }
+
+  :host(:not([class*="bg-"])) {
+
+    --colour-heading: var(--colour-primary-theme);
+    --colour-body: var(--colour-primary-theme);
+    color: var(--colour-primary-theme);
+    
+    color-scheme: light!important;
+    
+
+    background-color: var(--colour-canvas-2)!important;
+    color: var(--colour-primary-theme)!important;
+  }
+
+  :host(:is(.bg-primary, .bg-danger, .bg-dark, .gradient-primary)) {
+        
+    --colour-heading: var(--colour-white);
+    --colour-body: var(--colour-white);
+    color: var(--colour-white);
+
+    & > * {
+      
+      color-scheme: dark;
+    }
+  }
+    
+  .banner__img,
+  #dismiss {
+    display: none;
+  }
+
+  .banner__btns {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+
+    .btn {
+      margin: 0!important;
+    }
+  }
+
+  :host([data-dismiss]) #dismiss {
+    display: block;
+  }
+
+  ::slotted(*:not([slot="buttons"],hr)) {
+    margin: 0!important;
+    padding-bottom: 1rem!important;
+  }
+
+  ::slotted([slot="buttons"]){
+    margin: 0!important;
+  }
+
+  ::slotted(:is(h2,h3,h4,h5,h6)){
+    
+    font-size: var(--h4-fs)!important;
+    line-height: var(--h4-lh)!important;
+    max-width: var(--content-max-width)!important;
+  }
+
+  :host([data-image]){
+
+    .wrapper {
+      padding-right: 50%;
+    }
+
+    .banner__img {
+      display: block;
+      position: absolute;
+      inset: 0;
+      left: 60%;
+
+      img {
+        position: absolute;
+        inset: 0;
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+}

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

@@ -188,7 +188,7 @@ slot[name='secondary'] {
 /* #endregion */
 
 /* #region link */
-slot[name="link"] {
+:host(.hasLink) slot[name="link"] {
 
   position: absolute;
   display: block;

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

@@ -223,7 +223,7 @@
   /* #endregion */
 
   /* #region count the number of items and set variables to hide the controls/markers */
-  iam-carousel:has(> *:first-child:last-child) {
+  iam-carousel:has(> *:not(.carousel__controls):first-child + .carousel__controls) {
     
     --hide-buttons: 1;
     --hide-markers: 1;
@@ -231,8 +231,8 @@
   
   iam-carousel {
     
-    @container (min-width: 36em) {
-      &[data-smcols='2']:not(:has(> *:nth-child(3))) {
+    @container (min-width: 30em) { /* TODO work out this number - shoule be 6 columns */
+      &[data-smcols='2']:not(:has(> *:not(.carousel__controls):nth-child(3))) {
 
         --hide-buttons: 1;
         --hide-markers: 1;
@@ -241,7 +241,7 @@
         --marker-height: 0rem;
         --marker-mb: 0rem;
       }
-      &[data-smcols='3']:not(:has(> *:nth-child(4))) {
+      &[data-smcols='3']:not(:has(> *:not(.carousel__controls):nth-child(4))) {
 
         --hide-buttons: 1;
         --hide-markers: 1;
@@ -253,7 +253,7 @@
     }
 
     @container (min-width: 62em) {
-      &[data-mdcols='2']:not(:has(> *:nth-child(3))) {
+      &[data-mdcols='2']:not(:has(> *:not(.carousel__controls):nth-child(3))) {
 
         --hide-buttons: 1;
         --hide-markers: 1;
@@ -262,7 +262,7 @@
         --marker-height: 0rem;
         --marker-mb: 0rem;
       }
-      &[data-mdcols='3']:not(:has(> *:nth-child(4))) {
+      &[data-mdcols='3']:not(:has(> *:not(.carousel__controls):nth-child(4))) {
 
         --hide-buttons: 1;
         --hide-markers: 1;
@@ -278,7 +278,16 @@
   /* #region change the item count via queries */
   iam-carousel {
     
-    @container (min-width: 36em) {
+    &[data-xscols='2'] {
+
+      --count: 2;
+    }
+    &[data-xscols='3'] {
+
+      --count: 3;
+    }
+
+    @container (min-width: 30em) {
       &[data-smcols='2'] {
 
         --count: 2;
@@ -319,17 +328,17 @@
 
       @container not scroll-state(snapped: x) {
         
-        --opacity: 0;
+        //--opacity: 0;
       }
       
       @container style(--count: 2) {
 
-        &:nth-child(2n - 1) {
+        &:not(.carousel__controls):nth-child(2n - 1) {
           scroll-snap-align: start;
           scroll-snap-stop: always;
         }
 
-        &:nth-child(2n - 1)::scroll-marker{
+        &:not(.carousel__controls):nth-child(2n - 1)::scroll-marker{
 
           display: block;
         }
@@ -337,12 +346,12 @@
 
       @container style(--count: 3) {
 
-        &:nth-child(3n - 2) {
+        &:not(.carousel__controls):nth-child(3n - 2) {
           scroll-snap-align: start;
           scroll-snap-stop: always;
         }
 
-        &:nth-child(3n - 2)::scroll-marker{
+        &:not(.carousel__controls):nth-child(3n - 2)::scroll-marker{
 
           display: block;
         }
@@ -536,7 +545,7 @@
       display: block;
     }
 
-    @container (min-width: 36em) {
+    @container (min-width: 30em) {
 
       .carousel__progress-xs {
         display: none;
@@ -561,7 +570,7 @@
   @supports selector(::scroll-marker-group) {
     
 
-    @container (max-width: 36em) {
+    @container (max-width: 30em) {
       iam-carousel:has(> *:nth-child(5)){
         
         --button-height: 0rem;
@@ -578,7 +587,7 @@
       }
     }
 
-    @container (min-width: 36em) {
+    @container (min-width: 30em) {
 
       .carousel__progress {
         display: none;

package/assets/sass/components/fileupload.scss

@@ -2,6 +2,7 @@
 @use '../_func' as *;
 @use '../elements/forms' as *;
 @use '../elements/buttons' as *;
+@use '../elements/type' as *;
 
 @use '../utilities/display' as *;
 
@@ -47,9 +48,15 @@ hr {
 
   .helper-text {
     max-width: 16.875rem; /* (270); */
+    padding-bottom: 2rem;
   }
 }
 
+:host(.fileupload--hide-title) .file-upload .file-upload__title{
+
+  display: none!important;
+}
+
 .files {
   span {
     display: block;

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

@@ -1,2 +1,47 @@
 
-@use 'advanced-select.component';
+@use 'advanced-select.component';
+
+@layer components {
+  :host(.search--stylised) ::slotted(input) {
+    
+    outline: 1px solid var(--colour-border)!important;
+  
+    border: none!important;
+    border-radius: 1.5rem!important; /* 24px */
+    padding-left: 3rem!important; /* Magic number */
+    background-color: var(--colour-canvas);
+  }
+  :host(.search--stylised) ::slotted(input.input--sm) {
+    
+    padding-left: 2.5rem!important; /* Magic number */
+  }
+
+  :host(.search--stylised) ::slotted(input:is(:focus)) {
+    
+    outline: 1px solid var(--colour-info)!important;
+  }
+
+  :host(.search--stylised) ::slotted(button) {
+    
+
+    background: transparent!important;
+    border-color: transparent!important;
+    color: var(--colour-heading)!important;
+    position: absolute!important;
+    top: 0;
+    left: 0;
+  }
+
+  :host(.hasInputSm) ::slotted(button) {
+
+    min-width: 2.5rem!important;
+  }
+
+  :host(.search--stylised) .clear-search {
+
+    border-radius: 50% !important;
+    outline: none !important;
+    border: none !important;
+  }
+
+}

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

@@ -1,6 +1,7 @@
 @use '../_func' as *;
 @use '../elements/links';
 @use '../elements/buttons';
+@use '../elements/badge-tag';
 @use '../components/tabs.config';
 
 

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

@@ -256,3 +256,24 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
     width: 100%;
   }
 }
+
+
+/* #region tabs - toggle tags */
+
+.tabs--toggle-tags {
+  .tabs__links {
+
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 1px;
+
+    -webkit-mask-image: unset!important;
+    mask-image: unset!important;
+  }
+}
+
+.tabs--toggle-tags .tabs__links__wrapper:after {
+  display: none!important;
+}
+
+/* #endregion */

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

@@ -91,12 +91,12 @@
     }
 
     &:has(input:checked),
-    &.selected {
+    &.selected,
+    &[aria-pressed='true'] {
       background: #e9f9fd!important;
       outline: 1px solid #1ebee6!important;
     }
   }
-
   /* Quick fix for badges in buttons */
   .btn :is(.badge, .tag) {
     position: relative;

package/assets/sass/elements/dropdown.css

@@ -95,11 +95,6 @@
     top: 100%;
     left: 0;
 
-    
-    &:empty {
-      display: block !important;
-    }
-
     &:empty:before {
       content: "No results found"; /* TODO Allow for text to be overwritten */
       background-color: white;

package/assets/sass/utilities/shadow.css

@@ -3,5 +3,9 @@
   .shadow-none {
     box-shadow: none!important;
   }
+  .box-shadow {
+    
+    box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
+  }
 }
 /* #endregion */

package/assets/sass/utilities/text.css

@@ -8,27 +8,27 @@
   }
 
   .fs-1 {
-    font-size: rfs-fluid-value(2.5rem) !important;
+    font-size: 2.5rem !important;
   }
 
   .fs-2 {
-    font-size: rfs-fluid-value(2rem) !important;
+    font-size: 2rem !important;
   }
 
   .fs-3 {
-    font-size: rfs-fluid-value(1.75rem) !important;
+    font-size: 1.75rem !important;
   }
 
   .fs-4 {
-    font-size: rfs-fluid-value(1.5rem) !important;
+    font-size: 1.5rem !important;
   }
 
   .fs-5 {
-    font-size: rfs-fluid-value(1.25rem) !important;
+    font-size: 1.25rem !important;
   }
 
   .fs-6 {
-    font-size: rfs-fluid-value(1rem) !important;
+    font-size: 1rem !important;
   }
 
   .fst-italic {

package/assets/ts/components/banner/banner.component.ts

@@ -0,0 +1,57 @@
+// Data layer Web component created
+declare global {
+  interface Window {
+    dataLayer: Array<object>;
+  }
+}
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  event: 'customElementRegistered',
+  element: 'banner',
+});
+
+class iamBentoGrid 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/banner.component.css";`;
+    
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${loadCSS}
+    </style>
+    <div class="wrapper">
+      <slot></slot>
+      <div class="banner__btns"><slot name="buttons"></slot><button class="btn btn-tertiary" id="dismiss">Dismiss</button></div>
+      
+    </div>
+    <div class="banner__img">
+      <picture>
+        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" lazy="" />
+      </picture>
+    </div>
+    `;
+    this.shadowRoot?.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+
+    const dismissBtn = this.shadowRoot?.querySelector('#dismiss');
+    const bgImg = this.shadowRoot?.querySelector('.banner__img img');
+
+    dismissBtn?.addEventListener('click',() => {
+
+      this.remove();
+    });
+
+    if(this.hasAttribute('data-image'))
+      bgImg?.setAttribute('src',this.getAttribute('data-image'));
+  }
+}
+
+export default iamBentoGrid;

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

@@ -161,6 +161,10 @@ class iamCard extends HTMLElement {
       });
     });
 
+
+    if(this.querySelector('[slot="link"]'))
+      this.classList.add('hasLink');
+
     trackComponent(cardComponent, 'iam-card', [
       'select-card',
       'unselect-card',

package/assets/ts/components/content/content.component.ts

@@ -27,7 +27,7 @@ class iamContent extends HTMLElement {
 
     if(this.hasAttribute('data-title-tag')){
 
-      return `<${this.getAttribute('data-title-tag')} class="${this.getAttribute('data-title-class')}">${title}</${this.getAttribute('data-title-tag')}>`;
+      return `<${this.getAttribute('data-title-tag')} class="${this.getAttribute('data-title-class')} iam-content--title">${title}</${this.getAttribute('data-title-tag')}>`;
     }
 
     return '';
@@ -83,7 +83,7 @@ class iamContent extends HTMLElement {
     const addTitle = this.addTitle;
 
     const registerComponents = (contentComponent): void => {
-      const components = ['carousel', 'card', 'marketing', 'notification'];
+      const components = ['skeleton','bone','carousel', 'card', 'banner', 'notification'];
 
       const assetLocation = document.body.hasAttribute('data-assets-location')
         ? document.body.getAttribute('data-assets-location')
@@ -123,23 +123,31 @@ class iamContent extends HTMLElement {
           if(Array.isArray(response))
             response = response[0];
 
-          component.insertAdjacentHTML('beforebegin',addTitle(response.title.rendered));
+          const renderedContent = response.content.rendered.replaceAll(/<p>\[(.*)\]<\/p>/g, "<span data-shortcode=\"$1\"><iam-skeleton><iam-bone class=\"search\"></iam-bone></iam-skeleton></span>");
+
+
           
+          component.parentElement?.querySelector('.iam-content--title')?.remove();
+          component.insertAdjacentHTML('beforebegin',addTitle(response.title.rendered));
+
+
 
           if(transform){
           
-            component.innerHTML = `<${transform} ${elementAttributes}>${response.content.rendered}</${transform}>`;  
+            component.innerHTML = `<${transform} ${elementAttributes}>${renderedContent}</${transform}>`;  
             component.removeAttribute('class');
           }
           else {
             
-            component.innerHTML = `${response.content.rendered}`;
-            console.log(response.content);
+            component.innerHTML = `${renderedContent}`;
           }
             
           fixContent(component);
           registerComponents(component);
           transformButtons(component);
+
+          const changeEvent = new CustomEvent('loaded', { detail: {triggered: true} });
+          component?.dispatchEvent(changeEvent);
         }
       };
 

package/assets/ts/components/search/search.component.ts

@@ -37,6 +37,9 @@ class iamSearch extends HTMLElement {
     // Make the datalist a dropdown
     this.classList.add('dropdown__wrapper');
 
+    if(this.querySelector('input.input--sm'))
+      this.classList.add('hasInputSm');
+
     
     if(this.querySelector('label'))
       this.classList.add('has-label');
@@ -79,7 +82,7 @@ class iamSearch extends HTMLElement {
     advancedSelect(this, displayInputField, datalist, false);
 
 
-    function checkMatch(): void {
+    const checkMatch = (): void => {
       const match = datalist.querySelector(`option[value="${displayInputField.value}" i]`);
       const subMatch = datalist.querySelector(`option[value*="${displayInputField.value}" i]`);
 
@@ -105,6 +108,9 @@ class iamSearch extends HTMLElement {
     
     const search = async (searchterm): any => {
       
+      if(!this.getAttribute('data-url'))
+        return false;
+
       let ajaxURL = this.getAttribute('data-url');
       ajaxURL += `${encodeURI(searchterm)}`;
 

package/assets/ts/modules/tabs.ts

@@ -45,7 +45,15 @@ export const createTabsLinks = function (tabsElement: Element): void {
         button.setAttribute('aria-pressed', true);
       }
       button.innerHTML = `${summary.innerText}`;
-      button.classList.add('link');
+      
+      if(tabsElement.classList.contains('tabs--toggle-tags')){
+        
+        button.classList.add('tag');
+        button.classList.add('tag--toggle');
+      }
+      else
+        button.classList.add('link');
+
       button.setAttribute('data-index', tabindex);
       button.setAttribute('part', 'tab-link');
 
@@ -64,7 +72,7 @@ export const createTabsLinks = function (tabsElement: Element): void {
       button = element;
     }
 
-    button.classList.add('link');
+    
     tabLinks.appendChild(button);
 
     tabDropdown.appendChild(dropdownOpt);