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

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%;

package/assets/sass/components/forms.scss

@@ -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;
   }
 }
 
@@ -291,17 +292,17 @@ div:has(> label:first-child):has(> input):has(> :is(.form-control-inline,.input-
     }
   }
 
-  .prefix ~ :is(input,textarea,output) {
+  .prefix ~ :is(input:not([type="checkbox"]):not([type="radio"]),textarea,output) {
     
-    border-end-start-radius: 0;
-    border-start-start-radius: 0;
+    border-end-start-radius: 0!important;
+    border-start-start-radius: 0!important;
   }
 
-  .suffix ~ :is(input,textarea,output) {
+  .suffix ~ :is(input:not([type="checkbox"]):not([type="radio"]),textarea,output) {
     order: 1;
     
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
+    border-start-end-radius: 0!important;
+    border-end-end-radius: 0!important;
   }
 }
 // #endregion
@@ -400,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"]){
@@ -441,7 +441,7 @@ input:is([type="radio"],[type="checkbox"]) + label:not(:has(> iam-card)) {
   
   &:last-child {
     
-    margin-bottom: rem(24);
+    margin-bottom: 0;
   }
 
   &:before {
@@ -505,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;
   }
 }

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,7 +400,10 @@ export const createMultiFormDialog = (dialog) => {
 
       input.classList.remove('is-invalid');
 
-
+      if(event.keyCode == 13){
+        
+        event.preventDefault();
+      }
     }
   });