@ngx-stoui/core 20.0.2 → 20.0.4

package/ngx-datatable.css

@@ -133,10 +133,18 @@
 
 .sto-datatable .sto-form__field {
   width: 100%;
+  min-height: auto;
+  --mat-form-field-container-vertical-padding: 7px;
 }
 .sto-datatable .sto-form__field--readonly .mat-mdc-form-field-flex, .sto-datatable .sto-form__field--disabled .mat-mdc-form-field-flex {
   border: 0;
 }
+.sto-datatable .sto-form__field .mat-mdc-form-field-flex {
+  padding: 0 6px;
+}
+.sto-datatable .sto-form__field .mat-mdc-form-field-subscript-wrapper {
+  display: none;
+}
 .sto-datatable .sto-form__field input[type=number] {
   text-align: right;
 }
@@ -169,7 +177,6 @@
 
 .sto-compact .sto-datatable .sto-form__field .mat-mdc-form-field-flex {
   height: auto;
-  padding: 0 6px;
 }
 .sto-compact .sto-datatable .sto-form__field .mat-mdc-form-field-icon-suffix {
   height: 22px;
@@ -240,8 +247,8 @@
   padding: 0;
 }
 .sto-datatable .datatable-body .datatable-body-row .datatable-body-cell .mat-mdc-form-field {
-  --mat-form-field-container-vertical-padding: 0px;
-  --mat-form-field-container-height: 20px;
+  --mat-form-field-container-vertical-padding: 6px;
+  --mat-form-field-container-height: 32px;
   margin: 0 4px;
   min-height: 0;
 }

package/ngx-stoui.css

@@ -202,6 +202,20 @@ body .sto-datatable {
   background-color: transparent;
   color: var(--text);
 }
+body .sto-datatable .sto-form__field {
+  width: 100%;
+  min-height: auto;
+  --mat-form-field-container-vertical-padding: 8px;
+}
+body .sto-datatable .sto-form__field .mat-mdc-form-field-flex {
+  padding: 0 6px;
+}
+body .sto-datatable .sto-form__field .mat-mdc-form-field-flex .mat-mdc-form-field-infix {
+  width: auto;
+}
+body .sto-datatable .sto-form__field .mat-mdc-form-field-subscript-wrapper {
+  display: none;
+}
 body .sto-datatable .datatable-body mat-icon,
 body .sto-datatable .datatable-header mat-icon {
   color: var(--text-secondary);
@@ -4058,12 +4072,13 @@ input::-webkit-inner-spin-button {
 }
 
 html body.mat-app-background {
+  --mat-button-outlined-disabled-label-text-color: var(--text-disabled);
+  --mat-button-outlined-label-text-color: var(--text);
   --mat-button-protected-label-text-color: var(--primary-hover-alt);
   --mat-button-text-container-height: 46px;
+  --mat-button-text-disabled-label-text-color: var(--text-disabled);
   --mat-button-text-label-text-color: var(--text);
   --mat-button-toggle-text-color: var(--text);
-  --mat-button-outlined-disabled-label-text-color: var(--text-disabled);
-  --mat-button-outlined-label-text-color: var(--text);
   --mat-card-elevated-container-color: var(--bg-card);
   --mat-card-outlined-container-color: hsla(from var(--bg-card) h s l / 50%);
   --mat-checkbox-label-text-color: var(--text);
@@ -4073,6 +4088,7 @@ html body.mat-app-background {
   --mat-checkbox-unselected-hover-icon-color: var(--text-disabled);
   --mat-checkbox-unselected-icon-color: var(--text);
   --mat-datepicker-calendar-body-label-text-color: var(--text);
+  --mat-datepicker-calendar-date-today-outline-color: var(--primary-hover);
   --mat-datepicker-calendar-container-background-color: var(--bg-card);
   --mat-datepicker-calendar-date-selected-state-background-color: var(
     --primary-resting
@@ -4120,6 +4136,7 @@ html body.mat-app-background {
   --mat-menu-item-icon-color: var(--text);
   --mat-menu-item-label-text-color: var(--text);
   --mat-option-label-text-color: var(--text);
+  --mat-option-selected-state-label-text-color: var(--text);
   --mat-progress-bar-active-indicator-color: var(--primary-highlight);
   --mat-pseudo-checkbox-full-unselected-icon-color: var(--text);
   --mat-radio-selected-icon-color: var(--primary-resting);
@@ -4136,6 +4153,7 @@ html body.mat-app-background {
     --primary-selected-hover
   );
   --mat-slide-toggle-selected-track-color: var(--primary-selected-hover);
+  --mat-sort-arrow-color: var(--text);
   --mat-tab-active-label-text-color: var(--text);
   --mat-tab-inactive-focus-label-text-color: var(--text-disabled);
   --mat-tab-inactive-hover-label-text-color: var(--text-disabled);
@@ -4148,6 +4166,28 @@ html body.mat-app-background {
   color: var(--text);
   scrollbar-color: var(--primary-resting) var(--bg-card);
 }
+html body .mat-primary {
+  --mat-pseudo-checkbox-full-selected-icon-color: var(--primary-resting);
+  --mat-pseudo-checkbox-full-selected-checkmark-color: var(
+    --accent-hover-contrast
+  );
+  --mat-pseudo-checkbox-full-unselected-icon-color: var(--text);
+  --mat-pseudo-checkbox-full-disabled-selected-checkmark-color: var(
+    --text-disabled
+  );
+  --mat-pseudo-checkbox-full-disabled-unselected-icon-color: var(
+    --text-disabled
+  );
+  --mat-pseudo-checkbox-full-disabled-selected-icon-color: var(
+    --text-disabled
+  );
+  --mat-pseudo-checkbox-minimal-selected-checkmark-color: var(
+    --primary-resting
+  );
+  --mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: var(
+    --text-disabled
+  );
+}
 html body .mat-mdc-checkbox,
 html body .mat-mdc-checkbox.mat-primary {
   --mat-checkbox-label-text-color: var(--text);
@@ -4156,7 +4196,6 @@ html body .mat-mdc-checkbox.mat-primary {
   --mat-checkbox-unselected-focus-icon-color: var(--text-disabled);
   --mat-checkbox-unselected-hover-icon-color: var(--text-disabled);
   --mat-checkbox-unselected-icon-color: var(--text);
-  --mat-pseudo-checkbox-full-unselected-icon-color: var(--text);
 }
 html body .mat-mdc-select-panel {
   padding: 0;

package/package.json

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

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

@@ -1,12 +1,20 @@
 .sto-datatable {
   .sto-form__field {
     width: 100%;
+    min-height: auto;
+    --mat-form-field-container-vertical-padding: 7px;
     &--readonly,
     &--disabled {
       .mat-mdc-form-field-flex {
         border: 0;
       }
     }
+    .mat-mdc-form-field-flex {
+      padding: 0 6px;
+    }
+    .mat-mdc-form-field-subscript-wrapper {
+      display: none;
+    }
 
     input[type='number'] {
       text-align: right;
@@ -56,7 +64,6 @@
     .sto-form__field {
       .mat-mdc-form-field-flex {
         height: auto;
-        padding: 0 6px;
       }
 
       .mat-mdc-form-field-icon-suffix {

package/style/datatable/ngx-datatable.scss

@@ -70,8 +70,8 @@
           padding: 0;
         }
         .mat-mdc-form-field {
-          --mat-form-field-container-vertical-padding: 0px;
-          --mat-form-field-container-height: 20px;
+          --mat-form-field-container-vertical-padding: 6px;
+          --mat-form-field-container-height: 32px;
           margin: 0 4px;
           min-height: 0;
         }

package/style/theme/_datatable.scss

@@ -80,7 +80,20 @@
   .sto-datatable {
     background-color: $background-color;
     color: $color;
-
+    .sto-form__field {
+      width: 100%;
+      min-height: auto;
+      --mat-form-field-container-vertical-padding: 8px;
+      .mat-mdc-form-field-flex {
+        padding: 0 6px;
+        .mat-mdc-form-field-infix {
+          width: auto;
+        }
+      }
+      .mat-mdc-form-field-subscript-wrapper {
+        display: none;
+      }
+    }
     .datatable-body,
     .datatable-header {
       mat-icon {