@iamproperty/components 3.7.9 → 3.8.0

package/assets/sass/_functions/variables.scss

@@ -178,7 +178,8 @@ $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":     var(--colour-canvas),
+  "btn-action-hover-bg": var(--colour-light)
 ), $non-theme-colors);
 
 @each $color, $value in $non-theme-colors {
@@ -219,7 +220,8 @@ $dark-mode-functional-colors: (
   "btn-secondary-border": var(--colour-white),
   "btn-secondary-bg": transparent,
   "btn-secondary-bg-hover": var(--colour-white),
-  "btn-secondary-hover": var(--colour-primary-theme)
+  "btn-secondary-hover": var(--colour-primary-theme),
+  "btn-action-hover-bg": var(--colour-canvas-2)
 );
 
 

package/assets/sass/components/dialog.scss

@@ -183,6 +183,7 @@ dialog::backdrop {
 
   text-align: center;
 
+
   &:before {
     content: "\f05a";
     font-weight: 300;
@@ -205,6 +206,38 @@ dialog::backdrop {
     clear: both;
   }
 
+  &:has(> i):before{
+
+    display: none;
+  }
+
+  &:has(> i) > i{
+
+    display: var(--fa-display,inline-block);
+    line-height: 1;
+    font-size: 3rem;
+    @include media-breakpoint-up(md) {
+      font-size: 4rem;
+    }
+    margin-top: 0;
+    margin-bottom: rem(24);
+    line-height: 1;
+    color: var(--colour-heading);
+    clear: both;
+
+    &:has(> i){
+      position: relative;
+    }
+
+    > i:before {
+      content: "\f2ed";
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: scale(0.5) translate(-100%,0);
+    }
+  }
+
   > form:first-child button,
   > button:first-child {
     display: none;
@@ -508,7 +541,7 @@ dialog::backdrop {
     z-index: var(--index-floating);
     min-width: rem(320);
     border-radius: rem(16);
-    width: rem(319);
+    width: rem(320);
     padding: rem(24);
 
     @include media-breakpoint-up(sm) {
@@ -517,6 +550,61 @@ dialog::backdrop {
     @include media-breakpoint-up(md) {
       width: rem(360);
     }
+
+
+    &.dialog--list {
+      
+      width: fit-content!important;
+      min-width: rem(140)!important;
+      max-width: rem(280)!important;
+      padding: rem(16);
+      margin: 0;
+
+      .btn-action {
+        border: none;
+        padding: 0;
+        margin: 0;
+        padding-block: rem(6);
+        line-height: rem(20);
+        background: none;
+        white-space: inherit;
+        max-width: 100%;
+        min-width: 100%;
+
+        &:before {
+          min-width: rem(20);
+          display: inline-block;
+        }
+
+        &::after {
+          float: right;
+        }
+      }
+
+      hr {
+        height: 2px;
+        background: var(--colour-border);
+        margin-left: -#{rem(16)};
+        margin-right: -#{rem(16)};
+        margin-block: 0.25rem;
+      }
+
+      .radio--tick {
+        margin-right: 0;
+        padding-left: 1.5rem;
+          margin-bottom: 0;
+
+        &:before {
+          left: 0;
+          font-size: 1em;
+          top: 0.75rem;
+        }
+      }
+    }
+
+    dialog[open] {
+      display: contents;
+    }
   }
 
   &.dialog__wrapper--right > dialog[open]{

package/assets/sass/components/forms.scss

@@ -9,7 +9,7 @@ label {
   color: var(--colour-heading);
   display: block;
 
-  &:has(+ input:not(:disabled):not([readonly]):not(:required):not([type='radio']):not([type='file'])):after {
+  &:has(+ input:not(:disabled):not([readonly]):not(:required):not([type='radio']):not([type='checkbox']):not([type='file'])):after {
     content: " (Optional)";
   }
 }
@@ -66,6 +66,29 @@ textarea {
 // #endregion
 
 
+// #region legend
+fieldset {
+  width: 100%;
+}
+legend {
+  font-family: $headings-font-family;
+  font-style: $headings-font-style;
+  font-weight: $headings-font-weight;
+  line-height: $headings-line-height;
+  color: $headings-color;
+  margin: 0;
+  clear: both;
+  display: block;
+  float: none;
+  font-size: rem(map-get($heading-sizes,"h4_fs"));
+  line-height: rem(map-get($heading-sizes,"h4_lh"));
+  padding-bottom: 0.5rem;
+  max-width: var(--content-max-width);
+  min-width: 100%;
+}
+
+// #endregion
+
 // #region wrappers
 div:has(> label:first-child):has(> input) {
   position: relative;
@@ -304,27 +327,38 @@ $icon-error: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' vie
 $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d='M441 103c9.4 9.4 9.4 24.6 0 33.9L177 401c-9.4 9.4-24.6 9.4-33.9 0L7 265c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l119 119L407 103c9.4-9.4 24.6-9.4 33.9 0z' fill='#0f9d58' /></svg>");
 
 
-.was-validated input:is(:invalid, .is-invalid) {
+.was-validated *:not(button):is(:invalid, .is-invalid):not(.is-valid) {
 
+  --colour-check-border: var(--colour-danger);
   border-color: var(--colour-danger);
+}
+
+.was-validated *:not(button):is(:invalid, .is-invalid):not(.is-valid) + label {
+
+  --colour-check-border: var(--colour-danger);
+  --colour-check-bg: #FCEBEC;
+}
+
+.was-validated input:is(:invalid, .is-invalid) {
 
   background-image: escape-svg($icon-error);
   background-repeat: no-repeat;
   background-position: right var(--input-padding-inline, #{rem(16)}) center;
   background-size: var(--input-lh, #{rem(20)}) var(--input-lh, #{rem(20)});;
-  
   padding-right: calc(var(--input-lh, #{rem(20)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}));
 }
 
-.was-validated input:is(:valid, .is-valid) {
+.was-validated *:not(button):is(:valid, .is-valid):not(.is-invalid) {
 
   border-color: var(--colour-complete);
+}
+
+.was-validated input:is(:valid, .is-valid) {
 
   background-image: escape-svg($icon-tick);
   background-repeat: no-repeat;
   background-position: right var(--input-padding-inline, #{rem(16)}) center;
   background-size: var(--input-lh, #{rem(20)}) var(--input-lh, #{rem(20)});;
-  
   padding-right: calc(var(--input-lh, #{rem(20)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)}));
 }
 
@@ -339,12 +373,12 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
   display: none;
 }
 
-.was-validated:has(input:is(:invalid, .is-invalid)) .invalid-feedback {
+.was-validated:has(*:is(:invalid, .is-invalid)) .invalid-feedback {
   display: block;
 }
 // #endregion
 
-// #region radio field 
+// #region radio/checkbox field 
 input:is([type="radio"],[type="checkbox"]) {
   position: absolute;
   top: 0;
@@ -355,18 +389,21 @@ input:is([type="radio"],[type="checkbox"]) {
   margin: 0;
 }
 
-div:has(> input:is([type="radio"],[type="checkbox"])) {
+:is(div,fieldset):has(> input:is([type="radio"],[type="checkbox"])) {
   position: relative;
+
+  padding-bottom: rem(24);
 }
 
-div:has( > input[type="radio"]){
+:is(div,fieldset):has( > input[type="radio"]){
 
   --border-radius: 50%;
   --outline-width: #{rem(8)};
 }
-div:has( > input[type="checkbox"]) {
 
-  --border-radius: #{rem(6)};
+:is(div,fieldset):has( > input[type="checkbox"]) {
+
+  --border-radius: #{rem(4)};
   --outline-width: #{rem(4)};
 }
 
@@ -385,16 +422,30 @@ input:is([type="radio"],[type="checkbox"]) + label:not(:has(> iam-card)) {
   margin-right: rem(24);
   cursor: pointer;
 
+  &:has(+ span){
+    margin-bottom: 0;
+  }
+
+  &:has(+ input){
+    margin-bottom: 0;
+  }
+  
+  &:last-child {
+    
+    margin-bottom: rem(24);
+  }
+
   &:before {
     content: "";
-    border: 2px solid var(--colour-primary);
+    border: 2px solid var(--colour-check-border, var(--colour-primary));
+    background: var(--colour-check-bg, transparent);
     border-radius: var(--border-radius);
     height: rem(24);
     width: rem(24);
     display: inline-block;
     position: absolute;
     top: rem(10 - 2);
-    left: 0;
+    left: var(--outline-width);
   }
 }
 
@@ -490,7 +541,7 @@ input[type="checkbox"]:checked + label {
     border: none!important;
     outline: none!important;
     top: rem(10 - 2);
-    left: 0;
+    left: var(--outline-width);
     text-align: center;
   }
 }
@@ -504,7 +555,7 @@ input:is([type="radio"],[type="checkbox"]):is(:focus,:hover,.focus) + label {
   --tick-colour: var(--colour-muted);
 
   &:before {
-    background: var(--colour-light);
+    background: var(--colour-check-bg, var(--colour-light));
     outline: var(--outline-width) solid var(--colour-light);
   }
 }
@@ -513,7 +564,7 @@ input:is([type="radio"],[type="checkbox"]):is(:active,.active) + label {
   --tick-colour: var(--colour-light);
 
   &:before {
-    background: #E0E0E0;
+    background: var(--colour-check-bg, #E0E0E0);
     outline: var(--outline-width) solid #E0E0E0;
   }
 }
@@ -551,11 +602,6 @@ input[type="checkbox"][disabled]:checked + label {
 }
 // #endregion
 
-// #region checkbox
-
-
-// #endregion
-
 // #region Conditional reveal
 .conditional {
   display: none;

package/assets/sass/foundations/buttons.scss

@@ -90,6 +90,38 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
 }
 // #endregion
 
+// #region Action button
+.btn-action {
+  background-color: var(--colour-canvas-2);
+  border: 1px solid var(--colour-muted);
+  border-radius: rem(4)!important;
+  font-weight: 400!important;
+  font-size: 1rem;
+  line-height: rem(20);
+  padding: rem(6);
+  color: var(--colour-heading);
+
+  &.btn[class*=fa-]:before {
+    margin-right: rem(6);
+  }
+
+  
+  a:is(:hover, :focus, .hover, :focus-within):not([disabled],:active, .active) &,
+  &:is(:hover, :focus, .hover, :focus-within):not([disabled],:active, .active) {
+    background: var(--colour-btn-action-hover-bg);
+  }
+
+  
+  a:is(:active, .active):not([disabled]) &,
+  &:is(:active, .active):not([disabled]) {
+    
+    filter: brightness(85%);
+    transition: background .1s, color .1s;
+    color: var(--colour-heading);
+  }
+}
+// #endregion
+
 // #region button with icon
 .btn {
   &[class*="fa-"]:before {
@@ -166,6 +198,22 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
   position: relative;
   font-size: rem(20);
 
+  &.btn-sm {
+
+    font-size: 1rem; 
+    padding: rem(6)!important;
+    height: auto!important;
+    line-height: rem(20);
+    height: rem(20 + 6 + 6);
+    width: rem(20 + 6 + 6);
+    min-width: rem(20 + 6 + 6);
+
+    &:before {
+      line-height: rem(20 + 6 + 6);
+    }
+  }
+
+
   &:before {
     position: absolute;
     top: 0;

package/assets/ts/modules/dialogs.ts

@@ -77,7 +77,12 @@ const extendDialogs = (body) => {
     
     // Close the modal when clicked on the backdrop
     if (event && event.target instanceof HTMLElement && event.target.closest('dialog[open]')){
-      const dialog = event.target.closest('dialog[open]');
+      let dialog = event.target.closest('dialog[open]');
+
+      // Small fix to make sure the dialog isn't a dialog inside of a dialog.
+      var style = window.getComputedStyle(dialog);
+      if(style.display === 'contents')
+        dialog = dialog.parentNode.closest('dialog[open]');
       
       // Dont allow the backdrop to be clicked when transactional
       if(!dialog.querySelector(':scope > .mh-lg > form:last-child > button:last-child, :scope > .mh-lg > button:last-child') || dialog.classList.contains('dialog--multi')){
@@ -106,8 +111,8 @@ const extendDialogs = (body) => {
       let dataEvent = "openPopover"
       let popover = parent.querySelector(':scope > dialog');
       
-      if(document.querySelector('dialog[open]') && document.querySelector('dialog[open]') != popover)
-        document.querySelector('dialog[open]').close();
+      if(document.querySelector('*:not([data-keep-open]) > dialog[open]') && document.querySelector('*:not([data-keep-open]) > dialog[open]') != popover)
+        document.querySelector('*:not([data-keep-open]) > dialog[open]').close();
 
       // Remove active class from exiting active buttons
       Array.from(document.querySelectorAll('.dialog__wrapper > button')).forEach((btnElement,index) => {
@@ -152,8 +157,14 @@ const extendDialogs = (body) => {
       if(popoverBottom > windowPos){
 
         let currentStyle = popover.hasAttribute('style') ? popover.getAttribute('style')+' ' : '';
-
         popover.setAttribute('style',currentStyle+`transform: translate(0, calc(-100% - 4rem))`);
+
+        // Check that the dialog doesn't go over the top of the page
+        boundingRec = popover.getBoundingClientRect();
+        let popoverTop = boundingRec.top - window.scrollY;
+
+        if(popoverTop < 100)
+          popover.removeAttribute('style');
       }
 
       window.dataLayer = window.dataLayer || [];
@@ -199,6 +210,7 @@ export const createDialog = (dialog) => {
     createMultiFormDialog(dialog);
   }
 
+  // If you are using Vue eevents and bindings its recommended to add in the .mh-lg div manually to the dialog
   if(!dialog.querySelector(':scope > .mh-lg') && !dialog.classList.contains('dialog--multi')){
     dialog.innerHTML = `<div class="mh-lg">${dialog.innerHTML}</div>`;
 
@@ -218,7 +230,7 @@ export const createDialog = (dialog) => {
 
   // Create close button is needed
   if(!dialog.querySelector(':scope > button:first-child'))
-    dialog.innerHTML = `<button class="dialog__close">Close</button>${dialog.innerHTML}`;
+    dialog.insertAdjacentHTML('afterbegin', `<button class="dialog__close">Close</button>`);
 
 }
 
@@ -244,7 +256,7 @@ export const createMultiFormDialog = (dialog) => {
       btnWrapper.innerHTML += `<button data-title="${fieldsets[index].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="submit">Submit</button>`;
   });
 
-  dialog.innerHTML = `<div class="steps bg-primary">${buttons}</div>${dialog.innerHTML}`;
+  dialog.insertAdjacentHTML('afterbegin',`<div class="steps bg-primary">${buttons}</div>`);
 
 
   // Open the fieldset with an error inside

package/assets/ts/modules/table.ts

@@ -453,15 +453,26 @@ export const filterTable = (table, form, wrapper) => {
     });
   }
 
-  //Display the filter count
+  // Display the filter count
   Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
     element.innerHTML = '';
+    element.parentNode.classList.remove('hover');
   });
 
-  if(Object.keys(filters).length) {
-      
+  let filterCount = 0;
+  Object.values(filters).forEach((filter, index) => {
+    
+    if(typeof filter == "object" && Object.values(filter).length)
+      filterCount += Object.values(filter).length;
+    else
+      filterCount++;
+  });
+
+  if(filterCount) {
+    
     Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
-      element.innerHTML += `(${Object.keys(filters).length})`;
+      element.innerHTML += `(${filterCount})`;
+      element.parentNode.classList.add('hover');
     });
   }
   
@@ -829,12 +840,23 @@ export const loadAjaxTable = async function (table, form, pagination, wrapper){
 
   Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
     element.innerHTML = '';
+    element.parentNode.classList.remove('hover');
   });
 
-  if(Object.keys(filters).length) {
-      
+  let filterCount = 0;
+  Object.values(filters).forEach((filter, index) => {
+
+    if(typeof filter == "object" && Object.values(filter).length)
+      filterCount += Object.values(filter).length;
+    else
+      filterCount++;
+  });
+
+  if(filterCount) {
+    
     Array.from(form.querySelectorAll('[data-filter-count]')).forEach((element, index) => {
-      element.innerHTML += `(${Object.keys(filters).length})`;
+      element.innerHTML += `(${filterCount})`;
+      element.parentNode.classList.add('hover');
     });
   }