@iamproperty/components 7.6.4--beta7 → 7.7.0

package/package.json

@@ -5,12 +5,12 @@
     "name": "iamproperty"
   },
   "private": false,
-  "version": "7.6.4--beta7",
+  "version": "7.7.0",
   "scripts": {
     "temp": "rollup --environment COMPONENT:carousel --config rollup-component.config.cjs --sourcemap",
     "reload": "vite --host",
     "dev": "npm run copy && node local_modules/delete-assets.cjs && vite --host",
-    "build": "node local_modules/delete-build-assets.cjs && npm run compile && vue-tsc --noEmit && vite build --mode lib",
+    "build": "npm run test && node local_modules/delete-build-assets.cjs && npm run compile && vue-tsc --noEmit && vite build --mode lib",
     "prepack": "npm run build",
     "build:docs": "node local_modules/delete-build-assets.cjs && npm run compile && npm run copy && vue-tsc --noEmit && vite build",
     "preview": "vite preview --host",
@@ -33,10 +33,8 @@
     "audit": "node local_modules/audit.cjs",
     "gen:email": "sass assets/sass/email.scss assets/css/email.min.css --style=compressed && node local_modules/email-css.cjs",
     "gen:error": "sass assets/sass/error.scss assets/css/error.min.css --style=compressed && node local_modules/error-css.cjs",
-    "test:vue": "jest src",
-    "test:ui": "jest assets/ts/ui-tests",
-    "test:unit": "jest assets/ts/tests",
-    "test": "npm run test:unit && npm run test:scss",
+    "test:unit": "node local_modules/test.cjs",
+    "test": "npm run test:unit",
     "pull-request": "npm run test && npm run lint && npm run prettier && npm run compile && npm run audit",
     "pr": "npm run pull-request",
     "deploy:fonts": "copyfiles -u 2 assets/fonts/**/* public/assets/fonts",
@@ -47,16 +45,16 @@
     "prettier": "prettier assets/ts assets/sass src docs --write"
   },
   "dependencies": {
+    "globals": "^15.14.0",
+    "js-cookie": "^3.0.5"
+  },
+  "devDependencies": {
     "eslint": "^10.0.0",
     "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-vue": "^10.7.0",
-    "globals": "^15.14.0",
-    "js-cookie": "^3.0.5",
     "prettier": "^3.8.0",
     "typescript-eslint": "^8.53.0",
-    "unplugin-vue-markdown": "^28.3.1"
-  },
-  "devDependencies": {
+    "unplugin-vue-markdown": "^28.3.1",
     "@babel/cli": "^7.21.0",
     "@babel/core": "^7.21.3",
     "@babel/plugin-transform-runtime": "^7.21.0",
@@ -69,26 +67,16 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-terser": "^0.4.1",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@types/jest": "^29.5.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/test-utils": "^2.3.2",
-    "@vue/vue3-jest": "^29.2.3",
-    "babel-jest": "^29.5.0",
     "concurrently": "^9.1.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "esbuild": "^0.25.0",
-    "expect-puppeteer": "^11.0.0",
     "fix-esm-import-path": "^1.3.1",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "jest-environment-node-single-context": "^29.0.0",
-    "jest-puppeteer": "^11.0.0",
     "path": "^0.12.7",
     "postcss": "^8.4.21",
     "postcss-css-variables": "^0.18.0",
-    "puppeteer": "^24.2.0",
     "rollup-plugin-esbuild": "^6.2.1",
     "sass": "^1.85.1",
     "terser": "^5.39.0",

package/src/components/Config/Config.vue

@@ -0,0 +1,23 @@
+<script setup>
+  import { onMounted } from 'vue';
+
+  const component = 'config';
+
+  onMounted(() => {
+    import(`../../../assets/js/components/${component}/${component}.component.min.js`)
+      .then((module) => {
+        if (!window.customElements.get(`iam-${component}`))
+          window.customElements.define(`iam-${component}`, module.default);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  });
+</script>
+
+<template>
+  <!-- Custom element -->
+  <iam-config>
+    <slot></slot>
+  </iam-config>
+</template>

package/assets/js/tests/helpers.spec.js

@@ -1,79 +0,0 @@
-// @ts-nocheck
-import { isValidPostcode } from '../modules/helpers.js';
-describe('The postcode helper function', () => {
-    // #region valid pattern variations
-    test('should return true when testing the postcode "ne33hd"', () => {
-        expect(isValidPostcode("ne33hd")).toBe(true);
-    });
-    test('should return true when testing the postcode "ne3 3hd"', () => {
-        expect(isValidPostcode("ne3 3hd")).toBe(true);
-    });
-    test('should return true when testing the postcode "NE3 3HD"', () => {
-        expect(isValidPostcode("NE3 3HD")).toBe(true);
-    });
-    test('should return true when testing the postcode "NE33HD"', () => {
-        expect(isValidPostcode("NE33HD")).toBe(true);
-    });
-    test('should return true when testing the postcode " NE33HD"', () => {
-        expect(isValidPostcode(" NE33HD")).toBe(true);
-    });
-    test('should return true when testing the postcode " NE33HD "', () => {
-        expect(isValidPostcode(" NE33HD ")).toBe(true);
-    });
-    // #endregion
-    // #region Valid postcodes
-    test('should return true when testing the postcode "NE3 5DP"', () => {
-        expect(isValidPostcode("NE3 5DP")).toBe(true);
-    });
-    test('should return true when testing the postcode "CW11 1SX"', () => {
-        expect(isValidPostcode("CW11 1SX")).toBe(true);
-    });
-    test('should return true when testing the postcode "NE21 6RB"', () => {
-        expect(isValidPostcode("NE21 6RB")).toBe(true);
-    });
-    test('should return true when testing the postcode "SW1A 1AA"', () => {
-        expect(isValidPostcode("SW1A 1AA")).toBe(true);
-    });
-    test('should return true when testing the postcode "M1 1AE"', () => {
-        expect(isValidPostcode("M1 1AE")).toBe(true);
-    });
-    // #endregion
-    // incorrect pattern
-    test('should return false when testing the postcode "NE3"', () => {
-        expect(isValidPostcode("NE3")).toBe(false);
-    });
-    // #region Invalid postcodes correct pattern
-    test('should return false when testing the postcode "Q1A 4BT"', () => {
-        expect(isValidPostcode("Q1A 4BT")).toBe(true);
-    });
-    test('should return false when testing the postcode "AB0 7RE"', () => {
-        expect(isValidPostcode("AB0 7RE")).toBe(true);
-    });
-    test('should return false when testing the postcode "LN0A 4JP"', () => {
-        expect(isValidPostcode("LN0A 4JP")).toBe(true);
-    });
-    test('should return false when testing the postcode "WS0 9ND"', () => {
-        expect(isValidPostcode("WS0 9ND")).toBe(true);
-    });
-    test('should return false when testing the postcode "X8 2HR"', () => {
-        expect(isValidPostcode("X8 2HR")).toBe(true);
-    });
-    // #endregion
-    // #region Invalid postcodes incorrect pattern
-    test('should return false when testing the postcode "ZZ2 TYD"', () => {
-        expect(isValidPostcode("ZZ2 TYD")).toBe(false);
-    });
-    test('should return false when testing the postcode "ABC EFG"', () => {
-        expect(isValidPostcode("ABC EFG")).toBe(false);
-    });
-    test('should return false when testing the postcode "1234 567"', () => {
-        expect(isValidPostcode("1234 567")).toBe(false);
-    });
-    test('should return false when testing the postcode "23A PP2"', () => {
-        expect(isValidPostcode("23A PP2")).toBe(false);
-    });
-    test('should return false when testing the postcode "NE3 H23"', () => {
-        expect(isValidPostcode("NE3 H23")).toBe(false);
-    });
-    // #endregion
-});

package/assets/js/ui-tests/card.spec.js

@@ -1,14 +0,0 @@
-// @ts-nocheck
-import '@testing-library/jest-dom';
-import 'expect-puppeteer';
-import iamCard from '../components/card/card.component.js';
-describe('The card component', () => {
-    if (!window.customElements.get(`iam-card`))
-        window.customElements.define(`iam-card`, iamCard);
-    document.body.innerHTML = `
-<iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>`;
-    test('should have the class of card added to it', () => {
-        let component = document.querySelector('iam-card');
-        expect(component.classList).toContain('card');
-    });
-});

package/assets/js/ui-tests/carousel.spec.js

@@ -1,60 +0,0 @@
-// @ts-nocheck
-import '@testing-library/jest-dom';
-import 'expect-puppeteer';
-import iamCarousel from '../components/carousel/carousel.component.js';
-import iamCard from '../components/card/card.component.js';
-import { getProgressMax } from '../modules/carousel.js';
-describe('The carousel component', () => {
-    if (!window.customElements.get(`iam-carousel`))
-        window.customElements.define(`iam-carousel`, iamCarousel);
-    if (!window.customElements.get(`iam-card`))
-        window.customElements.define(`iam-card`, iamCard);
-    document.body.innerHTML = `
-<iam-carousel>
-  <div>
-    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
-  </div>
-  <div>
-    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
-  </div>
-  <div>
-    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
-  </div>
-  <div>
-    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
-  </div>
-  <div>
-    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
-  </div>
-  <div>
-    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
-  </div>
-  <div>
-    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
-  </div>
-  <div>
-    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
-  </div>
-  <div>
-    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
-  </div>
-  <div>
-    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
-  </div>
-  <div>
-    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
-  </div>
-  <div>
-    <iam-card>Financial preparation <span>Here would be the top level description of the task</span></iam-card>
-  </div>
-</iam-carousel>`;
-    test('should have a pip for each item', () => {
-        var _a;
-        let component = document.querySelector('iam-carousel');
-        let value = (_a = component === null || component === void 0 ? void 0 : component.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.carousel__controls button').length;
-        expect(value).toEqual(12);
-    });
-    test('should set the max value of the range input to the number of items divided by the visible items', () => {
-        expect(getProgressMax(9, 3)).toEqual(7);
-    });
-});

package/assets/js/ui-tests/chart.spec.js

@@ -1,59 +0,0 @@
-// @ts-nocheck
-import '@testing-library/jest-dom';
-import { getChartData } from '../modules/chart.module.js';
-import 'expect-puppeteer';
-import iamBarChart from '../components/barchart/barchart.component.js';
-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 sync HTML changes with the shadow dom', () => {
-        let component = document.querySelector('iam-barchart');
-        let domElement = component.querySelector('tr:first-child td:nth-child(2)');
-        let shadowElement = component.shadowRoot.querySelector('tr:first-child td:nth-child(2)');
-        let value = shadowElement === null || shadowElement === void 0 ? void 0 : shadowElement.innerHTML;
-        expect(value).toEqual('<span data-group="Item 1" part="popover">300</span>');
-    });
-    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 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/assets/js/ui-tests/fileupload.spec.js

@@ -1,22 +0,0 @@
-// @ts-nocheck
-import '@testing-library/jest-dom';
-import 'expect-puppeteer';
-import iamFileupload from '../components/fileupload/fileupload.component.js';
-describe('The Fileupload component', () => {
-    if (!window.customElements.get(`iam-fileupload`))
-        window.customElements.define(`iam-fileupload`, iamFileupload);
-    document.body.innerHTML = `
-<iam-fileupload>
-  <input type="file" name="files[]" accept=".pdf, .csv, .jpg, .png" multiple="multiple" />
-</iam-fileupload>`;
-    test('should have a title in its UI', () => {
-        let component = document.querySelector('iam-fileupload');
-        let title = component === null || component === void 0 ? void 0 : component.shadowRoot.querySelector('.file-upload__title');
-        expect(title === null || title === void 0 ? void 0 : title.innerHTML).toContain('Upload file');
-    });
-    test('should have a button in its UI', () => {
-        let component = document.querySelector('iam-fileupload');
-        let button = component === null || component === void 0 ? void 0 : component.shadowRoot.querySelector('button');
-        expect(button === null || button === void 0 ? void 0 : button.innerHTML).toContain('Upload file');
-    });
-});

package/assets/js/ui-tests/filterlist.spec.js

@@ -1,22 +0,0 @@
-// @ts-nocheck
-import '@testing-library/jest-dom';
-import { filterTheList } from '../modules/filterlist.js';
-const listHTML = `
-<li class="lead text-primary pb-1">Olivia Anderson</li>
-<li class="lead text-primary pb-1">Ethan Ramirez</li>
-<li class="lead text-primary pb-1">Sophia Patel</li>
-<li class="lead text-primary pb-1">Noah Jenkins</li>
-<li class="lead text-primary pb-1">Ava Thompson</li>
-<li class="lead text-primary pb-1">Lucas Myers</li>
-<li class="lead text-primary pb-1">Mia Carter</li>
-<li class="lead text-primary pb-1">Benjamin Lee</li>
-`;
-describe('addDataAttributes', () => {
-    let list = document.createElement('div');
-    list.innerHTML = listHTML;
-    filterTheList(list, 'Lucas');
-    test('should add a class of d-none to each item except the one containing Lucas Myers', () => {
-        expect(list.querySelectorAll('li:not(.d-none)').length).toEqual(1);
-        expect(list.querySelector('li:not(.d-none)').textContent).toEqual('Lucas Myers');
-    });
-});

package/assets/js/ui-tests/multistep.spec.js

@@ -1,68 +0,0 @@
-// @ts-nocheck
-import '@testing-library/jest-dom';
-import 'expect-puppeteer';
-import iamMultiStep from '../components/multi-step/multi-step.component.js';
-describe('The Multi-step component', () => {
-    if (!window.customElements.get(`iam-multi-step`))
-        window.customElements.define(`iam-multi-step`, iamMultiStep);
-    document.body.innerHTML = `
-<iam-multi-step>
-  <form>
-    <span class="h3">Multi-step modal title</span>
-
-    <fieldset data-title="Personal details">
-      <div>
-        <label for="input1">Name 1</label>
-        <input type="text" id="input1" name="input1" placeholder="Optional placeholder text" required="" />
-        <span class="invalid-feedback">This field is required</span>
-      </div>
-    </fieldset>
-    <fieldset data-title="Property details">
-      <div>
-        <label for="input2">Name 2</label>
-        <input type="text" id="input2" name="input2" placeholder="Optional placeholder text" required="" />
-        <span class="invalid-feedback">This field is required</span>
-      </div>
-    </fieldset>
-    <fieldset data-title="Location">
-      <div>
-        <label for="input3">Name 3</label>
-        <input
-          type="text"
-          id="input3"
-          name="input3"
-          placeholder="Optional placeholder text"
-          required=""
-          class="is-invalid"
-        />
-        <span class="invalid-feedback">This field is required</span>
-      </div>
-    </fieldset>
-    <fieldset data-title="Submit property">
-      <div>
-        <label for="input4">Name 4</label>
-        <input type="text" id="input4" name="input4" placeholder="Optional placeholder text" required="" />
-        <span class="invalid-feedback">This field is required</span>
-      </div>
-    </fieldset>
-    <button class="btn btn-primary colour-success" type="submit">Register</button>
-  </form>
-
-</iam-multi-step>`;
-    test('should add the active class to the first fieldset element', () => {
-        let component = document.querySelector('iam-multi-step');
-        let fieldset = component.querySelector('fieldset');
-        expect(fieldset.classList).toContain('active');
-    });
-    test('should have a next button added to each fieldset element', () => {
-        let component = document.querySelector('iam-multi-step');
-        let fieldset = component.querySelector('fieldset');
-        let button = fieldset.querySelector('.btn--wrapper button[data-next]');
-        expect(button === null || button === void 0 ? void 0 : button.innerHTML).toContain('Next');
-    });
-    test('should have a steps list created using the data-title attributes for content', () => {
-        let component = document.querySelector('iam-multi-step');
-        let button = component === null || component === void 0 ? void 0 : component.shadowRoot.querySelector('.steps button');
-        expect(button === null || button === void 0 ? void 0 : button.innerHTML).toContain('Personal details');
-    });
-});

package/assets/js/ui-tests/slider.spec.js

@@ -1,20 +0,0 @@
-// @ts-nocheck
-import '@testing-library/jest-dom';
-import 'expect-puppeteer';
-import iamSlider from '../components/slider/slider.component.js';
-describe('The slider component', () => {
-    if (!window.customElements.get(`iam-slider`))
-        window.customElements.define(`iam-slider`, iamSlider);
-    test('should always show the minimum and maximum values that it can be set', () => {
-        document.body.innerHTML = `<label>Input field label <iam-slider><input type="number" name="percent" min="0" max="100" value="15" step="1" /></iam-slider></label>`;
-        let component = document.querySelector('iam-slider');
-        expect(component.shadowRoot.innerHTML).toContain('<div class="col min pe-2">0</div>');
-        expect(component.shadowRoot.innerHTML).toContain('<div class="col max ps-2">100</div>');
-    });
-    test('should always have a secondary way of inputing the value i.e. a number input field', () => {
-        document.body.innerHTML = `<label>Input field label <iam-slider><input type="number" name="percent" min="0" max="100" value="15" step="1" /></iam-slider></label>`;
-        let component = document.querySelector('iam-slider');
-        expect(component.querySelectorAll('input[type="number"]').length).toEqual(1);
-        expect(component.shadowRoot.querySelectorAll('input[type="range"]').length).toEqual(1);
-    });
-});

package/assets/js/ui-tests/table.spec.js

@@ -1,81 +0,0 @@
-// @ts-nocheck
-import '@testing-library/jest-dom';
-import * as tableModule from '../modules/table.js';
-import 'expect-puppeteer';
-const basicTable = `<thead>
-  <tr>
-    <th>Heading 1</th>
-    <th>Heading 2</th>
-    <th>Heading 3</th>
-    <th>Heading 4</th>
-    <th>Heading 5</th>
-    <th>Heading 6</th>
-  </tr>
-</thead>
-<tbody>
-  <tr>
-    <td>Cell 1</td>
-    <td>Low</td>
-    <td>Cell 3</td>
-    <td>Cell 4</td>
-    <td>Cell 5</td>
-    <td>Cell 6</td>
-  </tr>
-  <tr>
-    <td>Cell 1</td>
-    <td>Low</td>
-    <td><a href="/link">View information</a></td>
-    <td>Cell 4</td>
-    <td>Cell 5</td>
-    <td>Cell 6</td>
-  </tr>
-  <tr>
-    <td>Different Cell 1</td>
-    <td>Medium</td>
-    <td><a href="/link">View information</a></td>
-    <td>Cell 4</td>
-    <td>Cell 5</td>
-    <td>Cell 6</td>
-  </tr>
-  <tr>
-    <td>Different Cell 1</td>
-    <td>High</td>
-    <td><a href="/link">View information</a></td>
-    <td>Cell 4</td>
-    <td>Cell 5</td>
-    <td>Cell 6</td>
-  </tr>
-</tbody>`;
-describe('addDataAttributes', () => {
-    const table = document.createElement('table');
-    table.innerHTML = basicTable;
-    tableModule.addDataAttributes(table);
-    test('should add data-label attribute to the table cells', () => {
-        expect(table.querySelector('tbody td').getAttribute('data-label')).toEqual('Heading 1');
-        expect(table.querySelector('tbody td:nth-child(2)').getAttribute('data-label')).toEqual('Heading 2');
-    });
-    test('should add data-content attribute to the table cells if the content matches a pre-defined list', () => {
-        expect(table.querySelector('tbody tr:nth-child(2) td:nth-child(2)').getAttribute('data-content')).toEqual('low');
-        expect(table.querySelector('tbody tr:nth-child(3) td:nth-child(2)').getAttribute('data-content')).toEqual('medium');
-    });
-});
-describe('sortTable', () => {
-    const table = document.createElement('table');
-    table.innerHTML = basicTable;
-    const form = document.createElement('form');
-    form.innerHTML += `<div><select type="select" name="sort" id="sort" class="form-select" data-sort=""><option value="-1">Sort by</option><option value="high" data-sort="Heading 2" data-order="High,Medium,Low" selected="selected">high to low</option></select></div>`;
-    const savedTableBody = table.querySelector('tbody');
-    tableModule.addDataAttributes(table);
-    tableModule.sortTable(table, form, savedTableBody);
-    test('should sort the table from high to low', () => {
-        expect(table.querySelector('tbody tr:nth-child(1) td:nth-child(2)').textContent).toEqual('High');
-        expect(table.querySelector('tbody tr:nth-child(2) td:nth-child(2)').textContent).toEqual('Medium');
-        expect(table.querySelector('tbody tr:nth-child(3) td:nth-child(2)').textContent).toEqual('Low');
-    });
-});
-describe('formatCell', () => {
-    test('should format the text correctly', () => {
-        expect(tableModule.formatCell('date', '2023-05-15 12:10:45.000000')).toEqual('15 May 23');
-        expect(tableModule.formatCell('capitalise', 'low')).toEqual('Low');
-    });
-});