@iamproperty/components 4.1.1-beta-7 → 5.1.0-beta

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)
+  });
+    
+});