{"version":3,"sources":["E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/$_lazy_route_resource lazy","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/app.component.css","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/app.component.html","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/app.component.ts","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/app.module.ts","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/app.routing.ts","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/guidelines/guidelines.component.html","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/guidelines/guidelines.component.ts","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/personas/personas.component.html","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/personas/personas.component.ts","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/prototype/prototype.component.css","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/prototype/prototype.component.html","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/prototype/prototype.component.ts","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/structure/structure.component.html","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/structure/structure.component.ts","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/style/style.component.html","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/style/style.component.ts","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/ui-elements/ui-elements.component.css","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/ui-elements/ui-elements.component.html","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/ui-elements/ui-elements.component.ts","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/welcome/welcome.component.html","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/welcome/welcome.component.ts","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/assets/css/custom.css","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/environments/environment.ts","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/exemplify/directives/exemplify.directive.ts","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/exemplify/exemplify.module.ts","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/exemplify/services/source.service.ts","E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/main.ts"],"names":[],"mappings":"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","file":"main.bundle.js","sourcesContent":["function webpackEmptyAsyncContext(req) {\n\t// Here Promise.resolve().then() is used instead of new Promise() to prevent\n\t// uncatched exception popping up in devtools\n\treturn Promise.resolve().then(function() {\n\t\tthrow new Error(\"Cannot find module '\" + req + \"'.\");\n\t});\n}\nwebpackEmptyAsyncContext.keys = function() { return []; };\nwebpackEmptyAsyncContext.resolve = webpackEmptyAsyncContext;\nmodule.exports = webpackEmptyAsyncContext;\nwebpackEmptyAsyncContext.id = \"../../../../../src/$$_lazy_route_resource lazy recursive\";\n\n\n//////////////////\n// WEBPACK FOOTER\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/$$_lazy_route_resource lazy\n// module id = ../../../../../src/$$_lazy_route_resource lazy recursive\n// module chunks = main","exports = module.exports = require(\"../../node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \"\", \"\"]);\n\n// exports\n\n\n/*** EXPORTS FROM exports-loader ***/\nmodule.exports = module.exports.toString();\n\n\n//////////////////\n// WEBPACK FOOTER\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/app.component.css\n// module id = ../../../../../src/app/app.component.css\n// module chunks = main","module.exports = \"<div id=\\\"wrapper\\\">\\r\\n\\r\\n<div id=\\\"sidebar-wrapper\\\">\\r\\n\\r\\n    <ul class=\\\"sidebar-nav\\\">\\r\\n        <li class=\\\"sidebar-brand text-center\\\">\\r\\n<img src=\\\"../assets/nH-Logo-color-wd.svg\\\" width=\\\"206\\\" />\\r\\n        </li>\\r\\n        <li class=\\\"cs-bold-text\\\">\\r\\n            <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/WelcomeComponent/Top\\\">\\r\\n                Welcome\\r\\n            </a>\\r\\n        </li>\\r\\n\\t\\t<li class=\\\"cs-bold-text\\\">\\r\\n            <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/StructureComponent/Top\\\" >\\r\\n                Structure\\r\\n            </a>\\r\\n          <ul>\\r\\n            <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/StructureComponent/Master\\\">\\r\\n                Master Header\\r\\n              </a>\\r\\n            </li>\\r\\n            <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/StructureComponent/Navigation\\\">\\r\\n                Navigation\\r\\n              </a>  \\r\\n            </li>\\r\\n\\t\\t\\t<li>\\r\\n              <a style=\\\"cursor: pointer;\\\"  routerLink=\\\"/StructureComponent/Grid\\\" >\\r\\n                Grid\\r\\n              </a>\\r\\n            </li>\\r\\n\\t\\t\\t<li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/StructureComponent/Cards\\\" >\\r\\n                Cards\\r\\n              </a>\\r\\n            </li>\\r\\n\\t\\t\\t<li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/StructureComponent/Modal\\\">\\r\\n                Modal &amp; Dialogs\\r\\n              </a>\\r\\n            </li>\\r\\n      <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/StructureComponent/Widget\\\">\\r\\n                Widget Framework\\r\\n              </a>\\r\\n            </li>\\r\\n      <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/StructureComponent/Footer\\\">\\r\\n                Footer\\r\\n              </a>\\r\\n            </li>\\r\\n          </ul>\\r\\n        </li>\\r\\n\\t\\t<li>\\r\\n            <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/StyleComponent/Top\\\" >\\r\\n                Style\\r\\n            </a>\\r\\n          <ul>\\r\\n            <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/StyleComponent/Language\\\" >\\r\\n                Language &amp; Typography\\r\\n              </a>\\r\\n            </li>\\r\\n\\t\\t\\t<li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/StyleComponent/Color\\\">\\r\\n                Color\\r\\n              </a>\\r\\n            </li>\\r\\n\\t\\t\\t<li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/StyleComponent/Logos\\\">\\r\\n                Logos\\r\\n              </a>\\r\\n            </li>\\r\\n            <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/StyleComponent/Icons\\\">\\r\\n                Icons\\r\\n              </a>\\r\\n            </li>\\r\\n          </ul>\\r\\n        </li>\\r\\n          <li>\\r\\n            <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/GuidelinesComponent/Top\\\">\\r\\n                Guidelines\\r\\n            </a>\\r\\n          <ul>\\r\\n            <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/GuidelinesComponent/Truncate\\\">\\r\\n                Truncate with Ellipsis\\r\\n              </a>\\r\\n            </li>\\r\\n\\t\\t\\t<li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/GuidelinesComponent/Caps\\\">\\r\\n                Capitalize Text\\r\\n              </a>\\r\\n            </li>\\r\\n      <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/GuidelinesComponent/Timeout\\\">\\r\\n                Session Timeout\\r\\n              </a>\\r\\n            </li>\\r\\n      <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/GuidelinesComponent/Typeahead\\\">\\r\\n                Typeahead\\r\\n              </a>\\r\\n            </li>\\r\\n      <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/GuidelinesComponent/Infinite\\\">\\r\\n                Infinite Scroll &amp; Pagination\\r\\n              </a>\\r\\n            </li>\\r\\n          </ul>\\r\\n        </li>\\r\\n\\t\\t<li>\\r\\n            <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/UiElementsComponent/Top\\\">\\r\\n                UI Elements\\r\\n            </a>\\r\\n          <ul>\\r\\n            <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/UiElementsComponent/Buttons\\\">\\r\\n                Buttons\\r\\n              </a>\\r\\n            </li>\\r\\n\\t\\t\\t<li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/UiElementsComponent/Forms\\\">\\r\\n                Forms\\r\\n              </a>\\r\\n            </li>\\r\\n\\t\\t\\t<li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/UiElementsComponent/Forms\\\">\\r\\n                Input Fields\\r\\n              </a>\\r\\n            </li>\\r\\n      <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/UiElementsComponent/TextMask\\\">\\r\\n                Text Mask\\r\\n              </a>\\r\\n            </li>\\r\\n            <li>\\r\\n                <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/UiElementsComponent/DataTables\\\">\\r\\n                DataTables\\r\\n                </a>\\r\\n              </li>\\r\\n            <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/UiElementsComponent/Dropdown\\\">\\r\\n                Dropdown Menus\\r\\n              </a>\\r\\n            </li>\\r\\n            <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/UiElementsComponent/Radio\\\">\\r\\n                Radio Buttons\\r\\n              </a>\\r\\n            </li>\\r\\n            <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/UiElementsComponent/Checkbox\\\">\\r\\n                Checkboxes\\r\\n              </a>\\r\\n            </li>\\r\\n            <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/UiElementsComponent/Slider\\\">\\r\\n                Slider Input\\r\\n              </a>\\r\\n            </li>\\r\\n            <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/UiElementsComponent/Toggle\\\">\\r\\n                Slide Toggle\\r\\n              </a>\\r\\n            </li>\\r\\n            <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/UiElementsComponent/DateTime\\\">\\r\\n                Date &amp; Time Picker\\r\\n              </a>\\r\\n            </li>\\r\\n            <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/UiElementsComponent/Textarea\\\">\\r\\n                Rich Text Editor &#43; Textareas \\r\\n              </a>\\r\\n            </li>\\r\\n            <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/UiElementsComponent/Expansion\\\">\\r\\n                Expansion Panel\\r\\n              </a>\\r\\n            </li>\\r\\n            <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/UiElementsComponent/Tabs\\\">\\r\\n                Tabs\\r\\n              </a>\\r\\n            </li>\\r\\n\\t\\t\\t<li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/UiElementsComponent/Notifications\\\">\\r\\n                Notifications\\r\\n              </a>\\r\\n            </li>\\r\\n            <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/UiElementsComponent/Tooltips\\\">\\r\\n                Tooltips\\r\\n              </a>\\r\\n            </li>\\r\\n            <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/UiElementsComponent/Loader\\\">\\r\\n                Page Loader (Branded)\\r\\n              </a>\\r\\n            </li>\\r\\n            <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/UiElementsComponent/Slim\\\">\\r\\n                Slim Loading Bar\\r\\n              </a>\\r\\n            </li>\\r\\n          </ul>\\r\\n        </li>\\r\\n\\r\\n        <li>\\r\\n          <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/PrototypeComponent/Top\\\">\\r\\n            Prototyping\\r\\n          </a>\\r\\n          <ul>\\r\\n            <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/PrototypeComponent/Top\\\">\\r\\n                Overview\\r\\n              </a>\\r\\n            </li>\\r\\n            <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/PrototypeComponent/Brentwood\\\">\\r\\n                Brentwood Campus\\r\\n              </a>\\r\\n            </li>\\r\\n            <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/PrototypeComponent/Newton\\\">\\r\\n                Newton Campus\\r\\n              </a>\\r\\n            </li>\\r\\n          </ul>\\r\\n        </li>\\r\\n\\r\\n\\r\\n\\r\\n        <li class=\\\"cs-bold-text\\\">\\r\\n            <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/PersonasComponent/Top\\\">\\r\\n                User Personas\\r\\n            </a>\\r\\n          <ul>\\r\\n            <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" href=\\\"https://dev-web-02.curaspan.local/personas/\\\" target=\\\"_blank\\\">\\r\\n                nH Discharge\\r\\n              </a>\\r\\n            </li>\\r\\n            <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/PersonasComponent/Identify\\\">\\r\\n                nH Identify\\r\\n              </a>  \\r\\n            </li>\\r\\n\\t\\t\\t<li>\\r\\n              <a style=\\\"cursor: pointer;\\\"  routerLink=\\\"/PersonasComponent/Coordinate\\\">\\r\\n                nH Coordinate\\r\\n              </a>\\r\\n            </li>\\r\\n\\t\\t\\t<li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/PersonasComponent/Predict\\\">\\r\\n                nH Predict\\r\\n              </a>\\r\\n            </li>\\r\\n\\t\\t\\t<li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/PersonasComponent/Perform\\\">\\r\\n                nH Perform\\r\\n              </a>\\r\\n            </li>\\r\\n      <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/PersonasComponent/Intake\\\">\\r\\n                nH Intake\\r\\n              </a>\\r\\n            </li>\\r\\n      <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/PersonasComponent/Ride\\\">\\r\\n                nH Ride\\r\\n              </a>\\r\\n            </li>\\r\\n      <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/PersonasComponent/Review\\\">\\r\\n                nH Review\\r\\n              </a>\\r\\n            </li>\\r\\n      <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/PersonasComponent/Engage\\\">\\r\\n                nH Engage\\r\\n              </a>\\r\\n            </li>\\r\\n      <li>\\r\\n              <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/PersonasComponent/Insight\\\">\\r\\n                nH Insight\\r\\n              </a>\\r\\n            </li>\\r\\n          </ul>\\r\\n        </li>\\r\\n\\t\\t</ul>\\r\\n</div>\\r\\n\\r\\n<div class=\\\"layout-view\\\">\\r\\n\\t<router-outlet></router-outlet>\\r\\n</div>\\r\\n\\r\\n</div> \\r\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/app.component.html\n// module id = ../../../../../src/app/app.component.html\n// module chunks = main","import { Component,OnInit } from '@angular/core';\r\nimport {Router} from \"@angular/router\";\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: './app.component.html',\r\n  styleUrls: ['./app.component.css']\r\n})\r\nexport class AppComponent implements OnInit {\r\n  title = 'app';\r\n\r\n   constructor(private router: Router) {}\r\n\r\n    ngOnInit() {\r\n      this.router.navigate(['WelcomeComponent']);\r\n    }\r\n}\n\n\n// WEBPACK FOOTER //\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/app.component.ts","import { BrowserModule } from '@angular/platform-browser';\r\nimport { NgModule } from '@angular/core';\r\n\r\nimport { AppComponent } from './app.component';\r\nimport { StructureComponent } from './structure/structure.component';\r\n\r\nimport { AppRoutingModule, routing, appRoutingProviders } from './app.routing';\r\nimport { StyleComponent } from './style/style.component';\r\nimport { WelcomeComponent } from './welcome/welcome.component';\r\nimport { UiElementsComponent } from './ui-elements/ui-elements.component';\r\nimport { MatExpansionModule } from '@angular/material/expansion';\r\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\r\nimport { MatTabsModule } from '@angular/material/tabs';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { MatSliderModule } from '@angular/material/slider';\r\n//import { ToastModule } from 'ng2-toastr/ng2-toastr';\r\nimport { ToastrModule } from 'ngx-toastr';\r\nimport { PersonasComponent } from './personas/personas.component';\r\nimport { MatSlideToggleModule } from '@angular/material/slide-toggle';\r\nimport { SlimLoadingBarModule } from 'ng2-slim-loading-bar';\r\nimport { NgSelectModule } from '@ng-select/ng-select';\r\nimport { GuidelinesComponent } from './guidelines/guidelines.component';\r\nimport { ReactiveFormsModule } from '@angular/forms';\r\nimport { ExemplifyModule } from '../exemplify/exemplify.module';\r\nimport { TextMaskModule } from 'angular2-text-mask';\r\nimport { PrototypeComponent } from './prototype/prototype.component';\r\nimport { QuillModule } from 'ngx-quill';\r\nimport { jqxDateTimeInputComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxdatetimeinput';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { DataTablesModule } from 'angular-datatables';\r\n\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent,\r\n    WelcomeComponent,\r\n    StructureComponent,\r\n    StyleComponent,\r\n    WelcomeComponent,\r\n    UiElementsComponent,\r\n    PersonasComponent,\r\n    GuidelinesComponent,\r\n    PrototypeComponent,\r\n    jqxDateTimeInputComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    routing,\r\n    MatExpansionModule,\r\n    BrowserAnimationsModule,\r\n    MatTabsModule,\r\n    MatTooltipModule,\r\n    MatSliderModule,\r\n    ToastrModule.forRoot(),\r\n    MatSlideToggleModule,\r\n    SlimLoadingBarModule.forRoot(),\r\n    NgSelectModule,\r\n    ReactiveFormsModule,\r\n    ExemplifyModule,\r\n    TextMaskModule,\r\n    QuillModule,\r\n    FormsModule,\r\n    DataTablesModule\r\n  ],\r\n  providers: [appRoutingProviders],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n\n\n\n// WEBPACK FOOTER //\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/app.module.ts","import { NgModule } from '@angular/core';\r\nimport { Routes, RouterModule } from '@angular/router';\r\n\r\n// Page components\r\nimport { WelcomeComponent } from './welcome/welcome.component';\r\nimport { StructureComponent } from './structure/structure.component';\r\nimport { StyleComponent } from './style/style.component';\r\nimport { UiElementsComponent } from './ui-elements/ui-elements.component';\r\nimport { PersonasComponent } from './personas/personas.component';\r\nimport { GuidelinesComponent } from './guidelines/guidelines.component';\r\nimport { PrototypeComponent } from './prototype/prototype.component';\r\n\r\nconst routes: Routes = [\r\n  {\r\n    path: 'WelcomeComponent',\r\n    component: WelcomeComponent\r\n  },\r\n  {\r\n    path: 'StructureComponent/:topic',\r\n    component: StructureComponent\r\n  },\r\n  {\r\n    path: 'StyleComponent/:topic',\r\n    component: StyleComponent\r\n  },\r\n  {\r\n    path: 'UiElementsComponent/:topic',\r\n    component: UiElementsComponent\r\n  }, \r\n  {\r\n    path: 'PersonasComponent/:topic',\r\n    component: PersonasComponent\r\n  },\r\n  {\r\n    path: 'GuidelinesComponent/:topic',\r\n    component: GuidelinesComponent\r\n  },\r\n  {\r\n    path: 'PrototypeComponent/:topic',\r\n    component: PrototypeComponent\r\n  },\r\n  {\r\n    path:'**',\r\n    component:WelcomeComponent\r\n  }\r\n  /*{\r\n    path: '',\r\n    redirectTo: '',\r\n    pathMatch: 'full'\r\n  }*/\r\n]; \r\n/*\r\n@NgModule({\r\n  imports: [RouterModule.forRoot(routes)],\r\n  providers: [],\r\n  exports: [RouterModule]\r\n})*/\r\n\r\nexport const appRoutingProviders: any[] = [\r\n];\r\n\r\nexport const routing = RouterModule.forRoot(routes);\r\n\r\nexport class AppRoutingModule { }\n\n\n// WEBPACK FOOTER //\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/app.routing.ts","module.exports = \"<div class=\\\"container-fluid\\\">\\r\\n  <div class=\\\"row\\\" id=\\\"Top\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Guidelines</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>Enterprise-wide development guidelines will be presented here.</p>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Truncate\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Truncate with Ellipsis</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <h3>Approaches to truncate lengthy text:</h3>\\r\\n            <p>Use 2+ lines, when/where necessary</p>\\r\\n            <p>Use the ellipsis at the end of a large amount of text <code>(...)</code></p>\\r\\n            <p>Reduce the font-size, but the text must remain legible</p>\\r\\n            <p><a style=\\\"cursor: pointer;\\\" routerLink=\\\"/UiElementsComponent/Tooltips\\\">Tooltips</a>, in most cases, would reveal all text</p>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <h3>When is it used?</h3>\\r\\n            <p>A grid would be our most common case. Here a grid may have a row with a cell containing a larger excerpt of content. It could very well be a note left by an end user and here you would allow a case-specific amount characters to be viewable before an ellipsis <code>(...)</code> displays. The end user may then hover the entry and see the remaining content in a <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/UiElementsComponent/Tooltips\\\">tooltip</a>. On handheld devices it will be viewable via screen tap.</p>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <h3>Code Snippet</h3>\\r\\n            <p>Coming Soon</p>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Caps\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Capitalize Text</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <p>Coming Soon</p>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <h3>When is it used?</h3>\\r\\n            <p>Coming Soon</p>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <h3>Code Snippet</h3>\\r\\n            <p>Coming Soon</p>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Timeout\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Session Timeout</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-6\\\">\\r\\n            <p>We have a standard timeout procedure of 30 minutes. At the 27 minute mark a dialogue window appears warning the user of the impending timeout with a call to action to extend their session. </p>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <h3>Code Snippet</h3>\\r\\n            <p>Coming Soon</p>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Typeahead\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Typeahead</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-8\\\">\\r\\n            <p>The typeahead feature on any given input field is to improve user experience and application performance by retrieving data. </p>\\r\\n            <p>Our standard typeahead protocol activates at 3 characters and returns a query of 20 results (<strong>NOTE:</strong> there can be exceptions).</p>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <h3>Example:</h3>\\r\\n            <p>We have the typeahead feature applied in the Authorization Intake form within Coordinate and the input fields affected are Ordering Acute Physician and Attending Acute Physician. Here the end user types 3 characters into either input field and the query returns 20 Physician results. </p>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Infinite\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Infinite Scroll &amp; Pagination</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <blockquote class=\\\"blockquote\\\">\\r\\n              <p class=\\\"mb-0\\\">Endless scrolling saves people from having to attend to the mechanics of pagination in browsing tasks, but is not a good choice for websites that support goal-oriented finding tasks.</p>\\r\\n              <footer class=\\\"blockquote-footer\\\">Hoa Loranger, <cite title=\\\"Source Title\\\">Nielsen Norman Group</cite></footer>\\r\\n            </blockquote>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-6\\\">\\r\\n            <p><strong>Infinite Scrolling</strong> is a development technique that automatically loads new content as an end user scrolls down a page within an application, presenting the user with basically an endless stream of content.</p>\\r\\n            <h3>When is it used?</h3>\\r\\n            <p>When there is no particular task at hand other than to consume information.</p>\\r\\n            <p class=\\\"ml-1\\\"><strong>Example:</strong> <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/StructureComponent/Cards\\\">Cards</a></p>\\r\\n            <h3>When is it NOT used?</h3>\\r\\n            <p>When a task-oriented user is using a particular component they have certain expectations and those are that UI interactions are to occur. In this case it not advisable to use infinite scrolling as you limit the user experience by not having all expected content (<strong>e.g.</strong> forms, input fields, call to action buttons) loaded.</p>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-6\\\">\\r\\n            <p><strong>Pagination</strong> is the process of dividing content into discreet pages. </p>\\r\\n            <h3>When is it used?</h3>\\r\\n            <p>Grids are the primary consumer of pagination mechanics. You have a litany of results on any given grid and pagination serves as the appropriate method to sort through that data.</p>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n</div>\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/guidelines/guidelines.component.html\n// module id = ../../../../../src/app/guidelines/guidelines.component.html\n// module chunks = main","import { Component, OnInit } from '@angular/core';\r\nimport {ActivatedRoute} from '@angular/router';\r\n\r\n@Component({\r\n  selector: 'app-guidelines',\r\n  templateUrl: './guidelines.component.html',\r\n  styleUrls: ['../../assets/css/custom.css']\r\n})\r\nexport class GuidelinesComponent implements OnInit {\r\n\r\n  constructor(private route: ActivatedRoute) { }\r\n  private fragment:string;\r\n\r\n  ngOnInit() {\r\n    this.route.params.subscribe(params=>{\r\n      this.fragment = params['topic'];\r\n       try {\r\n        document.querySelector('#' + this.fragment).scrollIntoView();\r\n        } catch (e) { }\r\n    });\r\n  }\r\n}\n\n\n// WEBPACK FOOTER //\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/guidelines/guidelines.component.ts","module.exports = \"<div class=\\\"container-fluid\\\">\\r\\n  <div class=\\\"row\\\" id=\\\"Top\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">nH User Personas</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>At this time we have our application suite detailed out below and User Personas for each are forthcoming. Our intent is to gather around the users of our applications, get to know them and relay their role and workflow within the naviHealth organization. Stay tuned!</p>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Discharge\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\"><span class=\\\"naviO\\\">nH</span> <span class=\\\"naviB\\\">Discharge</span></span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>Embedded workflow tool to standardize and streamline transitions of care by matching patients with appropriate\\r\\n              and available providers throughout a robust database, create operational efficiencies with electronic communication,\\r\\n              and reduce process variation to accomplish discharges more effectively.</p>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <mat-accordion>\\r\\n              <mat-expansion-panel>\\r\\n                <mat-expansion-panel-header>\\r\\n                  <mat-panel-title>\\r\\n                    Name / Role\\r\\n                  </mat-panel-title>\\r\\n                  <mat-panel-description>\\r\\n                    Role description\\r\\n                  </mat-panel-description>\\r\\n                </mat-expansion-panel-header>\\r\\n                <p>Praesent semper ut lacus id pharetra. In at quam fermentum, faucibus dui sit amet, porttitor diam. Pellentesque\\r\\n                  vehicula est id condimentum gravida. Praesent velit nulla, consequat id volutpat quis, tempor vitae mauris.\\r\\n                  Mauris eget leo fermentum, mollis erat id, convallis dui. In hac habitasse platea dictumst.</p>\\r\\n              </mat-expansion-panel>\\r\\n              <mat-expansion-panel>\\r\\n                <mat-expansion-panel-header>\\r\\n                  <mat-panel-title>\\r\\n                    Name / Role\\r\\n                  </mat-panel-title>\\r\\n                  <mat-panel-description>\\r\\n                    Role description\\r\\n                  </mat-panel-description>\\r\\n                </mat-expansion-panel-header>\\r\\n                <p>Praesent semper ut lacus id pharetra. In at quam fermentum, faucibus dui sit amet, porttitor diam. Pellentesque\\r\\n                  vehicula est id condimentum gravida. Praesent velit nulla, consequat id volutpat quis, tempor vitae mauris.\\r\\n                  Mauris eget leo fermentum, mollis erat id, convallis dui. In hac habitasse platea dictumst.</p>\\r\\n              </mat-expansion-panel>\\r\\n            </mat-accordion>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Identify\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\"><span class=\\\"naviO\\\">nH</span> <span class=\\\"naviB\\\">Identify</span></span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>Proprietary peer-reviewed, clinically-validated, evidence-based assessment tool to identify patients' need for\\r\\n              post-acute care, risk of readmission, and provide a level-of-care recommendation based on information collected\\r\\n              at admission.</p>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <mat-accordion>\\r\\n              <mat-expansion-panel>\\r\\n                <mat-expansion-panel-header>\\r\\n                  <mat-panel-title>\\r\\n                    Name / Role\\r\\n                  </mat-panel-title>\\r\\n                  <mat-panel-description>\\r\\n                    Role description\\r\\n                  </mat-panel-description>\\r\\n                </mat-expansion-panel-header>\\r\\n                <p>Praesent semper ut lacus id pharetra. In at quam fermentum, faucibus dui sit amet, porttitor diam. Pellentesque\\r\\n                  vehicula est id condimentum gravida. Praesent velit nulla, consequat id volutpat quis, tempor vitae mauris.\\r\\n                  Mauris eget leo fermentum, mollis erat id, convallis dui. In hac habitasse platea dictumst.</p>\\r\\n              </mat-expansion-panel>\\r\\n              <mat-expansion-panel>\\r\\n                <mat-expansion-panel-header>\\r\\n                  <mat-panel-title>\\r\\n                    Name / Role\\r\\n                  </mat-panel-title>\\r\\n                  <mat-panel-description>\\r\\n                    Role description\\r\\n                  </mat-panel-description>\\r\\n                </mat-expansion-panel-header>\\r\\n                <p>Praesent semper ut lacus id pharetra. In at quam fermentum, faucibus dui sit amet, porttitor diam. Pellentesque\\r\\n                  vehicula est id condimentum gravida. Praesent velit nulla, consequat id volutpat quis, tempor vitae mauris.\\r\\n                  Mauris eget leo fermentum, mollis erat id, convallis dui. In hac habitasse platea dictumst.</p>\\r\\n              </mat-expansion-panel>\\r\\n            </mat-accordion>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Coordinate\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\"><span class=\\\"naviO\\\">nH</span> <span class=\\\"naviB\\\">Coordinate</span></span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>Primary tool used by naviHealth Clinicians and nH Predict licensing partners to manage and evaluate patients,\\r\\n              complete nH Predict, process authorizations, facilitate discharge planning, and document interventions and\\r\\n              engagement. It also provides the capability for naviHealth managers to view and administer staff updates as\\r\\n              necessary. In addition, data captured is used to generate statistics around savings and patient population\\r\\n              trends.\\r\\n            </p>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <mat-accordion>\\r\\n              <mat-expansion-panel>\\r\\n                <mat-expansion-panel-header>\\r\\n                  <mat-panel-title>\\r\\n                    Name / Role\\r\\n                  </mat-panel-title>\\r\\n                  <mat-panel-description>\\r\\n                    Role description\\r\\n                  </mat-panel-description>\\r\\n                </mat-expansion-panel-header>\\r\\n                <p>Praesent semper ut lacus id pharetra. In at quam fermentum, faucibus dui sit amet, porttitor diam. Pellentesque\\r\\n                  vehicula est id condimentum gravida. Praesent velit nulla, consequat id volutpat quis, tempor vitae mauris.\\r\\n                  Mauris eget leo fermentum, mollis erat id, convallis dui. In hac habitasse platea dictumst.</p>\\r\\n              </mat-expansion-panel>\\r\\n              <mat-expansion-panel>\\r\\n                <mat-expansion-panel-header>\\r\\n                  <mat-panel-title>\\r\\n                    Name / Role\\r\\n                  </mat-panel-title>\\r\\n                  <mat-panel-description>\\r\\n                    Role description\\r\\n                  </mat-panel-description>\\r\\n                </mat-expansion-panel-header>\\r\\n                <p>Praesent semper ut lacus id pharetra. In at quam fermentum, faucibus dui sit amet, porttitor diam. Pellentesque\\r\\n                  vehicula est id condimentum gravida. Praesent velit nulla, consequat id volutpat quis, tempor vitae mauris.\\r\\n                  Mauris eget leo fermentum, mollis erat id, convallis dui. In hac habitasse platea dictumst.</p>\\r\\n              </mat-expansion-panel>\\r\\n            </mat-accordion>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Predict\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\"><span class=\\\"naviO\\\">nH</span> <span class=\\\"naviB\\\">Predict</span></span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>Proprietary and evidence-based decision support solution that generates individualized patient-centered care plans\\r\\n              and optimizes patient results.</p>\\r\\n            <h3>Function</h3>\\r\\n            <p>Assessment tool that returns current function scores, used to set a baseline measure for tracking progress against\\r\\n              predicted outcomes.</p>\\r\\n            <h3>Outcome</h3>\\r\\n            <p>Predictive analytics databse of post-acute care outcomes for each patient, adding data-driven support to clinical\\r\\n              decision making, and aligning expectations across the care team, patient, and family.</p>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <mat-accordion>\\r\\n              <mat-expansion-panel>\\r\\n                <mat-expansion-panel-header>\\r\\n                  <mat-panel-title>\\r\\n                    Name / Role\\r\\n                  </mat-panel-title>\\r\\n                  <mat-panel-description>\\r\\n                    Role description\\r\\n                  </mat-panel-description>\\r\\n                </mat-expansion-panel-header>\\r\\n                <p>Praesent semper ut lacus id pharetra. In at quam fermentum, faucibus dui sit amet, porttitor diam. Pellentesque\\r\\n                  vehicula est id condimentum gravida. Praesent velit nulla, consequat id volutpat quis, tempor vitae mauris.\\r\\n                  Mauris eget leo fermentum, mollis erat id, convallis dui. In hac habitasse platea dictumst.</p>\\r\\n              </mat-expansion-panel>\\r\\n              <mat-expansion-panel>\\r\\n                <mat-expansion-panel-header>\\r\\n                  <mat-panel-title>\\r\\n                    Name / Role\\r\\n                  </mat-panel-title>\\r\\n                  <mat-panel-description>\\r\\n                    Role description\\r\\n                  </mat-panel-description>\\r\\n                </mat-expansion-panel-header>\\r\\n                <p>Praesent semper ut lacus id pharetra. In at quam fermentum, faucibus dui sit amet, porttitor diam. Pellentesque\\r\\n                  vehicula est id condimentum gravida. Praesent velit nulla, consequat id volutpat quis, tempor vitae mauris.\\r\\n                  Mauris eget leo fermentum, mollis erat id, convallis dui. In hac habitasse platea dictumst.</p>\\r\\n              </mat-expansion-panel>\\r\\n            </mat-accordion>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Perform\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\"><span class=\\\"naviO\\\">nH</span> <span class=\\\"naviB\\\">Perform</span></span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>Proprietary tool that enables providers to rank and trend SNF performance using a common set of scoring criteria to assess quality, effectiveness, and operations.\\r\\n            </p>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <mat-accordion>\\r\\n              <mat-expansion-panel>\\r\\n                <mat-expansion-panel-header>\\r\\n                  <mat-panel-title>\\r\\n                    Name / Role\\r\\n                  </mat-panel-title>\\r\\n                  <mat-panel-description>\\r\\n                    Role description\\r\\n                  </mat-panel-description>\\r\\n                </mat-expansion-panel-header>\\r\\n                <p>Praesent semper ut lacus id pharetra. In at quam fermentum, faucibus dui sit amet, porttitor diam. Pellentesque\\r\\n                  vehicula est id condimentum gravida. Praesent velit nulla, consequat id volutpat quis, tempor vitae mauris.\\r\\n                  Mauris eget leo fermentum, mollis erat id, convallis dui. In hac habitasse platea dictumst.</p>\\r\\n              </mat-expansion-panel>\\r\\n              <mat-expansion-panel>\\r\\n                <mat-expansion-panel-header>\\r\\n                  <mat-panel-title>\\r\\n                    Name / Role\\r\\n                  </mat-panel-title>\\r\\n                  <mat-panel-description>\\r\\n                    Role description\\r\\n                  </mat-panel-description>\\r\\n                </mat-expansion-panel-header>\\r\\n                <p>Praesent semper ut lacus id pharetra. In at quam fermentum, faucibus dui sit amet, porttitor diam. Pellentesque\\r\\n                  vehicula est id condimentum gravida. Praesent velit nulla, consequat id volutpat quis, tempor vitae mauris.\\r\\n                  Mauris eget leo fermentum, mollis erat id, convallis dui. In hac habitasse platea dictumst.</p>\\r\\n              </mat-expansion-panel>\\r\\n            </mat-accordion>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Intake\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\"><span class=\\\"naviO\\\">nH</span> <span class=\\\"naviB\\\">Intake</span></span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>A referral management platform built for post-acute providers to enable real-time communication and information-sharing across a connected network.\\r\\n            </p>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <mat-accordion>\\r\\n              <mat-expansion-panel>\\r\\n                <mat-expansion-panel-header>\\r\\n                  <mat-panel-title>\\r\\n                    Name / Role\\r\\n                  </mat-panel-title>\\r\\n                  <mat-panel-description>\\r\\n                    Role description\\r\\n                  </mat-panel-description>\\r\\n                </mat-expansion-panel-header>\\r\\n                <p>Praesent semper ut lacus id pharetra. In at quam fermentum, faucibus dui sit amet, porttitor diam. Pellentesque\\r\\n                  vehicula est id condimentum gravida. Praesent velit nulla, consequat id volutpat quis, tempor vitae mauris.\\r\\n                  Mauris eget leo fermentum, mollis erat id, convallis dui. In hac habitasse platea dictumst.</p>\\r\\n              </mat-expansion-panel>\\r\\n              <mat-expansion-panel>\\r\\n                <mat-expansion-panel-header>\\r\\n                  <mat-panel-title>\\r\\n                    Name / Role\\r\\n                  </mat-panel-title>\\r\\n                  <mat-panel-description>\\r\\n                    Role description\\r\\n                  </mat-panel-description>\\r\\n                </mat-expansion-panel-header>\\r\\n                <p>Praesent semper ut lacus id pharetra. In at quam fermentum, faucibus dui sit amet, porttitor diam. Pellentesque\\r\\n                  vehicula est id condimentum gravida. Praesent velit nulla, consequat id volutpat quis, tempor vitae mauris.\\r\\n                  Mauris eget leo fermentum, mollis erat id, convallis dui. In hac habitasse platea dictumst.</p>\\r\\n              </mat-expansion-panel>\\r\\n            </mat-accordion>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Ride\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\"><span class=\\\"naviO\\\">nH</span> <span class=\\\"naviB\\\">Ride</span></span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>Streamlined coordination of non-emergent patient transportation post-discharge to send and receive rides electronically.\\r\\n            </p>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <mat-accordion>\\r\\n              <mat-expansion-panel>\\r\\n                <mat-expansion-panel-header>\\r\\n                  <mat-panel-title>\\r\\n                    Name / Role\\r\\n                  </mat-panel-title>\\r\\n                  <mat-panel-description>\\r\\n                    Role description\\r\\n                  </mat-panel-description>\\r\\n                </mat-expansion-panel-header>\\r\\n                <p>Praesent semper ut lacus id pharetra. In at quam fermentum, faucibus dui sit amet, porttitor diam. Pellentesque\\r\\n                  vehicula est id condimentum gravida. Praesent velit nulla, consequat id volutpat quis, tempor vitae mauris.\\r\\n                  Mauris eget leo fermentum, mollis erat id, convallis dui. In hac habitasse platea dictumst.</p>\\r\\n              </mat-expansion-panel>\\r\\n              <mat-expansion-panel>\\r\\n                <mat-expansion-panel-header>\\r\\n                  <mat-panel-title>\\r\\n                    Name / Role\\r\\n                  </mat-panel-title>\\r\\n                  <mat-panel-description>\\r\\n                    Role description\\r\\n                  </mat-panel-description>\\r\\n                </mat-expansion-panel-header>\\r\\n                <p>Praesent semper ut lacus id pharetra. In at quam fermentum, faucibus dui sit amet, porttitor diam. Pellentesque\\r\\n                  vehicula est id condimentum gravida. Praesent velit nulla, consequat id volutpat quis, tempor vitae mauris.\\r\\n                  Mauris eget leo fermentum, mollis erat id, convallis dui. In hac habitasse platea dictumst.</p>\\r\\n              </mat-expansion-panel>\\r\\n            </mat-accordion>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Review\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\"><span class=\\\"naviO\\\">nH</span> <span class=\\\"naviB\\\">Review</span></span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>Streamlined workflow and audit trail of case submissions to facilitize utilization review processes and communication between hospitals and payors.\\r\\n            </p>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <mat-accordion>\\r\\n              <mat-expansion-panel>\\r\\n                <mat-expansion-panel-header>\\r\\n                  <mat-panel-title>\\r\\n                    Name / Role\\r\\n                  </mat-panel-title>\\r\\n                  <mat-panel-description>\\r\\n                    Role description\\r\\n                  </mat-panel-description>\\r\\n                </mat-expansion-panel-header>\\r\\n                <p>Praesent semper ut lacus id pharetra. In at quam fermentum, faucibus dui sit amet, porttitor diam. Pellentesque\\r\\n                  vehicula est id condimentum gravida. Praesent velit nulla, consequat id volutpat quis, tempor vitae mauris.\\r\\n                  Mauris eget leo fermentum, mollis erat id, convallis dui. In hac habitasse platea dictumst.</p>\\r\\n              </mat-expansion-panel>\\r\\n              <mat-expansion-panel>\\r\\n                <mat-expansion-panel-header>\\r\\n                  <mat-panel-title>\\r\\n                    Name / Role\\r\\n                  </mat-panel-title>\\r\\n                  <mat-panel-description>\\r\\n                    Role description\\r\\n                  </mat-panel-description>\\r\\n                </mat-expansion-panel-header>\\r\\n                <p>Praesent semper ut lacus id pharetra. In at quam fermentum, faucibus dui sit amet, porttitor diam. Pellentesque\\r\\n                  vehicula est id condimentum gravida. Praesent velit nulla, consequat id volutpat quis, tempor vitae mauris.\\r\\n                  Mauris eget leo fermentum, mollis erat id, convallis dui. In hac habitasse platea dictumst.</p>\\r\\n              </mat-expansion-panel>\\r\\n            </mat-accordion>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Engage\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\"><span class=\\\"naviO\\\">nH</span> <span class=\\\"naviB\\\">Engage</span></span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>Software that enables providers and care navigators to connect with patients pre-admission and post discharge via phone, SMS, computer, or video to monitor patient progress.\\r\\n            </p>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <mat-accordion>\\r\\n              <mat-expansion-panel>\\r\\n                <mat-expansion-panel-header>\\r\\n                  <mat-panel-title>\\r\\n                    Name / Role\\r\\n                  </mat-panel-title>\\r\\n                  <mat-panel-description>\\r\\n                    Role description\\r\\n                  </mat-panel-description>\\r\\n                </mat-expansion-panel-header>\\r\\n                <p>Praesent semper ut lacus id pharetra. In at quam fermentum, faucibus dui sit amet, porttitor diam. Pellentesque\\r\\n                  vehicula est id condimentum gravida. Praesent velit nulla, consequat id volutpat quis, tempor vitae mauris.\\r\\n                  Mauris eget leo fermentum, mollis erat id, convallis dui. In hac habitasse platea dictumst.</p>\\r\\n              </mat-expansion-panel>\\r\\n              <mat-expansion-panel>\\r\\n                <mat-expansion-panel-header>\\r\\n                  <mat-panel-title>\\r\\n                    Name / Role\\r\\n                  </mat-panel-title>\\r\\n                  <mat-panel-description>\\r\\n                    Role description\\r\\n                  </mat-panel-description>\\r\\n                </mat-expansion-panel-header>\\r\\n                <p>Praesent semper ut lacus id pharetra. In at quam fermentum, faucibus dui sit amet, porttitor diam. Pellentesque\\r\\n                  vehicula est id condimentum gravida. Praesent velit nulla, consequat id volutpat quis, tempor vitae mauris.\\r\\n                  Mauris eget leo fermentum, mollis erat id, convallis dui. In hac habitasse platea dictumst.</p>\\r\\n              </mat-expansion-panel>\\r\\n            </mat-accordion>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Insight\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\"><span class=\\\"naviO\\\">nH</span> <span class=\\\"naviB\\\">Insight</span></span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>Enhanced reporting capabilities to provide transparency across the continuum, gain visibility into hospital operations, and connect with high-performing providers.\\r\\n            </p>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <mat-accordion>\\r\\n              <mat-expansion-panel>\\r\\n                <mat-expansion-panel-header>\\r\\n                  <mat-panel-title>\\r\\n                    Name / Role\\r\\n                  </mat-panel-title>\\r\\n                  <mat-panel-description>\\r\\n                    Role description\\r\\n                  </mat-panel-description>\\r\\n                </mat-expansion-panel-header>\\r\\n                <p>Praesent semper ut lacus id pharetra. In at quam fermentum, faucibus dui sit amet, porttitor diam. Pellentesque\\r\\n                  vehicula est id condimentum gravida. Praesent velit nulla, consequat id volutpat quis, tempor vitae mauris.\\r\\n                  Mauris eget leo fermentum, mollis erat id, convallis dui. In hac habitasse platea dictumst.</p>\\r\\n              </mat-expansion-panel>\\r\\n              <mat-expansion-panel>\\r\\n                <mat-expansion-panel-header>\\r\\n                  <mat-panel-title>\\r\\n                    Name / Role\\r\\n                  </mat-panel-title>\\r\\n                  <mat-panel-description>\\r\\n                    Role description\\r\\n                  </mat-panel-description>\\r\\n                </mat-expansion-panel-header>\\r\\n                <p>Praesent semper ut lacus id pharetra. In at quam fermentum, faucibus dui sit amet, porttitor diam. Pellentesque\\r\\n                  vehicula est id condimentum gravida. Praesent velit nulla, consequat id volutpat quis, tempor vitae mauris.\\r\\n                  Mauris eget leo fermentum, mollis erat id, convallis dui. In hac habitasse platea dictumst.</p>\\r\\n              </mat-expansion-panel>\\r\\n            </mat-accordion>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n</div>\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/personas/personas.component.html\n// module id = ../../../../../src/app/personas/personas.component.html\n// module chunks = main","import { Component, OnInit } from '@angular/core';\r\nimport {ActivatedRoute} from '@angular/router';\r\n\r\n@Component({\r\n  selector: 'app-personas',\r\n  templateUrl: './personas.component.html',\r\n  styleUrls: ['../../assets/css/custom.css']\r\n})\r\nexport class PersonasComponent implements OnInit {\r\n\r\n  constructor(private route: ActivatedRoute) { }\r\n  private fragment:string;\r\n\r\n  ngOnInit() {\r\n    this.route.params.subscribe(params=>{\r\n      this.fragment = params['topic'];\r\n       try {\r\n        document.querySelector('#' + this.fragment).scrollIntoView();\r\n        } catch (e) { }\r\n    });\r\n  }\r\n}\n\n\n// WEBPACK FOOTER //\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/personas/personas.component.ts","exports = module.exports = require(\"../../../node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \"div.indented {\\r\\n    margin-left: 2vw;\\r\\n    margin-top: -13px;\\r\\n}\\r\\n\\r\\nli.indented {\\r\\n    margin-left: 2vh;\\r\\n}\\r\\n\\r\\nli.indented_more {\\r\\n    margin: 0 1vw 0 3vw;\\r\\n}\\r\\n\\r\\ni {\\r\\n    color: black;\\r\\n}\\r\\n\\r\\nh3.centering {\\r\\n    text-align: center; \\r\\n    color: #6E6E6E;\\r\\n}\\r\\n\\r\\n.line_right {\\r\\n    border-right: 1px #e0e0e0 solid;\\r\\n}\", \"\"]);\n\n// exports\n\n\n/*** EXPORTS FROM exports-loader ***/\nmodule.exports = module.exports.toString();\n\n\n//////////////////\n// WEBPACK FOOTER\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/prototype/prototype.component.css\n// module id = ../../../../../src/app/prototype/prototype.component.css\n// module chunks = main","module.exports = \"<div class=\\\"container-fluid\\\">\\r\\n  <div class=\\\"row\\\" id=\\\"Top\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Prototyping Process Overview</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>At naviHealth we encourage innovation and collaboration. At the beginning of any design process, stakeholders,\\r\\n              product owners/managers and developers should utilize whiteboard design, hand-drawn sketch, and/or free tools\\r\\n              like Balsalmiq to create a lo-fi wireframe. The next step is to schedule a meeting with the\\r\\n              <a href=\\\"https://navihealthportal.sharepoint.com/:w:/r/sites/ITDevArchitecture/Shared%20Documents/UI%20%26%20UX/UX_UI_Who_We_Are.docx?d=w37f159926ae6425b9f0266de7bccfd89&csf=1&e=N8jROt\\\"\\r\\n                target=\\\"_blank\\\">UI/UX team</a> to review workflow and feasibility. Colleagues should not spend too much time on a hi-fi mockup\\r\\n              or prototype until the UX process has been implemented, as rapid prototyping is integral to saving time and\\r\\n              technical debt.\\r\\n            </p>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <h3>Our low to high fidelity linear process follows:</h3>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <p>\\r\\n              <strong>Sketching</strong> -\\r\\n              <i>Brainstorm by drawing quick and rough sketches on paper</i>\\r\\n            </p>\\r\\n            <div class=\\\"indented\\\">Two to three sprints before a card is pulled into a sprint, the product owner should schedule time with a UI/UX\\r\\n              designer to knowledge transfer, brainstorm, and explain the problem that needs to be solved. This can be done\\r\\n              before the initial card is created. In other words, the sooner the better.\\r\\n            </div>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <div class=\\\"indented\\\">\\r\\n              See an example of a sketch\\r\\n              <a href=\\\"https://navihealthportal.sharepoint.com/:w:/r/sites/ITDevArchitecture/Shared%20Documents/UI%20%26%20UX/UX_UI_Deliverables.docx?d=w01269c1ebf65461c9f2811c7bf4f3fda&csf=1&e=MbVyJK\\\"\\r\\n                target=\\\"_blank\\\">here.</a>\\r\\n            </div>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <p>\\r\\n              <strong>Wireframing/Whiteboarding</strong> -\\r\\n              <i>Start laying out the skeletal framework with boxes and rough shapes</i>\\r\\n            </p>\\r\\n            <div class=\\\"indented\\\">The UX/UI designer will then take the problem and wireframe several solutions. We want to avoid spending a lot\\r\\n              time on high fidelity here - the intention of the wireframe is to iterate quickly. Because wireframes are more\\r\\n              concerned with the broad strokes of design (such as overall layout), they usually lead to low-fidelity (no\\r\\n              color) prototypes.\\r\\n            </div>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <div class=\\\"indented\\\">\\r\\n              See an example of a wireframe\\r\\n              <a href=\\\"https://navihealthportal.sharepoint.com/:w:/r/sites/ITDevArchitecture/Shared%20Documents/UI%20%26%20UX/UX_UI_Deliverables.docx?d=w01269c1ebf65461c9f2811c7bf4f3fda&csf=1&e=MbVyJK\\\"\\r\\n                target=\\\"_blank\\\">here.</a>\\r\\n            </div>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <p>\\r\\n              <strong>Mockups</strong> -\\r\\n              <i> Inject detail into wireframes with colors, typographies, photos, and other visual design elements</i>\\r\\n            </p>\\r\\n            <div class=\\\"indented\\\">Mockups are better-dressed wireframes. Neither require functionality, but mockups give a better idea of what\\r\\n              the final product will look like, and at times suggest how it will function.\\r\\n            </div>\\r\\n\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <div class=\\\"indented\\\">\\r\\n              See an example of a mockup\\r\\n              <a href=\\\"https://navihealthportal.sharepoint.com/:w:/r/sites/ITDevArchitecture/Shared%20Documents/UI%20%26%20UX/UX_UI_Deliverables.docx?d=w01269c1ebf65461c9f2811c7bf4f3fda&csf=1&e=MbVyJK\\\"\\r\\n                target=\\\"_blank\\\">here.</a>\\r\\n            </div>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <p>\\r\\n              <strong>Prototyping</strong> -\\r\\n              <i>Add interactivity to mockups by stitching screens together for basic prototypes or adding animations/interactions\\r\\n                for advanced prototypes</i>\\r\\n            </p>\\r\\n            <div class=\\\"indented\\\"> Low-fidelity prototypes are great for quick collaboration and exploration, high-fidelity prototypes can be better\\r\\n              for product definition and estimates\\r\\n            </div>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <div class=\\\"indented\\\">\\r\\n              See an example of a prototype\\r\\n              <a href=\\\"https://marvelapp.com/6141c0b/screen/39102627\\\"\\r\\n                target=\\\"_blank\\\">here.</a>\\r\\n            </div>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <p>\\r\\n              <strong>UI Development</strong> -\\r\\n              <i>Code in enterprise language to turn the prototype into the final product</i>\\r\\n            </p>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <!-- BRENTWOOD CAMPUS -->\\r\\n  <div class=\\\"row\\\" id=\\\"Brentwood\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Brentwood Campus Prototyping Tools</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-4 line_right\\\">\\r\\n            <h3 class=\\\"centering\\\">Wireframe/Mockups</h3>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <li class=\\\"indented\\\">\\r\\n              <a href=\\\"https://balsamiq.com/\\\" target=\\\"_blank\\\">Balsamiq</a>\\r\\n            </li>\\r\\n            <li class=\\\"indented\\\">Adobe Photoshop</li>\\r\\n            <li class=\\\"indented\\\">Adobe XD</li>\\r\\n            <li class=\\\"indented_more\\\">If you need access to Adobe products, please submit a <a href=\\\"mailto:ithelpdesk@navihealth.com\\\">help desk ticket</a> requesting a license. You will need manager\\r\\n              approval\\r\\n            </li>\\r\\n            <br/>\\r\\n            <li class=\\\"indented\\\">Adobe files should be stored in individual project repositories on <a href=\\\"https://bitbucket.navihealth.us/projects/UX\\\" target=\\\"_blank\\\">Bitbucket</a>\\r\\n              <li class=\\\"indented_more\\\">If you need access to certain Bitbucket repositories, please reach out to the\\r\\n                <a href=\\\"mailto:uiuxgroup@navihealth.com\\\">UI/UX team</a>\\r\\n              </li>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-4 line_right\\\">\\r\\n            <h3 class=\\\"centering\\\">Prototyping</h3>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <li class=\\\"indented\\\">Option 1</li>\\r\\n            <li class=\\\"indented_more\\\">Adobe Photoshop (for screens) combined with\\r\\n              <a href=\\\"https://marvelapp.com/\\\" target=\\\"_blank\\\">Marvel</a> (for screen linking)</li>\\r\\n            <li class=\\\"indented_more\\\">If you need access to our Enterprise Marvel account please reach out to the \\r\\n              <a href=\\\"mailto:uiuxgroup@navihealth.com\\\">UI/UX team</a>\\r\\n            </li>\\r\\n            <br>\\r\\n            <li class=\\\"indented\\\">Option 2</li>\\r\\n            <li class=\\\"indented_more\\\">Adobe XD for screens and linking</li>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <h3 class=\\\"centering\\\">Enterprise UI Kit</h3>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <li class=\\\"indented\\\">Adobe XD</li>\\r\\n            <li class=\\\"indented_more\\\">Our UI Kit contains enterprise branded elements and components in a file that you can import into your XD project\\r\\n              to drag and drop already created and styled enterprise components</li>\\r\\n            <li class=\\\"indented_more\\\">Find our downloadable Adobe XD UI kit on Bitbucket <a href=\\\"https://bitbucket.navihealth.us/projects/UX/repos/uikitadobexd/browse\\\" target=\\\"_blank\\\">here</a></li>\\r\\n            <li class=\\\"indented_more\\\">Find instructions on how to import XD files\\r\\n              <a href=\\\"https://helpx.adobe.com/xd/help/working-with-external-assets.html\\\" target=\\\"_blank\\\">here</a>\\r\\n            </li>\\r\\n            <li class=\\\"indented_more\\\">If you need assistance with our UI Kit, please reach out to the\\r\\n              <a href=\\\"mailto:uiuxgroup@navihealth.com\\\">UI/UX team</a>\\r\\n            </li>\\r\\n\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <li class=\\\"indented\\\"><a href=\\\"https://www.uxpin.com/studio/blog/how-to-use-ui-kits-to-create-quicker-mockups/ \\\"\\r\\n              target=\\\"_blank\\\">Read</a> more about the benefits of a UI Kit\\r\\n              \\r\\n            </li>\\r\\n          </div>\\r\\n\\r\\n        </div>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <!-- END BRENTWOOD CAMPUS -->\\r\\n\\r\\n  <!-- NEWTON CAMPUS -->\\r\\n  <div class=\\\"row\\\" id=\\\"Newton\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Newton Campus Prototyping Tools</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-4 line_right\\\">\\r\\n            <h3 class=\\\"centering\\\">Wireframe/Mockups</h3>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <li class=\\\"indented\\\">\\r\\n              <a href=\\\"https://www.invisionapp.com/blog/freehand-creative-collaboration/\\\" target=\\\"_blank\\\">InVision Freehand</a>\\r\\n              <div class=\\\"bump\\\"></div>\\r\\n            </li>\\r\\n            <li class=\\\"indented\\\">Sketch</li>\\r\\n            <li class=\\\"indented_more\\\">If you need access to Sketch, please reach out to\\r\\n              <a href=\\\"mailto:stuart.kim@navihealth.com\\\">Stuart Kim</a> or\\r\\n              <a href=\\\"mailto:amy.Alsumali@navihealth.com\\\">Amy Alsumali</a>\\r\\n            </li>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <li class=\\\"indented\\\">Sketch files should be stored on the UX share drive. Please reach out to\\r\\n              <a href=\\\"mailto:stuart.kim@navihealth.com\\\">Stuart Kim</a> or\\r\\n              <a href=\\\"mailto:amy.Alsumali@navihealth.com\\\">Amy Alsumali</a> for access to their projects</li>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <li class=\\\"indented\\\">InVision files can be found on the enterprise InVision account</li>\\r\\n            <li class=\\\"indented_more\\\">If you need access to the share drive or the enterprise InVision account, please submit a help desk ticket\\r\\n              <a href=\\\"mailto:ithelpdesk@navihealth.com\\\">here</a> for access rights\\r\\n            </li>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-4 line_right\\\">\\r\\n            <h3 class=\\\"centering\\\">Prototyping</h3>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <li class=\\\"indented\\\">Sketch (for screens)</li>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <li class=\\\"indented\\\">InVision (for screen linking)</li>\\r\\n            <li class=\\\"indented_more\\\">If you need to access to our Enterprise InVision projects, please reach out to Stuart Kim or Amy Alsumali</li>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <h3 class=\\\"centering\\\">Enterprise UI Kit</h3>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <li class=\\\"indented\\\">Sketch</li>\\r\\n            <li class=\\\"indented_more\\\">Our UI Kit contains enterprise branded elements and components in a file that you can import into your Sketch\\r\\n              project to drag and drop already created and styled enterprise components</li>\\r\\n            <li class=\\\"indented_more\\\">This is a work in progress, please reach out to Stuart Kim or Amy Alsumali for access to styled enterprise components</li>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <!-- END NEWTON CAMPUS -->\\r\\n  <div class=\\\"row\\\" id=\\\"Top\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>\\r\\n              <i>Please note:</i>\\r\\n              <br>\\r\\n              <br> Newton's campus operates on Mac machines, and Brentwood's campus operate on Windows machines. For this reason,\\r\\n              the two campuses have different work flows.\\r\\n              <li class=\\\"indented\\\">Newton creates screens primarily in Sketch, which is a Mac exclusive design application. </li>\\r\\n              <li class=\\\"indented\\\">Brentwood creates screens in the Adobe Suite, which is available on Windows machines.</li>\\r\\n            </p>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n</div>\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/prototype/prototype.component.html\n// module id = ../../../../../src/app/prototype/prototype.component.html\n// module chunks = main","import { Component, OnInit } from '@angular/core';\r\nimport {ActivatedRoute} from '@angular/router';\r\n\r\n@Component({\r\n  selector: 'app-prototype',\r\n  templateUrl: './prototype.component.html',\r\n  styleUrls: ['./prototype.component.css']\r\n})\r\nexport class PrototypeComponent implements OnInit {\r\n\r\n  constructor(private route: ActivatedRoute) { }\r\n  private fragment:string;\r\n\r\n  ngOnInit() {\r\n    this.route.params.subscribe(params=>{\r\n      this.fragment = params['topic'];\r\n       try {\r\n        document.querySelector('#' + this.fragment).scrollIntoView();\r\n        } catch (e) { }\r\n    });\r\n  }\r\n\r\n}\n\n\n// WEBPACK FOOTER //\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/prototype/prototype.component.ts","module.exports = \"<div class=\\\"container-fluid\\\">\\r\\n\\t<div class=\\\"row\\\" id=\\\"Top\\\">\\r\\n\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t<div class=\\\"card-row card\\\">\\r\\n\\t\\t\\t\\t<span class=\\\"card-title\\\">Structure</span>\\r\\n\\t\\t\\t\\t<div class=\\\"bump\\\"></div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t\\t\\t\\t<p>All application pages are coded using Bootstrap 4.0 methodologies. Below you can find several basic examples. Your\\r\\n\\t\\t\\t\\t\\t\\t\\tapplication may require a more advanced layout and if that is the case you will work more closely with your UI/UX\\r\\n\\t\\t\\t\\t\\t\\t\\tDesigner developing the interface.</p>\\r\\n\\t\\t\\t\\t\\t\\t<div class=\\\"row row-style-grid\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-1 column-style-grid\\\">.col-md-1</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-1 column-style-grid\\\">.col-md-1</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-1 column-style-grid\\\">.col-md-1</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-1 column-style-grid\\\">.col-md-1</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-1 column-style-grid\\\">.col-md-1</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-1 column-style-grid\\\">.col-md-1</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-1 column-style-grid\\\">.col-md-1</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-1 column-style-grid\\\">.col-md-1</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-1 column-style-grid\\\">.col-md-1</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-1 column-style-grid\\\">.col-md-1</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-1 column-style-grid\\\">.col-md-1</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-1 column-style-grid\\\">.col-md-1</div>\\r\\n\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t<div class=\\\"row row-style-grid\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-8 column-style-grid\\\">.col-md-8</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-4 column-style-grid\\\">.col-md-4</div>\\r\\n\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t<div class=\\\"row row-style-grid\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-4 column-style-grid\\\">.col-md-4</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-4 column-style-grid\\\">.col-md-4</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-4 column-style-grid\\\">.col-md-4</div>\\r\\n\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t<div class=\\\"row row-style-grid\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-6 column-style-grid\\\">.col-md-6</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-6 column-style-grid\\\">.col-md-6</div>\\r\\n\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t</div>\\r\\n\\t\\t</div>\\r\\n\\t</div>\\r\\n\\t<div class=\\\"row\\\" id=\\\"Master\\\">\\r\\n\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t<div class=\\\"card-row card\\\">\\r\\n\\t\\t\\t\\t<span class=\\\"card-title\\\">Master Header</span>\\r\\n\\t\\t\\t\\t<div class=\\\"bump\\\"></div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t\\t\\t\\t<div class=\\\"bump\\\">\\r\\n\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t<h3>Header Option 1</h3>\\r\\n\\t\\t\\t\\t\\t\\t<h4>Logo and App Name</h4>\\r\\n\\t\\t\\t\\t\\t\\t<div exemplify=\\\"headerExample1\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n\\t\\t\\t\\t\\t\\t\\t<nav class=\\\"navbar navbar-brand\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<img class=\\\"\\\" src=\\\"https://esdnonprod.navihealth.us/assets/nH-icon.svg\\\" height=\\\"68px\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<a href=\\\"#\\\" class=\\\"master-header-title\\\">nH Application</a>\\r\\n\\t\\t\\t\\t\\t\\t\\t</nav>\\r\\n\\t\\t\\t\\t\\t\\t</div>\\r\\n\\r\\n\\t\\t\\t\\t\\t\\t<div class=\\\"bump\\\"></div>\\r\\n\\r\\n\\t\\t\\t\\t\\t\\t<h3>Header Option 2</h3>\\r\\n\\t\\t\\t\\t\\t\\t<h4> Logo, App Name, \\\"Welcome, (User)\\\", and Logout Button</h4>\\r\\n\\t\\t\\t\\t\\t\\t<div exemplify=\\\"headerExample2\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n\\t\\t\\t\\t\\t\\t\\t<nav class=\\\"navbar navbar-brand\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<img class=\\\"\\\" src=\\\"https://esdnonprod.navihealth.us/assets/nH-icon.svg\\\" height=\\\"68px\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<a href=\\\"#\\\" class=\\\"master-header-title\\\">nH Application</a>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"float-right\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-auto\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"welcome header-margin-right\\\">Welcome, Super Long Fakename {{userName}}</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-auto spacer\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<a href=\\\"{{logoutUrl}}\\\" alt=\\\"Log Out\\\" (click)=\\\"logout()\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<i class=\\\"material-icons reverse\\\">exit_to_app</i>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t</a>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t</nav>\\r\\n\\t\\t\\t\\t\\t\\t</div>\\r\\n\\r\\n\\t\\t\\t\\t\\t\\t<div class=\\\"bump\\\"></div>\\r\\n\\r\\n\\t\\t\\t\\t\\t\\t<h3>Header Option 3</h3>\\r\\n\\t\\t\\t\\t\\t\\t<h4> Logo, App Name, \\\"Welcome, (User)\\\", Date/Time, and Logout Button</h4>\\r\\n\\t\\t\\t\\t\\t\\t<div exemplify=\\\"headerExample3\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n\\t\\t\\t\\t\\t\\t\\t<nav class=\\\"navbar navbar-brand\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<img class=\\\"\\\" src=\\\"https://esdnonprod.navihealth.us/assets/nH-icon.svg\\\" height=\\\"68px\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<a href=\\\"#\\\" class=\\\"master-header-title\\\">nH Application</a>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"float-right\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-auto\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"header-3\\\">Welcome, Super Long Fakename {{userName}}</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"float-right header-3-date-time\\\">th/is/is, fa:ke {{todayDate| date: 'MM/dd/yyyy, hh:mma'}}</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-auto spacer\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<a href=\\\"{{logoutUrl}}\\\" alt=\\\"Log Out\\\" (click)=\\\"logout()\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<i class=\\\"material-icons reverse\\\">exit_to_app</i>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t</a>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t</nav>\\r\\n\\t\\t\\t\\t\\t\\t</div>\\r\\n\\r\\n\\t\\t\\t\\t\\t\\t<!-- former header 2 that does not work in IE\\t\\t\\t\\t\\t\\t\\t -->\\r\\n\\t\\t\\t\\t\\t\\t<!-- <nav class=\\\"navbar navbar-brand\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<img class=\\\"\\\" src=\\\"https://esdnonprod.navihealth.us/assets/nH-icon.svg\\\" height=\\\"68px\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<a href=\\\"#\\\" class=\\\"master-header-title\\\">nH Application</a>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"float-right\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"welcome\\\">Welcome, Fakename {{userName}}</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col spacer\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<a href=\\\"{{logoutUrl}}\\\" alt=\\\"Log Out\\\" (click)=\\\"logout()\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<i class=\\\"material-icons reverse\\\">exit_to_app</i>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t</a>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t</nav> -->\\r\\n\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t</div>\\r\\n\\t\\t</div>\\r\\n\\t</div>\\r\\n\\t<div class=\\\"row\\\" id=\\\"Navigation\\\">\\r\\n\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t<div class=\\\"card-row card\\\">\\r\\n\\t\\t\\t\\t<span class=\\\"card-title\\\">Navigation</span>\\r\\n\\t\\t\\t\\t<div class=\\\"bump\\\"></div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t\\t\\t\\t<div exemplify=\\\"navExample\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"nh-extended-nav-panel\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<button class=\\\"btn-flat\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\tLions\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t</button>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<button class=\\\"btn-flat\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\tTigers\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t</button>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<button class=\\\"btn-flat\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\tBears\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t</button>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<button class=\\\"btn-flat\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\tOh My!\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t</button>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t</div>\\r\\n\\t\\t</div>\\r\\n\\t</div>\\r\\n\\t<div class=\\\"row\\\" id=\\\"Grid\\\">\\r\\n\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t<div class=\\\"card-row card\\\">\\r\\n\\t\\t\\t\\t<span class=\\\"card-title\\\">Grids</span>\\r\\n\\t\\t\\t\\t<div class=\\\"bump\\\"></div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t\\t\\t\\t<p>All grids are made up of Bootstrap 4.0 coding methods. Below are standard features of our grid systems:</p>\\r\\n\\t\\t\\t\\t\\t\\t<p>All grids sort in a descending manner by default (e.g. most current Date will be listed at the top).</p>\\r\\n\\t\\t\\t\\t\\t\\t<p>All sorting can be altered to ascending by column title if the end user wishes.</p>\\r\\n\\t\\t\\t\\t\\t\\t<p>All grids will have inline editing available by default. Grids having 4 columns or less will grant the user the ability\\r\\n\\t\\t\\t\\t\\t\\t\\tto edit on the present UI. When there are 5 or more columns the user will select an \\\"Edit\\\" icon to then activate a\\r\\n\\t\\t\\t\\t\\t\\t\\tmodal window having all details available for editing.</p>\\r\\n\\t\\t\\t\\t\\t\\t<p>Grid rows can have an \\\"Actions\\\" column on the far right for a variety of functions. Today, those are: Edit, Save, Delete,\\r\\n\\t\\t\\t\\t\\t\\t\\tVoid. Those functions must also be listed in icon format utilizing one from the\\r\\n\\t\\t\\t\\t\\t\\t\\t<a href=\\\"https://material.io/icons/\\\"\\r\\n\\t\\t\\t\\t\\t\\t\\t target=\\\"_blank\\\">Google Material icon library</a>.</p>\\r\\n\\t\\t\\t\\t\\t\\t<p>All grids use zebra-striping so users can scan a row more easily.</p>\\r\\n\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<Div class=\\\"col-md-12\\\" >\\r\\n                        <div exemplify=\\\"jqxGrid\\\" [source]=\\\"'child'\\\" [navStyle]=\\\"'tabs'\\\" [externalSources]=\\\"jqxGridSource\\\" [context]=\\\"this\\\">\\r\\n                            <Div> Example Coming Soon</Div>\\r\\n                        </div>\\r\\n                    </Div>\\r\\n\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t</div>\\r\\n\\t\\t</div>\\r\\n\\t</div>\\r\\n\\t<div class=\\\"row\\\" id=\\\"Cards\\\">\\r\\n\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t<div class=\\\"card-row card\\\">\\r\\n\\t\\t\\t\\t<span class=\\\"card-title\\\">Cards</span>\\r\\n\\t\\t\\t\\t<div class=\\\"bump\\\"></div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t\\t\\t\\t<p>Cards display content composed of different elements whose size or supported actions vary. As a grouping, comprises\\r\\n\\t\\t\\t\\t\\t\\t\\tmultiple data types, such as text, grids, and input fields. Cards provide context and an entry point to more robust\\r\\n\\t\\t\\t\\t\\t\\t\\tinformation and views, and their content and quantity can vary. Group the varying items for a card by purpose.</p>\\r\\n\\t\\t\\t\\t\\t\\t<p>Cards will always begin with a header title. Cards also have a standard dropshadow in place showing emphasis. </p>\\r\\n\\t\\t\\t\\t\\t\\t<p>Because every app is different, there are no \\\"standard\\\" layouts for card content; each app and SME should define their\\r\\n\\t\\t\\t\\t\\t\\t\\town.\\r\\n\\t\\t\\t\\t\\t\\t</p>\\r\\n\\t\\t\\t\\t\\t\\t<p>Dividers may be used to separate content areas in cards that require distinct visual separation. Dividers may also\\r\\n\\t\\t\\t\\t\\t\\t\\tindicate seams in places where material may expand. When using an expansion panel always have the panel expand across\\r\\n\\t\\t\\t\\t\\t\\t\\tthe full width of the card.</p>\\r\\n\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t\\t\\t\\t<br />\\r\\n\\t\\t\\t\\t\\t\\t<div exemplify=\\\"cardExample\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"card-row card\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<span class=\\\"card-title\\\">Header 1</span>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"bump\\\"></div>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<p>Fusce sed ante suscipit, dictum nisl in, posuere eros. Etiam ultricies risus finibus, posuere nunc sed, vulputate\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\teros. Vestibulum sed iaculis metus. Nam et eros magna. Mauris auctor leo lorem, eget convallis purus malesuada\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\tut. Quisque tincidunt risus at rhoncus lacinia. Nullam porta auctor dolor, sed auctor lacus dapibus sit amet.\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\tNullam feugiat eros orci, eu vehicula nisi vestibulum pulvinar. Cras dictum mauris sit amet tellus lacinia faucibus.</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t</div>\\r\\n\\t\\t</div>\\r\\n\\t</div>\\r\\n\\t<div class=\\\"row\\\" id=\\\"Modal\\\">\\r\\n\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t<div class=\\\"card-row card\\\">\\r\\n\\t\\t\\t\\t<span class=\\\"card-title\\\">Modal &amp; Dialog windows</span>\\r\\n\\t\\t\\t\\t<div class=\\\"bump\\\"></div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t\\t\\t\\t<p>A modal &amp; dialog is a window that forces the user to interact with it before they can go back to using the parent\\r\\n\\t\\t\\t\\t\\t\\t\\tapplication. A great example of this would be a prompt for deleting a record. They are often used when a user is forced\\r\\n\\t\\t\\t\\t\\t\\t\\tto make an important decision.\\r\\n\\t\\t\\t\\t\\t\\t\\t<a href=\\\"https://v4-alpha.getbootstrap.com/components/modal/\\\" target=\\\"_blank\\\">Source</a>\\r\\n\\t\\t\\t\\t\\t\\t</p>\\r\\n\\t\\t\\t\\t\\t\\t<!-- Modal -->\\r\\n\\t\\t\\t\\t\\t\\t<div exemplify=\\\"modalExample\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"modal fade\\\" id=\\\"nHModal\\\" tabindex=\\\"-1\\\" role=\\\"dialog\\\" aria-labelledby=\\\"nHModal\\\" aria-hidden=\\\"true\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"modal-dialog\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"modal-content\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"modal-header\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<h2>Modal title</h2>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<button type=\\\"button\\\" class=\\\"close\\\" data-dismiss=\\\"modal\\\" aria-label=\\\"Close\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<span aria-hidden=\\\"true\\\">&times;</span>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t</button>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"modal-body\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean auctor purus nec elit molestie feugiat. Vestibulum\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\tante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus id elit eget lacus maximus\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\tlacinia eget ac sapien.</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"modal-footer\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<button type=\\\"button\\\" class=\\\"btn-flat\\\" data-dismiss=\\\"modal\\\">Close</button>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t<button type=\\\"button\\\" class=\\\"btn-flat\\\" data-dismiss=\\\"modal\\\">Ok</button>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t<script>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t$(document).ready(function () {\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t$(\\\"#myModal\\\").modal();\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t});\\r\\n\\t\\t\\t\\t\\t\\t\\t</script>\\r\\n\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t\\t\\t\\t<!-- Button trigger modal -->\\r\\n\\t\\t\\t\\t\\t\\t<div exemplify=\\\"modalButtonExample\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n\\t\\t\\t\\t\\t\\t\\t<button type=\\\"button\\\" class=\\\"btn waves-effect waves-light\\\" data-toggle=\\\"modal\\\" data-target=\\\"#nHModal\\\">Launch modal</button>\\r\\n\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t</div>\\r\\n\\t\\t</div>\\r\\n\\t</div>\\r\\n\\t<div class=\\\"row\\\" id=\\\"Widget\\\">\\r\\n\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t<div class=\\\"card-row card\\\">\\r\\n\\t\\t\\t\\t<span class=\\\"card-title\\\">Widget Framework</span>\\r\\n\\t\\t\\t\\t<div class=\\\"bump\\\"></div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t\\t\\t\\t<p>An Angular 4 dashboard framework heavily inspiried by the\\r\\n\\t\\t\\t\\t\\t\\t\\t<a href=\\\"https://github.com/angular-dashboard-framework/angular-dashboard-framework\\\"\\r\\n\\t\\t\\t\\t\\t\\t\\t target=\\\"_blank\\\">angular-dashboard-framework</a> project.</p>\\r\\n\\t\\t\\t\\t\\t\\t<p>\\r\\n\\t\\t\\t\\t\\t\\t\\t<strong>WARNING:</strong> This project is under active development and will most likely contain many breaking changes until\\r\\n\\t\\t\\t\\t\\t\\t\\twe hit 1.0.0</p>\\r\\n\\t\\t\\t\\t\\t\\t<p>\\r\\n\\t\\t\\t\\t\\t\\t\\t<a href=\\\"https://bitbucket.navihealth.us/projects/WIDGETFW/repos/widgetlibrary/browse/lib\\\" target=\\\"_blank\\\">Browse Widget / Widget Library - BitBucket</a>\\r\\n\\t\\t\\t\\t\\t\\t</p>\\r\\n\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t</div>\\r\\n\\t\\t</div>\\r\\n\\t</div>\\r\\n\\t<div class=\\\"row\\\" id=\\\"Footer\\\">\\r\\n\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t<div class=\\\"card-row card\\\">\\r\\n\\t\\t\\t\\t<span class=\\\"card-title\\\">Footer</span>\\r\\n\\t\\t\\t\\t<div class=\\\"bump\\\"></div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t\\t\\t\\t<p>Resides at the base of all application pages.</p>\\r\\n\\t\\t\\t\\t\\t\\t<div exemplify=\\\"footerExample\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n\\t\\t\\t\\t\\t\\t\\t<footer class=\\\"page-footer\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"footer-copyright\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t&#169; Copyright 2018, naviHealth, Inc. All Rights Reserved.\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t</footer>\\r\\n\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t</div>\\r\\n\\t\\t</div>\\r\\n\\t</div>\\r\\n</div>\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/structure/structure.component.html\n// module id = ../../../../../src/app/structure/structure.component.html\n// module chunks = main","import { Component, OnInit } from '@angular/core';\r\nimport { ActivatedRoute } from '@angular/router';\r\n\r\n@Component({\r\n  selector: 'app-structure',\r\n  templateUrl: './structure.component.html',\r\n  styleUrls: ['../../assets/css/custom.css']\r\n})\r\nexport class StructureComponent implements OnInit {\r\n  // CLASS level variable to hold the source code details while its rendering through a TAB view\r\n  jqxGridSource: any;\r\n\r\n  constructor(private route: ActivatedRoute) { \r\n      // Method where we can set/Harcode the code snippet details around any control that we need to ESDfiy\r\n      this.SetJQXGridCodeSnippet();    \r\n    }\r\n\r\n    ngOnInit() {\r\n      this.route.params.subscribe(params => {\r\n        this.fragment = params['topic'];\r\n\r\n        try {\r\n          document.querySelector('#' + this.fragment).scrollIntoView();\r\n        } catch (e) { }\r\n\r\n        console.log(this.fragment);\r\n      });\r\n    }\r\n\r\n    private fragment: string;\r\n\r\n  /*Grid Code snippet Section starts*/\r\n  public SetJQXGridCodeSnippet() {\r\n    const gridComponentCode = `source: any =\r\n      {\r\n        datatype: 'xml',\r\n        datafields: [\r\n          { name: 'ProductName', type: 'string' },\r\n          { name: 'QuantityPerUnit', type: 'int' },\r\n          { name: 'UnitPrice', type: 'float' },\r\n        ],\r\n        root: 'Products',\r\n        record: 'Product',\r\n        id: 'ProductID',\r\n        url: '../assets/products.xml'\r\n      };\r\n    \r\n      dataAdapter: any = new jqx.dataAdapter(this.source);\r\n    \r\n      columns: any[] =\r\n      [\r\n        { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },\r\n        { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right' },\r\n        { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2' },\r\n      ];\r\n    \r\n      columngroups: any[] =\r\n      [\r\n        { text: 'Product Details', align: 'center', name: 'ProductDetails' }\r\n      ];`;\r\n\r\n      this.jqxGridSource = [{\r\n        name: 'app.component.ts',\r\n        rawCode: gridComponentCode,\r\n      }, {\r\n        name: 'app.component.css',\r\n        language: 'css',\r\n        rawCode: 'banana {color: red;}'\r\n      }];\r\n\r\n  }\r\n  /*Grid Code snippet Section Ends*/\r\n\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/structure/structure.component.ts","module.exports = \"<div class=\\\"container-fluid\\\">\\r\\n\\t\\t<div class=\\\"row\\\" id=\\\"Language\\\">\\r\\n\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t<div class=\\\"card-row card\\\">\\r\\n\\t\\t\\t\\t<span class=\\\"card-title\\\">Language &amp; Typography</span>\\r\\n\\t\\t\\t\\t<div class=\\\"bump\\\"></div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-8\\\">\\r\\n\\t\\t\\t\\t\\t\\t<p>Second person, \\\"you\\\" or \\\"your\\\"</p>\\r\\n\\t\\t\\t\\t\\t\\t<p>Write in small, scannable segments to facilitate navigation and discovery.</p>\\r\\n\\t\\t\\t\\t\\t\\t<p>Keep your sentences and phrases short, with as few concepts as possible.</p>\\r\\n\\t\\t\\t\\t\\t\\t<p>Use the present tense to describe product behavior.</p>\\r\\n\\t\\t\\t\\t\\t\\t<p>Pick common words that are clearly and easily understandable to both beginning and advanced English readers.</p>\\r\\n\\t\\t\\t\\t\\t\\t<p>Tone - Be friendly, respectful, and focus on the user.</p>\\r\\n\\t\\t\\t\\t\\t\\t<p>For every message, ask yourself: does the user really need to know this?</p>\\r\\n\\t\\t\\t\\t\\t\\t<p>Use sentence-style caps for all titles, headings, labels, menu items. Avoid capitalizing all letters except where the style guide requires them, such as the Button style.</p>\\r\\n\\t\\t\\t\\t\\t</div>\\t\\t\\t\\t\\t\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-4\\\">\\r\\n\\t\\t\\t\\t\\t\\t<code>body &#123; font-family: \\\"Century Gothic\\\", CenturyGothic, AppleGothic, sans-serif &#125;</code>\\r\\n\\t\\t\\t\\t\\t\\t<div class=\\\"bump\\\"></div>\\r\\n\\t\\t\\t\\t\\t\\t<h1>Heading h1</h1>\\r\\n\\t\\t\\t\\t\\t\\t<code>&lt;h1&gt;Heading h1&lt;/h1&gt;</code>\\r\\n\\t\\t\\t\\t\\t\\t<div class=\\\"bump\\\"></div>\\r\\n\\t\\t\\t\\t\\t\\t<h2>Heading h2</h2>\\r\\n\\t\\t\\t\\t\\t\\t<code>&lt;h2&gt;Heading h1&lt;/h2&gt;</code>\\r\\n\\t\\t\\t\\t\\t\\t<div class=\\\"bump\\\"></div>\\r\\n\\t\\t\\t\\t\\t\\t<h3>Heading h3</h3>\\r\\n\\t\\t\\t\\t\\t\\t<code>&lt;h3&gt;Heading h1&lt;/h3&gt;</code>\\r\\n\\t\\t\\t\\t\\t\\t<div class=\\\"bump\\\"></div>\\r\\n\\t\\t\\t\\t\\t\\t<h4>Heading h4</h4>\\r\\n\\t\\t\\t\\t\\t\\t<code>&lt;h4&gt;Heading h4&lt;/h1&gt;</code>\\r\\n\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t</div>\\r\\n\\t\\t</div>\\r\\n\\t</div>\\r\\n\\t<div class=\\\"row\\\" id=\\\"Color\\\">\\r\\n\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t<div class=\\\"card-row card\\\">\\r\\n\\t\\t\\t\\t<span class=\\\"card-title\\\">Colors</span>\\r\\n\\t\\t\\t\\t<div class=\\\"bump\\\"></div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<h3>Grays</h3>\\r\\n\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-2\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p style=\\\"background-color:#101010;padding:25px;\\\"></p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<h4>Gray 900</h4>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>#101010</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<h3>Uses</h3>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>Text</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>Toast &amp; Tooltips</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>Non-clickable Icons</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-2\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p style=\\\"background-color:#6e6e6e;padding:25px;\\\"></p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<h4>Gray 500</h4>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>#6e6e6e</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<h3>Uses</h3>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>Disabled Text Button</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>Disabled Toggle Icon</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>Alternate Icon</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>Form Bottom Border</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-2\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p style=\\\"background-color:#e0e0e0;padding:25px;\\\"></p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<h4>Gray 300</h4>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>#e0e0e0</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<h3>Uses</h3>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>Disabled Background</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>Button</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>Icon Hover Background</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>Dividers</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>Table Borders</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-2\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p style=\\\"background-color:#eeeeee;padding:25px;\\\"></p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<h4>Gray 200</h4>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>#eeeeee</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<h3>Uses</h3>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>Background</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-2\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p style=\\\"background-color:#f5f5f5;padding:25px;\\\"></p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<h4>Gray 100</h4>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>#f5f5f5</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<h3>Uses</h3>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>Disabled Card</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>Table Hover Background</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-2\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p style=\\\"background-color:#ffffff;padding:25px; border:1px solid #eeeeee;\\\"></p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<h4>White</h4>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>#ffffff</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<h3>Uses</h3>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>Reverse Text</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>Card</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>Buttons</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>Reverse Icons</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<p>Subnavs</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\r\\n\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-8\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<h3>Brand colors</h3>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-3\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"b-margin-zero\\\" style=\\\"background-color:#0057b8;padding:25px;\\\"></p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<h4 class=\\\"t-margin-zero b-margin-zero\\\">nH Blue</h4>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p>#0057b8</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<h3>Uses</h3>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"b-margin-zero\\\">Navbar</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"t-margin-zero\\\">Table Headers</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-3\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"b-margin-zero\\\" style=\\\"background-color:#29abbd;padding:25px;\\\"></p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<h4 class=\\\"t-margin-zero b-margin-zero\\\">nH Blue-Green</h4>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p>#29abbd</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<h3>Uses</h3>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"b-margin-zero\\\">Marketing</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"t-margin-zero b-margin-zero\\\">Accent Color</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"t-margin-zero\\\">Cards</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-3\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"b-margin-zero\\\" style=\\\"background-color:#e35205;padding:25px;\\\"></p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<h4 class=\\\"t-margin-zero b-margin-zero\\\">nH Orange</h4>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p>#e35205</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<h3>Uses</h3>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"b-margin-zero\\\">UI/Marketing</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"t-margin-zero\\\">UI Accents</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-3\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"b-margin-zero\\\" style=\\\"background-color:#f79421;padding:25px;\\\"></p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<h4 class=\\\"t-margin-zero b-margin-zero\\\">nH Yellow Orange</h4>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p>#f79421</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<h3>Uses</h3>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"b-margin-zero\\\">UI/Marketing</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"t-margin-zero\\\">UI Accents</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"t-margin-zero\\\">Warning Text/Messages</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-8\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<h3>Utility colors</h3>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-3\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"b-margin-zero\\\" style=\\\"background-color:#2196f3;padding:25px;\\\"></p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<h4 class=\\\"t-margin-zero b-margin-zero\\\">Blue 400</h4>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p>#2196f3</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<h3>Uses</h3>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"b-margin-zero\\\">Buttons</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"t-margin-zero\\\">Links</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"t-margin-zero\\\">Icons</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-3\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"b-margin-zero\\\" style=\\\"background-color:#36ad8b;padding:25px;\\\"></p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<h4 class=\\\"t-margin-zero b-margin-zero\\\">Green</h4>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p>#36ad8b</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<h3>Uses</h3>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"b-margin-zero\\\">Positive Text/Message</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"t-margin-zero b-margin-zero\\\">Accent Color</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"t-margin-zero\\\">Cards</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-3\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"b-margin-zero\\\" style=\\\"background-color:#f15e47;padding:25px;\\\"></p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<h4 class=\\\"t-margin-zero b-margin-zero\\\">Red</h4>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p>#f15e47</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<h3>Uses</h3>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"b-margin-zero\\\">Negative Text/Message</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"t-margin-zero\\\">Validation Error</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"col-md-3\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"b-margin-zero\\\" style=\\\"background-color:#ffc600;padding:25px;\\\"></p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<h4 class=\\\"t-margin-zero b-margin-zero\\\">Yellow</h4>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p>#ffc600</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<h3>Uses</h3>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<p class=\\\"b-margin-zero\\\">Pending Status</p>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t</div>\\r\\n\\t\\t</div>\\r\\n\\t</div>\\r\\n\\t<div class=\\\"row\\\" id=\\\"Logos\\\">\\r\\n\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t<div class=\\\"card-row card\\\">\\r\\n\\t\\t\\t\\t<span class=\\\"card-title\\\">Logos</span>\\r\\n\\t\\t\\t\\t<div class=\\\"bump\\\"></div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t\\t\\t\\t<p>We have provided our logos below in horizontal and vertical formats for use on various background colors. If you need another size simply change the width attribute only and delete the height altogether.</p>\\r\\n\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-6\\\">\\r\\n\\t\\t\\t\\t\\t\\t<h3>Wide Full Color - White Background</h3>\\r\\n\\t\\t\\t\\t\\t\\t<div exemplify=\\\"logoExample1\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<img src=\\\"https://esdnonprod.navihealth.us/assets/nH-Logo-color-wd.svg\\\" width=\\\"288\\\" height=\\\"104\\\" />\\r\\n\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t\\t\\r\\n\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-6\\\">\\r\\n\\t\\t\\t\\t\\t\\t<h3>Square Full Color - White Background</h3>\\r\\n\\t\\t\\t\\t\\t\\t<div exemplify=\\\"logoExample2\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<img src=\\\"https://esdnonprod.navihealth.us/assets/nH-Logo-color-sq.svg\\\" width=\\\"288\\\" height=\\\"288\\\" />\\r\\n\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-6\\\">\\r\\n\\t\\t\\t\\t\\t\\t<h3>Wide Black - White Background</h3>\\r\\n\\t\\t\\t\\t\\t\\t<div exemplify=\\\"logoExample3\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<img src=\\\"https://esdnonprod.navihealth.us/assets/nH-Logo-black-wd.svg\\\" width=\\\"288\\\" height=\\\"104\\\" />\\r\\n\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-6\\\">\\r\\n\\t\\t\\t\\t\\t\\t<h3>Square Black - White Background</h3>\\r\\n\\t\\t\\t\\t\\t\\t<div exemplify=\\\"logoExample4\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<img src=\\\"https://esdnonprod.navihealth.us/assets/nH-Logo-black-sq.svg\\\" width=\\\"288\\\" height=\\\"288\\\" />\\r\\n\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-6\\\">\\r\\n\\t\\t\\t\\t\\t\\t<h3>Wide White - Dark Background</h3>\\r\\n\\t\\t\\t\\t\\t\\t<div class=\\\"black-bg\\\">\\r\\n\\t\\t\\t\\t\\t\\t<div exemplify=\\\"logoExample5\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<img src=\\\"https://esdnonprod.navihealth.us/assets/nH-Logo-white-wd.svg\\\" width=\\\"288\\\" height=\\\"104\\\" /></div>\\r\\n\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-6\\\">\\r\\n\\t\\t\\t\\t\\t\\t<h3>Square White - Dark Background</h3>\\r\\n\\t\\t\\t\\t\\t\\t<div class=\\\"black-bg\\\">\\r\\n\\t\\t\\t\\t\\t\\t<div exemplify=\\\"logoExample6\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<img src=\\\"https://esdnonprod.navihealth.us/assets/nH-Logo-white-sq.svg\\\" width=\\\"288\\\" height=\\\"288\\\" /></div>\\r\\n\\t\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t</div>\\r\\n\\t\\t</div>\\r\\n\\t</div>\\r\\n\\t<div class=\\\"row\\\" id=\\\"Icons\\\">\\r\\n\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t<div class=\\\"card-row card\\\">\\r\\n\\t\\t\\t\\t<span class=\\\"card-title\\\">Icons</span>\\r\\n\\t\\t\\t\\t<div class=\\\"bump\\\"></div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-12\\\">\\r\\n\\t\\t\\t\\t\\t\\t<p>We utilize <a href=\\\"https://material.io/icons/\\\" target=\\\"_blank\\\">Google Material icon library</a> and below are several we use predominantly throughout our apps. In the case where you need to locate another icon you can visit <a href=\\\"https://material.io/icons/\\\" target=\\\"_blank\\\">Google Material</a> and find what you need. Please be advised that you must have the icon approved by UI/UX if it not found below.</p>\\r\\n\\t\\t\\t\\t\\t\\t<code>&lt;link href=\\\"https://fonts.googleapis.com/icon?family=Material+Icons\\\" rel=\\\"stylesheet\\\"&gt;</code>\\r\\n\\t\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-4 d-flex justify-content-center\\\"><i class=\\\"material-icons\\\">add</i>&nbsp;<code>&lt;i class=\\\"material-icons\\\">add&lt;/i&gt;</code></div>\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-4 d-flex justify-content-center\\\"><i class=\\\"material-icons\\\">delete</i>&nbsp;<code>&lt;i class=\\\"material-icons\\\">delete&lt;/i&gt;</code></div>\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-4 d-flex justify-content-center\\\"><i class=\\\"material-icons\\\">face</i>&nbsp;<code>&lt;i class=\\\"material-icons\\\">face&lt;/i&gt;</code></div>\\t\\t\\t\\t\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-4 d-flex justify-content-center\\\"><i class=\\\"material-icons\\\">file_download</i>&nbsp;<code>&lt;i class=\\\"material-icons\\\">file_download&lt;/i&gt;</code></div>\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-4 d-flex justify-content-center\\\"><i class=\\\"material-icons\\\">history</i>&nbsp;<code>&lt;i class=\\\"material-icons\\\">history&lt;/i&gt;</code></div>\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-4 d-flex justify-content-center\\\"><i class=\\\"material-icons\\\">today</i>&nbsp;<code>&lt;i class=\\\"material-icons\\\">today&lt;/i&gt;</code></div>\\t\\t\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-4 d-flex justify-content-center\\\"><i class=\\\"material-icons\\\">expand_less</i>&nbsp;<code>&lt;i class=\\\"material-icons\\\">expand_less&lt;/i&gt;</code></div>\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-4 d-flex justify-content-center\\\"><i class=\\\"material-icons\\\">expand_more</i>&nbsp;<code>&lt;i class=\\\"material-icons\\\">expand_more&lt;/i&gt;</code></div>\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-4 d-flex justify-content-center\\\"><i class=\\\"material-icons\\\">refresh</i>&nbsp;<code>&lt;i class=\\\"material-icons\\\">refresh&lt;/i&gt;</code></div>\\t\\t\\t\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-4 d-flex justify-content-center\\\"><i class=\\\"material-icons\\\">menu</i>&nbsp;<code>&lt;i class=\\\"material-icons\\\">menu&lt;/i&gt;</code></div>\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-4 d-flex justify-content-center\\\"><i class=\\\"material-icons\\\">exit_to_app</i>&nbsp;<code>&lt;i class=\\\"material-icons\\\">exit_to_app&lt;/i&gt;</code></div>\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-4 d-flex justify-content-center\\\"><i class=\\\"material-icons\\\">report_problem</i>&nbsp;<code>&lt;i class=\\\"material-icons\\\">report_problem&lt;/i&gt;</code></div>\\t\\t\\t\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-4 d-flex justify-content-center\\\"><i class=\\\"material-icons\\\">search</i>&nbsp;<code>&lt;i class=\\\"material-icons\\\">search&lt;/i&gt;</code></div>\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-4 d-flex justify-content-center\\\"><i class=\\\"material-icons\\\">create</i>&nbsp;<code>&lt;i class=\\\"material-icons\\\">create&lt;/i&gt;</code></div>\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-4 d-flex justify-content-center\\\"><i class=\\\"material-icons\\\">close</i>&nbsp;<code>&lt;i class=\\\"material-icons\\\">close&lt;/i&gt;</code></div>\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-4 d-flex justify-content-center\\\"><i class=\\\"material-icons\\\">fullscreen_exit</i>&nbsp;<code>&lt;i class=\\\"material-icons\\\">fullscreen_exit&lt;/i&gt;</code></div>\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-4 d-flex justify-content-center\\\"><i class=\\\"material-icons\\\">fullscreen</i>&nbsp;<code>&lt;i class=\\\"material-icons\\\">fullscreen&lt;/i&gt;</code></div>\\t\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-4 d-flex justify-content-center\\\"><i class=\\\"material-icons\\\">send</i>&nbsp;<code>&lt;i class=\\\"material-icons\\\">send&lt;/i&gt;</code></div>\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-4 d-flex justify-content-center\\\"><i class=\\\"material-icons\\\">dashboard</i>&nbsp;<code>&lt;i class=\\\"material-icons\\\">dashboard&lt;/i&gt;</code></div>\\r\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-4 d-flex justify-content-center\\\"><i class=\\\"material-icons\\\">archive</i>&nbsp;<code>&lt;i class=\\\"material-icons\\\">archive&lt;/i&gt;</code></div>\\t\\r\\n\\t\\t\\t\\t</div>\\r\\n\\t\\t\\t</div>\\r\\n\\t\\t</div>\\r\\n\\t</div>\\r\\n</div>\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/style/style.component.html\n// module id = ../../../../../src/app/style/style.component.html\n// module chunks = main","import { Component, OnInit } from '@angular/core';\r\nimport {ActivatedRoute} from '@angular/router';\r\n\r\n@Component({\r\n  selector: 'app-style',\r\n  templateUrl: './style.component.html',\r\n  styleUrls: ['../../assets/css/custom.css']\r\n})\r\nexport class StyleComponent implements OnInit {\r\n\r\n  constructor(private route: ActivatedRoute) { }\r\n  private fragment:string;\r\n\r\n  ngOnInit() {\r\n    this.route.params.subscribe(params=>{\r\n      this.fragment = params['topic'];\r\n       try {\r\n        document.querySelector('#' + this.fragment).scrollIntoView();\r\n        } catch (e) { }\r\n    });\r\n  }\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/style/style.component.ts","exports = module.exports = require(\"../../../node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \".dataTable tr:nth-child(even) td {\\r\\n    background-color: rgba(0,0,0,0.03);\\r\\n}\\r\\ntable.dataTable thead th, table.dataTable thead td {\\r\\n    border-bottom: 1px solid #cccccc;\\r\\n    border-radius: 0;\\r\\n}\\r\\ntable.dataTable.no-footer {\\r\\n    border-bottom: 1px solid #cccccc;\\r\\n}\", \"\"]);\n\n// exports\n\n\n/*** EXPORTS FROM exports-loader ***/\nmodule.exports = module.exports.toString();\n\n\n//////////////////\n// WEBPACK FOOTER\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/ui-elements/ui-elements.component.css\n// module id = ../../../../../src/app/ui-elements/ui-elements.component.css\n// module chunks = main","module.exports = \"<div class=\\\"container-fluid\\\">\\r\\n  <div class=\\\"row\\\" id=\\\"Top\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">UI Elements</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>Below we have every UI element used within our applications.</p>\\r\\n            <p><strong>NOTE:</strong> If there is a need to customize a component below or add a new one please reach out to <a href=\\\"mailto:uiux-group@navihealth.com\\\">UI/UX</a>.</p>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Buttons\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Buttons</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-6\\\">\\r\\n            <div exemplify=\\\"buttonExample1\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<button class=\\\"btn waves-effect waves-light\\\" type=\\\"submit\\\" name=\\\"action\\\">Raised</button>\\r\\n            </div>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-6\\\">\\r\\n            <div class=\\\"row\\\">\\r\\n              <div class=\\\"col-12\\\">\\r\\n                <h3>Treatment</h3>\\r\\n                <code>font-size: 13px &nbsp; text-transform: uppercase &nbsp; font-weight: 700</code></div>\\r\\n              <div class=\\\"col-6\\\">\\r\\n                <h3>Text</h3>\\r\\n                <p>White (#fff)</p>\\r\\n              </div>\\r\\n              <div class=\\\"col-6\\\">\\r\\n                <h3>Fill Color</h3>\\r\\n                <p>Blue 400 (#2196f3)</p>\\r\\n              </div>\\r\\n            </div>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-6\\\">\\r\\n            <div exemplify=\\\"buttonExample2\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<button class=\\\"btn-flat waves-effect\\\" type=\\\"submit\\\" name=\\\"action\\\">Flat</button>\\r\\n            </div>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-6\\\">\\r\\n            <div class=\\\"row\\\">\\r\\n              <div class=\\\"col-12\\\">\\r\\n                <h3>Treatment</h3>\\r\\n                <code>font-size: 13px &nbsp; text-transform: uppercase &nbsp; font-weight: 700</code></div>\\r\\n              <div class=\\\"col-6\\\">\\r\\n                <h3>Text</h3>\\r\\n                <p>Blue 400 (#2196f3)</p>\\r\\n              </div>\\r\\n              <div class=\\\"col-6\\\">\\r\\n                <h3>Fill Color</h3>\\r\\n                <p>None</p>\\r\\n              </div>\\r\\n            </div>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-6\\\">\\r\\n            <div exemplify=\\\"buttonExample3\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<button class=\\\"btn waves-effect waves-light\\\" type=\\\"submit\\\" name=\\\"action\\\">with Icon<i class=\\\"material-icons right icon-white\\\">file_download</i></button>\\r\\n            </div>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-6\\\">\\r\\n            <div class=\\\"row\\\">\\r\\n              <div class=\\\"col-12\\\">\\r\\n                <h3>Treatment</h3>\\r\\n                <code>font-size: 13px &nbsp; text-transform: uppercase &nbsp; font-weight: 700</code></div>\\r\\n              <div class=\\\"col-4\\\">\\r\\n                <h3>Text</h3>\\r\\n                <p>White (#fff)</p>\\r\\n              </div>\\r\\n              <div class=\\\"col-4\\\">\\r\\n                <h3>Fill Color</h3>\\r\\n                <p>Blue 400 (#2196f3)</p>\\r\\n              </div>\\r\\n              <div class=\\\"col-4\\\">\\r\\n                <h3>Icon Color</h3>\\r\\n                <p>White (#fff)</p>\\r\\n              </div>\\r\\n            </div>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-6\\\">\\r\\n            <div exemplify=\\\"buttonExample4\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<a href=\\\"#\\\" class=\\\"icon-button\\\"><i class=\\\"material-icons\\\">print</i></a>\\r\\n            </div>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-6\\\">\\r\\n            <div class=\\\"row\\\">\\r\\n              <div class=\\\"col-12\\\">\\r\\n                <h3>Treatment</h3>\\r\\n                <code>font-family: 'Material Icons'; &nbsp; font-size: 24px &nbsp; font-weight: normal</code></div>\\r\\n              <div class=\\\"col-4\\\">\\r\\n                <h3>Icon Color</h3>\\r\\n                <p>Blue 400 (#2196f3)</p>\\r\\n              </div>\\r\\n            </div>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-6\\\">\\r\\n            <div exemplify=\\\"buttonExample5\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<button class=\\\"btn waves-effect waves-light disabled\\\" type=\\\"submit\\\" name=\\\"action\\\">Disabled</button>\\r\\n            </div>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-6\\\">\\r\\n            <div class=\\\"row\\\">\\r\\n              <div class=\\\"col-12\\\">\\r\\n                <h3>Treatment</h3>\\r\\n                <code>font-size: 13px &nbsp; text-transform: uppercase &nbsp; font-weight: 700</code></div>\\r\\n              <div class=\\\"col-6\\\">\\r\\n                <h3>Text</h3>\\r\\n                <p>Gray 500 (#6e6e6e)</p>\\r\\n              </div>\\r\\n              <div class=\\\"col-6\\\">\\r\\n                <h3>Fill Color</h3>\\r\\n                <p>Gray 300 (#e0e0e0)</p>\\r\\n              </div>\\r\\n            </div>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <h2>Button types</h2>\\r\\n            <div class=\\\"list-group\\\">\\r\\n              <span class=\\\"list-group-item list-group-item-action flex-column align-items-start\\\">\\r\\n                  <div class=\\\"d-flex w-100 justify-content-between\\\">\\r\\n                    <h3 class=\\\"mb-1\\\">Raised</h3>\\r\\n                  </div>\\r\\n                  <p class=\\\"mb-1\\\">A typically rectangular material button that lifts and displays ink reactions on press.</p>\\r\\n                </span>\\r\\n              <span class=\\\"list-group-item list-group-item-action flex-column align-items-start\\\">\\r\\n                  <div class=\\\"d-flex w-100 justify-content-between\\\">\\r\\n                    <h3 class=\\\"mb-1\\\">Flat</h3>\\r\\n                  </div>\\r\\n                  <p class=\\\"mb-1\\\">A button made of ink that displays ink reactions on press but does not lift.</p>\\r\\n                </span>\\r\\n              <span class=\\\"list-group-item list-group-item-action flex-column align-items-start\\\">\\r\\n                  <div class=\\\"d-flex w-100 justify-content-between\\\">\\r\\n                    <h3 class=\\\"mb-1\\\">Icon</h3>\\r\\n                  </div>\\r\\n                  <p class=\\\"mb-1\\\">Icons will be used in place of standard buttons in several cases. Quick actions on widgets as well as within grids.</p>\\r\\n                </span>\\r\\n            </div>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <h2>Button usage</h2>\\r\\n            <div class=\\\"list-group\\\">\\r\\n              <span class=\\\"list-group-item list-group-item-action flex-column align-items-start\\\">\\r\\n                  <div class=\\\"d-flex w-100 justify-content-between\\\">\\r\\n                    <h3 class=\\\"mb-1\\\">Forms</h3>\\r\\n                  </div>\\r\\n                  <p class=\\\"mb-1\\\">Raised buttons add dimension to mostly flat layouts. They emphasize functions on busy or wide spaces.</p>\\r\\n                  <p class=\\\"mb-1\\\"><strong>Save (i.e. primary action) button is disabled when required input fields are not all populated.</strong></p>\\r\\n                </span>\\r\\n              <span class=\\\"list-group-item list-group-item-action flex-column align-items-start\\\">\\r\\n                  <div class=\\\"d-flex w-100 justify-content-between\\\">\\r\\n                    <h3 class=\\\"mb-1\\\">Standard modals/dialogs</h3>\\r\\n                  </div>\\r\\n                  <p class=\\\"mb-1\\\">The type of button used should be suited to the context in which it appears. Use flat buttons in modals/dialogs.</p>\\r\\n                </span>\\r\\n              <span class=\\\"list-group-item list-group-item-action flex-column align-items-start\\\">\\r\\n                  <div class=\\\"d-flex w-100 justify-content-between\\\">\\r\\n                    <h3 class=\\\"mb-1\\\">Grids</h3>\\r\\n                  </div>\\r\\n                  <p class=\\\"mb-1\\\">The type of button used should be suited to the context in which it appears. Use icons as buttons within grid rows.</p>\\r\\n                </span>\\r\\n            </div>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <h2>Button placement</h2>\\r\\n            <div class=\\\"list-group\\\">\\r\\n              <span class=\\\"list-group-item list-group-item-action flex-column align-items-start\\\">\\r\\n                  <div class=\\\"d-flex w-100 justify-content-between\\\">\\r\\n                    <h3 class=\\\"mb-1\\\">Forms</h3>\\r\\n                  </div>\\r\\n                  <p class=\\\"mb-1\\\">Button alignment: Left</p>\\r\\n                  <p class=\\\"mb-1\\\">Button type: Raised</p>\\r\\n                  <p class=\\\"mb-1\\\">Place the affirmative button on the left, the dismissive button on the right.</p>\\r\\n                </span>\\r\\n              <span class=\\\"list-group-item list-group-item-action flex-column align-items-start\\\">\\r\\n                  <div class=\\\"d-flex w-100 justify-content-between\\\">\\r\\n                    <h3 class=\\\"mb-1\\\">Standard modals/dialogs</h3>\\r\\n                  </div>\\r\\n                  <p class=\\\"mb-1\\\">Button alignment: Right</p>\\r\\n                  <p class=\\\"mb-1\\\">Button type: Flat</p>\\r\\n                  <p class=\\\"mb-1\\\">Place the affirmative button on the right, the dismissive button on the left.</p>\\r\\n                  <br />\\r\\n                  <p class=\\\"mb-1\\\">Note: In the case of a modal containing a form please use a raised button with left alignment as you would with any other form.</p>\\r\\n                </span>\\r\\n              <span class=\\\"list-group-item list-group-item-action flex-column align-items-start\\\">\\r\\n                  <div class=\\\"d-flex w-100 justify-content-between\\\">\\r\\n                    <h3 class=\\\"mb-1\\\">Grids</h3>\\r\\n                  </div>\\r\\n                  <p class=\\\"mb-1\\\">Button alignment on row: Right</p>\\r\\n                </span>\\r\\n            </div>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <h2>Button names</h2>\\r\\n            <div class=\\\"list-group\\\">\\r\\n              <span class=\\\"list-group-item list-group-item-action flex-column align-items-start\\\">\\r\\n                  <div class=\\\"d-flex w-100 justify-content-between\\\">\\r\\n                    <h3 class=\\\"mb-1\\\">Primary</h3>\\r\\n                  </div>\\r\\n                  <p class=\\\"mb-1\\\">Save, Submit, Send, Notify, Download, Save &amp; Submit, Upload, Edit, Delete, Save as Draft, Yes</p>\\r\\n                </span>\\r\\n              <span class=\\\"list-group-item list-group-item-action flex-column align-items-start\\\">\\r\\n                  <div class=\\\"d-flex w-100 justify-content-between\\\">\\r\\n                    <h3 class=\\\"mb-1\\\">Secondary</h3>\\r\\n                  </div>\\r\\n                  <p class=\\\"mb-1\\\">Cancel, Close, Clear, No</p>\\r\\n                </span>\\r\\n            </div>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Forms\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Forms</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>All forms are to be balanced out utilizing the Bootstrap grid structure. Keep in mind user as well as business\\r\\n              needs to accomodate a streamlined workflow.</p>\\r\\n            <p><strong>NOTE:</strong> Always apply <code>tabindex</code> attribute to your input elements and order them at\\r\\n              the advisement of your Product Owner. This detail allows the developer to customize the tabbing navigation\\r\\n              order of a particular UI.</p>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <h2>Standard Input fields</h2>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-4\\\" [ngClass]=\\\"{'has-danger': (reactFormExample.get('fname').touched\\r\\n          || reactFormExample.get('fname').dirty) &&\\r\\n            !reactFormExample.get('fname').valid }\\\">\\r\\n            <form class=\\\"form-horizontal\\\" [formGroup]=\\\"reactFormExample\\\">\\r\\n              <div exemplify=\\\"inputExample1\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<div class=\\\"form-group\\\">\\r\\n  <label class=\\\"nh-halo-label-ro\\\" for=\\\"firstName\\\">First Name</label>\\r\\n  <input class=\\\"form-control\\\" formcontrolname=\\\"firstName\\\" id=\\\"firstName\\\" type=\\\"text\\\" ng-reflect-name=\\\"firstName\\\" formControlName=\\\"fname\\\">\\r\\n\\r\\n<span class=\\\"form-control-feedback\\\" *ngIf=\\\"(reactFormExample.get('fname').touched||\\r\\nreactFormExample.get('fname').dirty) &&\\r\\nreactFormExample.get('fname').errors\\\">\\r\\n  <span *ngIf=\\\"reactFormExample.get('fname').errors.required\\\">\\r\\n    First Name is required\\r\\n  </span>\\r\\n</span>\\r\\n</div>\\r\\n            </div>\\r\\n            </form>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <div exemplify=\\\"inputExample2\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<div class=\\\"form-group\\\">\\r\\n  <label class=\\\"nh-halo-label-ro\\\" for=\\\"middleName\\\">Middle Name (disabled)</label>\\r\\n  <input class=\\\"form-control\\\" formcontrolname=\\\"middleName\\\" id=\\\"middleName\\\" type=\\\"text\\\" ng-reflect-name=\\\"middleName\\\" disabled>\\r\\n</div>\\r\\n            </div>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <div exemplify=\\\"inputExample3\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<div class=\\\"form-group\\\">\\r\\n  <label class=\\\"nh-halo-label-ro\\\" for=\\\"lastName\\\">Last Name</label>\\r\\n  <input class=\\\"form-control\\\" placeholder=\\\"Placeholder\\\" formcontrolname=\\\"lastName\\\" id=\\\"lastName\\\" type=\\\"text\\\" ng-reflect-name=\\\"lastName\\\">\\r\\n</div>\\r\\n          </div>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <h2>Required &amp; Optional Input fields</h2>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-4\\\" [ngClass]=\\\"{'has-danger': (reactFormExample.get('email').touched\\r\\n          || reactFormExample.get('email').dirty) &&\\r\\n            !reactFormExample.get('email').valid }\\\">\\r\\n            <form class=\\\"form-horizontal\\\" [formGroup]=\\\"reactFormExample\\\">\\r\\n              <div exemplify=\\\"inputExample4\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<div class=\\\"form-group\\\">\\r\\n  <label class=\\\"nh-halo-label-ro\\\" for=\\\"email\\\">Email</label>\\r\\n  <input class=\\\"form-control validate\\\" formcontrolname=\\\"email\\\" id=\\\"email\\\" type=\\\"text\\\" ng-reflect-name=\\\"email\\\" formControlName=\\\"email\\\">\\r\\n  <span class=\\\"form-control-feedback\\\" *ngIf=\\\"(reactFormExample.get('email').touched||\\r\\n  reactFormExample.get('email').dirty) &&\\r\\n  reactFormExample.get('email').errors\\\">\\r\\n      <span *ngIf=\\\"reactFormExample.get('email').errors.required\\\">\\r\\n        Email is required\\r\\n      </span>\\r\\n    </span>\\r\\n</div>\\r\\n              </div>\\r\\n          </form>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <div exemplify=\\\"inputExample5\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<div class=\\\"form-group\\\">\\r\\n  <label class=\\\"nh-halo-label-ro\\\" for=\\\"email2\\\">Secondary Email <span class=\\\"label-optional\\\">(Optional)</span></label>\\r\\n  <input class=\\\"form-control\\\" formcontrolname=\\\"email2\\\" id=\\\"email2\\\" type=\\\"text\\\" ng-reflect-name=\\\"email2\\\">\\r\\n</div>\\r\\n            </div>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <h2>Information Display Input fields</h2>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div exemplify=\\\"inputExample6\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<div class=\\\"row\\\">\\r\\n  <div class=\\\"col-md-3\\\">\\r\\n    <div class=\\\"form-group\\\">\\r\\n      <span class=\\\"nh-halo-label-ro\\\" for=\\\"memberID\\\">Member ID</span>\\r\\n      <div>\\r\\n        <span class=\\\"label-ro\\\">12345xyz</span>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"col-md-3\\\">\\r\\n    <div class=\\\"form-group\\\">\\r\\n      <span class=\\\"nh-halo-label-ro\\\" for=\\\"memberID\\\">DOB</span>\\r\\n      <div>\\r\\n        <span class=\\\"label-ro\\\">1/1/1929</span>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"col-md-3\\\">\\r\\n    <div class=\\\"form-group\\\">\\r\\n      <span class=\\\"nh-halo-label-ro\\\" for=\\\"memberID\\\">Address</span>\\r\\n      <div>\\r\\n        <span class=\\\"label-ro\\\">3455 Armory Road<br />Wilmington, NC 28401</span>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"col-md-3\\\">\\r\\n    <div class=\\\"form-group\\\">\\r\\n      <span class=\\\"nh-halo-label-ro\\\" for=\\\"memberID\\\">Gender</span>\\r\\n      <div>\\r\\n        <span class=\\\"label-ro\\\">Female</span>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n</div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"TextMask\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Text Mask</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-6\\\">\\r\\n            <p>To be used when additional formatting of input data is required. (e.g. Phone number)</p>\\r\\n            <p><a href=\\\"https://www.npmjs.com/package/angular2-text-mask\\\" target=\\\"_blank\\\">Source</a></p>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-6\\\">\\r\\n            <h3>Example</h3>\\r\\n            <div exemplify=\\\"maskExample\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n <div class=\\\"form-group\\\">\\r\\n  <label class=\\\"control-label nh-halo-label-ro\\\" for=\\\"phone\\\">Phone Number</label>\\r\\n  <input class=\\\"form-control\\\" id=\\\"phone\\\" type=\\\"text\\\" [textMask]=\\\"phoneMask\\\" (ngModelChange)=\\\"phoneValue = unmask($event)\\\" />\\r\\n</div> \\r\\n            </div>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"DataTables\\\">\\r\\n      <div class=\\\"col-12\\\">\\r\\n        <div class=\\\"card-row card\\\">\\r\\n          <div class=\\\"card-title\\\">DataTables</div>\\r\\n          <div class=\\\"bump\\\"></div>\\r\\n          <div class=\\\"row\\\">\\r\\n            <div class=\\\"col\\\">\\r\\n              <p>\\r\\n                DataTables is used by implementing angular-datatables. Please follow the Getting Started documentation to implement into your project.\\r\\n                <a href=\\\"https://l-lin.github.io/angular-datatables/#/getting-started\\\">Angular DataTables - Getting Started</a>\\r\\n              </p>\\r\\n              <table id=\\\"myTable\\\" datatable class=\\\"row-border hover\\\">\\r\\n                <thead>\\r\\n                  <tr>\\r\\n                    <td>ID</td>\\r\\n                    <td>Name</td> \\r\\n                  </tr>\\r\\n                </thead>\\r\\n                <tbody>\\r\\n                  <tr *ngFor=\\\"let city of cities\\\">\\r\\n                    <td>{{city.id}}</td>\\r\\n                    <td>{{city.name}}</td>\\r\\n                  </tr>\\r\\n                </tbody>\\r\\n              </table>\\r\\n            </div>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Dropdown\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Dropdown Menus</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-12\\\">\\r\\n            <p><strong>NOTE:</strong> It is standard practice to list data by alpha &amp; numeric ascending order.</p>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-6\\\">\\r\\n            <h3>Standard</h3>\\r\\n            <div exemplify=\\\"dropdownEx1\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<select class=\\\"form-control dd-static\\\" id=\\\"dropdown\\\" name=\\\"dropdown\\\">\\r\\n  <option *ngFor=\\\"let item of drpItems\\\" [value]=\\\"item.id\\\">{{item.text}}</option>\\r\\n</select>\\r\\n            </div>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-6\\\">\\r\\n            <h3>Searchable</h3>\\r\\n            <div exemplify=\\\"dropdownEx2\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<ng-select [items]=\\\"cities\\\" [multiple]=\\\"false\\\" bindLabel=\\\"name\\\" bindValue=\\\"id\\\" clearAllText=\\\"Clear\\\"></ng-select>\\r\\n            </div>\\r\\n            <a href=\\\"https://www.npmjs.com/package/@ng-select/ng-select\\\" target=\\\"_blank\\\">Source</a>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-6\\\">\\r\\n            <h3>Multi-Select</h3>\\r\\n            <div exemplify=\\\"dropdownEx3\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<ng-select [items]=\\\"cities\\\" [multiple]=\\\"true\\\" [closeOnSelect]=\\\"false\\\" [searchable]=\\\"false\\\" bindLabel=\\\"name\\\" bindValue=\\\"id\\\" clearAllText=\\\"Clear\\\"></ng-select>\\r\\n            </div>\\r\\n            <a href=\\\"https://www.npmjs.com/package/@ng-select/ng-select\\\" target=\\\"_blank\\\">Source</a>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Radio\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Radio Buttons</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>Radio Buttons are used when the user must make only one selection out of a group of items.</p>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div exemplify=\\\"radio\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<div class=\\\"row\\\">\\r\\n  <div class=\\\"col-md-4\\\">\\r\\n    <label>\\r\\n      <input class=\\\"with-gap\\\" name=\\\"test1\\\" type=\\\"radio\\\" />\\r\\n      <span>Unselected</span>\\r\\n    </label>\\r\\n  </div>\\r\\n  <div class=\\\"col-md-4\\\">\\r\\n    <label>\\r\\n      <input class=\\\"with-gap\\\" name=\\\"test2\\\" type=\\\"radio\\\" checked />\\r\\n      <span>Selected</span>\\r\\n    </label>\\r\\n  </div>\\r\\n  <div class=\\\"col-md-4\\\">\\r\\n    <label>\\r\\n      <input name=\\\"test3\\\" type=\\\"radio\\\" disabled=\\\"disabled\\\" />\\r\\n      <span>Disabled</span>\\r\\n    </label>\\r\\n  </div>\\r\\n</div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Checkbox\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Checkboxes</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>Use checkboxes when looking for yes or no answers.</p>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div exemplify=\\\"checkbox\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<div class=\\\"row\\\">\\r\\n  <div class=\\\"col-md-3\\\">\\r\\n    <label>\\r\\n      <input class=\\\"with-gap\\\" name=\\\"test1\\\" type=\\\"checkbox\\\" />\\r\\n      <span>Unchecked</span>\\r\\n    </label>\\r\\n  </div>\\r\\n  <div class=\\\"col-md-3\\\">\\r\\n    <label>\\r\\n      <input type=\\\"checkbox\\\" name=\\\"test2\\\" checked=\\\"checked\\\" />\\r\\n      <span>Checked</span>\\r\\n    </label>\\r\\n  </div>\\r\\n  <div class=\\\"col-md-3\\\">\\r\\n    <label>\\r\\n      <span>Indeterminate</span>\\r\\n    </label>\\r\\n  </div>\\r\\n  <div class=\\\"col-md-3\\\">\\r\\n    <label>\\r\\n      <input type=\\\"checkbox\\\" checked=\\\"checked\\\" disabled=\\\"disabled\\\" />\\r\\n      <span>Disabled</span>\\r\\n    </label>\\r\\n  </div>\\r\\n</div>\\r\\n\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Slider\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Slider Input</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-8\\\">\\r\\n            <p>The Slider input control is provided by <a href=\\\"https://material.angular.io/components/slider/overview\\\" target=\\\"_blank\\\">Angular Material</a>.</p>\\r\\n            <h3>When is it used?</h3>\\r\\n            <p>If needed it allows for the end user to select a range between two end points of a particular input.</p>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <mat-slider thumbLabel></mat-slider>\\r\\n            <br />\\r\\n            <h3>Code Snippet</h3>\\r\\n            <code>&lt;mat-slider thumbLabel&gt;&lt;/mat-slider&gt;</code>\\r\\n            <br /><br />\\r\\n            <a href=\\\"https://material.angular.io/components/slider/overview\\\" target=\\\"_blank\\\">Source</a>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Toggle\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Slide Toggle</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-8\\\">\\r\\n            <p>The Slide Toggle input control is provided by <a href=\\\"https://material.angular.io/components/slide-toggle/overview\\\"\\r\\n                target=\\\"_blank\\\">Angular Material</a>.</p>\\r\\n            <h3>When is it used?</h3>\\r\\n            <p>Use primarily when only two options are presented to the end user similar to the checkbox.</p>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <mat-slide-toggle>Do you like bananas?</mat-slide-toggle>\\r\\n            <br /><br />\\r\\n            <h3>Code Snippet</h3>\\r\\n            <code>&lt;mat-slide-toggle&gt;Do you like bananas?&lt;/mat-slide-toggle&gt;</code>\\r\\n            <br /><br />\\r\\n            <a href=\\\"https://material.angular.io/components/slide-toggle/overview\\\" target=\\\"_blank\\\">Source</a>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"DateTime\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Date &amp; Time picker</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>At this time we utilize the Date &amp; Time control provided by\\r\\n              <a href=\\\"https://www.jqwidgets.com/angular/angular-datetimeinput/index.htm\\\"\\r\\n                target=\\\"_blank\\\">jqWidgets</a>\\r\\n            </p>\\r\\n            <p>\\r\\n              <strong>NOTE:</strong> It is impertative the jqWidget 5.7.2 package is referenced in order for the Date &amp; Time\\r\\n              picker to function properly.</p>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <h2>Step 1</h2>\\r\\n            <code>npm install @navihealth/jqwidgets-5.7.2</code>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div exemplify=\\\"jqDateTime\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [navStyle]=\\\"tabs\\\" [escapeStrings]=\\\"['#topnav']\\\" [externalSources]=\\\"jqDateTimeSource\\\" #topnav>\\r\\n          <div class=\\\"row\\\">\\r\\n            <div class=\\\"col-md-4\\\">\\r\\n              <label class=\\\"nh-halo-label-ro\\\" for=\\\"firstName\\\">Date</label>\\r\\n              <jqxDateTimeInput [width]=\\\"'100%'\\\" [height]=\\\"24\\\" [formatString]=\\\"'d'\\\" class=\\\"dateTimePicker\\\" [(ngModel)]=\\\"dateTime\\\">\\r\\n              </jqxDateTimeInput>\\r\\n            </div>\\r\\n            <div class=\\\"col-md-4\\\">\\r\\n              <label class=\\\"nh-halo-label-ro\\\" for=\\\"firstName\\\">Time</label>\\r\\n              <jqxDateTimeInput [width]=\\\"'100%'\\\" [height]=\\\"24\\\" [formatString]=\\\"'T'\\\" [showTimeButton]=\\\"true\\\" [showCalendarButton]=\\\"false\\\"\\r\\n                [(ngModel)]=\\\"dateTime1\\\">\\r\\n              </jqxDateTimeInput>\\r\\n            </div>\\r\\n            <div class=\\\"col-md-4\\\">\\r\\n              <label class=\\\"nh-halo-label-ro\\\" for=\\\"firstName\\\">Date &amp; Time</label>\\r\\n              <jqxDateTimeInput [width]=\\\"'100%'\\\" [height]=\\\"24\\\" [formatString]=\\\"'F'\\\" [showTimeButton]=\\\"true\\\" [(ngModel)]=\\\"dateTime2\\\">\\r\\n              </jqxDateTimeInput>\\r\\n            </div>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Textarea\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Rich Text Editor</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>We utilize the <a href=\\\"https://github.com/KillerCodeMonkey/ngx-quill\\\" target=\\\"_blank\\\">NGX Quill</a> rich text editor\\r\\n              component for Angular. It is intended to provide text formatting within every textarea input and is a need\\r\\n              for our end users.</p>\\r\\n              <div exemplify=\\\"quill\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [navStyle]=\\\"tabs\\\" [escapeStrings]=\\\"['#topnav']\\\" [externalSources]=\\\"quillSource\\\" #topnav>\\r\\n<quill-editor (onContentChanged)=\\\"onChanged($event)\\\" [modules]=\\\"quillModules\\\"\\r\\n  [placeholder]=\\\"'Type comments here...'\\\" class=\\\"editor\\\"></quill-editor>\\r\\n  </div>\\r\\n          </div>\\r\\n        </div>\\r\\n        <span class=\\\"card-title\\\">Textarea</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>If you find no need for a rich text editor within your project a standard textarea sans menubar is available below.</p>\\r\\n            <div exemplify=\\\"textarea\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<textarea id=\\\"textarea1\\\" class=\\\"materialize-textarea\\\"></textarea>\\r\\n            </div>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Expansion\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Expansion Panel</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>We utilize the <a href=\\\"https://material.angular.io/components/expansion/overview\\\" target=\\\"_blank\\\">Angular Material Expansion Panel</a>              component. It is intended to group content into a tab and reduces scrolling on the UI.</p>\\r\\n            <mat-accordion>\\r\\n              <mat-expansion-panel>\\r\\n                <mat-expansion-panel-header>\\r\\n                  <mat-panel-title>\\r\\n                    Patient Info\\r\\n                  </mat-panel-title>\\r\\n                  <mat-panel-description>\\r\\n                    Quisque aliquam nulla non mattis condimentum\\r\\n                  </mat-panel-description>\\r\\n                </mat-expansion-panel-header>\\r\\n                <p>Praesent semper ut lacus id pharetra. In at quam fermentum, faucibus dui sit amet, porttitor diam. Pellentesque\\r\\n                  vehicula est id condimentum gravida. Praesent velit nulla, consequat id volutpat quis, tempor vitae mauris.\\r\\n                  Mauris eget leo fermentum, mollis erat id, convallis dui. In hac habitasse platea dictumst.</p>\\r\\n              </mat-expansion-panel>\\r\\n              <mat-expansion-panel>\\r\\n                <mat-expansion-panel-header>\\r\\n                  <mat-panel-title>\\r\\n                    Address Info\\r\\n                  </mat-panel-title>\\r\\n                  <mat-panel-description>\\r\\n                    Duis mollis ligula et justo iaculis congue\\r\\n                  </mat-panel-description>\\r\\n                </mat-expansion-panel-header>\\r\\n                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquet vulputate quam, mattis luctus elit\\r\\n                  tristique vel. Maecenas vel lacus maximus diam commodo euismod ac ut ante. Etiam at neque blandit, laoreet\\r\\n                  erat quis, sollicitudin ipsum. Morbi eget libero imperdiet, scelerisque urna eget, feugiat leo. Praesent\\r\\n                  pellentesque cursus diam sed iaculis. Proin viverra ipsum non leo porttitor, eu luctus sem pretium. Sed\\r\\n                  at dui a magna mattis gravida id sit amet nisi. Proin venenatis, turpis vitae luctus laoreet, nibh lorem\\r\\n                  vehicula lacus, ut posuere quam turpis eget justo.</p>\\r\\n              </mat-expansion-panel>\\r\\n            </mat-accordion>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Tabs\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Tabs</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>We utilize the <a href=\\\"https://material.angular.io/components/tabs/overview\\\" target=\\\"_blank\\\">Angular Material Tabs</a>              component. It is intended to group content into a tabular format thus allowing a more neatly organized UI for\\r\\n              the end user.</p>\\r\\n            <mat-tab-group>\\r\\n              <mat-tab label=\\\"Tab One\\\">\\r\\n                <h2>Some tab content</h2>\\r\\n                <p>Sed rutrum convallis orci, et fermentum ex blandit sed. Nulla ac feugiat odio, in viverra augue. Praesent\\r\\n                  sed dignissim felis. Pellentesque volutpat sem eros, et placerat diam iaculis et. Aenean pharetra sagittis\\r\\n                  facilisis. Praesent non eros posuere, tincidunt lorem in, posuere turpis. Donec vestibulum vel tortor eget\\r\\n                  volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam nec erat sed ex cursus\\r\\n                  congue sed ac mauris.</p>\\r\\n              </mat-tab>\\r\\n              <mat-tab label=\\\"Tab Two\\\">\\r\\n                <h2>Some more tab content</h2>\\r\\n                <p>Proin facilisis rhoncus felis, sit amet iaculis sem placerat in. Orci varius natoque penatibus et magnis\\r\\n                  dis parturient montes, nascetur ridiculus mus. Nullam at eleifend sem. Nunc malesuada, urna at laoreet\\r\\n                  sagittis, ligula nisi porta dui, eget facilisis est lectus at est. Cras sit amet vulputate ligula. Sed\\r\\n                  ac odio sapien. Maecenas sed congue diam, eu sodales velit.</p>\\r\\n              </mat-tab>\\r\\n            </mat-tab-group>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Notifications\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Notifications (Toastr)</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p><strong>NOTE:</strong> If developing an Angular 5 application please use <code>\\\"ngx-toastr\\\": \\\"8.1.3\\\"</code> within your <code>package.json</code>. For Angular 4 please reference <code>\\\"ngx-toastr\\\": \\\"6.4.1-beta.0\\\"</code>.</p>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <h3>When &amp; how is it used?</h3>\\r\\n            <p>Used to notify or alert the end user without becoming a blocker for other workflows on the page.</p>\\r\\n            <p>Use Toastr for short notes.</p>\\r\\n            <p>Vanishes within 2-3 seconds.</p>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <h3>Examples:</h3>\\r\\n            <p>Success Notification upon successful form submission</p>\\r\\n            <p>Error Notification when end user incorrectly fills out a form</p>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <h3>When NOT to use Toastr:</h3>\\r\\n            <p>End user edits, deletes or updates a record on any given page. Instead use <a style=\\\"cursor: pointer;\\\" routerLink=\\\"/StructureComponent/Modal\\\">Modal/Dialog</a>              with appropriate message prompt &amp; call to action <strong>IF</strong> business owner/stakeholder requests\\r\\n              in project requirements.</p>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-3\\\">\\r\\n            <button class=\\\"btn waves-effect waves-light\\\" (click)=\\\"onSuccess()\\\">Success</button>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-3\\\">\\r\\n            <button class=\\\"btn waves-effect waves-light\\\" (click)=\\\"onError()\\\">Error</button>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-3\\\">\\r\\n            <button class=\\\"btn waves-effect waves-light\\\" (click)=\\\"onWarning()\\\">Warning</button>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-3\\\">\\r\\n            <button class=\\\"btn waves-effect waves-light\\\" (click)=\\\"onInfo()\\\">Info</button>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Tooltips\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Tooltips</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-6\\\">\\r\\n            <p>To be used when more information would be helpful to the end user on a particular element on the application\\r\\n              page. </p>\\r\\n            <p><a href=\\\"https://material.angular.io/components/tooltip/overview\\\" target=\\\"_blank\\\">Source</a></p>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-6\\\">\\r\\n            <h3>When is it used?</h3>\\r\\n            <p>Acronyms are commonly used across our applications.. a tooltip would be helpful in this instance.</p>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-6\\\">\\r\\n            <div exemplify=\\\"tooltip1\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<span matTooltip=\\\"..on the bottom\\\">I have a tooltip..</span>\\r\\n            </div>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-6\\\">\\r\\n            <div exemplify=\\\"tooltip2\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n<button class=\\\"btn waves-effect waves-light\\\" matTooltip=\\\"..on top!\\\" tooltip-position=\\\"above\\\">And I have one..</button>\\r\\n            </div>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Loader\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Page Loader (Branded)</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-8\\\">\\r\\n            <p>To be used upon entry into any application.</p>\\r\\n            <p>Not to be used upon form submission. Slim Loader will be used in that instance.</p>\\r\\n            <p><strong>NOTE:</strong> The logo symbol within the loader will size according to its viewport. </p>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <!-- Button trigger Loader modal -->\\r\\n            <button type=\\\"button\\\" class=\\\"btn waves-effect waves-light\\\" data-toggle=\\\"modal\\\" data-target=\\\"#nHLoader\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\tLaunch demo\\r\\n\\t\\t\\t\\t\\t\\t</button>\\r\\n\\r\\n            <!-- Modal -->\\r\\n            <div class=\\\"modal fade\\\" id=\\\"nHLoader\\\" tabindex=\\\"-1\\\" role=\\\"dialog\\\" aria-labelledby=\\\"nHLoader\\\" aria-hidden=\\\"true\\\">\\r\\n              <div class=\\\"modal-dialog\\\">\\r\\n                <div class=\\\"modal-content\\\">\\r\\n                  <div class=\\\"modal-header\\\">\\r\\n                    <h2>Page Loader (Branded)</h2>\\r\\n                    <button type=\\\"button\\\" class=\\\"close\\\" data-dismiss=\\\"modal\\\" aria-label=\\\"Close\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<span aria-hidden=\\\"true\\\">&times;</span>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t</button>\\r\\n                  </div>\\r\\n                  <div class=\\\"modal-body\\\">\\r\\n                    <div exemplify=\\\"loaderB\\\" [source]=\\\"'child'\\\" [context]=\\\"this\\\" [escapeStrings]=\\\"['#topnav']\\\" #topnav>\\r\\n      <div id=\\\"loader-wrapper\\\">\\r\\n        <div id=\\\"logo-wrapper\\\">\\r\\n          <img src=\\\"https://esdnonprod.navihealth.us/assets/logo.svg\\\" id=\\\"logo-preloader\\\">\\r\\n        </div>\\r\\n        <div id=\\\"loader\\\">\\r\\n        </div>\\r\\n      </div>\\r\\n                    </div>\\r\\n                  </div>\\r\\n                  <div class=\\\"modal-footer\\\">\\r\\n                    <button type=\\\"button\\\" class=\\\"btn-flat\\\" data-dismiss=\\\"modal\\\">Close</button>\\r\\n                    <button type=\\\"button\\\" class=\\\"btn-flat\\\" data-dismiss=\\\"modal\\\">Ok</button>\\r\\n                  </div>\\r\\n                </div>\\r\\n              </div>\\r\\n            </div>\\r\\n            <script>\\r\\n              $(document).ready(function () {\\r\\n                $(\\\"#myModal\\\").modal();\\r\\n              });\\r\\n            </script>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" id=\\\"Slim\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Slim Loading Bar</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-8\\\">\\r\\n            <p>Loading bar at the very top of the page of your application.</p>\\r\\n            <p><a href=\\\"https://www.npmjs.com/package/ng2-slim-loading-bar\\\" target=\\\"_blank\\\">Source</a></p>\\r\\n            <h3>When is it used?</h3>\\r\\n            <p>During loading and saving of data.</p>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <!-- Button trigger Loader modal -->\\r\\n            <button type=\\\"button\\\" (click)=\\\"onStart()\\\" class=\\\"btn waves-effect waves-light\\\" data-toggle=\\\"modal\\\" data-target=\\\"#slim\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\tDemo w/ code snippet\\r\\n\\t\\t\\t\\t\\t\\t</button>\\r\\n            <!-- Modal -->\\r\\n            <div class=\\\"modal fade\\\" id=\\\"slim\\\" tabindex=\\\"-1\\\" role=\\\"dialog\\\" aria-labelledby=\\\"slim\\\" aria-hidden=\\\"true\\\">\\r\\n              <div class=\\\"modal-dialog modal-lg\\\">\\r\\n                <div class=\\\"modal-content\\\">\\r\\n                  <ng2-slim-loading-bar [height]=\\\"'3px'\\\" [color]=\\\"'#e35205'\\\"></ng2-slim-loading-bar>\\r\\n                  <div class=\\\"modal-header\\\">\\r\\n                    <h2>Slim Loading Bar Demo</h2>\\r\\n                    <button type=\\\"button\\\" class=\\\"close\\\" (click)=\\\"onClose()\\\" data-dismiss=\\\"modal\\\" aria-label=\\\"Close\\\">\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<span aria-hidden=\\\"true\\\">&times;</span>\\r\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t</button>\\r\\n                  </div>\\r\\n                  <div class=\\\"modal-body\\\">\\r\\n                    <code>&lt;ng2-slim-loading-bar [height]=&quot;'3px'&quot; [color]=&quot;'#e35205'&quot;&gt;&lt;/ng2-slim-loading-bar&gt;</code>\\r\\n                  </div>\\r\\n                  <div class=\\\"modal-footer\\\">\\r\\n                    <button type=\\\"button\\\" class=\\\"btn-flat\\\" (click)=\\\"onClose()\\\" data-dismiss=\\\"modal\\\">Close</button>\\r\\n                    <button type=\\\"button\\\" class=\\\"btn-flat\\\" (click)=\\\"onClose()\\\" data-dismiss=\\\"modal\\\">Ok</button>\\r\\n                  </div>\\r\\n                </div>\\r\\n              </div>\\r\\n            </div>\\r\\n            <script>\\r\\n              $(document).ready(function () {\\r\\n                $(\\\"#slim\\\").modal();\\r\\n              });\\r\\n            </script>\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n</div>\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/ui-elements/ui-elements.component.html\n// module id = ../../../../../src/app/ui-elements/ui-elements.component.html\n// module chunks = main","import { Component, OnInit, ViewContainerRef, ViewChild } from '@angular/core';\r\nimport { ActivatedRoute } from '@angular/router';\r\nimport { ToastrService } from 'ngx-toastr';\r\nimport { SlimLoadingBarService } from 'ng2-slim-loading-bar';\r\nimport { FormGroup, Validators, FormControl } from '@angular/forms';\r\n\r\n@Component({\r\n  selector: 'app-ui-elements',\r\n  templateUrl: './ui-elements.component.html',\r\n  styleUrls: ['../../assets/css/custom.css', './ui-elements.component.css']\r\n})\r\n\r\nexport class UiElementsComponent implements OnInit {\r\n  reactFormExample: FormGroup;\r\n  @ViewChild('myDateTimeInput') myDateTimeInput; jqxDateTimeInputComponent;\r\n\r\n  public phoneMask = { mask: ['(', /[1-9]/, /\\d/, /\\d/, ')',' ', /\\d/, /\\d/, /\\d/,'-', /\\d/, /\\d/, /\\d/, /\\d/]};\r\n\r\n  quillSource: any;\r\n  quillComponentCode: string;\r\n  quillModuleCode: string;\r\n\r\n  jqDateTimeSource: any;\r\n  jqDateTimeComponentCode: string;\r\n  jqDateTimeModuleCode: string;\r\n\r\n  constructor(public toastr: ToastrService, vcr: ViewContainerRef, private route: ActivatedRoute, private slimLoadingBarService: SlimLoadingBarService) {\r\n\r\n    this.buildQuill();\r\n    this.quillSource = [{\r\n        name: 'command line',\r\n        src: '',\r\n        rawCode: 'npm install ngx-quill'\r\n      }, {\r\n        name: 'app.module.ts',\r\n        src: '',\r\n        language: 'javascript',\r\n        rawCode: this.quillModuleCode\r\n      }];\r\n\r\n    this.buildjqDateTime();\r\n    this.jqDateTimeSource = [{\r\n        name: 'tsconfig.json',\r\n        src: '',\r\n        language: 'javascript',\r\n        rawCode: 'files: [ \"node_modules/jqwidgets-framework/jqwidgets-ts/angular_jqxdatetimeinput.ts]'\r\n      }, {\r\n        name: 'app.module.ts',\r\n        src: '',\r\n        language: 'javascript',\r\n        rawCode: this.jqDateTimeModuleCode\r\n      }];\r\n\r\n  }\r\n  private fragment: string;\r\n  cities = [\r\n    { id: 3, name: 'Atlanta' },\r\n    { id: 6, name: 'Boston' },\r\n    { id: 4, name: 'Chicago' },\r\n    { id: 2, name: 'Louisville' },\r\n    { id: 1, name: 'Nashville' },\r\n    { id: 7, name: 'New York City' },\r\n    { id: 8, name: 'San Francisco' },\r\n    { id: 5, name: 'St Louis' }\r\n  ];\r\n\r\n  drpItems = [\r\n    { id: 3, text: 'Atlanta' },\r\n    { id: 6, text: 'Boston' },\r\n    { id: 4, text: 'Chicago' },\r\n    { id: 2, text: 'Louisville' },\r\n    { id: 1, text: 'Nashville' },\r\n    { id: 7, text: 'New York City' },\r\n    { id: 8, text: 'San Francisco' },\r\n    { id: 5, text: 'St Louis' }\r\n  ];\r\n\r\n\r\n\r\n  ngOnInit() {\r\n    this.reactFormExample = new FormGroup ({\r\n      fname: new FormControl('', Validators.required),\r\n      email: new FormControl('', Validators.required)\r\n  });\r\n    this.slimLoadingBarService.start();\r\n    this.route.params.subscribe(params => {\r\n      this.fragment = params['topic'];\r\n\r\n      try {\r\n        document.querySelector('#' + this.fragment).scrollIntoView();\r\n      } catch (e) { }\r\n    });\r\n    //$('#myTable').DataTable();\r\n  }\r\n\r\n\r\n  onClose() {\r\n      this.slimLoadingBarService.reset();\r\n  }\r\n  onStart(){\r\n        this.slimLoadingBarService.start();\r\n  }\r\n\r\n  onSuccess() {\r\n    this.toastr.success('You are awesome.', 'Congrats!');\r\n  }\r\n\r\n  onError() {\r\n    this.toastr.error('There was an error.', 'Oops!');\r\n  }\r\n\r\n  onWarning() {\r\n    this.toastr.warning('You are being warned.', 'Alert!');\r\n  }\r\n\r\n  onInfo() {\r\n    this.toastr.info('Just some information for you.', 'Thanks!');\r\n  }\r\n\r\n\r\n  public buildQuill() {\r\n    this.quillModuleCode = `\r\n    import { QuillModule } from 'ngx-quill';\r\n    \r\n    imports: [ QuillModule ],`;\r\n  }\r\n\r\n  public buildjqDateTime() {\r\n    this.jqDateTimeModuleCode = `\r\n    import { jqxDateTimeInputComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxdatetimeinput';\r\n    \r\n    declarations: [ jqxDateTimeInputComponent ],`;\r\n  }\r\n\r\n  getCustomEditorToolBar(): any {\r\n    const toolbar = {\r\n      toolbar: [\r\n        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons\r\n        ['blockquote'],\r\n\r\n        [{ 'header': 1 }, { 'header': 2 }],               // custom button values\r\n        [{ 'list': 'ordered' }, { 'list': 'bullet' }],\r\n        [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript\r\n        [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent\r\n        [{ 'direction': 'rtl' }],                         // text direction\r\n\r\n        [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown\r\n        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],\r\n\r\n        [{ 'color': new Array<any>() }, { 'background': new Array<any>() }],          // dropdown with defaults from theme\r\n        [{ 'font': new Array<any>() }],\r\n        [{ 'align': new Array<any>() }],\r\n\r\n        ['clean'],                                         // remove formatting button\r\n\r\n        ['link']                         // link and image, video\r\n      ]\r\n    };\r\n\r\n    return toolbar;\r\n  }\r\n\r\n    unmask(event) {\r\n    if (event != null) {\r\n      return event.replace(/\\D+/g, '');\r\n    }\r\n  }\r\n\r\n}\n\n\n// WEBPACK FOOTER //\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/ui-elements/ui-elements.component.ts","module.exports = \"<div class=\\\"container-fluid\\\">\\r\\n  <div class=\\\"row\\\">\\r\\n    <div class=\\\"col-md-9\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Welcome</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>We employ a hybrid design system at naviHealth. The styles and design principles here are heavily influenced\\r\\n              on Google's <a href=\\\"https://material.io/\\\" target=\\\"_blank\\\">Material Design</a>, but slightly modified to reflect\\r\\n              our branding strategy. Our application layout methods are built using the <a href=\\\"https://getbootstrap.com/\\\"\\r\\n                target=\\\"_blank\\\">Bootstrap (v 4.1.3)</a> framework. User Interface components/elements that make up a large\\r\\n              portion of our applications are from various sources in addition to <a href=\\\"https://material.angular.io/\\\"\\r\\n                target=\\\"_blank\\\">Angular Material</a>. We will rely on these principles and documentation when designing and\\r\\n              building our products.</p>\\r\\n              <h2>How It Works</h2>\\r\\n              <p>Coming Soon</p>\\r\\n          </div>\\r\\n        </div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <h2>Dependencies (Required)</h2>\\r\\n            <p><strong>NOTE:</strong> It is imperative the following dependencies are referenced in your project. They will also require an Octopus configuration to transform the usage from nonprod to prod. For an implementation example, please see the <a href=\\\"https://bitbucket.navihealth.us/projects/CCMDOC/repos/documentmanagementlibrary/browse/DocumentCLILibrary\\\" target=\\\"_blank\\\">Document Library repo.</a></p>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <code>https://esdnonprod.navihealth.us/assets/css/bootstrap.min.4.1.css</code>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <code>https://esdnonprod.navihealth.us/assets/css/nh-style.css</code>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <code>https://fonts.googleapis.com/icon?family=Material+Icons</code>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <code>https://esdnonprod.navihealth.us/assets/js/jquery-3.3.1.min.js</code>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <code>https://esdnonprod.navihealth.us/assets/js/bootstrap.min.js</code>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <code>https://esdnonprod.navihealth.us/assets/js/materialize.min.js</code>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <h3>Pendo</h3>\\r\\n            <code>Coming Soon</code>\\r\\n          </div>\\r\\n        </div>\\r\\n          <div class=\\\"row\\\" id=\\\"Caps\\\">\\r\\n    <div class=\\\"col-md-12\\\">\\r\\n      <h2>What's Coming Next?</h2>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <h3>User Personas</h3>\\r\\n            <p>An effort to better understand the different sets of user roles and their workflows throughout our product suite is underway.. Stay tuned for more!</p>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <h3>UI Elements</h3>\\r\\n            <p>Indeterminate state for Checkbox</p>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <h3>Guidelines</h3>\\r\\n            <p>Pipes &amp; Filters</p>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <h3>Dependencies</h3>\\r\\n            <p>Customizable SaSS</p>\\r\\n          </div>\\r\\n          <div class=\\\"col-md-4\\\">\\r\\n            <h3>Other</h3>\\r\\n            <p>Pendo integration</p>\\r\\n            <p>Process Diagram for \\\"How It Works\\\"</p>\\r\\n          </div>\\r\\n        </div>\\r\\n    </div>\\r\\n  </div>\\r\\n      </div>\\r\\n    </div>\\r\\n    <div class=\\\"col-md-3\\\">\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">Angular version: 5</span>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <img src=\\\"../assets/angular.svg\\\" width=\\\"80%\\\" class=\\\"mx-auto d-block\\\" />\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n      <div class=\\\"bump\\\"></div>\\r\\n      <div class=\\\"card-row card\\\">\\r\\n        <span class=\\\"card-title\\\">More Information</span>\\r\\n        <div class=\\\"bump\\\"></div>\\r\\n        <div class=\\\"row\\\">\\r\\n          <div class=\\\"col-md-12\\\">\\r\\n            <p>For questions about UI/UX, please email:</p>\\r\\n            <h2>Brentwood</h2>\\r\\n            <p><a href=\\\"mailto:uiuxgroup@navihealth.us\\\">UI/UX Group</a></p>\\r\\n            <p><a href=\\\"mailto:hforsee@navihealth.us\\\">Hayden Forsee (UI/UX)</a></p>\\r\\n            <hr>\\r\\n            <h2>Newton</h2>\\r\\n            <p><a href=\\\"mailto:peter.lehman@navihealth.us\\\">Peter Lehman (UX Manager)</a></p>\\r\\n            <p><a href=\\\"mailto:stuart.kim@navihealth.com\\\">Stuart Kim (UX)</a></p>\\r\\n            <p><a href=\\\"mailto:amy.alsumali@navihealth.com\\\">Amy Alsumali (UX)</a></p>\\r\\n            <p><a href=\\\"mailto:mitch.soper@navihealth.com\\\">Mitch Soper (UX)</a></p>\\r\\n            <div class=\\\"bump\\\"></div>\\r\\n            <img src=\\\"../assets/nH-Logo-color-sq.svg\\\" width=\\\"80%\\\" class=\\\"mx-auto d-block\\\" />\\r\\n          </div>\\r\\n        </div>\\r\\n      </div>\\r\\n    </div>\\r\\n  </div>\\r\\n\\r\\n</div>\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/welcome/welcome.component.html\n// module id = ../../../../../src/app/welcome/welcome.component.html\n// module chunks = main","import { Component, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'app-welcome',\r\n  templateUrl: './welcome.component.html',\r\n  styleUrls: ['../../assets/css/custom.css']\r\n})\r\n\r\nexport class WelcomeComponent implements OnInit {\r\n\r\n  constructor() { }\r\n\r\n  ngOnInit() {\r\n  }\r\n\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/app/welcome/welcome.component.ts","exports = module.exports = require(\"../../../node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \"body {\\r\\n    background-color: #f5f5f5 !important;\\r\\n}\\r\\n\\r\\n#wrapper {\\r\\n    padding-left: 250px;\\r\\n    overflow-x: hidden;\\r\\n}\\r\\n\\r\\n.nh-container {\\r\\n    min-width: 1024px;\\r\\n    max-width: 1280px;\\r\\n    padding: 0 20px;\\r\\n    margin: 0 auto;\\r\\n}\\r\\n\\r\\n.layout-view {\\r\\n    left: 250px;\\r\\n    margin: 0 auto;\\r\\n    max-width: 1280px;\\r\\n}\\r\\n\\r\\n#sidebar-wrapper {\\r\\n    margin-left: -250px;\\r\\n    left: 250px;\\r\\n    width: 250px;\\r\\n    background: #fff;\\r\\n    position: fixed;\\r\\n    height: 100%;\\r\\n    overflow-y: auto;\\r\\n    z-index: 1000;\\r\\n    background-color: #f5f5f5 !important;\\r\\n}\\r\\n\\r\\n.sidebar-nav {\\r\\n    position: absolute;\\r\\n    top: 0;\\r\\n    width: 232px;\\r\\n    list-style: none;\\r\\n    margin: 0;\\r\\n    padding: 0;\\r\\n}\\r\\n\\r\\n.sidebar-nav li {\\r\\n    font-size: 15px;\\r\\n    font-weight: 700;\\r\\n    line-height: 22.5px;\\r\\n}\\r\\n\\r\\n.sidebar-nav ul li {\\r\\n    text-indent: 10px;\\r\\n    font-size: 13px;\\r\\n    line-height: 19.5px;\\r\\n    font-weight: 400;\\r\\n}\\r\\n\\r\\n.sidebar-nav a {\\r\\n    color: #444;\\r\\n    display: block;\\r\\n    font-size: 13px;\\r\\n    height: 32px;\\r\\n    line-height: 32px;\\r\\n    padding: 0 15px;\\r\\n    text-decoration: none !important;\\r\\n    margin: 5px 0;\\r\\n}\\r\\n\\r\\n.sidebar-nav a:hover {\\r\\n    background-color: #ddd;\\r\\n}\\r\\n\\r\\n.row-style-grid {\\r\\n    margin: 20px 0!important;\\r\\n    background-color: #e6e2eb;\\r\\n}\\r\\n\\r\\n.column-style-grid {\\r\\n    border: 1px solid #d3ccdd;\\r\\n    padding: 10px;\\r\\n}\\r\\n\\r\\n.row-inverse {\\r\\n\\tbackground-color: #212121 !important;\\r\\n\\tcolor: #fff;\\r\\n}\\r\\n\\r\\n.valueBold {\\r\\n\\tfont-weight: bold;\\r\\n}\\r\\n\\r\\n.btn:focus, .btn:hover {\\r\\n    color: #fff !important;\\r\\n}\\r\\n\\r\\n.black-bg {\\r\\n    background-color: #0057b8 !important;\\r\\n}\\r\\n\\r\\n.logo-styles {\\r\\n    -ms-flex-direction: column;\\r\\n        flex-direction: column;\\r\\n    -ms-flex-align: center;\\r\\n        align-items: center;\\r\\n    display: -ms-flexbox;\\r\\n    display: flex;\\r\\n}\\r\\n\\r\\n\\r\\n.jqx-widget-content {\\r\\n    font-family: \\\"Century Gothic\\\", CenturyGothic, AppleGothic, sans-serif !important;\\r\\n    font-style: normal !important;\\r\\n}\\r\\n\\r\\n.jqx-widget {\\r\\n    font-family: \\\"Century Gothic\\\", CenturyGothic, AppleGothic, sans-serif !important;\\r\\n    font-style: normal !important;\\r\\n}\\r\\n\\r\\n.jqx-grid-column-header.jqx-grid-columngroup-header.jqx-widget-header {\\r\\n    font-weight: 700 !important;\\r\\n    color: #fff !important;\\r\\n}\\r\\n\\r\\n.jqx-grid-column-header, .jqx-grid-columngroup-header {\\r\\n    font-weight: 700 !important;\\r\\n    color: #fff !important;\\r\\n}\\r\\n\\r\\n.jqx-widget-header {\\r\\n    background-color: #0057b8 !important;\\r\\n    color: #fff !important;\\r\\n}\\r\\n\\r\\n.jqx-widget-content {\\r\\n    border-color: #e0e0e0 !important;\\r\\n}\\r\\n\\r\\n.jqx-widget .jqx-grid-column-menubutton {\\r\\n    background-image: url(\\\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z' fill='gray'/%3E%3C/svg%3E\\\") !important;\\r\\n}\\r\\n\\r\\n.jqx-widget .jqx-grid-column-menubutton {\\r\\n    background-color: #e0e0e0 !important;\\r\\n}\\r\\n\\r\\n.jqx-menu-vertical {\\r\\n    background-color: #e0e0e0 !important;\\r\\n}\\r\\n\\r\\n.jqx-icon-arrow-down {\\r\\n    background-image: url(\\\"data:image/svg+xml;charset=utf8,%3Csvg fill='%23808080' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E\\\") !important;\\r\\n}\\r\\n\\r\\n.jqx-icon-arrow-down.jqx-icon.jqx-icon-arrow-down-selected {\\r\\n    background-image: url(\\\"data:image/svg+xml;charset=utf8,%3Csvg fill='%23808080' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E\\\");\\r\\n}\\r\\n\\r\\n.jqx-icon-arrow-up {\\r\\n    background-image: url(\\\"data:image/svg+xml;charset=utf8,%3Csvg fill='%23808080' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 14l5-5 5 5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E\\\") !important;\\r\\n}\\r\\n\\r\\n.jqx-fill-state-normal {\\r\\n    font-family: \\\"Century Gothic\\\", CenturyGothic, AppleGothic, sans-serif !important;\\r\\n}\\r\\n\\r\\n.jqx-widget .jqx-grid-cell {\\r\\n    border-color: #e0e0e0 !important;\\r\\n}\\r\\n\\r\\n.jqx-rc-all {\\r\\n    border-radius: 0 !important;\\r\\n}\\r\\n\\r\\n\\r\\n\\r\\n.naviO {\\r\\n    color: #f79421;\\r\\n}\\r\\n\\r\\n.naviB {\\r\\n    color: #0057b8;\\r\\n}\\r\\n\\r\\nspan.ng-value-label {\\r\\n    font-size: 13px;\\r\\n}\\r\\n\\r\\n.exemplify-wrapper {\\r\\n    margin-top: 12px;\\r\\n}\\r\\n\\r\\n/* Temporary housing for ng-select styles until ESS has corresponding updates deployed*/\\r\\n.ng-select .ng-control,\\r\\n.ng-select .ng-select-container {\\r\\n  border-bottom: 1px solid #9e9e9e !important;\\r\\n  border-right: none !important;\\r\\n  border-left: none !important;\\r\\n  border-top: none !important;\\r\\n  border-radius: 0px !important;\\r\\n}\\r\\n.ng-select .ng-arrow-zone .ng-arrow,\\r\\n.ng-select .ng-arrow-wrapper .ng-arrow {\\r\\n  border-color: #555 transparent transparent !important;\\r\\n  border-width: 6px 3px 0 3px !important;\\r\\n}\\r\\n.ng-select .ng-arrow-zone,\\r\\n.ng-select .ng-arrow-wrapper {\\r\\n  top: -2px !important;\\r\\n  width: 20px !important;\\r\\n  padding-right: 0px !important;\\r\\n}\\r\\n.ng-select .ng-clear-zone .ng-clear:hover,\\r\\n.ng-select .ng-clear-wrapper .ng-clear:hover {\\r\\n  color: #2196f3 !important;\\r\\n}\\r\\n.ng-select .ng-clear-zone,\\r\\n.ng-select .ng-clear-wrapper {\\r\\n  width: 10px !important;\\r\\n  top: 2px !important;\\r\\n}\\r\\n.ng-select .ng-select-dropdown-outer .ng-select-dropdown,\\r\\n.ng-select .ng-dropdown-panel {\\r\\n  border: 1px solid #2196f3 !important;\\r\\n}\\r\\n.ng-select .ng-select-dropdown-outer .ng-select-dropdown .ng-option.marked,\\r\\n.ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {\\r\\n  background-color: #2196f3 !important;\\r\\n  color: #fff !important;\\r\\n}\\r\\n.ng-select .ng-select-dropdown-outer.bottom .ng-select-dropdown .ng-option:last-child,\\r\\n.ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:last-child {\\r\\n  border-bottom-right-radius: 0 !important;\\r\\n  border-bottom-left-radius: 0 !important;\\r\\n}\\r\\n.ng-select.ng-multiple .ng-control .ng-value-container, .ng-select.ng-multiple .ng-select-container .ng-value-container {\\r\\n  min-height: 35px !important;\\r\\n}\\r\\n.ng-select .ng-control:hover,\\r\\n.ng-select .ng-select-container:hover {\\r\\n  border-color: none !important;\\r\\n  box-shadow: none !important;\\r\\n}\\r\\n.ng-select.focused:not(.opened) > .ng-control, .ng-select.ng-select-focused:not(.ng-select-opened) > .ng-select-container,\\r\\n.ng-select .ng-select-container .ng-value-container .ng-input > input:not(.browser-default):focus:not([readonly]) {\\r\\n  border-bottom: 1px solid #2196f3 !important;\\r\\n  box-shadow: 0 1px 0 0 #2196f3 !important;\\r\\n}\\r\\n\", \"\"]);\n\n// exports\n\n\n/*** EXPORTS FROM exports-loader ***/\nmodule.exports = module.exports.toString();\n\n\n//////////////////\n// WEBPACK FOOTER\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/assets/css/custom.css\n// module id = ../../../../../src/assets/css/custom.css\n// module chunks = main","// The file contents for the current environment will overwrite these during build.\r\n// The build system defaults to the dev environment which uses `environment.ts`, but if you do\r\n// `ng build --env=prod` then `environment.prod.ts` will be used instead.\r\n// The list of which env maps to which file can be found in `.angular-cli.json`.\r\n\r\nexport const environment = {\r\n  production: false\r\n};\r\n\n\n\n// WEBPACK FOOTER //\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/environments/environment.ts","import {\r\n  Directive, ElementRef, AfterContentInit, Renderer2, Renderer\r\n} from '@angular/core';\r\nimport {Input} from '@angular/core';\r\ndeclare let Reflect:any;\r\n\r\n\r\nimport { Injectable } from '@angular/core';\r\nimport {ExmplifySourceService} from \"../services/source.service\";\r\nimport {Observable} from \"rxjs\";\r\n\r\nfunction _window() : any {\r\n  // return the global native browser window object\r\n  return window;\r\n}\r\n\r\n@Injectable()\r\nexport class WindowRef {\r\n  get nativeWindow() : any {\r\n    return _window();\r\n  }\r\n}\r\n\r\n@Directive({\r\n  selector: '[exemplify]'\r\n})\r\nexport class ExemplifyDirective implements AfterContentInit{\r\n\r\n  @Input() target;\r\n  @Input() source:string = 'element';\r\n  @Input() customClass:string;\r\n  @Input() externalSources:Array<ExternalSource>;\r\n  @Input() usePrism:boolean = true;\r\n  @Input() navStyle:string = 'inline';\r\n  @Input() keepInputs:boolean = false;\r\n  @Input('show') visibility:boolean = false;\r\n  @Input() texts:ExemplifyTexts;\r\n  @Input('exemplify') exemplifyId: any;\r\n  @Input() escapeStrings: Array<string> = [];\r\n  @Input() context: any;\r\n\r\n  private copyMarkup: Function;\r\n  private hideMarkup: Function;\r\n  private hostElement;\r\n  private element;\r\n  private renderer;\r\n  private window;\r\n  private elementId;\r\n  private code;\r\n  private pre;\r\n  private codeP;\r\n  private parser;\r\n  private activeItem;\r\n  private activeListeners:Array<any> = [];\r\n  private prism;\r\n  private copyContent;\r\n  private lastClass;\r\n  private toggleState;\r\n  private defaultTexts:ExemplifyTexts= {\r\n    heading:\"Code:\",\r\n    markup:\"markup\",\r\n    copy:\"Copy\",\r\n    show:\"Show\",\r\n    hide:\"Hide\",\r\n  };\r\n  private escapeAngularDirectives = [\r\n    '*ngIf','*ngFor','*ngPluralCase','*ngSwitchCase','*ngSwitchDefault','ngClass','ngPlural','ngStyle','ngSwitch','ngTemplateOutlet','[ngIf]','[ngFor]','[ngForOf]','[ngPluralCase]','[ngSwitchCase]','[ngSwitchDefault]','ngModel'\r\n  ];\r\n  constructor(el: ElementRef, renderer: Renderer, private winRef: WindowRef, private sourceService:ExmplifySourceService) {\r\n\r\n    this.hostElement = el.nativeElement;\r\n    this.renderer = renderer;\r\n    this.window = winRef.nativeWindow;\r\n    this.elementId = this.hostElement.getAttribute(\"id\");\r\n    this.parser = new DOMParser();\r\n    this.prism = winRef.nativeWindow.Prism;\r\n\r\n  }\r\n\r\n  /**\r\n   * Copy to clipboard\r\n   * @param {string} text - text to be copied to clipboard.\r\n   */\r\n  private copyToClipboard = function(text:string) {\r\n    if (this.window.clipboardData && this.window.clipboardData.setData) {\r\n      // IE specific code path to prevent textarea being shown while dialog is visible.\r\n      return this.window.clipboardData.setData(\"Text\", text);\r\n\r\n    } else if (document.queryCommandSupported && document.queryCommandSupported(\"copy\")) {\r\n      let textarea = document.createElement(\"textarea\");\r\n      textarea.textContent = text;\r\n      textarea.style.position = \"fixed\";  // Prevent scrolling to bottom of page in MS Edge.\r\n      document.body.appendChild(textarea);\r\n      textarea.select();\r\n      try {\r\n        return document.execCommand(\"copy\");  // Security exception may be thrown by some browsers.\r\n      } catch (ex) {\r\n        console.warn(\"Copy to clipboard failed.\", ex);\r\n        return false;\r\n      } finally {\r\n        document.body.removeChild(textarea);\r\n      }\r\n    }\r\n  };\r\n\r\n\r\n  ngAfterContentInit() {\r\n    if(null == this.context) throw new Error(\"Input 'context' is required, add [context]=\\\"this\\\" to set example context to current component.\");\r\n\r\n    this.texts = <ExemplifyTexts>this.extend(this.defaultTexts,this.texts);\r\n\r\n    // add angular directives to the list of strings to escape\r\n    this.escapeStrings.push(...this.escapeAngularDirectives);\r\n\r\n    /** Get host element */\r\n    let hostElement;\r\n    if(this.target) {\r\n      hostElement = this.renderer.createElement(this.target,'div');\r\n    } else {\r\n      hostElement = this.renderer.createElement(this.hostElement, 'div');\r\n    }\r\n\r\n    this.renderer.setElementClass(hostElement,'exemplify-wrapper',true);\r\n    if(this.customClass){\r\n      this.renderer.setElementClass(hostElement, this.customClass,true);\r\n    }\r\n\r\n    /** create div element to hold heading, hide/show and copy */\r\n    const func = this.renderer.createElement(hostElement, 'div');\r\n    this.renderer.setElementClass(func, ('exemplify-bar'),true);\r\n    const funcSpan = this.renderer.createElement(func, 'span');\r\n    this.renderer.createText(funcSpan,this.texts.heading);\r\n    this.renderer.setElementClass(funcSpan, ('exemplify-label'),true);\r\n\r\n\r\n    if(this.externalSources) {\r\n      /** create nav element to hold links */\r\n      const nav = this.renderer.createElement(hostElement, 'ul');\r\n      this.renderer.setElementClass(nav, ('nav'),true);\r\n      this.renderer.setElementClass(nav, ('nav-'+this.navStyle),true);\r\n      /** Create link for toggling markup */\r\n      this.addLink(nav,this.texts.markup, this.getHtmlMarkup());\r\n\r\n      let links:Array<Observable<string>> = [];\r\n      \r\n      for (let i = 0; i < this.externalSources.length;i++) {\r\n        // Setting 'src' to blank so that UI/UX team need not required this parameter to set blank everytime\r\n        this.externalSources[i].src = '';\r\n        links.push(this.sourceService.getSource(this.externalSources[i].src));\r\n        if(this.externalSources[i].src!=null && this.externalSources[i].src!=''){\r\n        this.sourceService.getSource(this.externalSources[i].src)\r\n            .subscribe(\r\n                code => {\r\n                  this.addLink(nav,this.externalSources[i].name,code,this.externalSources[i].language ? this.externalSources[i].language:'typescript');\r\n                }\r\n            );\r\n          }\r\n          else{\r\n            this.addLink(nav,this.externalSources[i].name,this.externalSources[i].rawCode,this.externalSources[i].language ? this.externalSources[i].language:'typescript');\r\n          }\r\n      }\r\n      // wait until all sources have loaded...\r\n      Observable.forkJoin(links).subscribe(\r\n          res => {\r\n            this.addCopy(hostElement,func);\r\n            this.addHide(hostElement,func);\r\n            // ...add code container\r\n            this.addCodeContainer(hostElement);\r\n          }\r\n      );\r\n    } else {\r\n      this.addCopy(hostElement,func);\r\n      this.addHide(hostElement,func);\r\n      // ...add code container\r\n      this.addCodeContainer(hostElement);\r\n    }\r\n\r\n  }\r\n\r\n  private showCode = function(code:string,language:string = 'markup', forceShow?:boolean){\r\n    this.copyContent = code;\r\n    if(this.usePrism && this.prism) {\r\n      // remove last used class name (needed to clear class)\r\n      if(this.lastClass){\r\n        this.renderer.setElementClass(this.pre, 'language-'+this.lastClass,false);\r\n        this.renderer.setElementClass(this.code, 'language-'+this.lastClass,false);\r\n      }\r\n      // add classes to element\r\n      this.renderer.setElementClass(this.pre, 'language-'+language,true);\r\n      this.renderer.setElementClass(this.code, 'language-'+language,true);\r\n      this.lastClass = language;\r\n      switch (language) {\r\n        case 'typescript':\r\n        case 'javascript':\r\n        case 'js':\r\n          language = 'js';\r\n          break;\r\n        case 'css':\r\n          language = 'css';\r\n          break;\r\n        default:\r\n          language = 'markup';\r\n          break;\r\n      }\r\n      this.code.innerHTML = this.prism.highlight(code,this.prism.languages[language]);\r\n    } else {\r\n      this.renderer.setText(this.codeP,code);\r\n    }\r\n    this.toggleVisibility(this.pre,forceShow ? forceShow:this.visibility);\r\n  };\r\n\r\n  private addLink = function(hostElement,name:string,code?:any,language?:string) {\r\n\r\n    /** Create link for toggling markup */\r\n    const listItem = this.renderer.createElement(hostElement, 'li');\r\n    this.renderer.setElementClass(listItem, 'nav-item',true);\r\n    const renderElement = this.renderer.createElement(listItem, 'a');\r\n    this.renderer.createText(renderElement,name);\r\n    this.renderer.setElementAttribute(renderElement,'href','#');\r\n    this.renderer.setElementClass(renderElement, 'nav-link',true);\r\n    this.renderer.setElementClass(renderElement, 'exemplify-' + name.toLowerCase().replace(/[ ._]/g,'-'),true);\r\n\r\n    if(this.activeListeners.length === 0){\r\n      if(this.visibility) {\r\n        this.renderer.setElementClass(renderElement, 'active',true);\r\n      }\r\n      this.activeItem = renderElement;\r\n    }\r\n\r\n    /** Add click listener */\r\n    let listener = this.renderer.listen(renderElement, 'click', (event) => {\r\n      this.removeActiveClass();\r\n\r\n      this.renderer.setElementClass(renderElement, 'active',true);\r\n      this.showCode(code,language,true);\r\n      this.activeItem = renderElement;\r\n      event.preventDefault();\r\n    });\r\n    this.activeListeners.push(listener);\r\n    return renderElement;\r\n  };\r\n\r\n  private addHide = function(hostElement,navElement) {\r\n    /** Create link for toggling markup */\r\n    this.toggleState = this.renderer.createElement(navElement, 'a');\r\n    let toggleState = this.renderer.createText(this.toggleState,this.texts.hide);\r\n    this.renderer.setElementAttribute(this.toggleState,'href','#');\r\n    this.renderer.setElementClass(this.toggleState, 'exemplify-hide',true);\r\n\r\n    /** Add click listener for toggling markup example */\r\n    this.hideMarkup = this.renderer.listen(this.toggleState, 'click', (event) => {\r\n      event.preventDefault();\r\n      //let content = this.parser.parseFromString(this.code.innerHTML,\"text/html\").body.childNodes[0].textContent;\r\n      this.toggleVisibility(toggleState);\r\n    });\r\n    this.activeListeners.push(this.hideMarkup);\r\n  };\r\n\r\n  private addCopy = function(hostElement,navElement) {\r\n    /** Create link for copying markup */\r\n    const copy = this.renderer.createElement(navElement, 'a');\r\n    this.renderer.createText(copy,this.texts.copy);\r\n    this.renderer.setElementAttribute(copy,'href','#');\r\n    this.renderer.setElementClass(copy, 'exemplify-copy',true);\r\n\r\n    /** Add click listener for copying markup example */\r\n    this.copyMarkup = this.renderer.listen(copy, 'click', (event) => {\r\n      event.preventDefault();\r\n      //let content = this.parser.parseFromString(this.code.innerHTML,\"text/html\").body.childNodes[0].textContent;\r\n      this.copyToClipboard(this.copyContent);\r\n    });\r\n    this.activeListeners.push(this.copyMarkup);\r\n  };\r\n\r\n\r\n\r\n  private getHtmlMarkup = function() {\r\n    /** Create markup example */\r\n\r\n    try {\r\n      if(!this.context) {\r\n        console.log('No context set');\r\n      }\r\n      //let markupExampleCode = Reflect.getMetadata('annotations', this.context.constructor);\r\n      let markupExampleCode = this.context.constructor['__annotations__'][0];\r\n\r\n\r\n      if(this.elementId) {\r\n        markupExampleCode = this.parser.parseFromString(markupExampleCode.template,\"text/html\").getElementById(this.elementId);\r\n      } else if(this.exemplifyId){\r\n\r\n        const selector = '[exemplify=\"' +this.exemplifyId + '\"]';\r\n        const content = this.parser.parseFromString(markupExampleCode.template,\"text/html\").querySelectorAll(selector);\r\n        if(content.length > 1) {\r\n          console.log('Exemplify warning! Multiple elements are using: \"' + this.exemplifyId + '\" as a identifier for the example, it should be a unique id. Returning first match.');\r\n        }\r\n        markupExampleCode = content[0];\r\n\r\n      } else {\r\n        console.log('Exemplify warning! No id set for example element, returning first match.');\r\n        markupExampleCode = this.parser.parseFromString(markupExampleCode.template,\"text/html\").querySelectorAll('[exemplify]')[0];\r\n      }\r\n      if(typeof markupExampleCode === 'undefined'){\r\n        console.log(\"Exemplify warning! Can't show example as the component holding the markup couldn't be found!\");\r\n        return\r\n      }\r\n      if(this.keepInputs !== true) {\r\n        markupExampleCode.removeAttribute(\"exemplify\");\r\n        markupExampleCode.removeAttribute(\"id\");\r\n        markupExampleCode.removeAttribute(\"[externalsources]\");\r\n        markupExampleCode.removeAttribute(\"[source]\");\r\n        markupExampleCode.removeAttribute(\"[target]\");\r\n        markupExampleCode.removeAttribute(\"[customclass]\");\r\n        markupExampleCode.removeAttribute(\"[navstyle]\");\r\n        markupExampleCode.removeAttribute(\"[useprism]\");\r\n        markupExampleCode.removeAttribute(\"[escapestrings]\");\r\n        markupExampleCode.removeAttribute(\"[show]\");\r\n        markupExampleCode.removeAttribute(\"[context]\");\r\n      }\r\n\r\n      /** Add markup content */\r\n      let markupExampleString:string;\r\n      switch(this.source){\r\n        case 'child':\r\n          markupExampleString = markupExampleCode.innerHTML;\r\n          break;\r\n        default:\r\n          markupExampleString = markupExampleCode.outerHTML;\r\n          break;\r\n      }\r\n      if(this.keepInputs === true) {\r\n        // keep original format ie. avoid attributes being transformed into lowercase\r\n        markupExampleString = markupExampleString.replace(/\\[keepinputs]=/,'[keepInputs]=').replace(/\\[externalsources]=/,'[externalSources]=').replace(/\\[customclass]=/,'[customClass]=').replace(/\\[navstyle]=/,'[navStyle]=').replace(/\\[escapeStrings]=/,'[escapeStrings]=');\r\n      }\r\n      if(this.escapeStrings) {\r\n        // loop through items to and reset their casing, useful for inputs that will be converted to lower case otherwise\r\n              for(let i = 0; i < this.escapeStrings.length; i++) {\r\n                  const lower = new RegExp('\\\\'+this.escapeStrings[i].toLowerCase(),\"g\");\r\n                  markupExampleString = markupExampleString.replace(lower, this.escapeStrings[i]);\r\n        }\r\n      }\r\n\r\n      // remove empty =\"\" form generated markup\r\n      markupExampleString = markupExampleString.replace(/=\"\"/g, '');\r\n\r\n      return markupExampleString;\r\n    } catch(error) {\r\n      console.log(error);\r\n      return \"\"\r\n    }\r\n  };\r\n\r\n  private addCodeContainer = function(hostElement) {\r\n    this.pre = this.renderer.createElement(hostElement, 'pre');\r\n    this.code = this.renderer.createElement(this.pre, 'code');\r\n    this.renderer.setElementClass(this.pre, 'markup-example',true);\r\n    this.codeP = this.renderer.createText(this.code,'');\r\n    this.showCode(this.getHtmlMarkup());\r\n  };\r\n\r\n  private removeListeners = function(){\r\n    for (let i = 0; i < this.activeListeners.length; i++) {\r\n      this.activeListeners[i]();\r\n    }\r\n  };\r\n\r\n  private removeActiveClass = function(){\r\n\r\n    if(this.activeItem) {\r\n      this.renderer.setElementClass(this.activeItem, 'active',false);\r\n    }\r\n  };\r\n\r\n  private toggleVisibility = function(element, forceShow?:boolean) {\r\n    if(forceShow){\r\n      this.renderer.setElementStyle(this.pre, 'display','block');\r\n      this.toggleState.innerHTML = this.texts.hide;\r\n      this.renderer.setElementClass(this.toggleState,'exemplify-visible',true);\r\n      this.visibility = true;\r\n      return\r\n    }\r\n    else if (forceShow === false) {\r\n      this.renderer.setElementStyle(this.pre, 'display','none');\r\n      this.toggleState.innerHTML = this.texts.show;\r\n      this.renderer.setElementClass(this.toggleState,'exemplify-visible',false);\r\n      this.visibility = false;\r\n      return\r\n    }\r\n    if(this.visibility){\r\n      this.removeActiveClass();\r\n      this.renderer.setElementStyle(this.pre, 'display','none');\r\n      this.renderer.setElementClass(this.toggleState,'exemplify-visible',false);\r\n\r\n    } else {\r\n      if(this.activeItem) {\r\n        this.renderer.setElementClass(this.activeItem, 'active', true);\r\n      }\r\n      this.renderer.setElementStyle(this.pre, 'display','block');\r\n      this.renderer.setElementClass(this.toggleState,'exemplify-visible',true);\r\n    }\r\n    this.visibility = !this.visibility;\r\n    this.renderer.setText(element, this.visibility ? this.texts.hide : this.texts.show);\r\n    if (this.visibility === true) {\r\n      this.toggleState.innerHTML = this.texts.hide;\r\n    }else {\r\n      this.toggleState.innerHTML = this.texts.show;\r\n    }\r\n  };\r\n\r\n  /**\r\n   *  Extend object function.\r\n   */\r\n  private extend =function(a:Object, b:Object){\r\n    for(let key in b)\r\n      if(b.hasOwnProperty(key))\r\n        a[key] = b[key];\r\n    return a;\r\n  };\r\n\r\n  ngOnDestroy() {\r\n\r\n    /** Remove click listeners */\r\n    this.removeListeners();\r\n\r\n  }\r\n\r\n}\r\n\r\nexport interface ExternalSource {\r\n  src:'';\r\n  name: string;\r\n  language?: string;\r\n  rawCode:string ;\r\n}\r\n\r\nexport interface ExemplifyTexts {\r\n  heading?:string;\r\n  markup?:string;\r\n  copy?:string;\r\n  show?:string;\r\n  hide?:string;\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/exemplify/directives/exemplify.directive.ts","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport {ExmplifySourceService} from \"./services/source.service\";\r\nimport {WindowRef, ExemplifyDirective} from \"./directives/exemplify.directive\";\r\n\r\n@NgModule({\r\n  imports: [\r\n    CommonModule\r\n  ],\r\n  providers: [WindowRef, ExmplifySourceService],\r\n  declarations: [ExemplifyDirective],\r\n  exports: [ExemplifyDirective]\r\n})\r\nexport class ExemplifyModule { }\r\n\n\n\n// WEBPACK FOOTER //\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/exemplify/exemplify.module.ts","import { Injectable } from '@angular/core';\r\nimport {Response} from '@angular/http';\r\nimport {Observable} from \"rxjs\";\r\nimport 'rxjs/Rx';\r\n\r\n@Injectable()\r\nexport class ExmplifySourceService {\r\n\r\n  constructor() { }\r\n\r\n  getSource (src): Observable<any> {\r\n\r\n      return Observable.fromPromise(new Promise((resolve, reject) => {\r\n          let xhr = new XMLHttpRequest();\r\n          xhr.onreadystatechange = function () {\r\n              if (xhr.readyState === 4) {\r\n                  if (xhr.status === 200) {\r\n                      resolve(xhr.response)\r\n                  } else {\r\n                      reject(xhr.response)\r\n                  }\r\n              }\r\n          };\r\n          xhr.open(\"GET\",src);\r\n          xhr.send();\r\n      }));\r\n  }\r\n  private handleError (error: Response | any) {\r\n    let errMsg: string;\r\n    if (error instanceof Response) {\r\n      const body = error.json() || '';\r\n      const err = body.error || JSON.stringify(body);\r\n      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;\r\n    } else {\r\n      errMsg = error.message ? error.message : error.toString();\r\n    }\r\n    return Observable.throw(errMsg);\r\n  }\r\n\r\n\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/exemplify/services/source.service.ts","import { enableProdMode } from '@angular/core';\r\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\r\n\r\nimport { AppModule } from './app/app.module';\r\nimport { environment } from './environments/environment';\r\n\r\nif (environment.production) {\r\n  enableProdMode();\r\n}\r\n\r\nplatformBrowserDynamic().bootstrapModule(AppModule);\r\n\n\n\n// WEBPACK FOOTER //\n// E:/Atlassian/bamboo-home/1/7766019/ESDE-EN172-JOB1/ng5/src/main.ts"],"sourceRoot":"webpack:///"}