@iamproperty/components 7.7.1--beta19 → 7.7.1--beta21

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

@@ -0,0 +1,100 @@
+@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;
+  }
+
+  :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

@@ -62,10 +62,10 @@
   iam-carousel > * {
 
     container-type: scroll-state;
-    grid-column: auto;
+    grid-column: auto!important;
     min-height: 100%;
     margin: 0;
-    scroll-snap-align: start;
+    scroll-snap-align: start!important;
   }
   /* #endregion */
 
@@ -127,7 +127,7 @@
   /* #endregion */
 
   /* #region left and right buttons on desktop */
-  iam-carousel-wrapper iam-carousel {
+  main > iam-carousel {
     
     @container (min-width: 62em) {
       
@@ -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/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/skeleton.component.scss

@@ -0,0 +1,104 @@
+@layer components {
+  
+  ::slotted(.heading) {
+    
+    --bone-height: var(--h2-fs);
+  }
+
+  /* #region Cards */
+  :host(.hasCard) {
+    display: flex;
+    column-gap: 1rem;
+    flex-direction: column;
+  }
+
+  @container (min-width: 36em) {
+    :host(.hasCard) {
+
+      flex-direction: row;
+    }
+  }
+
+  ::slotted(.card) {
+
+    background-color: var(--colour-light)!important;
+    height: unset!important;
+    min-height: unset!important;
+    aspect-ratio: 1.2/1;
+    border: 1px solid var(--colour-border);
+    display: flex!important;
+    padding: 1rem 0.75rem;
+    flex-direction: column;
+    justify-content: flex-end;
+
+    &:before {
+      
+      margin-bottom: 0.75rem;
+    }
+    &:before,
+    &:after {
+      content: "";
+      display: block;
+      background-color: #D9D9D9; /* TODO: needs to be a variable */
+      display: block;
+      width: auto;
+      height: var(--bone-height);
+      border-radius: 0.5rem;
+    }
+  }
+  /* #endregion */
+
+  /* search */
+  ::slotted(.search) {
+
+    background-color: var(--colour-white)!important;
+    height: 3rem!important;
+    min-height: 3rem!important;
+    border: 1px solid var(--colour-border)!important;
+    border-radius: 1.5rem!important;
+  }
+
+  /* buttons */
+  ::slotted(.btn) {
+    min-width: 19rem!important; /* 304px*/
+    width: 19rem!important; /* 304px*/
+    //min-height: calc(var(--btn-line-height) + var(--btn-padding-block) + var(--btn-padding-block))!important;
+  }
+
+  ::slotted(:is(.btn,.badge,.tag):empty):before { 
+    content: "\00a0"; 
+    margin: 0;
+  }
+
+  :host(:is(.hasBtn, .hasBadge, .hasTag)) {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  ::slotted(:is(.badge,.tag)) {
+    min-width: 5rem!important; /* 80px */
+    width: 5rem!important; /* 80px */
+  }
+
+  ::slotted(.link) {
+    
+    min-width: 8rem!important; /* 128px */
+    width: 8rem!important; /* 128px */
+  }
+  ::slotted(.link):after {
+
+    margin-top: 0.25rem;
+  }
+
+  /* spinner */
+  :host(.hasSpinner) ::slotted(*) {
+
+    width: var(--spinner-size)!important;
+    margin-inline: auto!important;
+  }
+
+  ::slotted(.spinner){
+    
+    background-color: transparent!important;
+  }
+}

package/assets/sass/components/skeleton.global.scss

@@ -0,0 +1,27 @@
+@layer components {
+  
+  iam-skeleton {
+    --bone-height: 0.8125rem; /* 13px */;
+    --colour-heading: #D9D9D9;
+    --colour-underline: #D9D9D9;
+    container-type: inline-size;
+  }
+
+  iam-bone {
+    background-color: #D9D9D9; /* TODO: needs to be a variable */
+    border: unset;
+    display: block;
+    width: 100%;
+    min-height: var(--bone-height);
+    pointer-events: none!important;
+    margin-bottom: 1rem;
+
+    &:not(.btn,.badge,.tag){
+        
+      height: var(--bone-height);
+      border-radius: 0.5rem;
+    }
+  }
+
+  
+}

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/elements/spinner.css

@@ -0,0 +1,29 @@
+
+
+.spinner {
+
+  font-size: var(--spinner-size);
+
+  display: block;
+  margin-inline: auto;
+  position: relative;
+  width: var(--spinner-size);
+  height: var(--spinner-size);
+  color: var(--colour-heading);
+
+  &:before {
+    font-family: var(--fa-family-classic);
+    content: '\f3f4';
+    position: absolute;
+    font-weight: 900;
+    color: var(--colour-heading);
+    animation: spin 1.5s infinite steps(10);
+    font-size: 1em;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+    z-index: 1;
+
+    font-weight: normal;
+  }
+}

package/assets/sass/foundations/root.scss

@@ -236,22 +236,24 @@
     --max-height-lg: 37.5rem; /* 600px */
 
 
+    /* #region Dropdown */
     --dropdown-bg: var(--colour-canvas-2);
     --dropdown-margin-block: 0.25rem;
     --dropdown-padding: 0.5rem;
     --dropdown-border-radius: 0.5rem;
     --dropdown-box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
-
     --option-border-radius: 0.25rem;
-
---option-color: var(--colour-primary);
-    
+    --option-color: var(--colour-primary);
     --option-bg-hover: var(--colour-light);
     --option-padding: 0.5rem;
     --option-color-hover: #595959; /* Magic number */
     --option-bg-active: hsl(from var(--colour-info) h s l / 10%);
-    
     --option-border-left-active: 4px solid var(--colour-info);
+    /* #endregion */
+
+    /* #region Spinner */
+    --spinner-size: 7rem; /* 112px */
+    /* #endregion */
 
     /*  Add in media query based updates to the global vars like updating the heading 1 font size */
     @media screen and (min-width: 36em) {

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

@@ -0,0 +1,25 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+
+trackComponentRegistered('iam-bone');
+
+class iamBone extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <div class="wrapper">
+      <slot></slot>
+    </div>
+    `;
+    this.shadowRoot?.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    console.log('bone');
+  }
+}
+
+
+export default iamBone;

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',