@iamproperty/components 5.0.0 → 5.1.0-beta10

package/assets/sass/foundations/reboot.scss

@@ -23,24 +23,22 @@ html {
 
   @if $mobileOnly != "true" {
     @media (min-width: #{em(1280)}) {
-        font-size: 100%;
+      font-size: 100%;
+      font-size: vw(1280);
+    }
+
+    @media (min-width: #{em(1440)}) {
+      font-size: 112.5%;
+    }
+
+    @media (min-width: #{em(1680)}) {
+      //font-size: 131.25%;
     }
 
     @media print {
       font-size: 16px;
     }
   }
-  /*
-  @media (min-width: #{em(1440)}) {
-    font-size: vw(1440);
-  }
-  @media (min-width: #{em(1600)}) {
-    font-size: 111.11%;
-  }
-  @media (min-width: #{em(1800)}) {
-    font-size: 125%;
-  }
-  */
 }
 
 body {
@@ -141,3 +139,52 @@ details summary > * {
 details {
   width: 100%;
 }
+
+// Main grid setup to avoid having to use continaer divs
+
+*:not(.row) > main {
+  --padding-inline: 1.5rem;
+  --container-max-width: #{rem(1280)};
+  --full-width-start: 0;
+
+  @include media-breakpoint-up(sm) {
+    --padding-inline: 2.5rem;
+  }
+  @include media-breakpoint-up(md) {
+    --padding-inline: 5.25rem;
+    --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)){
+    padding-bottom: 1rem;
+  }
+}
+
+main > :not(.full-width, .container, iam-header, [class*="bg-"]) {
+  grid-column: content;
+}
+
+
+main > :is(.full-width, .container, iam-header) {
+  grid-column: container;
+}
+
+main > :is(.full-width, [class*="bg-"]) {
+  grid-column: full-width;
+}

package/assets/sass/foundations/root.scss

@@ -36,7 +36,7 @@ $root: ':root'!default;
   --card-bottom-padding: 2rem;
   --card-left-padding: 1rem;
   --card-border-radius: #{rem(8)};
-  --card-box-shadow: 2px 6px 12px rgba(0,0,0,0.2);
+  --card-box-shadow: #{rem(2)} #{rem(3)} #{rem(6)} rgba(0,0,0,0.2);
   --nav-height: #{rem(96)};
   --code-color: #d63384;
 
@@ -46,6 +46,14 @@ $root: ':root'!default;
   --border-color: var(--colour-border);
 }
 
+.reset-colours {
+
+  @each $color, $value in $theme-colors {
+    --colour-#{$color}: #{$value};
+  }
+  @include reset-colours();
+}
+
 // Dark mode; functional colours get updated
 @include dark-mode() {
   #{$root} {
@@ -60,7 +68,7 @@ $root: ':root'!default;
 @include light-mode() {
 
   // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
-  [class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-white):not(.bg-canvas):not(.bg-canvas-2):not(.invert-colours) {
+  [class*="bg-"]:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.invert-colours) {
 
     @each $color, $value in $theme-colors {
       --colour-#{$color}: #{$value};
@@ -71,7 +79,7 @@ $root: ':root'!default;
   }
 
   // Override the colours when on a dark background, similiar to dark mode but on a module level
-  [class*="bg-"]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert),
+  [class*="bg-"]:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(.bg-canvas-2):not(.prevent-invert),
   .invert-colours {
     
     @include invert-colours();

package/assets/sass/helpers/max-height.scss

@@ -1,9 +1,10 @@
-:is(.mh-sm,.mh-md,.mh-lg){
-  overflow: auto;
-  overscroll-behavior: contain;
+:is(.mh-sm,.mh-md,.mh-lg,.mh-sm-sm,.mh-sm-md,.mh-sm-lg,.mh-md-sm,.mh-md-md,.mh-md-lg){
+  
+
+  padding-inline: var(--mh-padding-inline,0);
+  margin-inline: calc(var(--mh-padding-inline,0) * -1);
 
   &::before {
-    content: "";
     top: calc(100% - 1.5rem);
     bottom: 0;
     left: 0;
@@ -15,4 +16,77 @@
     z-index: 2;
     margin-bottom: -1.5rem;
   }
+}
+
+:is(.mh-sm,.mh-md,.mh-lg){
+
+  overflow: auto;
+  overscroll-behavior: contain;
+
+  &::before {
+    content: "";
+  }
+}
+
+.mh-sm {
+  max-height: calc(#{rem(200)} - var(--mh-modifier,0));
+}
+
+.mh-md {
+  max-height: calc(#{rem(400)} - var(--mh-modifier,0));
+}
+
+.mh-lg {
+  max-height: calc(#{rem(600)} - var(--mh-modifier,0));
+}
+
+
+@include media-breakpoint-up(sm) {
+
+  :is(.mh-sm-sm,.mh-sm-md,.mh-sm-lg){
+
+    overflow: auto;
+    overscroll-behavior: contain;
+  
+    &::before {
+      content: "";
+    }
+  }
+  
+  .mh-sm-sm {
+    max-height: calc(#{rem(200)} - var(--mh-modifier,0));
+  }
+  
+  .mh-sm-md {
+    max-height: calc(#{rem(400)} - var(--mh-modifier,0));
+  }
+  
+  .mh-sm-lg {
+    max-height: calc(#{rem(600)} - var(--mh-modifier,0));
+  }
+}
+
+@include media-breakpoint-up(md) {
+
+  :is(.mh-md-sm,.mh-md-md,.mh-md-lg){
+
+    overflow: auto;
+    overscroll-behavior: contain;
+  
+    &::before {
+      content: "";
+    }
+  }
+  
+  .mh-md-sm {
+    max-height: calc(#{rem(200)} - var(--mh-modifier,0));
+  }
+  
+  .mh-md-md {
+    max-height: calc(#{rem(400)} - var(--mh-modifier,0));
+  }
+  
+  .mh-md-lg {
+    max-height: calc(#{rem(600)} - var(--mh-modifier,0));
+  }
 }

package/assets/sass/main.scss

@@ -2,6 +2,5 @@
 
 @use "_fonts";
 @use "_corefiles";
-@import '../../assets/sass/components/nav-global.scss';
 @import "_components";
 @import "_print";

package/assets/sass/templates/auth.scss

@@ -0,0 +1,112 @@
+@use "../_func" as *;
+
+
+body:has(.template--auth) {
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  background-color: var(--colour-canvas-2);
+}
+
+.template--auth {
+  --padding-top: #{rem(24)};
+  --brand-size: #{rem(36)};
+
+  @include media-breakpoint-up(md) {
+    --padding-top: #{rem(40)};
+    --brand-size: #{rem(64)};
+  }
+
+
+  display: flex;
+  flex-wrap: wrap;
+  max-width: rem(1280);
+  margin-inline: auto;
+
+
+  main {
+
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    padding-top: var(--padding-top);
+    padding-bottom: var(--padding-top);
+    padding-inline: var(--container-padding-x);
+
+    @include media-breakpoint-up(md) {
+      flex: 0 0 auto;
+      width: 43.75%;
+      padding-inline-end: calc(var(--container-padding-x) - rem(16));
+    }
+
+    .brand {
+      font-size: var(--brand-size);
+      padding-top: 0;
+    }
+  }
+
+
+  aside {
+
+    display: none;
+
+    @include media-breakpoint-up(md) {
+      display: block;
+      flex: 0 0 auto;
+      width: 56.25%;
+      padding-inline: var(--container-padding-x) !important;
+      padding-block: var(--padding-top);
+      position: relative;
+      overflow: hidden;
+    }
+
+    background-color: var(--colour-primary-theme);
+
+    @include light-mode(){
+    
+      background-color: #e9f9fd;
+    }
+
+
+    > figure {
+      position: relative;
+      display: block;
+      margin-top: calc(var(--padding-top) * -1);
+      margin-inline: calc(var(--container-padding-x-md) * -1);
+      min-width: calc(100% + var(--container-padding-x-md) + var(--container-padding-x-md));
+      margin-bottom: rem(40);
+      max-height: rem(400);
+      clip-path: ellipse(70% 80% at 50% 20%);
+      rotate: -5deg;
+
+      &:after {
+        content: "";
+        position: absolute;
+        display: block;
+        
+        right: -2rem;
+        left: -2rem;
+        bottom: -1rem;
+        height: 50%;
+        
+        rotate: -5deg;
+        background: linear-gradient(0deg, rgba(0,49,60,1) 0%, rgba(28,182,226,0.45) 40%, rgba(28,182,226,0) 100%);
+        opacity: 0.9;
+      }
+    }
+
+    img {
+      
+      margin-inline: rem(-24);
+      min-width: calc(100% + rem(24) + rem(24));
+      margin-top: rem(-12);
+      max-height: rem(424);
+      object-fit: cover;
+      object-position: 50% 50%;
+      rotate: 5deg;
+    }
+  }
+
+}
+

package/assets/sass/templates/form.scss

@@ -57,6 +57,7 @@ body:has(.template--form) {
     background-color: var(--colour-canvas-2);
     margin-bottom: 1.5rem;
     outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+    width: 100%;
     
     @include media-breakpoint-up(sm) {
 

package/assets/ts/components/accordion/accordion.component.ts

@@ -17,6 +17,7 @@ class iamAccordion 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/accordion.css";`;
+    const loadExtraCSS = `@import "${assetLocation}/css/components/accordion.global.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
@@ -30,6 +31,10 @@ class iamAccordion extends HTMLElement {
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+    // insert extra CSS
+    if(!document.getElementById('accordionGlobal'))
+      document.head.insertAdjacentHTML('beforeend',`<style id="accordionGlobal">${loadExtraCSS}</style>`);
   }
 
 	connectedCallback() {

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

@@ -45,6 +45,7 @@ class iamActionbar 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/actionbar.css";`;
+    const loadExtraCSS = `@import "${assetLocation}/css/components/actionbar.global.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
@@ -96,6 +97,10 @@ class iamActionbar extends HTMLElement {
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+    // insert extra CSS
+    if(!document.getElementById('actionbarGlobal'))
+      document.head.insertAdjacentHTML('beforeend',`<style id="actionbarGlobal">${loadExtraCSS}</style>`);
   }
 
 	connectedCallback() {

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

@@ -34,7 +34,7 @@ class iamAddressLookup extends HTMLElement {
         <div>
         <label class="mb-2">Search <span class="title text-lowercase"></span> <span class="optional">(Optional)</span>
           <span>
-          <input type="text" name="postcode" list="address-lookup__addressess" autoComplete="new-password" aria-autocomplete="none" placeholder="Postcode" />
+          <input type="text" name="postcode" list="address-lookup__addressess" autocomplete="off" aria-autocomplete="none" placeholder="Postcode" />
           <span class="suffix fa-regular fa-search"></span>
           </span>
           <span class="invalid-feedback">Required Adddress fields missing</span>
@@ -51,7 +51,7 @@ class iamAddressLookup extends HTMLElement {
       </div>
       <div class="pre-filled pb-2 js-hide">
         <strong class="title text-primary d-block"></strong>
-        <p><span class="pre-filled-address"></span><button class="text-primary text-decoration-none ms-1 cursor-pointer"><i class="fa-regular fa-pen-to-square"></i><span class="visually-hidden">Edit</span></button></p>
+        <p><span class="pre-filled-address"></span><button class="text-primary text-decoration-none ms-1 cursor-pointer"><i class="fa-regular fa-pen-to-square"></i><span class="visually-hidden">Edit</span></button><slot name="prefilled"></slot></p>
       </div>
     </div>
     `;
@@ -251,9 +251,28 @@ class iamAddressLookup extends HTMLElement {
           let listString = '';
           response.forEach((address, index) => {
 
-            
-            let values = JSON.stringify(address.value);
-            listString += `<option value="${address['label']}, ${postcode}" data-values='${values}'></option>`;
+            // Deal with agent platform response
+            if(typeof address.value == "object"){
+              let values = JSON.stringify(address.value);
+              listString += `<option value="${address['label']}, ${postcode}" data-values='${values}'></option>`;
+            }
+            else {
+              let values = JSON.stringify(address);
+
+              let itemString = '';
+
+              for (const [key, value] of Object.entries(address)) {
+
+                if(key == "address_number_name")
+                  itemString += `${value} `;
+                else if(key != "postcode" && key != "address_title")
+                  itemString += `${value}, `;
+              }
+
+              listString += `<option value="${itemString}${postcode}" data-values='${values}'></option>`;
+            }
+
+
           });
           list.innerHTML = listString;
 

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

@@ -22,6 +22,7 @@ class iamCard 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/card.css";`;
+    const loadExtraCSS = `@import "${assetLocation}/css/components/card.global.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
@@ -31,8 +32,9 @@ class iamCard extends HTMLElement {
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     <div class="card ${classList}" tabindex="0" role="button">
-      ${this.hasAttribute('data-image') ? `<div class="card__head"><img src="${this.getAttribute('data-image')}" alt="" loading="lazy" /></div>` : ''}
+      ${this.hasAttribute('data-image') ? `<div class="card__head"><img src="${this.getAttribute('data-image')}" alt="" loading="lazy" /><div class="card__badges"><slot name="badges"></slot></div></div>` : ''}
       <div class="card__body">
+      ${!this.hasAttribute('data-image') ? `<div class="card__badges"><slot name="badges"></slot></div>` : ''}
       ${this.classList.contains('card--filter') && this.hasAttribute('data-total') ? `<div class="card__total">${this.getAttribute('data-total')}</div>` : ''}
       ${this.hasAttribute('data-illustration') ? `<div class="card__illustration"><img src="${this.getAttribute('data-illustration')}" alt="" loading="lazy" /></div>` : ''}
         <slot></slot>
@@ -43,6 +45,10 @@ class iamCard extends HTMLElement {
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
+    
+    // insert extra CSS
+    if(!document.getElementById('cardGlobal'))
+      document.head.insertAdjacentHTML('beforeend',`<style id="cardGlobal">${loadExtraCSS}</style>`);
   }
 
 	connectedCallback() {

package/assets/ts/components/carousel/README.md

@@ -0,0 +1,39 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/filterlist/filterlist.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-filterlist`))
+    window.customElements.define(`iam-filterlist`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
+```
+<iam-header class="bg-secondary" image="/shutterstock_1229155495.webp">
+  <ul class="breadcrumb" slot="breadcrumb">
+    <li><a href="/">Home</a></li>
+    <li><a href="/top">Top level</a></li>
+  </ul>
+  <h1>Page title</h1>
+  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
+</iam-header>
+```
+
+**Properties** 
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| image | String | - | Optional image url to display in the background |
+
+
+**Slots**
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
+| default | - | Will display underneath the heading inside of the white box |
+| breadcrumb | - | An optional space to add a breadcrumb trail list. |

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

@@ -0,0 +1,75 @@
+// @ts-nocheck
+import carousel from "../../modules/carousel";
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "carousel"
+});
+
+class iamCarousel extends HTMLElement {
+
+  constructor(){
+    super();
+    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 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__wrapper">
+        <div class="carousel__inner">
+          
+          <slot></slot>
+        </div>
+ 
+        <div class="carousel__controls">
+          
+        </div>
+
+        <button class="btn btn-prev" data-go="0" disabled>Prev</button>
+        <button class="btn btn-next" data-go="2">Next</button>
+
+      </div>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
+    
+    const carouselElement = this.shadowRoot.querySelector('.carousel');
+    const row = this.querySelector('.row');
+    const carouselControls = this.shadowRoot.querySelector('.carousel__controls');
+
+    let itemCount = this.querySelectorAll(':scope > .row > .col').length
+
+    carouselElement.setAttribute('data-row-class',row.className);
+
+    if(this.classList.contains('hide-btns'))
+      carouselElement.classList.add('hide-btns');
+
+    if(this.classList.contains('hide-controls'))
+      carouselElement.classList.add('hide-controls');
+
+    // populate the pips
+    let pips = "";
+    for (let i = 1; i <= itemCount; i++) {
+      pips += `<button class="control-${i}" data-slide="${i}" ${i == 1 ? "aria-current":""}>Slide ${i}</button>`;
+    }
+    carouselControls.innerHTML = pips;
+
+    carousel(carouselElement,row);
+  }
+}
+
+export default iamCarousel;

package/assets/ts/components/header/header.component.ts

@@ -25,18 +25,12 @@ class iamHeader extends HTMLElement {
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     <div class="header-banner">
-      <div class="container" part="container">
-        <slot name="breadcrumb"></slot>
-        <div class="header-banner__inner">
-        <slot></slot>
-        </div>
-      </div>
       <picture>
-        <!-- Actual image only loaded on desktops -->
-        <source srcset="" media="(min-width: 62em)">
-        <!-- Placeholder image -->
         <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" lazy="" />
       </picture>
+      <div class="container">
+        <slot></slot>
+      </div>
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
@@ -44,13 +38,13 @@ class iamHeader extends HTMLElement {
 
 	connectedCallback() {
     
-    this.classList.add('loaded');
+    this.classList.add('bg-primary');
 
     const picture = this.shadowRoot.querySelector('picture');
-    const source = this.shadowRoot.querySelector('picture source');
+    const source = this.shadowRoot.querySelector('picture img');
 
     if(this.hasAttribute('image'))
-      source.setAttribute('srcset', this.getAttribute('image'));
+      source.setAttribute('src', this.getAttribute('image'));
     else
       picture.remove();
     

package/assets/ts/components/marketing/marketing.component.ts

@@ -0,0 +1,49 @@
+// @ts-nocheck
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "Marketing"
+});
+
+class iamMarketing extends HTMLElement {
+
+  constructor(){
+    super();
+    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/marketing.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${coreCSS}";
+    ${loadCSS}
+    
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
+    <div class="marketing">
+      
+      <slot></slot>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
+
+    this.classList.add('invert-colours');
+
+    if(this.hasAttribute('data-img')){
+      this.shadowRoot.querySelector('.marketing').insertAdjacentHTML(
+        'afterbegin',
+        `<figure><img src="${this.getAttribute('data-img')}" alt="" /></figure>`,
+      );
+    }
+  }
+}
+
+export default iamMarketing;