@iamproperty/components 3.7.8--beta-2 → 3.7.9-beta

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

@@ -0,0 +1,55 @@
+// @ts-nocheck
+import fileupload from "../../modules/fileupload";
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "fileupload"
+});
+
+class iamFileupload extends HTMLElement {
+
+  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`;
+    const loadCSS = `@import "${assetLocation}/css/components/fileupload.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${coreCSS}";
+    ${loadCSS}
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <div class="file-upload">
+      <span class="file-upload__title">Upload file</span>
+      <p class="helper-text"></p>
+      <button class="btn btn-primary"><slot name="btn"></slot> Upload document</button>
+      <div class="drop-area"></div>
+      <hr/>
+      <slot></slot>
+      <div class="files"></div>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	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');
+
+    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);
+  }
+}
+
+export default iamFileupload;

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

@@ -1,3 +1,18 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/filterlist/filterlist.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-filterlist`))
+    window.customElements.define(`iam-filterlist`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
 ```
 <iam-filterlist>
 <ul>

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

@@ -1,4 +1,17 @@
-### Usage
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/filterlist/filterlist.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-filterlist`))
+    window.customElements.define(`iam-filterlist`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
 
 ```
 <iam-header class="bg-secondary" image="/shutterstock_1229155495.webp">
@@ -11,14 +24,14 @@
 </iam-header>
 ```
 
-### Properties
+**Properties** 
 
 | Option | Type | Default Value | Description |
 | ------ | ---- | ------------- | ----------- |
 | image | String | - | Optional image url to display in the background |
 
 
-### Slots
+**Slots**
 
 | Option | Default Value | Description |
 | ------ | ------------- | ----------- |

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

@@ -1,3 +1,18 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/notification/notification.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-notification`))
+    window.customElements.define(`iam-notification`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
 ```
 <!-- Inline -->
 <iam-notification data-status="danger" data-dismiss="">

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

@@ -1,3 +1,18 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/pagination/pagination.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-pagination`))
+    window.customElements.define(`iam-pagination`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
 ```
 <iam-pagination data-total="12"></iam-pagination>
 ```

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

@@ -1,3 +1,18 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/table/table.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-table`))
+    window.customElements.define(`iam-table`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
 ```
 <iam-table class="container">
   <table>

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

@@ -1,3 +1,18 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/tabs/tabs.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-tabs`))
+    window.customElements.define(`iam-tabs`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
 ```
 <iam-tabs class="container">
   <details>

package/assets/ts/modules/data-layer.md

@@ -0,0 +1,72 @@
+# Function `createDataLayer()`
+
+The `createDataLayer()` function sets up a dataLayer for tracking events and interactions on a web page. It initializes the `window.dataLayer` array if it doesn't exist, and then pushes a "Pageview" event with the current document title. It also attaches a click event listener to the document, which tracks additional events related to clicks on elements like `summary`, `a` (anchor), and `button` elements.
+
+## Usage
+
+The `createDataLayer()` function should be called in the JavaScript code of the web page, typically during its initialization phase. This allows the dataLayer to be available for tracking various events and interactions.
+
+## Function Signature
+
+`function createDataLayer(): void` 
+
+## Events Tracked
+
+1.  **"Pageview" Event**
+    
+    -   Description: This event is automatically pushed to the `window.dataLayer` array during the function's execution, representing the initial pageview with the current document title.
+    -   Event Data:
+        -   `event`: "Pageview"
+        -   `pageTitle`: The title of the current document.
+2.  **"closeDetails" Event**
+    
+    -   Description: This event is triggered when a click occurs on an element with the attribute `[open] summary`, indicating that a summary element with the `[open]` attribute is being closed.
+    -   Event Data:
+        -   `event`: "closeDetails"
+        -   `detailsTitle`: The text content of the `summary` element associated with the clicked element. If the `summary` element doesn't have any text content, an empty string is used.
+3.  **"openDetails" Event**
+    
+    -   Description: This event is triggered when a click occurs on a `summary` element (not associated with `[open]` attribute), indicating that a summary element is being opened.
+    -   Event Data:
+        -   `event`: "openDetails"
+        -   `detailsTitle`: The text content of the clicked `summary` element. If the `summary` element doesn't have any text content, an empty string is used.
+4.  **"linkClicked" Event**
+    
+    -   Description: This event is triggered when a click occurs on an `a` (anchor) element.
+    -   Event Data:
+        -   `event`: "linkClicked"
+        -   `linkText`: The text content of the clicked `a` element. If the `a` element has a `title` attribute, its value is used as `linkText`; otherwise, the text content of the `a` element is used. If the `a` element doesn't have any text content, an empty string is used.
+        -   `class`: The `class` attribute value of the `a` element. If the `a` element doesn't have a `class` attribute, an empty string is used.
+        -   `href`: The value of the `href` attribute of the `a` element. If the `a` element doesn't have an `href` attribute, an empty string is used.
+5.  **"buttonClicked" Event**
+    
+    -   Description: This event is triggered when a click occurs on a `button` element.
+    -   Event Data:
+        -   `event`: "buttonClicked"
+        -   `buttonText`: The text content of the clicked `button` element. If the `button` element doesn't have any text content, an empty string is used.
+        -   `class`: The `class` attribute value of the `button` element. If the `button` element doesn't have a `class` attribute, an empty string is used.
+
+## Notes
+
+-   The function relies on the `window.dataLayer` array to store the events, so it should be executed after the page has loaded and the `window` object is available.
+-   This implementation assumes that the JavaScript code is placed at the end of the HTML document, ensuring that the DOM elements are accessible at the time the function is executed.
+
+### Example Usage
+
+```
+<!DOCTYPE html>
+	<html>
+    <head>
+      <title>My Web Page</title>
+    </head>
+	<body>
+	<!-- Your web page content here -->
+
+	  <script> // Call the createDataLayer function to initialize event tracking
+	    createDataLayer();
+    </script>
+	</body>
+</html>
+```
+
+In this example, the `createDataLayer()` function is called in a script block within the HTML document, allowing it to set up the dataLayer for event tracking on the page.

package/assets/ts/modules/data-layer.ts

@@ -4,54 +4,50 @@ type WindowWithDataLayer = Window & {
 
 declare const window: WindowWithDataLayer;
 
-function createDataLayer () {
-
+function createDataLayer(): void {
   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push({
-    "event": "Pageview",
-    "pageTitle": document.title
+    event: "Pageview",
+    pageTitle: document.title,
   });
-  
-  // Global events to track
-  document.addEventListener('click', (event) => {
 
-    if (event && event.target instanceof HTMLElement && event.target.closest('[open] summary')){
-      window.dataLayer.push({
-        "event": "closeDetails",
-        // @ts-ignore: Object is possibly 'null'.
-        "detailsTitle": event.target.closest('summary').textContent
-      });
-    }
-    else if (event && event.target instanceof HTMLElement && event.target.closest('summary')){
-        
-      window.dataLayer.push({
-        "event": "openDetails",
-        // @ts-ignore: Object is possibly 'null'.
-        "detailsTitle": event.target.closest('summary').textContent
-      });
-    }
-  
-    if (event && event.target instanceof HTMLElement && event.target.closest('a')){
-      window.dataLayer.push({
-        "event": "linkClicked",
-        // @ts-ignore: Object is possibly 'null'.
-        "linkText": event.target.closest('a').hasAttribute('title') ? event.target.closest('a').getAttribute('title') : event.target.closest('a').textContent,
-        // @ts-ignore: Object is possibly 'null'.
-        "class": (event.target.closest('a').hasAttribute('class') ? event.target.closest('a').getAttribute('class') : ''),
-        // @ts-ignore: Object is possibly 'null'.
-        "href": event.target.closest('a').getAttribute('href')
-      });
-    }
-    if (event && event.target instanceof HTMLElement && event.target.closest('button')){
+  document.addEventListener("click", (event: MouseEvent) => {
+    const target = (event.target as HTMLElement).closest<HTMLElement>("[open] summary");
+
+    if (target) {
       window.dataLayer.push({
-        "event": "buttonClicked",
-        // @ts-ignore: Object is possibly 'null'.
-        "buttonText": event.target.closest('button').textContent,
-        // @ts-ignore: Object is possibly 'null'.
-        "class": (event.target.closest('button').hasAttribute('class') ? event.target.closest('button').getAttribute('class') : '')
+        event: "closeDetails",
+        detailsTitle: target.textContent || "",
       });
-    }
+    } else {
+      const summary = (event.target as HTMLElement).closest<HTMLElement>("summary");
+      const link = (event.target as HTMLElement).closest<HTMLAnchorElement>("a");
+      const button = (event.target as HTMLElement).closest<HTMLButtonElement>("button");
 
+      if (summary) {
+        window.dataLayer.push({
+          event: "openDetails",
+          detailsTitle: summary.textContent || "",
+        });
+      }
+
+      if (link) {
+        window.dataLayer.push({
+          event: "linkClicked",
+          linkText: link.hasAttribute("title") ? link.getAttribute("title") || "" : link.textContent || "",
+          class: link.hasAttribute("class") ? link.getAttribute("class") || "" : "",
+          href: link.getAttribute("href") || "",
+        });
+      }
+
+      if (button) {
+        window.dataLayer.push({
+          event: "buttonClicked",
+          buttonText: button.textContent || "",
+          class: button.hasAttribute("class") ? button.getAttribute("class") || "" : "",
+        });
+      }
+    }
   });
 }
 

package/assets/ts/modules/dialogs.ts

@@ -151,7 +151,7 @@ const extendDialogs = (body) => {
       let windowPos = window.innerHeight - window.scrollY;
       if(popoverBottom > windowPos){
 
-        let currentStyle = popover.getAttribute('style');
+        let currentStyle = popover.hasAttribute('style') ? popover.getAttribute('style')+' ' : '';
 
         popover.setAttribute('style',currentStyle+`transform: translate(0, calc(-100% - 4rem))`);
       }

package/assets/ts/modules/fileupload.ts

@@ -0,0 +1,106 @@
+// @ts-nocheck
+function fileupload(fileupload: Element, wrapper: Element) {
+
+  const filesWrapper = wrapper.querySelector('.files');
+  const dropArea = wrapper.querySelector('.drop-area');
+  const input = fileupload.querySelector('input');
+  const maxSize = fileupload.hasAttribute('data-maxsize') ? fileupload.getAttribute('data-maxsize') : 0;
+
+  // We clone the input field to work as a buffer input field, this allows us to add new files without losing the old ones
+  const cloneInput = input.cloneNode();
+  dropArea.append(cloneInput);
+
+  wrapper.addEventListener('click', (event) => {
+
+    if (event && event.target instanceof HTMLElement && event.target.closest('.btn-primary')){
+
+      const button = event.target.closest('.btn-primary');
+
+      // If the input allows multiples then use the buffer clone input
+      const inputTrigger = input.hasAttribute('multiple') ? cloneInput : input;
+
+      inputTrigger.click();
+    }
+  });
+
+  wrapper.addEventListener('click', (event) => {
+
+    if (event && event.target instanceof HTMLElement && event.target.closest('.files button')){
+
+      const dt = new DataTransfer();
+      const { files } = input;
+      const button = event.target.closest('.files button');
+
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i]
+        
+        if(file.name != button.getAttribute('data-file'))
+          dt.items.add(file) // here you exclude the file. thus removing it.
+      }
+      
+      input.files = dt.files // Assign the updates list
+
+      const changeEvent = new Event('change');
+      input.dispatchEvent(changeEvent);
+    }
+  });
+
+  // Buffer input change event
+  cloneInput.addEventListener('change', (event) => {
+
+    if(input.hasAttribute('multiple')){
+      const filesArray = [...input.files, ...cloneInput.files];
+      
+      let fileNames = [];
+
+      const dt = new DataTransfer();
+
+      for (let i = 0; i < filesArray.length; i++) {
+        const file = filesArray[i]
+
+        const size = file.size/1000;
+
+        if(!fileNames.includes(file.name) && (maxSize == 0 || size < maxSize))
+          dt.items.add(file) // here you exclude the file. thus removing it.
+
+        fileNames.push(file.name);
+      }
+
+      input.files = dt.files;
+    }
+    else {
+      
+      input.files = cloneInput.files;
+    }
+    
+    const changeEvent = new Event('change');
+    input.dispatchEvent(changeEvent);
+  });
+
+
+  cloneInput.addEventListener('dragenter', (event) => {
+
+    cloneInput.classList.add('focus');
+  });
+
+  cloneInput.addEventListener('dragleave', (event) => {
+
+    cloneInput.classList.remove('focus');
+  });
+
+  cloneInput.addEventListener('drop', (event) => {
+
+    cloneInput.classList.remove('focus');
+  });
+
+  input.addEventListener('change', (event) => {
+
+    // Reset
+    filesWrapper.innerHTML = '';
+
+    for (const file of input.files)
+      filesWrapper.innerHTML += `<span class="file">${file.name} <button data-file="${file.name}">Remove</button></span>`;
+  });
+}
+
+export default fileupload;

package/assets/ts/modules/inputs.ts

@@ -40,6 +40,20 @@ const extendInputs = (body) => {
         changeType(input,newType);
       }
     }
+
+    if (event && event.target instanceof HTMLElement && event.target.closest('dialog [type="radio"]')){
+
+      const dialog = event.target.closest('dialog');
+      const radio = event.target.closest('dialog [type="radio"]');
+
+      Array.from(dialog.querySelectorAll('[type="radio"][autofocus]')).forEach((input,index) => {
+        input.removeAttribute('autofocus');
+      });
+
+      Array.from(dialog.querySelectorAll('[type="radio"]:checked')).forEach((input,index) => {
+        input.setAttribute('autofocus',true);
+      });
+    }
   });
 
   body.addEventListener('click', (event) => {

package/assets/ts/modules/table.ts

@@ -160,6 +160,16 @@ export const addFilterEventListeners = (table, form, pagination, wrapper, savedT
       createPaginationButttons(wrapper,pagination);
       populateDataQueries(table,form);
     }
+
+    // Pass post data back to the page
+    if(form.hasAttribute('data-ajax-post')){
+          
+      let formData = new FormData(form);
+      let queryString = new URLSearchParams(formData).toString();
+      const http = new XMLHttpRequest()
+      http.open('GET', `${window.location.href}?ajax=true&${queryString}`);
+      http.send();
+    }
   }
 
   form.addEventListener('keyup', (event) => {
@@ -417,7 +427,7 @@ export const filterTable = (table, form, wrapper) => {
 
   table.classList.remove('table--filtered');
 
-  let filters = [];
+  let filters = filterFilters(form);
   let searches = [];
   let matched = 0;
   let page = form.querySelector('[data-pagination]') ? parseInt(form.querySelector('[data-pagination]').value) : 1;
@@ -432,40 +442,6 @@ export const filterTable = (table, form, wrapper) => {
     row.removeAttribute('data-filtered-by');
   });
 
-  // Filter
-  let filterInputs = Array.from(form.querySelectorAll('[data-filter]'));
-
-  filterInputs.forEach((filterInput, index) => {
-
-    // Ignore uncked radio inputs
-    if(filterInput.type == 'radio' && !filterInput.checked){
-      return;
-    }
-
-    if(filterInput.type == 'checkbox' && !filterInput.checked){
-      return;
-    }
-
-
-    if(filterInput.getAttribute('data-filter') == "multi"){
-
-      for (const [key, value] of Object.entries(JSON.parse(filterInput.value))) {
-        filters[filterInput.getAttribute('data-filter')].push(value);
-      }
-    }
-    else if (filterInput && filterInput.value) {
-
-      let dataFilter = filterInput.getAttribute('data-filter');
-
-      if(!filters[dataFilter])
-        filters[dataFilter] = new Array();
-
-      filters[dataFilter].push(filterInput.value);
-    }
-
-  });
-
-
   // Add search columns too
   if(form.querySelector('[data-search]')){
     let searchInput = form.querySelector('[data-search]');
@@ -482,10 +458,10 @@ export const filterTable = (table, form, wrapper) => {
     element.innerHTML = '';
   });
 
-  if(filters.length) {
+  if(Object.keys(filters).length) {
       
     Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
-      element.innerHTML += `(${filters.length})`;
+      element.innerHTML += `(${Object.keys(filters).length})`;
     });
   }
   
@@ -804,7 +780,37 @@ export const makeTableFunctional = function(table, form, pagination, wrapper){
   }
 }
 
+const filterFilters = function(form){
+
+  let filters = new Object();
 
+  // Filter
+  let filterInputs = Array.from(form.querySelectorAll('[data-filter]'));
+
+  filterInputs.forEach((filterInput, index) => {
+
+    // Ignore uncked radio inputs
+    if(filterInput.type == 'radio' && !filterInput.checked){
+      return;
+    }
+    
+    if(filterInput.type == 'checkbox' && !filterInput.checked){
+      return;
+    }
+
+    if (filterInput && filterInput.value) {
+
+      let dataFilter = filterInput.getAttribute('data-filter');
+
+      if(!filters[dataFilter])
+        filters[dataFilter] = new Array();
+    
+      filters[dataFilter].push(filterInput.value);
+    }
+  });
+
+  return filters;
+}
 
 export const loadAjaxTable = async function (table, form, pagination, wrapper){
 
@@ -818,6 +824,20 @@ export const loadAjaxTable = async function (table, form, pagination, wrapper){
 
   wrapper.classList.add('table--loading');
   
+  // Display the filter count
+  let filters = filterFilters(form);
+
+  Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
+    element.innerHTML = '';
+  });
+
+  if(Object.keys(filters).length) {
+      
+    Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
+      element.innerHTML += `(${Object.keys(filters).length})`;
+    });
+  }
+
   // Setup controller vars if not already set
   if(!window.controller)
     window.controller = [];
@@ -927,6 +947,16 @@ export const loadAjaxTable = async function (table, form, pagination, wrapper){
         makeTableFunctional(table, form, pagination, wrapper);        
         createPaginationButttons(wrapper, pagination);
 
+        Array.from(form.querySelectorAll('[data-ajax-query]')).forEach((queryElement, index) => {
+
+          let totalNumber = resolvePath(response, queryElement.getAttribute('data-ajax-query'), '');
+
+          if(queryElement.hasAttribute('data-total'))
+            queryElement.setAttribute('data-total', totalNumber);
+          else
+            queryElement.innerHTML = totalNumber;
+        });
+
         if(parseInt(totalNumber) == 0){
           tbody.innerHTML = `<tr><td colspan="100%"><span>${emptyMsg}</span></td></tr>`;
         }
@@ -943,13 +973,6 @@ export const loadAjaxTable = async function (table, form, pagination, wrapper){
       else {
         tbody.innerHTML = '<tr><td colspan="100%"><span>Error loading table</span></td></tr>';
       }
-
-      // Pass post data back to the page
-      if(form.hasAttribute('data-ajax-post')){
-        const http = new XMLHttpRequest()
-        http.open('GET', `${window.location.href}?ajax=true&${queryString}`);
-        http.send();
-      }
     });
   } catch (error) {
     console.log(error);