@iamproperty/components 5.7.1-beta5 → 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/barchart.component.scss

@@ -12,6 +12,7 @@
   
   .chart__outer > input[type="checkbox"]:nth-of-type(#{$i}):not(:checked) ~ .chart__wrapper table tbody tr td:not(:first-child):nth-child(#{$i+1}) {
     display: none;
+    opacity: 0;
   }
 }
 // #endregion
@@ -85,6 +86,13 @@
       display: block!important;
       height: var(--bar-height, #{rem(24)});
       line-height: var(--bar-height, #{rem(24)});
+      max-width: var(--xaxis-max-width, none);
+
+      > *:not([popover]) {
+        max-width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
     }
   }
 
@@ -96,11 +104,14 @@
     opacity: 0;
     pointer-events: none;
     white-space: nowrap;
+    
+    width: var(--xaxis-max-width, none);
   }
 
   &:has(td .tooltip) .chart__wrapper[data-longest-label]:before {
   
     padding-right: 2em;
+    width: calc(var(--xaxis-max-width, none) - 1rem);
   }
 
   .chart__wrapper[data-longest-label] table tbody tr td:first-child {
@@ -114,7 +125,7 @@
       left: auto!important;
       right: 100%!important;
       padding-right: 0.5em;
-    
+      width: fit-content;
   }
 
   
@@ -126,7 +137,7 @@
 // #endregion
 
 // #region stacked
-.chart--stacked .chart__wrapper {
+:host(.chart--stacked) .chart__wrapper {
   table tbody tr {
     --bar-gap: 0;
     flex-direction: column-reverse;
@@ -138,6 +149,29 @@
     }
   }
 }
+:host(.chart--stacked.chart--horizontal) .chart__wrapper table tbody tr {
+  
+  flex-direction: row;
+
+  &::after {
+    content: attr(data-numeric);
+    position: absolute;
+    opacity: 1 !important;
+    bottom: 100%;
+    left: 50%;
+    transform: translate(-50%, 0);
+    display: block !important;
+    height: fit-content;
+    margin: 0;
+    bottom: 50%;
+    left: calc(var(--percent) + .5rem);
+    transform: translate(0, 50%);
+  }
+
+  td:after {
+    content: none;
+  }
+}
 // #endregion
 
 // #region animation
@@ -267,13 +301,23 @@
   }
 }
 
+:host(.chart--fit-content:not(.chart--horizontal).chart--no-scale) {
+  --fc-group-width: #{rem(22)};
+  --fc-value-width: #{rem(24)};
+  
+  table{
+    height: var(--chart-height-lg-set,#{rem(120)});
+  }
+  
+}
+
 .chart__wrapper {
       
 
   @container (min-width: #{em($device-xs-width,16)}) {
     --fc-group-width: #{rem(22)};
     --fc-value-width: #{rem(24)};
-    
+
   }
 }
 

package/assets/sass/components/card.global.scss

@@ -4,6 +4,8 @@
 
 iam-card {
 
+  margin-bottom: 1.5rem;
+  display: block;
 
   @supports not selector(:has(*)) {
       
@@ -67,6 +69,10 @@ iam-card {
   }
 }
 
+:is(a, button, label) iam-card{
+  margin-bottom: 0!important;
+}
+
 
 [data-select-container]:has([type="checkbox"]:checked) iam-card {
 
@@ -93,4 +99,4 @@ iam-card {
 a[target="_blank"] iam-card::part(card) {
 
   --icon: var(--icon-new-tab);
-}
+}

package/assets/sass/components/card.scss

@@ -55,59 +55,61 @@
     }
   }
 
-  &:before,
-  &:after {
-    content: "";
-    position: absolute;
-    right: var(--card-icon-right);
-    bottom: var(--card-bottom-padding);
-    height: rem(24);
-    width: rem(24);
-    background: var(--colour-warning);
-    border-radius: 50%;
-  }
+  &:not(:has(.dialog__wrapper)){
 
-  &:after {
-    background: var(--colour-primary-theme);
-    mask-image: var(--icon,var(--icon-arrow));
-    mask-size: 50%;
-    mask-repeat: no-repeat;
-    mask-position: 50% 50%;
-    -webkit-mask-image: var(--icon,var(--icon-arrow));
-    -webkit-mask-size: 50%;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: 50% 50%;
-    z-index: 2;
-  }
+    &:before,
+    &:after {
+      content: "";
+      position: absolute;
+      right: var(--card-icon-right);
+      bottom: var(--card-bottom-padding);
+      height: rem(24);
+      width: rem(24);
+      background: var(--colour-warning);
+      border-radius: 50%;
+    }
 
-  &:is(:hover,:focus,.hover) {
-    --hover-outline-colour-default: var(--colour, var(--colour-primary));
-    outline: 2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));
-    outline-offset: -2px;
-  }
-  
-  // Update arrow cololur
-  &:not([class*="colour-"]):is(:hover,:focus,.hover,:active, .active) {
+    &:after {
+      background: var(--colour-primary-theme);
+      mask-image: var(--icon,var(--icon-arrow));
+      mask-size: 50%;
+      mask-repeat: no-repeat;
+      mask-position: 50% 50%;
+      -webkit-mask-image: var(--icon,var(--icon-arrow));
+      -webkit-mask-size: 50%;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: 50% 50%;
+      z-index: 2;
+    }
 
-    &:before {
-      background: var(--hover-icon-bg, var(--colour-primary-theme));
+    &:is(:hover,:focus,.hover) {
+      --hover-outline-colour-default: var(--colour, var(--colour-primary));
+      outline: 2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));
+      outline-offset: -2px;
     }
-    &:after {
-      background: var(--hover-icon-colour, #ffffff);
+    
+    // Update arrow cololur
+    &:not([class*="colour-"]):is(:hover,:focus,.hover,:active, .active) {
+
+      &:before {
+        background: var(--hover-icon-bg, var(--colour-primary-theme));
+      }
+      &:after {
+        background: var(--hover-icon-colour, #ffffff);
+      }
     }
-  }
 
-  &:is(:active, .active){
-    --card-icon-right: var(--card-icon-right-overide,0.5rem);
-    outline: none;
-  }
+    &:is(:active, .active){
+      --card-icon-right: var(--card-icon-right-overide,0.5rem);
+      outline: none;
+    }
 
-  &:is(:active){
-    background: #FCFCFC;
+    &:is(:active){
+      background: #FCFCFC;
+    }
+    
   }
   
-
-  
   span{
     display: block;
     font-weight: bold;
@@ -534,4 +536,71 @@ slot[name="btns"] {
   margin: 0!important;
 }
 
-//#endregion
+//#endregion
+
+.dialog__wrapper {
+  position: absolute;
+  right: 1rem;
+  bottom: 2rem;
+  min-width: 3rem !important;
+  left: auto;
+  z-index: 999;
+
+  > dialog {
+    
+    display: var(--menu-display, none);
+    position: fixed;
+    top: anchor(top);
+    position-anchor: --anchor-el;
+    left: anchor(right);
+    right: auto;
+    margin: 0 0 0 #{rem(4)};
+    padding: rem(16);
+
+
+    &::backdrop {
+      display: none;
+    }
+  }
+
+  > dialog:popover-open {
+
+    display: block!important;
+  }
+
+  &:has(dialog:popover-open) > button {
+    background-color: var(--colour);
+  }
+
+  > button {
+    margin: 0;
+    anchor-name: --anchor-el;
+
+    &:not(:hover,:focus,:focus-within,:active){
+        
+      background: var(--ellipsis-bg);
+    }
+  }
+}
+::slotted([slot="actions"]){
+  border: none !important;
+  margin: 0 !important;
+  display: block!important;
+  width: fit-content;
+}
+::slotted([slot="primary-action"]){
+  overflow: hidden;
+  background-color: transparent;
+  text-indent: -300%;
+  position: absolute!important;
+  inset: 0;
+  margin: 0!important;
+  z-index: 99;
+  border: none;
+}
+::slotted([slot="primary-action"]:is(:hover,:focus,.hover)) {
+  --hover-outline-colour-default: var(--colour, var(--colour-primary));
+  outline: 2px solid var(--hover-outline-colour, var(--hover-outline-colour-default));
+  outline-offset: -2px;
+  border-radius: var(--card-border-radius)!important;
+}

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

@@ -27,9 +27,9 @@ iam-barchart:not(.chart--horizontal)::part(chart-key) {
   order: 3;
 }
 
-iam-barchart:not(.chart--horizontal)::part(key),
-iam-barchart:not(.chart--horizontal)::part(key-checked),
-iam-barchart:not(.chart--horizontal)::part(key-unchecked) {
+iam-barchart::part(key),
+iam-barchart::part(key-checked),
+iam-barchart::part(key-unchecked) {
 
   --key-border-radius: 50%;
   --btn-border-width: 1px;
@@ -46,21 +46,22 @@ iam-barchart:not(.chart--horizontal)::part(key-unchecked) {
   color: var(--colour-heading);
 }
 
-iam-barchart:not(.chart--horizontal)::part(key):is(:hover, :focus, .hover, :focus-within):not([disabled],:active, .active),
-iam-barchart:not(.chart--horizontal)::part(key-checked):is(:hover, :focus, .hover, :focus-within):not([disabled],:active, .active),
-iam-barchart:not(.chart--horizontal)::part(key-unchecked):is(:hover, :focus, .hover, :focus-within):not([disabled],:active, .active) {
+iam-barchart::part(key):is(:hover, :focus, .hover, :focus-within):not([disabled],:active, .active),
+iam-barchart::part(key-checked):is(:hover, :focus, .hover, :focus-within):not([disabled],:active, .active),
+iam-barchart::part(key-unchecked):is(:hover, :focus, .hover, :focus-within):not([disabled],:active, .active) {
   background: var(--colour-btn-action-hover-bg);
 }
-iam-barchart:not(.chart--horizontal)::part(key):is(:hover, :focus, .hover, :focus-within),
-iam-barchart:not(.chart--horizontal)::part(key-checked):is(:hover, :focus, .hover, :focus-within),
-iam-barchart:not(.chart--horizontal)::part(key-unchecked):is(:hover, :focus, .hover, :focus-within){
+iam-barchart::part(key):is(:hover, :focus, .hover, :focus-within),
+iam-barchart::part(key-checked):is(:hover, :focus, .hover, :focus-within),
+iam-barchart::part(key-unchecked):is(:hover, :focus, .hover, :focus-within){
   background: var(--colour-btn-action-hover-bg);
 }
 
-iam-barchart:not(.chart--horizontal)::part(key-unchecked) {
+iam-barchart::part(key-unchecked) {
     
   opacity: 0.25;
 }
+
 iam-barchart::part(tooltip) {
   text-decoration: none!important;
 }
@@ -76,4 +77,8 @@ iam-barchart::part(tooltip):after{
   color: var(--colour-primary);
   border: none;
 
+}
+
+iam-barchart{
+  //--xaxis-max-width: 3rem;
 }

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%;
@@ -474,6 +483,12 @@ $chart-height-lg: #{rem(200)}!default;
         position: relative;
         padding: 0;
         background: var(--chart-colour);
+
+        @media screen and (prefers-color-scheme: dark) {
+          
+          background: color-mix(in oklab, var(--chart-colour), black 20%);
+        }
+
         border-top-right-radius: 4px;
         border-top-left-radius: 4px;
 

package/assets/sass/elements/badge-tag.scss

@@ -30,6 +30,12 @@
 
   border-radius: rem(6);
   padding: 0 rem(8);
+
+  &--rounded {
+    border-radius: 1rem;
+    min-width: 1.625rem;
+    padding: 0;
+  }
 }
 
 .tag {

package/assets/sass/elements/dialog.scss

@@ -7,8 +7,7 @@ body:not(.js-enabled) dialog:not([open]):target {
 }
 
 // #region Default styling of both modals and popovers
-dialog[open] {
-
+dialog {
   --dialog-padding: #{rem(24)};
 
   --mh-padding-inline: var(--dialog-padding);
@@ -22,7 +21,12 @@ dialog[open] {
   border-radius: rem(10);
   padding: var(--dialog-padding);
   outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+}
+
 
+dialog[open] {
+
+  
   display: flex;
   flex-direction: column;
 

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 {
 
@@ -19,7 +18,6 @@ class iamBarChart extends HTMLElement {
     <style>
     ${loadCSS}
     </style>
-    <slot name="before"></slot>
     <div class="chart__outer" part="outer">
       <div class="chart__key" part="chart-key"></div>
       <div class="chart__wrapper" part="wrapper">
@@ -29,8 +27,7 @@ class iamBarChart extends HTMLElement {
         </div>
       </div>
       <div class="chart__spacer"><span part="spacer"></span</div>
-    </div>
-    <slot name="after"></slot>`;
+    </div>`;
 
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
@@ -38,37 +35,34 @@ 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);
 
-    addClasses(chartComponent);
+    if(barCount <= 10){
 
+      chartComponent.classList.add('chart--fit-content');
+    }
 
-    const barCount = chart.querySelectorAll('td:not(:first-child)').length;
-
-    if(barCount < 10){
+    if(barCount <= 5){
 
-      chartComponent.classList.add('chart--fit-content');
-      chartComponent.classList.add('chart--display-data');
+      chartComponent.classList.add('chart--no-scale');
     }
 
     setupChart(chartComponent,chartOuter,clonedTable);
     setEventObservers(chartComponent,chartOuter);
-    setEventListener(chartOuter);
+    setEventListener(chartComponent,chartOuter);
     setLongestLabel(chartOuter);
     setLongestValue(chartOuter);
-
     createTooltips(chartOuter);
+
+    trackComponent(chartComponent,"iam-barchart",['view-change']);
   }
 
   attributeChangedCallback(attrName, oldVal, newVal) {