@ngx-stoui/core 20.0.0 → 20.0.1

package/ngx-datatable.css

@@ -199,6 +199,9 @@
   -ms-user-select: none; /* IE10+/Edge */
   user-select: none; /* Standard */
 }
+.sto-datatable .datatable-header .datatable-header-cell:has(.mat-mdc-checkbox) {
+  padding: 4px 8px 0 8px;
+}
 .sto-datatable .datatable-header .datatable-header-cell .datatable-header-cell-wrapper {
   position: relative;
 }
@@ -220,10 +223,6 @@
 .sto-datatable .datatable-header .datatable-header-cell.dragging .resize-handle {
   border-right: none;
 }
-.sto-datatable .datatable-header .datatable-header-cell .mat-mdc-checkbox {
-  --mat-checkbox-state-layer-size: 18px;
-  margin-left: 11px;
-}
 .sto-datatable .datatable-header .resize-handle {
   border-right: solid 1px #eee;
 }

package/ngx-stoui.css

@@ -428,11 +428,6 @@ body .mat-option.sto-option--clear {
   color: var(--text-secondary);
 }
 
-body .sto-form__field,
-body .sto-form__field.mat-mdc-form-field {
-  --mat-form-field-filled-container-color: var(--bg-light);
-  --mat-form-field-state-layer-color: var(--bg-light);
-}
 body .sto-form__field .mat-mdc-form-field-flex .mat-input,
 body .sto-form__field.mat-mdc-form-field .mat-mdc-form-field-flex .mat-input {
   color: var(--text);
@@ -4063,32 +4058,110 @@ input::-webkit-inner-spin-button {
 }
 
 html body.mat-app-background {
-  background-color: var(--bg-app);
-  color: var(--text);
-  --mat-theme-surface: var(--primary-resting);
-}
-html body .mat-expansion-panel {
+  --mat-button-protected-label-text-color: var(--primary-hover-alt);
+  --mat-button-text-container-height: 46px;
+  --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);
+  --mat-checkbox-selected-checkmark-color: var(--accent-hover-contrast);
+  --mat-checkbox-selected-hover-icon-color: var(--primary-hover);
+  --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-datepicker-calendar-body-label-text-color: var(--text);
+  --mat-datepicker-calendar-container-background-color: var(--bg-card);
+  --mat-datepicker-calendar-date-selected-state-background-color: var(
+    --primary-resting
+  );
+  --mat-datepicker-calendar-date-selected-state-text-color: var(
+    --accent-hover-contrast
+  );
+  --mat-datepicker-calendar-date-text-color: hsla(
+    from var(--text) h s l / 80%
+  );
+  --mat-datepicker-calendar-header-text-color: var(--text-tertiary);
+  --mat-datepicker-calendar-navigation-button-icon-color: var(--text);
+  --mat-datepicker-calendar-period-button-icon-color: var(--text);
+  --mat-datepicker-range-input-separator-color: var(--text-tertiary);
+  --mat-datepicker-toggle-icon-color: var(--text);
+  --mat-dialog-container-color: var(--bg-card);
+  --mat-dialog-subhead-color: var(--text);
+  --mat-dialog-supporting-text-color: var(--text);
   --mat-expansion-container-background-color: var(--bg-card);
+  --mat-expansion-container-text-color: var(--text);
   --mat-expansion-header-hover-state-layer-color: var(--bg-hover);
-  --mat-expansion-header-text-color: var(--text);
   --mat-expansion-header-indicator-color: var(--text);
-  --mat-expansion-container-text-color: var(--text);
-}
-html body .mat-mdc-button-base {
-  --mat-button-text-container-height: 46px;
-  --mat-button-protected-label-text-color: var(--primary-hover-alt);
-  height: var(--mat-button-text-container-height);
+  --mat-expansion-header-text-color: var(--text);
+  --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-focus-active-indicator-color: var(
+    --primary-resting
+  );
+  --mat-form-field-filled-focus-label-text-color: hsla(
+    from var(--text) h s l / 70%
+  );
+  --mat-form-field-filled-hover-active-indicator-color: var(
+    --primary-resting
+  );
+  --mat-form-field-filled-hover-label-text-color: var(--text);
+  --mat-form-field-filled-input-text-color: var(--text);
+  --mat-form-field-filled-label-text-color: hsla(
+    from var(--text) h s l / 70%
+  );
+  --mat-form-field-filled-with-label-container-padding-bottom: 0px;
+  --mat-form-field-state-layer-color: var(--bg-light);
+  --mat-menu-container-color: var(--bg-card);
+  --mat-menu-item-icon-color: var(--text);
+  --mat-menu-item-label-text-color: var(--text);
+  --mat-option-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);
+  --mat-select-enabled-arrow-color: var(--text);
+  --mat-select-enabled-trigger-text-color: var(--text);
+  --mat-select-panel-background-color: var(--bg-card);
+  --mat-select-placeholder-text-color: var(--text);
+  --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-hover-track-color: var(
+    --primary-selected-hover
+  );
+  --mat-slide-toggle-selected-track-color: var(--primary-selected-hover);
+  --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);
+  --mat-tab-inactive-label-text-color: var(--text-disabled);
+  --mat-theme-surface: var(--primary-resting);
+  --mat-theme-text-primary-on-background: var(--text);
+  --mat-theme-text-primary-on-background: var(--text);
+  --mat-theme-text-primary-on-background: var(--text);
+  background-color: var(--bg-app);
+  color: var(--text);
+  scrollbar-color: var(--primary-resting) var(--bg-card);
 }
-html body .mat-mdc-button-base.mat-unthemed {
-  --mat-button-text-label-text-color: var(--text);
-  --mat-button-outlined-label-text-color: var(--text);
-  --mat-button-outlined-disabled-label-text-color: var(--text-disabled);
+html body .mat-mdc-checkbox,
+html body .mat-mdc-checkbox.mat-primary {
+  --mat-checkbox-label-text-color: var(--text);
+  --mat-checkbox-selected-checkmark-color: var(--accent-hover-contrast);
+  --mat-checkbox-selected-hover-icon-color: var(--primary-hover);
+  --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);
 }
-html body .mat-mdc-button-base.mat-mdc-raised-button {
-  --mat-button-protected-label-text-color: var(--primary-hover-alt);
+html body .mat-mdc-select-panel {
+  padding: 0;
 }
-html body .mat-mdc-button-base.mat-mdc-outlined-button {
-  --mat-button-outlined-disabled-label-text-color: var(--text-disabled);
+html body .mat-mdc-button-base {
+  height: var(--mat-button-text-container-height);
 }
 html body .mat-mdc-button-base.mat-mdc-icon-button {
   --mat-icon-button-padding: max(
@@ -4116,104 +4189,12 @@ html body .mat-mdc-button-base.mat-mdc-icon-button .mat-mdc-button-touch-target
   height: var(--mat-icon-button-state-layer-size, 48px);
   margin: 2px;
 }
-html body .mat-button-toggle {
-  --mat-button-toggle-text-color: var(--text);
-}
-html body .mat-mdc-progress-bar {
-  --mat-progress-bar-active-indicator-color: var(--primary-highlight);
-}
-html body .mat-mdc-tab-group,
-html body .mat-mdc-tab-nav-bar {
-  --mat-tab-inactive-label-text-color: var(--text-disabled);
-  --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);
-}
-html body .mdc-menu-surface,
-html body .mat-mdc-menu-panel {
-  --mat-select-panel-background-color: var(--bg-card);
-  --mat-menu-item-label-text-color: var(--text);
-  --mat-menu-container-color: var(--bg-card);
-  --mat-menu-item-icon-color: var(--text);
-  --mat-option-label-text-color: var(--text);
-  --mat-pseudo-checkbox-full-unselected-icon-color: var(--text);
-}
-html body .mat-mdc-select-panel {
-  padding: 0;
-}
-html body .mat-mdc-dialog-surface {
-  --mat-dialog-container-color: var(--bg-card);
-  --mat-dialog-subhead-color: var(--text);
-  --mat-dialog-supporting-text-color: var(--text);
-}
-html body .mat-mdc-card {
-  --mat-card-elevated-container-color: var(--bg-card);
-  --mat-card-outlined-container-color: hsla(from var(--bg-card) h s l / 50%);
-  --mat-card-outlined-container-color: var(--bg-card);
-}
-html body .mat-mdc-form-field {
-  --mat-form-field-filled-active-indicator-color: var(--divider);
-  --mat-form-field-filled-hover-active-indicator-color: var(
-    --primary-resting
-  );
-  --mat-form-field-filled-focus-active-indicator-color: var(
-    --primary-resting
-  );
-  --mat-form-field-filled-focus-label-text-color: hsla(
-    from var(--text) h s l / 70%
-  );
-  --mat-form-field-filled-input-text-color: var(--text);
-  --mat-form-field-filled-label-text-color: hsla(
-    from var(--text) h s l / 70%
-  );
-  --mat-form-field-filled-hover-label-text-color: var(--text);
-  --mat-form-field-filled-caret-color: var(--text);
-  --mat-form-field-container-height: 36px;
-  --mat-form-field-filled-with-label-container-padding-bottom: 0px;
-}
 html body .mat-mdc-form-field .mdc-text-field {
   overflow: visible;
   padding: 0;
 }
-html body .mat-mdc-checkbox,
-html body .mat-mdc-checkbox.mat-primary {
-  --mat-theme-text-primary-on-background: var(--text);
-  --mat-checkbox-selected-checkmark-color: var(--accent-hover-contrast);
-  --mat-checkbox-unselected-icon-color: var(--text);
-  --mat-checkbox-unselected-focus-icon-color: var(--text-disabled);
-  --mat-theme-text-primary-on-background: var(--text);
-  --mat-checkbox-unselected-hover-icon-color: var(--text-disabled);
-  --mat-checkbox-selected-hover-icon-color: var(--primary-hover);
-  --mat-checkbox-label-text-color: var(--text);
-}
-html body .mat-mdc-radio-button {
-  --mat-radio-selected-icon-color: var(--primary-resting);
-}
-html body .mat-mdc-select {
-  --mat-select-enabled-trigger-text-color: var(--text);
-  --mat-select-enabled-arrow-color: var(--text);
-}
-html body .mdc-switch {
-  --mat-theme-text-primary-on-background: var(--text);
-  --mat-slide-toggle-handle-surface-color: var(--primary-resting);
-  --mat-slide-toggle-selected-track-color: var(--primary-selected-hover);
-  --mat-slide-toggle-selected-hover-track-color: var(--primary-selected-hover);
-  --mat-slide-toggle-selected-focus-track-color: var(--primary-selected-focus);
-}
-html body .mat-mdc-slide-toggle {
-  --mat-slide-toggle-label-text-color: var(--text);
-}
-html body .mat-calendar {
-  --mat-datepicker-calendar-body-label-text-color: var(--text);
-  --mat-datepicker-calendar-date-text-color: hsla(
-    from var(--text) h s l / 80%
-  );
-  --mat-datepicker-calendar-date-selected-state-text-color: var(
-    --accent-hover-contrast
-  );
-  --mat-datepicker-calendar-date-selected-state-background-color: var(
-    --primary-resting
-  );
+html body .mat-mdc-form-field label:has(> mat-label:empty) > .mat-mdc-form-field-required-marker {
+  display: none;
 }
 
 .ngx-datatable .mat-mdc-checkbox .mdc-checkbox {

package/package.json

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

package/style/datatable/ngx-datatable.scss

@@ -15,6 +15,9 @@
       -moz-user-select: none; /* Firefox */
       -ms-user-select: none; /* IE10+/Edge */
       user-select: none; /* Standard */
+      &:has(.mat-mdc-checkbox) {
+        padding: 4px 8px 0 8px;
+      }
 
       .datatable-header-cell-wrapper {
         position: relative;
@@ -41,10 +44,6 @@
           border-right: none;
         }
       }
-      .mat-mdc-checkbox {
-        --mat-checkbox-state-layer-size: 18px;
-        margin-left: 11px;
-      }
     }
 
     .resize-handle {
@@ -63,7 +62,9 @@
         padding: 8px;
         vertical-align: top;
         border-top: 0;
-        transition: width 0.3s ease, box-shadow 250ms linear;
+        transition:
+          width 0.3s ease,
+          box-shadow 250ms linear;
         &:has(.mat-mdc-form-field),
         &:has(.mat-mdc-checkbox) {
           padding: 0;

package/style/theme/_input-overrides.scss

@@ -12,8 +12,6 @@
 
   .sto-form__field,
   .sto-form__field.mat-mdc-form-field {
-    --mat-form-field-filled-container-color: #{$form-field-bg};
-    --mat-form-field-state-layer-color: #{$form-field-bg};
     .mat-mdc-form-field-flex {
       // background-color: $form-field-bg;