@iamproperty/components 3.4.5 → 3.4.6

package/assets/sass/foundations/reboot.scss

@@ -22,7 +22,7 @@ html {
   }
 
   @if $mobileOnly != "true" {
-    @media (min-width: #{em(1440)}) {
+    @media (min-width: #{em(1280)}) {
         font-size: 100%;
     }
 
@@ -48,7 +48,7 @@ body {
   font-family: 'qanelasmedium', arial, sans-serif;
   @include var(color,--colour-body);
   width: 100%;
-  line-height: 1.5;
+  line-height: 1.2;
   height: 100%;
   //overflow-y: scroll;
   //overflow-x: hidden;

package/assets/sass/foundations/root.scss

@@ -10,6 +10,13 @@
   }
 
   // Add in media query based updates to the global vars like updating the heading 1 font size
+  @include media-breakpoint-up(sm) {
+    
+    @each $var, $value in $varsSM {
+      #{$var}: #{$value};
+    }
+  }
+
   @include media-breakpoint-up(md) {
     
     @each $var, $value in $varsMD {
@@ -43,7 +50,7 @@
   }
 
   body .text-primary {
-    color: white!important;
+    color: #{$colour-inverted}!important;
   }
 
   body .bg-white {
@@ -93,7 +100,7 @@
       
       @include invert-colours();
     }
-    color: white;
+    color: #{$colour-inverted};
   }
 
   // Only update the the colour of the underline on dark backgrounds except the primary as the secondary colour looks good on it
@@ -102,7 +109,7 @@
   .bg-black:not(.prevent-invert),
   .invert-colours {
     
-    --colour-underline: white;
+    --colour-underline: #{$colour-inverted};
   }
 }
 
@@ -116,8 +123,8 @@
       
       @include invert-colours();
     }
-    color: white;
-    --colour-underline: white;
+    color: #{$colour-inverted};
+    --colour-underline: #{$colour-inverted};
   }
 
   [class*="bg-"].bg-md-transparent {

package/assets/sass/foundations/type.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../_func.scss" as *;
 
 /* Duplicated from bootstrap reboot so that the type file will compile */
@@ -10,105 +11,123 @@ small {
   @include font-size($small-font-size);
 }
 
-
 @import "../../../node_modules/bootstrap/scss/_type.scss";
 
 // #region headings
 %heading {
-  clear: both;
-  @include var(font-weight,--heading-weight);
-  @include var(font-family, --font-heading);
-  @include var(color,--colour-heading);
-  color: var(--colour-heading,var(--colour-primary));
-  display: block;
-  text-indent: -0.04em;
-  letter-spacing: -0.01em;
-
+  // From bootstrap reboot
   margin-top: 0; // 1
   margin-bottom: $headings-margin-bottom;
+  font-family: $headings-font-family;
   font-style: $headings-font-style;
+  font-weight: $headings-font-weight;
   line-height: $headings-line-height;
+  color: $headings-color;
+  // END:Bootstap reboot
+  clear: both;
+  display: block;
+  padding-bottom: 2rem;
 }
 
-.h1 {
-  @include font-size($h1-font-size);
+@include is('h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,.display-1,.display-2, .display-3, .display-4'){
+  
+  @extend %heading;
 }
 
-.h2 {
-  @include font-size($h2-font-size);
-}
+:is(.h1, h1) {
+  font-size: rem(map-get($heading-sizes,"h1_fs"));
+  line-height: rem(map-get($heading-sizes,"h1_lh"));
+  padding-bottom: rem(map-get($heading-sizes,"h1_pb"));
 
-.h3 {
-  @include font-size($h3-font-size);
-}
+  @include media-breakpoint-up(sm) {
 
-.h4 {
-  @include font-size($h4-font-size);
+    font-size: rem(map-get($heading-sizes,"h1_fs_sm"));
+    line-height: rem(map-get($heading-sizes,"h1_lh_sm"));
+    padding-bottom: rem(map-get($heading-sizes,"h1_pb_sm"));
+  }
 }
 
-.h5 {
-  @include font-size($h5-font-size);
-}
+:is(h2, .h2) {
+  font-size: rem(map-get($heading-sizes,"h2_fs"));
+  line-height: rem(map-get($heading-sizes,"h2_lh"));
+  padding-bottom: rem(map-get($heading-sizes,"h1_pb"));
 
-.h6 {
-  @include font-size($h6-font-size);
-}
+  @include media-breakpoint-up(sm) {
 
-@include is('h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,.display-1,.display-2, .display-3, .display-4'){
-  
-  @extend %heading;
+    font-size: rem(map-get($heading-sizes,"h2_fs_sm"));
+    line-height: rem(map-get($heading-sizes,"h2_lh_sm"));
+    padding-bottom: rem(map-get($heading-sizes,"h2_pb_sm"));
+  }
 }
 
-@include is('.display-1,.display-2, .display-3, .display-4') {
+:is(h3, .h3) {
+  font-size: rem(map-get($heading-sizes,"h3_fs"));
+  line-height: rem(map-get($heading-sizes,"h3_lh"));
+  padding-bottom: rem(map-get($heading-sizes,"h3_pb"));
+  max-width: var(--content-max-width);
+
+  @include media-breakpoint-up(sm) {
 
-  font-size: var(--fs-display);
+    font-size: rem(map-get($heading-sizes,"h3_fs_sm"));
+    line-height: rem(map-get($heading-sizes,"h3_lh_sm"));
+    padding-bottom: rem(map-get($heading-sizes,"h3_pb_sm"));
+  }
 }
 
+:is(.h4, h4, .h5, h5, .h6, h6)  {
+  font-size: rem(map-get($heading-sizes,"h4_fs"));
+  line-height: rem(map-get($heading-sizes,"h4_lh"));
+  padding-bottom: rem(map-get($heading-sizes,"h4_pb"));
+  max-width: var(--content-max-width);
+
+  /* The values for mobile and tablet are exactly the same, but if that changes this block needs to be re-instated 
+  @include media-breakpoint-up(sm) {
+
+    font-size: rem(map-get($heading-sizes,"h4_fs_sm"));
+    line-height: rem(map-get($heading-sizes,"h4_lh_sm"));
+    padding-bottom: rem(map-get($heading-sizes,"h4_pb_sm"));
+  }
+  */
+}
 // #endregion
 
 p {
+  font-size: rem(map-get($heading-sizes,"body_fs"));
+  line-height: rem(map-get($heading-sizes,"body_lh"));
+  padding-bottom: rem(map-get($heading-sizes,"body_end_pb"));
   max-width: var(--content-max-width);
+  margin-bottom: 0;
 }
 
-p + p {
-  margin-top: rem(-16);
+p:has(+ p) {
+  padding-bottom: rem(map-get($heading-sizes,"body_pb"));
 }
 
-.strapline {
-  @include var(font-size,--fs-strapline);
-  @include var(font-family, --font-heading);
-  @include var(color,--colour-secondary);
-  line-height: 1.2;
+@include is('.lead, .strapline'){
+  font-size: rem(map-get($heading-sizes,"lead_fs"));
+  line-height: rem(map-get($heading-sizes,"lead_lh"));
+  padding-bottom: rem(map-get($heading-sizes,"lead_pb"));
+  max-width: var(--content-max-width);
   font-weight: 700;
-  margin-bottom: clamp(1rem,0.5em,0.5em);
-  //text-shadow: ;
-
-  h1 + &,
-  .h1 + & {
-    margin-top: -0.5rem;
-    margin-bottom: 2rem;
-  }
 }
 
-.lead {
-  @include var(font-size,--fs-strapline);
-  @include var(font-family, --font-heading);
-  font-weight: 700;
-  line-height: 1.2;
-  margin-bottom: 3rem;
-  @include var(color,--colour-heading);
+.small {
+  font-size: rem(map-get($heading-sizes,"small_fs"));
+  line-height: rem(map-get($heading-sizes,"small_lh"));
+  padding-bottom: rem(map-get($heading-sizes,"small_pb"));
+  max-width: var(--content-max-width);
 }
 
 blockquote {
 
   quotes: "“" "”" "‘" "’";
-  margin-bottom: 1rem;
+  padding-bottom: rem(48);
+  overflow: hidden;
 
   p {
-    @include var(font-size,--fs-4);
-    @include var(color,--colour-heading);
-    margin-top: 0;
-    margin-bottom: 1rem;
+    font-size: rem(24);
+    line-height: rem(32);
+    padding-bottom: 0;
   }
 
   & p:first-child:before {
@@ -119,19 +138,24 @@ blockquote {
   }
 
   cite {
-    @include var(font-size,--fs-5);
-    @include var(color,--colour-heading);
-    font-style: normal;
+    font-size: rem(18);
+    line-height: rem(32);
+    padding-bottom: 0;
     font-weight: bold;
+    font-style: normal;
   }
 }
 
 .stat {
-  font-size: rem(48);
-  @extend %heading;
+  font-size: rem(64);
+  line-height: rem(72);
+  font-weight: bold;
+  color: $headings-color;
+  display: block;
+
   text-decoration: underline;
-  text-underline-offset: 1rem;
+  text-underline-offset: 0.75rem;
   text-decoration-color: var(--colour-secondary);
-  text-decoration-thickness: 0.4rem;
-  margin-bottom: 2rem;
+  text-decoration-thickness: rem(4);
+  margin-bottom: rem(64);
 }

package/assets/ts/README.md

@@ -0,0 +1,12 @@
+# Typescript files
+
+## Compilation
+
+- **assets/ts/modules/{module}.ts** compiles to **assets/js/modules/{module}.js**
+- **assets/ts/components/{component}.ts** compiles to **assets/js/components/{component}.component.js**
+- **assets/ts/{filename}.ts** compiles to **assets/js/{filename}.js**
+
+## Rollup
+
+- **assets/js/components/{component}.component.js** adds the @imports from the assets/js/modules folder and creates a combined file of **assets/js/components/{component}.component.min.js**
+- **assets/js/bundle.js** adds the @imports from the assets/js/modules and assets/js/components folders to create a combined file of **assets/js/components/scripts.bundle.min.js**

package/assets/ts/bundle.ts

@@ -0,0 +1,76 @@
+// @ts-nocheck
+// Modules
+import * as helpers from '../js/modules/helpers'
+import nav from '../js/modules/nav'
+import table from '../js/modules/table'
+//import accordion from './modules/accordion'
+import testimonial from '../js/modules/testimonial'
+import carousel from '../js/modules/carousel'
+import form from '../js/modules/form'
+import youtubeVideo from '../js/modules/youtubevideo'
+import modal from '../js/modules/modal'
+import iamHeader from './components/header/header.component'
+import iamAccordion from './components/accordion/accordion.component'
+import iamTabs from './components/tabs/tabs.component'
+
+// Attach classes to dom elements
+document.addEventListener("DOMContentLoaded", function() {
+
+  // Global stuff
+  helpers.addBodyClasses(document.body);
+  helpers.addGlobalEvents(document.body);
+  helpers.checkElements(document.body);
+
+  if (!window.customElements.get(`iam-header`))
+    window.customElements.define(`iam-header`, iamHeader);
+
+  if (!window.customElements.get(`iam-accordion`))
+    window.customElements.define(`iam-accordion`, iamAccordion);
+
+  if (!window.customElements.get(`iam-tabs`))
+    window.customElements.define(`iam-tabs`, iamTabs);
+
+  // ANav
+  Array.from(document.querySelectorAll('.nav')).forEach((arrayElement) => {
+    nav(arrayElement);
+  });
+
+  // Advanced tables
+  Array.from(document.querySelectorAll('.table__wrapper')).forEach((arrayElement) => {
+    table(arrayElement);
+  });
+
+
+
+  // Testimonial
+  Array.from(document.querySelectorAll('.testimonial')).forEach((arrayElement) => {
+    testimonial(arrayElement);
+  });
+  // Carousel
+  Array.from(document.querySelectorAll('.carousel')).forEach((arrayElement) => {
+    carousel(arrayElement);
+  });
+  // Form
+  Array.from(document.querySelectorAll('form')).forEach((arrayElement) => {
+    form(arrayElement);
+  });
+  // Modal
+  Array.from(document.querySelectorAll('.modal')).forEach((arrayElement) => {
+    modal(arrayElement);
+  });
+  // YouTube videos
+  Array.from(document.querySelectorAll('.youtube-embed')).forEach((arrayElement) => {
+    new youtubeVideo(arrayElement);
+  });
+
+
+  window.addEventListener('hashchange', function() {
+
+    const hash = location.hash.replace('#','');
+    const label = document.querySelector(`label[for="${hash}"]`);
+
+    if (label instanceof HTMLElement)
+      label.click();
+
+  }, false);
+});

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

@@ -0,0 +1,17 @@
+```
+<iam-accordion class="container">
+  <details id="question1" class="accordion-item">
+    <summary class="accordion-header accordion-button h4">Question 1</summary>
+    <p>Answer </p>
+  </details>
+  <details class="accordion-item">
+    <summary class="accordion-header accordion-button h4">Question 2</summary>
+    <p>Answer </p>
+  </details>
+</iam-accordion>
+```
+
+### Class modifiers
+
+- Adding a class of **.accordion--keep-open** to the accordion will stop the items from closing when another one is opened.
+- Adding a class of **.accordion--straight** to the accordion will remove the slight indentation of the accordion.

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

@@ -0,0 +1,36 @@
+// @ts-nocheck
+import accordion from "../../modules/accordion";
+
+const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets'
+
+class iamAccordion extends HTMLElement {
+
+  constructor(){
+    super();
+    this.attachShadow({ mode: 'open'});
+
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${assetLocation}/css/core.min.css";
+    @import "${assetLocation}/css/components/accordion.css";
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <div class="accordion">
+      <slot></slot>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
+
+    accordion(this);
+
+    // Load in the component CSS into the root so we can style the content of the component
+    this.insertAdjacentHTML("beforebegin", `<link rel="stylesheet" href="${assetLocation}/css/components/accordion.css">`)
+  }
+}
+
+export default iamAccordion;

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

@@ -0,0 +1,26 @@
+### Usage
+
+```
+<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/header/header.component.ts

@@ -0,0 +1,53 @@
+// @ts-nocheck
+class iamHeader 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/header.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${assetLocation}/css/core.min.css";
+    ${loadCSS}
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    :host {
+      max-width:100%!important;
+      padding:0!important;
+    }
+    </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>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
+    
+    const picture = this.shadowRoot.querySelector('picture');
+    const source = this.shadowRoot.querySelector('picture source');
+
+    if(this.hasAttribute('image'))
+      source.setAttribute('srcset', this.getAttribute('image'));
+    else
+      picture.remove();
+    
+  }
+}
+
+export default iamHeader;

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

@@ -0,0 +1,18 @@
+```
+<iam-tabs class="container">
+  <details>
+    <summary>Question 1</summary>
+    <p>Answer </p>
+  </details>
+  <details>
+    <summary>Question 2</summary>
+    <p>Answer</p>
+  </details>
+</iam-tabs>
+```
+
+### Tab Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| title  | String | - | Used for the heading of the component |

package/assets/ts/components/tabs/tabs.component.ts

@@ -0,0 +1,34 @@
+// @ts-nocheck
+import tabs from "../../modules/tabs";
+
+class iamTabs 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/tabs.css";`;
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${assetLocation}/css/core.min.css";
+    ${loadCSS}
+    
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <div class="tabs">
+      <div class="tabs__links"></div>
+      <slot></slot>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
+
+    tabs(this);
+  }
+}
+
+export default iamTabs;

package/assets/ts/dynamic.ts

@@ -0,0 +1,105 @@
+// @ts-nocheck
+// Modules
+import * as helpers from '../js/modules/helpers'
+import nav from '../js/modules/nav'
+import table from '../js/modules/table'
+//import accordion from './modules/accordion'
+import testimonial from '../js/modules/testimonial'
+import carousel from '../js/modules/carousel'
+import form from '../js/modules/form'
+import youtubeVideo from '../js/modules/youtubevideo'
+import modal from '../js/modules/modal'
+
+const components = ['accordion','header','tabs'];
+const prefix = "iam"
+const options = {
+  rootMargin: '50px',
+  threshold: 0.1
+}
+const componentExt = ".component.js";
+
+// Load components - Each component will load once the first of its type has been loaded
+components.forEach((component) => {
+
+  if(document.getElementsByTagName(`${prefix}-${component}`).length === 0)
+    return;
+
+  let callback = (entries:any) => {
+    entries.forEach((entry:any) => {
+      
+      if(entry.intersectionRatio > 0){
+        
+        import(`./components/${component}/${component}${componentExt}`).then(module => {
+          if (!window.customElements.get(`${prefix}-${component}`))
+            window.customElements.define(`${prefix}-${component}`, module.default);
+        }).catch((err) => {
+          console.log(err.message);
+        });  
+
+        intObserver.unobserve(entry.target);
+      }
+    });
+  };
+
+  const intObserver = new IntersectionObserver(callback, options);
+  intObserver.observe(document.getElementsByTagName(`${prefix}-${component}`)[0]);
+});
+
+
+// Attach classes to dom elements
+document.addEventListener("DOMContentLoaded", function() {
+
+  // Global stuff
+  helpers.addBodyClasses(document.body);
+  helpers.addGlobalEvents(document.body);
+  helpers.checkElements(document.body);
+
+  // ANav
+  Array.from(document.querySelectorAll('.nav')).forEach((arrayElement) => {
+    nav(arrayElement);
+  });
+
+  // Advanced tables
+  Array.from(document.querySelectorAll('.table__wrapper')).forEach((arrayElement) => {
+    table(arrayElement);
+  });
+
+  // Accordions
+  /*
+  Array.from(document.querySelectorAll('.accordion')).forEach((arrayElement) => {
+    accordion(arrayElement);
+  });
+*/
+
+  // Testimonial
+  Array.from(document.querySelectorAll('.testimonial')).forEach((arrayElement) => {
+    testimonial(arrayElement);
+  });
+  // Carousel
+  Array.from(document.querySelectorAll('.carousel')).forEach((arrayElement) => {
+    carousel(arrayElement);
+  });
+  // Form
+  Array.from(document.querySelectorAll('form')).forEach((arrayElement) => {
+    form(arrayElement);
+  });
+  // Modal
+  Array.from(document.querySelectorAll('.modal')).forEach((arrayElement) => {
+    modal(arrayElement);
+  });
+  // YouTube videos
+  Array.from(document.querySelectorAll('.youtube-embed')).forEach((arrayElement) => {
+    new youtubeVideo(arrayElement);
+  });
+
+
+  window.addEventListener('hashchange', function() {
+
+    const hash = location.hash.replace('#','');
+    const label = document.querySelector(`label[for="${hash}"]`);
+
+    if (label instanceof HTMLElement)
+      label.click();
+
+  }, false);
+});