@abt-desk/rsc

This library contains the following components that can be included in Realogy products:

Usage no npm install needed!

<script type="module">
  import abtDeskRsc from 'https://cdn.skypack.dev/@abt-desk/rsc';
</script>

README

Realogy Shared Components

This library contains the following components that can be included in Realogy products:

Changelog

We'll keep track of each release in the CHANGELOG.md

Installation

npm install @abt-desk/rsc

Integrating into a project

Using webpack (option A)

Working with webpack, you can import the library into your main file.

import "@abt-desk/rsc/lib/polyfills";
import "@abt-desk/rsc";
import "@abt-desk/rsc/lib/styles.css";

Using embedded script (option B)

Copy the lib folder under your public directory.

<script type="text/javascript" src="public/rsc/lib/polyfills.js"></script>
<script type="text/javascript" src="public/rsc/lib/index.js"></script>
<link rel="stylesheet" href="public/rsc/lib/styles.css">

Usage

Include any or all of the components as a regular html tag where they'd logically reside within your HTML structure. For example, you might include the header near the top of the body:

<rsc-header></rsc-header>

Usage to display any additional content

Include the components as a regular html tag with any additional content you wanted to display as below, example: (The additional content which is passed by a consuming application may or may not be optional)

Example:

<rsc-advanced-footer>
  <span>Licensed under CC BY 4.0.<span/>
</rsc-advanced-footer>

Important: It's necessary to enclose your main content into a wrapper with an specific class and pass it to the header component as main-class, It makes the menus work correctly on mobile view ports.

React Example

import React, { Component } from 'react';
import "@abt-desk/rsc/lib/polyfills";
import "@abt-desk/rsc";
import "@abt-desk/rsc/lib/styles.css";

import './App.css';

class App extends Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    const rscClient = window.__RSC__;
    rscClient.setMenuItem({ name: 'My Profile', url: 'www.google.com', icon: 'far fa-user', target: '_blank'});
    rscClient.setMenuItem({ name: 'Reset Dashboard Layout', url: 'www.github.com', icon: 'fal fa-repeat-alt', target: '_blank'});
    rscClient.setMenuItem({ name: 'Settings', url: 'www.google.com', icon: 'fal fa-cog', target: '_blank'});
    rscClient.setMenuItem({ name: 'Log Out', url: 'www.github.com', icon: 'fal fa-sign-out-alt', target: '_blank'});
  }

  render() {
    return (
      <div className="App">
        <rsc-header
          app-key="84bbb33a-27b6-4c6d-b965-242e9a101ec3"
          brand-key="85440"
          username="Sergey"
          main-class="main"
          user-photo="http://www.iconarchive.com/download/i60042/mattahan/ultrabuuf/Comics-Spiderman-Morales.ico"
          okta-id="00uhcgfrmyEIAef7R0h7"
          service-url="https://general.url"
          apps-service-url="https://applications.url"
          avatar-service-url="https://dev-avatar.mycbdesk.com">
        </rsc-header>
        <div className="main">
          <h1>Sample React App</h1>
          <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
          industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
          electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release
          of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
          Aldus PageMaker including versions of Lorem Ipsum.
          </p>
        </div>
        <rsc-footer></rsc-footer>
      </div>
    );
  }
}

export default App;

Angular Example

Import the css on the main style file of angular

src/app/styles.scss.

@import '@abt-desk/rsc/lib/styles.css';

Import the polyfills on the polyfills file of angular

src/app/polyfills.ts.

import '@abt-desk/rsc/lib/polyfills';

Add the assets in angular json

"assets": [
  ...
  {
    "input": "./node_modules/@abt-desk/rsc/lib/assets/rsc-icons",
    "glob": "**/*",
    "output": "/assets/rsc-icons/"
  }
],

Enable custom elements on your angular module adding the CUSTOM_ELEMENTS_SCHEMA to the schemas

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

Import the components in the main file

import { Component, OnInit, AfterViewInit, AfterViewChecked, NgZone } from '@angular/core';
import '@abt-desk/rsc';

function _window(): any {
  return window;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, AfterViewInit, AfterViewChecked {
  constructor(private ngZone: NgZone) {

  }
  title = 'angular-integration-test';
  public mounted = false;
  public isSetMenu = false;

  ngOnInit() {
    this.ngZone.run(() => this.mounted = true);
  }

  ngAfterViewChecked() {
    const rscClient =  _window().__RSC__;
    if (rscClient && !this.isSetMenu) {
      rscClient.setMenuItem({ name: 'My Profile', url: 'www.google.com', icon: 'far fa-user', target: '_blank'});
      rscClient.setMenuItem({ name: 'Reset Dashboard Layout', url: 'www.github.com', icon: 'fal fa-repeat-alt', target: '_blank'});
      rscClient.setMenuItem({ name: 'Settings', url: 'www.google.com', icon: 'fal fa-cog', target: '_blank'});
      rscClient.setMenuItem({ name: 'Log Out', url: 'www.github.com', icon: 'fal fa-sign-out-alt', target: '_blank'});
      this.isSetMenu = true;
    }
  }
}

Template

<rsc-header *ngIf="mounted"
  app-key="84bbb33a-27b6-4c6d-b965-242e9a101ec3"
  brand-key="85440"
  username="Sergey"
  main-class="main"
  user-photo="http://www.iconarchive.com/download/i60042/mattahan/ultrabuuf/Comics-Spiderman-Morales.ico"
  okta-id="00uhcgfrmyEIAef7R0h7"
  service-url="https://general.url"
  apps-service-url="https://applications.url"
  avatar-service-url="https://dev-avatar.mycbdesk.com">
</rsc-header>
<div class="main">
  <h1>Sample Angular App</h1>
  <p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
  industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
  scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
  electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release
  of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
  Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>
<rsc-footer *ngIf="mounted"></rsc-footer>

Note: Ensure to mount the header and footer once your Angular component was mounted. Notice the mounted variable, then the client library will be available.

Plain Web Page Example

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sample</title>
    <base href="/">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="public/rsc/lib/polyfills.js"></script>
    <script type="text/javascript" src="public/rsc/lib/index.js"></script>
    <link rel="stylesheet" href="public/rsc/lib/styles.css">
  </head>
  <body>
    <rsc-header
      app-key="84bbb33a-27b6-4c6d-b965-242e9a101ec3"
      brand-key="85440"
      username="Sergey"
      user-photo="http://www.iconarchive.com/download/i60042/mattahan/ultrabuuf/Comics-Spiderman-Morales.ico"
      okta-id="00uhcgfrmyEIAef7R0h7"
      service-url="https://general.url"
      apps-service-url="https://applications.url"
      avatar-service-url="https://dev-avatar.mycbdesk.com">
    </rsc-header>
    <div className="main">
      <h1>Sample Plain Web Page</h1>
      <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
      industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
      scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
      electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release
      of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
      Aldus PageMaker including versions of Lorem Ipsum.
      </p>
    </div>
    <rsc-footer></rsc-footer>
    <rsc-speed-dial></rsc-speed-dial>
    <script>
      var rscClient = window.__RSC__;
      rscClient.setMenuItem({ name: 'My Profile', url: 'www.google.com', icon: 'far fa-user', target: '_blank'});
      rscClient.setMenuItem({ name: 'Reset Dashboard Layout', url: 'www.github.com', icon: 'fal fa-repeat-alt', target: '_blank'});
      rscClient.setMenuItem({ name: 'Settings', url: 'www.google.com', icon: 'fal fa-cog', target: '_blank'});
      rscClient.setMenuItem({ name: 'Log Out', url: 'www.github.com', icon: 'fal fa-sign-out-alt', target: '_blank'});
    </script>
  </body>
</html>

Client library

With the library exposed, there is additional functionality to interact with the component. Get the rscService as following:

const rscClient = window.__RSC__;

'rscServiceInit' event is emitted after rsc is ready.

Theming

To add a global theme a Brand key needs to be added to the body element as shown below.

<body data-rsc-brand-key="<brand-key>">
  ...application template
</body>

Header

selector: <rsc-header></rsc-header>

Overview for Header

The header is composed of three main features:

  • Waffle Menu
  • Notifications
  • Profile Menu

The Waffle Menu is a set of applications available to the user, so they may more easily access different tools in their product suite, no matter which they may currently be using. The applications can be grouped by category, with an additional set including the most recently accessed by the current user.

Notifications are product and company specific notices available within an application that are appropriate in context of the application, rather than an alternative such as email or a push notification. They include unread, read and archived states - as well as an index of all received notifications for future reference.

The Profile Menu is meant to contain all user related links and actions that aren't appropriate for other forms of navigation, such as a tree structure.

This might include the ability to log out of an application, linking to view or edit one's profile, or edit a user's application specific settings and preferences.

APIs for Header

Properties for Header

The header component receives the following properties:

Attribute Description
app-key (required) Key of the application
brand-key Key of the brand, if not added default brand will be set
username Username that appears on the header and profile menu
user-photo User photo that appears on the header and profile menu
main-class Body's class name to show and hide body when needed
okta-id Okta Id to retrieve the photo to display on the header
service-url RSC service url (default: https://rsc.realogy.com)
avatar-service-url Avatar service url (default: https://avatar.mycbdesk.com)
apps-service-url Application/waffle service url (default: https://backend.mycbdesk.com)
full-width-layout Header/Footer full screen width: true or false (default)
header-size-update To increase the header size along with components in it: true or false (default)
profile-menu profile menu appears on the header and turn off legacy hamburger menu: true or false (default)

Example:

  <rsc-header
    app-key="6240dbdc-0758-48f8-be64-2d87c73a741e"
    brand-key="95495"
    username="Sergey"
    user-photo="https://image.sergey"
    service-url="https://general.url"
    apps-service-url="https://applications.url"
    main-class="main"
    okta-id="00uhcgfrmyEIAef7R0h7"
    avatar-service-url="https://dev-avatar.mycbdesk.com"
  />
// Here you can add you custom component
 <my-custom-component></my-custom-component>
  </rsc-header>

Methods for Header

The header component receives the following methods:

Set Okta Id
setOktaId
takes okta id as the parameter and sets oktaId in rsc
parameters
url: string
Set Access Token
setAccessToken
sets oktaId in rsc to retrieve apps
parameters
token: string - access token
Set Help Docs Url
setHelpDocsUrl
URL to help documentation, if provided help button will appear in the header.
parameters
url: string - url for help doc
Set User
setUser
set user information
parameters
user: User - object containing details of the user
Set Username
setUsername
sets a username
parameters
username: string
Set User First Name
setUserFirstName
set a user first name
parameters
userFirstName: string
Set User Photo
setUserPhoto
set a user photo by url (e.g. https://image.sergey), set boolean to show or hide the photo on the user menu
parameters
userPhoto: string showProfileInUserMenu: boolean
Show Profile In User Menu
showProfileInUserMenu
set boolean to show or hide the photo on the user menu
parameters
showProfileInUserMenu: boolean
Show User Name In Topnav
showUserNameInTopnav
set boolean to show or hide the first username on the topnav
parameters
showUserNameInTopnav: boolean
Show Caret Down Icon In Topnav
showCaretDownIconInTopnav
set boolean to show or hide the caret indicator in header near the username in Topnav
parameters
showCaretDownIconInTopnav: boolean
Show Beta Indicator
showBetaIndicator
set boolean to show or hide the "beta" indicator in header
parameters
showBetaIndicator: boolean
Show Waffle Menu
showWaffleMenu
set boolean to show or hide the "waffleMenu" indicator in header - default value is true.
parameters
showWaffleMenu: boolean
Set Home Button Callback
setHomeButtonCallback
set a home button callback function, which will be called, when a user clicks on the header logo/app name.
parameters
callback: function
Set Menu Item
setMenuItem
set additional item to the profile menu
parameters
menuItem: menu
Remove Menu Item
removeMenuItem
removes an specific menu item by name
parameters
name: string
Set Menu
setMenu
An array of items to set the menu.
parameters
menuItems: Array<menu>

Header Interfaces

Menu Item
property type required description
name string link text
url string target url
icon string fontawesome class icon, e.g. 'fa-times' (see https://fontawesome.com/v6.0/icons)
onTab boolean set true to open in a new tab, default false
callback function target callback function (optional, if not provided url will be used)
weight int menu items are sorted in ascending order. (default: 0)
showTooltip boolean to show the material tooltip. (default: false)
tooltipText string content to be shown in the tooltip
tooltipClass string custom class to be added in tooltip, if needed.
tooltipPosition string set position of tooltip. (default: below)
User
property type required description
username string set username
userPhoto string set a user photo by url (e.g. https://image.sergey)
oktaId string set oktaId

Speed Dial

selector: <rsc-speed-dial></rsc-speed-dial>

Overview of Speed Dial

The speed dial (alternately referred to as a floating action button, or FAB) would be used when you have a set of actions you'd like to make persistently available to users.

The speed dial is presented as a triggering floating action button, anchored to the bottom right of the screen. It will follow users when scrolling. When clicked, an overlay and its constituent child actions will appear.

Each child action should relate to a more broad concept. For example, an additive action, represented as a plus, might contain the ability to add listings, contacts or documents.

Speed dials should contain no more than 6 child actions.

Include the components as a regular html tag and add any of the attributes mentioned below to modify the component.

To replace the default icon with a custom image or content add content inside the rsc-speed-dial tag as shown below.

If side nav is being used, then place the speed dial element outside the side nav element.

<!-- Add custom content -->
<rsc-sidenav></rsc-sidenav>
<rsc-speed-dial>
  <img src="path/to/img"></img>
</rsc-speed-dial>

Options for this component can be set using the methods mentioned below

The main button color can be changed by overriding the 'fab-toggler' class as shown below:

.rsc-speed-dial .fab-toggler{
  background-color: <brand color>;
}

APIs of Speed Dial

Attributes of Speed Dial

Attribute Description
fab-icon (optional) font awesome class name, default: support fab icon will be displayed.
brand-key (optional) a theme is applied on the component based on the Brand key, overrides the global theme
mat-color (optional) sets the theme palette, default: accent

Example:

<!-- Font awesome icon override -->
<rsc-speed-dial fab-icon='far fa-align-left'>
</rsc-speed-dial>

Methods for Speed Dial

Set a single speed dial
setSpeedDialOption
this method is used to set speed dial options individually
parameters
option: speedDialOption - object containing details of the option

Example:

// without callback
rscClient.setSpeedDialOption({
  name: 'Leave Feedback',
  icon: 'fal fa-comment-exclamation',
  weight: 2,
  url: 'https://www.mycbdesk.com/feedback',
  target: '_blank',
});

// with callback
rscClient.setSpeedDialOption({
  name: 'See Help Articles & FAQs',
  icon: 'fal fa-question-circle',
  callback: function(option) {window.open('https://www.mycbdesk.com/help-center', '_blank')},
});
Remove an option
removeSpeedDialOption
removes one speed dial option based on the name
parameters
name: string - name of the option

Example:

rscClient.removeSpeedDialOption('Leave Feedback');
Set multiple speed dial options
setSpeedDial
this method adds the speed dial options passed to the method, all previous options will be replaced
parameters
speedDialOptions: Array<speedDialOption> - collection of speed dial options

Example:

rscClient.setSpeedDial([
{
  name: 'Leave Feedback',
  icon: 'far fa-align-left',
  weight: 2,
  url: 'https://www.mycbdesk.com/feedback',
  target: '_blank',
},
{
  name: 'See Help Articles & FAQs',
  icon: 'fal fa-question-circle',
  url: 'https://www.mycbdesk.com/help-center',
}
]);

Speed Dial Interfaces

Speed Dial Option
property type required description
name string yes option name
url string no target url
icon string yes font-awesome class icon, e.g. 'fa-times' (see https://fontawesome.com/v6.0/icons)
weight int no options are sorted in ascending order (lowest weight is displayed at the top, default: 0)
target string no sets target value, (default: '_blank)'
callback function no an optional property, the call back function is called every time an option is clicked

Side Nav

selector: <rsc-sidenav></rsc-sidenav>

Overview for Side Nav

The SideNav may be used in applications where content is organized in a tree structure. In the case of this component, this should be limited to applications where the content hierarchy includes 2-3 levels of navigation. More focused task-oriented applications aren't appropriate, but content heavy applications such as intranets should be able to leverage the component to quickly organize content in a way consistent with other products across the organization.

Implementation:

Place the main content of the application inside the side nav element. Ideally header component will be placed above the side nav element and offset height to equal the height of the header.

Set the sidenav config based on the type of device or as required for pages as shown below.

If you'd like to allow users on desktops the convenience of collapsing and expanding the sidenav to provide more room for content, ensure that enableStaggeredNav is set to true.

If speed dial is being used, then place the speed dial element outside the side nav element.

Example:

<header></header>
<rsc-side-nav offset-height="45px">
  <main><main>
</rsc-side-nav>
<rsc-speed-dial></rsc-speed-dial>

For Angular applications add the 'mounted' flag on rsc-sidenav element.

Check 'mounted' flag implementation here

<rsc-side-nav offset-height="45px" *ngIf="mounted === true">
  <!-- main content -->
</rsc-sidenav>

To set active state on the nav item the nav items must have an URL and the whenever the route changes, the current route should be pushed to rsc by calling setCurrentUrl method. Active state will be set only when the nav item URL and the current URL matches.

Other side nav states can be controlled by calling the setSidenavState method.

APIs for Side Nav

Attributes of Side Nav

Attribute Description
offset-height (optional) the height of the side nav is calculated by subtracting the offset height from 100vh

Example:

  <rsc-side-nav offset-height="45px"></rsc-side-nav>

Methods for Side Nav

Update side nav state
setSidenavState
updates the state of the side nav, parameters can be pushed individually
parameters
sidenavState: SidenavState - contains properties that change the state of the side nav

Example:

rscClient.setSidenavState({
  open: true,
});

// Example config for mobile/touch devices
rscClient.setSidenavState({
  enableCache: false,
  enableStaggeredNav: false,
  state: 'closed',
  hasBackdrop: true,
});

// Example config for desktop devices
rscClient.setSidenavState({
  enableCache: true,
  enableStaggeredNav: true,
  state: 'closed',
  hasBackdrop: false,
});
Add a nav item
setSidenavItem
this method is used to add a single nav item
parameters
sidenavItem: SidenavItem - object containing details of the side nav item

Example:

// without callback
rscClient.setSidenavItem({
  icon: 'fal fa-book',
  label: 'Education',
  showAnchorTag: true,
  url: '/test',
  openInNewTab: boolean,
  childItems: [
    {
      label: 'cbcdesk',
      showAnchorTag: true,
      url: 'https://cbcdesk.com/',
      openInNewTab: false,
    }
  ],
});

// with callback
rscClient.setSidenavItem(
{
  icon: 'fal fa-book',
  label: 'Education',
  url: 'https://www.mycbdesk.com/help-center',
  callback: function(option) {window.open('https://www.mycbdesk.com/help-center', '_blank')},
  childItems: [
    {
      label: 'cbcdesk',
      showAnchorTag: true,
      url: 'https://cbcdesk.com/',
      openInNewTab: false,
    }
  ],
};
Remove a navigation item
removeSidenavItem
removes one navigation item based on the name, applicable for the first level (removes all child items)
parameters
label: string - label of the navigation item

Example:

rscClient.removeSidenavItem('Education');
Set multiple sidenav items
setSidenav
this method adds the navigation items passed to the method, all previous items will be replaced
parameters
sidenavItems: Array<SidenavItem> - collection of navigation items

Example:

rscClient.setSidenav([
{
  // First level
  icon: 'fal fa-home',
  label: 'Desk',
  url: '/',
  callback: () => { /* Do something when item is clicked/touched */ },
  childItems: [
    {
      // Second level
      label: 'level2',
      url: '/level2',
      callback: () => { /* Do something when item is clicked/touched */ },
      childItems: [
        {
          // Tertiary level
          label: 'mycbdesk',
          showAnchorTag: true,
          url: 'https://mycbdesk.com/',
          openInNewTab: true,
          childItems: [],
        }
      ],
    },
    {
      // Second level
      label: 'level21',
      url: '/level21',
      callback: () => { /* Do something when item is clicked/touched */ },
      // No tertiary level
      childItems: [],
    }
  ],
},
{
  // First level
  icon: 'fal fa-book',
  label: 'Education',
  url: '/education',
  callback: () => { /* Do something when item is clicked/touched */ },
  // No second level
  childItems: [],
}
])
Update current url
setCurrentUrl
updates the current url of the parent application
parameters
currentUrl: string

Example:

// full route
rscClient.setCurrentUrl('mycbdesk.com');

// partial route
rscClient.setCurrentUrl('/company');

Events for Side Nav

Sidenav closed
rscSidenavClosed
emitted when the sidenav is closed

Example:

const sidenavEl = document.getElementsByTagName('rsc-side-nav')[0];

sidenavEl.addEventListener('rscSidenavClosed', () => {
  // Execute code after side navigation is closed.
});

Side Nav Interfaces

Sidenav State
property type required description
state string no available values: 'closed', 'open', if 'enableStaggeredNav' is true then the close state will display the navigation icons, default: 'closed'
hasBackdrop boolean no if true adds a overlay over the content when the nav bar is open
collapseAll boolean no collapses all the nav items
enableStaggeredNav boolean no true will enable the staggered side nav, default: true
offsetHeight string no sets the height of the container where the side nav and the content is rendered, overrides the value passed as the attribute 'offset-height'
enableCache boolean no this flag allows the states to persist on the browser, only applicable for 'closed' state if enableStaggeredNav is enabled and 'open' state, default: true
Sidenav Item
property type required description
label string yes the name displayed on the side nav
icon string no the icon displayed beside the label, only applicable for the 1st level, fontawesome class icon, e.g. 'fa-times' (see https://fontawesome.com/v6.0/icons)
showAnchorTag boolean no if true an anchor tag is added to the DOM with url as the href (default is false)
url string no used as href if anchor tag is enabled and used to set the active state
openInNewTab boolean no if true adds target='_blank' attribute to the anchor tag (default is false)
callback function no executes custom code when option is clicked/touched
panelState string no determines if the nav item is expanded or collapsed, possible values 'expanded' and 'collapsed' (default is collapsed)
childItems Array<SidenavItem> no contains child nav items, applicable for level one and two
isActive boolean no sets the active class on the nav item, set o true when the current url and nav item url is same

| collapseAll | boolean | no | collapses all the nav items |

Footer

selector: <rsc-footer></rsc-footer>

Overview for Footer

The footer component should include standard elements, such as legal information, links to privacy policies, sitemaps, terms of use and company branding and social media links (represented as icons).

Include the components as a regular html tag with any additional content you wanted to display as below, example: (The additional content which is passed by consuming application is optional)

Properties for Advanced Footer

The advanced footer component receives the following properties:

Attribute Description
hide-help-desk-resources If true it will hide the help desk resources in advanced footer 
<rsc-footer *ngIf="mounted">
    <span>It is licensed under CC BY 4.0.</span>
</rsc-footer>
or
<rsc-advanced-footer>
  <span>It is licensed under CC BY 4.0.</span>
</rsc-advanced-footer>

Note: Footer component needs the header component to be mounted

Constants

Brand keys

Brand Key
Coldwellbanker cb
Coldwellbanker commercial cbc
Realogy products rp
Realogy rlgy
Century 21 c21
Better Homes and Gardens bhg
ERA Real Estate era
ZIP Realty zip
Sotheby's International Realty sir
Corcoran cor

Theme palettes

Palettes primary, accent and warn

Steps Required for Development

Run Dev Server

Run a dev server on port 4000

npm start

Run Tests

npm tests

Build

Build script is going to generate the lib folder.

npm run build

npm version patch

npm publish

This project was generated with Angular CLI version 1.7.4.