@iamproperty/components 5.7.1-beta5 → 6.0.0

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

@@ -14,7 +14,7 @@ class iamCard extends HTMLElement {
     super();
     this.attachShadow({ mode: 'open'});
 
-    if(this.querySelector('*:not(.badge):not(small):not(.btn) > [class*="fa-"]:not(.btn)'))
+    if(this.querySelector('*:not(.badge):not(small):not(.btn):not(button) > [class*="fa-"]:not(.btn)'))
       this.classList.add('card--has-icon');
 
     let classList = this.classList.toString();
@@ -45,7 +45,8 @@ class iamCard extends HTMLElement {
 
   const createCardConent () {
 
-    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>` : ''}
+    // TODO split this out a bit
+    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>` : ''}
@@ -55,6 +56,13 @@ class iamCard extends HTMLElement {
     </div>
     ${this.hasAttribute('data-add-link') ? `<button class="btn btn-compact btn-secondary fa-plus">Add property</button>` : ''}
     <slot name="checkbox"></slot>
+    <slot name="primary-action"></slot>
+    <div class="dialog__wrapper d-none">
+      <button class="btn btn-secondary btn-compact fa-ellipsis-vertical" popovertarget="actions" title="${this.hasAttribute('data-menu-title') ? this.getAttribute('data-menu-title') : 'Further actions'}">Lorum ipsum</button>
+      <dialog class="dialog--fix dialog--list" id="actions" popover>
+        <slot name="actions"></slot>
+      </dialog>
+    </div>
     <div class="card__footer" part="footer">
       <slot name="footer"></slot>
       <slot name="btns"></slot>
@@ -66,11 +74,34 @@ class iamCard extends HTMLElement {
     this.classList.add('loaded');
 
     // Mimic clicking the parent node so the focus and target events can be on the card
-    const parentNode = this.parentNode.closest('a, button, label, router-link')
+    const component = this;
+    const parentNode = component.parentNode.closest('a, button, label, router-link');
     const card = this.shadowRoot.querySelector('.card')
     const btnCompact =  this.shadowRoot.querySelector('.btn-compact');
     const recordType = this.hasAttribute('data-record') ? this.getAttribute('data-record') : '';
 
+
+    // Add the actions slot to the buttons and links to move them into a dialog warpper
+    const actionsWrapper = this.shadowRoot.querySelector('.dialog__wrapper');
+    let buttons = component.querySelectorAll('button[slot="actions"],a[slot="actions"]');
+    if(buttons.length){
+
+      const actionsWrapper = this.shadowRoot.querySelector('.dialog__wrapper');
+      const actionsDialog = this.shadowRoot.querySelector('.dialog__wrapper dialog');
+      const actionsBtn = actionsWrapper.querySelector('button');
+
+      actionsWrapper.classList.remove('d-none');
+
+      Array.from(buttons).forEach((button,index)=>{
+
+        button.classList.add('btn');
+        button.classList.add('btn-action');
+      });
+    }
+    else {
+      actionsWrapper.remove();
+    }
+
     /* 
       If the parentNode is actually just a div, 
       we don't want to look for anything or add events 
@@ -209,7 +240,7 @@ class iamCard extends HTMLElement {
         if(oldVal != newVal){
           let classList = this.classList.toString();
               
-          if(this.querySelector('*:not(.badge):not(small):not(.btn) > [class*="fa-"]:not(.btn)'))
+          if(this.querySelector('*:not(.badge):not(small):not(.btn):not(button) > [class*="fa-"]:not(.btn)'))
             classList += ' card--has-icon';
 
           this.shadowRoot.querySelector('.card').setAttribute('class',`card ${classList}`);

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

@@ -1,18 +1,24 @@
-import { numberOfDays } from './helpers'
 
 // #region Functions that setup and trigger other functions 
 
-export const addClasses = (chartElement:any) => {
+export const addClasses = (chartElement:any, chartOuter:any) => {
 
   // add colour classes
   for (let i = 1; i <= 10; i++) {
     if(chartElement.hasAttribute(`data-colour-${i}`)){
 
       let colour = chartElement.getAttribute(`data-colour-${i}`);
-
       chartElement.style.setProperty(`--chart-colour-${i}`, `var(--chart-colour-${colour})`);
       chartElement.style.setProperty(`--chart-colour-${i}-hover`, `var(--chart-colour-${colour}-hover)`);
     }
+
+    Array.from(chartOuter.querySelectorAll(`[data-colour-${i}]`)).forEach((element:HTMLElement) => {
+      
+      let colour = element.getAttribute(`data-colour-${i}`);
+      element.style.setProperty(`--chart-colour-${i}-set`, `var(--chart-colour-${colour})`);
+      element.style.setProperty(`--chart-colour-${i}-hover`, `var(--chart-colour-${colour}-hover)`);
+    });
+
   }
 
   return true;
@@ -34,26 +40,24 @@ 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
 
 // #region Event handlers and observers
-export const setEventListener = function(chartOuter:any) {
+export const setEventListener = function(chartElement:any, chartOuter:any) {
 
   let chart = chartOuter.querySelector('.chart');
   chart.addEventListener('mousemove', (event:any) => {
@@ -81,15 +85,35 @@ export const setEventListener = function(chartOuter:any) {
       label.setAttribute('part','key-unchecked');
   });
 
-  chartOuter.addEventListener('change', function(){
+  
+  let table = chartElement.querySelector('table');
+  let shadowTable = chartOuter.querySelector('table');
+
+  chartOuter.addEventListener('change', function(event:any){
+
+    let eventTarget = event.target;
+
+    const customEvent = new CustomEvent("view-change", {  detail: { 
+                                                            'data-dataset': eventTarget.getAttribute('data-dataset'), 
+                                                            'label': eventTarget.getAttribute('data-label'),
+                                                            'checked': eventTarget.checked
+                                                          }
+                                                        });
+
+    chartElement.dispatchEvent(customEvent);
 
     Array.from(labels).forEach((label:HTMLElement) => {
       
-      if(chartOuter.querySelector(`input#${label.getAttribute('for')}`).checked)
+      if(chartOuter.querySelector(`input#${label.getAttribute('for')}`)?.checked)
         label.setAttribute('part','key-checked');
       else
         label.setAttribute('part','key-unchecked');
     });
+
+    
+    shadowTable.innerHTML = table.innerHTML;
+    setCellData(chartElement,shadowTable);
+
   });
 }
 
@@ -105,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);
@@ -146,48 +170,46 @@ 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(table);
-  let type:string = chartElement.hasAttribute('data-type') ? chartElement.getAttribute('data-type') : 'column';
+  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 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(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(table:any){
+function getLargestValue(chartElement:any,table:any){
+
+  const selector = chartElement.classList.contains('chart--stacked') ? 'tbody tr' : 'tbody td:not(:first-child)';
 
-  let values = Array.from(table.querySelectorAll('tbody td:not(:first-child)')).map((element: any) => {
+  let values = Array.from(table.querySelectorAll(selector)).map((element: any) => {
 
-    let currentValue:string|number = String(element.textContent);
-    currentValue = currentValue.replace('£','');
-    currentValue = currentValue.replace('%','');
-    currentValue = currentValue.replace(',','');
-    currentValue = Number.parseFloat(currentValue);
+    let currentValue = element.getAttribute('data-numeric');
 
     return currentValue;
-  })
+  });
 
-  let largetValue:number = Math.max(...values);
+  let largestValue:number = Math.max(...values);
 
   // TO DO round to the nearest 10, 100, 1000 and so on
-  return Math.ceil(largetValue);
+  return Math.ceil(largestValue);
 }
 
 const getValues = function(value:number,min:any,max:any,start?:number){
@@ -227,12 +249,29 @@ 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){
   
-  let {min, max} = getChartData(chartElement,chartOuter);
+  Array.from(table.querySelectorAll('tbody tr')).forEach((tr:any) => {
+
+    let rowValue = 0;
+    // Set the data numeric value if not set
+    Array.from(tr.querySelectorAll('td:not(:first-child)')).forEach((td:any) => {
+
+      let value = parseFloat(td.textContent.replace('£','').replace('%','').replace(',',''));
+    
+      td.setAttribute('data-numeric',value);
+      td.setAttribute('data-value',td.textContent);
+
+      let display = getComputedStyle(td).display;
+
+      if(display != 'none')
+        rowValue += value;
+    });
+
+    tr.setAttribute('data-numeric',rowValue);
+  });
 
-  let increment = chartElement.getAttribute('data-increment');
-  let startDay = min;
+  let {min, max} = getChartData(chartElement);
   
   Array.from(table.querySelectorAll('tbody tr')).forEach((tr:any, index) => {
 
@@ -240,24 +279,10 @@ export const setCellData = function(chartElement:any,chartOuter:any,table:any){
 
     tr.setAttribute('part','group');
 
-    // Set the data numeric value if not set
-    Array.from(tr.querySelectorAll('td:not([data-numeric]):not(:first-child)')).forEach((td:any) => {
-
-      let value = parseFloat(td.textContent.replace('£','').replace('%','').replace(',',''));
-      let start = 0;
-      if(increment == "days"){
-        let dates = td.textContent.split(' - ');
-        if(dates[1]){
-
-          value = numberOfDays(dates[0],dates[1]);
-          start = numberOfDays(startDay,dates[0]) - 1;
-        }
-      }
     
-      td.setAttribute('data-numeric',value);
-      td.setAttribute('data-value',td.textContent);
-      td.setAttribute('data-start',start);
-    });
+    let percent = ((tr.getAttribute('data-numeric') - min)/(max - min)) * 100;
+
+    tr.style.setProperty('--percent',`${percent}%`)
 
     // Set the data label value if not set
     Array.from(tr.querySelectorAll('td:not([data-label])')).forEach((td:any, index) => {
@@ -271,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;
@@ -385,6 +397,8 @@ function createChartKeyItem(chartID:string,index:number,text:Array<string>,chart
   let input = document.createElement('input');
   input.setAttribute('name',`${chartID}-dataset-${index}`);
   input.setAttribute('id',`${chartID}-dataset-${index}`);
+  input.setAttribute('data-dataset',`${index}`);
+  input.setAttribute('data-label',`${text}`);
   input.checked = true;
   input.setAttribute('type',`checkbox`);
   
@@ -407,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++) {
 
@@ -433,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-738ab176.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-23ebc31b.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-1faad083.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-e5219693.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-8da5a71d.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-f43e553c.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-1f47b3d5.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-20d3154f.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-beta5
+  * 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-0b43b51d.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-beta5
+  * iamKey v6.0.0
   * Copyright 2022-2024 iamproperty
   */
 class R extends HTMLElement {