@ngx-stoui/core 20.0.6 → 20.0.8

package/ngx-datatable.css

@@ -132,7 +132,6 @@
 }
 
 .sto-datatable .sto-form__field {
-  width: calc(100% - 4px);
   min-height: auto;
   --mat-form-field-container-vertical-padding: 7px;
 }
@@ -196,6 +195,11 @@
   border-radius: 2px;
   margin-bottom: 4px;
 }
+.sto-datatable [role=table] {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
 .sto-datatable .datatable-header .datatable-header-cell {
   padding: 16px 8px 4px 8px;
   line-height: 13px;
@@ -233,11 +237,14 @@
 .sto-datatable .datatable-header .resize-handle {
   border-right: solid 1px #eee;
 }
+.sto-datatable .datatable-body {
+  flex: 1;
+}
 .sto-datatable .datatable-body .datatable-body-cell-label {
   line-height: 20px;
 }
 .sto-datatable .datatable-body .datatable-body-row .datatable-body-cell {
-  --mat-checkbox-state-layer-size: 35px;
+  --mat-checkbox-state-layer-size: 25px;
   padding: 8px;
   vertical-align: top;
   border-top: 0;

package/ngx-stoui.css

@@ -202,8 +202,12 @@ body .sto-datatable {
   background-color: transparent;
   color: var(--text);
 }
+body .sto-datatable [role=table] {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
 body .sto-datatable .sto-form__field {
-  width: calc(100% - 4px);
   min-height: auto;
   --mat-form-field-container-vertical-padding: 8px;
 }
@@ -216,12 +220,15 @@ body .sto-datatable .sto-form__field .mat-mdc-form-field-flex .mat-mdc-form-fiel
 body .sto-datatable .sto-form__field .mat-mdc-form-field-subscript-wrapper {
   display: none;
 }
+body .sto-datatable .datatable-body {
+  flex: 1;
+}
 body .sto-datatable .datatable-body mat-icon,
 body .sto-datatable .datatable-header mat-icon {
   color: var(--text-secondary);
 }
 body .sto-datatable .mat-mdc-checkbox {
-  --mat-checkbox-state-layer-size: 35px;
+  --mat-checkbox-state-layer-size: 25px;
 }
 body .sto-datatable .datatable-header {
   border-bottom: 1px solid var(--divider);
@@ -4399,6 +4406,7 @@ a.dense.breadcrumbs__button {
 }
 
 .mat-mdc-menu-item.dense {
+  min-height: 36px;
   height: 36px;
   line-height: 36px;
 }
@@ -4550,13 +4558,17 @@ body .sto-form__field--disabled .mat-select.mat-select-disabled .mat-select-arro
 .sto-form__field .mat-mdc-form-field-flex .mat-icon-button .mat-datepicker-toggle-default-icon {
   margin-top: -2px;
 }
-.sto-form__field:not(.sto-form__field--disabled) .mat-mdc-text-field-wrapper {
-  border: 1px solid var(--divider);
-}
 .sto-form__field .mat-mdc-form-field-subscript-wrapper {
   font-size: 11px;
   margin: 6px;
 }
+.sto-form__field .mat-mdc-form-field-subscript-wrapper:not(:has(.mat-mdc-slide-toggle)) {
+  margin-top: 0;
+}
+.sto-form__field .mat-mdc-form-field-hint-wrapper,
+.sto-form__field .mat-mdc-form-field-error-wrapper {
+  padding: 0;
+}
 .sto-form__field .mat-mdc-form-field-icon-suffix {
   height: 18px;
   color: var(--text);
@@ -4629,7 +4641,6 @@ body .sto-form__field--disabled .mat-select.mat-select-disabled .mat-select-arro
 }
 .sto-form__field--disabled .mat-mdc-form-field-flex {
   cursor: default;
-  border: 1px solid var(--divider);
   background-color: transparent;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngx-stoui/core",
-  "version": "20.0.6",
+  "version": "20.0.8",
   "author": {
     "name": "Ronnie Laugen",
     "email": "rhenri@equinor.com"

package/style/_fonts.scss

@@ -1,3 +1,3 @@
-@import url("https://cdn.eds.equinor.com/font/equinor-font.css");
-@import url("https://fonts.googleapis.com/css?family=Material+Icons");
-@import url("https://fonts.googleapis.com/css?family=Material+Icons+Outlined");
+@import url('https://cdn.eds.equinor.com/font/equinor-font.css');
+@import url('https://fonts.googleapis.com/css?family=Material+Icons');
+@import url('https://fonts.googleapis.com/css?family=Material+Icons+Outlined');

package/style/datatable/_ngx-datatable-form.scss

@@ -1,6 +1,6 @@
 .sto-datatable {
   .sto-form__field {
-    width: calc(100% - 4px);
+    // width: calc(100% - 4px);
     min-height: auto;
     --mat-form-field-container-vertical-padding: 7px;
     &--readonly,

package/style/datatable/ngx-datatable.scss

@@ -5,6 +5,12 @@
   border-radius: 2px;
   margin-bottom: 4px;
 
+  [role='table'] {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
   .datatable-header {
     .datatable-header-cell {
       padding: 16px 8px 4px 8px;
@@ -52,13 +58,14 @@
   }
 
   .datatable-body {
+    flex: 1;
     .datatable-body-cell-label {
       line-height: 20px;
     }
 
     .datatable-body-row {
       .datatable-body-cell {
-        --mat-checkbox-state-layer-size: 35px;
+        --mat-checkbox-state-layer-size: 25px;
         padding: 8px;
         vertical-align: top;
         border-top: 0;

package/style/form/sto-form.scss

@@ -162,25 +162,18 @@ $border-radius: 4px;
         }
       }
     }
-    &:not(.sto-form__field--disabled) {
-      .mat-mdc-text-field-wrapper {
-        border: 1px solid var(--divider);
-      }
-    }
 
     .mat-mdc-form-field-subscript-wrapper {
       font-size: 11px;
       margin: 6px;
+      &:not(:has(.mat-mdc-slide-toggle)) {
+        margin-top: 0;
+      }
+    }
+    .mat-mdc-form-field-hint-wrapper,
+    .mat-mdc-form-field-error-wrapper {
+      padding: 0;
     }
-    // .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea),
-    // .mat-mdc-form-field-flex {
-    //   .mat-mdc-form-field-infix {
-    //     padding: 6px 0 0 0;
-    //   }
-    // }
-    // .mat-mdc-form-field-flex .mat-mdc-form-field-infix {
-    //   border-top: 0.99975em solid transparent;
-    // }
     .mat-mdc-form-field-icon-suffix {
       height: 18px;
       color: var(--text);
@@ -196,9 +189,6 @@ $border-radius: 4px;
         padding: 2px;
       }
     }
-    // &:has(.mdc-floating-label) .mat-mdc-form-field-icon-suffix {
-    //   place-self: baseline;
-    // }
     .mat-mdc-select-arrow-wrapper {
       height: 20px;
     }
@@ -281,7 +271,6 @@ $border-radius: 4px;
 
   .mat-mdc-form-field-flex {
     cursor: default;
-    border: 1px solid var(--divider);
     background-color: transparent;
   }
 }

package/style/theme/_datatable.scss

@@ -80,8 +80,13 @@
   .sto-datatable {
     background-color: $background-color;
     color: $color;
+    [role='table'] {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
     .sto-form__field {
-      width: calc(100% - 4px);
+      // width: calc(100% - 4px);
       min-height: auto;
       --mat-form-field-container-vertical-padding: 8px;
       .mat-mdc-form-field-flex {
@@ -94,6 +99,9 @@
         display: none;
       }
     }
+    .datatable-body {
+      flex: 1;
+    }
     .datatable-body,
     .datatable-header {
       mat-icon {
@@ -102,7 +110,7 @@
     }
 
     .mat-mdc-checkbox {
-      --mat-checkbox-state-layer-size: 35px;
+      --mat-checkbox-state-layer-size: 25px;
     }
     .datatable-header {
       border-bottom: 1px solid $border-color;