@iamproperty/components 7.7.1--beta15 → 7.7.1--beta17

package/assets/sass/{_grid.scss → utilities/grid.scss}

@@ -1,6 +1,11 @@
 @use 'sass:math';
 @use 'sass:map';
-@use '_func' as *;
+
+@use 'sass:meta';
+@use 'sass:list';
+@use 'sass:string';
+
+
 
 $columns: 12;
 $rows-per-page: 20;
@@ -123,83 +128,7 @@ $breakpoints: (
 }
 /* #endregion */
 
-@layer reset {
-  /* #region Main grid setup */
-  body {
-    --excess-space: calc((100% - var(--max-width)) / 2);
-    --col-size: calc(
-      (
-          100% - max(0%, var(--excess-space)) - max(0%, var(--excess-space)) - var(--gutter) - var(--gutter) - (var(--gap) * (#{$columns - 1}))
-        ) / #{$columns}
-    );
-    column-gap: var(--gap);
-    display: grid;
-    margin-inline: 0;
-    width: 100%;
-    grid-template-rows: auto;
-    align-content: start;
-    justify-content: center;
-
-    $templateColumns: '';
-
-    @for $i from 1 to $columns {
-      $templateColumns: $templateColumns + 'var(--col-size) [col-' + $i + '-end col-'+ ($i + 1)+'-start] ';
-    }
-    grid-template-columns:
-      [full-width-start container-start] calc(var(--gutter) - var(--gap))
-      [content-start col-1-start]
-      #{$templateColumns}
-      var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter) - var(--gap))
-      [container-end full-width-end];
-
-    @media screen and (min-width: #{em(1280 * 1.125)}) {
-      grid-template-columns:
-        [full-width-start] calc(var(--excess-space) - var(--gap))
-        [container-start] calc(var(--gutter) - var(--gap))
-        [content-start col-1-start]
-        #{$templateColumns}
-        var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter) - var(--gap))
-        [container-end] calc(var(--excess-space) - var(--gap)) [full-width-end];
-    }
-
-    & * {
-      grid-column: content;
-
-      &:where(button):not(:has(.card)) {
-        max-width: fit-content;
-        place-self: start;
-      }
-
-      &:is(div) {
-        align-content: start;
-      }
-    }
-  }
-
-  div:has(main) {
-    display: contents !important;
-  }
-
-  :is(nav, main, footer) {
-    display: grid;
-    grid-column: full-width !important;
-    grid-template-columns: subgrid;
-  }
-
-  *:not(.row) > main:not(:has(.container:last-child)):not(:has(iam-collapsible-side:last-child)) {
-    padding-bottom: 1rem;
-  }
-
-  main > :is(.full-width, [class*='bg-']:has(.container), iam-header, iam-collapsible-side, iam-notification) {
-    grid-column: full-width;
-  }
-
-  [class*='bg-']:not([class*='col-']):has(.container) {
-    display: grid;
-    grid-column: full-width;
-    grid-template-columns: subgrid;
-  }
-  /* #endregion */
+@layer utilities {
 
   /* #region Grid utility classes */
   .grid {
@@ -242,7 +171,7 @@ $breakpoints: (
   }
 
   *:not(:where(html, body)):has(
-      :is([class*='cols-'], [class*='col-start-'], [class*='col-end-'], [class*='col-span-'])
+      :is([class*='cols-'], [class*='col-start-'], [class*='col-end-'], [class*='col-span-']):not([class*='row-cols-'])
     ) {
     display: grid;
     grid-template-columns: subgrid;
@@ -293,7 +222,7 @@ $breakpoints: (
     $count: math.div($columns, $i);
 
     .cols-#{$i} > * {
-      grid-column: auto / span #{math.floor($count)};
+      grid-column: auto / span #{math.floor($count)}!important;
     }
   }
   
@@ -318,8 +247,10 @@ $breakpoints: (
 
   /* #endregion */
 
+  /* #region auto grid */
   .auto-grid {
     display: flex;
+    flex-wrap: nowrap;
     column-gap: var(--gap);
 
     > * {
@@ -350,4 +281,113 @@ $breakpoints: (
       }
     }
   }
+  /* #endregion */
+
+  /* #region Bootstrap grid */
+  .row {
+    
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: calc(-0.5 * var(--gap)); /*  stylelint-disable-line function-disallowed-list */
+    margin-left: calc(-0.5 * var(--gap)); /*  stylelint-disable-line function-disallowed-list */
+
+    > * {
+      
+      flex-shrink: 0;
+      width: 100%;
+      max-width: 100%;
+      padding-right: calc(var(--gap) * 0.5);
+      padding-left: calc(var(--gap) * 0.5);
+    }
+  }
+  
+  .col {
+    flex: 1 0 0%;
+  }
+
+  @for $i from 1 through 12 {
+    .col-#{$i} {
+      flex: 0 0 auto;
+      $width: math.div($i, 12);
+      width: math.percentage($width);
+    }
+  }
+
+  .row-cols-auto {
+
+    display: flex;
+    flex: 0 0 auto;
+    width: auto;
+
+    > * {
+      display: block!important;
+      width: 100%;
+    }
+  }
+  
+  @for $i from 1 through 4 {
+    .row-cols-#{$i} {
+      
+      display: flex;
+
+      > * {
+        display: block!important;
+        flex: 0 0 auto;
+        width: math.div(100%, $i);
+      }
+    }
+  }
+
+
+  @media screen and (min-width: 36em) {
+    
+    @for $i from 1 through 4 {
+      .row-cols-sm-#{$i} {
+        > * {
+          flex: 0 0 auto;
+          width: calc(100% / #{$i});
+        }
+      }
+    }
+    
+    .col-sm-auto {
+      flex: 0 0 auto;
+      width: auto;
+    }
+
+    @for $i from 1 through 12 {
+      .col-sm-#{$i} {
+        flex: 0 0 auto;
+        $width: math.div($i, 12);
+        width: math.percentage($width);
+      }
+    }
+  }
+
+  @media screen and (min-width: 62em) {
+    
+    @for $i from 1 through 4 {
+      .row-cols-md-#{$i} {
+        > * {
+          flex: 0 0 auto;
+          width: calc(100% / #{$i});
+        }
+      }
+    }
+    
+    .col-md-auto {
+      flex: 0 0 auto;
+      width: auto;
+    }
+
+    @for $i from 1 through 12 {
+      .col-md-#{$i} {
+        flex: 0 0 auto;
+        $width: math.div($i, 12);
+        width: math.percentage($width);
+      }
+    }
+  }
+
+  /* #endregion */
 }

package/assets/ts/components/actionbar/actionbar.component.ts

@@ -106,8 +106,10 @@ class iamActionbar extends HTMLElement {
         <div class="search-wrapper" part="search">
           <label for="search" class="visually-hidden">Input field label</label>
           <button class="suffix" part="search-btn"><i class="fa-regular fa-search"></i></button>
-          <input type="text" id="search" name="search" required="" part="search-input">
-          <button class="empty btn btn-action"><i class="fa-light fa-times me-0" aria-hidden="true"></i></button>
+          <span class="input__wrapper mt-0">
+            <input type="text" id="search" name="search" required="" part="search-input">
+            <button class="clear-search btn btn-action"><i class="fa-light fa-times me-0" aria-hidden="true"></i></button>
+          </span>
         </div>
 
       </div>
@@ -282,7 +284,7 @@ class iamActionbar extends HTMLElement {
       }
     });
 
-    const clearBtn = searchBar.querySelector('.empty');
+    const clearBtn = searchBar.querySelector('.clear-search');
     const searchInput = searchBar.querySelector('#search');
 
     clearBtn.addEventListener('click', function (e) {

package/assets/ts/components/address-lookup/address-lookup.component.ts

@@ -46,15 +46,17 @@ class iamAddressLookup extends HTMLElement {
         <div>
         <label class="mb-1"><span class="title text-lowercase"></span>
           <span>
-          <input type="text" name="postcode" class="${this.hasAttribute('data-input-class') ? this.getAttribute('data-input-class') : ''}" list="address-lookup__addressess" autocomplete="one-time-code" aria-autocomplete="none" placeholder="${this?.hasAttribute('data-placeholder') ? this?.getAttribute('data-placeholder') : 'Postcode'}" value="${this.hasAttribute('data-postcode-value') ? this.getAttribute('data-postcode-value') : ''}" part="input" />
+          <span class="input__wrapper">
+            <input type="text" name="postcode" class="${this.hasAttribute('data-input-class') ? this.getAttribute('data-input-class') : ''}" list="address-lookup__addressess" autocomplete="one-time-code" aria-autocomplete="none" placeholder="${this?.hasAttribute('data-placeholder') ? this?.getAttribute('data-placeholder') : 'Postcode'}" value="${this.hasAttribute('data-postcode-value') ? this.getAttribute('data-postcode-value') : ''}" part="input" />
+          </span>
           <button id="postcode__submit" class="suffix fa-regular fa-search" part="suffix"></button>
           </span>
         </label>
           <span class="invalid-feedback mb-2" id="invalid-feedback-address-lookup">${this.hasAttribute('data-error-msg') ? this.getAttribute('data-error-msg') : 'Required address fields'}</span>
 
-          <div class="datalist__wrapper ${this.hasAttribute('data-list-class') ? this.getAttribute('data-list-class') : ''}" tabindex="0" part="list-wrapper">
+          <div class="datalist__wrapper dropdown ${this.hasAttribute('data-list-class') ? this.getAttribute('data-list-class') : ''}" tabindex="0" part="list-wrapper">
             <slot name="beforeList"></slot>
-            <slot name="preloadedList"></slot>
+            
             <datalist id="address-lookup__addressess" class=""></datalist>
             <div id="paginationWrapper"></div>
             <slot name="afterList"></slot>
@@ -89,13 +91,15 @@ class iamAddressLookup extends HTMLElement {
   }
 
   async connectedCallback(): void {
+
+    // Make the datalist a dropdown
+    this.classList.add('dropdown__wrapper');
+
     const lookup = this.shadowRoot.querySelector('[name="postcode"]');
     const lookupWrapper = this.shadowRoot.querySelector('.postcode-lookup');
     const manualWrapper = this.shadowRoot.querySelector('.manual-address');
     const preFilledWrapper = this.shadowRoot.querySelector('.pre-filled');
-    const list = this.querySelector('datalist[slot="preloadedList"]')
-      ? this.querySelector('datalist[slot="preloadedList"]')
-      : this.shadowRoot.querySelector('.datalist__wrapper datalist');
+    const list = this.shadowRoot.querySelector('datalist');
     const listWrapper = this.shadowRoot.querySelector('.datalist__wrapper');
     const switchManualBtn = this.shadowRoot.querySelector('.switch-to-manual-btn');
     const switchLookupBtn = this.shadowRoot.querySelector('.switch-to-lookup-btn');
@@ -121,6 +125,14 @@ class iamAddressLookup extends HTMLElement {
       titleElement.innerHTML = title;
     });
 
+
+    // preload datalis
+
+    if(this.querySelector('datalist')){
+      list.innerHTML = this.querySelector('datalist').innerHTML;
+    }
+
+
     // #region functions
     function checkFilled(component): void {
       const preFilledAddress = component.shadowRoot.querySelector('.pre-filled-address');

package/assets/ts/components/advanced-select/advanced-select.component.ts

@@ -16,34 +16,26 @@ class iamAdvancedSelect extends HTMLElement {
     const assetLocation = document.body.hasAttribute('data-assets-location')
       ? document.body.getAttribute('data-assets-location')
       : '/assets';
-    const coreCSS = document.body.hasAttribute('data-core-css')
-      ? document.body.getAttribute('data-core-css')
-      : `${assetLocation}/css/core.min.css`;
+
+    const loadCSS = `@import "${assetLocation}/css/components/advanced-select.component.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${coreCSS}";
-    input {
-      background: red;
-    }
-    input:not(.is-invalid):not(:invalid) {
-      background: none!important;
-    }
-    .optional-text {
-      display: none;
-    } 
-    .js-hide {
-      display: none !important;
-    }
+    ${loadCSS}
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous" />
-    <slot></slot>
+    <span class="wrapper"><span class="input__wrapper"><slot></slot></span><span class="suffix fa-regular fa-chevron-down"></span></span>
+    <slot name="datalist"></slot>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
   connectedCallback(): void {
+
+    // Make the datalist a dropdown
+    this.classList.add('dropdown__wrapper');
+
     // Clone original input field, re-name and use for display purposes
     const inputField = this.querySelector('input') as HTMLInputElement | null;
     if (!inputField) return;
@@ -55,6 +47,9 @@ class iamAdvancedSelect extends HTMLElement {
     inputField.removeAttribute('data-change-events');
     displayInputField.removeAttribute('id');
 
+    if(this.querySelector('label'))
+      this.classList.add('has-label');
+
     let datalist = this.querySelector('datalist') as HTMLDataListElement | null;
 
     inputField.after(displayInputField);

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

@@ -22,6 +22,7 @@ class iamCard extends HTMLElement {
     ${loadCSS}
     </style>
     ${cardHTML}
+    <slot name="link"></slot>
     <slot name="primary-action"></slot>
     `;
 

package/assets/ts/components/carousel/carousel.component.ts

@@ -1,4 +1,3 @@
-import { generateThumbnailList, generatePipsHTML, carousel, updateCarousel } from '../../modules/carousel';
 import { trackComponent, trackComponentRegistered } from '../_global';
 
 trackComponentRegistered('iam-carousel');
@@ -20,86 +19,218 @@ class iamCarousel extends HTMLElement {
         ${loadCSS}
         ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
       </style>
-      <div class="carousel" part="carousel">
-        <div class="carousel__wrapper">
-          <div class="carousel__inner">
-            <div class="carousel__content" part="content">
-              <slot></slot>
-            </div>
-          </div>
+      <div class="carousel-wrapper">
+        <div class="carousel" part="carousel">
+          <slot></slot>
         </div>
-        <div class="carousel__btns" part="btns">
-          <button class="btn btn-secondary btn-compact fa-plus-large btn-prev" data-go="0" disabled part="prev">
-            Prev
-          </button>
-          <button class="btn btn-secondary btn-compact fa-plus-large btn-next" data-go="2" part="next">Next</button>
+        <div class="carousel__controls"></div>
+        <div id="carousel__progress" class="carousel__progress">
+          <input type="range" min="0" max="100" value="0" step="1" />
         </div>
-
-        <div class="carousel__controls" part="controls"></div>
-
-        <div class="carousel__progress" part="progress">
-          <input type="range" min="0" max="100" value="1" step="1" />
+        <div id="carousel__progress-sm" class="carousel__progress">
+          <input type="range" min="0" max="100" value="0" step="1" />
+        </div>
+        <div id="carousel__progress-md" class="carousel__progress">
+          <input type="range" min="0" max="100" value="0" step="1" />
         </div>
       </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  connectedCallback(): void {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const carouselComponent = this;
-    //const carouselElement = this.shadowRoot.querySelector('.carousel');
-    //const row = this.shadowRoot.querySelector('.row');
+  generateThumbnailList = (carouselComponent): any => {
+    const thumbnailImages = [];
 
-    let thumbnailImages = [];
+    Array.from(carouselComponent.querySelectorAll(':scope > :is(div,iam-card)')).forEach((slide, index) => {
+      if (slide.hasAttribute('data-thumbnail')) {
+        thumbnailImages[index] = slide.getAttribute('data-thumbnail');
+      }
+    });
 
-    const carouselControls = this.shadowRoot.querySelector('.carousel__controls');
+    return thumbnailImages;
+  };
+
+  generatePipsHTML = (carouselComponent, thumbnailImages): string => {
+    const itemCount = carouselComponent.querySelectorAll(':scope > :is(div,iam-card)').length;
+
+    let pips = '';
+    for (let i = 1; i <= itemCount; i++) {
+      let pipContent = null;
+      let pipClass = '';
+
+      if (thumbnailImages.length && thumbnailImages[i - 1]) {
+        pipClass = 'has-thumbnail';
+        pipContent = `<img src="${thumbnailImages[i - 1]}" alt="Slide ${i}" height="148"/>`;
+      } else {
+        pipContent = `Slide ${i}`;
+      }
+
+      pips += `<button class="control-${i} ${pipClass}" data-slide="${i}" ${i == 1 ? 'aria-current' : ''}>${pipContent}</button>`;
+    }
+
+    return pips;
+  };
+
+  progressPercent = (value, total):string => {
+
+    return ((value) / (total)) * 100 + '%'
+  }
 
-    if (carouselComponent.querySelector('[data-thumbnail]')) {
-      thumbnailImages = generateThumbnailList(carouselComponent);
-      carouselComponent.classList.add('thumbnails');
+  connectedCallback(): void {
+    
+    const carouselElement = this.shadowRoot?.querySelector('.carousel');
+    const carouselProgress = this.shadowRoot.querySelector('#carousel__progress [type="range"]');
+    const carouselProgressSM = this.shadowRoot.querySelector('#carousel__progress-sm [type="range"]');
+    const carouselProgressMD = this.shadowRoot.querySelector('#carousel__progress-md [type="range"]');
+    const itemCount = this.querySelectorAll(':scope > *').length;
+    
+    const progressPercent = this.progressPercent;
+
+    let stepperInterval,
+      stepperEvent = 'mouseup',
+      stepperStart = 'mousedown';
+
+    if ('ontouchstart' in document.documentElement) {
+      stepperEvent = 'touchend';
+      stepperStart = 'touchstart';
     }
 
-    // populate the pips
-    carouselControls.innerHTML = generatePipsHTML(carouselComponent, thumbnailImages);
-
-    Array.from(
-      carouselComponent.querySelectorAll(
-        ':scope > div > img:first-child:last-child, :scope > div > picture:first-child:last-child img'
-      )
-    ).forEach((image) => {
-      image.style.inset = '0 0.5rem 0 0.5rem';
-      image.style.position = 'absolute';
-      image.style.width = 'calc(100% - 1rem)';
-      image.style.height = '100%';
-      image.style['object-fit'] = 'cover';
-
-      image.closest('div').classList.add('image__wrapper');
+    carouselElement?.innerHTML = this.innerHTML;
+    carouselElement?.setAttribute('data-smcols',this.getAttribute('data-smcols'));
+    carouselElement?.setAttribute('data-mdcols',this.getAttribute('data-mdcols'));
+    
+    carouselProgress.setAttribute('max', itemCount);
+    carouselProgress.style.setProperty('--percent', progressPercent(carouselProgress.value, itemCount));
+    
+    carouselProgress.addEventListener(stepperStart, () => {
+      clearInterval(stepperInterval);
+      stepperInterval = setInterval(function () {
+          
+        carouselProgress.style.setProperty('--percent', progressPercent(carouselProgress.value, itemCount));
+      }, 10);
+    });
+
+    carouselProgress.addEventListener(stepperEvent, function () {
+      clearInterval(stepperInterval);
     });
 
-    carousel(carouselComponent);
+    carouselProgress.addEventListener('change', () => {
 
-    const observer = new MutationObserver(function (mutations) {
-      mutations.forEach(function (mutationRecord) {
-        const targetElement = mutationRecord.target as HTMLElement;
+      clearInterval(stepperInterval);
+      carouselProgress.style.setProperty('--percent', progressPercent(carouselProgress.value, itemCount));
+      const scrollTo = Math.floor((carouselElement.scrollWidth / itemCount) * (carouselProgress.value-1));
 
-        updateCarousel(targetElement);
+      carouselElement.scrollTo({
+        top: 0,
+        left: scrollTo,
+        behavior: 'smooth',
       });
     });
 
-    observer.observe(carouselComponent, {
-      attributes: false,
-      childList: true,
-      subtree: true,
+
+    // SM Progress bar
+
+    const smStep = this.getAttribute('data-smcols') ? this.getAttribute('data-smcols') : 1;
+    const smItemCount = Math.floor(itemCount / smStep) * smStep;
+
+    carouselProgressSM.setAttribute('max', smItemCount);
+    carouselProgressSM.setAttribute('step', smStep);
+
+    carouselProgressSM.style.setProperty('--percent', progressPercent(carouselProgressSM.value, smItemCount));
+    
+    carouselProgressSM.addEventListener(stepperStart, () => {
+      clearInterval(stepperInterval);
+      stepperInterval = setInterval(function () {
+        carouselProgressSM.style.setProperty('--percent', progressPercent(carouselProgressSM.value, smItemCount));
+      });
     });
 
+    carouselProgressSM.addEventListener(stepperEvent, function () {
+      clearInterval(stepperInterval);
+    });
+
+    carouselProgressSM.addEventListener('change', () => {
+
+      clearInterval(stepperInterval);
+
+      carouselProgressSM.style.setProperty('--percent', progressPercent(carouselProgressSM.value, smItemCount));
+      const scrollTo = Math.floor((carouselElement.scrollWidth / smItemCount) * carouselProgressSM.value);
+
+      console.log(carouselProgressSM.value);
+
+      carouselElement.scrollTo({
+        top: 0,
+        left: scrollTo,
+        behavior: 'smooth',
+      });
+    });
+
+    // MD Progress bar
+
+    const mdStep = this.getAttribute('data-smcols') ? this.getAttribute('data-smcols') : 1;
+    const mdItemCount = Math.floor(itemCount / mdStep) * mdStep;
+
+    carouselProgressMD.setAttribute('max', mdItemCount);
+    carouselProgressMD.setAttribute('step', mdStep);
+
+    carouselProgressMD.style.setProperty('--percent', progressPercent(carouselProgressMD.value, mdItemCount));
+    
+    carouselProgressMD.addEventListener(stepperStart, () => {
+      clearInterval(stepperInterval);
+      stepperInterval = setInterval(function () {
+        carouselProgressMD.style.setProperty('--percent', progressPercent(carouselProgressMD.value, mdItemCount));
+      });
+    });
+
+    carouselProgressMD.addEventListener(stepperEvent, function () {
+      clearInterval(stepperInterval);
+    });
+
+    carouselProgressMD.addEventListener('change', () => {
+
+      clearInterval(stepperInterval);
+
+      carouselProgressMD.style.setProperty('--percent', progressPercent(carouselProgressMD.value, mdItemCount));
+      const scrollTo = Math.floor((carouselElement.scrollWidth / mdItemCount) * carouselProgressMD.value);
+
+      console.log(carouselProgressMD.value);
+
+      carouselElement.scrollTo({
+        top: 0,
+        left: scrollTo,
+        behavior: 'smooth',
+      });
+    });
+
+
+    // Thumbnails
+    const carouselControls = this.shadowRoot.querySelector('.carousel__controls');
+
+    if (carouselElement.querySelector('[data-thumbnail]')) {
+      const thumbnailImages = this.generateThumbnailList(carouselElement);
+      carouselElement.classList.add('thumbnails');
+      carouselControls.innerHTML = this.generatePipsHTML(carouselElement, thumbnailImages);
+    }
+
+    carouselControls.addEventListener('click', (event) => {
+
+      carouselControls?.querySelector('[aria-current]')?.removeAttribute('aria-current');
+      if(event.target.closest('button[data-slide]')){
+
+
+        event.target.closest('button[data-slide]').setAttribute('aria-current','true');
+
+        const scrollTo = Math.floor((carouselElement.scrollWidth / itemCount) * event.target.closest('button[data-slide]').getAttribute('data-slide'));
+
+        carouselElement.scrollTo({
+          top: 0,
+          left: scrollTo,
+          behavior: 'smooth',
+        });
+      }
+
+    });
 
-    trackComponent(carouselComponent, 'iam-carousel', [
-      'pip-clicked',
-      'next-clicked',
-      'prev-clicked',
-      'slider-changed',
-    ]);
   }
 }