@iamproperty/components 6.1.0--beta → 6.1.0--beta3

package/assets/sass/foundations/grid.scss

@@ -0,0 +1,270 @@
+@use 'sass:math';
+@use 'sass:map';
+@use "../_func" as *;
+
+// #region Main grid setup
+body {
+  --excess-space: calc((100% - var(--max-width, #{$max-width})) / 2);
+  --col-size: calc((100% - max(0%,var(--excess-space)) - max(0%,var(--excess-space)) - var(--gutter, #{$gutter}) - var(--gutter, #{$gutter}) - (var(--gap, #{$gap}) * (#{$columns - 1}))) / #{$columns});
+  column-gap: var(--gap, #{$gap});
+  display: grid;
+  margin-inline: 0;
+  width: 100%;
+  $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, #{$gutter}) - var(--gap, #{$gap}))
+                          [content-start col-1-start]
+                          #{$templateColumns}
+                          var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap})) [container-end full-width-end];
+
+  @media screen and (min-width: #{em($max-width-px * $max-scale-up)}) {
+    grid-template-columns: [full-width-start] calc(var(--excess-space) - var(--gap, #{$gap}))
+                          [container-start] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
+                          [content-start col-1-start]
+                          #{$templateColumns}
+                          var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap})) [container-end] calc(var(--excess-space) - var(--gap, #{$gap})) [full-width-end];
+  }
+
+  grid-template-rows: auto;
+  align-content: start;
+  justify-content: center;
+
+  & * {
+    grid-column: content;
+
+    &:where(button):not(:has(.card)){
+        
+      max-width: fit-content;
+      place-self: start;
+    }
+
+    &:is(div){
+        
+      min-height: -webkit-fill-available;
+      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
+
+// #region grid mixins
+@mixin grid-utilities($br: ""){
+  .#{$br}inline-start {
+    justify-self: start;
+  }
+  
+  .#{$br}block-start {
+    align-self: start;
+  }
+
+  .#{$br}inline-center {
+    justify-self: center;
+  }
+  
+  .#{$br}block-center {
+    align-self: center;
+  }
+
+  .#{$br}inline-end {
+    justify-self: end;
+  }
+  
+  .#{$br}block-end {
+    align-self: end;
+  }
+
+  .#{$br}display-contents {
+    display: contents;
+  }
+  
+  .#{$br}display-none {
+    display: none;
+  }
+  
+  .#{$br}display-block {
+    display: block;
+  }
+      
+  .#{$br}display-grid {
+    display: grid;
+  }
+      
+  .#{$br}flow-dense { // Apply to a wrapper div of the items
+    grid-auto-flow: dense;
+  }
+
+  @for $i from 0 to $grid-utility-count {
+
+    .#{$br}order-#{$i+1} {
+      order: #{$i+1};
+    }
+  }
+}
+
+@mixin grid-columns($br: ""){
+
+  *:not(:where(main)):has(> [class*="#{$br}col-"]){
+    display: grid;
+    grid-template-columns: subgrid;
+  }
+
+  .#{$br}col-start-auto {
+    --col-start: auto;
+  }
+  
+  @for $i from 0 to $columns {
+
+    .#{$br}col-start-#{$i+1} {
+      --col-start: col-#{$i+1}-start!important;
+    }
+
+    .#{$br}col-end-#{$i+1} {
+      --col-end: col-#{$i+1}-end;
+    }
+        
+    .#{$br}col-span-#{$i+1} {
+      --col-end: span #{$i+1};
+    }
+  }
+}
+
+@mixin grid-rows($br: ""){
+
+  // Assign how many rows an item takes
+  @for $i from 0 to $grid-utility-count {
+    
+    .#{$br}row-span-#{$i+1} {
+      --row-span: #{$i+1};
+    }
+  }
+
+  // Move the item to a set row
+  @for $i from 0 to $rows-per-page {
+    
+    .#{$br}row-start-#{$i+1} {
+      --row-start: #{$i+1};
+    }
+  }
+}
+// #endregion
+
+@if $enable-new-grid == "true" {
+
+// #region Grid utility classes
+*:has([class*="order-"]) > *:not([class*="order-"]) {
+  order: 99;
+}
+
+
+@include grid-utilities();
+@each $br, $value in $breakpoints {
+  @include breakpoint($br){
+    @include grid-utilities(#{$br+'-'});
+  }
+}
+// #endregion
+
+// #region Create the columns
+:is([class*="col-start-"], [class*="col-end-"], [class*="col-span-"]) {
+  grid-column: var(--col-start, col-1-start) / var(--col-end, col-#{$columns}-end);
+}
+
+*:not(:where(html, body)):has(:is([class*="cols-"], [class*="col-start-"], [class*="col-end-"], [class*="col-span-"])){
+
+  display: grid;
+  grid-template-columns: subgrid;    
+
+  [class*="col-"]:not([class*="col-start-auto"]) {
+  
+    --col-start: col-1;   
+  }
+
+  [class*="col-"] [class*="col-"] {
+  
+    --col-start: auto;   
+  }
+
+  * {
+    grid-column: var(--col-start, col-1-start) / var(--col-end, col-#{$columns}-end);
+  }
+}
+
+
+@include grid-columns();
+@each $br, $value in $breakpoints {
+  @include breakpoint($br){
+    @include grid-columns(#{$br+'-'});
+  }
+}
+// #endregion
+
+// #region Create rows
+:where([class*="row-"],[class*="rows-"]) {
+  grid-row: var(--row-start, auto) / span var(--row-span, 1);
+}
+
+
+@include grid-rows();
+@each $br, $value in $breakpoints {
+  @include breakpoint($br){
+    @include grid-rows(#{$br+'-'});
+  }
+}
+// #endregion
+
+// #region Create the Columns wrappers
+[class*="cols-"]:not(.row) {
+  display: grid;
+  grid-template-columns: subgrid;
+}
+
+@for $i from 1 to math.floor(math.div($columns,2)) + 1 {
+  
+  $count: math.div($columns,$i);
+
+  .cols-#{$i} > * {
+    grid-column: auto / span #{math.floor($count)};
+  }
+}
+
+@each $br, $value in $breakpoints {
+  @include breakpoint($br){
+    @for $i from 1 to math.floor(math.div($columns,2)) + 1 {
+  
+      $count: math.div($columns,$i);
+
+      .#{$br}-cols-#{$i} > * {
+        grid-column: auto / span #{math.floor($count)};
+      }
+    }
+  }
+}
+// #endregion
+
+}

package/assets/sass/foundations/reboot.scss

@@ -1,9 +1,66 @@
 @use "sass:math";
 @use "../_func" as *;
 
-@import "../../bootstrap/scss/_reboot.scss";
 
-/* Reset & Defaults - Most of the resets/normailization stuff is done by Bootstrap */
+// Code
+pre,
+code,
+kbd,
+samp {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 1rem;
+}
+
+pre {
+  display: block;
+  margin-top: 0; // 1
+  margin-bottom: 1rem; // 2
+  overflow: auto; // 3
+  font-size: rem(14);
+  color: $pre-color;
+
+  // Account for some code outputs that place code tags in pre tags
+  code {
+    font-size: inherit;
+    color: inherit;
+    word-break: normal;
+  }
+}
+
+code {
+  font-size: rem(14);
+  color: #d63384;
+  word-wrap: break-word;
+
+  // Streamline the style when inside anchors to avoid broken underline and more
+  a > & {
+    color: inherit;
+  }
+}
+
+kbd {
+  padding: .1875rem .375rem;
+  font-size: rem(14);
+
+  kbd {
+    padding: 0;
+    font-size: 1rem;
+    font-weight: normal;
+  }
+}
+
+
+
+
+
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Reset & Defaults */
 html {
 
   -webkit-font-smoothing: antialiased; // Fix for Safari/iOS
@@ -59,6 +116,7 @@ html {
 }
 
 body {
+  margin: 0; // 1
   color-scheme: light dark;
   @include var(background,--colour-canvas);
   @include var(font-family,--font-body);
@@ -66,8 +124,11 @@ body {
   width: 100%;
   line-height: 1.2;
   min-height: 100%;
+  -webkit-text-size-adjust: 100%; // 3
+  -webkit-tap-highlight-color: rgba($black, 0); // 4
 }
 
+
 // #region scrollbars
 :is(div,form,fieldset,textarea)::-webkit-scrollbar {
   width: 10px;
@@ -128,6 +189,14 @@ hr {
   }
 }
 
+[hidden] {
+  display: none !important;
+}
+
+form {
+  display: contents;
+}
+
 input[type="search" i]::-webkit-search-cancel-button {
 
   appearance: none;
@@ -156,50 +225,3 @@ details summary > * {
 details {
   width: 100%;
 }
-
-// Main grid setup to avoid having to use continaer divs
-
-*:not(.row) > main {
-  --full-width-start: 0;
-
-  @include media-breakpoint-up(md) {
-    --full-width-start: calc((100% - var(--container-max-width)) / 2);
-  }
-
-  display: grid;
-  margin-left: auto;
-  margin-right: auto;
-  width: 100%;
-  
-  grid-template-columns:
-  [full-width-start] var(--full-width-start)
-  [container-start] var(--padding-inline)
-  [content-start] min(
-  100% - (var(--padding-inline) * 2),
-  calc(var(--container-max-width) - (var(--padding-inline) * 2))
-  )
-  [content-end]
-  var(--padding-inline) [container-end]
-  var(--full-width-start) [full-width-end];
-
-  &:not(:has(.container:last-child)):not(:has(iam-collapsible-side:last-child)){
-    padding-bottom: 1rem;
-  }
-}
-
-main > :not(.full-width, .container, iam-header, iam-collapsible-side, [class*="bg-"]) {
-  grid-column: content;
-}
-
-
-main > :is(.full-width, .container, iam-header) {
-  grid-column: container;
-}
-
-main > :is(.full-width, [class*="bg-"]:has(.container), iam-collapsible-side) {
-  grid-column: full-width;
-}
-
-.row > .col {
-  min-height: var(--min-height,0);
-}

package/assets/sass/foundations/root.scss

@@ -1,9 +1,11 @@
 @use "../func" as *;
 
-//@import "../../bootstrap/scss/_root.scss";
+#{$root} {
 
+  @media (prefers-reduced-motion: no-preference) {
+    scroll-behavior: smooth;
+  }
 
-#{$root} {
   // Print out the $vars array setup in the variables file so they can be used as CSS vars
   // Custom variable values only support SassScript inside `#{}`.
   @each $var, $value in $vars {
@@ -25,6 +27,18 @@
     }
   }
 
+  @media screen and (min-width: 36em) {
+    @each $var, $value in map-get($vars-responsive,"sm") {
+      #{'--'+$var}: #{$value};
+    }
+  }
+  @media screen and (min-width: 62em) {
+    @each $var, $value in map-get($vars-responsive,"md") {
+      #{'--'+$var}: #{$value};
+    }
+  }
+  
+
   // Wider colours
   @each $colour, $value in $wider-colours {
     --wider-colour-#{$colour}: #{$value};

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

@@ -1,12 +1,8 @@
 // @ts-nocheck
-import carousel from "../../modules/carousel";
+import {generateThumbnailList,generatePipsHTML,carousel} from "../../modules/carousel";
+import {trackComponent, trackComponentRegistered} from "../_global";
 
-// Data layer Web component created
-window.dataLayer = window.dataLayer || [];
-window.dataLayer.push({
-  "event": "customElementRegistered",
-  "element": "carousel"
-});
+trackComponentRegistered("iam-carousel");
 
 class iamCarousel extends HTMLElement {
 
@@ -15,31 +11,37 @@ class iamCarousel extends HTMLElement {
     this.attachShadow({ mode: 'open'});
 
     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/carousel.css";`;
+
+    const loadCSS = `@import "${assetLocation}/css/components/carousel.component.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${coreCSS}";
     ${loadCSS}
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
-    <div class="carousel" :id="'carousel'+id">
+    <div class="carousel" part="carousel">
       <div class="carousel__wrapper">
         <div class="carousel__inner">
-          
-          <slot></slot>
+          <div class="carousel__content" part="content">
+            <slot></slot>
+          </div>
         </div>
  
+      </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>
+
         <div class="carousel__controls" part="controls">
           
         </div>
 
-        <button class="btn btn-prev" data-go="0" disabled  part="prev">Prev</button>
-        <button class="btn btn-next" data-go="2" part="next">Next</button>
+        <div class="carousel__progress" part="progress">
+          <input type="range" min="0" max="100" value="1" step="1">
+        </div>
 
-      </div>
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
@@ -47,44 +49,49 @@ class iamCarousel extends HTMLElement {
 
 	connectedCallback() {
     
+    const carouselComponent = this;
     const carouselElement = this.shadowRoot.querySelector('.carousel');
-    const row = this.querySelector('.row');
-    const thumbnailImages = JSON.parse(this.dataset.thumbnails);
-
-    const carouselControls = this.shadowRoot.querySelector('.carousel__controls');
+    const row = this.shadowRoot.querySelector('.row');
 
-    let itemCount = this.querySelectorAll(':scope > .row > .col').length
+    let thumbnailImages = [];
 
-    carouselElement.setAttribute('data-row-class',row.className);
+    const carouselControls = this.shadowRoot.querySelector('.carousel__controls');
 
-    if(this.classList.contains('hide-btns'))
-      carouselElement.classList.add('hide-btns');
 
-    if(this.classList.contains('hide-controls'))
-      carouselElement.classList.add('hide-controls');
 
-    if (thumbnailImages?.length) {
-      carouselControls.classList.add('thumbnails');
+    if(carouselComponent.querySelector('[data-thumbnail]')){
+      thumbnailImages = generateThumbnailList(carouselComponent);
+      carouselComponent.classList.add('thumbnails');
     }
 
     // populate the pips
-    let pips = "";
-    for (let i = 1; i <= itemCount; i++) {
-      let pipContent = null;
-      let pipClass = '';
-
-      if (thumbnailImages.length) {
-        pipClass = 'has-thumbnail';
-        pipContent = `<img src="${thumbnailImages[i - 1].src}" alt="Slide ${i}" height="148"/>`;
-      } else {
-        pipContent = `Slide ${i}`;
-      }
-
-      pips += `<button class="control-${i} ${pipClass}" data-slide="${i}" ${i == 1 ? "aria-current":""}>${pipContent}</button>`;
-    }
-    carouselControls.innerHTML = 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, index) => {
+        
+      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');
+    });
+
+
+    carousel(carouselComponent);
+
+    trackComponent(carouselComponent,"iam-carousel",['pip-clicked','next-clicked','prev-clicked','slider-changed']);
+  }
+
+  attributeChangedCallback(attrName, oldVal, newVal) {
+    
+
+
+
+
 
-    carousel(carouselElement,row);
   }
 }