@iamproperty/components 5.0.0 → 5.1.0-beta

package/assets/ts/components/slider/slider.component.ts

@@ -0,0 +1,189 @@
+// @ts-nocheck
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "Slider"
+});
+
+
+class iamSlider 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/slider.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${coreCSS}";
+    ${loadCSS}
+    </style>
+    <div class="row">
+      <div class="col min pe-2"></div>
+      <div class="col sliders">
+        
+      </div>
+      <div class="col max ps-2"></div>
+    </div>
+    <div class="input__wrapper"><slot></slot><span>Minimum</span><span>Maximum</span></div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
+
+    const slider = this;
+    const minElement = this.shadowRoot.querySelector('.min');
+    const maxElement = this.shadowRoot.querySelector('.max');
+    const slidersHolder = this.shadowRoot.querySelector('.sliders')
+    let inputs = this.querySelectorAll('input');
+    const inputWrapper = this.shadowRoot.querySelector('.input__wrapper');
+    const label = this.closest('label');
+
+    
+    let stepperInterval, stepperEvent = "mouseup", stepperStart = "mousedown";
+    
+    if("ontouchstart" in document.documentElement) {
+      stepperEvent = "touchend";
+      stepperStart = "touchstart";
+    }
+
+    let stepperFunction = function(input, eventType) {
+
+      let value = input.value;
+
+      let min = slider.shadowRoot.querySelector('.is-first').getAttribute('min');
+      let max = slider.shadowRoot.querySelector('.is-last').getAttribute('max');
+
+      if (input.classList.contains('is-last') && !input.classList.contains('is-first')){
+
+        let percent = ((value/(max-min)) * 100);
+        slider.style.setProperty('--percent', percent + "%");
+
+        if(parseFloat(input.value) <= parseFloat(slider.shadowRoot.querySelector('.is-first').value)){
+
+          slider.shadowRoot.querySelector('.is-first').value = input.value;
+          slider.querySelector('.is-first').value = input.value;
+          slider.style.setProperty('--start-percent', percent + "%");
+        }
+      }
+      else if(input.classList.contains('is-first') && !input.classList.contains('is-last')){
+
+        let percent = ((value/(max-min)) * 100);
+        slider.style.setProperty('--start-percent', percent + "%");
+
+        if(parseFloat(input.value) >= parseFloat(slider.shadowRoot.querySelector('.is-last').value)){
+
+          slider.shadowRoot.querySelector('.is-last').value = input.value;
+          slider.querySelector('.is-last').value = input.value;
+          slider.style.setProperty('--percent', percent + "%");
+        }
+      }
+      else {
+        
+        let percent = ((value/(max-min)) * 100).toFixed(2);
+        slider.style.setProperty('--percent', percent + "%");
+      }
+    };
+
+    // Create sliders
+    Array.from(inputs).forEach((input,index) => {
+
+      let rangeInput = input.cloneNode(true);
+      input.setAttribute('type','number');
+      rangeInput.setAttribute('type','range');
+
+      if(index == 0){
+        input.classList.add('is-first');
+        rangeInput.classList.add('is-first');
+
+        minElement.innerHTML = input.getAttribute('min');
+        maxElement.innerHTML = input.getAttribute('max');
+          
+        slidersHolder.appendChild(rangeInput);
+      }
+      
+      if(index == inputs.length-1){
+        input.classList.add('is-last');
+        rangeInput.classList.add('is-last'); 
+        slidersHolder.appendChild(rangeInput);
+      }
+
+      if(index > 1) {
+        input.remove();
+      }
+
+    });
+    inputs = this.querySelectorAll('input');
+    inputWrapper.setAttribute('data-elements',inputs.length);
+
+    
+    const sliders = this.shadowRoot.querySelectorAll('input');
+
+    Array.from(inputs).forEach((input,index) => {
+
+      input.addEventListener('keyup',function(event){
+        sliders[index].value = input.value;
+        stepperFunction(sliders[index]);
+      });
+      input.addEventListener('keydown',function(event){
+        sliders[index].value = input.value;
+        stepperFunction(sliders[index]);
+      });
+
+      input.addEventListener('change',function(event){
+        sliders[index].value = input.value;
+        stepperFunction(sliders[index]);
+      });
+    });
+
+    Array.from(sliders).forEach((input,index) => {
+
+      stepperFunction(input,'start');
+
+      input.addEventListener(stepperStart,function(event){
+        
+        clearInterval(stepperInterval);
+        stepperInterval = setInterval(function() {
+          stepperFunction(input,'drag');
+          inputs[index].value = input.value;
+        }, 10);
+      });
+
+      input.addEventListener(stepperEvent,function(event){
+        clearInterval(stepperInterval);
+      });
+
+      input.addEventListener('change',function(event){
+        clearInterval(stepperInterval);
+        stepperFunction(input,'click');
+        inputs[index].value = input.value;
+      });
+    });
+
+    // Move focus to slider when clicking on label
+    label.addEventListener('click',function(event) {
+
+      event.preventDefault();
+
+      if (this === event.target) {
+        /* click was on label */
+        slider.shadowRoot.querySelector('input').focus();
+        
+      } else {
+        /* click was on input */
+        event.stopPropagation();
+        return false;
+      }
+    });
+
+  } // Connected callback
+}
+
+export default iamSlider;

package/assets/ts/components/table/table.component.ts

@@ -8,7 +8,7 @@ class iamTable 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/table.css";`;
-    const loadExtraCSS = `@import "${assetLocation}/css/components/table.extras.css";`;
+    const loadExtraCSS = `@import "${assetLocation}/css/components/table.global.css";`;
     
     const template = document.createElement('template');
     template.innerHTML = `

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

@@ -16,11 +16,13 @@ class iamTabs 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/tabs.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
     @import "${coreCSS}";
+    ${loadCSS}
 
     :host(.admin-panel){
       display: contents!important;

package/assets/ts/modules/helpers.ts

@@ -47,7 +47,7 @@ export const addGlobalEvents = (body) => {
 
   addEventListener("popstate", (event) => {
 
-    if(event && event.state.type && event.state.type == "pagination"){
+    if(event && event.state && event.state.type && event.state.type == "pagination"){
       let form = document.querySelector(`#${event.state.form}`);
       let pageInput = document.querySelector(`#${event.state.form} [data-pagination]`);
       

package/assets/ts/modules/inputs.ts

@@ -1,14 +1,71 @@
 // @ts-nocheck
 const extendInputs = (body) => {
 
-  document.addEventListener("load", function() {
-
+  function loadInput(){
     // maxlength counter init
-    Array.from(document.querySelectorAll('input')).forEach((input,index) => {
+    Array.from(document.querySelectorAll('input[maxlength]')).forEach((input,index) => {
       let wrapper = input.parentElement;
       setMaxlengthVars(input,wrapper);
     });
-  });
+
+    // Date restrictions 
+    if(document.querySelector('input[type="date"]')){
+
+      const today = new Date();
+      
+      function formatDate(date) {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+      }
+
+      Array.from(document.querySelectorAll('input[type="date"]')).forEach((input,index) => {
+        
+        let startDate = today;
+
+        if(input.hasAttribute('data-start')){
+
+          startDate.setDate(startDate.getDate() + parseInt(input.getAttribute('data-start')));
+          input.setAttribute('min', formatDate(startDate));
+        }
+
+        if(input.hasAttribute('data-period')){
+
+          let timePeriod = parseInt(input.getAttribute('data-period'));
+
+          let endDate = new Date();
+          endDate.setDate(startDate.getDate() + timePeriod);
+
+          input.setAttribute('max', formatDate(endDate));
+        }
+
+        if(input.hasAttribute('data-allowed-days')){
+
+          let allowedDays = JSON.parse(`[${input.getAttribute('data-allowed-days')}]`);
+          
+          input.addEventListener('input', function(e){
+            var day = new Date(this.value).getUTCDay();
+
+            if(allowedDays.includes(day))
+              input.setCustomValidity("");
+            else
+              input.setCustomValidity("That day of the week is not allowed");
+          });
+        }
+      });
+    }
+  }
+
+  if(document.readyState === 'complete') {
+    loadInput();
+  }
+
+  document.onreadystatechange = () => {
+    if (document.readyState === "complete") {
+      loadInput();
+    }
+  };
 
   body.addEventListener('input', (event) => {
     if (event && event.target instanceof HTMLElement && event.target.closest('input,textarea,select')){

package/assets/ts/modules/tabs.ts

@@ -2,6 +2,7 @@
 export const createTabsLinks = function(tabsElement: Element) {
 
   const details = tabsElement.querySelectorAll(':scope > details');
+  const detailsORLinks = tabsElement.querySelectorAll(':scope > details, :scope > a');
   let summaries = tabsElement.querySelectorAll(':scope > details > summary');
   let tabLinks = tabsElement.querySelector(':scope > .tabs__links');
 
@@ -20,33 +21,41 @@ export const createTabsLinks = function(tabsElement: Element) {
   }
 
   // Create the tab buttons from the summary titles
-  details.forEach((detail, index) => {
+  let tabindex = 0;
+  detailsORLinks.forEach((element, index) => {
+  
+    let button = document.createElement('button');
     
-    let summary = detail.querySelector(':scope > summary');
-    let isDisabled = summary.classList.contains('disabled')
+    if(element.matches('details')){
 
-    summary.classList.add('visually-hidden');
-    
-    let button = document.createElement('button');
+      let summary = element.querySelector(':scope > summary');
+      let isDisabled = summary.classList.contains('disabled')
 
-    if (detail.hasAttribute('id')) {
-      button = document.createElement('a');
-      button.setAttribute('href',`#${detail.getAttribute('id')}`);
-    }
+      summary.classList.add('visually-hidden');
+
+      if (element.hasAttribute('id'))
+        button.setAttribute('data-id',`${element.getAttribute('id')}`);
 
-    if (detail.hasAttribute('open')) {
-      button.setAttribute('aria-pressed',true);
+      if (element.hasAttribute('open')) {
+        button.setAttribute('aria-pressed',true);
+      }
+      button.innerHTML = `${summary.innerText}`;
+      button.classList.add('link');
+      button.setAttribute('data-index',tabindex);
+      element.setAttribute('tabindex','-1');
+
+      if (isDisabled) {
+        button.classList.add('disabled')
+      }
+
+      tabindex++;
     }
-    
-    button.innerHTML = `${summary.innerText}`;
-    button.classList.add('link');
-    button.setAttribute('data-index',index);
-    button.setAttribute('tabindex','-1');
+    else if(element.matches('a')){
 
-    if (isDisabled) {
-      button.classList.add('disabled')
+      button = element;      
     }
 
+    button.classList.add('link');
     tabLinks.appendChild(button);
   });
 
@@ -56,10 +65,10 @@ export const setTabsEventHandlers = function(tabsElement: Element){
 
   let details = tabsElement.querySelectorAll(':scope > details');
   let summaries = tabsElement.querySelectorAll(':scope > details > summary');
-  let buttons = tabsElement.querySelectorAll(':scope .tabs__links > .link');
+  let buttons = tabsElement.querySelectorAll(':scope .tabs__links > button');
 
   if(tabsElement.shadowRoot)
-    buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > .link');
+    buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > button');
 
   // Set the on click for the tab buttons, these will open the details box it matches too
   buttons.forEach((button) => {
@@ -83,9 +92,6 @@ export const setTabsEventHandlers = function(tabsElement: Element){
         else
           detail.removeAttribute('open')
       });
-
-      if(button.hasAttribute('href'))
-        history.pushState(undefined, undefined, button.getAttribute('href'));
       
       // Data layer Open Event
       window.dataLayer = window.dataLayer || [];
@@ -99,18 +105,8 @@ export const setTabsEventHandlers = function(tabsElement: Element){
   
   // Make sure we dont loose existing summary functionality
   summaries.forEach((summary, index) => { 
-
-    // Maintain the focus on the summary element but visually highlight the tab button
-    summary.addEventListener("focus", (e) => {
-      buttons.forEach((button) => {
-          
-        button.classList.remove('focus');
-      });
-
-      buttons[index].classList.add('focus');
-    });
-
     summary.addEventListener("click", (e) => {
+
       e.preventDefault();
       buttons[index].click();
     });
@@ -120,15 +116,16 @@ export const setTabsEventHandlers = function(tabsElement: Element){
 
 export const openFirstTab = function(tabsElement: Element){
 
+  if(!tabsElement.querySelector(':scope > details'))
+    return false;
+
   let details = tabsElement.querySelectorAll(':scope > details');
-  let buttons = tabsElement.querySelectorAll(':scope > .tabs__links > button, .tabs__links > a');
+  let buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > button');
 
-  if(tabsElement.shadowRoot)
-    buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > button, .tabs__links > a');
 
-  if(location.hash && tabsElement.querySelector(`.tabs__links [href="${location.hash}"]`)){
-      
-    tabsElement.querySelector(`[href="${location.hash}"]`).setAttribute('open',true);
+  if(location.hash && tabsElement.shadowRoot.querySelector(`.tabs__links [data-id="${location.hash.replace('#','')}"]`)){
+    
+    tabsElement.shadowRoot.querySelector(`[data-id="${location.hash.replace('#','')}"]`).setAttribute('aria-pressed',true);
     tabsElement.querySelector(`details[id="${location.hash.replace('#','')}"]`).setAttribute('open',true);
   }
   else if(!tabsElement.querySelector(`details[open]`)) {

package/assets/ts/tests/slider.spec.ts

@@ -0,0 +1,33 @@
+// @ts-nocheck
+import '@testing-library/jest-dom'
+import * as tableModule from "../modules/table";
+import puppeteer from 'puppeteer';
+import "expect-puppeteer";
+
+
+import iamSlider from "../components/slider/slider.component";
+
+describe('The slider component', () => {
+
+  if (!window.customElements.get(`iam-slider`))
+    window.customElements.define(`iam-slider`, iamSlider);
+
+  test('should always show the minimum and maximum values that it can be set', () => {
+
+    document.body.innerHTML = `<label>Input field label <iam-slider><input type="number" name="percent" min="0" max="100" value="15" step="1" /></iam-slider></label>`;
+    let component = document.querySelector('iam-slider');
+
+    expect(component.shadowRoot.innerHTML).toContain('<div class="col min pe-2">0</div>')
+    expect(component.shadowRoot.innerHTML).toContain('<div class="col max ps-2">100</div>')
+  });
+
+  test('should always have a secondary way of inputing the value i.e. a number input field', () => {
+
+    document.body.innerHTML = `<label>Input field label <iam-slider><input type="number" name="percent" min="0" max="100" value="15" step="1" /></iam-slider></label>`;
+    let component = document.querySelector('iam-slider');
+
+    expect(component.querySelectorAll('input[type="number"]').length).toEqual(1)
+    expect(component.shadowRoot.querySelectorAll('input[type="range"]').length).toEqual(1)
+  });
+    
+});