@iamproperty/components 3.4.5 → 3.4.7

package/assets/ts/bundle.ts

@@ -0,0 +1,87 @@
+// @ts-nocheck
+// Modules
+import * as helpers from '../js/modules/helpers'
+import createDataLayer from '../js/modules/data-layer'
+import nav from '../js/modules/nav'
+//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 iamHeader from './components/header/header.component'
+import iamAccordion from './components/accordion/accordion.component'
+import iamTabs from './components/tabs/tabs.component'
+import iamTable from './components/table/table.component'
+import iamCard from './components/card/card.component'
+import iamAppliedFilters from './components/applied-filters/applied-filters.component'
+import iamPagination from './components/pagination/pagination.component'
+import iamFilterlist from './components/filterlist/filterlist.component'
+
+// Attach classes to dom elements
+document.addEventListener("DOMContentLoaded", function() {
+
+  createDataLayer();
+  // 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);
+
+  if (!window.customElements.get(`iam-table`))
+    window.customElements.define(`iam-table`, iamTable);
+
+  if (!window.customElements.get(`iam-card`))
+    window.customElements.define(`iam-card`, iamCard);
+  
+  if (!window.customElements.get(`iam-filterlist`))
+    window.customElements.define(`iam-filterlist`, iamFilterlist);
+
+  if (!window.customElements.get(`iam-pagination`))
+    window.customElements.define(`iam-pagination`, iamPagination);
+
+  if (!window.customElements.get(`iam-applied-filters`))
+    window.customElements.define(`iam-applied-filters`, iamAppliedFilters);
+
+  // ANav
+  Array.from(document.querySelectorAll('.nav')).forEach((arrayElement) => {
+    nav(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);
+  });
+  // 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,43 @@
+// @ts-nocheck
+import accordion from "../../modules/accordion";
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "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/applied-filters/README.md

@@ -0,0 +1,5 @@
+```
+<iam-applied-filters></iam-applied-filters>
+```
+
+To add an input to the applied filters an attribute of **data-filter-text** needs to be supplied so that the JavaScript knows to listen for the value to change. This attribute can also be used on a wrapper for mulitple input filters also and dynamic values can also be given. **$value** passes the inputs value as the filter text and **$1,$2,$3...** will pass the corresponding child input value to the text.

package/assets/ts/components/applied-filters/applied-filters.component.ts

@@ -0,0 +1,33 @@
+// @ts-nocheck
+import createAppliedFilters from "../../modules/applied-filters";
+
+const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets'
+const loadCSS = `@import "${assetLocation}/css/components/applied-filters.css";`;
+
+class iamAppliedFilters extends HTMLElement {
+
+  constructor(){
+    super();
+    this.attachShadow({ mode: 'open'});
+
+    let classList = this.classList.toString();
+    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="applied-filters ${classList}"></div>
+    <slot></slot>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
+
+    createAppliedFilters(this,this.shadowRoot.querySelector('.applied-filters'));
+  }
+}
+
+export default iamAppliedFilters;

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

@@ -0,0 +1,22 @@
+```
+<a href="/link-url">
+  <iam-card>Link content</iam-card>
+</a>
+```
+
+**Note**
+
+The card component needs to be wrapped with a link or a button, this is required to give the card any functionality.
+
+**Properties**
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| data-total | Int | - | Optional total number , usually use on the filter card type |
+| data-image | image url | - | Optional image url to create a card header with an image as its background |
+
+**Class modifiers**
+
+- Adding a class of **.card--filter** will implement the filter card design. 
+- Adding a class of **.border-o** will remove the box-shadow of the card and make some minor sizing adjustments. 
+- Adding a class like **.colour-warning** will update the colour of the left berder for the filter card. The theme colours will be avialable to use.

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

@@ -0,0 +1,117 @@
+// @ts-nocheck
+class iamCard 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/card.css";`;
+
+    if(this.querySelector('.icon'))
+      this.classList.add('card--has-icon');
+
+    let classList = this.classList.toString();
+
+    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="card ${classList}" tabindex="0" role="button">
+      ${this.hasAttribute('data-image') ? `<div class="card__head"><img src="${this.getAttribute('data-image')}" alt="" loading="lazy" /></div>` : ''}
+      <div class="card__body">
+      ${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>
+      </div>
+      ${this.hasAttribute('data-cta') ? `<div class="card__footer"><span class="link">${this.getAttribute('data-cta')}</span></div>` : ''}
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
+    
+    // Mimic clicking the parent node so the focus and target events can be on the card
+    const parentNode = this.parentNode.closest('a, button, label')
+    const card = this.shadowRoot.querySelector('.card')
+
+    parentNode.setAttribute('tabindex','-1');
+    
+    if(parentNode.matches('label[for]')){
+
+      let isChecked = document.getElementById(parentNode.getAttribute('for')).checked
+        
+      if(isChecked)
+        card.classList.add('active');
+    }
+
+    card.addEventListener('click', (event) => {
+
+      if(parentNode.matches('label[for]')){
+
+        let isChecked = document.getElementById(parentNode.getAttribute('for')).checked
+          
+        if(!isChecked)
+          card.classList.add('active');
+        else
+          card.classList.remove('active');
+      }
+      else {
+        parentNode.click();
+      }
+    });
+
+    card.addEventListener('keydown', (event) => {
+
+      switch(event.keyCode)
+      {
+          case 32:
+          case 13:
+            if(parentNode.matches('label[for]')){
+
+              let isChecked = document.getElementById(parentNode.getAttribute('for')).checked
+                
+              if(!isChecked)
+                card.classList.add('active');
+              else
+                card.classList.remove('active');
+            }
+            else {
+              parentNode.click();
+            }
+              break;
+          default:
+              break;
+      }
+    });
+  }
+
+  static get observedAttributes() {
+    return ["data-total","class"];
+  }
+  
+  attributeChangedCallback(attrName, oldVal, newVal) {
+    switch (attrName) {
+      case "data-total": {
+        this.shadowRoot.querySelector('.card__total').innerHTML = newVal;
+        break;
+      }
+      case "class": {
+        let classList = this.classList.toString();
+            
+        if(this.querySelector('.icon'))
+          classList += ' card--has-icon';
+
+        this.shadowRoot.querySelector('.card').setAttribute('class',`card ${classList}`);
+        break;
+      }
+    }
+
+  }
+}
+
+export default iamCard;

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

@@ -0,0 +1,17 @@
+```
+<iam-filterlist>
+<ul>
+  <li>Olivia Anderson</li>
+  <li>Ethan Ramirez</li>
+  <li>Sophia Patel</li>
+  <li>Noah Jenkins</li>
+  <li>Ava Thompson</li>
+</ul>
+</iam-filterlist>
+```
+
+**Properties**
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| data-max-height | string | '' | Optional choice from small, medium or large control of the height of the list. Giving it a scrollable area. |

package/assets/ts/components/filterlist/filterlist.component.ts

@@ -0,0 +1,60 @@
+// @ts-nocheck
+import filterlist from "../../modules/filterlist";
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "filterlist"
+});
+
+class iamFilterlist extends HTMLElement {
+
+  constructor(){
+    super();
+    this.attachShadow({ mode: 'open'});
+
+    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${assetLocation}/css/core.min.css";
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    
+    :host {
+      margin-bottom: 3rem;
+      display:block;
+    }
+    </style>
+    <div class="form-control__wrapper">
+      <label for="search" class="visually-hidden">Search</label>
+      <span class="suffix" role="presentation"><slot name="icon"></slot></span>
+      <input name="search" id="search" type="text" class="form-control" autocomplete="off">
+    </div>
+    <div class="list__wrapper">
+      <slot></slot>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
+
+    const maxHeights = {
+      "small": "12.5rem",
+      "medium": "25rem",
+      "large": "37.5rem"
+    }
+
+    let maxHeightClass = (this.hasAttribute('data-max-height') && maxHeights[this.getAttribute('data-max-height')] ? 'list__wrapper--'+this.getAttribute('data-max-height') : '');
+
+    this.shadowRoot.querySelector('.list__wrapper').classList.add(maxHeightClass);
+
+    if(!this.querySelector('i.fa-search'))
+      this.innerHTML += '<i class="fa fa-light fa-search" aria-hidden="true" slot="icon"></i>';
+
+    filterlist(this.querySelector('ul'),this.shadowRoot.querySelector('#search'));
+  }
+}
+
+export default iamFilterlist;

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,61 @@
+// @ts-nocheck
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "header"
+});
+
+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/pagination/README.md

@@ -0,0 +1,11 @@
+```
+<iam-pagination data-total="12"></iam-pagination>
+```
+
+**Properties**
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| data-total | int | 0 | The total amount is needed to work out how many pagination buttons are needed |
+| data-page | int | 1 | Override the current page value |
+| data-show | int | 15 | Update how many items can be shown per page |

package/assets/ts/components/pagination/pagination.component.ts

@@ -0,0 +1,45 @@
+// @ts-nocheck
+import createPaginationButttons from "../../modules/pagination";
+
+class iamPagination extends HTMLElement {
+
+  constructor(){
+    super();
+    this.attachShadow({ mode: 'open'});
+    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${assetLocation}/css/core.min.css";
+    </style>
+    <div class="pagination__wrapper d-none">
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+    // Set default attributes
+    const params = new URLSearchParams(window.location.search);
+
+    if(!this.hasAttribute('data-total'))
+      this.setAttribute('data-total', this.querySelectorAll('table tbody tr').length);
+
+    if(!this.hasAttribute('data-page'))
+      this.setAttribute('data-page', (params.has('page') ? params.get('page') : 1));
+
+    if(!this.hasAttribute('data-show'))
+      this.setAttribute('data-show', (params.has('show') ? params.get('show') : 15));
+
+    if(!this.hasAttribute('data-increment'))
+        this.setAttribute('data-increment', 15);
+
+    this.setAttribute('data-pages', Math.ceil(this.getAttribute('data-total') / this.getAttribute('data-show')));
+    createPaginationButttons(this,this.shadowRoot.querySelector('.pagination__wrapper'));
+  }
+
+	connectedCallback() {
+    this.shadowRoot.querySelector('.pagination__wrapper').classList.remove('d-none');
+  }
+}
+
+export default iamPagination;

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

@@ -0,0 +1,23 @@
+```
+<iam-table class="container">
+  <table>
+    <thead>....</thead>
+    <tbody>...</tbody>
+  </table>
+</iam-tabs>
+```
+
+**Properties**
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| data-show | int | 15 | Update how many rows can be shown per page |
+| data-filterby | string (form ID) | | Give an optional form ID to connect a form to the table and make it act like a filtering system |
+
+
+**Class modifiers**
+
+- Adding a class of **.table--cta** to the table component will fix the last column of the table in place (While on tablet or desktop). 
+- Adding a class of **.table--export** to the table component will create a button at the bottom of the table to export its contents out as a CSV file.
+- Adding a class of **.table--fullwidth** to the table component will prevent it from becoming a stacked view on mobile.
+- Adding a class of **.table--mh-small**,**.table--mh-medium** or **.table--mh-large** to the table component will give the table container a max height and the ability to scroll.