npm - @iamproperty/components - Versions diffs - 3.7.8--beta → 3.7.8 - Mend

@iamproperty/components 3.7.8--beta → 3.7.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (53) hide show

package/assets/css/components/dialog.css +1 -1
package/assets/css/components/dialog.css.map +1 -1
package/assets/css/components/fileupload.css +1 -0
package/assets/css/components/fileupload.css.map +1 -0
package/assets/css/components/forms.css +1 -1
package/assets/css/components/forms.css.map +1 -1
package/assets/css/core.min.css +1 -1
package/assets/css/core.min.css.map +1 -1
package/assets/css/style.min.css +1 -1
package/assets/css/style.min.css.map +1 -1
package/assets/js/components/accordion/accordion.component.min.js +1 -1
package/assets/js/components/applied-filters/applied-filters.component.min.js +1 -1
package/assets/js/components/card/card.component.min.js +1 -1
package/assets/js/components/fileupload/fileupload.component.js +44 -0
package/assets/js/components/filterlist/filterlist.component.min.js +1 -1
package/assets/js/components/header/header.component.min.js +1 -1
package/assets/js/components/notification/notification.component.min.js +1 -1
package/assets/js/components/pagination/pagination.component.min.js +1 -1
package/assets/js/components/table/table.component.min.js +4 -4
package/assets/js/components/table/table.component.min.js.map +1 -1
package/assets/js/components/tabs/tabs.component.min.js +1 -1
package/assets/js/dynamic.min.js +5 -5
package/assets/js/dynamic.min.js.map +1 -1
package/assets/js/modules/data-layer.js +32 -34
package/assets/js/modules/dialogs.js +1 -1
package/assets/js/modules/fileupload.js +70 -0
package/assets/js/modules/inputs.js +10 -0
package/assets/js/modules/table.js +0 -1
package/assets/js/scripts.bundle.js +20 -20
package/assets/js/scripts.bundle.js.map +1 -1
package/assets/js/scripts.bundle.min.js +2 -2
package/assets/js/scripts.bundle.min.js.map +1 -1
package/assets/sass/_forms.scss +1 -1
package/assets/sass/components/dialog.scss +3 -1
package/assets/sass/components/fileupload.scss +156 -0
package/assets/sass/components/forms.scss +98 -135
package/assets/ts/components/fileupload/README.md +13 -0
package/assets/ts/components/fileupload/fileupload.component.ts +55 -0
package/assets/ts/modules/data-layer.md +72 -0
package/assets/ts/modules/data-layer.ts +37 -41
package/assets/ts/modules/dialogs.ts +1 -1
package/assets/ts/modules/fileupload.ts +106 -0
package/assets/ts/modules/inputs.ts +14 -0
package/assets/ts/modules/table.ts +1 -1
package/assets/ts/tests/data-layer.spec.js +69 -0
package/dist/components.es.js +784 -748
package/dist/components.umd.js +40 -25
package/package.json +1 -1
package/src/components/FileUpload/FileUpload.vue +29 -0
package/src/components/FileUpload/README.md +13 -0
package/src/index.js +1 -1
package/src/components/FileUploads/FileUploads.vue +0 -48
package/src/components/FileUploads/README.md +0 -24

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -923,7 +923,7 @@ export const loadAjaxTable = async function (table, form, pagination, wrapper){
         wrapper.setAttribute('data-page', parseInt(currentPage));
         wrapper.setAttribute('data-pages', Math.ceil(wrapper.getAttribute('data-total') / wrapper.getAttribute('data-show')));
-        filterTable(table, form, wrapper);
         makeTableFunctional(table, form, pagination, wrapper);
         createPaginationButttons(wrapper, pagination);

package/assets/ts/tests/data-layer.spec.js ADDED Viewed

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import '@testing-library/jest-dom'
+import createDataLayer from "../modules/data-layer";
+describe('createDataLayer', () => {
+  // Mocking the window object for testing
+  let mockDataLayer = [];
+  beforeEach(() => {
+    window.dataLayer = mockDataLayer;
+    document.title = 'Mock Page Title';
+  });
+  it('should push a "Pageview" event to dataLayer on function call', () => {
+    createDataLayer();
+    expect(window.dataLayer).toEqual([
+      {
+        event: 'Pageview',
+        pageTitle: 'Mock Page Title',
+      },
+    ]);
+  });
+  it('should push a "closeDetails" event when the document click target has "open" attribute and is summary element', () => {
+    // Create a mock DOM structure with a summary element having the 'open' attribute
+    document.body.innerHTML = `
+      <details>
+        <summary open>Summary Text</summary>
+      </details>
+    `;
+    const summaryElement = document.querySelector('summary');
+    // Simulate the click event on the summary element
+    const clickEvent = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    });
+    summaryElement.dispatchEvent(clickEvent);
+    expect(window.dataLayer).toEqual([
+      {
+        event: 'Pageview',
+        pageTitle: 'Mock Page Title',
+      },
+      {
+        event: 'openDetails',
+        detailsTitle: 'Summary Text',
+      },
+    ]);
+    summaryElement.dispatchEvent(clickEvent);
+    expect(window.dataLayer).toEqual([
+      {
+        event: 'Pageview',
+        pageTitle: 'Mock Page Title',
+      },
+      {
+        event: 'openDetails',
+        detailsTitle: 'Summary Text',
+      },
+      {
+        event: 'closeDetails',
+        detailsTitle: 'Summary Text',
+      },
+    ]);
+  });
+  // More test cases for other scenarios can be added here...
+});