@iamproperty/components 5.7.1-beta6 → 6.0.0

package/assets/js/tests/chart.spec.js

@@ -0,0 +1,57 @@
+// @ts-nocheck
+import '@testing-library/jest-dom';
+import { getChartData } from "../modules/chart.module.js";
+import "expect-puppeteer";
+import iamBarChart from "../components/barchart/barchart.component.js";
+describe('The bar chart component', () => {
+    if (!window.customElements.get(`iam-barchart`))
+        window.customElements.define(`iam-barchart`, iamBarChart);
+    document.body.innerHTML = `
+<iam-barchart>
+<table>
+  <thead>
+    <tr>
+      <th>Items</th>
+      <th>Value</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Item 1</td>
+      <td>300</td>
+    </tr>
+    <tr>
+      <td>Item 2</td>
+      <td>150</td>
+    </tr>
+    <tr>
+      <td>Item 3</td>
+      <td>100</td>
+    </tr>
+  </tbody>
+</table>
+</iam-barchart>`;
+    test('should create the min attribute as 0', () => {
+        let component = document.querySelector('iam-barchart');
+        let { min } = getChartData(component);
+        expect(min).toEqual(0);
+    });
+    test('should equal the largest single value', () => {
+        let component = document.querySelector('iam-barchart');
+        let { max } = getChartData(component);
+        expect(max).toEqual(300);
+    });
+    test('should equal the largest single value', () => {
+        let component = document.querySelector('iam-barchart');
+        let { max } = getChartData(component);
+        expect(max).toEqual(300);
+    });
+    test('should have the class of .chart--fit-content added as there is less than 10 bars', () => {
+        let component = document.querySelector('iam-barchart');
+        expect(component.classList).toContain("chart--fit-content");
+    });
+    test('should have the class of .chart--no-scale added as there is less than 5 bars', () => {
+        let component = document.querySelector('iam-barchart');
+        expect(component.classList).toContain("chart--no-scale");
+    });
+});

package/assets/sass/components/charts.module.scss

@@ -100,8 +100,8 @@ $chart-height-lg: #{rem(200)}!default;
 
   display: flex;
   flex-direction: column;
-
-  font-weight: var(--chart-font-weight, bold);;
+  position: relative;
+  font-weight: var(--chart-font-weight, bold);
   color: var(--chart-text-color, black);
 
 
@@ -210,7 +210,6 @@ $chart-height-lg: #{rem(200)}!default;
   }
 
   .key {
-
     margin: 0;
 
     &:before {
@@ -234,6 +233,16 @@ $chart-height-lg: #{rem(200)}!default;
   }
 }
 
+@for $i from 1 to 10 {
+  
+  .chart__outer input[type="checkbox"]:focus:nth-child(#{$i}) ~ .chart__key .key:nth-child(#{$i}) {
+    background: var(--colour-btn-action-hover-bg)!important;
+    border: var(--btn-border-width) solid var(--colour-muted)!important;
+  }  
+}
+
+
+
 // Hide chart keys
 .chart__outer > input[type="checkbox"]:not(:checked) ~ .chart__key .key {
   
@@ -418,7 +427,7 @@ $chart-height-lg: #{rem(200)}!default;
     tbody tr {
       display: flex;
       flex-direction: row;
-      justify-content: var(--chart-bar-alignment ,center);
+      justify-content: var(--chart-bar-alignment, left);
       align-items: flex-end;
       border: none;
       width: 100%;

package/assets/ts/components/_global.ts

@@ -0,0 +1,40 @@
+// @ts-nocheck
+export const trackComponentRegistered = (componentName: string) => {
+  // Data layer Web component created
+  window.dataLayer = window.dataLayer || [];
+  window.dataLayer.push({
+    "event": "customElementRegistered",
+    "element": componentName
+  });
+};
+
+export const trackComponent = (component:any, componentName:string, trackEvents:any) => {
+
+  // Data layer Web component created
+  window.dataLayer = window.dataLayer || [];
+  window.dataLayer.push({
+    "event": "customElementAdded",
+    "element": componentName
+  });
+
+  trackEvents.forEach((eventName:string) => {
+    component.addEventListener(eventName, function(event:any){
+
+      let eventDetails = {
+        "event": eventName,
+        "element": componentName,
+        "target": event.target
+      };
+
+      Object.keys(event.detail).forEach((eventKey:string) => {
+
+        const eventDetail = event.detail[eventKey];
+        eventDetails[eventKey] = eventDetail;
+      });
+      
+      window.dataLayer.push(eventDetails);
+    });
+  });
+
+  return true;
+};

package/assets/ts/components/barchart/barchart.component.ts

@@ -1,9 +1,8 @@
 // @ts-nocheck
 import {addClasses,setupChart,setEventListener,setEventObservers,setLongestLabel,setLongestValue,createTooltips} from "../../modules/chart.module";
+import {trackComponent, trackComponentRegistered} from "../_global";
 
-
-// TODO: tooltip
-// TODO: responsive 'fit-content' classes done through JS
+trackComponentRegistered("iam-barchart");
 
 class iamBarChart extends HTMLElement {
 
@@ -36,34 +35,24 @@ class iamBarChart extends HTMLElement {
 	connectedCallback() {
 
     const chartComponent = this;
-    
     const chartID = `chart-${Date.now()+(Math.floor(Math.random() * 100) + 1)}`;
-    
     const orginalTable =  this.querySelector('table');
     const clonedTable = orginalTable.cloneNode(true);
-
-
     const chart = this.shadowRoot.querySelector('.chart');
     const chartOuter = this.shadowRoot.querySelector('.chart__outer');
-    
+    const barCount = chart.querySelectorAll('td:not(:first-child)').length;
 
     chart.appendChild(clonedTable);
-
     addClasses(chartComponent, chartOuter);
 
-
-    const barCount = chart.querySelectorAll('td:not(:first-child)').length;
-
-    if(barCount < 10){
+    if(barCount <= 10){
 
       chartComponent.classList.add('chart--fit-content');
-      //chartComponent.classList.add('chart--display-data');
     }
 
-    if(barCount < 5){
+    if(barCount <= 5){
 
       chartComponent.classList.add('chart--no-scale');
-      //chartComponent.classList.add('chart--display-data');
     }
 
     setupChart(chartComponent,chartOuter,clonedTable);
@@ -71,8 +60,9 @@ class iamBarChart extends HTMLElement {
     setEventListener(chartComponent,chartOuter);
     setLongestLabel(chartOuter);
     setLongestValue(chartOuter);
-
     createTooltips(chartOuter);
+
+    trackComponent(chartComponent,"iam-barchart",['view-change']);
   }
 
   attributeChangedCallback(attrName, oldVal, newVal) {

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

@@ -46,7 +46,7 @@ class iamCard extends HTMLElement {
   const createCardConent () {
 
     // TODO split this out a bit
-    return `${this.hasAttribute('data-image') || this.hasAttribute('data-record') ? `<div class="card__head">${this.hasAttribute('data-image') ? `<img src="${this.getAttribute('data-image')}" alt="" loading="lazy" />` : ``} <div class="card__badges"><slot name="badges"></slot></div></div>` : ''}
+    return `${this.hasAttribute('data-image') || this.hasAttribute('data-record') ? `<div class="card__head" part="head">${this.hasAttribute('data-image') ? `<img src="${this.getAttribute('data-image')}" alt="" loading="lazy" />` : ``} <div class="card__badges"><slot name="badges"></slot></div></div>` : ''}
     <div class="card__body" part="body">
     ${!this.hasAttribute('data-image') && this.querySelector('[slot="badges"]') && this.querySelector('[slot="checkbox"]') ? `<div class="card__badges card__badges--inline"><slot name="badges"></slot></div>` : ''}
     ${!this.hasAttribute('data-image') && !this.hasAttribute('data-record') && this.querySelector('[slot="badges"]') ? `<div class="card__badges"><slot name="badges"></slot></div>` : ''}

package/assets/ts/modules/chart.module.ts

@@ -1,4 +1,3 @@
-import { numberOfDays } from './helpers'
 
 // #region Functions that setup and trigger other functions 
 
@@ -41,20 +40,18 @@ export const setupChart = (chartElement:any,chartOuter:any,tableElement:any) =>
   Array.from(chartOuter.querySelectorAll(':scope > input[type="checkbox"],:scope > input[type="radio"]')).map((element: any) => { element.remove(); })
   // #endregion
 
-  let {xaxis} = getChartData(chartElement,chartOuter);
+  let {xaxis} = getChartData(chartElement);
 
-  setCellData(chartElement,chartOuter,tableElement);
+  setCellData(chartElement,tableElement);
 
   createChartKey(chartOuter,tableElement,chartKey);
-  createChartGuidelines(chartElement,chartOuter,chartGuidelines);
-  createChartYaxis(chartElement,chartOuter,chartYaxis);
+  createChartGuidelines(chartElement,chartGuidelines);
+  createChartYaxis(chartElement,chartYaxis);
 
   if(xaxis){
-    createXaxis(chartElement,chartOuter,xaxis);
+    createXaxis(chartOuter);
   }
 
-
-  
   return true;
 };
 // #endregion
@@ -115,7 +112,7 @@ export const setEventListener = function(chartElement:any, chartOuter:any) {
 
     
     shadowTable.innerHTML = table.innerHTML;
-    setCellData(chartElement,chartOuter,shadowTable);
+    setCellData(chartElement,shadowTable);
 
   });
 }
@@ -132,7 +129,7 @@ export const setEventObservers = function(chartElement:any,chartOuter:any) {
 
     for (const mutation of mutationList) {
 
-      if(mutation.attributeName == 'class' || (mutation.type === 'attributes' && mutation.attributeName === 'data-total') || mutation.type === 'attributes') {
+      if(mutation.attributeName == 'class' || (mutation.type === 'attributes') || mutation.type === 'attributes') {
 
         shadowTable.innerHTML = table.innerHTML;
         setupChart(chartElement,chartOuter,shadowTable);
@@ -173,29 +170,29 @@ export const setEventObservers = function(chartElement:any,chartOuter:any) {
 // #endregion
 
 // #region GET functions
-export const getChartData = function(chartElement:any,chartOuter:any){
+export const getChartData = function(chartElement:any){
 
 
-  let table = chartOuter.querySelector('.chart__wrapper table');
+  let table = chartElement.shadowRoot.querySelector('.chart__wrapper table');
 
   let min:any = chartElement.hasAttribute('data-min') ? chartElement.getAttribute('data-min') : 0;
   let max:any = chartElement.hasAttribute('data-max') ? chartElement.getAttribute('data-max') : getLargestValue(chartElement,table);
-  let type:string = chartElement.hasAttribute('data-type') ? chartElement.getAttribute('data-type') : 'column';
+  //let type:string = chartElement.hasAttribute('data-type') ? chartElement.getAttribute('data-type') : 'column';
   let yaxis:any = chartElement.hasAttribute('data-yaxis') ? chartElement.getAttribute('data-yaxis').split(',') : [];
   let guidelines:any = chartElement.hasAttribute('data-guidelines') ? chartElement.getAttribute('data-guidelines').split(',') : [];
-  let targets:any = chartElement.hasAttribute('data-targets') ? JSON.parse(chartElement.getAttribute('data-targets')) : null;
-  let events:any = chartElement.hasAttribute('data-events') ? JSON.parse(chartElement.getAttribute('data-events')) : null;
+  //let targets:any = chartElement.hasAttribute('data-targets') ? JSON.parse(chartElement.getAttribute('data-targets')) : null;
+  //let events:any = chartElement.hasAttribute('data-events') ? JSON.parse(chartElement.getAttribute('data-events')) : null;
   let xaxis:any = chartElement.hasAttribute('data-xaxis') ? chartElement.getAttribute('data-xaxis').split(',') : null;
-  let increment = chartElement.hasAttribute('data-increment') ? chartElement.getAttribute('data-increment'): null;
+  //let increment = chartElement.hasAttribute('data-increment') ? chartElement.getAttribute('data-increment'): null;
   
-  let start:any = chartElement.hasAttribute('data-start') ? chartElement.getAttribute('data-start') : 0;
-  let end:any = chartElement.hasAttribute('data-end') ? chartElement.getAttribute('data-end') : getLargestValue(chartElement,table); // TODO - get largest value from the data-xaxis
+  //let start:any = chartElement.hasAttribute('data-start') ? chartElement.getAttribute('data-start') : 0;
+  //let end:any = chartElement.hasAttribute('data-end') ? chartElement.getAttribute('data-end') : getLargestValue(chartElement,table); // TODO - get largest value from the data-xaxis
 
 
-  let slope:any = chartElement.hasAttribute('data-slope') ? chartElement.getAttribute('data-slope') : null;
-  let yInt:any = chartElement.hasAttribute('data-yint') ? chartElement.getAttribute('data-yint') : null;
+  //let slope:any = chartElement.hasAttribute('data-slope') ? chartElement.getAttribute('data-slope') : null;
+  //let yInt:any = chartElement.hasAttribute('data-yint') ? chartElement.getAttribute('data-yint') : null;
 
-  return {min,max,type,yaxis,targets,events,xaxis,increment,start,end,slope,yInt,guidelines};
+  return {min,max,yaxis,xaxis,guidelines};
 }
 
 function getLargestValue(chartElement:any,table:any){
@@ -252,7 +249,7 @@ const getValues = function(value:number,min:any,max:any,start?:number){
 // #endregion
 
 // #region SET functions - set data attributes and classes
-export const setCellData = function(chartElement:any,chartOuter:any,table:any){
+export const setCellData = function(chartElement:any,table:any){
   
   Array.from(table.querySelectorAll('tbody tr')).forEach((tr:any) => {
 
@@ -274,7 +271,7 @@ export const setCellData = function(chartElement:any,chartOuter:any,table:any){
     tr.setAttribute('data-numeric',rowValue);
   });
 
-  let {min, max} = getChartData(chartElement,chartOuter);
+  let {min, max} = getChartData(chartElement);
   
   Array.from(table.querySelectorAll('tbody tr')).forEach((tr:any, index) => {
 
@@ -299,19 +296,6 @@ export const setCellData = function(chartElement:any,chartOuter:any,table:any){
         td.setAttribute('data-label',table.querySelectorAll('thead th')[index].textContent);
     });
 
-    /*
-    if(tr.querySelector('[data-label="Total"]')){
-      tr.setAttribute('data-total',tr.querySelector('[data-label="Total"][data-numeric]').getAttribute('data-numeric'));
-    }
-
-    if(tr.querySelector('[data-label="Min"]')){
-      tr.setAttribute('data-min',tr.querySelector('[data-label="Min"][data-numeric]').getAttribute('data-numeric'));
-    }
-    if(tr.querySelector('[data-label="Max"]')){
-      tr.setAttribute('data-max',tr.querySelector('[data-label="Max"][data-numeric]').getAttribute('data-numeric'));
-    }
-
-      */
 
     let rowMin = tr.hasAttribute('data-min') ? tr.getAttribute('data-min') : min;
     let rowMax = tr.hasAttribute('data-max') ? tr.getAttribute('data-max') : max;
@@ -437,20 +421,13 @@ function createChartKeyItem(chartID:string,index:number,text:Array<string>,chart
   return previousInput;
 }
 
-export const createChartGuidelines = function(chartElement:any,chartOuter:any,chartGuidelines:any){
+export const createChartGuidelines = function(chartElement:any,chartGuidelines:any){
 
-  let {min, max, yaxis, increment, guidelines} = getChartData(chartElement,chartOuter);
+  let {min, max, yaxis, guidelines} = getChartData(chartElement);
 
   if(!guidelines.length)
     guidelines = yaxis;
 
-
-  if(increment == "days"){
-    
-    max = numberOfDays(min,max);
-    min = 0;
-  }
-
   chartGuidelines.innerHTML = '';
   for (var i = 0; i < guidelines.length; i++) {
 
@@ -463,56 +440,30 @@ export const createChartGuidelines = function(chartElement:any,chartOuter:any,ch
   }
 }
 
-export const createChartYaxis = function(chartElement:any,chartOuter:any,chartYaxis:any){
-
-  let {min, max, yaxis, increment} = getChartData(chartElement,chartOuter);
-
-  let startDay = min;
-
-  if(increment == "days"){
-
-    max = numberOfDays(min,max);
-    min = 0;
-  }
+export const createChartYaxis = function(chartElement:any,chartYaxis:any){
 
+  let {min, max, yaxis} = getChartData(chartElement);
 
   chartYaxis.innerHTML = '';
   for (var i = 0; i < yaxis.length; i++) {
 
     let value = parseFloat(yaxis[i].replace('£','').replace('%',''));
 
-    if(increment == "days"){
-
-        value = numberOfDays(startDay,yaxis[i]);
-      
-    }
-
     let { axis } = getValues(value,min,max);
     chartYaxis.innerHTML += `<div class="axis__point" style="--percent:${axis}%;"><span>${yaxis[i]}</span></div>`;
   }
 }
 
-export const createXaxis = function(chartElement:any,chartOuter:any,xaxis:any){
+export const createXaxis = function(chartOuter:any){
 
   const chart = chartOuter.querySelector('.chart');
   let chartXaxis = chartOuter.querySelector('.chart__xaxis');
 
-  let {increment,start,end} = getChartData(chartElement,chartOuter);
-
   if(!chartXaxis){
     chartXaxis = document.createElement('div');
     chartXaxis.setAttribute('class','chart__xaxis');
   }
-  if(increment && start && end){
-    chartXaxis.innerHTML = '';
-    for (var i = 0; i < xaxis.length; i++) {
 
-      let value = parseFloat(xaxis[i].replace('£','').replace('%',''));
-      let position = ((value - start)/(end - start)) * 100;
-
-      chartXaxis.innerHTML += `<div class="axis__point" style="--percent:${position}%;"><span>${xaxis[i]}</span></div>`;
-    }
-  }
   chart.prepend(chartXaxis);
 }
 

package/assets/ts/tests/chart.spec.ts

@@ -0,0 +1,77 @@
+// @ts-nocheck
+import '@testing-library/jest-dom'
+import {getChartData} from "../modules/chart.module";
+import puppeteer from 'puppeteer';
+import "expect-puppeteer";
+
+
+import iamBarChart from "../components/barchart/barchart.component";
+
+describe('The bar chart component', () => {
+
+  if (!window.customElements.get(`iam-barchart`))
+    window.customElements.define(`iam-barchart`, iamBarChart);
+
+document.body.innerHTML = `
+<iam-barchart>
+<table>
+  <thead>
+    <tr>
+      <th>Items</th>
+      <th>Value</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Item 1</td>
+      <td>300</td>
+    </tr>
+    <tr>
+      <td>Item 2</td>
+      <td>150</td>
+    </tr>
+    <tr>
+      <td>Item 3</td>
+      <td>100</td>
+    </tr>
+  </tbody>
+</table>
+</iam-barchart>`;
+
+  test('should create the min attribute as 0', () => {
+
+    let component = document.querySelector('iam-barchart');
+    let {min} = getChartData(component);
+
+    expect(min).toEqual(0);
+  });
+
+  test('should equal the largest single value', () => {
+
+    let component = document.querySelector('iam-barchart');
+    let {max} = getChartData(component);
+
+    expect(max).toEqual(300);
+  });
+
+  test('should equal the largest single value', () => {
+
+    let component = document.querySelector('iam-barchart');
+    let {max} = getChartData(component);
+
+    expect(max).toEqual(300);
+  });
+
+  test('should have the class of .chart--fit-content added as there is less than 10 bars', () => {
+
+    let component = document.querySelector('iam-barchart');
+    expect(component.classList).toContain("chart--fit-content");
+  });
+
+  test('should have the class of .chart--no-scale added as there is less than 5 bars', () => {
+
+    let component = document.querySelector('iam-barchart');
+    expect(component.classList).toContain("chart--no-scale");
+  });
+
+});

package/dist/components.es.js

@@ -67,7 +67,7 @@ const Ra = /* @__PURE__ */ m(U, [["render", G]]), J = (t) => t.charAt(0).toUpper
   },
   created() {
     this.$nextTick(function() {
-      import("./table.component.min-9853d2c5.mjs").then((t) => {
+      import("./table.component.min-e37ebd8f.mjs").then((t) => {
         window.customElements.get("iam-table") || window.customElements.define("iam-table", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -453,7 +453,7 @@ const N = /* @__PURE__ */ m(ne, [["render", Se]]), xe = {
   },
   created() {
     this.$nextTick(function() {
-      import("./fileupload.component.min-82035493.mjs").then((t) => {
+      import("./fileupload.component.min-1428f816.mjs").then((t) => {
         window.customElements.get("iam-fileupload") || window.customElements.define("iam-fileupload", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -483,7 +483,7 @@ const qe = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      import("./accordion.component.min-768b3be9.mjs").then((t) => {
+      import("./accordion.component.min-62ce9a03.mjs").then((t) => {
         window.customElements.get("iam-accordion") || window.customElements.define("iam-accordion", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -592,7 +592,7 @@ const Va = /* @__PURE__ */ m(Ne, [["render", Fe]]), ze = {
   name: "Card",
   created() {
     this.$nextTick(function() {
-      import("./card.component.min-c4e53d1e.mjs").then((t) => {
+      import("./card.component.min-c7fcb932.mjs").then((t) => {
         window.customElements.get("iam-card") || window.customElements.define("iam-card", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -623,7 +623,7 @@ const Fa = /* @__PURE__ */ m(ze, [["render", Be]]), Oe = {
   },
   mounted() {
     this.$nextTick(function() {
-      import("./carousel.component.min-a5083bec.mjs").then((t) => {
+      import("./carousel.component.min-561f6fb9.mjs").then((t) => {
         window.customElements.get("iam-carousel") || window.customElements.define("iam-carousel", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -652,7 +652,7 @@ const za = /* @__PURE__ */ m(Oe, [["render", We]]), Ke = {
   },
   mounted() {
     this.$nextTick(function() {
-      import("./header.component.min-2a524d9d.mjs").then((t) => {
+      import("./header.component.min-98618cb0.mjs").then((t) => {
         window.customElements.get("iam-header") || window.customElements.define("iam-header", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1048,7 +1048,7 @@ const Wa = /* @__PURE__ */ m(_t, [["render", Ht]]), Mt = {
   name: "Nav",
   mounted() {
     this.$nextTick(function() {
-      import("./nav.component.min-35f8fe36.mjs").then((t) => {
+      import("./nav.component.min-78e6bbef.mjs").then((t) => {
         window.customElements.get("iam-nav") || window.customElements.define("iam-nav", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1168,7 +1168,7 @@ const Zt = {
   name: "Tabs",
   created() {
     this.$nextTick(function() {
-      import("./tabs.component.min-58743be6.mjs").then((t) => {
+      import("./tabs.component.min-6a848435.mjs").then((t) => {
         window.customElements.get("iam-tabs") || window.customElements.define("iam-tabs", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1315,7 +1315,7 @@ function ha(t, a, e, i, r, s) {
 }
 const es = /* @__PURE__ */ m(pa, [["render", ha]]);
 /*!
-  * iamKey v5.7.1-beta6
+  * iamKey v6.0.0
   * Copyright 2022-2024 iamproperty
   */
 function fa(t, a) {
@@ -1485,7 +1485,7 @@ const as = /* @__PURE__ */ m(ka, [["render", Aa]]), La = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      import("./actionbar.component.min-d141c9b1.mjs").then((t) => {
+      import("./actionbar.component.min-80250f38.mjs").then((t) => {
         window.customElements.get("iam-actionbar") || window.customElements.define("iam-actionbar", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1500,7 +1500,7 @@ function Sa(t, a, e, i, r, s) {
 }
 const ss = /* @__PURE__ */ m(La, [["render", Sa]]);
 /*!
-  * iamKey v5.7.1-beta6
+  * iamKey v6.0.0
   * Copyright 2022-2024 iamproperty
   */
 class R extends HTMLElement {