@iamproperty/components 4.1.0-beta-2 → 4.1.0

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

@@ -59,44 +59,6 @@ describe('addDataAttributes', () => {
         expect(table.querySelector('tbody tr:nth-child(3) td:nth-child(2)').getAttribute('data-content')).toEqual('medium');
     });
 });
-/* TODO: This unit test doesn't work as puppeteer seems to have an issue with query selector all
-describe('getLargestLastColWidth', () => {
-
-  test('should return the width of the largest last column content', async() => {
-
-    const browser = await puppeteer.launch({});
-    try {
-        const page = await browser.newPage();
-        await page.exposeFunction("getLargestLastColWidth", tableModule.getLargestLastColWidth);
-        await page.setContent(`<table id="table">${basicTable}</table>`);
-        await page.waitForSelector('#table tr');
-
-        const largestWidth = await page.evaluate(`getLargestLastColWidth(document.querySelector("#table"))`);
-
-        //const links = await page.$$eval('#table', e=>getLargestLastColWidth(e))
-      console.log(await largestWidth)
-
-
-    } catch (e) {
-        console.error(e);
-    } finally {
-        await browser.close();
-    }
-
-    
-  });
-
-});
-*/
-describe('createMobileButton', () => {
-    const table = document.createElement('table');
-    table.innerHTML = basicTable;
-    tableModule.createMobileButton(table);
-    test('should add a button to the first cell in a column', () => {
-        expect(table.querySelector('tbody td:nth-child(1) button').textContent).toEqual('Cell 1');
-        expect(table.querySelector('tbody td:nth-child(1) span').textContent).toEqual('Cell 1');
-    });
-});
 describe('createSearchDataList', () => {
     const table = document.createElement('table');
     table.innerHTML = basicTable;
@@ -142,25 +104,6 @@ describe('filterTable', () => {
         expect(table.querySelectorAll('tbody tr.filtered--matched').length).toEqual(1);
     });
 });
-/*
-describe('populateDataQueries', () => {
-
-  const table = document.createElement('table');
-  table.innerHTML = basicTable;
-  const form = document.createElement('form');
-  form.innerHTML += `<div><input name="heading" value="Low" data-filter="Heading 2" /><span data-query="total"></span><span data-query="Heading 2 == Low"></span></div>`;
-
-  tableModule.addDataAttributes(table);
-  tableModule.filterTable(table, form, document.createElement('div'));
-  tableModule.populateDataQueries(table, form);
-
-  test('should populate elements with the data-query attribute with the result of the corresponding query', () => {
-
-    //expect(form.querySelector('[data-query="total"]').textContent).toEqual('4');
-    //expect(form.querySelector('[data-query="Heading 2 == Low"]').textContent).toEqual('2');
-  });
-});
-*/
 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/_components.scss

@@ -11,3 +11,5 @@
 @use "components/timeline.scss";
 @use "components/snapshot.scss";
 @use "components/stepper.scss";
+
+@use "components/pagination.scss";

package/assets/sass/_corefiles.scss

@@ -13,14 +13,13 @@
 @use "components/lists.scss";
 @use "components/tooltips.scss";
 @use "components/container.scss";
-@use "components/table.scss";
+@use "components/table.global.scss";
 @use "components/tabs.scss";
 @use "foundations/links.scss";
 @use "foundations/buttons";
 @use "components/admin-panel.scss";
 @use "components/dialog.scss";
 
-@use "components/pagination.scss";
 @use "components/accordion.scss";
 
 @use "components/card-global.scss";
@@ -42,7 +41,12 @@
 @import "../bootstrap/scss/helpers/text-truncation";
 //@import "../bootstrap/scss/helpers/vr";
 
+// Helpers
 @import "helpers/max-height.scss";
+@import "helpers/dynamic.scss";
 
 // Utilities
 @import "../bootstrap/scss/utilities/_api.scss";
+
+// Templates
+@import "templates/form.scss";

package/assets/sass/_functions/variables.scss

@@ -178,7 +178,7 @@ $non-theme-colors: map-merge((
   "btn-secondary-bg": transparent,
   "btn-secondary-bg-hover": var(--colour-primary-theme),
   "btn-secondary-hover": var(--colour-inverted),
-  "canvas-2":     var(--colour-canvas),
+  "canvas-2":     white,
   "btn-action-hover-bg": var(--colour-light)
 ), $non-theme-colors);
 
@@ -336,6 +336,10 @@ $content-max-width-px: 800;
 $content-max-width: rem($content-max-width-px);
 $paragraph-margin-bottom: 2rem;
 
+
+$input-max-width-px: 800;
+$input-max-width: var(--input-max-width, #{rem($input-max-width-px)});
+$select-max-width: var(--select-max-width, #{rem($input-max-width-px)});
 // #endregion 
 
 // #region Buttons

package/assets/sass/components/actionbar-global.scss

@@ -4,6 +4,13 @@
 iam-actionbar {
 
   background-color: #FCFCFC;
+
+
+  @include dark-mode(){
+    
+    background-color: var(--colour-canvas);
+  }
+
   display: block;
   border-top-left-radius: rem(10);
   border-top-right-radius: rem(10);
@@ -14,7 +21,9 @@ iam-actionbar {
 // #region at the top
 main > .actionbar__sticky-wrapper > .actionbar__sticky > iam-actionbar {
 
-  background-color: #e6eaec;
+  @include light-mode(){
+    background-color: #e6eaec;
+  }
   border-radius: rem(8);
   margin: var(--container-padding);
   margin-bottom: 2rem;
@@ -91,7 +100,7 @@ iam-table iam-actionbar {
   }  
 }
 
-@include media-breakpoint-up(sm) {
+@include container-up(sm) {
 
   iam-table iam-actionbar {
 

package/assets/sass/components/address-lookup.scss

@@ -0,0 +1,22 @@
+:host {
+  margin-bottom: 1rem;
+  display: block;
+}
+
+input[name="postcode"] {
+  border-color: var(--error-border,var(--colour-primary))!important;
+}
+
+div:has(input[name="postcode"]) .suffix {
+
+  border-color: var(--error-border,var(--colour-primary))!important;
+}
+
+.invalid-feedback {
+  display: var(--error-display,none)!important;
+}
+
+.optional {
+  
+  display: var(--req-display,inline-block)!important;
+}

package/assets/sass/components/admin-panel.scss

@@ -89,6 +89,10 @@
       padding-bottom: 0!important;
     }
   }
+
+  > iam-pagination {
+    margin-top: -1rem;
+  }
 }
 
 [class*="col"] .admin-panel:first-child:last-child:not(:has(.mh-sm,.mh-md,.mh-lg)) {

package/assets/sass/components/dialog.scss

@@ -24,13 +24,11 @@ dialog[open] {
   display: flex;
   flex-direction: column;
 
-  > *:last-child,
-  > .mh-lg > *:last-child{
+  > *:last-child {
     margin-bottom: 0;
   }
   
-  > :is(p):last-child,
-  > .mh-lg > :is(p):last-child {
+  > :is(p):last-child {
     padding-bottom: 0;
   }
 }
@@ -161,13 +159,13 @@ dialog[open] {
     padding-right: calc(var(--dialog-padding) - 10px);
     margin-right: calc((var(--dialog-padding) * -1) + 10px);
     margin-bottom: calc(var(--dialog-padding) * -1);
-    padding-bottom: var(--dialog-padding);
-    //max-height: none!important;
 
-    &:before {
-      top: 100%;
-      height: var(--dialog-padding);
-      margin-bottom: -2rem;
+    > *:last-child {
+      margin-bottom: 2rem!important;
+    }
+
+    > p:last-child {
+      padding-bottom: 0!important;
     }
   }
 }
@@ -464,12 +462,18 @@ dialog::backdrop {
 
         overflow: auto;
         margin-bottom: calc(var(--dialog-padding) * -1);
-        padding-bottom: var(--dialog-padding);
-
-          
         padding-right: calc(var(--dialog-padding) - 10px);
         margin-right: calc((var(--dialog-padding) * -1) + 10px);
 
+        > :last-child {
+          margin-bottom: var(--dialog-padding)!important;
+        }
+
+        > p:last-child {
+          padding-bottom: 0!important;
+          margin-bottom: var(--dialog-padding)!important;
+        }
+
         &::before {
           content: "";
           top: 100%;
@@ -607,6 +611,11 @@ dialog::backdrop {
           top: 0.75rem;
         }
       }
+
+      .btn-action {
+        border: none;
+        margin: 0;
+      }
     }
 
     dialog[open] {

package/assets/sass/components/fileupload.scss

@@ -128,6 +128,8 @@
     position: relative;
     padding: rem(24) rem(32) rem(24) rem(32);
     user-select: none;
+    max-width: 100%;
+    min-width: 100%;
 
     &.focus {