@ngx-stoui/core 20.0.4 → 20.0.5

package/ngx-stoui.css

@@ -131,30 +131,30 @@ body .sto-breadcrumb .separator {
   height: 28px;
 }
 
-.mat-typography:not(.sto-sm-typography):not(.sto-l-typography) .mat-card.sto-card .mat-card-title,
-.mat-typography:not(.sto-sm-typography):not(.sto-l-typography) .mat-card.sto-card .mat-card-title.sto-card__title {
+.mat-typography:not(.sto-sm-typography):not(.sto-l-typography) .mat-mdc-card.sto-card .mat-mdc-card-title,
+.mat-typography:not(.sto-sm-typography):not(.sto-l-typography) .mat-mdc-card.sto-card .mat-mdc-card-title.sto-card__title {
   line-height: 44px;
 }
-.mat-typography:not(.sto-sm-typography):not(.sto-l-typography) .mat-card.sto-card .mat-card-subtitle,
-.mat-typography:not(.sto-sm-typography):not(.sto-l-typography) .mat-card.sto-card .mat-card-subtitle.sto-card__subtitle {
+.mat-typography:not(.sto-sm-typography):not(.sto-l-typography) .mat-mdc-card.sto-card .mat-mdc-card-subtitle,
+.mat-typography:not(.sto-sm-typography):not(.sto-l-typography) .mat-mdc-card.sto-card .mat-mdc-card-subtitle.sto-card__subtitle {
   margin-bottom: 4px;
 }
 
-.mat-typography.sto-sm-typography .mat-card.sto-card .mat-card-title,
-.mat-typography.sto-sm-typography .mat-card.sto-card .mat-card-title.sto-card__title {
+.mat-typography.sto-sm-typography .mat-mdc-card.sto-card .mat-mdc-card-title,
+.mat-typography.sto-sm-typography .mat-mdc-card.sto-card .mat-mdc-card-title.sto-card__title {
   line-height: 40px;
 }
-.mat-typography.sto-sm-typography .mat-card.sto-card .mat-card-subtitle,
-.mat-typography.sto-sm-typography .mat-card.sto-card .mat-card-subtitle.sto-card__subtitle {
+.mat-typography.sto-sm-typography .mat-mdc-card.sto-card .mat-mdc-card-subtitle,
+.mat-typography.sto-sm-typography .mat-mdc-card.sto-card .mat-mdc-card-subtitle.sto-card__subtitle {
   margin-bottom: 4px;
 }
 
-.mat-typography.sto-l-typography .mat-card.sto-card .mat-card-title,
-.mat-typography.sto-l-typography .mat-card.sto-card .mat-card-title.sto-card__title {
+.mat-typography.sto-l-typography .mat-mdc-card.sto-card .mat-mdc-card-title,
+.mat-typography.sto-l-typography .mat-mdc-card.sto-card .mat-mdc-card-title.sto-card__title {
   line-height: 48px;
 }
-.mat-typography.sto-l-typography .mat-card.sto-card .mat-card-subtitle,
-.mat-typography.sto-l-typography .mat-card.sto-card .mat-card-subtitle.sto-card__subtitle {
+.mat-typography.sto-l-typography .mat-mdc-card.sto-card .mat-mdc-card-subtitle,
+.mat-typography.sto-l-typography .mat-mdc-card.sto-card .mat-mdc-card-subtitle.sto-card__subtitle {
   margin-bottom: 4px;
 }
 
@@ -222,7 +222,6 @@ body .sto-datatable .datatable-header mat-icon {
 }
 body .sto-datatable .mat-mdc-checkbox {
   --mat-checkbox-state-layer-size: 35px;
-  display: inline-flex;
 }
 body .sto-datatable .datatable-header {
   border-bottom: 1px solid var(--divider);
@@ -2552,6 +2551,106 @@ html {
   --mat-timepicker-container-background-color: white;
 }
 
+.mat-elevation-z0, .mat-mdc-elevation-specific.mat-elevation-z0 {
+  box-shadow: var(--mat-app-elevation-shadow-level-0, 0px 0px 0px 0px --mat-sys-shadow, 0px 0px 0px 0px --mat-sys-shadow, 0px 0px 0px 0px --mat-sys-shadow);
+}
+
+.mat-elevation-z1, .mat-mdc-elevation-specific.mat-elevation-z1 {
+  box-shadow: var(--mat-app-elevation-shadow-level-1, 0px 2px 1px -1px --mat-sys-shadow, 0px 1px 1px 0px --mat-sys-shadow, 0px 1px 3px 0px --mat-sys-shadow);
+}
+
+.mat-elevation-z2, .mat-mdc-elevation-specific.mat-elevation-z2 {
+  box-shadow: var(--mat-app-elevation-shadow-level-2, 0px 3px 1px -2px --mat-sys-shadow, 0px 2px 2px 0px --mat-sys-shadow, 0px 1px 5px 0px --mat-sys-shadow);
+}
+
+.mat-elevation-z3, .mat-mdc-elevation-specific.mat-elevation-z3 {
+  box-shadow: var(--mat-app-elevation-shadow-level-3, 0px 3px 3px -2px --mat-sys-shadow, 0px 3px 4px 0px --mat-sys-shadow, 0px 1px 8px 0px --mat-sys-shadow);
+}
+
+.mat-elevation-z4, .mat-mdc-elevation-specific.mat-elevation-z4 {
+  box-shadow: var(--mat-app-elevation-shadow-level-4, 0px 2px 4px -1px --mat-sys-shadow, 0px 4px 5px 0px --mat-sys-shadow, 0px 1px 10px 0px --mat-sys-shadow);
+}
+
+.mat-elevation-z5, .mat-mdc-elevation-specific.mat-elevation-z5 {
+  box-shadow: var(--mat-app-elevation-shadow-level-5, 0px 3px 5px -1px --mat-sys-shadow, 0px 5px 8px 0px --mat-sys-shadow, 0px 1px 14px 0px --mat-sys-shadow);
+}
+
+.mat-elevation-z6, .mat-mdc-elevation-specific.mat-elevation-z6 {
+  box-shadow: var(--mat-app-elevation-shadow-level-6, 0px 3px 5px -1px --mat-sys-shadow, 0px 6px 10px 0px --mat-sys-shadow, 0px 1px 18px 0px --mat-sys-shadow);
+}
+
+.mat-elevation-z7, .mat-mdc-elevation-specific.mat-elevation-z7 {
+  box-shadow: var(--mat-app-elevation-shadow-level-7, 0px 4px 5px -2px --mat-sys-shadow, 0px 7px 10px 1px --mat-sys-shadow, 0px 2px 16px 1px --mat-sys-shadow);
+}
+
+.mat-elevation-z8, .mat-mdc-elevation-specific.mat-elevation-z8 {
+  box-shadow: var(--mat-app-elevation-shadow-level-8, 0px 5px 5px -3px --mat-sys-shadow, 0px 8px 10px 1px --mat-sys-shadow, 0px 3px 14px 2px --mat-sys-shadow);
+}
+
+.mat-elevation-z9, .mat-mdc-elevation-specific.mat-elevation-z9 {
+  box-shadow: var(--mat-app-elevation-shadow-level-9, 0px 5px 6px -3px --mat-sys-shadow, 0px 9px 12px 1px --mat-sys-shadow, 0px 3px 16px 2px --mat-sys-shadow);
+}
+
+.mat-elevation-z10, .mat-mdc-elevation-specific.mat-elevation-z10 {
+  box-shadow: var(--mat-app-elevation-shadow-level-10, 0px 6px 6px -3px --mat-sys-shadow, 0px 10px 14px 1px --mat-sys-shadow, 0px 4px 18px 3px --mat-sys-shadow);
+}
+
+.mat-elevation-z11, .mat-mdc-elevation-specific.mat-elevation-z11 {
+  box-shadow: var(--mat-app-elevation-shadow-level-11, 0px 6px 7px -4px --mat-sys-shadow, 0px 11px 15px 1px --mat-sys-shadow, 0px 4px 20px 3px --mat-sys-shadow);
+}
+
+.mat-elevation-z12, .mat-mdc-elevation-specific.mat-elevation-z12 {
+  box-shadow: var(--mat-app-elevation-shadow-level-12, 0px 7px 8px -4px --mat-sys-shadow, 0px 12px 17px 2px --mat-sys-shadow, 0px 5px 22px 4px --mat-sys-shadow);
+}
+
+.mat-elevation-z13, .mat-mdc-elevation-specific.mat-elevation-z13 {
+  box-shadow: var(--mat-app-elevation-shadow-level-13, 0px 7px 8px -4px --mat-sys-shadow, 0px 13px 19px 2px --mat-sys-shadow, 0px 5px 24px 4px --mat-sys-shadow);
+}
+
+.mat-elevation-z14, .mat-mdc-elevation-specific.mat-elevation-z14 {
+  box-shadow: var(--mat-app-elevation-shadow-level-14, 0px 7px 9px -4px --mat-sys-shadow, 0px 14px 21px 2px --mat-sys-shadow, 0px 5px 26px 4px --mat-sys-shadow);
+}
+
+.mat-elevation-z15, .mat-mdc-elevation-specific.mat-elevation-z15 {
+  box-shadow: var(--mat-app-elevation-shadow-level-15, 0px 8px 9px -5px --mat-sys-shadow, 0px 15px 22px 2px --mat-sys-shadow, 0px 6px 28px 5px --mat-sys-shadow);
+}
+
+.mat-elevation-z16, .mat-mdc-elevation-specific.mat-elevation-z16 {
+  box-shadow: var(--mat-app-elevation-shadow-level-16, 0px 8px 10px -5px --mat-sys-shadow, 0px 16px 24px 2px --mat-sys-shadow, 0px 6px 30px 5px --mat-sys-shadow);
+}
+
+.mat-elevation-z17, .mat-mdc-elevation-specific.mat-elevation-z17 {
+  box-shadow: var(--mat-app-elevation-shadow-level-17, 0px 8px 11px -5px --mat-sys-shadow, 0px 17px 26px 2px --mat-sys-shadow, 0px 6px 32px 5px --mat-sys-shadow);
+}
+
+.mat-elevation-z18, .mat-mdc-elevation-specific.mat-elevation-z18 {
+  box-shadow: var(--mat-app-elevation-shadow-level-18, 0px 9px 11px -5px --mat-sys-shadow, 0px 18px 28px 2px --mat-sys-shadow, 0px 7px 34px 6px --mat-sys-shadow);
+}
+
+.mat-elevation-z19, .mat-mdc-elevation-specific.mat-elevation-z19 {
+  box-shadow: var(--mat-app-elevation-shadow-level-19, 0px 9px 12px -6px --mat-sys-shadow, 0px 19px 29px 2px --mat-sys-shadow, 0px 7px 36px 6px --mat-sys-shadow);
+}
+
+.mat-elevation-z20, .mat-mdc-elevation-specific.mat-elevation-z20 {
+  box-shadow: var(--mat-app-elevation-shadow-level-20, 0px 10px 13px -6px --mat-sys-shadow, 0px 20px 31px 3px --mat-sys-shadow, 0px 8px 38px 7px --mat-sys-shadow);
+}
+
+.mat-elevation-z21, .mat-mdc-elevation-specific.mat-elevation-z21 {
+  box-shadow: var(--mat-app-elevation-shadow-level-21, 0px 10px 13px -6px --mat-sys-shadow, 0px 21px 33px 3px --mat-sys-shadow, 0px 8px 40px 7px --mat-sys-shadow);
+}
+
+.mat-elevation-z22, .mat-mdc-elevation-specific.mat-elevation-z22 {
+  box-shadow: var(--mat-app-elevation-shadow-level-22, 0px 10px 14px -6px --mat-sys-shadow, 0px 22px 35px 3px --mat-sys-shadow, 0px 8px 42px 7px --mat-sys-shadow);
+}
+
+.mat-elevation-z23, .mat-mdc-elevation-specific.mat-elevation-z23 {
+  box-shadow: var(--mat-app-elevation-shadow-level-23, 0px 11px 14px -7px --mat-sys-shadow, 0px 23px 36px 3px --mat-sys-shadow, 0px 9px 44px 8px --mat-sys-shadow);
+}
+
+.mat-elevation-z24, .mat-mdc-elevation-specific.mat-elevation-z24 {
+  box-shadow: var(--mat-app-elevation-shadow-level-24, 0px 11px 15px -7px --mat-sys-shadow, 0px 24px 38px 3px --mat-sys-shadow, 0px 9px 46px 8px --mat-sys-shadow);
+}
+
 body,
 .sto-header,
 .mat-card {
@@ -4115,7 +4214,7 @@ html body.mat-app-background {
   --mat-form-field-container-height: 36px;
   --mat-form-field-filled-active-indicator-color: var(--divider);
   --mat-form-field-filled-caret-color: var(--text);
-  --mat-form-field-filled-container-color: var(--bg-light);
+  --mat-form-field-filled-container-color: var(--bg-default);
   --mat-form-field-filled-focus-active-indicator-color: var(
     --primary-resting
   );
@@ -4374,7 +4473,7 @@ body .sto-form__field--disabled .mat-select.mat-select-disabled .mat-select-arro
 
 .sto-form__field {
   width: 100%;
-  min-height: 72px;
+  min-height: auto;
   outline: none;
 }
 .sto-form__field .mat-input-element {
@@ -4382,7 +4481,7 @@ body .sto-form__field--disabled .mat-select.mat-select-disabled .mat-select-arro
   overflow: hidden;
 }
 
-.mat-card.sto-card {
+.mat-mdc-card.sto-card {
   width: 100%;
   padding: 16px 8px 0 8px;
   margin-bottom: 8px;
@@ -4407,43 +4506,44 @@ body .sto-form__field--disabled .mat-select.mat-select-disabled .mat-select-arro
   margin-top: -10px;
 }
 
-.mat-card.sto-card .mat-card-title.sto-card__title {
+.mat-mdc-card.sto-card .mat-mdc-card-title.sto-card__title {
   width: 100%;
   padding-left: 8px;
   display: flex;
   justify-content: space-between;
 }
-.mat-card.sto-card .mat-card-title.sto-card__title h1,
-.mat-card.sto-card .mat-card-title.sto-card__title h2,
-.mat-card.sto-card .mat-card-title.sto-card__title h3 {
+.mat-mdc-card.sto-card .mat-mdc-card-title.sto-card__title h1,
+.mat-mdc-card.sto-card .mat-mdc-card-title.sto-card__title h2,
+.mat-mdc-card.sto-card .mat-mdc-card-title.sto-card__title h3 {
   display: inline-block;
   margin-bottom: 0;
   white-space: nowrap;
 }
-.mat-card.sto-card .mat-card-subtitle.sto-card__subtitle {
+.mat-mdc-card.sto-card .mat-mdc-card-subtitle.sto-card__subtitle {
   padding-left: 8px;
 }
-.mat-card.sto-card .sto-card__button-row {
+.mat-mdc-card.sto-card .sto-card__button-row {
   width: 100%;
   display: flex;
   justify-content: flex-end;
 }
-.mat-card.sto-card .sto-card__button-row .mat-button {
+.mat-mdc-card.sto-card .sto-card__button-row .mat-button {
   margin-top: -8px;
 }
-.mat-card.sto-card .sto-card__content {
+.mat-mdc-card.sto-card .sto-card__content {
   padding-left: 8px;
 }
 
 .sto-form__field {
   cursor: pointer;
-  --mat-form-field-filled-container-color: var(--bg-light);
-  --mat-form-field-state-layer-color: var(--bg-light);
+  --mat-form-field-filled-container-color: var(--bg-default);
+  --mat-form-field-state-layer-color: var(--bg-default);
 }
 .sto-form__field.mat-focused.sto-form__field--disabled .mat-form-field-underline .mat-form-field-ripple {
   display: none;
 }
 .sto-form__field.sto-form__field--readonly {
+  --mat-form-field-filled-container-color: var(--bg-light);
   cursor: default;
 }
 .sto-form__field.sto-form__field--disabled {
@@ -4453,7 +4553,7 @@ body .sto-form__field--disabled .mat-select.mat-select-disabled .mat-select-arro
   cursor: default;
 }
 .sto-form__field .mat-mdc-form-field-flex {
-  padding: 6px;
+  padding: 0 6px;
   border-radius: 4px;
   align-items: center;
 }
@@ -4463,6 +4563,9 @@ 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;
@@ -4482,9 +4585,6 @@ body .sto-form__field--disabled .mat-select.mat-select-disabled .mat-select-arro
 .sto-form__field .mat-mdc-form-field-icon-suffix > .mat-icon {
   padding: 2px;
 }
-.sto-form__field:has(.mdc-floating-label) .mat-mdc-form-field-icon-suffix {
-  place-self: center;
-}
 .sto-form__field .mat-mdc-select-arrow-wrapper {
   height: 20px;
 }
@@ -4493,7 +4593,7 @@ body .sto-form__field--disabled .mat-select.mat-select-disabled .mat-select-arro
 }
 .sto-form__field .mat-mdc-slide-toggle {
   position: absolute;
-  bottom: 0;
+  bottom: 8px;
   right: 4px;
 }
 .sto-form__field .mat-radio-button {

package/package.json

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

package/style/form/sto-form.scss

@@ -38,13 +38,11 @@ body {
   @include sto-form-theme($sto-theme, $variables);
 }
 
-$form-field-bg: var(--bg-light);
 $border-radius: 4px;
-$height: 72px;
 
 %sto-form__field {
   width: 100%;
-  min-height: $height;
+  min-height: auto;
   outline: none;
 
   .mat-input-element {
@@ -84,10 +82,10 @@ $height: 72px;
   }
 }
 
-.mat-card.sto-card {
+.mat-mdc-card.sto-card {
   @extend %sto-card;
 
-  .mat-card-title.sto-card__title {
+  .mat-mdc-card-title.sto-card__title {
     width: 100%;
     padding-left: 8px;
     display: flex;
@@ -101,7 +99,7 @@ $height: 72px;
     }
   }
 
-  .mat-card-subtitle.sto-card__subtitle {
+  .mat-mdc-card-subtitle.sto-card__subtitle {
     padding-left: 8px;
   }
 
@@ -124,8 +122,8 @@ $height: 72px;
   &__field {
     cursor: pointer;
     @extend %sto-form__field;
-    --mat-form-field-filled-container-color: #{$form-field-bg};
-    --mat-form-field-state-layer-color: #{$form-field-bg};
+    --mat-form-field-filled-container-color: var(--bg-default);
+    --mat-form-field-state-layer-color: var(--bg-default);
 
     &.mat-focused {
       @extend %sto-form__field--focused;
@@ -139,6 +137,7 @@ $height: 72px;
     }
 
     &.sto-form__field--readonly {
+      --mat-form-field-filled-container-color: var(--bg-light);
       cursor: default;
     }
     &.sto-form__field--disabled {
@@ -149,9 +148,8 @@ $height: 72px;
     }
 
     .mat-mdc-form-field-flex {
-      padding: 6px;
+      padding: 0 6px;
       border-radius: 4px;
-      // background-color: $form-field-bg;
       align-items: center;
       .mat-mdc-floating-label {
         top: 5px;
@@ -165,6 +163,11 @@ $height: 72px;
         }
       }
     }
+    &:not(.sto-form__field--disabled) {
+      .mat-mdc-text-field-wrapper {
+        border: 1px solid var(--divider);
+      }
+    }
 
     .mat-mdc-form-field-subscript-wrapper {
       font-size: 11px;
@@ -194,9 +197,9 @@ $height: 72px;
         padding: 2px;
       }
     }
-    &:has(.mdc-floating-label) .mat-mdc-form-field-icon-suffix {
-      place-self: center;
-    }
+    // &:has(.mdc-floating-label) .mat-mdc-form-field-icon-suffix {
+    //   place-self: baseline;
+    // }
     .mat-mdc-select-arrow-wrapper {
       height: 20px;
     }
@@ -207,7 +210,7 @@ $height: 72px;
 
     .mat-mdc-slide-toggle {
       position: absolute;
-      bottom: 0;
+      bottom: 8px;
       right: 4px;
     }
 

package/style/theme/_card.scss

@@ -2,14 +2,14 @@
 @import 'typography';
 
 @mixin sto-card-typography($config) {
-  .mat-card.sto-card {
-    .mat-card-title,
-    .mat-card-title.sto-card__title {
+  .mat-mdc-card.sto-card {
+    .mat-mdc-card-title,
+    .mat-mdc-card-title.sto-card__title {
       line-height: mat.m2-line-height($config, headline-1);
     }
 
-    .mat-card-subtitle,
-    .mat-card-subtitle.sto-card__subtitle {
+    .mat-mdc-card-subtitle,
+    .mat-mdc-card-subtitle.sto-card__subtitle {
       margin-bottom: 4px;
     }
   }

package/style/theme/_datatable.scss

@@ -103,7 +103,6 @@
 
     .mat-mdc-checkbox {
       --mat-checkbox-state-layer-size: 35px;
-      display: inline-flex;
     }
     .datatable-header {
       border-bottom: 1px solid $border-color;

package/style/theme.scss

@@ -8,6 +8,7 @@
 // Include theme styles for core and each component used in your app.
 @include mat.core-theme($sto-theme);
 @include mat.all-component-themes($sto-theme);
+@include mat.elevation-classes();
 
 body,
 .sto-header,