@softheon/armature 19.0.3 → 19.1.1

package/ag-grid-components/src/sof-table/sof-table.component.d.ts

@@ -1,5 +1,5 @@
 import { ElementRef, EventEmitter, OnChanges, OnInit, SimpleChanges, WritableSignal } from '@angular/core';
-import { ApplyColumnStateParams, ColDef, GridReadyEvent, PaginationChangedEvent } from "ag-grid-community";
+import { ApplyColumnStateParams, ColDef, FilterModel, GridReadyEvent, PaginationChangedEvent } from "ag-grid-community";
 import * as i0 from "@angular/core";
 /** The Softheon Armature Table component */
 export declare class SofTableComponent implements OnInit, OnChanges {
@@ -8,7 +8,7 @@ export declare class SofTableComponent implements OnInit, OnChanges {
     /** Column Definitions: Defines & controls grid columns. */
     colDefs: Array<ColDef>;
     /** Size modes for table */
-    private sizeMode;
+    sizeMode: 'Compact' | 'Roomy' | 'Default';
     /** Pages sizes */
     paginationPageSizeSelector: Array<number>;
     /** Enable search */
@@ -35,9 +35,9 @@ export declare class SofTableComponent implements OnInit, OnChanges {
     */
     tableName: string;
     /** Users saved column options state */
-    private savedColumnState;
+    savedColumnState: ApplyColumnStateParams;
     /** Initial filter model */
-    private initialFilterModel;
+    initialFilterModel: FilterModel;
     /** Output updated column options event to save to user or browser storage */
     updatedColumnState: EventEmitter<ApplyColumnStateParams>;
     /** Output filtered/sorted row data and table headers, all values returned will be formatted & translated */

package/assets/styles/_typography.scss

@@ -112,6 +112,10 @@ fieldset {
   letter-spacing: 0.25px !important;
 }
 
+.fw-400 {
+  font-weight: 400 !important;
+}
+
 .fw-500 {
   font-weight: 500 !important;
 }

package/assets/styles/_utility.scss

@@ -831,3 +831,7 @@ body.inheritCursors * {
 .relative {
   position: relative;
 }
+
+.display-none {
+  display: none !important;
+}

package/assets/styles/_variables.scss

@@ -18,10 +18,9 @@ $mat-gt-md: 1280px;
 
 // text emphasis (per design)
 $text-high-emphasis: rgba(0, 0, 0, 0.87);
-$text-medium-high-emphasis: rgba(0, 0, 0, 0.8); //#333333
 $text-medium-emphasis: rgba(0, 0, 0, 0.6);
 $text-low-emphasis: rgba(0, 0, 0, 0.38);
-$text-inverse: #ffffff;
+$text-inverse: #FFFFFF;
 
 // surface color (per design, light theme)
 $surface-color-default-light: #FFFFFF;

package/assets/styles/material-override/_button-toggle-group.scss

@@ -62,7 +62,7 @@ mat-button-toggle-group {
           .mat-button-toggle-label-content {
             text-transform: capitalize !important;
             font-family: var(--sftn-font-family, sans-serif) !important;
-            font-weight: 600 !important;
+            font-weight: 500 !important;
             font-size: 16px !important;
             line-height: 24px !important;
             color: vars.$text-high-emphasis !important;

package/assets/styles/material-override/_button.scss

@@ -67,47 +67,37 @@
   &[emphasis="solid"] {
     &[theme="primary"] {
       background: map.get(theme.$arm-primary, 500) !important;
-      background-color: map.get(theme.$arm-primary, 500) !important;
       color: map.get(theme.$arm-primary, contrast, 500) !important;
       &:hover {
         background: map.get(theme.$arm-primary, 700) !important;
-        background-color: map.get(theme.$arm-primary, 700) !important;
       }
       &:active {
         background: map.get(theme.$arm-primary, 800) !important;
-        background-color: map.get(theme.$arm-primary, 800) !important;
       }
     }
     &[theme="neutral"] {
       background: map.get(theme.$arm-neutral, 500) !important;
-      background-color: map.get(theme.$arm-neutral, 500) !important;
       color: map.get(theme.$arm-neutral, contrast, 500) !important;
       &:hover {
         background: map.get(theme.$arm-neutral, 700) !important;
-        background-color: map.get(theme.$arm-neutral, 700) !important;
       }
       &:active {
         background: map.get(theme.$arm-neutral, 800) !important;
-        background-color: map.get(theme.$arm-neutral, 800) !important;
       }
     }
     &[theme="destroy"] {
       background: map.get(theme.$arm-error, 500) !important;
-      background-color: map.get(theme.$arm-error, 500) !important;
       color: map.get(theme.$arm-error, contrast, 500) !important;
       &:hover {
         background: map.get(theme.$arm-error, 700) !important;
-        background-color: map.get(theme.$arm-error, 700) !important;
       }
       &:active {
         background: map.get(theme.$arm-error, 800) !important;
-        background-color: map.get(theme.$arm-error, 800) !important;
       }
     }
     &[theme="primary"], &[theme="neutral"], &[theme="destroy"] {
       &:disabled {
         background: map.get(theme.$arm-neutral, A50) !important;
-        background-color: map.get(theme.$arm-neutral, A50) !important;
         color: vars.$text-low-emphasis !important;
       }
     }
@@ -116,18 +106,12 @@
   &[emphasis="secondary"] {
     &[theme="primary"], &[theme="neutral"], &[theme="destroy"] {
       background: vars.$surface-color-level-one-light !important;
-      background-color: vars.$surface-color-level-one-light !important;
       &:hover {
         background: linear-gradient(
           0deg, 
           map.get(theme.$arm-neutral, A100) 0%, 
           map.get(theme.$arm-neutral, A100) 100%
         ), vars.$surface-color-level-one-light !important;
-        background-color: linear-gradient(
-          0deg, 
-          map.get(theme.$arm-neutral, A100) 0%, 
-          map.get(theme.$arm-neutral, A100) 100%
-        ), vars.$surface-color-level-one-light !important;
       }
       &:active {
         background: linear-gradient(
@@ -135,15 +119,9 @@
           map.get(theme.$arm-neutral, A200) 0%, 
           map.get(theme.$arm-neutral, A200) 100%
         ), vars.$surface-color-level-one-light !important;
-        background-color: linear-gradient(
-          0deg, 
-          map.get(theme.$arm-neutral, A200) 0%, 
-          map.get(theme.$arm-neutral, A200) 100%
-        ), vars.$surface-color-level-one-light !important;
       }
       &:disabled {
         background: map.get(theme.$arm-neutral, A50) !important;
-        background-color: map.get(theme.$arm-neutral, A50) !important;
         color: vars.$text-low-emphasis !important;
       }
     }
@@ -161,39 +139,32 @@
   &[emphasis="floating"], &[emphasis="contained"] {
     &[theme="primary"], &[theme="neutral"], &[theme="destroy"] {
       background: transparent !important;
-      background-color: transparent !important;
     }
     &[theme="primary"] {
       color: map.get(theme.$arm-primary, 500) !important;
       &:hover {
         background: map.get(theme.$arm-primary, A100) !important;
-        background-color: map.get(theme.$arm-primary, A100) !important;
       }
       &:active {
         background: map.get(theme.$arm-primary, A200) !important;
-        background-color: map.get(theme.$arm-primary, A200) !important;
       }
     }
     &[theme="neutral"] {
       color: vars.$text-high-emphasis !important;
       &:hover {
         background: map.get(theme.$arm-neutral, A100) !important;
-        background-color: map.get(theme.$arm-neutral, A100) !important;
       }
       &:active {
         background: map.get(theme.$arm-neutral, A200) !important;
-        background-color: map.get(theme.$arm-neutral, A200) !important;
       }
     }
     &[theme="destroy"] {
       color: map.get(theme.$arm-error, 500) !important;
       &:hover {
         background: map.get(theme.$arm-error, A100) !important;
-        background-color: map.get(theme.$arm-error, A100) !important;
       }
       &:active {
         background: map.get(theme.$arm-error, A200) !important;
-        background-color: map.get(theme.$arm-error, A200) !important;
       }
     }
     &[theme="primary"], &[theme="neutral"], &[theme="destroy"] {
@@ -251,5 +222,4 @@
 // Mat Notification badge
 button .mat-badge-content {
   background: vars.$surface-color-inverse-light !important;
-  background-color: vars.$surface-color-inverse-light !important;
 }

package/assets/styles/material-override/_expansion-panel.scss

@@ -107,7 +107,7 @@
 
       .mat-expansion-panel-header-title {
         font-size: 16px !important;
-        font-weight: 600 !important;
+        font-weight: 500 !important;
         line-height: normal !important;
         font-family: "Poppins", sans-serif !important;
         color: vars.$text-high-emphasis !important;

package/assets/styles/material-override/_menu.scss

@@ -6,6 +6,7 @@
   background-color: vars.$surface-color-level-one-light !important;
   box-shadow: 0px 4px 8px 0px map.get(theme.$arm-neutral, A300) !important;
   border-radius: 8px !important;
+  max-width: unset !important;
 }
 
 ::ng-deep .mat-mdc-menu-ripple {
@@ -19,7 +20,13 @@
   display: flex !important;
   align-items: center !important;
   letter-spacing: 0px !important;
+  white-space: nowrap !important;
+
   i {
     margin-right: 8px !important;
   }
 }
+
+::ng-deep .mat-mdc-menu-content {
+  white-space: nowrap !important;
+} 

package/assets/styles/material-override/_slider.scss

@@ -3,7 +3,7 @@
 @use "../variables" as vars;
 
 mat-slider.sof-slider {
-  &.mat-primary {
+  &[color="primary"] {
     --mdc-slider-handle-color: #{map.get(theme.$arm-primary, 500)};
     --mdc-slider-focus-handle-color: #{map.get(theme.$arm-primary, 500)};
     --mdc-slider-hover-handle-color: #{map.get(theme.$arm-primary, 500)};
@@ -15,7 +15,7 @@ mat-slider.sof-slider {
     --mat-mdc-slider-focus-ripple-color: rgba(var(--primary-color-500-parts-rgb), 0.2);
   }
 
-  &.mat-accent {
+  &[color="accent"] {
     --mdc-slider-handle-color: #{map.get(theme.$arm-accent, 500)};
     --mdc-slider-focus-handle-color: #{map.get(theme.$arm-accent, 500)};
     --mdc-slider-hover-handle-color: #{map.get(theme.$arm-accent, 500)};
@@ -27,7 +27,7 @@ mat-slider.sof-slider {
     --mat-mdc-slider-focus-ripple-color: rgba(var(--accent-color-500-parts-rgb), 0.2);
   }
 
-  &.mat-warn {
+  &[color="warn"] {
     --mdc-slider-handle-color: #{map.get(theme.$arm-warn, 500)};
     --mdc-slider-focus-handle-color: #{map.get(theme.$arm-warn, 500)};
     --mdc-slider-hover-handle-color: #{map.get(theme.$arm-warn, 500)};
@@ -39,7 +39,7 @@ mat-slider.sof-slider {
     --mat-mdc-slider-focus-ripple-color: rgba(var(--warn-color-500-parts-rgb), 0.2);
   }
 
-  &.mat-success {
+  &[color="success"] {
     --mdc-slider-handle-color: #{map.get(theme.$arm-success, 500)};
     --mdc-slider-focus-handle-color: #{map.get(theme.$arm-success, 500)};
     --mdc-slider-hover-handle-color: #{map.get(theme.$arm-success, 500)};
@@ -51,7 +51,7 @@ mat-slider.sof-slider {
     --mat-mdc-slider-focus-ripple-color: rgba(var(--success-color-500-parts-rgb), 0.2);
   }
 
-  &.mat-info {
+  &[color="info"] {
     --mdc-slider-handle-color: #{map.get(theme.$arm-info, 500)};
     --mdc-slider-focus-handle-color: #{map.get(theme.$arm-info, 500)};
     --mdc-slider-hover-handle-color: #{map.get(theme.$arm-info, 500)};
@@ -63,7 +63,7 @@ mat-slider.sof-slider {
     --mat-mdc-slider-focus-ripple-color: rgba(var(--info-color-500-parts-rgb), 0.2);
   }
 
-  &.mat-error {
+  &[color="error"] {
     --mdc-slider-handle-color: #{map.get(theme.$arm-error, 500)};
     --mdc-slider-focus-handle-color: #{map.get(theme.$arm-error, 500)};
     --mdc-slider-hover-handle-color: #{map.get(theme.$arm-error, 500)};
@@ -75,7 +75,7 @@ mat-slider.sof-slider {
     --mat-mdc-slider-focus-ripple-color: rgba(var(--error-color-500-parts-rgb), 0.2);
   }
 
-  &.mat-neutral {
+  &[color="neutral"] {
     --mdc-slider-handle-color: #{map.get(theme.$arm-neutral, 500)};
     --mdc-slider-focus-handle-color: #{map.get(theme.$arm-neutral, 500)};
     --mdc-slider-hover-handle-color: #{map.get(theme.$arm-neutral, 500)};