update all code snippets and imports to use genesis tokens from web-core

docs/01_getting-started/02_quick-start/05_create-a-user-interface.mdx

@@ -25,7 +25,7 @@ We will make use of the Entity Management component, which includes CRUD functio
 Add the code below to the **home.template.ts** in the path **client/web/src/routes/home/home.template.ts**.
 
 ```html title="home.template.ts"
-import {html} from '@microsoft/fast-element';
+import {html} from '@genesislcap/web-core';
 import type {Home} from './home';
 
 export const HomeTemplate = html<Home>`

docs/01_getting-started/06_developer-training/02_training-content-day2.mdx

@@ -92,7 +92,7 @@ We want to be able to insert a Trade grid with data into our project. For this,
 First, open the file **home.ts** to import the micro front-ends needed, as well as declaring EntityManagement after the imports.
 
 ```ts {1,3,5}
-import {customElement, FASTElement, observable} from '@microsoft/fast-element';
+import {customElement, GenesisElement, observable} from '@genesislcap/web-core';
 ...
 import {EntityManagement} from '@genesislcap/foundation-entity-management';
 
@@ -155,7 +155,7 @@ const COLUMNS = [
   template,
   styles,
 })
-export class Home extends FASTElement {
+export class Home extends GenesisElement {
   @observable columns: any = COLUMNS;
 
   constructor() {
@@ -167,7 +167,7 @@ export class Home extends FASTElement {
 We can now insert the grid into our page. Open the file **home.template.ts** and insert the *entity-management* tag using the class attributes we just created.
 
 ```jsx {5-11}
-import {html, } from '@microsoft/fast-element';
+import {html, } from '@genesislcap/web-core';
 import type {Home} from './home';
 
 export const HomeTemplate = html<Home>`
@@ -372,7 +372,7 @@ Note that the `tradeFormSchema` variable, declared above, pretty much describes
 
 Go back to the **home.template.ts** file to import the variables schema and add the properties  `createFormUiSchema` `updateFormUiSchema`.
 ```jsx {3,14,15}
-import {html, repeat, when, ref} from '@microsoft/fast-element';
+import {html, repeat, when, ref} from '@genesislcap/web-core';
 import type {Home} from './home';
 import { tradeFormCreateSchema, tradeFormUpdateSchema } from './schemas';
 ...

docs/01_getting-started/06_developer-training/03_training-content-day3.mdx

@@ -780,7 +780,7 @@ Open the file **home.ts** and import *Grid Pro* and *Connect*. Then, add them as
 import {ZeroGridPro} from '@genesislcap/foundation-zero-grid-pro';
 import {Connect} from '@genesislcap/foundation-comms';
 ...
-export class Home extends FASTElement {
+export class Home extends GenesisElement {
     @observable columns: any = COLUMNS;
 
     public positionsGrid!: ZeroGridPro;
@@ -796,7 +796,7 @@ export class Home extends FASTElement {
 Finally, go to the file **home.template.ts** and import the required components. Then, add a constant holding the Position columns, and some `<div>`s to format the final HTML.
 
 ```html {1,5-12,15,16,28-42}
-import {html, repeat, when, ref} from '@microsoft/fast-element';
+import {html, repeat, when, ref} from '@genesislcap/web-core';
 import type {Home} from './home';
 import { tradeFormCreateSchema, tradeFormUpdateSchema } from './schemas';
 

docs/01_getting-started/06_developer-training/04_training-content-day4.mdx

@@ -274,7 +274,7 @@ const COLUMNS = [
   template,
   styles,
 })
-export class Home extends FASTElement {
+export class Home extends GenesisElement {
     ...
     constructor() {
       super();

docs/01_getting-started/10_web-training/01_web-training-day1.mdx

@@ -199,11 +199,7 @@ This includes **@genesislcap** dependencies. This is where you can change versio
     "@genesislcap/foundation-zero-grid-pro": "14.15.2",
     "@genesislcap/foundation-reporting": "14.15.2",
     "@genesislcap/g2plot-chart": "14.15.2",
-    "@microsoft/fast-components": "^2.21.6",
-    "@microsoft/fast-element": "^1.7.0",
-    "@microsoft/fast-foundation": "^2.33.4",
-    "@microsoft/fast-router": "^0.4.2",
-    "@microsoft/fast-web-utilities": "^5.1.0",
+    "@genesislcap/web-core": "14.178.0",
     "rxjs": "^7.5.4",
     "tslib": "^2.3.1"
   }
@@ -266,13 +262,13 @@ The second approach involves design systems and we will cover this topic later i
 Create folder **./client/web/src/routes/playground/** and create a new empty file called **playground.ts** in there. Then, add this code to **playground.ts**:
 
 ```typescript title="../playground/playground.ts"
-import { FASTElement, customElement } from "@microsoft/fast-element";
+import { GenesisElement, customElement } from "@genesislcap/web-core";
 
 @customElement({ name: "marketdata-component" }) // custom element being created
-export class MarketdataComponent extends FASTElement {}
+export class MarketdataComponent extends GenesisElement {}
 ```
 
-We've just created a new Web Component extending FASTElement (so, again, we don't have to start from scratch and implement a myriad of attributes and methods).
+We've just created a new Web Component extending GenesisElement (so, again, we don't have to start from scratch and implement a myriad of attributes and methods).
 
 This component could be anything, like a custom button or even a business component. But, for now, it's just empty and doesn't do much. However, we could already use it anywhere in HTML with the following markup if we wanted:
 
@@ -314,7 +310,7 @@ You should see the **Playground** menu item now.
 To create an HTML template for our element, we have to import and use the html-tagged template helper and pass the template to the @customElement decorator.
 
 ```ts {1,3-7,9} title='playground.ts'
-import { FASTElement, customElement, html } from "@microsoft/fast-element";
+import { GenesisElement, customElement, html } from "@genesislcap/web-core";
 
 const myTemplate = html<MarketdataComponent>`
   <div class="header">
@@ -323,7 +319,7 @@ const myTemplate = html<MarketdataComponent>`
 `;
 
 @customElement({ name: "marketdata-component", template: myTemplate }) // custom element being created
-export class MarketdataComponent extends FASTElement {}
+export class MarketdataComponent extends GenesisElement {}
 ```
 
 As you see, we're defining a const called `myTemplate`, which contains the HTML code. This constant is then passed to the definition of our `customElement` through the `template` parameter. This way, when we use this component, it will display the HTML associated with it.
@@ -352,14 +348,14 @@ Let's add an attribute to our MarketdataComponent. Use @attr for primitive prope
 
 ```typescript {1,5} title='playground.ts'
 import {
-  FASTElement,
+  GenesisElement,
   customElement,
   html,
   attr,
-} from "@microsoft/fast-element";
+} from "@genesislcap/web-core";
 
 @customElement({ name: "marketdata-component", template: myTemplate })
-export class MarketdataComponent extends FASTElement {
+export class MarketdataComponent extends GenesisElement {
   @attr lastPrice: number = 0;
 }
 ```
@@ -368,11 +364,11 @@ Having the lastPrice always as zero doesn't make our MarketdataComponent very us
 
 ```typescript {8-13,19-25} title='playground.ts'
 import {
-  FASTElement,
+  GenesisElement,
   customElement,
   html,
   attr,
-} from "@microsoft/fast-element";
+} from "@genesislcap/web-core";
 
 const myTemplate = html<MarketdataComponent>`
   <div class="header">
@@ -382,7 +378,7 @@ const myTemplate = html<MarketdataComponent>`
 `;
 
 @customElement({ name: "marketdata-component", template: myTemplate }) // custom element being created
-export class MarketdataComponent extends FASTElement {
+export class MarketdataComponent extends GenesisElement {
   @attr lastPrice: number = 0;
 
   public getLastPriceRealTime() {
@@ -411,7 +407,7 @@ FAST also provides directives, such as `when` and `repeat` that are very useful
 Examples:
 
 ```typescript {5}
-import { FASTElement, customElement, observable, html, when } from "@microsoft/fast-element";
+import { GenesisElement, customElement, observable, html, when } from "@genesislcap/web-core";
 
 const template = html<MyApp>`
  ...
@@ -424,14 +420,14 @@ const template = html<MyApp>`
   name: "my-app",
   template
 })
-export class MyApp extends FASTElement {
+export class MyApp extends GenesisElement {
   @observable ready: boolean = false;
   ...
 }
 ```
 
 ```typescript {5}
-import { FASTElement, customElement, observable, html, repeat } from "@microsoft/fast-element";
+import { GenesisElement, customElement, observable, html, repeat } from "@genesislcap/web-core";
 
 const template = html<FriendList>`
   ...
@@ -444,7 +440,7 @@ const template = html<FriendList>`
   name: "friend-list",
   template
 })
-export class FriendList extends FASTElement {
+export class FriendList extends GenesisElement {
   @observable friends: Person[] = [];
   ...
 }
@@ -456,18 +452,18 @@ Please review the [directives](https://www.fast.design/docs/fast-element/using-d
 
 ### Styling our component
 
-FASTElement provides a **css** tagged template helper that allows for the creation of ElementStyles.
+GenesisElement provides a **css** tagged template helper that allows for the creation of ElementStyles.
 
 Add this code:
 
 ```typescript {6,9-13} title='playground.ts'
 import {
-  FASTElement,
+  GenesisElement,
   customElement,
   html,
   attr,
   css,
-} from "@microsoft/fast-element";
+} from "@genesislcap/web-core";
 ...
 const marketdataComponentCSS = css`
   h4 {
@@ -488,12 +484,12 @@ This is the final code:
 
 ```typescript title='playground.ts'
 import {
-  FASTElement,
+  GenesisElement,
   customElement,
   html,
   attr,
   css,
-} from "@microsoft/fast-element";
+} from "@genesislcap/web-core";
 
 const marketdataComponentCSS = css`
   h4 {
@@ -513,7 +509,7 @@ const myTemplate = html<MarketdataComponent>`
   template: myTemplate,
   styles: marketdataComponentCSS,
 }) // custom element being created
-export class MarketdataComponent extends FASTElement {
+export class MarketdataComponent extends GenesisElement {
   @attr lastPrice: number = 0;
 
   public getLastPriceRealTime() {
@@ -545,7 +541,7 @@ Instrument AAPL 227.12
 
 Steps:
 
-- import _observable_ and _repeat_ from from `@microsoft/fast-element`
+- import _observable_ and _repeat_ from from `@genesislcap/web-core`
 - add a list called **_instruments_** to the MarketdataComponent. Feel free to initialize it with a few instruments, such as `@observable instruments: String[] = ["MSFT", "AAPL"];`
 - change the `lastPrice` attribute to a list of prices. Feel free to initialize it with corresponding prices, such as `@observable lastPrices: number[] = [101.23, 227.12];`
 - change `getLastPriceRealTime` to receive the instrument name and return the corresponding price;
@@ -638,7 +634,7 @@ npm run bootstrap
 import { Navigation } from '@genesislcap/foundation-header';
 
 @customElement({ name, template, styles })
-export class MainApplication extends FASTElement {
+export class MainApplication extends GenesisElement {
   @inject(MainRouterConfig) config!: MainRouterConfig;
   @inject(Navigation) navigation!: Navigation;
 
@@ -662,7 +658,7 @@ export const MainTemplate: ViewTemplate<MainApplication> = html`
 4. Make sure the `foundation-header` tag is part of the html that you set as the markup for the `defaultLayout` in your router configuration.
 
 ```js {3} title='client/web/src/layouts/default.ts'
-export const defaultLayout = new FASTElementLayout(html`
+export const defaultLayout = new GenesisElementLayout(html`
 <div class="container">
   <foundation-header
   ...
@@ -781,7 +777,7 @@ There are three control buttons that can be shown or hidden on the right-hand si
 For instance, adding the Misc logo would look like this:
 
 ```html {5} title='default.ts'
-... export const defaultLayout = new FASTElementLayout( html`
+... export const defaultLayout = new GenesisElementLayout( html`
 <div class="container">
   <foundation-header
     logo-src="https://icotar.com/avatar/webtraining"
@@ -798,7 +794,7 @@ To implement the functionality of the button in the client, follow the steps bel
 1. Define the functionality of the event `callback` in the class of a class which is a parent to the router.
 
 ```javascript title='main.ts'
-export class MainApplication extends FASTElement {
+export class MainApplication extends GenesisElement {
 
 	onMiscButtonPressed() {
 		// ... do something

docs/01_getting-started/10_web-training/02_web-training-day2.mdx

@@ -51,7 +51,7 @@ Insert, edit and cancel.
 Let's start with the simplest way to create a form, using the `foundation-form` component:
 
 ```ts {5-12} title='order.template.ts'
-import {html} from '@microsoft/fast-element';
+import {html} from '@genesislcap/web-core';
 import type {Order} from './order';
 
 export const OrderTemplate = html<Order>`
@@ -86,7 +86,7 @@ We define `insertOrder` function in order.ts
   import {logger} from '../../utils';
 
   ...
-  export class Order extends FASTElement {
+  export class Order extends GenesisElement {
     @Connect connect: Connect;
 
     constructor() {
@@ -160,7 +160,7 @@ export const OrderTemplate = html<Order>`
 Add to your `order.styles.ts` the following, so you get a nice look on your forms
 
 ```ts title="order.styles.ts"
-import {css} from "@microsoft/fast-element";
+import {css} from "@genesislcap/web-core";
 import { mixinScreen } from '../../styles';
 
 export const OrderStyles = css`
@@ -201,7 +201,7 @@ Then, define the variables that will hold the values that are entered.
 In the file **order.ts**, add the following properties to the class: `Order`:
 
 ```ts {1,4-9} title='order.ts'
-import {customElement, FASTElement, observable} from '@microsoft/fast-element';
+import {customElement, GenesisElement, observable} from '@genesislcap/web-core';
 ...
 
 @observable public instrument: string;
@@ -221,7 +221,7 @@ We can do it in the traditional way by adding `@change` [event handler](https://
 Let's add it to each form element:
 
 ```jsx {3,6-17} title='order.template.ts'
-import {html} from '@microsoft/fast-element';
+import {html} from '@genesislcap/web-core';
 import type {Order} from './order';
 import { sync } from '@genesislcap/foundation-utils';
 
@@ -250,7 +250,7 @@ Order is a Web Component and, as such, it supports a series of [lifecycle events
 
 ```typescript {5,11-18} title='order.ts'
 ...
-export class Order extends FASTElement {
+export class Order extends GenesisElement {
   @Connect connect: Connect;
   ...
   @observable public allInstruments: Array<{value: string, label: string}>; //add this property
@@ -260,7 +260,7 @@ export class Order extends FASTElement {
   }
 
 public async connectedCallback() { //add this method to Order class
-    super.connectedCallback(); //FASTElement implementation
+    super.connectedCallback(); //GenesisElement implementation
 
     const msg = await this.connect.snapshot('ALL_INSTRUMENTS'); //get a snapshot of data from ALL_INSTRUMENTS data server
     console.log(msg); //add this to look into the data returned and understand its structure
@@ -283,7 +283,7 @@ Once we have the list of instruments from the server we can make use of it in th
 To dynamically include list of options we use [repeat](https://www.fast.design/docs/fast-element/using-directives#the-repeat-directive) directive and iterate through the items.
 
 ```jsx {1,5-9} title='order.template.ts'
-import {html, repeat} from '@microsoft/fast-element';
+import {html, repeat} from '@genesislcap/web-core';
 ...
 export const OrderTemplate = html<Order>`
 <span>Instrument</span>
@@ -322,7 +322,7 @@ However, any changes on the backend would require a change in the options. Would
   @observable public directionOptions: Array<{value: string, label: string}>; //add this property
 ...
 public async connectedCallback() {
-    super.connectedCallback(); //FASTElement implementation
+    super.connectedCallback(); //GenesisElement implementation
 
     const msg = await this.connect.snapshot('ALL_INSTRUMENTS');
     console.log(msg);
@@ -375,7 +375,7 @@ Add this method to the Order class:
 
 ```ts {4-12} title='order.ts'
 ...
-export class Order extends FASTElement {
+export class Order extends GenesisElement {
   ...
   public async getMarketData() {
       const msg = await this.connect.request('INSTRUMENT_MARKET_DATA', {
@@ -440,7 +440,7 @@ export const OrderTemplate = html<Order>`
 Then let's amend our insertOrder function to work with the custom form now:
 ```typescript {4-15} title='order.ts'
 ...
-export class Order extends FASTElement {
+export class Order extends GenesisElement {
   ...
 public async insertOrder() {
       const insertOrderEvent = await this.connect.commitEvent('EVENT_ORDER_INSERT', {
@@ -464,7 +464,7 @@ Let's improve our screen a little bit and add a simple success or error message
 
 ```ts {16-21} title='order.ts'
 ...
-export class Order extends FASTElement {
+export class Order extends GenesisElement {
   ...
   public async insertOrder() {
         const insertOrderEvent = await this.connect.commitEvent('EVENT_ORDER_INSERT', {