@iamproperty/components 7.5.0 → 7.5.1--beta1

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

@@ -34,7 +34,7 @@ $darkMode: 'true' !default;
       display: none;
     }
 
-    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .admin-panel__heading):first-child {
+    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .admin-panel__heading):not(.lead):first-child {
       --gradient-direction: -90deg !important;
       background-color: var(--colour-success);
 
@@ -49,8 +49,8 @@ $darkMode: 'true' !default;
       border-top-right-radius: rem(8);
     }
 
-    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):first-child,
-    .admin-panel__heading > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
+    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead):first-child,
+    .admin-panel__heading > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead) {
       font-size: rem(18);
       line-height: rem(24);
       font-weight: bold;
@@ -91,14 +91,14 @@ $darkMode: 'true' !default;
       }
     }
 
-    :is(iam-table, .iam-table) {
+    :is(iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, iam-table-ajax, .iam-table) {
       margin: 0 0 rem(32) 0;
       padding: 0;
       box-shadow: none;
       background: none;
     }
 
-    > *:last-child {
+    > *:not([class*="mb-"]):last-child {
       margin-bottom: 0 !important;
     }
 
@@ -119,7 +119,7 @@ $darkMode: 'true' !default;
       }
     }
 
-    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):first-child
+    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead):first-child
       + :is(.mh-sm, .mh-md, .mh-lg, .mh-sm-sm, .mh-sm-md, .mh-sm-lg, .mh-md-sm, .mh-md-md, .mh-md-lg, .mh-fluid) {
       padding-top: var(--padding-top);
       margin-top: calc(var(--padding-top) * -1);
@@ -140,7 +140,7 @@ $darkMode: 'true' !default;
       padding-bottom: var(--padding-bottom);
       margin-bottom: calc(var(--padding-bottom) * -1) !important;
 
-      > *:last-child {
+      > *:not([class*="mb-"]):last-child {
         margin-bottom: 0 !important;
       }
 
@@ -177,7 +177,7 @@ $darkMode: 'true' !default;
 
   // #region Has actionbar
   .admin-panel:has(iam-actionbar) {
-    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):first-child {
+    > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.lead):first-child {
       margin-bottom: 0;
     }
 
@@ -198,7 +198,7 @@ $darkMode: 'true' !default;
       }
     }
 
-    > iam-table {
+    > :is(iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, iam-table-ajax) {
       overflow: visible;
 
       &:first-child {
@@ -249,4 +249,32 @@ $darkMode: 'true' !default;
     }
   }
   // #endregion
+  .admin-panel__footer:last-child {
+    background-color: var(--wider-colour);
+    padding-top: var(--padding-top);
+    margin-inline: calc(var(--padding-x) * -1);
+    padding-inline: var(--padding-x);
+    padding-bottom: var(--padding-bottom);
+
+    &:has(strong:last-child){
+      display: flex;
+      align-items: end;
+
+      p {
+        padding-bottom: 0;
+        padding-inline-end: var(--padding-x);
+      }
+
+      strong {
+        white-space: nowrap;
+        margin-inline-start: auto;
+      }
+    }
+  }
+
+  .admin-panel__footer:not([class*="mb-"]):last-child {
+
+    margin-bottom: calc(var(--padding-bottom) * -1)!important;
+  }
+
 }

package/assets/sass/elements/buttons--global.scss

@@ -13,7 +13,7 @@ $darkMode: 'true' !default;
 
   // #region reset
   button {
-    // stylelint-disable-next-line property-disallowed-list
+    
     border-radius: 0;
     text-transform: none;
     margin: 0; // 1
@@ -53,7 +53,7 @@ $darkMode: 'true' !default;
     --btn-line-height: #{rem(20)};
 
     display: inline-block;
-    font-weight: bold;
+    font-weight: 500;
     text-align: left;
     text-decoration: none;
     vertical-align: middle;
@@ -259,7 +259,7 @@ $darkMode: 'true' !default;
       display: block;
       max-width: 100% !important;
       outline: none;
-      font-weight: bold;
+      font-weight: 500;
       font-size: var(--btn-font-size) !important;
       line-height: var(--btn-line-height) !important;
 

package/assets/sass/elements/forms.scss

@@ -590,6 +590,13 @@ $optionalText: 'true' !default;
       border-start-end-radius: 0 !important;
       border-end-end-radius: 0 !important;
     }
+
+    :is(
+        input
+      ):has(~ iam-password-indicator) {
+      border-start-end-radius: 0 !important;
+      border-end-end-radius: 0 !important;
+    }
   }
 
   // #endregion

package/assets/sass/elements/hr.scss

@@ -0,0 +1,50 @@
+@use 'sass:map';
+@use 'sass:math';
+
+@use '../_func' as *;
+
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@include layer('elements', $layers) {
+  
+  hr {
+    --border-style: solid;
+    --border-color: var(--colour-border);
+    border: 0;
+    color: transparent;
+    margin: 0;
+    border-bottom: none;
+    background-color: currentColor;
+    opacity: 1;
+    clear: both;
+
+    &:after {
+      display: table;
+      clear: both;
+      content: '';
+    }
+  }
+
+  hr:not(.border-0) {
+    border-bottom:  var(--border-width) var(--border-style) var(--border-color);
+  }
+
+  .hr--vertical {
+
+    height: calc(100% + 0.5rem);
+    margin-left: 0.5rem;
+    margin-right: 1rem;
+    display: inline-block;
+    vertical-align: top;
+    margin-top: -0.25rem;
+    margin-bottom: -0.25rem;
+    background-color: var(--colour-muted);
+    width: 1px;
+  }
+
+  .btn-action + .hr--vertical {
+    height: 2.5rem;
+  }
+}

package/assets/sass/elements/icons.scss

@@ -28,4 +28,9 @@ $darkMode: 'true' !default;
   [class*='fa-']:not(.fa-regular, .fa-light, .fa-solid, .btn) {
     font-weight: 400;
   }
+
+  .rounded-circle[class*='fa-'][class*='bg-'] {
+    aspect-ratio: 1 / 1;
+    width: calc(1lh + 1rem);
+  }
 }

package/assets/sass/elements/links.scss

@@ -56,7 +56,7 @@ $darkMode: 'true' !default;
     line-height: rem(24);
     min-height: rem(24);
     position: relative;
-    font-weight: bold;
+    font-weight: 500;
 
     &:not(.text-decoration-none) {
       &:after {
@@ -314,7 +314,7 @@ iam-collapsible-side {
       li:first-of-type {
         a::before {
           content: '\f056';
-          font-weight: bold;
+          font-weight: 500;
         }
       }
 

package/assets/sass/elements/modal.scss

@@ -146,7 +146,7 @@ $darkMode: 'true' !default;
   *:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement) {
     text-align: center;
 
-    &:before {
+    &:not(.hide-icon):before {
       content: '\f05a';
       font-weight: 300;
       -moz-osx-font-smoothing: grayscale;
@@ -214,10 +214,6 @@ $darkMode: 'true' !default;
       }
     }
 
-    form > :is(button, a) {
-      margin-bottom: 0;
-    }
-
     @include media-breakpoint-up(sm, $mobileOnly) {
       :is(button, .btn):has(~ :is(button, .btn):last-child),
       :is(button, .btn):last-child {

package/assets/sass/elements/type.scss

@@ -21,7 +21,7 @@ $darkMode: 'true' !default;
     margin-bottom: 0;
     font-family: $headings-font-family;
     font-style: $headings-font-style;
-    font-weight: bold;
+    font-weight: 500;
 
     line-height: round(calc(1em * var(--type-scale)), 0.25rem);
     padding-bottom: round(calc(1em * var(--type-scale)), 0.25rem);
@@ -40,12 +40,12 @@ $darkMode: 'true' !default;
 
   :is(.h1, h1) {
     font-size: map.get($heading-sizes, 'h1_fs');
-    font-weight: 900;
+    font-weight: 700;
   }
 
   :is(h2, .h2) {
     font-size: map.get($heading-sizes, 'h2_fs');
-    font-weight: 900;
+    font-weight: 500;
   }
 
   :is(h3, .h3) {
@@ -83,7 +83,7 @@ $darkMode: 'true' !default;
     line-height: rem(map.get($heading-sizes, 'lead_lh'));
     padding-bottom: rem(map.get($heading-sizes, 'lead_pb'));
     max-width: var(--content-max-width);
-    font-weight: 700;
+    font-weight: 500;
   }
 
   small,
@@ -117,7 +117,7 @@ $darkMode: 'true' !default;
   }
 
   strong {
-    font-weight: bolder;
+    font-weight: 500;
     font-family: var(--font-heading);
     color: var(--colour-heading);
   }
@@ -130,9 +130,6 @@ $darkMode: 'true' !default;
     line-height: inherit;
   }
 
-  blockquote {
-  }
-
   blockquote {
     margin: 0;
     quotes: '“' '”' '‘' '’';
@@ -156,7 +153,7 @@ $darkMode: 'true' !default;
       font-size: rem(18);
       line-height: rem(32);
       padding-bottom: 0;
-      font-weight: bold;
+      font-weight: 500;
       font-style: normal;
     }
   }

package/assets/sass/foundations/reboot.scss

@@ -172,23 +172,7 @@ $darkMode: 'true' !default;
     outline: 2px auto -webkit-focus-ring-color;
   }
 
-  hr {
-    --border-style: solid;
-    --border-color: var(--colour-border);
-    border: 0;
-    color: transparent;
-    margin: 0;
-    border-bottom: none;
-    background-color: currentColor;
-    opacity: 1;
-    clear: both;
-
-    &:after {
-      display: table;
-      clear: both;
-      content: '';
-    }
-  }
+
 
   [hidden] {
     display: none !important;
@@ -230,3 +214,8 @@ $darkMode: 'true' !default;
     width: 100%;
   }
 }
+
+
+#app {
+  display: contents;
+}

package/assets/sass/foundations/root.scss

@@ -86,11 +86,13 @@ $darkMode: 'true' !default;
 
       &:has(.nav--large) {
         --container-max-width: #{rem(1920)} !important;
+        --max-width: #{rem(1920)} !important;
         --padding-inline: #{rem(56)} !important;
         --container-padding-x-md: #{rem(56)} !important;
         --container-padding-md: var(--container-padding-top) var(--container-padding-x-md)
           var(--container-padding-bottom) var(--container-padding-x-md);
         --container-padding: var(--container-padding-md);
+        --gutter: 3.5rem;
       }
     }
   }

package/assets/sass/templates/form.scss

@@ -18,6 +18,11 @@ $darkMode: 'true' !default;
     --input-max-width: #{rem(450)};
     --select-max-width: #{rem(500)};
 
+    .container {
+
+      max-width: #{rem(1280)} !important;
+    }
+
     @supports selector(:has(*)) {
       label:has(> :is(.suffix, .prefix)) {
         --input-max-width: #{rem(500)};

package/assets/ts/components/accordion/accordion.component.ts

@@ -7,17 +7,9 @@ class iamAccordion extends HTMLElement {
     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 template = document.createElement('template');
     template.innerHTML = /* HTML */ `
       <style>
-        @import '${coreCSS}';
 
         :host {
           margin-bottom: 2.5rem;

package/assets/ts/components/actionbar/actionbar.component.ts

@@ -1,4 +1,5 @@
 import { uniqueID } from '../../modules/helpers';
+import iamMenu from '../menu/menu.component';
 
 // Data layer Web component created
 declare global {
@@ -41,6 +42,9 @@ class iamActionbar extends HTMLElement {
       ? document.body.getAttribute('data-assets-location')
       : '/assets';
 
+    
+      if (!window.customElements.get(`iam-menu`)) window.customElements.define(`iam-menu`, iamMenu);
+
     const loadCSS = `@import "${assetLocation}/css/components/actionbar.component.css";`;
     const loadExtraCSS = `@import "${assetLocation}/css/components/actionbar.global.css";`;
 
@@ -55,6 +59,7 @@ class iamActionbar extends HTMLElement {
     
       <div class="actionbar" part="actionbar">
         <slot name="selectall"></slot>
+        <slot name="filters"></slot>
         <div class="safe-area">
           <slot></slot>
           <div class="body">
@@ -126,16 +131,6 @@ class iamActionbar extends HTMLElement {
       ? document.body.getAttribute('data-assets-location')
       : '/assets';
 
-    if (!window.customElements.get(`iam-menu`)) {
-      import(/* @vite-ignore */ `${assetLocation}/js/components/menu/menu.component.js`)
-        .then((module) => {
-          window.customElements.define(`iam-menu`, module.default);
-        })
-        .catch((err) => {
-          console.log(err.message);
-        });
-    }
-
     const dialog = this.querySelector('.dialog__wrapper dialog');
 
     // Transform dialog into a menu custom element
@@ -270,11 +265,25 @@ class iamActionbar extends HTMLElement {
       });
       this.dispatchEvent(changeEvent);
     });
+
+    console.log(searchBar);
+
     searchBar.addEventListener('click', (event) => {
+
+      console.log(event);
+
+      console.log(event.target.closest('button.suffix'));
+
       if (event && event.target instanceof HTMLElement && event.target.closest('button.suffix')) {
+
+        
+
         const submitEvent = new CustomEvent('search-submit', {
           detail: { search: searchBar.querySelector('input').value },
         });
+
+console.log(this)
+
         this.dispatchEvent(submitEvent);
       }
     });

package/assets/ts/components/address-lookup/address-lookup.component.ts

@@ -20,9 +20,7 @@ class iamAddressLookup extends HTMLElement {
     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/address-lookup.css";`;
 
     const template = document.createElement('template');

package/assets/ts/components/applied-filters/applied-filters.component.ts

@@ -15,18 +15,15 @@ class iamAppliedFilters extends HTMLElement {
     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/applied-filters.css";`;
 
     const classList = this.classList.toString();
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${coreCSS}";
+    
     ${loadCSS}
-    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    
     </style>
     <div class="applied-filters ${classList}"></div>
     <slot></slot>

package/assets/ts/components/collapsible-side/collapsible-side.component.ts

@@ -13,17 +13,13 @@ class iamCollapsibleSideMenu extends HTMLElement {
     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/collapsible-side.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style class="styles">
-    @import "${coreCSS}";
     ${loadCSS}
-    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
       <div class="container" part="container">

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

@@ -15,17 +15,14 @@ class iamFileupload extends HTMLElement {
     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" part="title">Upload file</span>

package/assets/ts/components/header/header.component.ts

@@ -13,17 +13,13 @@ class iamHeader extends HTMLElement {
     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/header.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${coreCSS}";
     ${loadCSS}
-    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     <div class="header-banner">
       <picture>