@softheon/armature 17.15.6 → 17.15.8

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

@@ -27,7 +27,10 @@ export declare class SofTableComponent implements OnInit, OnChanges {
      * @see The Demo site is saving to local storage.
     */
     showSaveColumnOptionsText: boolean;
-    /** Name/label of the table */
+    /**
+     * Name/label of the table
+     * @note should be a translation key
+    */
     tableName: string;
     /** Users saved column options state */
     private savedColumnState;
@@ -35,10 +38,10 @@ export declare class SofTableComponent implements OnInit, OnChanges {
     updatedColumnState: EventEmitter<ApplyColumnStateParams>;
     /** the search input */
     gridSearchTextInput: ElementRef<HTMLInputElement>;
+    /** The hidden element that announces when the table content changes from filter */
+    ariaResultsCount: ElementRef<HTMLElement>;
     /** Column names that should be filterable */
     colFilters: Array<SofTableFilter>;
-    /** Show filter */
-    showFilter: boolean;
     /** Row Height for table */
     rowHeight: number;
     /** Current Page Index */
@@ -51,7 +54,11 @@ export declare class SofTableComponent implements OnInit, OnChanges {
     paginationPageSize: number;
     /** Tool tip show delay */
     tooltipShowDelay: number;
-    /** Default Column Definition */
+    /**
+     * Default Column Definition
+     * @note (suppressKeyboardEvent) Table cells can be navigated with the arrow keys,
+     * if the cell contains a button you can Tab into the button, enter | space to interact.
+    */
     defaultColDef: ColDef;
     /** Length of data */
     totalLength: number;
@@ -67,6 +74,8 @@ export declare class SofTableComponent implements OnInit, OnChanges {
     filterSelections: Array<Array<string>>;
     /** mat-dialog */
     private dialog;
+    /** Translation service */
+    private translateService;
     /** On component init */
     ngOnInit(): void;
     /**
@@ -101,7 +110,10 @@ export declare class SofTableComponent implements OnInit, OnChanges {
      * @param event The pagination event
      */
     changePageSize(event: PaginationChangedEvent): void;
-    /** Called when the grid filter is changed */
+    /**
+     * Called when the grid filter is changed
+     * @todo update the filter dropdown options based on the filtered data set, instead of the complete data set.
+     */
     onFilterChanged(): void;
     /** Generated text for showing pages in format: 1-11 of 11 */
     private handlePageChangeText;

package/assets/styles/sof-styles.scss

@@ -1692,127 +1692,155 @@ button.soft-button-icon-v2{
   color: rgba(0, 0, 0, 0.87) !important;
   font-family: Poppins  !important;
 }
-button.button-icon-utility{
+
+button.button-icon-utility {
   display: flex !important;
-  padding: 0px!important;
-  border-radius: 4px !important;
-  height: 24px !important;
   justify-content: center !important;
   align-items: center !important;
   gap: 8px !important;
+  padding: 0px!important;
+  border-radius: 4px !important;
+  height: 24px !important;
   width: 24px !important; 
-  &.mat-mdc-unelevated-button span.mdc-button__label.mdc-button__label{
+
+  &.mat-mdc-unelevated-button span.mdc-button__label.mdc-button__label {
     display: flex;
     align-items: center;
     font-size: 20px;
-    
   }
-  &.mdc-button{
+
+  &.mdc-button {
     min-width: 24px;
   }
   
   &.full-width {
     width: 100% !important; // Use this is button width will take size of flex percentage
   }
-  &:enabled{
-    &.mat-primary{
+
+  &:enabled {
+    &:focus {
+      outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
+      outline-offset: 2px !important;
+    }
+
+    &.mat-primary {
       background: mat.get-color-from-palette($arm-primary, 500);
       color: map-get($arm-error, contrast, 900);
       border-radius: 4px solid !important;
+
       &:hover {
-        background-color:  mat.get-color-from-palette($arm-primary, 700) !important;
+        background-color: mat.get-color-from-palette($arm-primary, 700) !important;
         color: map-get($arm-error, contrast, 700);
       }
+
       &:focus {
-        background-color:  mat.get-color-from-palette($arm-primary, 700) !important;
-        outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
-        outline-offset: 2px !important;
+        background-color: mat.get-color-from-palette($arm-primary, 700) !important;
       }
     }
-    &.mat-secondary{
+
+    &.mat-secondary {
       background-color: #FAFAFA !important;
-      color: #146EF6  !important;
-     &:hover{
-      background-color: #F5F5F5 !important;
-      color:  #146EF6  !important;
-     }
+      color: #146EF6 !important;
+
+      &:hover{
+        background-color: #F5F5F5 !important;
+        color: #146EF6 !important;
+      }
+
       &:focus{
         background-color: #E9E9E9 !important;
       }
     }
-    &.mat-tertiary{
-      color:  #146EF6 !important;
-      background: transparent !important;  
+
+    &.mat-tertiary {
+      color: #146EF6 !important;
+      background: transparent !important;
+
       &:focus{
         background-color: rgba(20, 110, 246, 0.08) !important;
       }
+
       &:hover{
         background-color: rgba(20, 110, 246, 0.04) !important;
       }
     }
-    &.mat-contained{
+
+    &.mat-contained {
       color: #146EF6 !important;
       background: none !important; 
       border: 2px solid #146EF6 !important; 
-      &:focus{
+
+      &:focus {
         border:  3px solid mat.get-color-from-palette($arm-primary, 700) !important;
         color: map-get($arm-error, contrast, 700);
         background-color: rgba(20, 110, 246, 0.08) !important;
       }
-      &:hover{
+
+      &:hover {
         background-color:rgba(20, 110, 246, 0.04)!important;
       }
     }
-    &.mat-contained-error{
+
+    &.mat-contained-error {
       color:rgba(215, 36, 26, 1) !important;
       background: none !important; 
       border: 2px solid rgba(215, 36, 26, 1) !important; 
-        &:focus{
-          border:  3px solid mat.get-color-from-palette($arm-error, 700) !important;
-          color: map-get($arm-error, contrast, 700);
-          background-color:rgba(215, 36, 26, 0.08) !important;
-        }
-        &:hover{
-          background-color: rgba(215, 36, 26, 0.04) !important;
-        }
-      
+
+      &:focus{
+        border:  3px solid mat.get-color-from-palette($arm-error, 700) !important;
+        color: map-get($arm-error, contrast, 700);
+        background-color:rgba(215, 36, 26, 0.08) !important;
+      }
+
+      &:hover{
+        background-color: rgba(215, 36, 26, 0.04) !important;
+      }
     }
-    &.mat-error-primary{
+
+    &.mat-error-primary {
       background: rgba(215, 36, 26, 1) !important;
       color: map-get($arm-error, contrast, 900);
+
       &:hover {
         background-color: mat.get-color-from-palette($arm-error, 700);
         color: map-get($arm-error, contrast, 700);
       }
+
       &:focus {
         background-color: rgba(199, 22, 15, 1) !important;
       }
     }
-    &.mat-error-secondary{
+
+    &.mat-error-secondary {
       background-color: #FAFAFA !important;
       color: rgba(215, 36, 26, 1) !important;
+
       &:hover {
         background-color: rgba(245, 245, 245, 1) !important;
         color: map-get($arm-error, contrast, 700);
       }
+
       &:focus {
         background-color:rgba(233, 233, 233, 1) !important;
       }
     }
-    &.mat-error-tertiary{
+
+    &.mat-error-tertiary {
       background: transparent !important;
       color: rgba(215, 36, 26, 1) !important;
+
       &:hover {
         background-color: rgba(215, 36, 26, 0.04) !important;
         color: map-get($arm-error, contrast, 700);
       }
+
       &:focus {
         background-color: rgba(215, 36, 26, 0.08) !important;
       }
     }
+  }
 
-   }
-   &:disabled {
+  &:disabled {
     &.mat-primary{
       background-color: #FAFAFA !important;
     }
@@ -1827,7 +1855,7 @@ button.button-icon-utility{
     &.mat-contained-error{
       background-color: transparent  !important;
       border: 3px solid rgba(0, 0, 0, 0.38) !important;
-      color:rgba(0, 0, 0, 0.38) !important ;
+      color:rgba(0, 0, 0, 0.38) !important;
     }
     &.mat-tertiary{
       background-color: transparent !important;
@@ -1845,10 +1873,10 @@ button.button-icon-utility{
     }
     &.mat-error-secondary{
       background: rgba(250, 250, 250, 1) !important;
-     
     }
   }
 }
+
 mat-card {
   &.mat-mdc-card.item-list {
     box-shadow: 0px 1px 7px rgb(166 159 159 / 25%) !important;
@@ -1858,6 +1886,7 @@ mat-card {
     padding: 0px !important;
   }
 }
+
 .mat-mdc-dialog-title {
   font-family: Merriweather, serif !important;
   font-style: normal !important;