@softheon/armature 19.13.0 → 19.15.0

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

@@ -1,5 +1,5 @@
 import { ElementRef, EventEmitter, OnChanges, OnInit, QueryList, SimpleChanges, WritableSignal } from '@angular/core';
-import { ApplyColumnStateParams, ColDef, FilterModel, GridReadyEvent, HeaderPosition, NavigateToNextHeaderParams, PaginationChangedEvent, TabToNextHeaderParams } from "ag-grid-community";
+import { ApplyColumnStateParams, ColDef, FilterModel, GridReadyEvent, HeaderPosition, NavigateToNextHeaderParams, PaginationChangedEvent, SortChangedEvent, TabToNextHeaderParams } from "ag-grid-community";
 import { MatSelect } from '@angular/material/select';
 import * as i0 from "@angular/core";
 /** The Softheon Armature Table component */
@@ -100,6 +100,10 @@ export declare class SofTableComponent implements OnInit, OnChanges {
     private document;
     /** The id of the filter fieldset */
     filterFieldSetId: string;
+    /** The header cells sort icons */
+    headerSortIcons: {
+        [key: string]: string;
+    };
     /** On component init */
     ngOnInit(): void;
     /**
@@ -120,6 +124,11 @@ export declare class SofTableComponent implements OnInit, OnChanges {
     onFirstDataRendered(): void;
     /** Resize grid from size mode */
     private resizeGrid;
+    /**
+     * Refresh the cells if sorted to apply styling
+     * @note styling is applied with `this.defaultColDef.cellClassRules`, refreshing cells required to take effect.
+    */
+    onSortChanged(params: SortChangedEvent): void;
     /**
      * On page selection change
      * @param value The selected page number

package/assets/styles/_typography.scss

@@ -42,7 +42,6 @@
 /* 
   Text Body/Emphasis
 */
-[body1], [body2], [body3],
 .body1, .body2, .body3 {
   font-family: var(--sftn-font-family-body, sans-serif); // Consumer = 'Poppins'
   font-style: normal;
@@ -52,19 +51,16 @@
 }
 
 /* Body/Emphasis 1 */
-[body1],
 .body1 {
   font-size: var(--sftn-base-font-size-body-1); // Consumer = 16px
 }
 
-[body2],
 /* Body/Emphasis 2 */
 .body2 {
   font-size: var(--sftn-base-font-size-body-2); // Consumer = 14px
 }
 
 /* Body/Emphasis 3 */
-[body3],
 .body3 {
   font-size: 12px;
 }
@@ -73,7 +69,6 @@
   Text Body/Emphasis for mat-form-field's
 */
 mat-form-field {
-  &[body1], &[body2], &[body3],
   &.body1, &.body2, &.body3 {
     font-family: var(--sftn-font-family-body, sans-serif) !important; // Consumer = 'Poppins'
     font-style: normal !important;
@@ -83,19 +78,16 @@ mat-form-field {
   }
 
   /* Body/Emphasis 1 */
-  &[body1],
   &.body1 {
     font-size: var(--sftn-base-font-size-body-1) !important; // Consumer = 16px
   }
 
   /* Body/Emphasis 2 */
-  &[body2],
   &.body2 {
     font-size: var(--sftn-base-font-size-body-2) !important; // Consumer = 14px
   }
 
   /* Body/Emphasis 3 */
-  &[body3],
   &.body3 {
     font-size: 12px !important;
   }
@@ -103,17 +95,14 @@ mat-form-field {
 
 /* Font Weight's */
 
-[fw-400],
 .fw-400 {
   font-weight: 400 !important;
 }
 
-[fw-500],
 .fw-500 {
   font-weight: 500 !important;
 }
 
-[fw-600],
 .fw-600 {
   font-weight: 600 !important;
 }
@@ -140,41 +129,38 @@ mat-form-field {
   color: vars.$text-inverse;
 }
 
-[color-primary],
 .color-primary {
   color: map.get(theme.$arm-primary, 500);
 }
 
-[color-accent],
 .color-accent {
   color: map.get(theme.$arm-accent, 500);
 }
 
-[color-warn],
 .color-warn {
   color: map.get(theme.$arm-warn, 500);
 }
 
-[color-info],
 .color-info {
   color: map.get(theme.$arm-info, 500);
 }
 
-[color-success],
 .color-success {
   color: map.get(theme.$arm-success, 500);
 }
 
-[color-error],
 .color-error {
   color: map.get(theme.$arm-error, 500);
 }
 
-[color-neutral],
 .color-neutral {
   color: map.get(theme.$arm-neutral, 500);
 }
 
+.color-help {
+  color: map.get(theme.$arm-help, 500);
+}
+
 /* Text Alignment's */
 
 [text-left],
@@ -187,6 +173,11 @@ mat-form-field {
   text-align: center !important;
 }
 
+[text-right],
+.text-right {
+  text-align: right !important;
+}
+
 /* Text Overflow Ellipsis ... */
 
 [text-overflow-ellipsis],

package/assets/styles/_variables.scss

@@ -10,12 +10,6 @@ $screen-lg-end: 1919px;
 $screen-xl-start: 1920px;
 $screen-xl-end: 5000px;
 
-$mat-lt-sm: 599px;
-$mat-lt-md: 959px;
-$mat-lt-lg: 1279px;
-$mat-gt-sm: 960px;
-$mat-gt-md: 1280px;
-
 // text emphasis (per design)
 $text-high-emphasis: rgba(0, 0, 0, 0.87);
 $text-medium-emphasis: rgba(0, 0, 0, 0.6);
@@ -32,6 +26,7 @@ $surface-color-inverse-light: #333333;
 $surface-color-inverse-level-one-light: #424242;
 $surface-color-inverse-level-two-light: #515151;
 
+// UI Shell component size 
 $sof-nav-panel-width: 328px;
 $sof-header-height: 56px;
 
@@ -48,3 +43,11 @@ $sof-header-height: 56px;
 */
 $mat-sidenav-transition-duration: 400ms;
 $mat-sidenav-transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+
+
+// @deprecated
+$mat-lt-sm: 599px;
+$mat-lt-md: 959px;
+$mat-lt-lg: 1279px;
+$mat-gt-sm: 960px;
+$mat-gt-md: 1280px;