@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/ts/components/fileupload/fileupload.component.ts

@@ -1,21 +1,24 @@
 // @ts-nocheck
-import fileupload from "../../modules/fileupload";
+import fileupload from '../../modules/fileupload';
 
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
-  "event": "customElementRegistered",
-  "element": "fileupload"
+  event: 'customElementRegistered',
+  element: 'fileupload',
 });
 
 class iamFileupload 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/fileupload.css";`;
 
     const template = document.createElement('template');
@@ -40,44 +43,36 @@ class iamFileupload extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-	connectedCallback() {
-
+  connectedCallback() {
     this.innerHTML += '<i class="fa-regular fa-arrow-up-from-bracket me-2" aria-hidden="true" slot="btn"></i>';
-    
+
     const wrapper = this.shadowRoot.querySelector('.file-upload');
     const input = this.querySelector('input');
     const helperText = this.shadowRoot.querySelector('.helper-text');
 
-    if(!this.querySelector('[slot="helper"]'))
-      helperText.innerHTML = `${this.hasAttribute('data-maxsize') ? `Max file size is ${this.getAttribute('data-maxsize')}kb. ` : '' }${ input.hasAttribute('accept') ? `Supported file types are ${input.getAttribute('accept')}` : '' }`;
+    if (!this.querySelector('[slot="helper"]'))
+      helperText.innerHTML = `${this.hasAttribute('data-maxsize') ? `Max file size is ${this.getAttribute('data-maxsize')}kb. ` : ''}${input.hasAttribute('accept') ? `Supported file types are ${input.getAttribute('accept')}` : ''}`;
 
-    fileupload(this,wrapper);
+    fileupload(this, wrapper);
   }
 
-  
   static get observedAttributes() {
-    return ["data-filename"];
+    return ['data-filename'];
   }
 
   attributeChangedCallback(attrName, oldVal, newVal) {
-
     switch (attrName) {
-      case "data-filename": {
-        if(oldVal != newVal){
-
+      case 'data-filename': {
+        if (oldVal != newVal) {
           const filesWrapper = this.shadowRoot.querySelector('.files');
-          
-          if(newVal != null && newVal != 'null' && newVal != '')
-            filesWrapper.innerHTML = `<span class="file">${newVal} <button data-file="${newVal}">Remove</button></span>`;
 
+          if (newVal != null && newVal != 'null' && newVal != '')
+            filesWrapper.innerHTML = `<span class="file">${newVal} <button data-file="${newVal}">Remove</button></span>`;
         }
         break;
       }
     }
   }
-
-
-  
 }
 
-export default iamFileupload;
+export default iamFileupload;

package/assets/ts/components/filter-card/filter-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-filter-card");
+trackComponentRegistered('iam-filter-card');
 
 class iamFilerCard 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/filter-card.component.css";`;
-    
+
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
@@ -26,56 +27,54 @@ class iamFilerCard extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-	async connectedCallback() {
-
+  async connectedCallback() {
     const cardComponent = this;
-    const cardHead =  cardComponent.shadowRoot.querySelector('.card__head');
+    const cardHead = cardComponent.shadowRoot.querySelector('.card__head');
 
     setupCard(cardComponent);
 
     // Dispatch events of selecting checkboxes
     const checkbox = cardComponent.parentElement.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);
           cardComponent.classList.add('active');
-        }
-        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);
           cardComponent.classList.remove('active');
         }
       });
     }
 
-    if(cardComponent.parentElement.matches('button')){
-
+    if (cardComponent.parentElement.matches('button')) {
       const button = cardComponent.parentElement;
-      
-      button.addEventListener('click', (event) => {
 
-        if(!cardComponent.classList.contains('active')){
-          const customEvent = new CustomEvent("select-card", { detail: { 'button name': button.getAttribute('name') } });
+      button.addEventListener('click', (event) => {
+        if (!cardComponent.classList.contains('active')) {
+          const customEvent = new CustomEvent('select-card', {
+            detail: { 'button name': button.getAttribute('name') },
+          });
           cardComponent.dispatchEvent(customEvent);
           cardComponent.classList.add('active');
-        }
-        else {
-
-          const customEvent = new CustomEvent("unselect-card", { detail: { 'button name': button.getAttribute('name') } });
+        } else {
+          const customEvent = new CustomEvent('unselect-card', {
+            detail: { 'button name': button.getAttribute('name') },
+          });
           cardComponent.dispatchEvent(customEvent);
           cardComponent.classList.remove('active');
         }
       });
     }
 
-
-    trackComponent(cardComponent,"iam-filter-card",['select-card','unselect-card']);
+    trackComponent(cardComponent, 'iam-filter-card', ['select-card', 'unselect-card']);
   }
-
 }
 
-export default iamFilerCard;
+export default iamFilerCard;

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

@@ -27,6 +27,6 @@ import('../node_modules/@iamproperty/components/assets/js/components/filterlist/
 
 **Properties**
 
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| data-max-height | string | '' | Optional choice from small, medium or large control of the height of the list. Giving it a scrollable area. |
+| Option          | Type   | Default Value | Description                                                                                                 |
+| --------------- | ------ | ------------- | ----------------------------------------------------------------------------------------------------------- |
+| data-max-height | string | ''            | Optional choice from small, medium or large control of the height of the list. Giving it a scrollable area. |

package/assets/ts/components/filterlist/filterlist.component.ts

@@ -1,22 +1,25 @@
 // @ts-nocheck
-import filterlist from "../../modules/filterlist";
+import filterlist from '../../modules/filterlist';
 
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
-  "event": "customElementRegistered",
-  "element": "filterlist"
+  event: 'customElementRegistered',
+  element: 'filterlist',
 });
 
 class iamFilterlist 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 coreCSS = document.body.hasAttribute('data-core-css')
+      ? document.body.getAttribute('data-core-css')
+      : `${assetLocation}/css/core.min.css`;
 
-    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 template = document.createElement('template');
     template.innerHTML = `
     <style>
@@ -49,16 +52,15 @@ class iamFilterlist extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-	connectedCallback() {
-
-    let classList = this.classList.toString();
-    this.shadowRoot.querySelector('.list__wrapper').setAttribute('class',`list__wrapper ${classList}`);
+  connectedCallback() {
+    const classList = this.classList.toString();
+    this.shadowRoot.querySelector('.list__wrapper').setAttribute('class', `list__wrapper ${classList}`);
 
-    if(!this.querySelector('i.fa-search'))
+    if (!this.querySelector('i.fa-search'))
       this.innerHTML += '<i class="fa fa-light fa-search" aria-hidden="true" slot="icon"></i>';
 
-    filterlist(this.querySelector('ul'),this.shadowRoot.querySelector('#search'));
+    filterlist(this.querySelector('ul'), this.shadowRoot.querySelector('#search'));
   }
 }
 
-export default iamFilterlist;
+export default iamFilterlist;

package/assets/ts/components/header/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/header/header.component.ts

@@ -3,18 +3,21 @@
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
-  "event": "customElementRegistered",
-  "element": "header"
+  event: 'customElementRegistered',
+  element: 'header',
 });
 
 class iamHeader 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/header.css";`;
 
     const template = document.createElement('template');
@@ -36,19 +39,15 @@ class iamHeader extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-	connectedCallback() {
-    
+  connectedCallback() {
     this.classList.add('bg-primary');
 
     const picture = this.shadowRoot.querySelector('picture');
     const source = this.shadowRoot.querySelector('picture img');
 
-    if(this.hasAttribute('image'))
-      source.setAttribute('src', this.getAttribute('image'));
-    else
-      picture.remove();
-    
+    if (this.hasAttribute('image')) source.setAttribute('src', this.getAttribute('image'));
+    else picture.remove();
   }
 }
 
-export default iamHeader;
+export default iamHeader;

package/assets/ts/components/inline-edit/README.md

@@ -28,3 +28,4 @@ import('../node_modules/@iamproperty/components/assets/js/components/nav/nav.com
 | Option | Type | Default Value | Description |
 | ------ | ---- | ------------- | ----------- |
 | data-autosave  | Flag | - | Allows the input field to dispatch the autosave event when unfocusing the input field |
+```

package/assets/ts/components/inline-edit/inline-edit.component.ts

@@ -3,18 +3,21 @@
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
-  "event": "customElementRegistered",
-  "element": "inline edit"
+  event: 'customElementRegistered',
+  element: 'inline edit',
 });
 
 class iamInlineEdit extends HTMLElement {
-
-  constructor(){
+  constructor() {
     super();
-    const shadowRoot = 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 shadowRoot = 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/inline-edit.css";`;
 
     const template = document.createElement('template');
@@ -39,26 +42,24 @@ class iamInlineEdit extends HTMLElement {
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-	connectedCallback() {
+  connectedCallback() {
+    const inlineEdit = this;
+    const saveButton = this.shadowRoot.querySelector('#save');
+    const cancelButton = this.shadowRoot.querySelector('#cancel');
 
-    let inlineEdit = this;
-    let saveButton = this.shadowRoot.querySelector('#save');
-    let cancelButton = this.shadowRoot.querySelector('#cancel');
-    
-    let label = this.querySelector('label');
-    let input = this.querySelector('input, textarea, select');
-    let preview = this.querySelector('.preview');
+    const label = this.querySelector('label');
+    const input = this.querySelector('input, textarea, select');
+    const preview = this.querySelector('.preview');
 
-    let statusSaving = this.shadowRoot.querySelector('#saving');
-    let statusSaved = this.shadowRoot.querySelector('#saved');
-    let statusNotSaved = this.shadowRoot.querySelector('#notsaved');
+    const statusSaving = this.shadowRoot.querySelector('#saving');
+    const statusSaved = this.shadowRoot.querySelector('#saved');
+    const statusNotSaved = this.shadowRoot.querySelector('#notsaved');
 
     // Save the original value for later
     let originalValue = input.value;
 
     // cancel
     cancelButton.addEventListener('click', (event) => {
-
       input.value = originalValue;
 
       input.blur();
@@ -66,16 +67,16 @@ class iamInlineEdit extends HTMLElement {
 
       inlineEdit.classList.remove('was-validated');
       statusNotSaved.classList.add('d-none');
-      
-      const cancelEvent = new CustomEvent("inline-edit-cancel", { detail: { name: input.getAttribute('name')} });
+
+      const cancelEvent = new CustomEvent('inline-edit-cancel', {
+        detail: { name: input.getAttribute('name') },
+      });
       inlineEdit.dispatchEvent(cancelEvent);
     });
 
     // Save
     saveButton.addEventListener('click', (event) => {
-
-      if(inlineEdit.querySelector(':invalid')){
-        
+      if (inlineEdit.querySelector(':invalid')) {
         inlineEdit.classList.add('was-validated');
 
         return false;
@@ -84,7 +85,9 @@ class iamInlineEdit extends HTMLElement {
       originalValue = input.value;
 
       // dispatch save event
-      const saveEvent = new CustomEvent("inline-edit-save", { detail: { name: input.getAttribute('name'), value: input.value } });
+      const saveEvent = new CustomEvent('inline-edit-save', {
+        detail: { name: input.getAttribute('name'), value: input.value },
+      });
       inlineEdit.dispatchEvent(saveEvent);
 
       //inlineEdit.setAttribute('data-saving','true');
@@ -95,21 +98,20 @@ class iamInlineEdit extends HTMLElement {
 
       statusSaving.classList.remove('d-none');
 
-      if(preview){
-
-        console.log(input.value)
+      if (preview) {
+        console.log(input.value);
 
         preview.innerHTML = input.value;
       }
     });
 
     // Save
-    if(input.tagName === 'INPUT'){
+    if (input.tagName === 'INPUT') {
       input.addEventListener('keydown', (event) => {
-
-        switch (event.key) { // change to event.key to key to use the above variable
-          case "Enter":
-              
+        switch (
+          event.key // change to event.key to key to use the above variable
+        ) {
+          case 'Enter':
             event.stopPropagation();
             event.preventDefault();
 
@@ -122,22 +124,21 @@ class iamInlineEdit extends HTMLElement {
 
     // Saved
     inlineEdit.addEventListener('inline-edit-saved', (event) => {
-
       setTimeout(() => {
-
         statusSaving.classList.add('d-none');
         statusSaved.classList.remove('d-none');
-            
-        const confirmEvent = new CustomEvent("inline-edit-confirmed", { detail: { name: input.getAttribute('name') } });
+
+        const confirmEvent = new CustomEvent('inline-edit-confirmed', {
+          detail: { name: input.getAttribute('name') },
+        });
         inlineEdit.dispatchEvent(confirmEvent);
       }, 100);
 
       // Reset to normal
       setTimeout(() => {
-
         input.disabled = false;
         inlineEdit.removeAttribute('data-saving');
-        
+
         statusSaving.classList.add('d-none');
         statusSaved.classList.add('d-none');
         statusNotSaved.classList.add('d-none');
@@ -145,48 +146,45 @@ class iamInlineEdit extends HTMLElement {
     });
 
     // enter key saves
-    if(input.tagName === 'SELECT'){
-
-      input.addEventListener('change',(event) => {
-
+    if (input.tagName === 'SELECT') {
+      input.addEventListener('change', (event) => {
         originalValue = input.value;
-        
-        const saveEvent = new CustomEvent("inline-edit-save", { detail: { name: input.getAttribute('name'), value: input.value } });
+
+        const saveEvent = new CustomEvent('inline-edit-save', {
+          detail: { name: input.getAttribute('name'), value: input.value },
+        });
         inlineEdit.dispatchEvent(saveEvent);
 
-        inlineEdit.setAttribute('data-saving','true');
+        inlineEdit.setAttribute('data-saving', 'true');
         input.disabled = true;
 
         input.blur();
       });
     }
 
-    if(input.tagName != 'SELECT'){
-      input.addEventListener('focus',(event) => {
-
+    if (input.tagName != 'SELECT') {
+      input.addEventListener('focus', (event) => {
         input.select();
       });
     }
 
     //blur it should autosave
-    input.addEventListener('blur',(event) => {
-
-      if(input.value != originalValue){
-
-        if(inlineEdit.hasAttribute('data-autosave')) {
-
+    input.addEventListener('blur', (event) => {
+      if (input.value != originalValue) {
+        if (inlineEdit.hasAttribute('data-autosave')) {
           originalValue = input.value;
-          
-          const saveEvent = new CustomEvent("inline-edit-autosave", { detail: { name: input.getAttribute('name'), value: input.value } });
+
+          const saveEvent = new CustomEvent('inline-edit-autosave', {
+            detail: { name: input.getAttribute('name'), value: input.value },
+          });
           inlineEdit.dispatchEvent(saveEvent);
 
           statusSaving.classList.remove('d-none');
-              
-          if(preview){
+
+          if (preview) {
             preview.innerHTML = input.value;
           }
-        }
-        else if(!inlineEdit.querySelector('.inline-feedback')){
+        } else if (!inlineEdit.querySelector('.inline-feedback')) {
           statusNotSaved.classList.remove('d-none');
         }
       }
@@ -194,23 +192,25 @@ class iamInlineEdit extends HTMLElement {
 
     // checkboxes
     inlineEdit.addEventListener('change', (event) => {
-      if (event && event.target instanceof HTMLElement && event.target.closest('input[type="checkbox"]')){
-        
-        let saveValue = "";
+      if (event && event.target instanceof HTMLElement && event.target.closest('input[type="checkbox"]')) {
+        let saveValue = '';
 
         Array.from(inlineEdit.querySelectorAll(`label input[type="checkbox"]:checked`)).forEach((checkbox, index) => {
-
-          if(index != 0)
-            saveValue += ", ";
+          if (index != 0) saveValue += ', ';
 
           saveValue += checkbox.value;
         });
-        
-        const saveEvent = new CustomEvent("inline-edit-save", { detail: { name: event.target.closest('input[type="checkbox"]').getAttribute('name'), value: saveValue } });
+
+        const saveEvent = new CustomEvent('inline-edit-save', {
+          detail: {
+            name: event.target.closest('input[type="checkbox"]').getAttribute('name'),
+            value: saveValue,
+          },
+        });
         inlineEdit.dispatchEvent(saveEvent);
       }
     });
   }
 }
 
-export default iamInlineEdit;
+export default iamInlineEdit;