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

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

@@ -279,10 +279,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 +441,49 @@ dialog::backdrop {
       margin-top: auto;
       text-align: right;
     }
-    > form {
-      display: contents
-    }
-    fieldset {    
-      display: flex; 
-      flex-direction: column;
-      flex-grow: 1;
-      position: relative;
-
-      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);
+    
+    
+    @supports not selector(:has(*)) {
+      > form {
+        overflow: auto;
 
-      &::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);;
+        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-bottom: var(--dialog-padding);
+
+          
+        padding-right: calc(var(--dialog-padding) - 10px);
+        margin-right: calc((var(--dialog-padding) * -1) + 10px);
+
+        &::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;
@@ -192,111 +192,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:focus-visible ~ span:after {
-    content: "\f077";
+    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";
+    }
   }
-}
 
-.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,textarea,output) {
+    
+    border-end-start-radius: 0;
+    border-start-start-radius: 0;
+  }
 
-.suffix ~ :is(input,textarea,output) {
-  order: 1;
-  
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
+  .suffix ~ :is(input,textarea,output) {
+    order: 1;
+    
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
 }
 // #endregion
 
@@ -379,6 +385,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;
@@ -629,6 +637,8 @@ input[type="checkbox"][disabled]:checked + label {
     border-color: #E0E0E0!important;
   }
 }
+
+}
 // #endregion
 
 // #region Conditional reveal

package/assets/ts/modules/dialogs.ts

@@ -394,7 +394,12 @@ export const createMultiFormDialog = (dialog) => {
 
 
   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);