@iamproperty/components 7.0.0 → 7.1.0--beta2

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

@@ -1,18 +1,19 @@
 // @ts-nocheck
-import {trackComponent, trackComponentRegistered} from "../_global";
-import {cardHTML,setupCard} from "../../modules/card.module";
+import { trackComponent, trackComponentRegistered } from '../_global';
+import { cardHTML, setupCard } from '../../modules/card.module';
 
-trackComponentRegistered("iam-card");
+trackComponentRegistered('iam-card');
 
 class iamCard extends HTMLElement {
-
-  constructor(){
+  constructor() {
     super();
-    this.attachShadow({ mode: 'open'});
+    this.attachShadow({ mode: 'open' });
 
-    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
     const loadCSS = `@import "${assetLocation}/css/components/card.component.css";`;
-    
+
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
@@ -27,32 +28,32 @@ class iamCard extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  
-	async connectedCallback() {
-
+  async connectedCallback() {
     const cardComponent = this;
-    const cardHead =  cardComponent.shadowRoot.querySelector('.card__head');
-    const cardBody =  cardComponent.shadowRoot.querySelector('.card__body');
-    const cardMenu =  cardComponent.shadowRoot.querySelector('.dialog__wrapper');
-    const btn =  cardComponent.shadowRoot.querySelector('.dialog__wrapper button');
+    const cardHead = cardComponent.shadowRoot.querySelector('.card__head');
+    const cardBody = cardComponent.shadowRoot.querySelector('.card__body');
+    const cardMenu = cardComponent.shadowRoot.querySelector('.dialog__wrapper');
+    const btn = cardComponent.shadowRoot.querySelector('.dialog__wrapper button');
 
     setupCard(cardComponent);
 
     // Add Illustration HTML
-    if(cardComponent.hasAttribute('data-illustration')){
-      cardBody.insertAdjacentHTML('afterbegin',`<div class="card__illustration"><img src="${this.getAttribute('data-illustration')}" alt="" loading="lazy" /></div>`)
+    if (cardComponent.hasAttribute('data-illustration')) {
+      cardBody.insertAdjacentHTML(
+        'afterbegin',
+        `<div class="card__illustration"><img src="${this.getAttribute('data-illustration')}" alt="" loading="lazy" /></div>`
+      );
     }
 
     // Add class that shows the right arrow icon
-    if(!cardComponent.querySelector('[slot="btns"]') && !cardComponent.querySelector('[slot="secondary"]')){
+    if (!cardComponent.querySelector('[slot="btns"]') && !cardComponent.querySelector('[slot="secondary"]')) {
       cardComponent.classList.add('show-icon');
     }
 
     // Secondary buttons and actions
 
     // Add the dialog wrapper HTML
-    if(cardComponent.querySelector('[slot="btns"]')){
-
+    if (cardComponent.querySelector('[slot="btns"]')) {
       cardComponent.shadowRoot.innerHTML += `<div class="dialog__wrapper">
       <button class="btn btn-secondary btn-compact fa-ellipsis-vertical" popovertarget="actions" title="Further actions" type="button">Open further actions</button>
       <div class="dialog--fix dialog--list" id="actions" popover>
@@ -60,17 +61,15 @@ class iamCard extends HTMLElement {
       </div>
     </div>`;
     }
-      
-    // Make sure slotted buttons and links have correct button classes
-    Array.from(cardComponent.querySelectorAll('[slot="btns"]')).forEach((button,index)=>{
 
+    // Make sure slotted buttons and links have correct button classes
+    Array.from(cardComponent.querySelectorAll('[slot="btns"]')).forEach((button, index) => {
       button.classList.add('btn');
       button.classList.add('btn-action');
     });
 
     // Hide the default hover and focus states when interacting with the checkbox, dialog wrapper or secondary button
-    if(cardComponent.querySelector('[slot="checkbox"],[slot="secondary"]')){
-
+    if (cardComponent.querySelector('[slot="checkbox"],[slot="secondary"]')) {
       const element = cardComponent.querySelector('[slot="checkbox"],[slot="secondary"]');
 
       element.addEventListener('mouseenter', (event) => {
@@ -82,8 +81,7 @@ class iamCard extends HTMLElement {
       });
     }
 
-    if(cardComponent.shadowRoot.querySelector('.dialog__wrapper')){
-
+    if (cardComponent.shadowRoot.querySelector('.dialog__wrapper')) {
       const element = cardComponent.shadowRoot.querySelector('.dialog__wrapper');
 
       element.addEventListener('mouseenter', (event) => {
@@ -97,17 +95,17 @@ class iamCard extends HTMLElement {
 
     // Dispatch events of selecting checkboxes
     const checkbox = cardComponent.querySelector('input[type="checkbox"]');
-    if(checkbox){
+    if (checkbox) {
       checkbox.addEventListener('change', (event) => {
-
-
-        if(checkbox.checked){
-          const customEvent = new CustomEvent("select-card", { detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') } });
+        if (checkbox.checked) {
+          const customEvent = new CustomEvent('select-card', {
+            detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') },
+          });
           cardComponent.dispatchEvent(customEvent);
-        }
-        else {
-    
-          const customEvent = new CustomEvent("unselect-card", { detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') } });
+        } else {
+          const customEvent = new CustomEvent('unselect-card', {
+            detail: { 'Card value': checkbox.value, 'input name': checkbox.getAttribute('name') },
+          });
           cardComponent.dispatchEvent(customEvent);
         }
       });
@@ -115,54 +113,55 @@ class iamCard extends HTMLElement {
 
     // Dispatch events of click onto secondary buttons
     const secondaryBtn = cardComponent.querySelector('[slot="secondary"]');
-    if(secondaryBtn){
+    if (secondaryBtn) {
       secondaryBtn.addEventListener('click', (event) => {
-
-        const customEvent = new CustomEvent("secondary-button-clicked", { detail: { 'Title': secondaryBtn.getAttribute('title') } });
+        const customEvent = new CustomEvent('secondary-button-clicked', {
+          detail: { Title: secondaryBtn.getAttribute('title') },
+        });
         cardComponent.dispatchEvent(customEvent);
       });
     }
 
     // Dispatch events of click onto action buttons
     const actionBtns = cardComponent.querySelectorAll('[slot="btns"]');
-    Array.from(actionBtns).forEach((button,index)=>{
-
+    Array.from(actionBtns).forEach((button, index) => {
       button.addEventListener('click', (event) => {
-
-        const customEvent = new CustomEvent("action-button-clicked", { detail: { 'Title': button.getAttribute('title') } });
+        const customEvent = new CustomEvent('action-button-clicked', {
+          detail: { Title: button.getAttribute('title') },
+        });
         cardComponent.dispatchEvent(customEvent);
       });
     });
 
-
-    trackComponent(cardComponent,"iam-card",['select-card','unselect-card','secondary-button-clicked','action-button-clicked']);
+    trackComponent(cardComponent, 'iam-card', [
+      'select-card',
+      'unselect-card',
+      'secondary-button-clicked',
+      'action-button-clicked',
+    ]);
   }
 
   static get observedAttributes() {
-    return ["data-image"];
+    return ['data-image'];
   }
-  
+
   attributeChangedCallback(attrName, oldVal, newVal) {
     switch (attrName) {
-      case "data-total": {
-        if(this.shadowRoot.querySelector('.card__total'))
+      case 'data-total': {
+        if (this.shadowRoot.querySelector('.card__total'))
           this.shadowRoot.querySelector('.card__total').innerHTML = newVal;
         break;
       }
-      case "data-image": {
-
-        if(oldVal != newVal){
-
+      case 'data-image': {
+        if (oldVal != newVal) {
           const cardHeadImg = this.shadowRoot.querySelector('.card__head img');
 
-          if(cardHeadImg)
-            cardHeadImg.setAttribute('src',newVal);
+          if (cardHeadImg) cardHeadImg.setAttribute('src', newVal);
         }
         break;
       }
     }
-
   }
 }
 
-export default iamCard;
+export default iamCard;

package/assets/ts/components/carousel/README.md

@@ -24,16 +24,15 @@ import('../node_modules/@iamproperty/components/assets/js/components/filterlist/
 </iam-header>
 ```
 
-**Properties** 
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| image | String | - | Optional image url to display in the background |
+**Properties**
 
+| Option | Type   | Default Value | Description                                     |
+| ------ | ------ | ------------- | ----------------------------------------------- |
+| image  | String | -             | Optional image url to display in the background |
 
 **Slots**
 
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
-| default | - | Will display underneath the heading inside of the white box |
-| breadcrumb | - | An optional space to add a breadcrumb trail list. |
+| Option     | Default Value | Description                                                 |
+| ---------- | ------------- | ----------------------------------------------------------- |
+| default    | -             | Will display underneath the heading inside of the white box |
+| breadcrumb | -             | An optional space to add a breadcrumb trail list.           |

package/assets/ts/components/carousel/carousel.component.ts

@@ -1,16 +1,17 @@
 // @ts-nocheck
-import {generateThumbnailList,generatePipsHTML,carousel} from "../../modules/carousel";
-import {trackComponent, trackComponentRegistered} from "../_global";
+import { generateThumbnailList, generatePipsHTML, carousel } from '../../modules/carousel';
+import { trackComponent, trackComponentRegistered } from '../_global';
 
-trackComponentRegistered("iam-carousel");
+trackComponentRegistered('iam-carousel');
 
 class iamCarousel extends HTMLElement {
-
-  constructor(){
+  constructor() {
     super();
-    this.attachShadow({ mode: 'open'});
+    this.attachShadow({ mode: 'open' });
 
-    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
 
     const loadCSS = `@import "${assetLocation}/css/components/carousel.component.css";`;
 
@@ -47,8 +48,7 @@ class iamCarousel extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-	connectedCallback() {
-    
+  connectedCallback() {
     const carouselComponent = this;
     const carouselElement = this.shadowRoot.querySelector('.carousel');
     const row = this.shadowRoot.querySelector('.row');
@@ -57,42 +57,39 @@ class iamCarousel extends HTMLElement {
 
     const carouselControls = this.shadowRoot.querySelector('.carousel__controls');
 
-
-
-    if(carouselComponent.querySelector('[data-thumbnail]')){
+    if (carouselComponent.querySelector('[data-thumbnail]')) {
       thumbnailImages = generateThumbnailList(carouselComponent);
       carouselComponent.classList.add('thumbnails');
     }
 
     // populate the pips
-    carouselControls.innerHTML = generatePipsHTML(carouselComponent,thumbnailImages);
-
-
-    Array.from(carouselComponent.querySelectorAll(':scope > div > img:first-child:last-child, :scope > div > picture:first-child:last-child img')).forEach((image, index) => {
-        
-      image.style.inset = "0 0.5rem 0 0.5rem";
-      image.style.position = "absolute";
-      image.style.width = "calc(100% - 1rem)";
-      image.style.height = "100%";
-      image.style['object-fit'] = "cover";
+    carouselControls.innerHTML = generatePipsHTML(carouselComponent, thumbnailImages);
+
+    Array.from(
+      carouselComponent.querySelectorAll(
+        ':scope > div > img:first-child:last-child, :scope > div > picture:first-child:last-child img'
+      )
+    ).forEach((image, index) => {
+      image.style.inset = '0 0.5rem 0 0.5rem';
+      image.style.position = 'absolute';
+      image.style.width = 'calc(100% - 1rem)';
+      image.style.height = '100%';
+      image.style['object-fit'] = 'cover';
 
       image.closest('div').classList.add('image__wrapper');
     });
 
-
     carousel(carouselComponent);
 
-    trackComponent(carouselComponent,"iam-carousel",['pip-clicked','next-clicked','prev-clicked','slider-changed']);
+    trackComponent(carouselComponent, 'iam-carousel', [
+      'pip-clicked',
+      'next-clicked',
+      'prev-clicked',
+      'slider-changed',
+    ]);
   }
 
-  attributeChangedCallback(attrName, oldVal, newVal) {
-    
-
-
-
-
-
-  }
+  attributeChangedCallback(attrName, oldVal, newVal) {}
 }
 
-export default iamCarousel;
+export default iamCarousel;

package/assets/ts/components/chart/README.md

@@ -28,10 +28,8 @@
 
 **Note**
 
-
 **Properties**
 
-
 **Class modifiers**
 
-- .chart--no-animate turns of the animation
+- .chart--no-animate turns of the animation

package/assets/ts/components/chart/chart.component.ts

@@ -1,15 +1,16 @@
 // @ts-nocheck
-import {setupChart,setEventObservers,setEventHandlers} from "../../modules/chart";
+import { setupChart, setEventObservers, setEventHandlers } from '../../modules/chart';
 
 class iamChart extends HTMLElement {
-
-  constructor(){
+  constructor() {
     super();
-    this.attachShadow({ mode: 'open'});
+    this.attachShadow({ mode: 'open' });
 
-    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
     const loadCSS = `@import "${assetLocation}/css/components/charts.css";`;
-    const chartID = `chart-${Date.now()+(Math.floor(Math.random() * 100) + 1)}`;
+    const chartID = `chart-${Date.now() + (Math.floor(Math.random() * 100) + 1)}`;
     const chartType = this.hasAttribute('data-type') ? this.getAttribute('data-type') : 'column';
     const availableTypes = this.hasAttribute('data-types') ? this.getAttribute('data-types').split(',') : [];
 
@@ -39,60 +40,47 @@ class iamChart extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-	connectedCallback() {
-
+  connectedCallback() {
     const element = this;
-    const orginalTable =  this.querySelector('table');
+    const orginalTable = this.querySelector('table');
     const newTable = orginalTable.cloneNode(true);
     const chart = this.shadowRoot.querySelector('.chart');
     const chartOuter = this.shadowRoot.querySelector('.chart__outer');
-    
 
     chart.appendChild(newTable);
 
-    if(!this.classList.contains('chart--no-animate'))
-      chartOuter.classList.add('chart--animate');
+    if (!this.classList.contains('chart--no-animate')) chartOuter.classList.add('chart--animate');
+
+    setupChart(this, chartOuter, newTable);
+    setEventObservers(this, chartOuter);
 
-    setupChart(this,chartOuter,newTable);
-    setEventObservers(this,chartOuter);
-    
-    
     const options = {
       rootMargin: '50px',
-      threshold: 0.1
-    }
-
-    let callback = (entries:any) => {
-
-      entries.forEach((entry:any) => {
-        
-        if(entry.intersectionRatio > 0){
-
+      threshold: 0.1,
+    };
 
+    const callback = (entries: any) => {
+      entries.forEach((entry: any) => {
+        if (entry.intersectionRatio > 0) {
           chartOuter.classList.add('animating');
           chartOuter.classList.add('inview');
           intObserver.unobserve(entry.target);
 
-          let rowCount = entry.target.querySelectorAll('tbody tr').length;
-          let animationTime = 2000 + (rowCount*100);
-          
+          const rowCount = entry.target.querySelectorAll('tbody tr').length;
+          const animationTime = 2000 + rowCount * 100;
 
-          setTimeout(function() {
+          setTimeout(function () {
             chartOuter.classList.remove('animating');
           }, animationTime);
-
         }
       });
     };
-  
+
     const intObserver = new IntersectionObserver(callback, options);
     intObserver.observe(element);
   }
 
-  attributeChangedCallback(attrName, oldVal, newVal) {
-    
-
-  }
+  attributeChangedCallback(attrName, oldVal, newVal) {}
 }
 
-export default iamChart;
+export default iamChart;

package/assets/ts/components/collapsible-side/README.md

@@ -15,7 +15,7 @@ import('../node_modules/@iamproperty/components/assets/js/components/collapsible
 
 ```
 <iam-collapsible-side data-title="Configuration">
-        
+
   <div slot="menu">
     <label for="test1">Active branch</label>
     <select class="form-select" name="test1" id="test1">

package/assets/ts/components/collapsible-side/collapsible-side.component.ts

@@ -2,18 +2,21 @@
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
-  "event": "customElementRegistered",
-  "element": "collapsible side menu"
+  event: 'customElementRegistered',
+  element: 'collapsible side menu',
 });
 
 class iamCollapsibleSideMenu extends HTMLElement {
-
-  constructor(){
+  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`;
+    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/collapsible-side.css";`;
 
     const template = document.createElement('template');
@@ -42,101 +45,85 @@ class iamCollapsibleSideMenu extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-	connectedCallback() {
-
+  connectedCallback() {
     const sideMenu = this.shadowRoot.querySelector('.side-menu');
     const sideMenuContent = this.shadowRoot.querySelector('.side-menu-content');
-    const mainContent = this.shadowRoot.querySelector('.main-content')
+    const mainContent = this.shadowRoot.querySelector('.main-content');
     const button = this.shadowRoot.querySelector('.side-menu > .btn');
 
     // Load external CSS if needed
-    if(this.hasAttribute('data-css'))
-      this.shadowRoot.querySelector('.styles').insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
+    if (this.hasAttribute('data-css'))
+      this.shadowRoot
+        .querySelector('.styles')
+        .insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
 
     // Set sde nav title
-    if(!this.hasAttribute('data-title'))
-      this.setAttribute('data-title','configuration')
+    if (!this.hasAttribute('data-title')) this.setAttribute('data-title', 'configuration');
 
-    sideMenuContent.insertAdjacentHTML('afterbegin',`<span class="h3">${this.getAttribute('data-title')}</span>`);
-    mainContent.insertAdjacentHTML('afterbegin',`<span class="h3">${this.getAttribute('data-title')}</span>`);
-    
+    sideMenuContent.insertAdjacentHTML('afterbegin', `<span class="h3">${this.getAttribute('data-title')}</span>`);
+    mainContent.insertAdjacentHTML('afterbegin', `<span class="h3">${this.getAttribute('data-title')}</span>`);
 
-    if(this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)')){
+    if (this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)')) {
       this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)').classList.add('h4');
       this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)').classList.add('main-content__title');
     }
-    
 
-    if(this.hasAttribute('open') && window.innerWidth > 992){
-      sideMenu.classList.add('open'); 
+    if (this.hasAttribute('open') && window.innerWidth > 992) {
+      sideMenu.classList.add('open');
       button.setAttribute('aria-expanded', true);
     }
 
     // Open the menu
     button.addEventListener('click', (event) => {
-
-
-      if(!sideMenu.classList.contains('open')){
-
+      if (!sideMenu.classList.contains('open')) {
         sideMenuContent.classList.remove('closed');
 
-        setTimeout(function(){ 
-          sideMenu.classList.add('open'); 
+        setTimeout(function () {
+          sideMenu.classList.add('open');
           button.setAttribute('aria-expanded', true);
         }, 100);
-
-
-      }
-      else {
-          
+      } else {
         sideMenu.classList.remove('open');
         button.removeAttribute('aria-expanded');
 
-        setTimeout(function(){ sideMenuContent.classList.add('closed') }, 1000); // Delay until its close so the animation is broken
-      
+        setTimeout(function () {
+          sideMenuContent.classList.add('closed');
+        }, 1000); // Delay until its close so the animation is broken
+
         // While the menu is closing dont allow the hover to re-open it until its fully closed.
         sideMenu.classList.add('pe-none');
-        setTimeout(function(){ sideMenu.classList.remove('pe-none')}, 1000);
+        setTimeout(function () {
+          sideMenu.classList.remove('pe-none');
+        }, 1000);
       }
     });
 
     // Mimic hover event on desktop so that we can control when classes are set and which order
     sideMenu.addEventListener('mouseenter', (event) => {
-
-      if(window.innerWidth > 992){
-
-        if(!sideMenu.classList.contains('open'))
-          sideMenuContent.classList.remove('closed');
+      if (window.innerWidth > 992) {
+        if (!sideMenu.classList.contains('open')) sideMenuContent.classList.remove('closed');
 
         sideMenu.classList.add('hover');
-        
       }
     });
 
     sideMenu.addEventListener('mousemove', (event) => {
-
-      if(window.innerWidth > 992){
-
-        if(!sideMenu.classList.contains('open'))
-          sideMenuContent.classList.remove('closed');
+      if (window.innerWidth > 992) {
+        if (!sideMenu.classList.contains('open')) sideMenuContent.classList.remove('closed');
       }
     });
 
     sideMenu.addEventListener('mouseleave', (event) => {
-
-      if(window.innerWidth > 992){
-
+      if (window.innerWidth > 992) {
         sideMenu.classList.remove('hover');
 
-        if(!sideMenu.classList.contains('open'))
-          setTimeout(function(){ sideMenuContent.classList.add('closed') }, 1000); // Delay until its close so the animation is broken
+        if (!sideMenu.classList.contains('open'))
+          setTimeout(function () {
+            sideMenuContent.classList.add('closed');
+          }, 1000); // Delay until its close so the animation is broken
       }
     });
-
-
-
   }
-
 }
 
-export default iamCollapsibleSideMenu;
+export default iamCollapsibleSideMenu;

package/assets/ts/components/fileupload/README.md

@@ -19,9 +19,9 @@ import('../node_modules/@iamproperty/components/assets/js/components/fileupload/
 
 **Properties**
 
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| data-maxsize | Int | - | Blocks files from being added that is larger than the max size given in kb's |
+| Option       | Type | Default Value | Description                                                                  |
+| ------------ | ---- | ------------- | ---------------------------------------------------------------------------- |
+| data-maxsize | Int  | -             | Blocks files from being added that is larger than the max size given in kb's |
 
 **Class modifiers**