@ngx-stoui/core 20.0.7 → 20.0.9

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);
@@ -4232,6 +4239,8 @@ html body.mat-app-background {
   --mat-slide-toggle-handle-surface-color: var(--primary-resting);
   --mat-slide-toggle-label-text-color: var(--text);
   --mat-slide-toggle-selected-focus-track-color: var(--primary-selected-focus);
+  --mat-slide-toggle-selected-icon-color: var(--primary-contrast-resting);
+  --mat-slide-toggle-disabled-selected-icon-color: var(--primary-selected-hover);
   --mat-slide-toggle-selected-hover-track-color: var(--primary-selected-hover);
   --mat-slide-toggle-selected-track-color: var(--primary-selected-hover);
   --mat-slide-toggle-unselected-focus-handle-color: var(--bg-default);
@@ -4288,6 +4297,9 @@ html body .mat-mdc-select-panel {
 html body .mat-mdc-option {
   min-height: 36px;
 }
+html body .mdc-switch.mdc-switch--disabled {
+  --mat-slide-toggle-handle-surface-color: var(--bg-disabled);
+}
 html body .mat-mdc-button-base {
   height: var(--mat-button-text-container-height);
 }
@@ -4412,6 +4424,12 @@ a.dense.breadcrumbs__button {
   height: 100%;
 }
 
+sto-nav-drawer-item .mat-mdc-button > .mat-icon {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+}
+
 .mat-select-panel,
 .mat-autocomplete-panel {
   border-radius: 4px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngx-stoui/core",
-  "version": "20.0.7",
+  "version": "20.0.9",
   "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/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;