@softheon/armature 19.14.1 → 19.16.0

package/README.md

@@ -302,30 +302,28 @@ Its recommended to set the theme in an app initializer, though it can be done fr
         "sevenHundred": "#261E6F",
         "eightHundred": "#1F1865",
         "nineHundred": "#130F52",
-        "a100": "#908AFF",
-        "a200": "#5F57FF",
-        "a300": "#5F57FF",
-        "a400": "#5F57FF",
-        "a500": "#2F24FF",
-        "a700": "#160AFF"
+        "a50": "rgba(50, 40, 130, 0.04)",
+        "a100": "rgba(50, 40, 130, 0.08)",
+        "a200": "rgba(50, 40, 130, 0.16)",
+        "a300": "rgba(50, 40, 130, 0.24)",
+        "a400": "rgba(50, 40, 130, 0.32)",
+        "a500": "rgba(50, 40, 130, 0.40)",
+        "a600": "rgba(50, 40, 130, 0.48)",
+        "a700": "rgba(50, 40, 130, 0.56)",
+        "a800": "rgba(50, 40, 130, 0.64)",
+        "a900": "rgba(50, 40, 130, 0.72)"
     },
     "primaryContrast": {
-        "fifty": "#000000",
-        "oneHundred": "#000000",
-        "twoHundred": "#000000",
-        "threeHundred": "#000000",
+        "fifty": "rgba(0, 0, 0, 0.87)",
+        "oneHundred": "rgba(0, 0, 0, 0.87)",
+        "twoHundred": "rgba(0, 0, 0, 0.87)",
+        "threeHundred": "rgba(0, 0, 0, 0.87)",
         "fourHundred": "#ffffff",
         "fiveHundred": "#ffffff",
         "sixHundred": "#ffffff",
         "sevenHundred": "#ffffff",
         "eightHundred": "#ffffff",
-        "nineHundred": "#ffffff",
-        "a100": "#000000",
-        "a200": "#000000",
-        "a300": "#000000",
-        "a400": "#000000",
-        "a500": "#000000",
-        "a700": "#000000"
+        "nineHundred": "#ffffff"
     }
 }
  ```
@@ -346,12 +344,6 @@ export class MyClass {
 }
 ```
 
-### Colors with opacity
-
-The theme palettes all offer a rgb value through css variables, the following naming convention is used `--{{palette}}-color-{{partsNumber}}-parts-rgb`. So in order to get an opacity of .2 on the primary color, 500 parts the following css can be used
-
-`rgba(var(--primary-color-500-parts-rgb), .2)`
-
 ## Armature Navigation
 
 `<sof-ar-navigation></sof-ar-navigation>` is a mobile-responsive navigation component. It structures the application view content to the right and the navigation to the left.

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/_responsive.scss

@@ -83,3 +83,95 @@
       0px 1px 3px 0px rgba(0, 0, 0, 0.12);
   }
 }
+
+/** Spacing Utility, Mobile responsive */
+
+.sm-m-b-16 {
+  @media only screen and (max-width: vars.$mat-lt-md) {
+    margin-bottom: 16px !important;
+  }
+}
+
+.sm-m-b-24 {
+  @media only screen and (max-width: vars.$mat-lt-md) {
+    margin-bottom: 24px !important;
+  }
+}
+
+.sm-m-v-24 {
+  @media only screen and (max-width: vars.$mat-lt-md) {
+    margin-top: 24px !important;
+    margin-bottom: 24px !important;
+  }
+}
+
+.sm-m-b-32 {
+  @media only screen and (max-width: vars.$mat-lt-md) {
+    margin-bottom: 32px !important;
+  }
+}
+
+.sm-m-b-64 {
+  @media only screen and (max-width: vars.$mat-lt-md) {
+    margin-bottom: 64px !important;
+  }
+}
+
+.sm-screen-m-a-0 {
+  @media screen and (max-width: vars.$mat-lt-md) {
+    margin: 0 !important;
+  }
+}
+
+.sm-screen-m-l-0 {
+  @media screen and (max-width: vars.$mat-lt-md) {
+    margin-left: 0 !important;
+  }
+}
+
+.sm-screen-m-h-0 {
+  @media screen and (max-width: vars.$mat-lt-md) {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+}
+
+.sm-screen-p-a-0 {
+  @media screen and (max-width: vars.$mat-lt-md) {
+    padding: 0 !important;
+  }
+}
+
+.sm-screen-p-h-0 {
+  @media screen and (max-width: vars.$mat-lt-md) {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}
+
+.md-screen-p-a-0 {
+  @media screen and (max-width: vars.$mat-lt-lg) {
+    padding: 0 !important;
+  }
+}
+
+.md-m-v-24 {
+  @media only screen and (max-width: vars.$mat-lt-lg) {
+    margin-top: 24px !important;
+    margin-bottom: 24px !important;
+  }
+}
+
+.mobile-no-h-margin {
+  @media only screen and (max-width: vars.$mat-lt-sm) {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+}
+
+.mobile-no-h-padding {
+  @media only screen and (max-width: vars.$mat-lt-sm) {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}