@softheon/armature 17.15.7 → 17.15.9

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

@@ -1491,6 +1491,7 @@ button.mat-mdc-button
 .mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before{
   background: none !important;
 }
+
 button.sof-button-v2{
   
   display: flex;
@@ -1506,6 +1507,14 @@ button.sof-button-v2{
   line-height: normal !important;
   letter-spacing: 0px !important;
   text-transform: capitalize  !important;
+  
+  &.fixed-width {
+    width: 200px !important;  // Use this is to match specific sizing
+  }
+
+  &.full-width {
+     width: 100% !important; // Use this is button width will take size of flex percentage
+  }
 
   &.mat-mdc-unelevated-button span.mdc-button__label.mdc-button__label{
     display: flex;
@@ -1515,87 +1524,85 @@ button.sof-button-v2{
       font-size: 20px;
     }
   }
-&.mat-mdc-unelevated-button span.mdc-button__label{
-  display: flex;
-  align-items: center;
-  justify-content: center !important;
-  width: 100% !important;
-  i{
-    margin-right: 8px !important;
-  }
-}
-&.full-width {
-   width: 100% !important; // Use this is button width will take size of flex percentage
-}
-&:enabled{
-  &.mat-primary{
-    background: mat.get-color-from-palette($arm-primary, 500);
-    color: map-get($arm-primary, contrast, 900);
-    &:hover{
-      background-color: var(--primary-color-500-parts);
+  &.mat-mdc-unelevated-button span.mdc-button__label{
+    display: flex;
+    align-items: center;
+    justify-content: center !important;
+    width: 100% !important;
+    i{
+      margin-right: 8px !important;
     }
-    &:focus{
-      outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
-      outline-offset: 2px !important;
-    } 
   }
-  &.mat-secondary{
-    background: #FAFAFA !important;
-    color: var(--primary-color-contrast-50-parts);
-    &:hover{
-      background-color: #FAFAFA !important;
+  &:enabled{
+    &.mat-primary{
+      background: mat.get-color-from-palette($arm-primary, 500);
+      color: map-get($arm-primary, contrast, 900);
+      &:hover{
+        background-color: var(--primary-color-500-parts);
+      }
+      &:focus{
+        outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
+        outline-offset: 2px !important;
+      } 
     }
-    &:focus{
-      outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
-      outline-offset: 2px !important;
+    &.mat-secondary{
+      background: #FAFAFA !important;
+      color: var(--primary-color-contrast-50-parts);
+      &:hover{
+        background-color: #FAFAFA !important;
+      }
+      &:focus{
+        outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
+        outline-offset: 2px !important;
+      }
+    }
+    &.mat-tertiary{
+      color: var(--primary-color-contrast-50-parts);
+      background: none !important;    
+      &:hover{
+        background-color: transparent !important;
+      }
+      &:focus{
+        outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
+        outline-offset: 2px !important;
+      } 
+    }
+    &.mat-error{
+      background: mat.get-color-from-palette($arm-error, 900);
+      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 {
+        outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
+        outline-offset: 2px !important;
+      }
     }
   }
-  &.mat-tertiary{
-    color: var(--primary-color-contrast-50-parts);
-    background: none !important;    
+  &:disabled {
+    background:#fafafa!important;
+    color:rgba(0, 0, 0, 0.6) !important;
+    opacity: 1 !important;
     &:hover{
-      background-color: transparent !important;
+      background-color: mat.get-color-from-palette($arm-primary, 500);
     }
     &:focus{
       outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
       outline-offset: 2px !important;
     } 
   }
-  &.mat-error{
-    background: mat.get-color-from-palette($arm-error, 900);
-    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 {
-      outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
-      outline-offset: 2px !important;
-    }
+  &.no-hover-effect.mat-button.mat-primary .mat-button-focus-overlay ,
+  .no-hover-effect.mat-button.mat-secondary .mat-button-focus-overlay,
+  .no-hover-effect.mat-button.mat-tertiary .mat-button-focus-overlay,
+  .no-hover-effect.mat-button.mat-error .mat-button-focus-overlay,
+  .no-hover-effect.mat-button.mat-accent .mat-button-focus-overlay,
+  .no-hover-effect.mat-button.mat-warn .mat-button-focus-overlay
+  {
+    background-color: transparent;
   }
- }
-&:disabled {
-  background:#fafafa!important;
-  color:rgba(0, 0, 0, 0.6) !important;
-  opacity: 1 !important;
-  &:hover{
-    background-color: mat.get-color-from-palette($arm-primary, 500);
-  }
-  &:focus{
-    outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
-    outline-offset: 2px !important;
-  } 
-}
-&.no-hover-effect.mat-button.mat-primary .mat-button-focus-overlay ,
-.no-hover-effect.mat-button.mat-secondary .mat-button-focus-overlay,
-.no-hover-effect.mat-button.mat-tertiary .mat-button-focus-overlay,
-.no-hover-effect.mat-button.mat-error .mat-button-focus-overlay,
-.no-hover-effect.mat-button.mat-accent .mat-button-focus-overlay,
-.no-hover-effect.mat-button.mat-warn .mat-button-focus-overlay
-{
-  background-color: transparent;
-}
 }
+
 button.soft-button-icon-v2{
   display: flex !important;
   padding: 8px!important;
@@ -1692,127 +1699,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 +1862,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 +1880,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 +1893,7 @@ mat-card {
     padding: 0px !important;
   }
 }
+
 .mat-mdc-dialog-title {
   font-family: Merriweather, serif !important;
   font-style: normal !important;