@softheon/armature 10.33.2 → 10.34.2

package/README.md

@@ -1,7 +1,7 @@
-This document is also available on [Softheon Wiki](https://wiki.softheon.com/Wiki/article/3861)
-
 # Getting started
 
+This document is also available on [Softheon Wiki](https://wiki.softheon.com/Wiki/article/3861)
+
 ## Step 1 - Create an empty project with the correct dependencies
 
 To create a project targeting angular 10, in the directory you wish to create your project in, run `npm i @angular/cli@10`, once the command completes, run `ng new your-project-name`. This will create an angular project with the latest stable version of angular 10
@@ -31,7 +31,7 @@ After these have been installed, run the following to install armature `npm i @s
 
 Include the `HttpClientModule` in the imports of your `app.module.ts`.
 
-## Step 2 - Armature Set Up
+## Step 2 -Armature Set Up
 
 ### 2.1 Configurations
 
@@ -265,6 +265,7 @@ If you wish to provide additional header content, the following ng-content selec
     </ng-container>
 </sof-ar-app-template>
 ```
+
 ### Banner service
 
 If you want notification banner you may want to use to banner service and use show message method on specific action that you want.
@@ -273,7 +274,11 @@ If you want notification banner you may want to use to banner service and use sh
 this.bannerService.showMessage('Example-Banner-Message');
 ```
 
-# Theme Module
+## Step 3 - Shared Component & Styling
+
+Check out the [Armature Documentation]() site for more information on how to use our shared components & styling.
+
+## Theme Module
 
 In order to use the theme module, in your app.module, add the `ThemeModule` to the imports.
 
@@ -399,17 +404,17 @@ export class MyClass {
 }
 ```
 
-## Colors with opacity
+### 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
+## 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.
 
-## Navigation Setup Overview
+### Navigation Setup Overview
 
 1. npm install
 2. Import the armature Module into your app.module.ts 'imports'.
@@ -450,7 +455,7 @@ The theme palettes all offer a rgb value through css variables, the following na
 6. Configure the CSS customizations in your styles.css for the menu button on mobile
 7. Note helper class, `'visible-mobile'` which will hide html on desktop by applying `display: none;`.
 
-## Navigation Module Setup
+### Navigation Module Setup
 
 Module.ts:
 
@@ -470,13 +475,13 @@ import { ArmatureModule } from '@softheon/armature';
 
 ```
 
-## Navigation Typescript Configurations
+### Navigation Typescript Configurations
 
 Import the necessary models from the npm package and configure the navigation component inputs in your Angular typescript component. We recommend you do this `ngOnInit()`.
 
 There will be 3 inputs to configure the navigation. Configure the Armature Component Navigation Data `[navigationData]`, its settings `[settings]`, and its color theme `[themeSettings]`.
 
-### NavigationData
+#### NavigationData
 
 > **TIP:** The navigation data text supports both ngx-translate keys and string literals.
 
@@ -493,7 +498,7 @@ The navigation data consists of an array of `NavNode`s:
    2. `route` - the sub-node route
    3. `stepContent` (optional) - only used in stepper mode, provide information about the current step
 
-### Settings
+#### Settings
 
 The `[settings]` required input receives a `NavigationSettings` object in order to configure your navigation.
 
@@ -522,7 +527,7 @@ The `[settings]` required input receives a `NavigationSettings` object in order
 23. `toggleProgressNavChildIndex` the custom child node index to be set when menu style is toggled to progress navigation
 24. `allowNavToggle` whether to allow navigation toggle
 
-### Theme Settings
+#### Theme Settings
 
 The `[themeSettings]` - required input receives a `ThemeSettings` object in order to colorize your navigation.
 
@@ -539,7 +544,7 @@ The `[themeSettings]` - required input receives a `ThemeSettings` object in orde
 9. `subHighlightBorderColor` the SubNav highlight border color
 10. `subHighlightBgColor` the SubNav highlight bg color
 
-### Example
+#### Example
 
 ```typescript
   /** On Init */
@@ -644,7 +649,7 @@ The `[themeSettings]` - required input receives a `ThemeSettings` object in orde
   }
 ```
 
-## Navigation HTML Setup
+### Navigation HTML Setup
 
 Add component to your `app.component.html` file. The component has 3 ng-content parts:
 
@@ -654,7 +659,7 @@ Add component to your `app.component.html` file. The component has 3 ng-content
 
 > **TIP** Be sure to place the `sof-ar-navigation` component immediately after (under) your toolbar / header.
 
-### Example
+#### Example
 
 ```html
 <sof-ar-navigation [navigationData]="exampleNav" [settings]="exampleSettings">
@@ -689,9 +694,9 @@ Add component to your `app.component.html` file. The component has 3 ng-content
 </sof-ar-navigation>
 ```
 
-## Additional Styling Customizations
+### Additional Styling Customizations
 
-### Sticky Header
+#### Sticky Header
 
 To make the header sticky on mobile, add the class 'sof-ar-fixed-nav' to your header component.
 i.e.
@@ -700,7 +705,7 @@ i.e.
 <div class="toolbar header-menu-padding sof-ar-fixed-nav" role="banner">
 ```
 
-### Mobile Menu Icon
+#### Mobile Menu Icon
 
 You will have to create a mobile only class for your document that adds the appropriate padding to your header on mobile.
 
@@ -714,7 +719,7 @@ i.e.:
 }
 ```
 
-### Mobile Menu Icon customizations
+#### Mobile Menu Icon customizations
 
 Custom styling for the icon depending on the header height:
 
@@ -738,7 +743,7 @@ Custom styling for the icon depending on the header height:
 }
 ```
 
-### Additional Tips
+#### Additional Tips
 
 Add the class `custom-nav` to the `mat-nav-list` div to hide the lines between each list item.
 
@@ -766,11 +771,11 @@ i.e.
 
 ---
 
-# Armature Header
+## Armature Header
 
 `<sof-ar-header></sof-ar-header>` is a mobile-responsive header component.
 
-## Header Setup Overview
+### Header Setup Overview
 
 1. npm install
 2. Import the armature Module into your app.module.ts 'imports'.
@@ -802,7 +807,7 @@ i.e.
       5. `borderBottomColor` The color of the bottom border for the header
       6. `borderBottomSize` The size of teh bottom border for the header
 
-## Header Module Setup
+### Header Module Setup
 
 Module.ts:
 
@@ -821,7 +826,7 @@ import { ArmatureModule } from '@softheon/armature';
 })
 ```
 
-### Header Typescript Component Setup
+#### Header Typescript Component Setup
 
 Import the necessary models from the npm package and configure the navigation component inputs in your Angular typescript component. We recommend you do this `ngOnInit()`.
 
@@ -853,7 +858,7 @@ These settings will display the header with a logo.
   };
 ```
 
-## Header HTML Setup
+### Header HTML Setup
 
 Add component to your `app.component.html` file. The component has 4 ng-content parts:
 
@@ -916,9 +921,9 @@ Add component to your `app.component.html` file. The component has 4 ng-content
 </sof-ar-navigation>
 ```
 
-## Header Styling Tips
+### Header Styling Tips
 
-### Menu List Borders
+#### Menu List Borders
 
 Use the class `sof-ar-header-menu-border` to add a border to your menu list items.
 
@@ -930,7 +935,7 @@ Example:
   </a>
 ```
 
-### Icon & Font Theming
+#### Icon & Font Theming
 
 `ng-content` icon and font themeing will be handled outside of the component library.
 
@@ -965,11 +970,11 @@ Example:
   </div>
 ```
 
-# Armature Footer Component
+## Armature Footer Component
 
 `<sof-ar-footer></sof-ar-footer>` is a mobile-responsive footer shell component that is populated via ng-conent.
 
-## Footer Setup Overview
+### Footer Setup Overview
 
 1. npm install
 2. Import the armature Module into your app.module.ts 'imports'
@@ -978,7 +983,7 @@ Example:
    1. `sof-ar-footer-content` this is for custom content in the footer
 5. Add footer content buttons to ng-content placeholder & stylize
 
-## Footer Module Setup
+### Footer Module Setup
 
 Module.ts:
 
@@ -997,11 +1002,11 @@ import { ArmatureModule } from '@softheon/armature';
 })
 ```
 
-## Footer Typescript Component Setup
+### Footer Typescript Component Setup
 
 N/A. There is no Typescript models associated with this component.
 
-## Footer HTML Setup
+### Footer HTML Setup
 
 Add component to your `app.component.html` file.
 
@@ -1013,7 +1018,7 @@ The component has 1 ng-content part:
 
 > **TIP** Be sure to place the `sof-ar-footer` inside the `sof-ar-nav-content` ng-content in the `sof-ar-navigation` component and after the router outlet.
 
-## Additional Footer Sections
+### Additional Footer Sections
 
 There are two pre footer sections that are optional and disabled by default. These both use ng content with their own selectors. Follow the steps below to use the pre footer sections
 
@@ -1065,7 +1070,7 @@ Example:
 </sof-ar-navigation>
 ```
 
-## Footer Styling Tips
+### Footer Styling Tips
 
 The footer ng-content is wrapped in a flex-box row container with `flex-wrap: wrap`. Below are some pre-built helper classes that can be applied to stylize your footer.
 
@@ -1088,7 +1093,7 @@ The footer ng-content is wrapped in a flex-box row container with `flex-wrap: wr
   }
 ```
 
-## Fixed Footer Styling Tips
+### Fixed Footer Styling Tips
 
 Here is an example CSS that can be added to your styles.css to style a fixed footer:
 
@@ -1114,11 +1119,11 @@ sof-ar-footer, .sof-ar-footer-container button {
 }
 ```
 
-# Armature Site Map
+## Armature Site Map
 
 `<sof-ar-site-map></sof-ar-site-map>` is a site map that goes into the footer.
 
-## Armature Site Map Setup Overview
+### Armature Site Map Setup Overview
 
 1. npm install
 2. Import the armature Module into your app.module.ts 'imports'.
@@ -1138,7 +1143,7 @@ sof-ar-footer, .sof-ar-footer-container button {
             4. `linkClass` the specific class that will take effect in place of the global `linkClass`.
             5. `logoClass` the awesomefont class for the logo
 
-## Site Map Module Setup
+### Site Map Module Setup
 
 Module.ts:
 
@@ -1157,7 +1162,7 @@ import { ArmatureModule } from '@softheon/armature';
 })
 ```
 
-### Site Map Typescript Component Setup
+#### Site Map Typescript Component Setup
 
 Import the necessary models from the npm package and configure the site map component inputs in your Angular typescript component. We recommend you do this `ngOnInit()`.
 
@@ -1256,7 +1261,7 @@ This next configuration will contain a horizontal aligned icon links that has a
   }
 ```
 
-## Site Map HTML Setup
+### Site Map HTML Setup
 
 It is recommended to use this component inside armature footer `sof-ar-footer` in one of the ng containers `sof-ar-footer-content`, `sof-ar-footer-pre-content-1` or `sof-ar-footer-pre-content-2`
 
@@ -1274,9 +1279,9 @@ It is recommended to use this component inside armature footer `sof-ar-footer` i
   </sof-ar-footer>
 ```
 
-## Site Map Styling Tips
+### Site Map Styling Tips
 
-### Styling the columns
+#### Styling the columns
 
 You can override the `sof-ar-site-map-column` class to customize the columns in the site map.
 
@@ -1288,7 +1293,7 @@ Example:
 }
 ```
 
-### Custom class styling config input
+#### Custom class styling config input
 
 Custom classes passed in the component config should be defined in the component that utilizes the `sof-ar-site-map`. For example if class 'link-container' is passed in the linkClass config, you can define it in the stylesheet of the host component. In the following example, it shows how you create padding for the link and change the color for the text in the link.
 
@@ -1304,18 +1309,18 @@ Example:
 }
 ```
 
-# Armature Alert Banner 
+## Armature Alert Banner
 
 `<sof-ar-alert-banner></sof-ar-alert-banner>` is an alert banner on the navigation content. There are 4 types of banner, error, information,  warn, success and 2 type of styles outline and filled.
 
-## Alert Banner Setup Overview
+### Alert Banner Setup Overview
 
 1. npm install
 2. Import the armature Module into your app.module.ts 'imports'
 3. There are no typescript models associated with this component, skip this step
 4. Add Armature component `sof-ar-alert-banner` to HTML component
 
-## Alert Banner Module Setup
+### Alert Banner Module Setup
 
 Module.ts:
 
@@ -1334,7 +1339,7 @@ import { ArmatureModule } from '@softheon/armature';
 })
 ```
 
-## Alert Banner Component Setup
+### Alert Banner Component Setup
 
 There is an optional config provider `ALERT_BANNER_CONFIG` with custom theming options.
 
@@ -1350,7 +1355,7 @@ There is an optional config provider `ALERT_BANNER_CONFIG` with custom theming o
   })
 ```
 
-### Alert Banner Config Guide
+#### Alert Banner Config Guide
 
 The alert config is structured as follow: the border and icon `lineColor`, the sidebar color for outlined banner `outlineSidebar` and the background color for filled banner `filledBackground`. Inside each of those there are the 4 type of banner: `error`, `information`, `success`, and `warn`.
 
@@ -1374,7 +1379,7 @@ The alert config is structured as follow: the border and icon `lineColor`, the s
   };
 ```
 
-## Alert Service
+### Alert Service
 
 On the sof-ar-app-template, there is a built in alert banner that can be used and can be turned off if `hasAlertBanner` is set to false. If hasAlertBanner is true, then the AlertBannerService can be leveraged to show alert messages.
 
@@ -1383,30 +1388,29 @@ On the sof-ar-app-template, there is a built in alert banner that can be used an
 </sof-ar-app-template>
 ```
 
-
-# Hybrid SAML OAuth Service
+## Hybrid SAML OAuth Service
 
 The Hybrid SAML OAuth Service allows for the management of the local/session storage containing saml assertion data and an OAuth 2.0 access token.
 
-## Injection Tokens
+### Injection Tokens
 
-### InjectionTokens.keyPathSuffix - required
+#### InjectionTokens.keyPathSuffix - required
 
 Provides the suffix that will be used when retrieving data from local/session storage
 
-### InjectionTokens.window - required
+#### InjectionTokens.window - required
 
 Provides the window object to the service
 
-### InjectionTokens.tokenEndpoint - required
+#### InjectionTokens.tokenEndpoint - required
 
 The endpoint to be used for refreshing the access token
 
-### GlobalInjectionTokens.tokenRefreshTimeMinutes - optional
+#### GlobalInjectionTokens.tokenRefreshTimeMinutes - optional
 
 Amount of time to wait before refreshing the access token. The default is 30 min
 
-### InjectionTokens.browserStorageImplementation - optional
+#### InjectionTokens.browserStorageImplementation - optional
 
 Potential values:
 `local` | `session`
@@ -1415,13 +1419,13 @@ This injection token determines what implementation of browser storage will be s
 
 When using `session` the value that is provided through local storage will be moved into session storage. After this is done the entry in local storage will be removed.
 
-# Armature Role Based Navigation
+## Armature Role Based Navigation
 
 The Armature Role Based Navigation allow a configuration to be provided indicating the roles allowed in the application and the pages/actions the roles have access to. The roles for a given user are determined through the use of an OAuth2.0 access tokens and a user info endpoint.
 
 RBAC stands for Role Based Access Control
 
-## Configuration
+### Configuration
 
 Below is an example configuration for defining roles.
 
@@ -1476,7 +1480,7 @@ If a user has multiple roles, the access for all of their roles will be merged.
 
 If no role is found, no access is provided
 
-### Rbac Action Directive
+#### Rbac Action Directive
 
 The Role service also support a directive for showing or hiding items based on role and actions. Actions are string provided in the RBAC config that can be used through the project in the form of a directive. And example of the usage can be seen below
 
@@ -1493,7 +1497,7 @@ The button listed above will only be visible when the role of the current user h
 
 If the role of the user doesn't have access to the action, the html element will not be displayed to them
 
-## Navigation Set up
+### Navigation Set up
 
 To use the navigation follow the steps below, these are for integrating the role control with Armature Navigation Module and configurations.
 
@@ -1526,7 +1530,7 @@ this.oAuthRoleService.decodedToken$.subscribe(token => {
 });
 ```
 
-# Custom Auth Config
+## Custom Auth Config
 
 If an application need to switch to a different issuer for auth and requires custom logic there is a CustomAuthConfigService the application can define and setup Auth for logins.
 
@@ -1542,8 +1546,7 @@ If an application need to switch to a different issuer for auth and requires cus
     ]
 ```
 
-
-# Elastic RUM set up
+## Elastic RUM set up
 
 In order to include RUM error handling and Route watching, the following should be included in your `app.module`
 
@@ -1610,25 +1613,25 @@ Replace the `serverUrl` with your apm/rum server and replace the `serviceName` w
 
 The `initializeRum` function provides an optional parameter for a user. By default it utilizes the armature sessionId for the userName and userId, these can be customized if desired by providing the optional values to the function.
 
-## Error Handler
+### Error Handler
 
 This module comes with an error handler built in, that will package errors and ship them to RUM. There are two ways it looks for errors. Angular errors, such as http request failures, get captured by the `RumErrorHandler` instead of the default and get shipped to RUM.
 
 The second looks at any calls being made to console.error and intercepts them. It takes the error, passes it through the error handler, which will submit the error to RUM, then lets the error be logged to the console.
 
-### Softheon Error Handler
+#### Softheon Error Handler
 
 For instances where RUM has not been set up or there are problems connecting, the softheon error handler has been introduced. By using this service errors are shipped to a provided api endpoint and can be handled by that given endpoint. Logs are shipped in the string format.
 
 The default log level is `Warn`.
 
-# Error Module
+## Error Module
 
-## Error Common Component
+### Error Common Component
 
 In order to use this component please import the `ErrorModule` into the parent module the component is being used in
 
-### Overview
+#### Overview
 
 This component provides a generic error display that can be used for a wide variety of errors. In order to use the component, first create the configuration object for it in your typescript
 
@@ -1675,15 +1678,15 @@ In this example the css classes look as follows to apply colors to the text
 }
 ```
 
-### API
+#### API
 
-#### ErrorCommonComponent
+##### ErrorCommonComponent
 
 | Name                                        | Description                                                          |
 | ------------------------------------------- | -------------------------------------------------------------------- |
 | `@Input() public config: ErrorCommonConfig` | The configuration input to be used for rendering the error component |
 
-#### ErrorCommonConfig
+##### ErrorCommonConfig
 
 | Name                      | Description                                                          |
 | ------------------------- | -------------------------------------------------------------------- |
@@ -1696,11 +1699,11 @@ In this example the css classes look as follows to apply colors to the text
 | `infoText: string`        | The info text for the error component                                |
 | `infoTextClass: string`   | Space delimitated classes to be applied to the info text             |
 
-# CSS Overrides
+## CSS Overrides
 
 This section will describe how to utilize the Armature CSS Override directive
 
-## Usage
+### Usage
 
 1. Include the `ThemeModule` or `ArmatureModule` in your `AppModule`.
 2. In you app.component.html include the following attribute `[sofArCssOverride]`
@@ -1748,11 +1751,11 @@ export class AppComponent implements OnInit {
 }
 ```
 
-## CssOverride Configuration
+### CssOverride Configuration
 
 The directive uses an array of CssOverride objects. The definition for the object can be found bellow
 
-### CssOverride
+#### CssOverride
 
 | property   | type               | possible values      | description                                                      |
 | ---------- | ------------------ | -------------------- | ---------------------------------------------------------------- |
@@ -1766,7 +1769,7 @@ The selector indicates how the dom will be searched for html elements
 * id - searches by element id, returns only 1 element, ie. `myElementId`
 * class  - searches by class name, ie. `some-css-class`
 
-### Attribute
+#### Attribute
 
 | property | type     | possible values   | description                                                         |
 | -------- | -------- | ----------------- | ------------------------------------------------------------------- |