@iamproperty/components 4.1.0-beta → 4.1.0-beta-3

package/assets/sass/components/actionbar.scss

@@ -60,7 +60,10 @@
   justify-content: flex-end;
   align-items: center;
   height: rem(68);
-  position: absolute;
+  
+  @supports selector(:has(*)) {
+    position: absolute;
+  }
   inset: 0;
 
   @include container-up(sm) {
@@ -83,7 +86,10 @@
   }
 
   display: flex;
+  
+  @supports selector(:has(*)) {
   opacity: 0;
+  }
   pointer-events: none;
 }
 

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

@@ -26,6 +26,12 @@ iam-card.card--flag {
 iam-card {
 
 
+  @supports not selector(:has(*)) {
+      
+    margin-bottom: 2rem;
+    display: block;
+  }
+
   > div:has([type="checkbox"]) {
     display: contents;
 
@@ -43,6 +49,7 @@ iam-card {
   }
 }
 
+
 [data-select-container]:has([type="checkbox"]:checked) iam-card {
 
   > div:has([type="checkbox"]) {

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;
     }
   }
 }
@@ -279,10 +277,11 @@ dialog::backdrop {
     top: calc(var(--dialog-padding) * 4);
   }
 
+  @supports selector(:has(*)) {
   fieldset:not(.active) {
     display: none;
   }
-
+  }
   &:not(:has(fieldset.active)) fieldset:first-of-type{
     display: flex;
     flex-direction: column;
@@ -440,36 +439,55 @@ dialog::backdrop {
       margin-top: auto;
       text-align: right;
     }
-    > form {
-      display: contents
-    }
-    fieldset {    
-      display: flex; 
-      flex-direction: column;
-      flex-grow: 1;
-      position: relative;
+    
+    
+    @supports not selector(:has(*)) {
+      > form {
+        overflow: auto;
 
-      overflow: auto;
-      margin-bottom: calc(var(--dialog-padding) * -1);
-      padding-bottom: var(--dialog-padding);
+        button:not([type="submit"]){
+          display: none;
+        }
+      }
+    }
+    @supports selector(:has(*)) {
+      > form {
+        display: contents
+      }
+      fieldset {    
+        display: flex; 
+        flex-direction: column;
+        flex-grow: 1;
+        position: relative;
+
+        overflow: auto;
+        margin-bottom: calc(var(--dialog-padding) * -1);
+        padding-right: calc(var(--dialog-padding) - 10px);
+        margin-right: calc((var(--dialog-padding) * -1) + 10px);
+
+        > :last-child {
+          margin-bottom: var(--dialog-padding)!important;
+        }
 
-        
-      padding-right: calc(var(--dialog-padding) - 10px);
-      margin-right: calc((var(--dialog-padding) * -1) + 10px);
+        > p:last-child {
+          padding-bottom: 0!important;
+          margin-bottom: var(--dialog-padding)!important;
+        }
 
-      &::before {
-        content: "";
-        top: 100%;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: var(--dialog-padding);
-        min-height: var(--dialog-padding);
-        position: sticky;
-        display: block;
-        background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
-        z-index: 2;
-        margin-bottom: calc(var(--dialog-padding) * -1);;
+        &::before {
+          content: "";
+          top: 100%;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: var(--dialog-padding);
+          min-height: var(--dialog-padding);
+          position: sticky;
+          display: block;
+          background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
+          z-index: 2;
+          margin-bottom: calc(var(--dialog-padding) * -1);;
+        }
       }
     }
   }

package/assets/sass/components/forms.scss

@@ -16,7 +16,7 @@ label {
 // #endregion
 
 // #region input field
-:is(input,textarea,output,select) {
+:is(input:not([type="checkbox"]):not([type="radio"]),textarea,output,select) {
   display: block;
   width: 100%;
   max-width: $content-max-width;
@@ -108,7 +108,7 @@ div:has(> label:first-child):has(> input) {
     text-align: center;
   }
 
-  input, output, .prefix, .suffix {
+  input:not([type="checkbox"]):not([type="radio"]), output, .prefix, .suffix {
     margin-bottom: 0;
   }
 
@@ -116,12 +116,12 @@ div:has(> label:first-child):has(> input) {
   flex-wrap: wrap;
   align-items: center;
 
-  > *:not(input):not(output):not(.prefix):not(.suffix) {
+  > *:not(input:not([type="checkbox"]):not([type="radio"])):not(output):not(.prefix):not(.suffix) {
     flex-shrink: 0;
     width: 100%;
   }
 
-  :is(input,textarea,output) {
+  :is(input:not([type="checkbox"]):not([type="radio"]),textarea,output) {
     flex-shrink: 1;
     flex-grow: 1;
     width: 0;
@@ -133,9 +133,9 @@ div:has(> label:first-child):has(> input) {
   }
 
   input[type="color"]{
-    width: 3rem;
-    flex-shrink: 0;
-    flex-grow: 0;
+    width: 3rem!important;
+    flex-shrink: 0!important;
+    flex-grow: 0!important;
     border-start-end-radius: 0;
     border-end-end-radius: 0;
     padding: 0;
@@ -156,9 +156,10 @@ div:has(> label:first-child):has(> input) {
   }
 
   output {
-    border-left: none;
-    border-end-start-radius: 0;
-    border-start-start-radius: 0;
+    border-left: none!important;
+    border-end-start-radius: 0!important;
+    border-start-start-radius: 0!important;
+    margin: 0!important;
   }
 }
 
@@ -192,111 +193,117 @@ div:has(> label:first-child):has(> input):has(> :is(.form-control-inline,.input-
 
 // #region prefix
 :is(.prefix, .suffix) {
-  display: inline-block;
-  width: auto;
-  padding: var(--input-padding-block, #{rem(12)}) var(--input-padding-block, #{rem(16)});
-  font-size: var(--input-fs, #{rem(16)});
-  line-height: var(--input-lh, #{rem(20)});
-  color: var(--colour-body);
-  background-color: var(--colour-primary-theme);
-  border: 2px solid var(--colour-primary);
-  color: var(--colour-white);
-  margin-bottom: 1rem;
-  border-end-start-radius: rem(8);
-  border-start-start-radius: rem(8);
-  min-width: calc(#{rem(20 + 12 + 12)} + 4px);
-  overflow: hidden;
-  white-space: nowrap;
-  text-align: center;
-  text-overflow: ellipsis;
-  position: relative;
-  
-  min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
-  max-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
-
+  display: none;
+}
+@supports selector(:has(*)) {
 
-  &:after {
+  :is(.prefix, .suffix) {
     display: inline-block;
-    max-width: rem(20);
-  }
+    width: auto;
+    padding: var(--input-padding-block, #{rem(12)}) var(--input-padding-block, #{rem(16)});
+    font-size: var(--input-fs, #{rem(16)});
+    line-height: var(--input-lh, #{rem(20)});
+    color: var(--colour-body);
+    background-color: var(--colour-primary-theme);
+    border: 2px solid var(--colour-primary);
+    color: var(--colour-white);
+    margin-bottom: 1rem;
+    border-end-start-radius: rem(8);
+    border-start-start-radius: rem(8);
+    min-width: calc(#{rem(20 + 12 + 12)} + 4px);
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: center;
+    text-overflow: ellipsis;
+    position: relative;
+    
+    min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
+    max-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) + 4px);
 
-  &[class*="fa-"] {
-    width: calc(#{rem(20 + 12 + 12)} + 4px);
-    padding-inline: 0;
-  }
 
-  select {
-    position: absolute;
-    inset: 0;
-    opacity: 0;
-    cursor: pointer;
-  }
+    &:after {
+      display: inline-block;
+      max-width: rem(20);
+    }
 
-  span {
-    display: none;
-  }
+    &[class*="fa-"] {
+      width: calc(#{rem(20 + 12 + 12)} + 4px);
+      padding-inline: 0;
+    }
 
-  select:has(option:nth-child(1):checked) ~ span:nth-of-type(1),
-  select:has(option:nth-child(2):checked) ~ span:nth-of-type(2),
-  select:has(option:nth-child(3):checked) ~ span:nth-of-type(3),
-  select:has(option:nth-child(4):checked) ~ span:nth-of-type(4),
-  select:has(option:nth-child(5):checked) ~ span:nth-of-type(5),
-  select:has(option:nth-child(6):checked) ~ span:nth-of-type(6),
-  select:has(option:nth-child(7):checked) ~ span:nth-of-type(7),
-  select:has(option:nth-child(8):checked) ~ span:nth-of-type(8),
-  select:has(option:nth-child(9):checked) ~ span:nth-of-type(9),
-  select:has(option:nth-child(10):checked) ~ span:nth-of-type(10) {
+    select {
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+      cursor: pointer;
+    }
 
-    display: block;
-  }
+    span {
+      display: none;
+    }
 
-  select ~ span:after {
-    content: " \f078";
-    font-family: "Font Awesome 6 Pro";
-    font-size: 0.8em;
-    display: inline-block;
-    padding-left: 1em;
-  }
+    select:has(option:nth-child(1):checked) ~ span:nth-of-type(1),
+    select:has(option:nth-child(2):checked) ~ span:nth-of-type(2),
+    select:has(option:nth-child(3):checked) ~ span:nth-of-type(3),
+    select:has(option:nth-child(4):checked) ~ span:nth-of-type(4),
+    select:has(option:nth-child(5):checked) ~ span:nth-of-type(5),
+    select:has(option:nth-child(6):checked) ~ span:nth-of-type(6),
+    select:has(option:nth-child(7):checked) ~ span:nth-of-type(7),
+    select:has(option:nth-child(8):checked) ~ span:nth-of-type(8),
+    select:has(option:nth-child(9):checked) ~ span:nth-of-type(9),
+    select:has(option:nth-child(10):checked) ~ span:nth-of-type(10) {
+
+      display: block;
+    }
+
+    select ~ span:after {
+      content: " \f078";
+      font-family: "Font Awesome 6 Pro";
+      font-size: 0.8em;
+      display: inline-block;
+      padding-left: 1em;
+    }
 
-  select:focus-visible ~ span:after {
-    content: "\f077";
+    select:focus-visible ~ span:after {
+      content: "\f077";
+    }
   }
-}
 
-.prefix {
-  
-  border-right: none;
-}
+  .prefix {
+    
+    border-right: none;
+  }
 
-.suffix {
-  
-  border-left: none;
-  border-end-start-radius: 0;
-  border-start-start-radius: 0;
-  border-start-end-radius: rem(8)!important;
-  border-end-end-radius: rem(8)!important;
-  order: 2;
-}
+  .suffix {
+    
+    border-left: none;
+    border-end-start-radius: 0;
+    border-start-start-radius: 0;
+    border-start-end-radius: rem(8)!important;
+    border-end-end-radius: rem(8)!important;
+    order: 2;
+  }
 
-.prefix span {
-  display: none;
+  .prefix span {
+    display: none;
 
-  small {
-    font-size: 0.8em;
+    small {
+      font-size: 0.8em;
+    }
   }
-}
 
-.prefix ~ :is(input,textarea,output) {
-  
-  border-end-start-radius: 0;
-  border-start-start-radius: 0;
-}
+  .prefix ~ :is(input:not([type="checkbox"]):not([type="radio"]),textarea,output) {
+    
+    border-end-start-radius: 0!important;
+    border-start-start-radius: 0!important;
+  }
 
-.suffix ~ :is(input,textarea,output) {
-  order: 1;
-  
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
+  .suffix ~ :is(input:not([type="checkbox"]):not([type="radio"]),textarea,output) {
+    order: 1;
+    
+    border-start-end-radius: 0!important;
+    border-end-end-radius: 0!important;
+  }
 }
 // #endregion
 
@@ -379,6 +386,8 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
 // #endregion
 
 // #region radio/checkbox field 
+@supports selector(:has(*)) {
+
 input:is([type="radio"],[type="checkbox"]) {
   position: absolute;
   top: 0;
@@ -392,8 +401,7 @@ input:is([type="radio"],[type="checkbox"]) {
 
 :is(div,fieldset):has(> input:is([type="radio"],[type="checkbox"])) {
   position: relative;
-
-  padding-bottom: rem(24);
+  margin-bottom: rem(24);
 }
 
 :is(div,fieldset):has( > input[type="radio"]){
@@ -433,7 +441,7 @@ input:is([type="radio"],[type="checkbox"]) + label:not(:has(> iam-card)) {
   
   &:last-child {
     
-    margin-bottom: rem(24);
+    margin-bottom: 0;
   }
 
   &:before {
@@ -497,7 +505,7 @@ input[type="radio"] + label:not(:has(> iam-card)) {
 }
 
 div:has(> :is(input[type="radio"],input[type="checkbox"]):nth-of-type(2)) {
-  label:not(:has(> iam-card)):not(:last-of-type) {
+  label:not(:has(> iam-card)) {
     margin-bottom: 0rem;
   }
 }
@@ -629,6 +637,8 @@ input[type="checkbox"][disabled]:checked + label {
     border-color: #E0E0E0!important;
   }
 }
+
+}
 // #endregion
 
 // #region Conditional reveal

package/assets/ts/modules/dialogs.ts

@@ -261,6 +261,7 @@ export const createMultiFormDialog = (dialog) => {
 
   let buttons = "";
   let fieldsets = Array.from(dialog.querySelectorAll('fieldset[data-title]'));
+  let form = dialog.querySelector('form');
 
   fieldsets.forEach((fieldset,index) => {
     buttons += `<button data-title="${fieldset.getAttribute('data-title')}" type="button" class="${index == 0 ? "active":""}" tabindex="-1">${fieldset.getAttribute('data-title')}</button>`;
@@ -275,8 +276,18 @@ export const createMultiFormDialog = (dialog) => {
     if(index != fieldsets.length - 1)
       btnWrapper.innerHTML += `<button data-title="${fieldsets[index+1].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="button">Next</button>`;
 
-    if(index == fieldsets.length - 1)
-      btnWrapper.innerHTML += `<button data-title="${fieldsets[index].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="submit">Submit</button>`;
+    // Last fieldset
+    if(index == fieldsets.length - 1){
+      if(form && form.querySelector(':scope > button[type="submit"]')){
+
+        let existingButton = form.querySelector(':scope > button[type="submit"]');
+        existingButton.classList.add('mb-0')
+
+        btnWrapper.insertAdjacentElement('beforeend',existingButton);
+      }
+      else
+        btnWrapper.innerHTML += `<button data-title="${fieldsets[index].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="submit">Submit</button>`;
+    }  
   });
 
   dialog.insertAdjacentHTML('afterbegin',`<div class="steps bg-primary">${buttons}</div>`);
@@ -376,11 +387,12 @@ export const createMultiFormDialog = (dialog) => {
 
       const button = event.target.closest('button');
 
-      if(event.keyCode == 13){
+      if(event.keyCode == 13 && button.getAttribute('type') != "submit"){
         
         event.preventDefault();
         validateFieldset(button);
       }
+
     }
 
     if (event && event.target instanceof HTMLElement && event.target.closest('input')){
@@ -388,13 +400,21 @@ export const createMultiFormDialog = (dialog) => {
 
       input.classList.remove('is-invalid');
 
-
+      if(event.keyCode == 13){
+        
+        event.preventDefault();
+      }
     }
   });
 
 
   dialog.addEventListener('click', (event) => {
-    if (event && event.target instanceof HTMLElement && event.target.closest('button[data-title]')){
+    if (event && event.target instanceof HTMLElement && event.target.closest('button[type="submit"]')){
+      
+      const form = event.target.closest('form');
+      form.classList.add('was-validated');
+    }
+    else if (event && event.target instanceof HTMLElement && event.target.closest('button[data-title]')){
 
       const button = event.target.closest('button[data-title]');
       validateFieldset(button);