diff --git a/.gitignore b/.gitignore
index b5400ac81..332e7d987 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,7 +8,7 @@
 /bazel-out
 
 # dependencies
-/node_modules
+node_modules
 
 # profiling files
 chrome-profiler-events*.json
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5e2f87707..64a129d45 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,24 @@
 # Changelog
 
+## [1.12.0] - 06-04-21
+### Resolves
+
+- The mobile service should use the ngrx store to maintain state. (#333)
+- Weaver Components should use an alternate mechanism to display: none when components are ready (#363)
+- Weaver Components should use Ngrx to to maintain state. (#364)
+- Weaver Components should build without warnings (#365)
+- Refactor Template Service to Template Utility (#379)
+- Refactor to pure pipes (#380)
+- Remove isMobileAgent from base component (#381)
+- Refactor mobile store to layout store (#382)
+- Afford input text color on text component (#388)
+- Colors in color utility should be brought in via JSON (#390)
+- Weaver Components Manifest should support path variables (#398)
+
+## [1.11.1] - 05-19-21
+### Resolves
+- Weaver Components should use an alternate mechanism to display: none when components are ready (#363)
+
 ## [1.11.0] - 05-12-21
 ### Resolves
 
diff --git a/angular.json b/angular.json
index 044c271ba..f91a85243 100644
--- a/angular.json
+++ b/angular.json
@@ -8,6 +8,9 @@
       "schematics": {
         "@schematics/angular:component": {
           "style": "scss"
+        },
+        "@schematics/angular:application": {
+          "strict": true
         }
       },
       "root": "",
@@ -23,7 +26,7 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "aot": true,
+            "inlineStyleLanguage": "scss",
             "assets": [
               "src/favicon.ico",
               "src/assets",
@@ -52,40 +55,51 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ],
+              "buildOptimizer": true,
               "optimization": true,
-              "outputHashing": "none",
               "sourceMap": false,
               "extractCss": false,
               "extractLicenses": true,
-              "namedChunks": false,
               "commonChunk": false,
+              "namedChunks": false,
               "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "1.5mb",
-                  "maximumError": "2mb"
+                  "maximumWarning": "2mb",
+                  "maximumError": "2.5mb"
                 },
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "50kb",
                   "maximumError": "500kb"
                 }
-              ]
+              ],
+              "outputHashing": "none"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "sourceMap": true,
+              "extractLicenses": false,
+              "commonChunk": true,
+              "namedChunks": true,
+              "vendorChunk": true
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "serve": {
           "builder": "ngx-build-plus:dev-server",
-          "options": {
-            "browserTarget": "weaver-components:build"
-          },
           "configurations": {
             "production": {
               "browserTarget": "weaver-components:build:production"
+            },
+            "development": {
+              "browserTarget": "weaver-components:build:development"
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
@@ -100,6 +114,7 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
+            "inlineStyleLanguage": "scss",
             "assets": [
               "src/favicon.ico",
               "src/assets"
@@ -144,16 +159,19 @@
       "prefix": "wvr",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
-            "tsConfig": "projects/wvr-elements/tsconfig.lib.json",
             "project": "projects/wvr-elements/ng-package.json"
           },
           "configurations": {
             "production": {
               "tsConfig": "projects/wvr-elements/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/wvr-elements/tsconfig.lib.json"
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "test": {
           "builder": "ngx-build-plus:karma",
diff --git a/package.json b/package.json
index 11d51bd24..b0d31fc27 100644
--- a/package.json
+++ b/package.json
@@ -4,16 +4,16 @@
     "type": "git",
     "url": "git+https://github.com/TAMULib/weaver-components.git"
   },
-  "version": "1.11.1",
+  "version": "1.12.0",
   "private": false,
   "license": "MIT",
   "config": {
     "DOCKER_SERVER": ""
   },
   "scripts": {
-    "build": "ng build --prod --single-bundle --output-hashing none",
+    "build": "ng build --configuration production --single-bundle --output-hashing none",
     "build:clean": "npm run clean && npm run build",
-    "build:wvr-elements": "ng build --prod wvr-elements",
+    "build:wvr-elements": "ng build --configuration production wvr-elements",
     "build:wvr-components-style": "node scripts/build-wvr-components-style.js",
     "build:wvr-components": "node scripts/build-wvr-components.js",
     "build:wvr-components-static": "node scripts/build-wvr-components-static.js",
@@ -52,65 +52,64 @@
     "test:ci": "npm run test:audit && npm run test:coverage"
   },
   "dependencies": {
-    "@angular/animations": "^11.2.13",
-    "@angular/common": "^11.2.13",
-    "@angular/compiler": "^11.2.13",
-    "@angular/core": "^11.2.13",
-    "@angular/elements": "^11.2.13",
-    "@angular/forms": "^11.2.13",
-    "@angular/localize": "^11.2.13",
-    "@angular/platform-browser": "^11.2.13",
-    "@angular/platform-browser-dynamic": "^11.2.13",
-    "@angular/router": "^11.2.13",
-    "@ng-bootstrap/ng-bootstrap": "^9.1.0",
-    "@ngrx/effects": "^11.1.1",
-    "@ngrx/entity": "^11.1.1",
-    "@ngrx/router-store": "^11.1.1",
-    "@ngrx/store": "^11.1.1",
-    "@ngrx/store-devtools": "^11.1.1",
+    "@angular/animations": "^12.0.2",
+    "@angular/common": "^12.0.2",
+    "@angular/compiler": "^12.0.2",
+    "@angular/core": "^12.0.2",
+    "@angular/elements": "^12.0.2",
+    "@angular/forms": "^12.0.2",
+    "@angular/localize": "^12.0.2",
+    "@angular/platform-browser": "^12.0.2",
+    "@angular/platform-browser-dynamic": "^12.0.2",
+    "@angular/router": "^12.0.2",
+    "@ng-bootstrap/ng-bootstrap": "^9.1.1",
+    "@ngrx/effects": "^12.0.0",
+    "@ngrx/entity": "^12.0.0",
+    "@ngrx/router-store": "^12.0.0",
+    "@ngrx/store": "^12.0.0",
+    "@ngrx/store-devtools": "^12.0.0",
     "@tinymce/tinymce-angular": "^4.2.3",
-    "@types/json5": "^2.2.0",
+    "@ungap/custom-elements": "^1.0.0",
     "bootstrap": "^4.6.0",
     "css-element-queries": "^1.2.3",
-    "document-register-element": "^1.14.5",
     "handlebars": "^4.7.7",
     "json5": "^2.2.0",
-    "ng-inline-svg": "^12.1.0",
-    "npm": "^7.12.1",
+    "ng-inline-svg": "^13.0.0",
     "rxjs": "~6.6.7",
-    "tinymce": "^5.8.0",
+    "tinymce": "^5.8.1",
     "tslib": "^2.2.0",
     "web-animations-js": "^2.3.2",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1102.12",
-    "@angular-devkit/build-ng-packagr": "~0.1002.0",
-    "@angular-devkit/schematics": "^11.2.12",
-    "@angular/cli": "^11.2.12",
-    "@angular/compiler-cli": "^11.2.13",
-    "@angular/language-service": "^11.2.13",
+    "@angular-devkit/build-angular": "^12.0.2",
+    "@angular-devkit/schematics": "^12.0.2",
+    "@angular/cli": "^12.0.2",
+    "@angular/compiler-cli": "^12.0.2",
+    "@angular/language-service": "^12.0.2",
     "@compodoc/compodoc": "^1.1.11",
     "@lhci/cli": "^0.7.2",
-    "@ngrx/schematics": "^11.1.1",
+    "@ngrx/schematics": "^12.0.0",
     "@pickra/copy-code-block": "^1.2.0",
-    "@types/jasmine": "~3.7.2",
+    "@types/jasmine": "~3.7.6",
     "@types/jasminewd2": "~2.0.9",
-    "@types/node": "^15.0.2",
+    "@types/json5": "^2.2.0",
+    "@types/node": "^15.6.1",
     "angular-tslint-rules": "^1.20.4",
     "chalk": "^4.1.1",
-    "chrome-launcher": "^0.13.4",
+    "chrome-launcher": "^0.14.0",
     "codelyzer": "^6.0.2",
     "concat": "^1.0.3",
     "console-stamp": "^3.0.2",
     "coveralls": "^3.1.0",
     "dotenv-override": "^5.0.1",
     "dotenv-override-true": "^6.2.2",
+    "fs-extra": "^10.0.0",
     "glob": "^7.1.7",
     "handlebars-loader": "^1.7.1",
     "jasmine-core": "~3.7.1",
     "jasmine-spec-reporter": "~7.0.0",
-    "jsdom": "^16.5.3",
+    "jsdom": "^16.6.0",
     "karma": "^6.3.2",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "^2.0.3",
@@ -118,17 +117,16 @@
     "karma-jasmine": "~4.0.1",
     "karma-jasmine-html-reporter": "^1.6.0",
     "karma-ng-html2js-preprocessor": "^1.0.0",
-    "lighthouse": "^7.4.0",
-    "lighthouse-badges": "^1.1.4",
-    "ng-packagr": "^11.2.4",
-    "ngx-build-plus": "^11.0.0",
+    "lighthouse": "^7.5.0",
+    "lighthouse-badges": "^1.1.5",
+    "ng-packagr": "^12.0.2",
+    "ngx-build-plus": "^12.0.1",
     "protractor": "~7.0.0",
     "rimraf": "^3.0.2",
     "shelljs": "^0.8.4",
     "static-server": "^2.2.1",
-    "ts-loader": "^9.1.2",
-    "ts-node": "~9.1.1",
+    "ts-node": "~10.0.0",
     "tslint": "~6.1.3",
-    "typescript": "~4.0.7"
+    "typescript": "~4.2.4"
   }
 }
diff --git a/projects/wvr-elements/ng-package.json b/projects/wvr-elements/ng-package.json
index c0b2affb8..3f8956184 100644
--- a/projects/wvr-elements/ng-package.json
+++ b/projects/wvr-elements/ng-package.json
@@ -2,10 +2,20 @@
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../../dist/wvr-elements",
   "lib": {
-    "entryFile": "src/public-api.ts"
+    "entryFile": "src/public-api.ts",
+    "umdModuleIds": {
+      "@ngrx/effects": "effects",
+      "@ngrx/entity": "entity",
+      "@ngrx/store": "store",
+      "@ngrx/store-devtools": "storeDevtools",
+      "@ng-bootstrap/ng-bootstrap": "ngBootstrap",
+      "@tinymce/tinymce-angular": "tinymceAngular",
+      "css-element-queries": "cssElementQueries",
+      "handlebars/dist/cjs/handlebars": "Handlebars",
+      "json5": "JSON5",
+      "ng-inline-svg": "ngInlineSvg",
+      "tinymce": "tinymce"
+    }
   },
-  "allowedNonPeerDependencies": [
-    "css-element-queries",
-    "handlebars"
-  ]
+  "allowedNonPeerDependencies": []
 }
diff --git a/projects/wvr-elements/package.json b/projects/wvr-elements/package.json
index feba165f6..0d96b88ea 100644
--- a/projects/wvr-elements/package.json
+++ b/projects/wvr-elements/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wvr/elements",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "description": "Collection of angular components for Weaver's Custom Web Component UI",
   "author": "Texas A&M University Libraries",
   "private": false,
@@ -20,16 +20,16 @@
     "web components"
   ],
   "license": "MIT",
-  "dependencies": {
-    "css-element-queries": "^1.2.3",
-    "tslib": "^2.0.3",
-    "handlebars": "^4.7.6"
-  },
   "bin": {
     "wvr-ud": "./scripts/build-wvr-ud.js"
   },
+  "dependencies": {
+    "tslib": "^2.2.0"
+  },
   "peerDependencies": {
-    "@angular/common": "^11.0.3",
-    "@angular/core": "^11.0.3"
+    "@angular/common": "^12.0.1",
+    "@angular/core": "^12.0.1",
+    "css-element-queries": "^1.2.3",
+    "handlebars": "^4.7.7"
   }
 }
diff --git a/projects/wvr-elements/src/lib/core/action-registry.service.ts b/projects/wvr-elements/src/lib/core/action-registry.service.ts
index d9e0b2478..4718fbeb6 100644
--- a/projects/wvr-elements/src/lib/core/action-registry.service.ts
+++ b/projects/wvr-elements/src/lib/core/action-registry.service.ts
@@ -9,7 +9,7 @@ import { actions } from './actions';
 })
 export class ActionRegistryService {
 
-  private actions: any;
+  private readonly actions: any;
 
   constructor() {
     this.actions = { ...actions };
diff --git a/projects/wvr-elements/src/lib/core/actions.ts b/projects/wvr-elements/src/lib/core/actions.ts
index 3e6ffd7e0..8296486a6 100644
--- a/projects/wvr-elements/src/lib/core/actions.ts
+++ b/projects/wvr-elements/src/lib/core/actions.ts
@@ -1,10 +1,12 @@
 import * as Manifest from './manifest/manifest.actions';
+import * as Layout from './layout/layout.actions';
 import * as Modal from './modal/modal.actions';
 import * as Rest from './rest/rest.actions';
 import * as Theme from './theme/theme.actions';
 import * as Wysiwyg from './wysiwyg/wysiwyg.actions';
 
 export const actions = {
+  Layout,
   Manifest,
   Modal,
   Rest,
diff --git a/projects/wvr-elements/src/lib/core/layout/layout.actions.ts b/projects/wvr-elements/src/lib/core/layout/layout.actions.ts
new file mode 100644
index 000000000..2b4a2135c
--- /dev/null
+++ b/projects/wvr-elements/src/lib/core/layout/layout.actions.ts
@@ -0,0 +1,6 @@
+import { createAction, props } from '@ngrx/store';
+
+export const setIsMobile = createAction(
+  '[Layout] Set Mobile',
+  props<{ isMobile: boolean }>()
+);
diff --git a/projects/wvr-elements/src/lib/core/layout/layout.effects.ts b/projects/wvr-elements/src/lib/core/layout/layout.effects.ts
new file mode 100644
index 000000000..b65eb3edf
--- /dev/null
+++ b/projects/wvr-elements/src/lib/core/layout/layout.effects.ts
@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { createEffect, OnInitEffects } from '@ngrx/effects';
+import { Action, select, Store } from '@ngrx/store';
+import { fromEvent } from 'rxjs';
+import { switchMap, withLatestFrom } from 'rxjs/operators';
+import { RootState, selectIsMobileLayout } from '../store';
+import * as LayoutActions from './layout.actions';
+
+@Injectable()
+export class LayoutEffects implements OnInitEffects {
+
+  constructor(private readonly store: Store<RootState>) {
+
+  }
+
+  resize = createEffect(() => fromEvent(window, 'resize')
+    .pipe(
+      withLatestFrom(this.store.pipe(select(selectIsMobileLayout))),
+      switchMap(([event, isMobile]) => isMobile !== this.isMobile()
+        ? [this.ngrxOnInitEffects()]
+        : [])
+    )
+  );
+
+  ngrxOnInitEffects(): Action {
+    return LayoutActions.setIsMobile({
+      isMobile: this.isMobile()
+    });
+  }
+
+  /** A mapping method to map resize events to boolean.  */
+  private readonly isMobile = (): boolean => window.innerWidth < 992;
+
+}
diff --git a/projects/wvr-elements/src/lib/core/layout/layout.reducers.ts b/projects/wvr-elements/src/lib/core/layout/layout.reducers.ts
new file mode 100644
index 000000000..ce95daf82
--- /dev/null
+++ b/projects/wvr-elements/src/lib/core/layout/layout.reducers.ts
@@ -0,0 +1,22 @@
+import { createReducer, on } from '@ngrx/store';
+import { Layout } from './layout';
+import * as LayoutActions from './layout.actions';
+
+export interface State {
+  layout: Layout;
+}
+
+export const initialState: State = {
+  layout: { isMobile: false }
+};
+
+export const reducer = createReducer(
+  initialState,
+  on(LayoutActions.setIsMobile, (state, { isMobile }) => ({
+    ...state,
+    layout: {
+      ...state.layout,
+      isMobile
+    }
+  }))
+);
diff --git a/projects/wvr-elements/src/lib/core/layout/layout.ts b/projects/wvr-elements/src/lib/core/layout/layout.ts
new file mode 100644
index 000000000..010ad5437
--- /dev/null
+++ b/projects/wvr-elements/src/lib/core/layout/layout.ts
@@ -0,0 +1,3 @@
+export interface Layout {
+  isMobile: boolean;
+}
diff --git a/projects/wvr-elements/src/lib/core/manifest/manifest-entry-request.ts b/projects/wvr-elements/src/lib/core/manifest/manifest-entry-request.ts
index c5943681a..8e7feb094 100644
--- a/projects/wvr-elements/src/lib/core/manifest/manifest-entry-request.ts
+++ b/projects/wvr-elements/src/lib/core/manifest/manifest-entry-request.ts
@@ -8,7 +8,7 @@ export interface ManifestEntryRequest {
   method?: RequestMethod;
   body?: any;
   options?: RequestOptions;
-  decode?: string[];
+  decode?: Array<string>;
   bodyHttpParams?: 'fromObject' | 'fromString';
   onSuccess?: Array<Action>;
   onFailure?: Array<Action>;
diff --git a/projects/wvr-elements/src/lib/core/manifest/manifest.effects.ts b/projects/wvr-elements/src/lib/core/manifest/manifest.effects.ts
index d913576b2..12d0063e9 100644
--- a/projects/wvr-elements/src/lib/core/manifest/manifest.effects.ts
+++ b/projects/wvr-elements/src/lib/core/manifest/manifest.effects.ts
@@ -12,7 +12,10 @@ import * as ManifestActions from './manifest.actions';
 @Injectable()
 export class ManifestEffects {
 
-  constructor(private readonly actions: Actions, private readonly store: Store<RootState>) {
+  constructor(
+    private readonly actions: Actions,
+    private readonly store: Store<RootState>
+  ) {
 
   }
 
@@ -39,9 +42,18 @@ export class ManifestEffects {
           return ManifestActions.queueRequest({ request });
         }
 
+        let path = entry.path;
+        if (!!request.options.pathVariables) {
+          const pathVariables = new Map<string, string>(Object.entries(request.options.pathVariables));
+          pathVariables.forEach((v, k) => {
+            path = path.split(`:${k}`)
+              .join(v);
+          });
+        }
+
         const method = request.method ? request.method : entry.methods[0];
         // TODO: validate method with allowed methods on manifests entry
-        const url = manifest.baseUrl + entry.path;
+        const url = manifest.baseUrl + path;
         const options = { ...entry.options, ...request.options };
         const onSuccess = request.onSuccess ? request.onSuccess : [];
         const onFailure = request.onFailure ? request.onFailure : [];
diff --git a/projects/wvr-elements/src/lib/core/mobile.service.spec.ts b/projects/wvr-elements/src/lib/core/mobile.service.spec.ts
deleted file mode 100644
index 11d355690..000000000
--- a/projects/wvr-elements/src/lib/core/mobile.service.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { StoreModule } from '@ngrx/store';
-
-import { MobileService } from './mobile.service';
-import { metaReducers, ROOT_REDUCER } from './store';
-
-describe('MobileService', () => {
-  let service: MobileService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [BrowserAnimationsModule, StoreModule.forRoot(ROOT_REDUCER, { metaReducers })]
-    });
-    service = TestBed.inject(MobileService);
-  });
-
-  it('should be created', () => {
-    expect(service)
-      .toBeTruthy();
-  });
-});
diff --git a/projects/wvr-elements/src/lib/core/mobile.service.ts b/projects/wvr-elements/src/lib/core/mobile.service.ts
deleted file mode 100644
index 67794f193..000000000
--- a/projects/wvr-elements/src/lib/core/mobile.service.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Injectable } from '@angular/core';
-import { fromEvent, Observable } from 'rxjs';
-import { map, throttleTime } from 'rxjs/operators';
-
-/**
- * A centralized uitlity for logic conerning mobile layout.
- */
-@Injectable({
-  providedIn: 'root'
-})
-export class MobileService {
-
-  /** Indicates the layout state of the viewport. */
-  isMobileLayout: boolean;
-
-  /** An observable used for resize events. */
-  private readonly screenSizeChanged$: Observable<boolean>;
-
-  constructor() {
-    this.screenSizeChanged$ = fromEvent(window, 'resize')
-    .pipe(throttleTime(100))
-    .pipe(map(this.checkScreenSize));
-
-    this.screenSizeChanged$.subscribe(iml => {
-      this.isMobileLayout = iml;
-    });
-
-    this.isMobileLayout = this.checkScreenSize();
-  }
-
-  /** A mapping method to map resize events to boolean.  */
-  private readonly checkScreenSize = () => window.innerWidth < 992;
-
-}
diff --git a/projects/wvr-elements/src/lib/core/modal/modal.actions.ts b/projects/wvr-elements/src/lib/core/modal/modal.actions.ts
index bbe9005c2..a17d96567 100644
--- a/projects/wvr-elements/src/lib/core/modal/modal.actions.ts
+++ b/projects/wvr-elements/src/lib/core/modal/modal.actions.ts
@@ -1,8 +1,6 @@
-import { Update } from '@ngrx/entity';
 import { createAction, props } from '@ngrx/store';
-import { WvrModalComponent } from '../../wvr-modal/wvr-modal.component';
 import { Modal } from './modal';
 
 export const addModal = createAction('[Modal] Add Modal', props<{ modal: Modal }>());
-export const openModal = createAction('[Modal] Open Modal', props<{id: string}>());
-export const closeModal = createAction('[Modal] Close Modal', props<{id: string}>());
+export const openModal = createAction('[Modal] Open Modal', props<{ id: string }>());
+export const closeModal = createAction('[Modal] Close Modal', props<{ id: string }>());
diff --git a/projects/wvr-elements/src/lib/core/modal/modal.effects.ts b/projects/wvr-elements/src/lib/core/modal/modal.effects.ts
index 4411e0622..bb275ae4c 100644
--- a/projects/wvr-elements/src/lib/core/modal/modal.effects.ts
+++ b/projects/wvr-elements/src/lib/core/modal/modal.effects.ts
@@ -1,18 +1,11 @@
-import { trigger } from '@angular/animations';
 import { Injectable } from '@angular/core';
-import { act, Actions, createEffect, ofType } from '@ngrx/effects';
-import { map } from 'rxjs/operators';
-import * as ModalActions from './modal.actions';
-import { ModalService } from './modal.service';
+import { Actions } from '@ngrx/effects';
 
 @Injectable()
 export class ModalEffects {
 
-  constructor(
-    private readonly actions: Actions,
-    private readonly modalService: ModalService
-  ) {
+  constructor(private readonly actions: Actions) {
 
- }
+  }
 
 }
diff --git a/projects/wvr-elements/src/lib/core/modal/modal.service.spec.ts b/projects/wvr-elements/src/lib/core/modal/modal.service.spec.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/projects/wvr-elements/src/lib/core/modal/modal.service.ts b/projects/wvr-elements/src/lib/core/modal/modal.service.ts
deleted file mode 100644
index f61018efd..000000000
--- a/projects/wvr-elements/src/lib/core/modal/modal.service.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ModalService {
-
-}
diff --git a/projects/wvr-elements/src/lib/core/rest/request-options.ts b/projects/wvr-elements/src/lib/core/rest/request-options.ts
index 8a3dc8cd1..1728bddd9 100644
--- a/projects/wvr-elements/src/lib/core/rest/request-options.ts
+++ b/projects/wvr-elements/src/lib/core/rest/request-options.ts
@@ -1,9 +1,10 @@
-import { HttpParams } from "@angular/common/http";
+import { HttpParams } from '@angular/common/http';
 
 export interface RequestOptions {
   headers?: { [header: string]: string | Array<string>; };
   observe?: 'body' | 'response' | 'events';
   params?: HttpParams | { [param: string]: string | Array<string>; };
+  pathVariables?: { [pathKey: string]: string; };
   reportProgress?: boolean;
   responseType?: 'arraybuffer' | 'blob' | 'text' | 'json';
   withCredentials?: boolean;
diff --git a/projects/wvr-elements/src/lib/core/rest/request.ts b/projects/wvr-elements/src/lib/core/rest/request.ts
index b46ac491d..76dd66a92 100644
--- a/projects/wvr-elements/src/lib/core/rest/request.ts
+++ b/projects/wvr-elements/src/lib/core/rest/request.ts
@@ -9,6 +9,6 @@ export interface Request {
   body?: any;
   options?: RequestOptions;
   map?: map;
-  decode?: string[];
+  decode?: Array<string>;
   bodyHttpParams?: 'fromObject' | 'fromString';
 }
diff --git a/projects/wvr-elements/src/lib/core/rest/rest.service.ts b/projects/wvr-elements/src/lib/core/rest/rest.service.ts
index 5866b2ba1..13fde83c9 100644
--- a/projects/wvr-elements/src/lib/core/rest/rest.service.ts
+++ b/projects/wvr-elements/src/lib/core/rest/rest.service.ts
@@ -56,9 +56,9 @@ export class RestService {
         }
 
         if (request.bodyHttpParams) {
-          const options: HttpParamsOptions = {};
-          options[request.bodyHttpParams] = body;
-          body = new HttpParams(options);
+          const httpParamsOptions: HttpParamsOptions = {};
+          httpParamsOptions[request.bodyHttpParams] = body;
+          body = new HttpParams(httpParamsOptions);
         }
 
         return callback(request.url, body, options);
diff --git a/projects/wvr-elements/src/lib/core/store.ts b/projects/wvr-elements/src/lib/core/store.ts
index cd97a692a..815fa4ae1 100644
--- a/projects/wvr-elements/src/lib/core/store.ts
+++ b/projects/wvr-elements/src/lib/core/store.ts
@@ -8,22 +8,34 @@ import { ManifestEntry } from './manifest/manifest-entry';
 import * as fromManifest from './manifest/manifest.reducers';
 import * as fromRest from './rest/rest.reducers';
 import * as fromTheme from './theme/theme.reducers';
+import * as fromLayout from './layout/layout.reducers';
 import * as fromModal from './modal/modal.reducers';
 import * as fromWysiwyg from './wysiwyg/wysiwyg.reducers';
 
 export interface RootState {
+  layout: fromLayout.State;
   manifests: fromManifest.State;
+  modals: fromModal.State;
   rest: fromRest.State;
   theme: fromTheme.State;
-  modals: fromModal.State;
   wysiwyg: fromWysiwyg.State;
 }
 
+export const initialState: RootState = {
+  layout: fromLayout.initialState,
+  manifests: fromManifest.initialState,
+  modals: fromModal.initialState,
+  rest: fromRest.initialState,
+  theme: fromTheme.initialState,
+  wysiwyg: fromWysiwyg.initialState
+};
+
 export const reducers: ActionReducerMap<RootState> = {
+  layout: fromLayout.reducer,
   manifests: fromManifest.reducer,
+  modals: fromModal.reducer,
   rest: fromRest.reducer,
   theme: fromTheme.reducer,
-  modals: fromModal.reducer,
   wysiwyg: fromWysiwyg.reducer
 };
 
@@ -58,14 +70,17 @@ export const selectManifestNames = createSelector(
   selectManifestState,
   fromManifest.selectManifestNames
 );
+
 export const selectManifestEntities = createSelector(
   selectManifestState,
   fromManifest.selectManifestEntities
 );
+
 export const selectAllManifests = createSelector(
   selectManifestState,
   fromManifest.selectAllManifests
 );
+
 export const selectManifestTotal = createSelector(
   selectManifestState,
   fromManifest.selectManifestTotal
@@ -122,15 +137,28 @@ export const selectCurrentTheme = createSelector(
   (themeState: fromTheme.State) => themeState.themes[themeState.currentTheme]
 );
 
+// layout selectors
+export const selectLayoutState = createFeatureSelector<RootState, fromLayout.State>('layout');
+
+// TODO - determine how to pass states into tests without requiring null checks.
+export const selectIsMobileLayout = createSelector(
+  selectLayoutState,
+  (layoutState: fromLayout.State) => layoutState?.layout.isMobile
+);
+
+// modal selectors
 export const selectModalState = createFeatureSelector<RootState, fromModal.State>('modals');
 
 export const selectModalByName = (modalName: string) => createSelector(
   selectModalState,
-  modals => modals.entities[modalName]
+  (modalState: fromModal.State) => modalState.entities[modalName]
 );
+
 // wysiwyg selectors
 export const selectWysiwygState = createFeatureSelector<RootState, fromWysiwyg.State>('wysiwyg');
 
-// TODO - states not to be undefined during testing.
-export const selectWysiwygById = (id: string) =>
-  createSelector(selectWysiwygState, (wysiwygState: fromWysiwyg.State) => wysiwygState ? wysiwygState.entities[id] : undefined);
+// TODO - determine how to pass states into tests without requiring null checks.
+export const selectWysiwygById = (id: string) => createSelector(
+  selectWysiwygState,
+  (wysiwygState: fromWysiwyg.State) => wysiwygState?.entities[id]
+);
diff --git a/projects/wvr-elements/src/lib/core/template.service.spec.ts b/projects/wvr-elements/src/lib/core/template.service.spec.ts
deleted file mode 100644
index 5d4a44184..000000000
--- a/projects/wvr-elements/src/lib/core/template.service.spec.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { StoreModule } from '@ngrx/store';
-import { APP_CONFIG, testAppConfig } from '../shared/config';
-import { WvrBaseComponent } from '../shared/wvr-base.component';
-import { WvrItWorksComponent } from '../wvr-it-works/wvr-it-works.component';
-import { WvrDataSelect } from './data-select';
-import { metaReducers, ROOT_REDUCER } from './store';
-import { TemplateService } from './template.service';
-
-describe('TemplateService', () => {
-  let service: TemplateService<WvrBaseComponent>;
-  let component: WvrItWorksComponent;
-  let projectedContent: HTMLElement;
-  let fixture: ComponentFixture<WvrItWorksComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [BrowserAnimationsModule, StoreModule.forRoot(ROOT_REDUCER, { metaReducers })],
-      declarations: [WvrItWorksComponent],
-      providers: [{
-        provide: APP_CONFIG,
-        useValue: testAppConfig
-      }],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
-    });
-    service = TestBed.inject(TemplateService);
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(WvrItWorksComponent);
-    component = fixture.componentInstance;
-    projectedContent = document.createElement('template');
-    projectedContent.setAttribute('wvr-compile', 'true');
-    projectedContent.innerHTML = '<p class="projected-content">{{data.test}}</p>';
-
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(service)
-      .toBeTruthy();
-  });
-
-  it('should compile a template', () => {
-    const testData = {test: 'foo'};
-    const testSelect: WvrDataSelect = {
-      as: 'data',
-      entry: undefined,
-      manifest: undefined
-    };
-    const elem = fixture.elementRef.nativeElement as HTMLElement;
-    elem.appendChild(projectedContent);
-    service.compile(testData, testSelect, elem, projectedContent);
-
-    expect(elem.querySelector('p.projected-content').innerHTML)
-      .toEqual(testData.test);
-  });
-
-});
diff --git a/projects/wvr-elements/src/lib/core/template.service.ts b/projects/wvr-elements/src/lib/core/template.service.ts
deleted file mode 100644
index 7e9cd838d..000000000
--- a/projects/wvr-elements/src/lib/core/template.service.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-/* istanbul ignore file */
-
-/* TODO: Issue #292. */
-import { Injectable } from '@angular/core';
-import Handlebars from 'handlebars/dist/cjs/handlebars';
-import * as JSON5 from 'json5';
-import { WvrDataSelect } from './data-select';
-import { initializeHandlebarHelpers } from './handlebars-helpers';
-import { WvrDataComponent } from '../shared/wvr-data.component';
-import { wvrTimeout } from '../shared/utility';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class TemplateService<T extends WvrDataComponent> {
-
-  constructor() {
-    initializeHandlebarHelpers({});
-  }
-
-  parseProjectedContent(component: T, elem: HTMLElement): void {
-    if (!component.hasWvrData()) {
-      return;
-    }
-
-    wvrTimeout(() => {
-      const projectedContentElem = elem.querySelector('template[wvr-compile]');
-      if (!projectedContentElem) {
-        return;
-      }
-      const valueParsed = JSON5.parse(component.getWvrData());
-      const wvrDataSelects: Array<any> = Array.isArray(valueParsed) ? valueParsed : [valueParsed];
-
-      wvrDataSelects
-        .filter((s: WvrDataSelect) => !!s.manifest && !!s.entry && !!s.as)
-        .forEach((s: WvrDataSelect) => {
-          component.data[s.as].subscribe(d => {
-            this.compile(d, s, elem, projectedContentElem as HTMLElement);
-          });
-        });
-    });
-  }
-
-  compile(d: {}, s: WvrDataSelect, elem: HTMLElement, projectedContentElem: HTMLElement): void {
-    const data = {};
-    data[s.as] = d;
-    const compiledContent = Handlebars.compile(projectedContentElem.innerHTML)(data);
-    projectedContentElem.outerHTML = compiledContent;
-  }
-
-}
diff --git a/projects/wvr-elements/src/lib/core/theme/theme.service.ts b/projects/wvr-elements/src/lib/core/theme/theme.service.ts
index b3f5ddbe5..a2bc4a01b 100644
--- a/projects/wvr-elements/src/lib/core/theme/theme.service.ts
+++ b/projects/wvr-elements/src/lib/core/theme/theme.service.ts
@@ -5,7 +5,7 @@ import { Injectable } from '@angular/core';
 import { select, Store } from '@ngrx/store';
 import { filter } from 'rxjs/operators';
 import { ThemeVariants } from '../../shared/theme';
-import { hexToRgb, luminance, mix, yiq } from '../../shared/utility/color.utlity';
+import { hexToRgb, luminance, mix, yiq } from '../../shared/utility/color.utility';
 import { WvrThemeableComponent } from '../../shared/wvr-themeable.component';
 import { RootState, selectThemeState } from '../store';
 
diff --git a/projects/wvr-elements/src/lib/core/wvr-core.module.ts b/projects/wvr-elements/src/lib/core/wvr-core.module.ts
index 7a31dda31..303fd7bb7 100644
--- a/projects/wvr-elements/src/lib/core/wvr-core.module.ts
+++ b/projects/wvr-elements/src/lib/core/wvr-core.module.ts
@@ -6,6 +6,7 @@ import { EffectsModule } from '@ngrx/effects';
 import { StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { InlineSVGModule } from 'ng-inline-svg';
+import { WvrElementDesc } from '../shared/utility/bootstrap.utility';
 import { WvrAlertComponent } from '../wvr-alert/wvr-alert.component';
 import { WvrButtonComponent } from '../wvr-button/wvr-button.component';
 import { WvrCardComponent } from '../wvr-card/wvr-card.component';
@@ -30,38 +31,37 @@ import { WvrWysiwygComponent } from '../wvr-wysiwyg/wvr-wysiwyg.component';
 import { ActionRegistryService } from './action-registry.service';
 import { AnimationService } from './animation.service';
 import { ComponentRegistryService } from './component-registry.service';
+import { LayoutEffects } from './layout/layout.effects';
 import { ManifestEffects } from './manifest/manifest.effects';
-import { MobileService } from './mobile.service';
 import { RestEffects } from './rest/rest.effects';
 import { metaReducers, ROOT_REDUCER } from './store';
-import { TemplateService } from './template.service';
 import { ThemeEffects } from './theme/theme.effects';
 import { ThemeService } from './theme/theme.service';
 import { WysiwygEffects } from './wysiwyg/wysiwyg.effects';
 
 /** This property contains a list of components and the selector tags. */
-export const WVR_ELEMENTS = [
-  { component: WvrAlertComponent, selector: 'wvre-alert' },
-  { component: WvrButtonComponent, selector: 'wvre-button' },
-  { component: WvrCardComponent, selector: 'wvre-card' },
-  { component: WvrColorPreviewComponent, selector: 'wvre-color-preview' },
-  { component: WvrDropdownComponent, selector: 'wvre-dropdown' },
-  { component: WvrFooterComponent, selector: 'wvre-footer' },
-  { component: WvrHeaderComponent, selector: 'wvre-header' },
-  { component: WvrIconComponent, selector: 'wvre-icon' },
-  { component: WvrItWorksComponent, selector: 'wvre-it-works' },
-  { component: WvrListComponent, selector: 'wvre-list' },
-  { component: WvrListItemComponent, selector: 'wvre-list-item' },
-  { component: WvrNavListComponent, selector: 'wvre-nav-list' },
-  { component: WvrManifestComponent, selector: 'wvre-manifest' },
-  { component: WvrManifestEntryComponent, selector: 'wvre-manifest-entry' },
-  { component: WvrModalComponent, selector: 'wvre-modal' },
-  { component: WvrNavLiComponent, selector: 'wvre-nav-li' },
-  { component: WvrTextComponent, selector: 'wvre-text' },
-  { component: WvrTabsComponent, selector: 'wvre-tabs' },
-  { component: WvrTabComponent, selector: 'wvre-tab' },
-  { component: WvrThemeComponent, selector: 'wvre-theme' },
-  { component: WvrWysiwygComponent, selector: 'wvre-wysiwyg' }
+export const WVR_ELEMENTS: Array<WvrElementDesc> = [
+  { component: WvrAlertComponent, selector: 'wvre-alert', lazy: true },
+  { component: WvrButtonComponent, selector: 'wvre-button', lazy: true },
+  { component: WvrCardComponent, selector: 'wvre-card', lazy: true },
+  { component: WvrColorPreviewComponent, selector: 'wvre-color-preview', lazy: true },
+  { component: WvrDropdownComponent, selector: 'wvre-dropdown', lazy: true },
+  { component: WvrFooterComponent, selector: 'wvre-footer', lazy: true },
+  { component: WvrHeaderComponent, selector: 'wvre-header', lazy: true },
+  { component: WvrIconComponent, selector: 'wvre-icon', lazy: true },
+  { component: WvrItWorksComponent, selector: 'wvre-it-works', lazy: true },
+  { component: WvrListComponent, selector: 'wvre-list', lazy: true },
+  { component: WvrListItemComponent, selector: 'wvre-list-item', lazy: true },
+  { component: WvrNavListComponent, selector: 'wvre-nav-list', lazy: true },
+  { component: WvrManifestComponent, selector: 'wvre-manifest', lazy: false },
+  { component: WvrManifestEntryComponent, selector: 'wvre-manifest-entry', lazy: false },
+  { component: WvrModalComponent, selector: 'wvre-modal', lazy: true },
+  { component: WvrNavLiComponent, selector: 'wvre-nav-li', lazy: true },
+  { component: WvrTextComponent, selector: 'wvre-text', lazy: true },
+  { component: WvrTabsComponent, selector: 'wvre-tabs', lazy: true },
+  { component: WvrTabComponent, selector: 'wvre-tab', lazy: true },
+  { component: WvrThemeComponent, selector: 'wvre-theme', lazy: false },
+  { component: WvrWysiwygComponent, selector: 'wvre-wysiwyg', lazy: true }
 ];
 
 export const registerCustomElements = (injector: Injector, elements: Array<{ component: any, selector: string }>) => {
@@ -85,6 +85,7 @@ export const showHiddentContent = (injector: Injector) => {
 const MODULES: Array<any> = [
   EffectsModule.forRoot([
     ManifestEffects,
+    LayoutEffects,
     RestEffects,
     ThemeEffects,
     WysiwygEffects
@@ -102,9 +103,7 @@ const PROVIDERS = [
   AnimationService,
   ActionRegistryService,
   ComponentRegistryService,
-  MobileService,
-  ThemeService,
-  TemplateService
+  ThemeService
 ];
 
 @NgModule({
diff --git a/projects/wvr-elements/src/lib/shared/pipes/default.pipe.ts b/projects/wvr-elements/src/lib/shared/pipes/default.pipe.ts
index 025caad88..1092dfaf9 100644
--- a/projects/wvr-elements/src/lib/shared/pipes/default.pipe.ts
+++ b/projects/wvr-elements/src/lib/shared/pipes/default.pipe.ts
@@ -1,7 +1,8 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
-  name: 'default'
+  name: 'default',
+  pure: true
 })
 export class DefaultPipe implements PipeTransform {
 
diff --git a/projects/wvr-elements/src/lib/shared/pipes/safe.pipe.ts b/projects/wvr-elements/src/lib/shared/pipes/safe.pipe.ts
index 717162366..dbb3509c5 100644
--- a/projects/wvr-elements/src/lib/shared/pipes/safe.pipe.ts
+++ b/projects/wvr-elements/src/lib/shared/pipes/safe.pipe.ts
@@ -5,7 +5,8 @@ import { Pipe, PipeTransform } from '@angular/core';
 import { DomSanitizer, SafeHtml, SafeResourceUrl, SafeScript, SafeStyle, SafeUrl } from '@angular/platform-browser';
 
 @Pipe({
-  name: 'safe'
+  name: 'safe',
+  pure: true
 })
 export class SafePipe implements PipeTransform {
 
diff --git a/projects/wvr-elements/src/lib/shared/styles/_wvr-elements.scss b/projects/wvr-elements/src/lib/shared/styles/_wvr-elements.scss
new file mode 100644
index 000000000..74cbe81bf
--- /dev/null
+++ b/projects/wvr-elements/src/lib/shared/styles/_wvr-elements.scss
@@ -0,0 +1,73 @@
+.wvr-components-loading {
+  opacity: 0;
+}
+
+.wvr-hidden,
+[wvr-hide-content] {
+  display: none;
+}
+
+div[element="wvre-header"],
+wvre-header {
+  min-height: 170px;
+}
+
+div[element="wvre-footer"],
+wvre-footer {
+  min-height: 40px;
+}
+
+div[element="wvre-wysiwyg"],
+wvre-wysiwyg {
+  min-height: 200px;
+}
+
+div[element="wvre-it-works"],
+wvre-it-works {
+  min-height: 200px;
+}
+
+div[element="wvre-card"],
+wvre-card {
+  min-height: 40px;
+}
+
+div[element="wvre-color-preview"],
+wvre-color-preview {
+  min-height: 20px;
+}
+
+div[element="wvre-alert"],
+wvre-alert {
+  min-height: 10px;
+}
+
+div[element="wvre-list-item"],
+wvre-list-item {
+  min-height: 10px;
+}
+
+div[element="wvre-nav-li"],
+wvre-nav-li {
+  min-height: 10px;
+}
+
+div[element="wvre-tab"],
+wvre-tab {
+  min-height: 10px;
+}
+
+div[element="wvre-button"],
+wvre-button {
+  min-height: 20px;
+}
+
+div[element="wvre-icon"],
+wvre-icon {
+  min-height: 20px;
+}
+
+div[element="wvre-text"],
+wvre-text {
+  min-height: 20px;
+}
diff --git a/projects/wvr-elements/src/lib/shared/utility/bootstrap.utility.ts b/projects/wvr-elements/src/lib/shared/utility/bootstrap.utility.ts
index 75715e82c..e210cee5a 100644
--- a/projects/wvr-elements/src/lib/shared/utility/bootstrap.utility.ts
+++ b/projects/wvr-elements/src/lib/shared/utility/bootstrap.utility.ts
@@ -1,9 +1,17 @@
 /* istanbul ignore file */
 
 /* TODO: Issue #292. */
-import { Type } from '@angular/core';
+import { Injector, Type } from '@angular/core';
+import { createCustomElement } from '@angular/elements';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppConfig, APP_CONFIG } from '../config';
+import { wvrTimeout } from './timing.utility';
+
+interface WvrElementDesc {
+  component: any;
+  selector: string;
+  lazy: boolean;
+}
 
 const componentScript = document.currentScript;
 
@@ -25,9 +33,102 @@ const weaverBootstrap = (module: Type<unknown>) => (configPath: string) => fetch
     useValue: appConfig
   }])
     .bootstrapModule(module)
-    .catch((err: any) => { console.error(err); }));
+    .then(showWeaverElements)
+    .catch((err: any) => {
+      console.error(err);
+    }));
+
+const lazyLoadWeaverElement = (element: HTMLElement, selectors: Array<string>): boolean => {
+  if (selectors.indexOf(element.parentNode.nodeName) >= 0) {
+    return false;
+  }
+  if (element.parentNode.nodeName === 'BODY') {
+    return true;
+  }
+
+  return lazyLoadWeaverElement(element.parentNode as HTMLElement, selectors);
+};
+
+/** Lazy load weaver elements. */
+const registerWeaverElements = (injector: Injector, wvrElements: Array<WvrElementDesc>) => {
+  // filter for selectors of elements to lazy load
+  const selectors = wvrElements.filter(wvrElement => wvrElement.lazy)
+    .map(wvrElement => wvrElement.selector.toUpperCase());
+
+  // wrap elements that do not have weaver element as parent in div and template
+  // div to specify class to target for min-height
+  // template to prevent render of weaver element
+  wvrElements
+    .filter(wvrElement => wvrElement.lazy)
+    .forEach(wvrElement => {
+      Array.from(document.getElementsByTagName(wvrElement.selector))
+        .forEach(element => {
+          if (lazyLoadWeaverElement(element as HTMLElement, selectors)) {
+            const div = document.createElement('div');
+            div.setAttribute('element', wvrElement.selector);
+            const template = document.createElement('template');
+            div.appendChild(template);
+            element.parentNode.replaceChild(div, element);
+            template.content.appendChild(element);
+          }
+        });
+    });
+
+  // define the weaver elements in custom browser element registry
+  wvrElements.forEach(wvrElement => {
+    try {
+      customElements.define(wvrElement.selector, createCustomElement(wvrElement.component, { injector }));
+    } catch (e) {
+      // console.warn(e);
+    }
+  });
+
+  // create observer to detect when wrapped element enters view port
+  const observer = new IntersectionObserver(entries => {
+    entries.map(entry => {
+      // when wrapped element enters view port, unwrap it and remove from observer
+      if (entry.isIntersecting) {
+        observer.unobserve(entry.target);
+        const clone = (entry.target.childNodes[0] as HTMLTemplateElement).content.cloneNode(true);
+        entry.target.parentNode.replaceChild(clone.childNodes[0], entry.target);
+      }
+    });
+  }, {
+    rootMargin: '0px 0px 5px 0px'
+  });
+
+  wvrTimeout(() => {
+    // add all wrapped weaver elements to observer
+    Array.from(document.querySelectorAll('div[element]'))
+      .forEach(element => {
+        observer.observe(element);
+      });
+  });
+};
+
+/** Show weaver elements. */
+const showWeaverElements = () => {
+  document.querySelectorAll('.wvr-components-loading:not(body)')
+    .forEach(element => {
+      element.classList.remove('wvr-components-loading');
+    });
+
+  document.querySelectorAll('[wvr-hide-content]')
+    .forEach(elem => {
+      elem.removeAttribute('wvr-hide-content');
+    });
+
+  const body = document.querySelector('body');
+  if (body) {
+    body.classList.remove('wvr-components-loading');
+    body.classList.remove('wvr-hidden');
+  }
+};
 
 export {
   obtainConfigPath,
-  weaverBootstrap
+  weaverBootstrap,
+  WvrElementDesc,
+  registerWeaverElements,
+  showWeaverElements
 };
diff --git a/projects/wvr-elements/src/lib/shared/utility/color.utility.ts b/projects/wvr-elements/src/lib/shared/utility/color.utility.ts
new file mode 100644
index 000000000..364e8ba78
--- /dev/null
+++ b/projects/wvr-elements/src/lib/shared/utility/color.utility.ts
@@ -0,0 +1,95 @@
+/* istanbul ignore file */
+
+/* TODO: Issue #292. */
+import * as nameToHex from './nameToHex.json';
+
+const expandHexShorthand = (hex: string): string => {
+  // expand shorthand form (e.g. "03f") to full form (e.g. "0033ff")
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+
+  return hex.replace(shorthandRegex, (m, r: string, g: string, b: string) => r + r + g + g + b + b);
+};
+
+const colorToHex = (rgb: string): string => {
+  // tslint:disable-next-line: max-line-length
+  const matches = rgb.match(/^(rgb\((0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d)\)|rgba\((0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0?\.\d|1(\.0)?)\)|hsl\((0|360|35\d|3[0-4]\d|[12]\d\d|0?\d?\d),(0|100|\d{1,2})%,(0|100|\d{1,2})%\)|hsla\((0|360|35\d|3[0-4]\d|[12]\d\d|0?\d?\d),(0|100|\d{1,2})%,(0|100|\d{1,2})%,(0?\.\d|1(\.0)?)\))$/);
+  // tslint:disable-next-line:newline-per-chained-call
+  const hex = x => (`0${parseInt(x, 10).toString(16)}`).slice(-2);
+
+  return (hex(matches[1]) + hex(matches[2]) + hex(matches[3])).toUpperCase();
+};
+
+const normalizeColor = (color: string): string => {
+  let value = color.trim();
+  if (value.charAt(0) !== '#') {
+    value = value.indexOf('rgb') !== 0 ? nameToHex[color] : colorToHex(color);
+  } else {
+    if (value.length === 4) {
+      value = expandHexShorthand(color);
+    }
+  }
+
+  return !!value ? value.replace(/#/g, '') : 'ffffff';
+};
+
+const hexToRgb = (hex: string): any => {
+  const value = normalizeColor(hex);
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(value);
+
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+      }
+    : undefined;
+};
+
+const mix = (baseColor: string, color: string, weight: number): string => {
+  const d2h = (d): string => d.toString(16); // convert a decimal value to hex
+  const h2d = (h): number => parseInt(h, 16); // convert a hex value to decimal
+  const w = typeof weight !== 'undefined' ? weight : 50; // set the weight to 50%, if that argument is omitted
+  let resultColor = '#';
+  for (let i = 0; i <= 5; i += 2) {
+    // loop through each of the 3 hex pairs—red, green, and blue
+    const v1 = h2d(normalizeColor(baseColor)
+      .substr(i, 2)); // extract the current pairs
+    const v2 = h2d(normalizeColor(color)
+      .substr(i, 2));
+    // combine the current pairs from each source color, according to the specified weight
+    let val = d2h(Math.round(v2 + (v1 - v2) * (w / 100)));
+    while (val.length < 2) {
+      val = `0${val}`;
+    } // prepend a '0' if val results in a single digit
+    resultColor += val; // concatenate val to our new color string
+  }
+
+  return resultColor;
+};
+
+// TODO: replace with closer match to sass darken and lighten
+const luminance = (color: string, lum: number): string => {
+  const l = lum || Number(0);
+  // convert to decimal and change luminosity
+  let rgb = '#';
+  let c: number;
+  let i: number;
+  let cs: string;
+  for (i = 0; i < 3; i++) {
+    c = parseInt(normalizeColor(color)
+      .substr(i * 2, 2), 16);
+    cs = Math.round(Math.min(Math.max(0, c + c * l), 255))
+      .toString(16);
+    rgb += (`00${cs}`).substr(cs.length);
+  }
+
+  return rgb;
+};
+
+const yiq = (color: string): number => {
+  const rgb = hexToRgb(color);
+
+  return Math.round((rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000);
+};
+
+export { hexToRgb, luminance, mix, yiq };
diff --git a/projects/wvr-elements/src/lib/shared/utility/color.utlity.ts b/projects/wvr-elements/src/lib/shared/utility/color.utlity.ts
deleted file mode 100644
index e0703ed6e..000000000
--- a/projects/wvr-elements/src/lib/shared/utility/color.utlity.ts
+++ /dev/null
@@ -1,244 +0,0 @@
-/* istanbul ignore file */
-
-/* TODO: Issue #292. */
-const nameToHex: Map<string, string> = new Map<string, string>([
-  ['aliceblue', '#f0f8ff'],
-  ['antiquewhite', '#faebd7'],
-  ['aqua', '#00ffff'],
-  ['aquamarine', '#7fffd4'],
-  ['azure', '#f0ffff'],
-  ['beige', '#f5f5dc'],
-  ['bisque', '#ffe4c4'],
-  ['black', '#000000'],
-  ['blanchedalmond', '#ffebcd'],
-  ['blue', '#0000ff'],
-  ['blueviolet', '#8a2be2'],
-  ['brown', '#a52a2a'],
-  ['burlywood', '#deb887'],
-  ['cadetblue', '#5f9ea0'],
-  ['chartreuse', '#7fff00'],
-  ['chocolate', '#d2691e'],
-  ['coral', '#ff7f50'],
-  ['cornflowerblue', '#6495ed'],
-  ['cornsilk', '#fff8dc'],
-  ['crimson', '#dc143c'],
-  ['cyan', '#00ffff'],
-  ['darkblue', '#00008b'],
-  ['darkcyan', '#008b8b'],
-  ['darkgoldenrod', '#b8860b'],
-  ['darkgray', '#a9a9a9'],
-  ['darkgreen', '#006400'],
-  ['darkgrey', '#a9a9a9'],
-  ['darkkhaki', '#bdb76b'],
-  ['darkmagenta', '#8b008b'],
-  ['darkolivegreen', '#556b2f'],
-  ['darkorange', '#ff8c00'],
-  ['darkorchid', '#9932cc'],
-  ['darkred', '#8b0000'],
-  ['darksalmon', '#e9967a'],
-  ['darkseagreen', '#8fbc8f'],
-  ['darkslateblue', '#483d8b'],
-  ['darkslategray', '#2f4f4f'],
-  ['darkslategrey', '#2f4f4f'],
-  ['darkturquoise', '#00ced1'],
-  ['darkviolet', '#9400d3'],
-  ['deeppink', '#ff1493'],
-  ['deepskyblue', '#00bfff'],
-  ['dimgray', '#696969'],
-  ['dimgrey', '#696969'],
-  ['dodgerblue', '#1e90ff'],
-  ['firebrick', '#b22222'],
-  ['floralwhite', '#fffaf0'],
-  ['forestgreen', '#228b22'],
-  ['fuchsia', '#ff00ff'],
-  ['gainsboro', '#dcdcdc'],
-  ['ghostwhite', '#f8f8ff'],
-  ['gold', '#ffd700'],
-  ['goldenrod', '#daa520'],
-  ['gray', '#808080'],
-  ['green', '#008000'],
-  ['greenyellow', '#adff2f'],
-  ['grey', '#808080'],
-  ['honeydew', '#f0fff0'],
-  ['hotpink', '#ff69b4'],
-  ['indianred', '#cd5c5c'],
-  ['indigo', '#4b0082'],
-  ['ivory', '#fffff0'],
-  ['khaki', '#f0e68c'],
-  ['lavender', '#e6e6fa'],
-  ['lavenderblush', '#fff0f5'],
-  ['lawngreen', '#7cfc00'],
-  ['lemonchiffon', '#fffacd'],
-  ['lightblue', '#add8e6'],
-  ['lightcoral', '#f08080'],
-  ['lightcyan', '#e0ffff'],
-  ['lightgoldenrodyellow', '#fafad2'],
-  ['lightgray', '#d3d3d3'],
-  ['lightgreen', '#90ee90'],
-  ['lightgrey', '#d3d3d3'],
-  ['lightpink', '#ffb6c1'],
-  ['lightsalmon', '#ffa07a'],
-  ['lightseagreen', '#20b2aa'],
-  ['lightskyblue', '#87cefa'],
-  ['lightslategray', '#778899'],
-  ['lightslategrey', '#778899'],
-  ['lightsteelblue', '#b0c4de'],
-  ['lightyellow', '#ffffe0'],
-  ['lime', '#00ff00'],
-  ['limegreen', '#32cd32'],
-  ['linen', '#faf0e6'],
-  ['magenta', '#ff00ff'],
-  ['maroon', '#800000'],
-  ['mediumaquamarine', '#66cdaa'],
-  ['mediumblue', '#0000cd'],
-  ['mediumorchid', '#ba55d3'],
-  ['mediumpurple', '#9370db'],
-  ['mediumseagreen', '#3cb371'],
-  ['mediumslateblue', '#7b68ee'],
-  ['mediumspringgreen', '#00fa9a'],
-  ['mediumturquoise', '#48d1cc'],
-  ['mediumvioletred', '#c71585'],
-  ['midnightblue', '#191970'],
-  ['mintcream', '#f5fffa'],
-  ['mistyrose', '#ffe4e1'],
-  ['moccasin', '#ffe4b5'],
-  ['navajowhite', '#ffdead'],
-  ['navy', '#000080'],
-  ['oldlace', '#fdf5e6'],
-  ['olive', '#808000'],
-  ['olivedrab', '#6b8e23'],
-  ['orange', '#ffa500'],
-  ['orangered', '#ff4500'],
-  ['orchid', '#da70d6'],
-  ['palegoldenrod', '#eee8aa'],
-  ['palegreen', '#98fb98'],
-  ['paleturquoise', '#afeeee'],
-  ['palevioletred', '#db7093'],
-  ['papayawhip', '#ffefd5'],
-  ['peachpuff', '#ffdab9'],
-  ['peru', '#cd853f'],
-  ['pink', '#ffc0cb'],
-  ['plum', '#dda0dd'],
-  ['powderblue', '#b0e0e6'],
-  ['purple', '#800080'],
-  ['rebeccapurple', '#663399'],
-  ['red', '#ff0000'],
-  ['rosybrown', '#bc8f8f'],
-  ['royalblue', '#4169e1'],
-  ['saddlebrown', '#8b4513'],
-  ['salmon', '#fa8072'],
-  ['sandybrown', '#f4a460'],
-  ['seagreen', '#2e8b57'],
-  ['seashell', '#fff5ee'],
-  ['sienna', '#a0522d'],
-  ['silver', '#c0c0c0'],
-  ['skyblue', '#87ceeb'],
-  ['slateblue', '#6a5acd'],
-  ['slategray', '#708090'],
-  ['slategrey', '#708090'],
-  ['snow', '#fffafa'],
-  ['springgreen', '#00ff7f'],
-  ['steelblue', '#4682b4'],
-  ['tan', '#d2b48c'],
-  ['teal', '#008080'],
-  ['thistle', '#d8bfd8'],
-  ['tomato', '#ff6347'],
-  ['turquoise', '#40e0d0'],
-  ['violet', '#ee82ee'],
-  ['wheat', '#f5deb3'],
-  ['white', '#ffffff'],
-  ['whitesmoke', '#f5f5f5'],
-  ['yellow', '#ffff00'],
-  ['yellowgreen', '#9acd32']
-]);
-
-const expandHexShorthand = (hex: string): string => {
-  // expand shorthand form (e.g. "03f") to full form (e.g. "0033ff")
-  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-
-  return hex.replace(shorthandRegex, (m, r: string, g: string, b: string) => r + r + g + g + b + b);
-};
-
-const colorToHex = (rgb: string): string => {
-  // tslint:disable-next-line: max-line-length
-  const matches = rgb.match(/^(rgb\((0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d)\)|rgba\((0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0?\.\d|1(\.0)?)\)|hsl\((0|360|35\d|3[0-4]\d|[12]\d\d|0?\d?\d),(0|100|\d{1,2})%,(0|100|\d{1,2})%\)|hsla\((0|360|35\d|3[0-4]\d|[12]\d\d|0?\d?\d),(0|100|\d{1,2})%,(0|100|\d{1,2})%,(0?\.\d|1(\.0)?)\))$/);
-  // tslint:disable-next-line:newline-per-chained-call
-  const hex = x => (`0${parseInt(x, 10).toString(16)}`).slice(-2);
-
-  return (hex(matches[1]) + hex(matches[2]) + hex(matches[3])).toUpperCase();
-};
-
-const normalizeColor = (color: string): string => {
-  let value = color.trim();
-  if (value.charAt(0) !== '#') {
-    value = value.indexOf('rgb') !== 0 ? nameToHex.get(color) : colorToHex(color);
-  } else {
-    if (value.length === 4) {
-      value = expandHexShorthand(color);
-    }
-  }
-
-  return !!value ? value.replace(/#/g, '') : 'ffffff';
-};
-
-const hexToRgb = (hex: string): any => {
-  const value = normalizeColor(hex);
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(value);
-
-  return result
-    ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16)
-      }
-    : undefined;
-};
-
-const mix = (baseColor: string, color: string, weight: number): string => {
-  const d2h = (d): string => d.toString(16); // convert a decimal value to hex
-  const h2d = (h): number => parseInt(h, 16); // convert a hex value to decimal
-  const w = typeof weight !== 'undefined' ? weight : 50; // set the weight to 50%, if that argument is omitted
-  let resultColor = '#';
-  for (let i = 0; i <= 5; i += 2) {
-    // loop through each of the 3 hex pairs—red, green, and blue
-    const v1 = h2d(normalizeColor(baseColor)
-      .substr(i, 2)); // extract the current pairs
-    const v2 = h2d(normalizeColor(color)
-      .substr(i, 2));
-    // combine the current pairs from each source color, according to the specified weight
-    let val = d2h(Math.round(v2 + (v1 - v2) * (w / 100)));
-    while (val.length < 2) {
-      val = `0${val}`;
-    } // prepend a '0' if val results in a single digit
-    resultColor += val; // concatenate val to our new color string
-  }
-
-  return resultColor;
-};
-
-// TODO: replace with closer match to sass darken and lighten
-const luminance = (color: string, lum: number): string => {
-  const l = lum || Number(0);
-  // convert to decimal and change luminosity
-  let rgb = '#';
-  let c: number;
-  let i: number;
-  let cs: string;
-  for (i = 0; i < 3; i++) {
-    c = parseInt(normalizeColor(color)
-      .substr(i * 2, 2), 16);
-    cs = Math.round(Math.min(Math.max(0, c + c * l), 255))
-      .toString(16);
-    rgb += (`00${cs}`).substr(cs.length);
-  }
-
-  return rgb;
-};
-
-const yiq = (color: string): number => {
-  const rgb = hexToRgb(color);
-
-  return Math.round((rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000);
-};
-
-export { hexToRgb, luminance, mix, yiq };
diff --git a/projects/wvr-elements/src/lib/shared/utility/index.ts b/projects/wvr-elements/src/lib/shared/utility/index.ts
index 219305993..ed3d95618 100644
--- a/projects/wvr-elements/src/lib/shared/utility/index.ts
+++ b/projects/wvr-elements/src/lib/shared/utility/index.ts
@@ -1,3 +1,4 @@
-export { obtainConfigPath, weaverBootstrap } from './bootstrap.utility';
+export { obtainConfigPath, registerWeaverElements, showWeaverElements, weaverBootstrap, WvrElementDesc } from './bootstrap.utility';
 export { debounce } from './decorators.utilty';
+export { wvrCompile, wvrParseProjectedContent } from './template.utility';
 export { wvrTimeout } from './timing.utility';
diff --git a/projects/wvr-elements/src/lib/shared/utility/nameToHex.json b/projects/wvr-elements/src/lib/shared/utility/nameToHex.json
new file mode 100644
index 000000000..c3d3e1018
--- /dev/null
+++ b/projects/wvr-elements/src/lib/shared/utility/nameToHex.json
@@ -0,0 +1,150 @@
+{
+  "aliceblue": "#f0f8ff",
+  "antiquewhite": "#faebd7",
+  "aqua": "#00ffff",
+  "aquamarine": "#7fffd4",
+  "azure": "#f0ffff",
+  "beige": "#f5f5dc",
+  "bisque": "#ffe4c4",
+  "black": "#000000",
+  "blanchedalmond": "#ffebcd",
+  "blue": "#0000ff",
+  "blueviolet": "#8a2be2",
+  "brown": "#a52a2a",
+  "burlywood": "#deb887",
+  "cadetblue": "#5f9ea0",
+  "chartreuse": "#7fff00",
+  "chocolate": "#d2691e",
+  "coral": "#ff7f50",
+  "cornflowerblue": "#6495ed",
+  "cornsilk": "#fff8dc",
+  "crimson": "#dc143c",
+  "cyan": "#00ffff",
+  "darkblue": "#00008b",
+  "darkcyan": "#008b8b",
+  "darkgoldenrod": "#b8860b",
+  "darkgray": "#a9a9a9",
+  "darkgreen": "#006400",
+  "darkgrey": "#a9a9a9",
+  "darkkhaki": "#bdb76b",
+  "darkmagenta": "#8b008b",
+  "darkolivegreen": "#556b2f",
+  "darkorange": "#ff8c00",
+  "darkorchid": "#9932cc",
+  "darkred": "#8b0000",
+  "darksalmon": "#e9967a",
+  "darkseagreen": "#8fbc8f",
+  "darkslateblue": "#483d8b",
+  "darkslategray": "#2f4f4f",
+  "darkslategrey": "#2f4f4f",
+  "darkturquoise": "#00ced1",
+  "darkviolet": "#9400d3",
+  "deeppink": "#ff1493",
+  "deepskyblue": "#00bfff",
+  "dimgray": "#696969",
+  "dimgrey": "#696969",
+  "dodgerblue": "#1e90ff",
+  "firebrick": "#b22222",
+  "floralwhite": "#fffaf0",
+  "forestgreen": "#228b22",
+  "fuchsia": "#ff00ff",
+  "gainsboro": "#dcdcdc",
+  "ghostwhite": "#f8f8ff",
+  "gold": "#ffd700",
+  "goldenrod": "#daa520",
+  "gray": "#808080",
+  "green": "#008000",
+  "greenyellow": "#adff2f",
+  "grey": "#808080",
+  "honeydew": "#f0fff0",
+  "hotpink": "#ff69b4",
+  "indianred": "#cd5c5c",
+  "indigo": "#4b0082",
+  "ivory": "#fffff0",
+  "khaki": "#f0e68c",
+  "lavender": "#e6e6fa",
+  "lavenderblush": "#fff0f5",
+  "lawngreen": "#7cfc00",
+  "lemonchiffon": "#fffacd",
+  "lightblue": "#add8e6",
+  "lightcoral": "#f08080",
+  "lightcyan": "#e0ffff",
+  "lightgoldenrodyellow": "#fafad2",
+  "lightgray": "#d3d3d3",
+  "lightgreen": "#90ee90",
+  "lightgrey": "#d3d3d3",
+  "lightpink": "#ffb6c1",
+  "lightsalmon": "#ffa07a",
+  "lightseagreen": "#20b2aa",
+  "lightskyblue": "#87cefa",
+  "lightslategray": "#778899",
+  "lightslategrey": "#778899",
+  "lightsteelblue": "#b0c4de",
+  "lightyellow": "#ffffe0",
+  "lime": "#00ff00",
+  "limegreen": "#32cd32",
+  "linen": "#faf0e6",
+  "magenta": "#ff00ff",
+  "maroon": "#800000",
+  "mediumaquamarine": "#66cdaa",
+  "mediumblue": "#0000cd",
+  "mediumorchid": "#ba55d3",
+  "mediumpurple": "#9370db",
+  "mediumseagreen": "#3cb371",
+  "mediumslateblue": "#7b68ee",
+  "mediumspringgreen": "#00fa9a",
+  "mediumturquoise": "#48d1cc",
+  "mediumvioletred": "#c71585",
+  "midnightblue": "#191970",
+  "mintcream": "#f5fffa",
+  "mistyrose": "#ffe4e1",
+  "moccasin": "#ffe4b5",
+  "navajowhite": "#ffdead",
+  "navy": "#000080",
+  "oldlace": "#fdf5e6",
+  "olive": "#808000",
+  "olivedrab": "#6b8e23",
+  "orange": "#ffa500",
+  "orangered": "#ff4500",
+  "orchid": "#da70d6",
+  "palegoldenrod": "#eee8aa",
+  "palegreen": "#98fb98",
+  "paleturquoise": "#afeeee",
+  "palevioletred": "#db7093",
+  "papayawhip": "#ffefd5",
+  "peachpuff": "#ffdab9",
+  "peru": "#cd853f",
+  "pink": "#ffc0cb",
+  "plum": "#dda0dd",
+  "powderblue": "#b0e0e6",
+  "purple": "#800080",
+  "rebeccapurple": "#663399",
+  "red": "#ff0000",
+  "rosybrown": "#bc8f8f",
+  "royalblue": "#4169e1",
+  "saddlebrown": "#8b4513",
+  "salmon": "#fa8072",
+  "sandybrown": "#f4a460",
+  "seagreen": "#2e8b57",
+  "seashell": "#fff5ee",
+  "sienna": "#a0522d",
+  "silver": "#c0c0c0",
+  "skyblue": "#87ceeb",
+  "slateblue": "#6a5acd",
+  "slategray": "#708090",
+  "slategrey": "#708090",
+  "snow": "#fffafa",
+  "springgreen": "#00ff7f",
+  "steelblue": "#4682b4",
+  "tan": "#d2b48c",
+  "teal": "#008080",
+  "thistle": "#d8bfd8",
+  "tomato": "#ff6347",
+  "turquoise": "#40e0d0",
+  "violet": "#ee82ee",
+  "wheat": "#f5deb3",
+  "white": "#ffffff",
+  "whitesmoke": "#f5f5f5",
+  "yellow": "#ffff00",
+  "yellowgreen": "#9acd32"
+}
diff --git a/projects/wvr-elements/src/lib/shared/utility/template.utility.ts b/projects/wvr-elements/src/lib/shared/utility/template.utility.ts
new file mode 100644
index 000000000..798aba5fe
--- /dev/null
+++ b/projects/wvr-elements/src/lib/shared/utility/template.utility.ts
@@ -0,0 +1,43 @@
+/* istanbul ignore file */
+
+/* TODO: Issue #292. */
+import * as JSON5 from 'json5';
+import Handlebars from 'handlebars/dist/cjs/handlebars';
+import { WvrDataSelect } from '../../core/data-select';
+import { WvrDataComponent } from '../wvr-data.component';
+import { wvrTimeout } from '../../shared/utility/timing.utility';
+
+const wvrCompile = (d: {}, s: WvrDataSelect, elem: HTMLElement, projectedContentElem: HTMLElement): void => {
+  const data = {};
+  data[s.as] = d;
+  const compiledContent = Handlebars.compile(projectedContentElem.innerHTML)(data);
+  projectedContentElem.outerHTML = compiledContent;
+};
+
+const wvrParseProjectedContent = (component: WvrDataComponent, elem: HTMLElement): void => {
+  if (!component.hasWvrData()) {
+    return;
+  }
+
+  wvrTimeout(() => {
+    const projectedContentElem = elem.querySelector('template[wvr-compile]');
+    if (!projectedContentElem) {
+      return;
+    }
+    const valueParsed = JSON5.parse(component.getWvrData());
+    const wvrDataSelects: Array<any> = Array.isArray(valueParsed) ? valueParsed : [valueParsed];
+
+    wvrDataSelects
+      .filter((s: WvrDataSelect) => !!s.manifest && !!s.entry && !!s.as)
+      .forEach((s: WvrDataSelect) => {
+        component.data[s.as].subscribe(d => {
+          wvrCompile(d, s, elem, projectedContentElem as HTMLElement);
+        });
+      });
+  });
+};
+
+export {
+  wvrCompile,
+  wvrParseProjectedContent
+};
diff --git a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts
index e9f2da85c..031728ae1 100644
--- a/projects/wvr-elements/src/lib/shared/wvr-base.component.ts
+++ b/projects/wvr-elements/src/lib/shared/wvr-base.component.ts
@@ -1,21 +1,20 @@
 import { AfterContentInit, Directive, ElementRef, EventEmitter, HostBinding, Injector, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
 import { select, Store } from '@ngrx/store';
 import * as JSON5 from 'json5';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { AnimationService } from '../core/animation.service';
 import { ComponentRegistryService } from '../core/component-registry.service';
 import { WvrDataSelect } from '../core/data-select';
 import * as ManifestActions from '../core/manifest/manifest.actions';
-import { MobileService } from '../core/mobile.service';
-import { RootState, selectManifestEntryResponse } from '../core/store';
-import { TemplateService } from '../core/template.service';
+import { RootState, selectIsMobileLayout, selectManifestEntryResponse } from '../core/store';
 import { ThemeService } from '../core/theme/theme.service';
 import { AppConfig, APP_CONFIG } from './config';
 import { ThemeVariantName } from './theme';
 import { WvrAnimationComponent } from './wvr-animation.component';
 import { WvrDataComponent } from './wvr-data.component';
 import { WvrThemeableComponent } from './wvr-themeable.component';
+import { wvrParseProjectedContent } from './utility';
 
 @Directive()
 // tslint:disable-next-line:directive-class-suffix
@@ -86,34 +85,15 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit, OnDe
   /** A view child of the template element containing the #animationRoot identifier. */
   @ViewChild('animationRoot') animationRootElem: ElementRef;
 
-  /** An accessor which uses the mobileService to determine if the current layout mode is mobile. */
-  get isMobileLayout(): boolean {
-    return this._mobileService.isMobileLayout;
-  }
-
-  /** An accessor which determines if the current userAgent mode is mobile. */
-  get isMobileAgent(): boolean {
-    const agent = navigator.userAgent || navigator.vendor || (window as any).opera;
-
-    // tslint:disable-next-line:max-line-length
-    return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(agent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(agent.substr(0, 4)));
-  }
-
   /** A reference to the AnimationService */
   private readonly _animationService: AnimationService<WvrBaseComponent>;
 
-  /** A reference to the MobileService */
-  private readonly _mobileService: MobileService;
-
-  /** A reference to the TemplateService */
-  private readonly _templateService: TemplateService<WvrBaseComponent>;
-
   /** A reference to the ThemeService */
   private readonly themeService: ThemeService;
 
   /** A host bound accessor which applies the wvr-hidden class if both isMobileLayout and hiddenInMobile evaluate to true.  */
   @HostBinding('class.wvr-hidden') private get _hiddenInMobile(): boolean {
-    return this._mobileService.isMobileLayout && this.hiddenInMobile;
+    return this.isMobileLayout && this.hiddenInMobile;
   }
 
   /** An attribute input specifying if this component should be hidden in the mobile layout. */
@@ -122,7 +102,12 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit, OnDe
   /** An Output biding used for triggering animations. */
   @Output() protected readonly animationEventTrigger = new EventEmitter<Event>();
 
+  isMobileLayout: boolean;
+
+  protected subscriptions: Array<Subscription>;
+
   constructor(injector: Injector) {
+    this.subscriptions = [];
     this.componentRegistry = injector.get(ComponentRegistryService);
     this.id = this.componentRegistry.register(this);
 
@@ -131,8 +116,6 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit, OnDe
     this.store = injector.get<Store<RootState>>(Store);
 
     this._animationService = injector.get(AnimationService);
-    this._mobileService = injector.get(MobileService);
-    this._templateService = injector.get(TemplateService);
     this.themeService = injector.get(ThemeService);
 
     const element = (this.eRef.nativeElement as HTMLElement);
@@ -145,7 +128,12 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit, OnDe
     this.processData();
     this.initializeAnimationRegistration();
     this.themeService.registerComponent(this.id, this);
-    this._templateService.parseProjectedContent(this, this.eRef.nativeElement);
+    wvrParseProjectedContent(this, this.eRef.nativeElement);
+
+    this.subscriptions.push(this.store.pipe(select(selectIsMobileLayout))
+      .subscribe((isMobile: boolean) => {
+        this.isMobileLayout = isMobile;
+      }));
   }
 
   // TODO: fix this
@@ -158,6 +146,10 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit, OnDe
   ngOnDestroy(): void {
     this.componentRegistry.unRegisterComponent(this.id);
     this.themeService.unRegisterComponent(this.id);
+
+    this.subscriptions.forEach((subscription: Subscription) => {
+      subscription.unsubscribe();
+    });
   }
 
   applyThemeOverride(customProperty: string, value: string): void {
diff --git a/projects/wvr-elements/src/lib/shared/wvr-shared.module.ts b/projects/wvr-elements/src/lib/shared/wvr-shared.module.ts
index 66ca18ac0..231da61cb 100644
--- a/projects/wvr-elements/src/lib/shared/wvr-shared.module.ts
+++ b/projects/wvr-elements/src/lib/shared/wvr-shared.module.ts
@@ -60,11 +60,11 @@ export const WVR_PIPES = [
 
 const MODULES = [
   CommonModule,
+  EditorModule,
+  FormsModule,
   InlineSVGModule,
   NgbDropdownModule,
   NgbModalModule,
-  EditorModule,
-  FormsModule,
   ReactiveFormsModule
 ];
 
@@ -82,9 +82,7 @@ const MODULES = [
   ],
   providers: [],
   entryComponents: [],
-  schemas: [
-    CUSTOM_ELEMENTS_SCHEMA
-  ]
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class WvrSharedModule {
 
diff --git a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.html b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.html
index aeacc9f13..887800f6e 100644
--- a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.html
+++ b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.html
@@ -32,6 +32,6 @@
 
 <ng-template #closeButton>
   <button type="button" class="close" data-dismiss="alert" aria-label="Close" (click)="clickClose($event)" *ngIf="closeable === 'true'">
-    <span aria-hidden="true">&times;</span>
+    <wvr-text-component aria-hidden="true" value="&times;"></wvr-text-component>
   </button>
 </ng-template>
diff --git a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.spec.ts b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.spec.ts
index 19b0abc8c..fd55b43f8 100644
--- a/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.spec.ts
@@ -1,8 +1,10 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { initialState } from '../core/store';
 import { APP_CONFIG, testAppConfig } from '../shared/config';
+import { WvrSharedModule } from '../shared/wvr-shared.module';
 import { WvrAlertComponent } from './wvr-alert.component';
 
 @Component({
@@ -15,10 +17,6 @@ class WvrAlertHostComponent {
 }
 
 describe('WvrAlertComponent', () => {
-  const initialState = { theme: {
-    themes: {}
-  }};
-  let store: MockStore;
   let component: WvrAlertComponent;
   let fixture: ComponentFixture<WvrAlertComponent>;
 
@@ -29,23 +27,23 @@ describe('WvrAlertComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule
+        BrowserAnimationsModule,
+        WvrSharedModule
+      ],
+      declarations: [
+        WvrAlertComponent,
+        WvrAlertHostComponent
       ],
       providers: [
         {
           provide: APP_CONFIG,
           useValue: testAppConfig
         },
-        provideMockStore({initialState})
-      ],
-      declarations: [
-        WvrAlertHostComponent,
-        WvrAlertComponent
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+        provideMockStore({ initialState })
+      ]
     })
-    .compileComponents();
-    store = TestBed.inject(MockStore);
+      .compileComponents();
+    TestBed.inject(MockStore);
   }));
 
   beforeEach(() => {
@@ -61,7 +59,7 @@ describe('WvrAlertComponent', () => {
 
   it('should create', () => {
     expect(component)
-    .toBeTruthy();
+      .toBeTruthy();
   });
 
   it("should have as alert type as 'basic'", () => {
@@ -79,18 +77,18 @@ describe('WvrAlertComponent', () => {
       .toBeFalse();
     closeButton.dispatchEvent(new MouseEvent('click'));
     expect(component.alertClosed)
-    .toBeTrue();
+      .toBeTrue();
   });
 
   it('should auto close when alert-type="self-closing"', done => {
-
     setTimeout(() => {
       done();
       expect(hostComponent.alert
         .alertClosed)
         .toBeTrue();
     }, 100);
-
+    expect(component)
+      .toBeDefined();
   });
 
 });
diff --git a/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.spec.ts b/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.spec.ts
index c11bb3f27..98e906205 100644
--- a/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.spec.ts
@@ -1,32 +1,49 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { provideMockStore } from '@ngrx/store/testing';
-import { APP_CONFIG, testAppConfig } from '../shared/config';
-import { WvrButtonComponent } from './wvr-button.component';
-import { actions } from '../core/actions';
-import { doesNotMatch } from 'assert';
 import { select } from '@ngrx/store';
+import { provideMockStore } from '@ngrx/store/testing';
 import { filter } from 'rxjs/operators';
+import { actions } from '../core/actions';
 import { selectThemeState } from '../core/store';
+import { APP_CONFIG, testAppConfig } from '../shared/config';
+import { WvrSharedModule } from '../shared/wvr-shared.module';
+import { WvrButtonComponent } from './wvr-button.component';
+
+// TODO: should be using the store's initial state but this is not currently working.
+//import { initialState } from '../core/store';
 
 @Component({
   selector: 'wvr-button-host-component',
   // tslint:disable-next-line: component-max-inline-declarations
-  template:  `<wvr-button-component [themeVariant]="'primary'" [btnType]="button" [btnSize]="small" [background]="'magenta'"
-                [backgroundActive]="yellow" [backgroundHover]="green" [borderColor]="'black'" [borderActive]="'black'"
-                [borderHover]="'red'" [borderFocus]="'black'" [boxShadowFocus]="teal"
-                [color]="green" [colorActive]="yellow" [colorHover]="brown">
-              </wvr-button-component>
-              `})
+  template: `
+    <wvr-button-component
+      [themeVariant]="'primary'"
+      [btnType]="button"
+      [btnSize]="small"
+      [background]="'magenta'"
+      [backgroundActive]="yellow"
+      [backgroundHover]="green"
+      [borderColor]="'black'"
+      [borderActive]="'black'"
+      [borderHover]="'red'"
+      [borderFocus]="'black'"
+      [boxShadowFocus]="teal"
+      [color]="green"
+      [colorActive]="yellow"
+      [colorHover]="brown">
+    </wvr-button-component>`
+})
 class WvrButtonHostComponent {
   @ViewChild(WvrButtonComponent) wvrButtonComponent: WvrButtonComponent;
 }
 
 describe('WvrButtonComponent', () => {
-  const initialState = { theme: {
-    themes: {}
-  }};
+  const initialState = {
+    theme: {
+      themes: {}
+    }
+  };
   let component: WvrButtonComponent;
   let fixture: ComponentFixture<WvrButtonComponent>;
 
@@ -36,22 +53,22 @@ describe('WvrButtonComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule
+        BrowserAnimationsModule,
+        WvrSharedModule
+      ],
+      declarations: [
+        WvrButtonComponent,
+        WvrButtonHostComponent
       ],
       providers: [
         {
           provide: APP_CONFIG,
           useValue: testAppConfig
         },
-        provideMockStore({initialState})
-      ],
-      declarations: [
-        WvrButtonHostComponent,
-        WvrButtonComponent
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+        provideMockStore({ initialState })
+      ]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
@@ -84,86 +101,86 @@ describe('WvrButtonComponent', () => {
     const elem = component.eRef.nativeElement;
     component.applyThemeOverride('--primary-button-bg', 'magenta');
     expect(component.themeOverrides[elem.style[0]])
-    .toEqual(elem.style.getPropertyValue('--primary-button-bg'));
+      .toEqual(elem.style.getPropertyValue('--primary-button-bg'));
     hostComponent.wvrButtonComponent.applyThemeOverride('--primary-button-bg', 'yellow');
     expect(hostComponent.wvrButtonComponent.themeOverrides[hostComponent.wvrButtonComponent.eRef.nativeElement.style[0]])
-    .toEqual('yellow');
+      .toEqual('yellow');
   });
 
   it('should set active background', () => {
     const elem = component.eRef.nativeElement;
     component.applyThemeOverride('--primary-button-active-bg', 'yellow');
     expect(component.themeOverrides[elem.style[0]])
-    .toEqual(elem.style.getPropertyValue('--primary-button-active-bg'));
+      .toEqual(elem.style.getPropertyValue('--primary-button-active-bg'));
   });
 
   it('should set hover background', () => {
     const elem = component.eRef.nativeElement;
     component.applyThemeOverride('--primary-button-hover-bg', 'green');
     expect(component.themeOverrides[elem.style[0]])
-    .toEqual(elem.style.getPropertyValue('--primary-button-hover-bg'));
+      .toEqual(elem.style.getPropertyValue('--primary-button-hover-bg'));
   });
 
   it('should set border color', () => {
     const elem = component.eRef.nativeElement;
     component.applyThemeOverride('--primary-button-border', 'black');
     expect(component.themeOverrides[elem.style[0]])
-    .toEqual(elem.style.getPropertyValue('--primary-button-border'));
+      .toEqual(elem.style.getPropertyValue('--primary-button-border'));
   });
 
   it('should set border color in active state', () => {
     const elem = component.eRef.nativeElement;
     component.applyThemeOverride('--primary-button-active-border', 'black');
     expect(component.themeOverrides[elem.style[0]])
-    .toEqual(elem.style.getPropertyValue('--primary-button-active-border'));
+      .toEqual(elem.style.getPropertyValue('--primary-button-active-border'));
   });
 
   it('should set button border color in hover state', () => {
     const elem = component.eRef.nativeElement;
     component.applyThemeOverride('--primary-button-hover-border', 'red');
     expect(component.themeOverrides[elem.style[0]])
-    .toEqual(elem.style.getPropertyValue('--primary-button-hover-border'));
+      .toEqual(elem.style.getPropertyValue('--primary-button-hover-border'));
   });
 
   it('should set button border in focus state', () => {
     const elem = component.eRef.nativeElement;
     component.applyThemeOverride('--primary-button-focus-border', 'black');
     expect(component.themeOverrides[elem.style[0]])
-    .toEqual(elem.style.getPropertyValue('--primary-button-focus-border'));
+      .toEqual(elem.style.getPropertyValue('--primary-button-focus-border'));
   });
 
   it('should set box shadow color in focus state', () => {
     const elem = component.eRef.nativeElement;
     component.applyThemeOverride('--primary-button-focus-box-shadow', 'teal');
     expect(component.themeOverrides[elem.style[0]])
-    .toEqual(elem.style.getPropertyValue('--primary-button-focus-box-shadow'));
+      .toEqual(elem.style.getPropertyValue('--primary-button-focus-box-shadow'));
   });
 
   it('should set button color', () => {
     const elem = component.eRef.nativeElement;
     component.applyThemeOverride('--primary-button-color', 'green');
     expect(component.themeOverrides[elem.style[0]])
-    .toEqual(elem.style.getPropertyValue('--primary-button-color'));
+      .toEqual(elem.style.getPropertyValue('--primary-button-color'));
     hostComponent.wvrButtonComponent.applyThemeOverride('--primary-button-color', 'yellow');
     expect(hostComponent.wvrButtonComponent.themeOverrides[hostComponent.wvrButtonComponent.eRef.nativeElement.style[0]])
-    .toEqual('magenta');
+      .toEqual('magenta');
   });
 
   it('should set button color in active state', () => {
     const elem = component.eRef.nativeElement;
     component.applyThemeOverride('--primary-button-active-color', 'yellow');
     expect(component.themeOverrides[elem.style[0]])
-    .toEqual(elem.style.getPropertyValue('--primary-button-active-color'));
+      .toEqual(elem.style.getPropertyValue('--primary-button-active-color'));
     hostComponent.wvrButtonComponent.applyThemeOverride('--primary-button-active-color', 'green');
     expect(hostComponent.wvrButtonComponent.themeOverrides[hostComponent.wvrButtonComponent.eRef.nativeElement.style[0]])
-    .toEqual('magenta');
+      .toEqual('magenta');
   });
 
   it('should set button color in hover state', () => {
     const elem = component.eRef.nativeElement;
     component.applyThemeOverride('--primary-button-hover-color', 'yellow');
     expect(component.themeOverrides[elem.style[0]])
-    .toEqual(elem.style.getPropertyValue('--primary-button-hover-color'));
+      .toEqual(elem.style.getPropertyValue('--primary-button-hover-color'));
   });
 
   it('should set distpatch-action', () => {
@@ -174,7 +191,7 @@ describe('WvrButtonComponent', () => {
   });
 
   it('should set distpatch-action only when in proper form', () => {
-    const dispatchActionValue = 'Themeselect';
+    const dispatchActionValue = 'Theme.Select';
     component.dispatchAction = dispatchActionValue;
     // tslint:disable-next-line:no-string-literal
     expect(component['_action'])
@@ -234,11 +251,13 @@ describe('WvrButtonComponent', () => {
 
     (component.eRef.nativeElement as HTMLElement).addEventListener(EVENT_NAME, e => {
       expect(e.type)
-      .toEqual(EVENT_NAME);
+        .toEqual(EVENT_NAME);
     });
 
     component.eRef.nativeElement.click();
 
+    expect(component)
+      .toBeDefined();
   });
 
   it('should dispatch an action on click', () => {
@@ -252,10 +271,10 @@ describe('WvrButtonComponent', () => {
       select(selectThemeState),
       filter(themeState => !!themeState)
     )
-    .subscribe(themeState => {
-      expect(themeState)
-        .toBeDefined();
-    });
+      .subscribe(themeState => {
+        expect(themeState)
+          .toBeDefined();
+      });
 
     component.eRef.nativeElement.click();
 
diff --git a/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.ts b/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.ts
index 1186967a3..ecf3d2c10 100644
--- a/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.ts
+++ b/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.ts
@@ -186,7 +186,7 @@ export class WvrButtonComponent extends WvrBaseComponent {
     const registeredActions = this.actionRegistry.getActions(parts[0]);
 
     if (!registeredActions || !parts[1] || !registeredActions[parts[1]]) {
-      console.warn('somthing went wrong parsing the action input.');
+      console.warn('something went wrong parsing the action input.');
 
       return;
     }
@@ -206,7 +206,7 @@ export class WvrButtonComponent extends WvrBaseComponent {
       valid = !!registeredActions[parts[1]];
       if (!valid) {
         const actions = Object.keys(registeredActions[parts[0]])
-          .join(',')
+          .join(',');
         console.warn(`'${parts[1]}' is not a known action of ${parts[0]}. (${actions})`);
       }
 
diff --git a/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.ud-examples.html b/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.ud-examples.html
index 6f4a197a2..102e6e6b7 100644
--- a/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.ud-examples.html
+++ b/projects/wvr-elements/src/lib/wvr-button/wvr-button.component.ud-examples.html
@@ -14,30 +14,30 @@
     The <code>wvre-button</code> component with customizations.
   </desciption>
   <snippet>
-    <wvre-button theme-variant="primary"
-                btn-size="large"
-                wvr-btn-type="button"
-                background="tomato"
-                border-color="1px solid var(--wvr-btn-outline-warning-hover-color)"
-                color="var(--wvr-btn-outline-warning-hover-color)"
-                text-decoration="none"
-                background-active="yellow"
-                border-active="1px solid green"
-                color-active="teal"
-                text-decoration-active="underline"
-                background-hover="green"
-                border-hover="1px solid blue"
-                color-hover="var(--wvr-black)"
-                text-decoration-hover="none"
-                border-radius="5px"
-                cursor="var(--wvr-btn-cursor-pointer)"
-                font-family="cursive"
-                font-size="18px"
-                line-height="1.75"
-                padding="1.5rem 1.5rem"
-                text-align="center"
-                vertical-align="var(--wvr-btn-vertical-align)"
-                >
+    <wvre-button
+      theme-variant="primary"
+      btn-size="large"
+      wvr-btn-type="button"
+      background="tomato"
+      border-color="1px solid var(--wvr-btn-outline-warning-hover-color)"
+      color="var(--wvr-btn-outline-warning-hover-color)"
+      text-decoration="none"
+      background-active="yellow"
+      border-active="1px solid green"
+      color-active="teal"
+      text-decoration-active="underline"
+      background-hover="green"
+      border-hover="1px solid blue"
+      color-hover="var(--wvr-black)"
+      text-decoration-hover="none"
+      border-radius="5px"
+      cursor="var(--wvr-btn-cursor-pointer)"
+      font-family="cursive"
+      font-size="18px"
+      line-height="1.75"
+      padding="1.5rem 1.5rem"
+      text-align="center"
+      vertical-align="var(--wvr-btn-vertical-align)">
       <wvre-text value=" Customized Button "></wvre-text>
     </wvre-button>
   </snippet>
diff --git a/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.html b/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.html
index 18c240bf6..bd04c1abc 100644
--- a/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.html
+++ b/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.html
@@ -1,6 +1,4 @@
-<div
-  #animationRoot
-  class="wvr-components wvr-card card {{additionalCardClasses()}}"
+<div #animationRoot class="wvr-components wvr-card card {{additionalCardClasses}}"
   [ngClass]="{ 'text-center': textCenter }"
   style="width: 18rem;">
   <ng-container *ngTemplateOutlet="cardHeader"></ng-container>
@@ -16,10 +14,10 @@
 <!-- cardHeader -->
 
 <ng-template #cardHeader>
-  <div class="card-header {{additionalHeaderClasses()}}"
-  [ngClass]="{
-    'wvr-hidden': !hasCardHeader
-  }">
+  <div class="card-header {{additionalHeaderClasses}}"
+    [ngClass]="{
+      'wvr-hidden': !hasCardHeader
+    }">
     <ng-content select="wvre-card-header"></ng-content>
   </div>
 </ng-template>
@@ -34,7 +32,7 @@ <h5 class="card-title" [ngClass]="{'wvr-hidden': !hasCardTitle}">
 <!-- cardImgSrc -->
 <ng-template #cardImg>
   <div class="card-img" [ngClass]="{'wvr-hidden': !hasCardImg}">
-    <img alt="Card Image Cap" class="card-img-top" [src]="imgSrc" />
+    <img alt="Card Image Cap" class="card-img-top" [src]="imgSrc" [height]="imgHeight" [width]="imgWidth" />
   </div>
 </ng-template>
 
diff --git a/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.spec.ts b/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.spec.ts
index 8fc634250..1838509fe 100644
--- a/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.spec.ts
@@ -2,33 +2,34 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
+import { initialState } from '../core/store';
 import { APP_CONFIG, testAppConfig } from '../shared/config';
+import { WvrSharedModule } from '../shared/wvr-shared.module';
 import { WvrCardComponent } from './wvr-card.component';
 
 @Component({
   selector: 'wvr-card-host-component',
   // tslint:disable-next-line:component-max-inline-declarations
-  template: `<wvr-card-component [themeVariant]="primary" [panelFormat]="mixed">
-  <wvre-card-header><wvre-text value="Card Header"></wvre-text></wvre-card-header>
-  <wvre-card-title><wvre-text value="Card Title"></wvre-text></wvre-card-title>
-  <wvre-card-img src="assets/lighthouse.svg"></wvre-card-img>
-  <wvre-card-link href="www.google.com"><wvre-text value="Google"></wvre-text></wvre-card-link>
-  <wvre-card-link href="www.gmail.com"><wvre-text value="Gmail"></wvre-text></wvre-card-link>
-  <wvre-list top list-type="group-flush" context="info"><wvre-list-item><wvre-text value="Item 1"></wvre-text></wvre-list-item><wvre-list-item context="warning"><wvre-text value="Item 2"></wvre-text></wvre-list-item><wvre-list-item context="success"><wvre-text value="Item 3"></wvre-text></wvre-list-item></wvre-list>
-  <wvre-text value="This is a basic card body content"></wvre-text>
-  <wvre-list bottom list-type="group-flush" context="info"><wvre-list-item><wvre-text value="Item 1"></wvre-text></wvre-list-item><wvre-list-item context="warning"><wvre-text value="Item 2"></wvre-text></wvre-list-item></wvre-list>
-  <wvre-button theme-variant="secondary"><wvre-text value="Card Button Text"></wvre-text></wvre-button>
-  <wvre-card-footer text-muted><wvre-text value="Card Footer1"></wvre-text></wvre-card-footer>
-</wvr-card-component>`
+  template: `
+  <wvr-card-component [themeVariant]="primary" [panelFormat]="mixed">
+    <wvre-card-header><wvre-text value="Card Header"></wvre-text></wvre-card-header>
+    <wvre-card-title><wvre-text value="Card Title"></wvre-text></wvre-card-title>
+    <wvre-card-img src="assets/lighthouse.svg"></wvre-card-img>
+    <wvre-card-link href="www.google.com"><wvre-text value="Google"></wvre-text></wvre-card-link>
+    <wvre-card-link href="www.gmail.com"><wvre-text value="Gmail"></wvre-text></wvre-card-link>
+    <wvre-list top list-type="group-flush" context="info"><wvre-list-item><wvre-text value="Item 1"></wvre-text></wvre-list-item><wvre-list-item context="warning"><wvre-text value="Item 2"></wvre-text></wvre-list-item><wvre-list-item context="success"><wvre-text value="Item 3"></wvre-text></wvre-list-item></wvre-list>
+    <wvre-text value="This is a basic card body content"></wvre-text>
+    <wvre-list bottom list-type="group-flush" context="info"><wvre-list-item><wvre-text value="Item 1"></wvre-text></wvre-list-item><wvre-list-item context="warning"><wvre-text value="Item 2"></wvre-text></wvre-list-item></wvre-list>
+    <wvre-button theme-variant="secondary"><wvre-text value="Card Button Text"></wvre-text></wvre-button>
+    <wvre-card-footer text-muted><wvre-text value="Card Footer1"></wvre-text></wvre-card-footer>
+  </wvr-card-component>
+`
 })
 class WvrCardHostComponent {
   @ViewChild(WvrCardComponent) card: WvrCardComponent;
 }
 
 describe('WvrCardComponent', () => {
-  const initialState = { theme: {
-    themes: {}
-  }};
   let component: WvrCardComponent;
   let fixture: ComponentFixture<WvrCardComponent>;
 
@@ -38,22 +39,23 @@ describe('WvrCardComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule
+        BrowserAnimationsModule,
+        WvrSharedModule
       ],
       declarations: [
-        WvrCardHostComponent,
-        WvrCardComponent
+        WvrCardComponent,
+        WvrCardHostComponent
       ],
       providers: [
         {
           provide: APP_CONFIG,
           useValue: testAppConfig
         },
-        provideMockStore({initialState})
+        provideMockStore({ initialState })
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.ts b/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.ts
index a34ae635a..a492d9774 100644
--- a/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.ts
+++ b/projects/wvr-elements/src/lib/wvr-card/wvr-card.component.ts
@@ -65,6 +65,10 @@ export class WvrCardComponent extends WvrBaseComponent implements AfterViewInit
 
   imgSrc: string;
 
+  imgHeight: string;
+
+  imgWidth: string;
+
   /** Convenience referece this components ElementReference's nativeElement. */
   private readonly elem: HTMLElement;
 
@@ -90,7 +94,7 @@ export class WvrCardComponent extends WvrBaseComponent implements AfterViewInit
     });
   }
 
-  additionalCardClasses(): string {
+  get additionalCardClasses(): string {
     let additionalClasses = '';
     additionalClasses += ((!this.panelFormat || this.panelFormat === 'mixed') || this.panelFormat === 'outlined') ?
       ` border-${this.themeVariant} ` : '';
@@ -100,7 +104,7 @@ export class WvrCardComponent extends WvrBaseComponent implements AfterViewInit
     return additionalClasses;
   }
 
-  additionalHeaderClasses(): string {
+  get additionalHeaderClasses(): string {
     let additionalClasses = '';
     additionalClasses += ((!this.panelFormat || this.panelFormat === 'mixed') || this.panelFormat === 'outlined') ?
       ` border-${this.themeVariant} ` : '';
@@ -141,6 +145,8 @@ export class WvrCardComponent extends WvrBaseComponent implements AfterViewInit
     const wvrCardImgElem = this.elem.querySelector(`${this.selectorPrefix}-card-img`);
     if (wvrCardImgElem) {
       this.imgSrc = wvrCardImgElem.getAttribute('src');
+      this.imgHeight = wvrCardImgElem.getAttribute('height');
+      this.imgWidth = wvrCardImgElem.getAttribute('width');
       this.hasCardImg = true;
     }
   }
diff --git a/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.html b/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.html
index b56bad629..feac8d49f 100644
--- a/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.html
+++ b/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.html
@@ -3,7 +3,7 @@
     class="swatches"
     [panelFormat]="'solid'"
     [themeVariant]="tv.key"
-    *ngFor="let tv of currentTheme | async | keyvalue : originalOrdering">
+    *ngFor="let tv of currentTheme | async | keyvalue : originalOrdering; trackBy:index">
     <wvre-card-header>
       <h3>{{tv.key}}</h3>
     </wvre-card-header>
diff --git a/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.spec.ts b/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.spec.ts
index 6d3ad286c..bbd0b5d77 100644
--- a/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.spec.ts
@@ -1,34 +1,30 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
+import { initialState } from '../core/store';
 import { APP_CONFIG, testAppConfig } from '../shared/config';
+import { WvrSharedModule } from '../shared/wvr-shared.module';
 import { WvrColorPreviewComponent } from './wvr-color-preview.component';
 
 describe('ColorPreviewComponent', () => {
-  const initialState = { theme: {
-    themes: {}
-  }};
   let component: WvrColorPreviewComponent;
   let fixture: ComponentFixture<WvrColorPreviewComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        BrowserAnimationsModule
-      ],
-      providers: [
-        {
-          provide: APP_CONFIG,
-          useValue: testAppConfig
-        },
-        provideMockStore({initialState})
-      ],
-      declarations: [ WvrColorPreviewComponent ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
-    })
-    .compileComponents();
-  });
+  beforeEach(waitForAsync(() => TestBed.configureTestingModule({
+    imports: [
+      BrowserAnimationsModule,
+      WvrSharedModule
+    ],
+    declarations: [WvrColorPreviewComponent],
+    providers: [
+      {
+        provide: APP_CONFIG,
+        useValue: testAppConfig
+      },
+      provideMockStore({ initialState })
+    ]
+  })
+    .compileComponents()));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(WvrColorPreviewComponent);
diff --git a/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.ts b/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.ts
index 3e2e0aa2e..48f0c77e8 100644
--- a/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.ts
+++ b/projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.ts
@@ -5,7 +5,7 @@ import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/c
 import { select } from '@ngrx/store';
 import { Observable } from 'rxjs';
 import { selectCurrentTheme } from '../core/store';
-import { ThemeVariants } from '../shared/theme';
+import { ThemeVariant, ThemeVariants } from '../shared/theme';
 import { WvrBaseComponent } from '../shared/wvr-base.component';
 
 @Component({
@@ -14,7 +14,7 @@ import { WvrBaseComponent } from '../shared/wvr-base.component';
   styleUrls: ['./wvr-color-preview.component.scss'],
   changeDetection: ChangeDetectionStrategy.Default
 })
-export class WvrColorPreviewComponent extends WvrBaseComponent  implements OnInit {
+export class WvrColorPreviewComponent extends WvrBaseComponent implements OnInit {
 
   currentTheme: Observable<ThemeVariants>;
 
@@ -34,4 +34,8 @@ export class WvrColorPreviewComponent extends WvrBaseComponent  implements OnIni
     return 0;
   }
 
+  index(index: number, themeVariant: ThemeVariant): number {
+    return index;
+  }
+
 }
diff --git a/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.spec.ts b/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.spec.ts
index 726049075..6a04acfe6 100644
--- a/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.spec.ts
@@ -1,63 +1,50 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
 import { provideMockStore } from '@ngrx/store/testing';
-import { MobileService } from '../core/mobile.service';
+import { initialState } from '../core/store';
 import { APP_CONFIG, testAppConfig } from '../shared/config';
+import { WvrSharedModule } from '../shared/wvr-shared.module';
 import { WvrDropdownComponent } from './wvr-dropdown.component';
 
 @Component({
   selector: 'wvr-dropdown-host-component',
   // tslint:disable-next-line:component-max-inline-declarations
-  template: `<wvr-dropdown-component
-              btnTextDecoration="none"
-              btnTextDecorationActive="underline"
-              btnTextDecorationHover="underline"
-              btnTextDecorationFocus="none">
-            </wvr-dropdown-component>`
+  template: `
+    <wvr-dropdown-component
+      btnTextDecoration="none"
+      btnTextDecorationActive="underline"
+      btnTextDecorationHover="underline"
+      btnTextDecorationFocus="none">
+    </wvr-dropdown-component>`
 })
 class WvrDropdownHostComponent {
   @ViewChild(WvrDropdownComponent) dropDown: WvrDropdownComponent;
 }
 
-class MockMobileService {
-  isMobileLayout = false;
-}
-
 describe('WvrDropdownComponent', () => {
-  const initialState = { theme: {
-    themes: {}
-  }};
   let component: WvrDropdownComponent;
   let fixture: ComponentFixture<WvrDropdownComponent>;
 
-  let hostComponent: WvrDropdownHostComponent;
   let hostFixture: ComponentFixture<WvrDropdownHostComponent>;
 
-  let mockMobileService: MockMobileService;
-
   beforeEach(waitForAsync(() => {
-    mockMobileService = new MockMobileService();
-    TestBed.overrideProvider(MobileService, { useValue: mockMobileService });
-
     TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule
+        BrowserAnimationsModule,
+        WvrSharedModule
+      ],
+      declarations: [
+        WvrDropdownComponent,
+        WvrDropdownHostComponent
       ],
       providers: [
         {
           provide: APP_CONFIG,
           useValue: testAppConfig
         },
-        provideMockStore({initialState})
-      ],
-      declarations: [
-        WvrDropdownHostComponent,
-        WvrDropdownComponent,
-        NgbDropdown
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+        provideMockStore({ initialState })
+      ]
     })
       .compileComponents();
   }));
@@ -67,7 +54,6 @@ describe('WvrDropdownComponent', () => {
     component = fixture.componentInstance;
 
     hostFixture = TestBed.createComponent(WvrDropdownHostComponent);
-    hostComponent = hostFixture.componentInstance;
 
     hostFixture.detectChanges();
     fixture.detectChanges();
diff --git a/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.ts b/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.ts
index 3d6b94cc3..c36f2f885 100644
--- a/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.ts
+++ b/projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.ts
@@ -21,7 +21,7 @@ export class WvrDropdownComponent extends WvrBaseComponent {
   @HostBinding('style.--wvr-dropdown-menu-animation-speed') private _animationSpeedSeconds;
 
   /** This establishes a delay in milliseconds before the dropdown is displayed. */
-  @Input() openDelay: number = 500;
+  @Input() openDelay = 500;
 
   private _openDelayTimer: NodeJS.Timeout;
 
diff --git a/projects/wvr-elements/src/lib/wvr-footer/wvr-footer.component.spec.ts b/projects/wvr-elements/src/lib/wvr-footer/wvr-footer.component.spec.ts
index d9c774a96..d8a688ee4 100644
--- a/projects/wvr-elements/src/lib/wvr-footer/wvr-footer.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-footer/wvr-footer.component.spec.ts
@@ -1,8 +1,10 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
+import { initialState } from '../core/store';
 import { APP_CONFIG, testAppConfig } from '../shared/config';
+import { WvrSharedModule } from '../shared/wvr-shared.module';
 import { WvrFooterComponent } from './wvr-footer.component';
 
 @Component({
@@ -15,9 +17,6 @@ class WvrFooterHostComponent {
 }
 
 describe('WvrFooterComponent', () => {
-  const initialState = { theme: {
-    themes: {}
-  }};
   let component: WvrFooterComponent;
   let fixture: ComponentFixture<WvrFooterComponent>;
 
@@ -27,17 +26,20 @@ describe('WvrFooterComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule
+        BrowserAnimationsModule,
+        WvrSharedModule
+      ],
+      declarations: [
+        WvrFooterComponent,
+        WvrFooterHostComponent
       ],
       providers: [
         {
           provide: APP_CONFIG,
           useValue: testAppConfig
         },
-        provideMockStore({initialState})
-      ],
-      declarations: [WvrFooterComponent],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+        provideMockStore({ initialState })
+      ]
     })
       .compileComponents();
   }));
diff --git a/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.html b/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.html
index 912f1fa2d..8eb01d4ca 100644
--- a/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.html
+++ b/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.html
@@ -51,7 +51,7 @@
   </div>
 </nav>
 
-<div class="container" class="mobile-menu-button">
+<div *ngIf="isMobileLayout" class="container" class="mobile-menu-button">
   <svg
     (click)="toggleMobileMenu()"
     xmlns="http://www.w3.org/2000/svg"
@@ -71,12 +71,12 @@
 </div>
 
 <ng-template #topNavContent>
-  <div class="top-nav-wrapper" *ngIf="!isMobileLayout">
+  <div *ngIf="!isMobileLayout" class="top-nav-wrapper">
     <ng-content select="wvre-nav-list[top-navigation],wvr-nav-list-component[top-navigation]"></ng-content>
   </div>
 </ng-template>
 <ng-template #bottomNavContent>
-  <div class="h-100" *ngIf="!isMobileLayout">
+  <div *ngIf="!isMobileLayout" class="h-100">
     <ng-content select="wvre-nav-list[bottom-navigation],wvr-nav-list-component[bottom-navigation]"></ng-content>
   </div>
 </ng-template>
diff --git a/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.spec.ts b/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.spec.ts
index dddc085da..47a1ab51b 100644
--- a/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-header/wvr-header.component.spec.ts
@@ -1,10 +1,12 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { Component, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
-import { MobileService } from '../core/mobile.service';
+import { initialState } from '../core/store';
 import { APP_CONFIG } from '../shared/config/app-config';
 import { testAppConfig } from '../shared/config/test-app-config';
+import { WvrSharedModule } from '../shared/wvr-shared.module';
 import { WvrHeaderComponent } from './wvr-header.component';
 
 @Component({
@@ -16,42 +18,30 @@ class WvrHeaderHostComponent {
   @ViewChild(WvrHeaderComponent) header: WvrHeaderComponent;
 }
 
-class MockMobileService {
-  isMobileLayout = false;
-}
-
 describe('WvrHeaderComponent', () => {
-  const initialState = { theme: {
-    themes: {}
-  }};
   let component: WvrHeaderComponent;
   let fixture: ComponentFixture<WvrHeaderComponent>;
 
-  let hostComponent: WvrHeaderHostComponent;
   let hostFixture: ComponentFixture<WvrHeaderHostComponent>;
 
-  let mockMobileService: MockMobileService;
-
   beforeEach(waitForAsync(() => {
-    mockMobileService = new MockMobileService();
-    TestBed.overrideProvider(MobileService, { useValue: mockMobileService });
-
     TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule
+        BrowserAnimationsModule,
+        HttpClientTestingModule,
+        WvrSharedModule
+      ],
+      declarations: [
+        WvrHeaderComponent,
+        WvrHeaderHostComponent
       ],
       providers: [
         {
           provide: APP_CONFIG,
           useValue: testAppConfig
         },
-        provideMockStore({initialState})
-      ],
-      declarations: [
-        WvrHeaderHostComponent,
-        WvrHeaderComponent
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+        provideMockStore({ initialState })
+      ]
     })
       .compileComponents()
       .catch(err => { console.error(err); });
@@ -62,7 +52,6 @@ describe('WvrHeaderComponent', () => {
     component = fixture.componentInstance;
 
     hostFixture = TestBed.createComponent(WvrHeaderHostComponent);
-    hostComponent = hostFixture.componentInstance;
 
     hostFixture.detectChanges();
     fixture.detectChanges();
@@ -145,7 +134,7 @@ describe('WvrHeaderComponent', () => {
     component.toggleMobileMenu();
     fixture.detectChanges();
     expect(component.mobileMenuClosed)
-    .toBe(false);
+      .toBe(false);
   });
 
 });
diff --git a/projects/wvr-elements/src/lib/wvr-icon/wvr-icon.component.html b/projects/wvr-elements/src/lib/wvr-icon/wvr-icon.component.html
index 85e8a05c0..dc6ad27bc 100644
--- a/projects/wvr-elements/src/lib/wvr-icon/wvr-icon.component.html
+++ b/projects/wvr-elements/src/lib/wvr-icon/wvr-icon.component.html
@@ -1,9 +1,9 @@
-<span #animationRoot class="icon" 
+<span #animationRoot
+  class="icon" 
   [inlineSVG]="iconSvgUrl"
   [cacheSVG]="true"
   [setSVGAttributes]="{
     width: '100%',
     height: '100%'
-  }"
->
+  }">
 </span>
diff --git a/projects/wvr-elements/src/lib/wvr-icon/wvr-icon.component.spec.ts b/projects/wvr-elements/src/lib/wvr-icon/wvr-icon.component.spec.ts
index 28523f10f..a16ac334d 100644
--- a/projects/wvr-elements/src/lib/wvr-icon/wvr-icon.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-icon/wvr-icon.component.spec.ts
@@ -1,12 +1,12 @@
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { ComponentFixture, inject, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { StoreModule } from '@ngrx/store';
 import { provideMockStore } from '@ngrx/store/testing';
-import { metaReducers, ROOT_REDUCER } from '../core/store';
+import { initialState } from '../core/store';
 import { APP_CONFIG } from '../shared/config/app-config';
 import { testAppConfig } from '../shared/config/test-app-config';
+import { WvrSharedModule } from '../shared/wvr-shared.module';
 import { WvrIconComponent } from './wvr-icon.component';
 
 @Component({
@@ -19,9 +19,6 @@ class WvrIconHostComponent {
 }
 
 describe('WvrIconComponent', () => {
-  const initialState = { theme: {
-    themes: {}
-  }};
   let component: WvrIconComponent;
   let fixture: ComponentFixture<WvrIconComponent>;
 
@@ -31,24 +28,23 @@ describe('WvrIconComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        HttpClientTestingModule,
         BrowserAnimationsModule,
-        StoreModule.forRoot(ROOT_REDUCER, { metaReducers })
+        HttpClientTestingModule,
+        WvrSharedModule
+      ],
+      declarations: [
+        WvrIconComponent,
+        WvrIconHostComponent
       ],
       providers: [
         {
           provide: APP_CONFIG,
           useValue: testAppConfig
         },
-        provideMockStore({initialState})
-      ],
-      declarations: [
-        WvrIconComponent,
-        WvrIconHostComponent
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+        provideMockStore({ initialState })
+      ]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.html b/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.html
index c58373e09..baee8f300 100644
--- a/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.html
+++ b/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.html
@@ -1,32 +1,5 @@
 <div role="main" class="container" #animationRoot>
   <div class="jumbotron">
     <h1 class="it-works text-{{themeVariant}}">{{text}}!!!</h1>
-
-    <wvr-modal-component title="Weaver Modal3" btnText="Open Modal">
-      <template modal-body>
-        <wvr-text-component value="Message in the Body"></wvr-text-component>
-        <form novalidate>
-          <div class="form-group">
-            <label for="username">Username</label>
-            <input type="username" class="form-control" name="username" placeholder="Enter username" [(ngModel)]="username">
-          </div>
-          <div class="form-group">
-            <label for="password">Password</label>
-            <input type="password" class="form-control" name="password" placeholder="Enter password" [(ngModel)]="password">
-          </div>
-          <div class="form-check">
-            <input type="checkbox" class="form-check-input" id="exampleCheck1">
-            <label class="form-check-label" for="exampleCheck1">Remember me</label>
-          </div>
-          <p>Username: {{username}}</p>
-          <p>Password: {{password}}</p>
-        </form>
-      </template>
-      <template modal-footer>
-        <wvr-button-component id="my-event-button2" btnTxt="Emit Event" themeVariant="success" emitEvent="buttonTest"></wvr-button-component>
-        <wvr-button-component id="my-cancel-button2" btnTxt="cancel" themeVariant="success" dispatchAction="Modal.closeModal" dispatchActionProps="{id: 'Weaver Modal3'}"></wvr-button-component>
-      </template>
-    </wvr-modal-component>
-
   </div>
 </div>
diff --git a/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.spec.ts b/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.spec.ts
index 2bc28b8ed..2152f3412 100644
--- a/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.spec.ts
@@ -1,21 +1,20 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
+import { initialState } from '../core/store';
 import { APP_CONFIG, testAppConfig } from '../shared/config';
+import { WvrSharedModule } from '../shared/wvr-shared.module';
 import { WvrItWorksComponent } from './wvr-it-works.component';
 
 describe('WvrItWorksComponent', () => {
-  const initialState = { theme: {
-    themes: {}
-  }};
   let component: WvrItWorksComponent;
   let fixture: ComponentFixture<WvrItWorksComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule
+        BrowserAnimationsModule,
+        WvrSharedModule
       ],
       declarations: [WvrItWorksComponent],
       providers: [
@@ -23,9 +22,8 @@ describe('WvrItWorksComponent', () => {
           provide: APP_CONFIG,
           useValue: testAppConfig
         },
-        provideMockStore({initialState})
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+        provideMockStore({ initialState })
+      ]
     })
       .compileComponents()
       .catch(err => { console.error(err); });
@@ -52,9 +50,4 @@ describe('WvrItWorksComponent', () => {
       .toEqual('Weaver Components Work');
   });
 
-  it('should set is mobileAgent', () => {
-    expect(component.isMobileAgent)
-      .toBeFalse();
-  });
-
 });
diff --git a/projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.spec.ts b/projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.spec.ts
index 2806537cd..b440687ef 100644
--- a/projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-list/wvr-list-item/wvr-list-item.component.spec.ts
@@ -1,21 +1,20 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
+import { initialState } from '../../core/store';
 import { APP_CONFIG, testAppConfig } from '../../shared/config';
+import { WvrSharedModule } from '../../shared/wvr-shared.module';
 import { WvrListItemComponent } from './wvr-list-item.component';
 
 describe('WvrListItemComponent', () => {
-  const initialState = { theme: {
-    themes: {}
-  }};
   let component: WvrListItemComponent;
   let fixture: ComponentFixture<WvrListItemComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule
+        BrowserAnimationsModule,
+        WvrSharedModule
       ],
       declarations: [WvrListItemComponent],
       providers: [
@@ -23,11 +22,9 @@ describe('WvrListItemComponent', () => {
           provide: APP_CONFIG,
           useValue: testAppConfig
         },
-        provideMockStore({initialState})
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
-    })
-      .compileComponents();
+        provideMockStore({ initialState })
+      ]
+    }).compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/projects/wvr-elements/src/lib/wvr-list/wvr-list.component.spec.ts b/projects/wvr-elements/src/lib/wvr-list/wvr-list.component.spec.ts
index 63697716b..8d4254def 100644
--- a/projects/wvr-elements/src/lib/wvr-list/wvr-list.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-list/wvr-list.component.spec.ts
@@ -1,21 +1,20 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
+import { initialState } from '../core/store';
 import { APP_CONFIG, testAppConfig } from '../shared/config';
+import { WvrSharedModule } from '../shared/wvr-shared.module';
 import { WvrListComponent } from './wvr-list.component';
 
 describe('WvrListComponent', () => {
-  const initialState = { theme: {
-    themes: {}
-  }};
   let component: WvrListComponent;
   let fixture: ComponentFixture<WvrListComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule
+        BrowserAnimationsModule,
+        WvrSharedModule
       ],
       declarations: [WvrListComponent],
       providers: [
@@ -23,9 +22,8 @@ describe('WvrListComponent', () => {
           provide: APP_CONFIG,
           useValue: testAppConfig
         },
-        provideMockStore({initialState})
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+        provideMockStore({ initialState })
+      ]
     })
       .compileComponents();
   }));
diff --git a/projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest-entry/wvr-manifest-entry.component.spec.ts b/projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest-entry/wvr-manifest-entry.component.spec.ts
index 3e6846793..738f48d07 100644
--- a/projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest-entry/wvr-manifest-entry.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest-entry/wvr-manifest-entry.component.spec.ts
@@ -1,8 +1,10 @@
 import { Component, ViewChild } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
+import { initialState } from '../../core/store';
 import { APP_CONFIG, testAppConfig } from '../../shared/config';
+import { WvrSharedModule } from '../../shared/wvr-shared.module';
 import { WvrManifestComponent } from '../wvr-manifest.component';
 import { WvrManifestEntryComponent } from './wvr-manifest-entry.component';
 
@@ -15,38 +17,38 @@ import { WvrManifestEntryComponent } from './wvr-manifest-entry.component';
   </wvr-manifest-component>
   `
 })
-class WvrManifestTestComponent {
+class WvrManifestHostComponent {
   @ViewChild(WvrManifestComponent) manifest: WvrManifestComponent;
 }
 
 describe('WvrManifestEntryComponent', () => {
-  const initialState = { theme: {
-    themes: {}
-  }};
-  let wvrManifestTestComponent: WvrManifestTestComponent;
-  let fixture: ComponentFixture<WvrManifestTestComponent>;
+  let wvrManifestTestComponent: WvrManifestHostComponent;
+  let fixture: ComponentFixture<WvrManifestHostComponent>;
 
   let childFixture: ComponentFixture<WvrManifestEntryComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        BrowserAnimationsModule
-      ],
-      declarations: [ WvrManifestTestComponent, WvrManifestComponent, WvrManifestEntryComponent ],
-      providers: [
-        {
-          provide: APP_CONFIG,
-          useValue: testAppConfig
-        },
-        provideMockStore({initialState})
-      ]
-    })
-    .compileComponents();
-  });
+  beforeEach(waitForAsync(() => TestBed.configureTestingModule({
+    imports: [
+      BrowserAnimationsModule,
+      WvrSharedModule
+    ],
+    declarations: [
+      WvrManifestHostComponent,
+      WvrManifestComponent,
+      WvrManifestEntryComponent
+    ],
+    providers: [
+      {
+        provide: APP_CONFIG,
+        useValue: testAppConfig
+      },
+      provideMockStore({ initialState })
+    ]
+  })
+    .compileComponents()));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(WvrManifestTestComponent);
+    fixture = TestBed.createComponent(WvrManifestHostComponent);
     wvrManifestTestComponent = fixture.componentInstance;
     fixture.detectChanges();
 
diff --git a/projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest.component.spec.ts b/projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest.component.spec.ts
index 88f3087a5..13c919d9b 100644
--- a/projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-manifest/wvr-manifest.component.spec.ts
@@ -1,8 +1,10 @@
 import { Component, ViewChild } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
+import { initialState } from '../core/store';
 import { APP_CONFIG, testAppConfig } from '../shared/config';
+import { WvrSharedModule } from '../shared/wvr-shared.module';
 import { WvrManifestEntryComponent } from './wvr-manifest-entry/wvr-manifest-entry.component';
 import { WvrManifestComponent } from './wvr-manifest.component';
 
@@ -10,10 +12,10 @@ import { WvrManifestComponent } from './wvr-manifest.component';
   selector: 'wvr-manifest-test-component',
   // tslint:disable-next-line:component-max-inline-declarations
   template: `
-  <wvr-manifest-component name="Test Manifest" base-url="test" mapping-strategy="none">
-    <wvr-manifest-entry-component name="first" path="/first" methods="GET"></wvr-manifest-entry-component>
-    <wvr-manifest-entry-component name="second" path="/second" methods="GET" mapping-strategy="json"></wvr-manifest-entry-component>
-  </wvr-manifest-component>
+    <wvr-manifest-component name="Test Manifest" base-url="test" mapping-strategy="none">
+      <wvr-manifest-entry-component name="first" path="/first" methods="GET"></wvr-manifest-entry-component>
+      <wvr-manifest-entry-component name="second" path="/second" methods="GET" mapping-strategy="json"></wvr-manifest-entry-component>
+    </wvr-manifest-component>
   `
 })
 class WvrManifestHostComponent {
@@ -21,34 +23,28 @@ class WvrManifestHostComponent {
 }
 
 describe('WvrManifestComponent', () => {
-  const initialState = { theme: {
-    themes: {}
-  }};
   let hostComponent: WvrManifestHostComponent;
   let hostFixture: ComponentFixture<WvrManifestHostComponent>;
 
   let entryFixture: ComponentFixture<WvrManifestEntryComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        BrowserAnimationsModule
-      ],
-      declarations: [
-        WvrManifestHostComponent,
-        WvrManifestComponent,
-        WvrManifestEntryComponent
-      ],
-      providers: [
-        {
-          provide: APP_CONFIG,
-          useValue: testAppConfig
-        },
-        provideMockStore({initialState})
-      ]
-    })
-    .compileComponents();
-  });
+  beforeEach(waitForAsync(() => TestBed.configureTestingModule({
+    imports: [
+      BrowserAnimationsModule,
+      WvrSharedModule
+    ],
+    declarations: [
+      WvrManifestComponent,
+      WvrManifestHostComponent
+    ],
+    providers: [
+      {
+        provide: APP_CONFIG,
+        useValue: testAppConfig
+      },
+      provideMockStore({ initialState })
+    ]
+  }).compileComponents()));
 
   beforeEach(() => {
     hostFixture = TestBed.createComponent(WvrManifestHostComponent);
diff --git a/projects/wvr-elements/src/lib/wvr-modal/wvr-modal.component.html b/projects/wvr-elements/src/lib/wvr-modal/wvr-modal.component.html
index 05befdf81..efd152eab 100644
--- a/projects/wvr-elements/src/lib/wvr-modal/wvr-modal.component.html
+++ b/projects/wvr-elements/src/lib/wvr-modal/wvr-modal.component.html
@@ -9,13 +9,13 @@
   </wvr-button-component>
 
   <ng-template #modalTemplateContent>
-    <div class="modal-header {{additionalClasses('header')}}">
+    <div class="modal-header {{additionalHeaderClasses}}">
       <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
     </div>
     <div class="modal-body" modal-body>
       <ng-content select="template[modal-body]"></ng-content>
     </div>
-    <div class="modal-footer {{additionalClasses('footer')}}" modal-footer>
+    <div class="modal-footer {{additionalFooterClasses}}" modal-footer>
       <ng-content select="template[modal-footer]"></ng-content>
     </div>
   </ng-template>
diff --git a/projects/wvr-elements/src/lib/wvr-modal/wvr-modal.component.spec.ts b/projects/wvr-elements/src/lib/wvr-modal/wvr-modal.component.spec.ts
index e2085ab82..d74125e58 100644
--- a/projects/wvr-elements/src/lib/wvr-modal/wvr-modal.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-modal/wvr-modal.component.spec.ts
@@ -1,31 +1,33 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
 import { APP_CONFIG, testAppConfig } from '../shared/config';
-
+import { WvrSharedModule } from '../shared/wvr-shared.module';
 import { WvrModalComponent } from './wvr-modal.component';
 
+// TODO: should be using the store's initial state but this is not currently working.
+//import { initialState } from '../core/store';
+
 describe('WvrModalComponent', () => {
   let component: WvrModalComponent;
   let fixture: ComponentFixture<WvrModalComponent>;
   const initialState = {};
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ WvrModalComponent ],
-      imports: [
-        BrowserAnimationsModule
-      ],
-      providers: [
-        {
-          provide: APP_CONFIG,
-          useValue: testAppConfig
-        },
-        provideMockStore({initialState})
-      ]
-    })
-    .compileComponents();
-  });
+  beforeEach(waitForAsync(() => TestBed.configureTestingModule({
+    imports: [
+      BrowserAnimationsModule,
+      WvrSharedModule
+    ],
+    declarations: [WvrModalComponent],
+    providers: [
+      {
+        provide: APP_CONFIG,
+        useValue: testAppConfig
+      },
+      provideMockStore({ initialState })
+    ]
+  })
+    .compileComponents()));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(WvrModalComponent);
@@ -35,7 +37,7 @@ describe('WvrModalComponent', () => {
 
   it('should create', () => {
     expect(component)
-    .toBeTruthy();
+      .toBeTruthy();
   });
 
   it('should have `btnVisible` defined', () => {
diff --git a/projects/wvr-elements/src/lib/wvr-modal/wvr-modal.component.ts b/projects/wvr-elements/src/lib/wvr-modal/wvr-modal.component.ts
index b9045b5f2..e94ecdc9b 100644
--- a/projects/wvr-elements/src/lib/wvr-modal/wvr-modal.component.ts
+++ b/projects/wvr-elements/src/lib/wvr-modal/wvr-modal.component.ts
@@ -28,7 +28,7 @@ export class WvrModalComponent extends WvrBaseComponent implements OnInit {
   @Input() btnText: string;
 
   /** This defines the modal id. */
-  modalId: string;
+  @Input() modalId: string;
 
   /** Allows for the override of theme variant for modal component. */
   @Input() themeVariant: ThemeVariantName = 'primary';
@@ -58,7 +58,7 @@ export class WvrModalComponent extends WvrBaseComponent implements OnInit {
 
   constructor(
     injector: Injector,
-    private modalService: NgbModal
+    private readonly modalService: NgbModal
   ) {
     super(injector);
   }
@@ -66,7 +66,7 @@ export class WvrModalComponent extends WvrBaseComponent implements OnInit {
   ngOnInit(): void {
     super.ngOnInit();
 
-    this.modalService.activeInstances.subscribe((modalRefs: NgbModalRef[]) => {
+    this.modalService.activeInstances.subscribe((modalRefs: Array<NgbModalRef>) => {
       setTimeout(() => {
         if (!!this.modalRef && modalRefs.length > 0) {
           ['body', 'footer'].forEach(content => {
@@ -75,7 +75,7 @@ export class WvrModalComponent extends WvrBaseComponent implements OnInit {
               const element: Element = this.eRef.nativeElement.querySelector(`div[modal-${content}]`);
               const clone = template.content.children.length > 0
                 ? template.content.cloneNode(true)
-                : template
+                : template;
               Array.from(clone.children)
                 .forEach((elem: Element) => {
                   element.appendChild(elem);
@@ -87,9 +87,14 @@ export class WvrModalComponent extends WvrBaseComponent implements OnInit {
     });
 
     const defaultName = 'Weaver Modal';
-    this.modalId = !this.title ? `${defaultName
-      .split(' ')
-      .join('')}-${this.id}` : this.title;
+
+    this.modalId = !!this.modalId
+      ? this.modalId
+      : !!this.title
+      ? this.title
+      : `${defaultName
+        .split(' ')
+        .join('')}-${this.id}`;
 
     this.title = !this.title ? defaultName : this.title;
 
@@ -149,32 +154,22 @@ export class WvrModalComponent extends WvrBaseComponent implements OnInit {
     this.store.dispatch(ModalActions.openModal({ id: this.modalId }));
   }
 
-  /** This provides background, border and text color properties based on the them variant provided . */
-  additionalClasses(value): string {
-    let additionalClasses = '';
-    switch (value) {
-      case 'header':
-        additionalClasses = this.modalHeaderThemeVariant ?
-          `bg-${this.modalHeaderThemeVariant} border-${this.modalHeaderThemeVariant} ${this.getTextColor(this.modalHeaderThemeVariant)}` :
-          this.themeVariant ?
-            `bg-${this.themeVariant} border-${this.themeVariant} ${this.getTextColor(this.themeVariant)}` :
-            'bg-light text-dark';
-        break;
-      case 'footer':
-        additionalClasses = this.modalFooterThemeVariant ?
-          `bg-${this.modalFooterThemeVariant} border-${this.modalFooterThemeVariant} ${this.getTextColor(this.modalFooterThemeVariant)}` :
-          this.themeVariant ?
-            `bg-${this.themeVariant} border-${this.themeVariant} ${this.getTextColor(this.themeVariant)}` :
-            'bg-light text-dark';
-        break;
-      default:
-    }
-
-    return additionalClasses;
+  get additionalHeaderClasses(): string {
+    return this.modalHeaderThemeVariant ?
+      `bg-${this.modalHeaderThemeVariant} border-${this.modalHeaderThemeVariant} ${this.getTextColor(this.modalHeaderThemeVariant)}` :
+      this.themeVariant ?
+        `bg-${this.themeVariant} border-${this.themeVariant} ${this.getTextColor(this.themeVariant)}` :
+        'bg-light text-dark';
   }
 
-  getTextColor(themeVariant): string {
-    return ((themeVariant === 'warning') || (themeVariant === 'light')) ? 'text-dark' : 'text-white';
+  get additionalFooterClasses(): string {
+    return this.modalFooterThemeVariant ?
+      `bg-${this.modalFooterThemeVariant} border-${this.modalFooterThemeVariant} ${this.getTextColor(this.modalFooterThemeVariant)}` :
+      this.themeVariant ?
+        `bg-${this.themeVariant} border-${this.themeVariant} ${this.getTextColor(this.themeVariant)}` :
+        'bg-light text-dark';
   }
 
+  getTextColor = (themeVariant): string => ((themeVariant === 'warning') || (themeVariant === 'light')) ? 'text-dark' : 'text-white';
+
 }
diff --git a/projects/wvr-elements/src/lib/wvr-nav-list/wvr-nav-li/wvr-nav-li.component.spec.ts b/projects/wvr-elements/src/lib/wvr-nav-list/wvr-nav-li/wvr-nav-li.component.spec.ts
index 485bafe6d..2d6e3436b 100644
--- a/projects/wvr-elements/src/lib/wvr-nav-list/wvr-nav-li/wvr-nav-li.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-nav-list/wvr-nav-li/wvr-nav-li.component.spec.ts
@@ -1,21 +1,20 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
+import { initialState } from '../../core/store';
 import { APP_CONFIG, testAppConfig } from '../../shared/config';
+import { WvrSharedModule } from '../../shared/wvr-shared.module';
 import { WvrNavLiComponent } from './wvr-nav-li.component';
 
 describe('WvrNavLiComponent', () => {
-  const initialState = { theme: {
-    themes: {}
-  }};
   let component: WvrNavLiComponent;
   let fixture: ComponentFixture<WvrNavLiComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule
+        BrowserAnimationsModule,
+        WvrSharedModule
       ],
       declarations: [WvrNavLiComponent],
       providers: [
@@ -23,9 +22,8 @@ describe('WvrNavLiComponent', () => {
           provide: APP_CONFIG,
           useValue: testAppConfig
         },
-        provideMockStore({initialState})
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+        provideMockStore({ initialState })
+      ]
     })
       .compileComponents()
       .catch(err => { console.error(err); });
diff --git a/projects/wvr-elements/src/lib/wvr-nav-list/wvr-nav-list.component.spec.ts b/projects/wvr-elements/src/lib/wvr-nav-list/wvr-nav-list.component.spec.ts
index 5d84a33cd..085030a77 100644
--- a/projects/wvr-elements/src/lib/wvr-nav-list/wvr-nav-list.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-nav-list/wvr-nav-list.component.spec.ts
@@ -1,22 +1,21 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
+import { initialState } from '../core/store';
 import { Alignment } from '../shared/alignment.enum';
 import { APP_CONFIG, testAppConfig } from '../shared/config';
+import { WvrSharedModule } from '../shared/wvr-shared.module';
 import { WvrNavListComponent } from './wvr-nav-list.component';
 
 describe('WvrNavListComponent', () => {
-  const initialState = { theme: {
-    themes: {}
-  }};
   let component: WvrNavListComponent;
   let fixture: ComponentFixture<WvrNavListComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule
+        BrowserAnimationsModule,
+        WvrSharedModule
       ],
       declarations: [WvrNavListComponent],
       providers: [
@@ -24,9 +23,8 @@ describe('WvrNavListComponent', () => {
           provide: APP_CONFIG,
           useValue: testAppConfig
         },
-        provideMockStore({initialState})
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+        provideMockStore({ initialState })
+      ]
     })
       .compileComponents()
       .catch(err => { console.error(err); });
diff --git a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.spec.ts b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.spec.ts
index 895070c04..2866c0c5d 100644
--- a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tab/wvr-tab.component.spec.ts
@@ -1,38 +1,34 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
+import { initialState } from '../../core/store';
 import { APP_CONFIG, testAppConfig } from '../../shared/config';
+import { WvrSharedModule } from '../../shared/wvr-shared.module';
 import { WvrTabsComponent } from '../wvr-tabs.component';
 import { WvrTabComponent } from './wvr-tab.component';
 
 describe('WvrTabComponent', () => {
-  const initialState = { theme: {
-    themes: {}
-  }};
   let component: WvrTabComponent;
   let fixture: ComponentFixture<WvrTabComponent>;
 
   let parentComponent: WvrTabsComponent;
   let parentFixture: ComponentFixture<WvrTabsComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        BrowserAnimationsModule
-      ],
-      declarations: [WvrTabsComponent, WvrTabComponent],
-      providers: [
-        {
-          provide: APP_CONFIG,
-          useValue: testAppConfig
-        },
-        provideMockStore({initialState})
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
-    })
-      .compileComponents();
-  });
+  beforeEach(waitForAsync(() => TestBed.configureTestingModule({
+    imports: [
+      BrowserAnimationsModule,
+      WvrSharedModule
+    ],
+    declarations: [WvrTabComponent],
+    providers: [
+      {
+        provide: APP_CONFIG,
+        useValue: testAppConfig
+      },
+      provideMockStore({ initialState })
+    ]
+  })
+    .compileComponents()));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(WvrTabComponent);
diff --git a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.html b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.html
index 727375557..047460d20 100644
--- a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.html
+++ b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.html
@@ -2,7 +2,7 @@
   <ng-container *ngTemplateOutlet="content"></ng-container>
 </ul>
 
-<tab-content [innerHTML]="activeTabContent" [id]="tabContentID" role="tabpanel" [attr.aria-labelledby]="activeTab?.htmlId"></tab-content>
+<tab-content [innerHTML]="activeTabContent | safe: 'html'" [id]="tabContentID" role="tabpanel" [attr.aria-labelledby]="activeTab?.htmlId"></tab-content>
 
 <ng-template #content>
   <ng-content select="wvre-tab, wvr-tab-component"></ng-content>
diff --git a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.spec.ts b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.spec.ts
index c6d59f723..637e5ae23 100644
--- a/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-tabs/wvr-tabs.component.spec.ts
@@ -1,37 +1,33 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
+import { initialState } from '../core/store';
 import { APP_CONFIG, testAppConfig } from '../shared/config';
+import { WvrSharedModule } from '../shared/wvr-shared.module';
 import { WvrTabComponent } from './wvr-tab/wvr-tab.component';
 import { WvrTabsComponent } from './wvr-tabs.component';
 
 describe('WvrTabsComponent', () => {
-  const initialState = { theme: {
-    themes: {}
-  }};
   let component: WvrTabsComponent;
   let fixture: ComponentFixture<WvrTabsComponent>;
   let wvrTabComponent: WvrTabComponent;
   let tabFixture: ComponentFixture<WvrTabComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        BrowserAnimationsModule
-      ],
-      declarations: [WvrTabsComponent],
-      providers: [
-        {
-          provide: APP_CONFIG,
-          useValue: testAppConfig
-        },
-        provideMockStore({initialState})
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
-    })
-      .compileComponents();
-  });
+  beforeEach(waitForAsync(() => TestBed.configureTestingModule({
+    imports: [
+      BrowserAnimationsModule,
+      WvrSharedModule
+    ],
+    declarations: [WvrTabsComponent],
+    providers: [
+      {
+        provide: APP_CONFIG,
+        useValue: testAppConfig
+      },
+      provideMockStore({ initialState })
+    ]
+  })
+    .compileComponents()));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(WvrTabsComponent);
diff --git a/projects/wvr-elements/src/lib/wvr-text/wvr-text.component.spec.ts b/projects/wvr-elements/src/lib/wvr-text/wvr-text.component.spec.ts
index c21a2daa4..f0504b2e2 100644
--- a/projects/wvr-elements/src/lib/wvr-text/wvr-text.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-text/wvr-text.component.spec.ts
@@ -1,21 +1,20 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
+import { initialState } from '../core/store';
 import { APP_CONFIG, testAppConfig } from '../shared/config';
+import { WvrSharedModule } from '../shared/wvr-shared.module';
 import { WvrTextComponent } from './wvr-text.component';
 
 describe('WvrTextComponent', () => {
-  const initialState = { theme: {
-    themes: {}
-  }};
   let component: WvrTextComponent;
   let fixture: ComponentFixture<WvrTextComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        BrowserAnimationsModule
+        BrowserAnimationsModule,
+        WvrSharedModule
       ],
       declarations: [WvrTextComponent],
       providers: [
@@ -23,9 +22,8 @@ describe('WvrTextComponent', () => {
           provide: APP_CONFIG,
           useValue: testAppConfig
         },
-        provideMockStore({initialState})
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+        provideMockStore({ initialState })
+      ]
     })
       .compileComponents()
       .catch(err => { console.error(err); });
diff --git a/projects/wvr-elements/src/lib/wvr-text/wvr-text.component.ts b/projects/wvr-elements/src/lib/wvr-text/wvr-text.component.ts
index 112453453..2adff5d45 100644
--- a/projects/wvr-elements/src/lib/wvr-text/wvr-text.component.ts
+++ b/projects/wvr-elements/src/lib/wvr-text/wvr-text.component.ts
@@ -20,6 +20,8 @@ export class WvrTextComponent {
 
   @Input() themeVariant: ThemeVariantName;
 
+  @Input() color: string;
+
   /** Allows for the override of font-size property for wvre-text */
   @HostBinding('style.--wvr-text-font-size') @Input() fontSize;
 
@@ -41,14 +43,8 @@ export class WvrTextComponent {
   /** Allows for the override of line-height property for wvre-text */
   @HostBinding('style.--wvr-text-line-height') @Input() lineHeight;
 
-  _textColor;
-
-  set textColor(value: string) {
-    this._textColor = value;
-  }
-
   @HostBinding('style.--wvr-text-color') get textColor(): string {
-    return this.themeVariant ? `var(--${this.themeVariant}-button-color)` : this._textColor;
+    return this.themeVariant ? `var(--${this.themeVariant}-button-color)` : this.color;
   }
 
   /** Allows for the override of text-align property for wvre-text */
diff --git a/projects/wvr-elements/src/lib/wvr-text/wvr-text.component.ud-examples.html b/projects/wvr-elements/src/lib/wvr-text/wvr-text.component.ud-examples.html
index 304d7aca0..272d4f766 100644
--- a/projects/wvr-elements/src/lib/wvr-text/wvr-text.component.ud-examples.html
+++ b/projects/wvr-elements/src/lib/wvr-text/wvr-text.component.ud-examples.html
@@ -4,5 +4,6 @@
   </desciption>
   <snippet>
     <wvre-text value="Hello World"></wvre-text>
+    <wvre-text value="This text is red." color="red"></wvre-text>
   </snippet>
 </example>
\ No newline at end of file
diff --git a/projects/wvr-elements/src/lib/wvr-theme/wvr-theme.component.spec.ts b/projects/wvr-elements/src/lib/wvr-theme/wvr-theme.component.spec.ts
index 5d022fb5e..89e7d7fad 100644
--- a/projects/wvr-elements/src/lib/wvr-theme/wvr-theme.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-theme/wvr-theme.component.spec.ts
@@ -1,32 +1,30 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideMockStore } from '@ngrx/store/testing';
+import { initialState } from '../core/store';
 import { APP_CONFIG, testAppConfig } from '../shared/config';
+import { WvrSharedModule } from '../shared/wvr-shared.module';
 import { WvrThemeComponent } from './wvr-theme.component';
 
 describe('WvrThemeComponent', () => {
-  const initialState = { theme: {
-    themes: {}
-  }};
   let component: WvrThemeComponent;
   let fixture: ComponentFixture<WvrThemeComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        BrowserAnimationsModule
-      ],
-      declarations: [ WvrThemeComponent ],
-      providers: [
-        {
-          provide: APP_CONFIG,
-          useValue: testAppConfig
-        },
-        provideMockStore({initialState})
-      ]
-    })
-    .compileComponents();
-  });
+  beforeEach(waitForAsync(() => TestBed.configureTestingModule({
+    imports: [
+      BrowserAnimationsModule,
+      WvrSharedModule
+    ],
+    declarations: [WvrThemeComponent],
+    providers: [
+      {
+        provide: APP_CONFIG,
+        useValue: testAppConfig
+      },
+      provideMockStore({ initialState })
+    ]
+  })
+    .compileComponents()));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(WvrThemeComponent);
diff --git a/projects/wvr-elements/src/lib/wvr-wysiwyg/wvr-wysiwyg-menu.ts b/projects/wvr-elements/src/lib/wvr-wysiwyg/wvr-wysiwyg-menu.ts
index e337b9139..48b033cc5 100644
--- a/projects/wvr-elements/src/lib/wvr-wysiwyg/wvr-wysiwyg-menu.ts
+++ b/projects/wvr-elements/src/lib/wvr-wysiwyg/wvr-wysiwyg-menu.ts
@@ -1,4 +1,4 @@
-import { WvrwysiwygSubMenu } from "./wvr-wysiwyg-sub-menu";
+import { WvrwysiwygSubMenu } from './wvr-wysiwyg-sub-menu';
 
 export interface WvrWysiwygMenu {
   file: WvrwysiwygSubMenu;
diff --git a/projects/wvr-elements/src/lib/wvr-wysiwyg/wvr-wysiwyg.component.spec.ts b/projects/wvr-elements/src/lib/wvr-wysiwyg/wvr-wysiwyg.component.spec.ts
index 2962fd558..2b3995b03 100644
--- a/projects/wvr-elements/src/lib/wvr-wysiwyg/wvr-wysiwyg.component.spec.ts
+++ b/projects/wvr-elements/src/lib/wvr-wysiwyg/wvr-wysiwyg.component.spec.ts
@@ -1,13 +1,14 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, ViewChild } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { provideMockStore } from '@ngrx/store/testing';
 import { APP_CONFIG, testAppConfig } from '../shared/config';
-
+import { WvrSharedModule } from '../shared/wvr-shared.module';
 import { WvrWysiwygComponent } from './wvr-wysiwyg.component';
 
+// TODO: should be using the store's initial state but this is not currently working.
+//import { initialState } from '../core/store';
+
 @Component({
   selector: 'wvr-wysiwyg-test-component',
   // tslint:disable-next-line:component-max-inline-declarations
@@ -31,39 +32,38 @@ describe('WvrWysiwygComponent', () => {
   let hostComponent: WvrWysiwygHostComponent;
   let hostFixture: ComponentFixture<WvrWysiwygHostComponent>;
 
-  let store: MockStore;
-    // tslint:disable-next-line: deprecation
-    beforeEach(waitForAsync(() => {
-      TestBed.configureTestingModule({
-        imports: [
-          BrowserAnimationsModule
-        ],
-        providers: [
-          {
-            provide: APP_CONFIG,
-            useValue: testAppConfig
-          },
-          provideMockStore({initialState})
-        ],
-        declarations: [
-          WvrWysiwygHostComponent,
-          WvrWysiwygComponent
-        ],
-        schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
-      })
+  // tslint:disable-next-line: deprecation
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        BrowserAnimationsModule,
+        WvrSharedModule
+      ],
+      declarations: [
+        WvrWysiwygComponent,
+        WvrWysiwygHostComponent
+      ],
+      providers: [
+        {
+          provide: APP_CONFIG,
+          useValue: testAppConfig
+        },
+        provideMockStore({ initialState })
+      ]
+    })
       .compileComponents();
-    }));
+  }));
 
-    beforeEach(() => {
-      fixture = TestBed.createComponent(WvrWysiwygComponent);
-      component = fixture.componentInstance;
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WvrWysiwygComponent);
+    component = fixture.componentInstance;
 
-      hostFixture = TestBed.createComponent(WvrWysiwygHostComponent);
-      hostComponent = hostFixture.componentInstance;
+    hostFixture = TestBed.createComponent(WvrWysiwygHostComponent);
+    hostComponent = hostFixture.componentInstance;
 
-      hostFixture.detectChanges();
-      fixture.detectChanges();
-    });
+    hostFixture.detectChanges();
+    fixture.detectChanges();
+  });
 
   it('should create', () => {
     expect(component).toBeTruthy();
@@ -88,13 +88,13 @@ describe('WvrWysiwygComponent', () => {
     expect(component.config.base_url)
       .toEqual('tinymce');
     expect(component.config.menu)
-    .toEqual(component.menu);
+      .toEqual(component.menu);
 
     expect(component.config.plugins)
-    .toEqual(component.plugins);
+      .toEqual(component.plugins);
 
     const plugins = ['preview anchor searchreplace visualblocks code',
-                    'fullscreen insertdatetime media table paste', 'help wordcount print preview save'];
+      'fullscreen insertdatetime media table paste', 'help wordcount print preview save'];
     component.plugins = plugins;
     fixture.detectChanges();
 
@@ -103,11 +103,11 @@ describe('WvrWysiwygComponent', () => {
 
     //skin
     expect(component.config.skin)
-    .toEqual(component.skin);
+      .toEqual(component.skin);
 
     //toolbar
     expect(component.config.toolbar)
-    .toEqual(component.toolbar);
+      .toEqual(component.toolbar);
 
     const toolbar = 'undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table pagebreak | charmap codesample image | removeformat | help | cancel save';
     component.toolbar = toolbar;
@@ -168,8 +168,8 @@ describe('WvrWysiwygComponent', () => {
 
     Object.keys(editorMenu).forEach(editorMenuKey => {
       Object.keys(component.menu).forEach(menuKey => {
-        if(editorMenuKey === menuKey) {
-          expect(JSON.stringify(editorMenu[editorMenuKey]) === JSON.stringify(component.menu[menuKey]) )
+        if (editorMenuKey === menuKey) {
+          expect(JSON.stringify(editorMenu[editorMenuKey]) === JSON.stringify(component.menu[menuKey]))
             .toBe(true);
         }
       });
diff --git a/projects/wvr-elements/src/lib/wvr-wysiwyg/wvr-wysiwyg.component.ts b/projects/wvr-elements/src/lib/wvr-wysiwyg/wvr-wysiwyg.component.ts
index 680092e31..fd314e555 100644
--- a/projects/wvr-elements/src/lib/wvr-wysiwyg/wvr-wysiwyg.component.ts
+++ b/projects/wvr-elements/src/lib/wvr-wysiwyg/wvr-wysiwyg.component.ts
@@ -2,7 +2,6 @@ import { Component, Injector, Input, OnDestroy, OnInit, ViewChild } from '@angul
 import { select } from '@ngrx/store';
 import { EditorComponent } from '@tinymce/tinymce-angular';
 import * as JSON5 from 'json5';
-import { Subscription } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
 import tinymce from 'tinymce';
 import { selectWysiwygById } from '../core/store';
@@ -38,13 +37,11 @@ export class WvrWysiwygComponent extends WvrBaseComponent implements OnInit, OnD
   @Input() set toolbar(toolbar: string) { this.config.toolbar = toolbar; }
   get toolbar(): string { return this.config.toolbar; }
 
-  @Input() set menu(editorMenu: any) { this.config.menu = JSON5.parse(editorMenu) as WvrWysiwygMenu; }
+  @Input() set menu(editorMenu: any) { this.config.menu = JSON5.parse(editorMenu); }
   get menu(): any { return this.config.menu; }
 
   @Input() emitSaveEvent: string;
 
-  subscription: Subscription;
-
   config = {
     base_url: 'tinymce',
     skin: 'oxide',
@@ -57,8 +54,12 @@ export class WvrWysiwygComponent extends WvrBaseComponent implements OnInit, OnD
     toolbar: 'undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table pagebreak | charmap codesample image | removeformat | help | cancel save',
     menu: (wvrEditor as any).default,
     /* TODO: Issue #316. */
-    save_oncancelcallback: $event => this.onReset($event),
-    save_onsavecallback: $event => this.onSave($event)
+    save_oncancelcallback: $event => {
+      this.onReset($event);
+    },
+    save_onsavecallback: $event => {
+      this.onSave($event);
+    }
   };
 
   htmlId = `wvr-wysiwyg-${this.id}`;
@@ -78,13 +79,15 @@ export class WvrWysiwygComponent extends WvrBaseComponent implements OnInit, OnD
       }
     }));
 
-    this.subscription = this.store.pipe(
-      select(selectWysiwygById(`${this.id}`)),
-      filter(wysiwyg => !!wysiwyg),
-      map(wysiwyg => wysiwyg.content)
-    ).subscribe((content: string) => {
-      this.content = content;
-    });
+    this.subscriptions.push(this.store
+      .pipe(
+        select(selectWysiwygById(`${this.id}`)),
+        filter(wysiwyg => !!wysiwyg),
+        map(wysiwyg => wysiwyg.content)
+      )
+      .subscribe((content: string) => {
+        this.content = content;
+      }));
   }
 
   ngOnDestroy(): void {
@@ -92,9 +95,6 @@ export class WvrWysiwygComponent extends WvrBaseComponent implements OnInit, OnD
     if (!!this.editor) {
       tinymce.remove(this.editor);
     }
-    if (!!this.subscription) {
-      this.subscription.unsubscribe();
-    }
   }
 
   onReset($event): void {
diff --git a/projects/wvr-elements/src/public-api.ts b/projects/wvr-elements/src/public-api.ts
index 489cf2a27..fab532f5c 100644
--- a/projects/wvr-elements/src/public-api.ts
+++ b/projects/wvr-elements/src/public-api.ts
@@ -6,9 +6,7 @@ export * from './lib/core/actions';
 export * from './lib/core/animation.service';
 export * from './lib/core/component-registry.service';
 export * from './lib/core/effects';
-export * from './lib/core/mobile.service';
 export * from './lib/core/store';
-export * from './lib/core/template.service';
 export * from './lib/core/wvr-core.module';
 export * from './lib/shared/alignment.enum';
 export * from './lib/shared/config';
@@ -37,4 +35,3 @@ export * from './lib/wvr-tabs/wvr-tabs.component';
 export * from './lib/wvr-text/wvr-text.component';
 export * from './lib/wvr-theme/wvr-theme.component';
 export * from './lib/wvr-wysiwyg/wvr-wysiwyg.component';
-
diff --git a/projects/wvr-elements/src/test.ts b/projects/wvr-elements/src/test.ts
index 6bb2b9835..e9d930e01 100644
--- a/projects/wvr-elements/src/test.ts
+++ b/projects/wvr-elements/src/test.ts
@@ -2,8 +2,8 @@
 // tslint:disable-next-line:no-import-side-effect
 import '@angular/localize/init';
 /* tslint:disable: no-import-side-effect */
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
+import 'zone.js';
+import 'zone.js/testing';
 /* tslint:enable: no-import-side-effect */
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
diff --git a/projects/wvr-elements/tsconfig.lib.json b/projects/wvr-elements/tsconfig.lib.json
index cc3c2652a..ba2d8a636 100644
--- a/projects/wvr-elements/tsconfig.lib.json
+++ b/projects/wvr-elements/tsconfig.lib.json
@@ -1,7 +1,8 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "../../out-tsc/projects"
+    "outDir": "../../out-tsc/projects",
+    "emitDecoratorMetadata": false
   },
   "angularCompilerOptions": {
     "enableIvy": false
diff --git a/scripts/serve-dist.js b/scripts/serve-dist.js
index 8361f9d75..3c08593d1 100644
--- a/scripts/serve-dist.js
+++ b/scripts/serve-dist.js
@@ -1,38 +1,21 @@
 #!/usr/bin/env node
 
 const fs = require('fs');
-const process = require('process');
-const StaticServer = require('static-server');
-const fsPromises = fs.promises;
-const basePath = 'dist/bundle';
+const path = require('path');
+const express = require('express');
 
-const server = new StaticServer({
-  rootPath: 'dist/bundle',
-  port: 8080,
-  name: 'wvr-component-static-server',
-  followSymlink: true,
-});
+const server = express();
 
-server.start(function () {
-  console.log('Server listening to', server.port);
-  fsPromises.copyFile('src/index.html', `${basePath}/index.html`);
-});
+server.use(express.static('www', { maxAge: 3600000 }));
 
-process.on('exit', function () {
-  fs.unlink(`${basePath}/index.html`, err => {
-    if (err) throw err;
-  });
-  fs.unlink(`${basePath}/config.json`, err => {
-    if (err) throw err;
-  });
-  console.log('Cleaning up');
-});
+fs.copyFileSync('src/index.html', `dist/bundle/index.html`);
 
-process.on('SIGINT', function () {
-  process.exit();
+server.get('/', (req, res) => {
+  res.sendFile(path.join(__dirname, '../dist/bundle/index.html'));
 });
 
-process.on('uncaughtException', function (e) {
-  console.log(e.stack);
-  process.exit(99);
+server.use('/', express.static(path.join(__dirname, '../dist/bundle')));
+
+server.listen(8080, () => {
+  console.log('Server listening to', 8080);
 });
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 33b864609..922590d92 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,29 +1,27 @@
 import { Injector, NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
-import { AppConfig, APP_CONFIG, registerCustomElements, showHiddentContent, WvrCoreModule, WvrSharedModule, wvrTimeout, WVR_ELEMENTS } from '../../projects/wvr-elements/src/public-api';
+import { AppConfig, APP_CONFIG, registerWeaverElements, WvrCoreModule, WvrSharedModule, WVR_ELEMENTS } from '../../projects/wvr-elements/src/public-api';
 
 const getTinyMCEScript = (appConfig: AppConfig): string => `${appConfig.assetsUrl}/tinymce/tinymce.min.js`;
 
 @NgModule({
   imports: [
     BrowserAnimationsModule,
-    BrowserModule,
     StoreDevtoolsModule.instrument({
       maxAge: 25, // retains last 25 states
       logOnly: true // restrict extension to log-only mode
     }),
-    WvrSharedModule,
-    WvrCoreModule
+    WvrCoreModule,
+    WvrSharedModule
   ],
   exports: [],
   providers: [
     {
       provide: TINYMCE_SCRIPT_SRC,
       useFactory: getTinyMCEScript,
-      deps: [ APP_CONFIG ]
+      deps: [APP_CONFIG]
     }
   ],
   declarations: [],
@@ -33,26 +31,12 @@ const getTinyMCEScript = (appConfig: AppConfig): string => `${appConfig.assetsUr
 })
 export class AppModule {
 
-  constructor(private readonly injector: Injector) {
-
+  constructor(injector: Injector) {
+    registerWeaverElements(injector, WVR_ELEMENTS);
   }
 
   ngDoBootstrap(): void {
-    registerCustomElements(this.injector, WVR_ELEMENTS);
-    showHiddentContent(this.injector);
-
-    wvrTimeout(() => {
-      const elements = document.querySelectorAll('.wvr-components-loading:not(body)');
-      elements.forEach(function(element) {
-        element.classList.remove('wvr-components-loading');
-      });
-
-      const bodyElem = document.querySelector('body');
-      if (bodyElem) {
-        bodyElem.classList.remove('wvr-components-loading');
-        bodyElem.classList.remove('wvr-hidden');
-      }
-    });
+    // do nothing
   }
 
 }
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 7b4f817ad..30d7bccb1 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -13,4 +13,4 @@ export const environment = {
  * This import should be commented out in production mode because it will have a negative impact
  * on performance if an error is thrown.
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
diff --git a/src/index-docs.html b/src/index-docs.html
index 62ca74e6e..fa9da714b 100644
--- a/src/index-docs.html
+++ b/src/index-docs.html
@@ -8,10 +8,28 @@
   <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   <style>
+    body {
+      transition: opacity 0.5s ease-in;
+    }
+
+    .wvr-components-loading {
+      opacity: 0;
+    }
+
+    .wvr-hidden,
+    [wvr-hide-content] {
+      display: none;
+    }
+
+    .index-container {
+      margin: 12px;
+      padding: 15px;
+      border-bottom: 1px solid grey;
+    }
   </style>
 </head>
 
-<body>
+<body class="wvr-components-loading">
   <wvre-header
     top-nav-theme-variant="secondary"
     title-row-theme-variant="primary"
diff --git a/src/index-reports.html b/src/index-reports.html
index 697aaf40c..567f8e21a 100644
--- a/src/index-reports.html
+++ b/src/index-reports.html
@@ -8,10 +8,28 @@
   <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   <style>
+    body {
+      transition: opacity 0.5s ease-in;
+    }
+
+    .wvr-components-loading {
+      opacity: 0;
+    }
+
+    .wvr-hidden,
+    [wvr-hide-content] {
+      display: none;
+    }
+
+    .index-container {
+      margin: 12px;
+      padding: 15px;
+      border-bottom: 1px solid grey;
+    }
   </style>
 </head>
 
-<body>
+<body class="wvr-components-loading">
   <wvre-header
     top-nav-theme-variant="secondary"
     title-row-theme-variant="primary"
diff --git a/src/index-static.html b/src/index-static.html
index 3411328b7..39f59d31a 100644
--- a/src/index-static.html
+++ b/src/index-static.html
@@ -8,10 +8,28 @@
   <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   <style>
+    body {
+      transition: opacity 0.5s ease-in;
+    }
+
+    .wvr-components-loading {
+      opacity: 0;
+    }
+
+    .wvr-hidden,
+    [wvr-hide-content] {
+      display: none;
+    }
+
+    .index-container {
+      margin: 12px;
+      padding: 15px;
+      border-bottom: 1px solid grey;
+    }
   </style>
 </head>
 
-<body>
+<body class="wvr-components-loading">
   <wvre-header
     top-nav-theme-variant="secondary"
     title-row-theme-variant="primary"
diff --git a/src/index.html b/src/index.html
index 30e210a63..6fd09326d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,15 +11,25 @@
       padding: 0;
       box-sizing: border-box;
     }
+
+    body {
+      transition: opacity 0.5s ease-in;
+    }
+
+    .wvr-components-loading {
+      opacity: 0;
+    }
+
+    .wvr-hidden,
     [wvr-hide-content] {
       display: none;
     }
+
     .index-container {
       margin: 12px;
       padding: 15px;
       border-bottom: 1px solid grey;
     }
-
   </style>
 
 </head>
@@ -175,12 +185,12 @@
   <div class="container index-container">
     <wvre-text value="Modal Component with Customized Body" text-decoration="underline"></wvre-text><br /><br />
 
-    <wvre-modal title="Weaver Modal" btn-text="Launch Modal">
+    <wvre-modal title="Weaver Modal" btn-text="Launch Modal" modal-id="customId">
       <template modal-body>
         <wvre-text value="Modal Message in the Body"></wvre-text>
       </template>
       <template modal-footer>
-        <wvre-button btn-txt="cancel" theme-variant="secondary" dispatch-action="Modal.closeModal" dispatch-action-props="{id: 'Weaver Modal'}"></wvre-button>
+        <wvre-button btn-txt="cancel" theme-variant="secondary" dispatch-action="Modal.closeModal" dispatch-action-props="{id: 'customId'}"></wvre-button>
       </template>
     </wvre-modal>
 
@@ -204,11 +214,6 @@
     window.addEventListener('buttonTest', console.log);
   </script>
 
-  <div class="container index-container">
-    <wvre-text value="Editor Component" text-decoration="underline"></wvre-text><br /><br />
-    <wvre-wysiwyg id="wysiwygEditor" skin="oxide-dark" initial-value="Hello, World!" emit-save-event="wysiwygsave"></wvre-wysiwyg>
-  </div>
-
   <div class="container index-container">
     <wvre-text value="Alert Component" text-decoration="underline"></wvre-text><br /><br />
     <wvre-alert theme-variant="primary" alert-type="basic">
@@ -263,7 +268,7 @@ <h4 class="alert-heading">
         <wvre-text value="Card Title"></wvre-text>
       </wvre-card-title>
 
-      <wvre-card-img src="assets/lighthouse.svg"></wvre-card-img>
+      <wvre-card-img src="assets/lighthouse.svg" height="286" width="286"></wvre-card-img>
 
       <wvre-card-link href="http://www.google.com">
         <wvre-text value="Google"></wvre-text>
@@ -875,11 +880,13 @@ <h3><wvre-text value="Second Tab Header"></wvre-text></h3>
   </div>
 
   <div class="container index-container">
+    <wvre-text value="Editor Component" text-decoration="underline"></wvre-text><br /><br />
+    <wvre-wysiwyg id="wysiwygEditor" skin="oxide-dark" initial-value="Hello, World!" emit-save-event="wysiwygsave"></wvre-wysiwyg>
+  </div>
 
+  <div class="container index-container">
     <wvre-text value="Wvr Theme Color Preview" text-decoration="underline"></wvre-text><br /><br />
-
     <wvre-color-preview></wvre-color-preview>
-
   </div>
 
   <wvre-footer theme="DefaultColorTheme">
diff --git a/src/polyfills.ts b/src/polyfills.ts
index 781245add..c1acca295 100644
--- a/src/polyfills.ts
+++ b/src/polyfills.ts
@@ -62,20 +62,22 @@ import 'web-animations-js';  // Run `npm install --save web-animations-js`.
  *
  */
 
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
+(window as any).global = window;
 
 (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
 
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+
 // tslint:disable-next-line:no-import-side-effect
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */
 
 // tslint:disable-next-line:no-import-side-effect
-import 'document-register-element';
+import '@ungap/custom-elements';
diff --git a/src/styles.scss b/src/styles.scss
index 7b63bb67e..fc2c31c2e 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -7,7 +7,4 @@
   @import '../projects/wvr-elements/src/lib/shared/styles/overrides';
 }
 
-.wvr-components-loading,
-.wvr-hidden {
-  display: none;
-}
+@import '../projects/wvr-elements/src/lib/shared/styles/wvr-elements';
diff --git a/src/test.ts b/src/test.ts
index 6b1505d8d..60fb0704c 100644
--- a/src/test.ts
+++ b/src/test.ts
@@ -1,6 +1,6 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 // tslint:disable-next-line: no-import-side-effect
-import 'zone.js/dist/zone-testing';
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 4b2ca0e9c..1d2b3f871 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -35,4 +35,4 @@
   "angularCompilerOptions": {
     "ivyCompiler": true
   }
-}
\ No newline at end of file
+}
diff --git a/tslint.json b/tslint.json
index d75445db1..07a96d86d 100644
--- a/tslint.json
+++ b/tslint.json
@@ -6,7 +6,11 @@
     "angular-tslint-rules"
   ],
   "rules": {
-    "only-arrow-functions":false,
+    "template-cyclomatic-complexity": [
+      true,
+      10
+    ],
+    "only-arrow-functions": false,
     "comment-type": [
       true,
       "singleline",
@@ -55,4 +59,4 @@
       }
     ]
   }
-}
\ No newline at end of file
+}