@iamproperty/components 5.1.0-beta7 → 5.1.0-beta8

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;

package/assets/ts/dynamic.ts

@@ -14,7 +14,7 @@ import youtubeVideo from '../js/modules/youtubevideo'
 
 import iamNotification from './components/notification/notification.component'
 
-const components = ['accordion','header','tabs', 'table','card','pagination','filterlist', 'applied-filters'];
+const components = ['accordion','header','tabs', 'table','card','pagination','filterlist', 'applied-filters', 'nav', 'marketing'];
 const prefix = "iam"
 const options = {
   rootMargin: '50px',

package/assets/ts/modules/carousel.ts

@@ -1,33 +1,32 @@
 // @ts-nocheck
-function carousel(carouselElement) {
+function carousel(carouselElement, row) {
 
   var scrollTimeout;
 
   let carouselInner = carouselElement.querySelector('.carousel__inner');
-  let itemCount = carouselElement.querySelectorAll('.carousel__item').length;
-  let cols = carouselElement.getAttribute('data-cols');
-  let smCols = carouselElement.getAttribute('data-sm-cols');
-  let mdCols = carouselElement.getAttribute('data-md-cols');
-
-  carouselElement.querySelector('.carousel__controls a').setAttribute('aria-current', true);
+  let carouselControls = carouselElement.querySelector('.carousel__controls');
+  let itemCount = row.querySelectorAll('.col').length;
 
   // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
   carouselInner.addEventListener('scroll', function(e){
     clearTimeout(scrollTimeout);
-    scrollTimeout = setTimeout(function(){ 
+    scrollTimeout = setTimeout(function(){
 
       let scrollArea = carouselInner.clientWidth;
       let scrollWidth = carouselInner.scrollWidth;
       let scrollLeft = carouselInner.scrollLeft;
       let targetSlide = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;
-      let lastItemOffset = carouselElement.querySelector('.carousel__item:last-child').offsetLeft;
+      let lastItemOffset = row.querySelector('.col:last-child').offsetLeft + 50;
+
+      if(carouselInner.scrollLeft + scrollArea >= lastItemOffset)
+        targetSlide = itemCount;
 
-      Array.from(carouselElement.querySelectorAll('.carousel__controls a')).forEach((link, index) => {
-        link.removeAttribute('aria-current');
+      Array.from(carouselElement.querySelectorAll('.carousel__controls button')).forEach((button, index) => {
+        button.removeAttribute('aria-current');
       });
 
       carouselElement.querySelector('.control-'+targetSlide).setAttribute('aria-current', true);
-      
+
       // Disable the previous button
       if(targetSlide == 1)
         carouselElement.querySelector('.btn-prev').setAttribute('disabled','disabled');
@@ -35,29 +34,29 @@ function carousel(carouselElement) {
         carouselElement.querySelector('.btn-prev').removeAttribute('disabled');
 
       // Disable the next button if the last item is in view
-      if(carouselInner.scrollLeft + scrollArea > lastItemOffset)
+      if(targetSlide == itemCount)
         carouselElement.querySelector('.btn-next').setAttribute('disabled','disabled');
       else
         carouselElement.querySelector('.btn-next').removeAttribute('disabled');
-
+      
     }, 100); 
 
   }, false);
 
   // when the buttons are used we need to make sure the carousel scrolls to the correct place
-  carouselElement.addEventListener('click', function(e){
+  carouselControls.addEventListener('click', function(e){
 
     for (var target = e.target; target && target != this; target = target.parentNode) {
-      if (target.matches('.carousel__controls a')) {
+      if (typeof target.matches == "function" && target.matches('button')) {
         
         e.preventDefault();
 
-        Array.from(carouselElement.querySelectorAll('.carousel__controls a')).forEach((link, index) => {
-          link.removeAttribute('aria-current');
+        Array.from(carouselControls.querySelectorAll('button')).forEach((button, index) => {
+          button.removeAttribute('aria-current');
         });
         target.setAttribute('aria-current', true);
-
-        const el = document.querySelector(target.getAttribute('href'));
+        
+        const el = row.querySelector(`*:nth-child(${target.getAttribute('data-slide')})`);
 
         carouselInner.scroll({
           top: 0,
@@ -69,11 +68,11 @@ function carousel(carouselElement) {
       }
     }
   }, false);
-
+  
   carouselElement.addEventListener('click', function(e){
 
     for (var target = e.target; target && target != this; target = target.parentNode) {
-      if (target.matches('.btn-next, .btn-prev')) {
+      if (typeof target.matches == "function" && target.matches('.btn-next, .btn-prev')) {
         
         e.preventDefault();
         let scrollTo = target.classList.contains('btn-prev') ? carouselInner.scrollLeft - carouselInner.clientWidth : carouselInner.scrollLeft + carouselInner.clientWidth;
@@ -87,17 +86,6 @@ function carousel(carouselElement) {
       }
     }
   }, false);
-
-
-  // Add responsive hide button classes
-  if(itemCount == 1)
-    carouselElement.classList.add('hide-btns');
-
-  if(smCols >= itemCount)
-    carouselElement.classList.add('hide-sm-btns');
-
-  if(mdCols >= itemCount)
-    carouselElement.classList.add('hide-md-btns');
 }
 
 export default carousel