@iamproperty/components 7.1.0--beta7 → 7.2.1--beta1

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

@@ -0,0 +1,68 @@
+// @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/tests/table.spec.js

@@ -59,26 +59,6 @@ describe('addDataAttributes', () => {
         expect(table.querySelector('tbody tr:nth-child(3) td:nth-child(2)').getAttribute('data-content')).toEqual('medium');
     });
 });
-describe('createSearchDataList', () => {
-    const table = document.createElement('table');
-    table.innerHTML = basicTable;
-    const form = document.createElement('form');
-    form.innerHTML += `<div><input name="search" id="search" type="text" class="form-control" data-search="Heading 1"></div>`;
-    tableModule.addDataAttributes(table);
-    tableModule.createSearchDataList(table, form);
-    test('should create a datalist populated by the defined columns in the data-search ', () => {
-        expect(form.querySelectorAll('datalist').length).toEqual(1);
-        expect(form.querySelectorAll('datalist option').length).toEqual(2);
-        expect(form.querySelector('datalist option:nth-child(1)').value).toEqual('Cell 1');
-        expect(form.querySelector('datalist option:nth-child(2)').value).toEqual('Different Cell 1');
-    });
-    test('should set the autocomplete attribute to off', () => {
-        expect(form.querySelectorAll('datalist').length).toEqual(1);
-        expect(form.querySelectorAll('datalist option').length).toEqual(2);
-        expect(form.querySelector('datalist option:nth-child(1)').value).toEqual('Cell 1');
-        expect(form.querySelector('input').getAttribute('autocomplete')).toEqual('off');
-    });
-});
 describe('sortTable', () => {
     const table = document.createElement('table');
     table.innerHTML = basicTable;
@@ -93,17 +73,6 @@ describe('sortTable', () => {
         expect(table.querySelector('tbody tr:nth-child(3) td:nth-child(2)').textContent).toEqual('Low');
     });
 });
-describe('filterTable', () => {
-    const table = document.createElement('table');
-    table.innerHTML = basicTable;
-    const form = document.createElement('form');
-    form.innerHTML += `<div><input type="text" name="filter" id="filter" data-filter="Heading 2" value="High" /></div>`;
-    tableModule.addDataAttributes(table);
-    tableModule.filterTable(table, form, document.createElement('div'));
-    test('should filter the table to only show high values', () => {
-        expect(table.querySelectorAll('tbody tr.filtered--matched').length).toEqual(1);
-    });
-});
 describe('formatCell', () => {
     test('should format the text correctly', () => {
         expect(tableModule.formatCell('date', '2023-05-15 12:10:45.000000')).toEqual('15 May 23');

package/assets/sass/_bs_grid.scss

@@ -1,6 +1,9 @@
 @use '_func' as *;
 
-@include layer('reset') {
+$layers: 'false' !default;
+$mobileOnly: 'false' !default;
+
+@include layer('reset', $layers) {
   // Row
   //
   // Rows contain your columns.

package/assets/sass/_components.scss

@@ -1,141 +1,367 @@
 @use 'sass:math';
 @use '_func' as *;
 
-@use 'components/nav.preload';
-@use 'components/carousel.config';
-@use 'components/multiselect.preload';
-@use 'components/inline-edit.preload';
-@use 'components/charts.config.scss';
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
 
-// Make sure the first
-main {
-  position: relative;
+@use 'components/nav.preload' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'components/carousel.config' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'components/multiselect.preload' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'components/inline-edit.preload' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'components/charts.config.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
+@use 'components/menu.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
 
-  > *:first-child {
-    padding-top: 2rem;
-  }
-}
+@use 'components/tabs.scss' with (
+  $layers: $layers,
+  $darkMode: $darkMode,
+  $mobileOnly: $mobileOnly
+);
 
-// #region Undefined web components
+@include layer('components', $layers) {
+  // Make sure the first
+  main {
+    position: relative;
 
-@include media-breakpoint-up(md) {
-  iam-header:not(:defined) {
-    min-height: rem(470);
+    > *:first-child {
+      padding-top: 2rem;
+    }
   }
-}
 
-// #region Cards
-.card:not(:defined) {
-  box-shadow: var(--card-box-shadow);
-  border-radius: var(--card-border-radius);
-  padding: var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);
-}
+  // #region Undefined web components
 
-.row
-  [class*='col']:has(
-    label:first-child:last-child .card:defined:first-child:last-child,
-    button:first-child:last-child .card:defined:first-child:last-child,
-    a:first-child:last-child .card:defined:first-child:last-child
-  ) {
-  display: flex;
-}
-
-iam-card:has([type='checkbox']:checked) {
-  --hover-outline-colour: var(--colour-info);
-  --outline-colour: var(--colour-info);
-}
+  @include media-breakpoint-up(md, $mobileOnly) {
+    iam-header:not(:defined) {
+      min-height: rem(470);
+    }
+  }
 
-label:has(.card) {
-  padding: 0 !important;
-  margin-right: 0 !important;
+  // #region Cards
+  .card:not(:defined) {
+    box-shadow: var(--card-box-shadow);
+    border-radius: var(--card-border-radius);
+    padding: var(--card-top-padding) var(--card-right-padding) var(--card-bottom-padding) var(--card-left-padding);
+  }
 
-  &:before,
-  &:after {
-    display: none !important;
+  .row
+    [class*='col']:has(
+      label:first-child:last-child .card:defined:first-child:last-child,
+      button:first-child:last-child .card:defined:first-child:last-child,
+      a:first-child:last-child .card:defined:first-child:last-child
+    ) {
+    display: flex;
   }
 
-  .optional-text {
-    display: none;
+  iam-card:has([type='checkbox']:checked) {
+    --hover-outline-colour: var(--colour-info);
+    --outline-colour: var(--colour-info);
   }
 
-  &:has(:checked) {
-    .card:defined {
-      outline: 2px solid var(--colour, var(--colour-primary));
-      outline-offset: -2px;
+  label:has(.card) {
+    padding: 0 !important;
+    margin-right: 0 !important;
 
-      ::part(body) {
-        background: none;
-      }
-      ::part(footer) {
-        background: none;
+    &:before,
+    &:after {
+      display: none !important;
+    }
+
+    .optional-text {
+      display: none;
+    }
+
+    &:has(:checked) {
+      .card:defined {
+        outline: 2px solid var(--colour, var(--colour-primary));
+        outline-offset: -2px;
+
+        ::part(body) {
+          background: none;
+        }
+
+        ::part(footer) {
+          background: none;
+        }
       }
     }
   }
-}
 
-iam-filter-card:not(:has(i)) {
-  border-left: 0.75rem solid var(--colour, var(--colour-primary));
-}
+  iam-filter-card:not(:has(i)) {
+    border-left: 0.75rem solid var(--colour, var(--colour-primary));
+  }
 
-.card .badge:not([class*='bg-']):not([class*='wider-colour-']) {
-  background-color: var(--colour-canvas);
-  outline: 1px solid var(--colour-light);
-}
+  .card .badge:not([class*='bg-']):not([class*='wider-colour-']) {
+    background-color: var(--colour-canvas);
+    outline: 1px solid var(--colour-light);
+  }
 
-a[target='_blank'] .card {
-  --icon: var(--icon-new-tab);
-}
+  a[target='_blank'] .card {
+    --icon: var(--icon-new-tab);
+  }
 
-// #endregion
+  // #endregion
 
-// Search
-iam-search input:not(.is-invalid):not(:invalid) {
-  background: none !important;
-}
-iam-search .optional-text {
-  display: none !important;
-}
+  // Search
+  iam-search input:not(.is-invalid):not(:invalid) {
+    background: none !important;
+  }
 
-// Table dark mode support
-iam-table {
-  tbody tr {
-    @include dark-mode() {
-      --hover-background: var(--colour-canvas);
+  iam-search .optional-text {
+    display: none !important;
+  }
 
-      &:is(:hover, :focus-within, .hover) {
-        background: var(--row-bg);
+  // Table dark mode support
+  iam-table {
+    tbody tr {
+      @include dark-mode($darkMode) {
+        --hover-background: var(--colour-canvas);
+
+        &:is(:hover, :focus-within, .hover) {
+          background: var(--row-bg);
+        }
       }
     }
   }
-}
 
-@container (width > 23.4375em) {
-  iam-table.table--cta:not(.table--loading):not(:has(tr:first-child td:first-child:last-child)) {
-    tr > *:not(:first-child):last-child {
-      @media screen and (prefers-color-scheme: dark) {
-        background: linear-gradient(90deg, transparent 0%, var(--row-bg) 1.25rem);
+  @container (width > 23.4375em) {
+    iam-table.table--cta:not(.table--loading):not(:has(tr:first-child td:first-child:last-child)) {
+      tr > *:not(:first-child):last-child {
+        @media screen and (prefers-color-scheme: dark) {
+          background: linear-gradient(90deg, transparent 0%, var(--row-bg) 1.25rem);
+        }
       }
     }
   }
-}
 
-iam-table {
-  tr:has([type='checkbox']:checked) {
-    @include dark-mode() {
-      --row-bg: #000000;
+  iam-table {
+    tr:has([type='checkbox']:checked) {
+      @include dark-mode($darkMode) {
+        --row-bg: #000000;
+      }
     }
   }
-}
 
-iam-pagination {
-  --pagination-link-color: var(--colour-light);
-  --pagination-link-color-active: #e0e0e0;
-}
+  iam-pagination {
+    --pagination-link-color: var(--colour-light);
+    --pagination-link-color-active: #e0e0e0;
+  }
+
+  iam-fileupload::part(file) {
+    @include dark-mode($darkMode) {
+      background: var(--colour-canvas-2);
+      border-color: var(--colour-canvas-2);
+      color: var(--colour-body);
+    }
+  }
+
+  iam-bento-grid {
+    details {
+      summary {
+        position: relative;
+        height: 100%;
+        width: 100%;
+        max-width: 100%;
+        padding: 1.5rem;
+        margin-bottom: 0;
+
+        [role='presentation'] {
+          display: block;
+          font-family: var(--font-body);
+          font-weight: normal;
+          font-size: 1rem;
+          position: relative;
+          width: fit-content;
+          //margin-bottom: 2rem;
+          opacity: 0;
+          transition: opacity 1s;
+
+          &:before {
+            display: block;
+            content: ' ';
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            width: 100%;
+            height: 0;
+            border: 1px solid currentColor;
+            transform: translate(-50%, 0);
+            transition: 1s;
+          }
 
-iam-fileupload::part(file) {
-  @include dark-mode() {
-    background: var(--colour-canvas-2);
-    border-color: var(--colour-canvas-2);
-    color: var(--colour-body);
+          &:after {
+            display: inline-block;
+            content: '\f061';
+            top: 100%;
+            margin-left: 0.5em;
+            line-height: 1em;
+            font-size: 1em;
+            font-family: 'Font Awesome 6 Pro';
+          }
+        }
+
+        &::after {
+          opacity: 0;
+          content: '\f422';
+          pointer-events: all;
+          top: 1.5rem;
+          right: 1.5rem;
+          left: auto;
+          position: absolute;
+          line-height: 1em;
+          font-size: 1em;
+          font-family: 'Font Awesome 6 Pro';
+        }
+
+        &:hover {
+          [role='presentation'] {
+            display: block;
+            font-family: var(--font-body);
+            font-weight: normal;
+            font-size: 1rem;
+            position: relative;
+            width: fit-content;
+
+            &:before {
+              width: 80%;
+            }
+          }
+        }
+      }
+
+      &:before {
+        content: '';
+        position: absolute;
+        display: block;
+        top: 30%;
+        left: 40%;
+        height: 70%;
+        aspect-ratio: 2 / 1;
+
+        background-image: var(--bg);
+        background-repeat: no-repeat;
+        background-size: cover;
+        border-radius: 0.5rem;
+        transition: 1s;
+      }
+
+      &:hover:before {
+        left: 35%;
+        top: 25%;
+        height: 75%;
+      }
+
+      &[open]:before {
+        left: 50% !important;
+        top: 30% !important;
+        height: 70% !important;
+      }
+
+      &::details-content {
+        opacity: 0;
+
+        padding: 0 1.5rem 1.5rem 1.5rem;
+        transition: 1s;
+
+        overflow: auto;
+      }
+    }
+
+    details {
+      summary:hover {
+        [role='presentation'] {
+          opacity: 1;
+        }
+      }
+    }
+
+    @container (width > 40em) {
+      details summary {
+        position: sticky;
+        top: 0;
+        left: 0;
+      }
+    }
+
+    details[open] {
+      &:not(.animating)::details-content {
+        opacity: 1;
+      }
+
+      > *:last-child {
+        padding-bottom: 0;
+        margin-bottom: 0;
+      }
+
+      summary {
+        pointer-events: none;
+        width: 100%;
+        max-width: 100%;
+        height: fit-content;
+
+        [role='presentation'] {
+          opacity: 0;
+        }
+
+        [role='presentation'] {
+          margin-bottom: -2rem;
+        }
+
+        &:after {
+          opacity: 1;
+        }
+      }
+    }
+
+    :is(details)::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+
+    :is(details)::-webkit-scrollbar-track {
+      background-color: #00313c;
+      border-top: none;
+      border-left: 4px solid transparent;
+    }
+
+    :is(details)::-webkit-scrollbar-thumb {
+      background-color: white;
+      width: 4px;
+      border-top: none;
+      border-left: none;
+    }
+
+    details[open] {
+      position: relative;
+    }
+  }
+
+  @supports selector(::details-content) {
+    .notice {
+      display: none;
+    }
   }
 }

package/assets/sass/_corefiles.scss

@@ -1,32 +1,56 @@
 @use 'sass:math';
 @use '_func' as *;
 
-@layer reset, elements, components, templates, overrides, utilities;
-
 $root: ':root' !default;
 $layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+$optionalText: 'true' !default;
 
 // Foundations
-@include layer('reset') {
-  @import 'foundations/root.scss';
-  @import 'foundations/reboot.scss';
-}
+@use 'foundations/root.scss' with (
+  $root: $root,
+  $layers: $layers,
+  $mobileOnly: $mobileOnly,
+  $darkMode: $darkMode
+);
 
-@include layer('elements') {
-  @import '_elements.scss';
-}
+@use 'foundations/reboot.scss' with (
+  $layers: $layers,
+  $mobileOnly: $mobileOnly,
+  $darkMode: $darkMode
+);
 
-@include layer('components') {
-  // Deal with preloaded state of native components
-  @import '_components.scss';
-}
+// Elements
+@use '_elements.scss' with (
+  $layers: $layers,
+  $mobileOnly: $mobileOnly,
+  $darkMode: $darkMode,
+  $optionalText: $optionalText
+);
 
-@include layer('templates') {
-  @import 'templates/form.scss';
-  @import 'templates/auth.scss';
-}
+// Components
+@use '_components.scss' with (
+  $layers: $layers,
+  $mobileOnly: $mobileOnly,
+  $darkMode: $darkMode
+);
+
+// Templates
+@use 'templates/form.scss' with (
+  $layers: $layers,
+  $mobileOnly: $mobileOnly,
+  $darkMode: $darkMode
+);
+
+@use 'templates/auth.scss' with (
+  $layers: $layers,
+  $mobileOnly: $mobileOnly,
+  $darkMode: $darkMode
+);
 
-@include layer('overrides') {
+// Overrides
+@include layer('overrides', $layers) {
   @media (prefers-reduced-motion) {
     * {
       transition: unset;