### Install Covalent Core Module

Source: https://github.com/teradata/covalent/blob/main/docs/ANGULAR_GETTING_STARTED.md

Installs the Covalent Core module and Covalent Tokens module. It also lists optional Covalent modules that can be installed for additional functionality.

```bash
npm install --save @covalent/core @covalent/tokens
## (optional) Additional Covalent Modules installs
npm install --save @covalent/highlight @covalent/markdown @covalent/flavored-markdown @covalent/dynamic-forms @covalent/echarts
```

--------------------------------

### Install Angular CLI

Source: https://github.com/teradata/covalent/blob/main/docs/ANGULAR_GETTING_STARTED.md

Installs the Angular CLI globally with a specific version. This command is used to manage Angular projects, including creating new projects and serving them.

```bash
npm install -g @angular/cli@18.2.12
```

--------------------------------

### Register and Start a Guided Tour

Source: https://github.com/teradata/covalent/blob/main/libs/angular-guided-tour/README.md

Shows how to register a tour with a specific name and then start it using the CovalentGuidedTourService. It also includes an example of subscribing to tour events.

```typescript
import { CovalentGuidedTourService } from '@covalent/guided-tour';

const basicDemoTour: IGuidedTour = {
  useModalOverlay: true,
  steps: [
    {
      title: 'Fuel',
      text: 'Here are the fuel levels',
      attachTo: {
        element: '#basic-demo #fuel',
        on: 'top',
      },
    },
    {
      title: 'Oxygen',
      text: 'Here are the Oxygen levels.',
      attachTo: {
        element: '#basic-demo #oxygen',
        on: 'top',
      },
    },
    {
      title: 'Global status',
      text: 'Here you can see the global status of the vehicle. That is all there is to it!',
      attachTo: {
        element: '#basic-demo #status',
        on: 'top',
      },
    },
  ],
};
this._guidedTourService.registerTour('basicDemoTour', basicDemoTour);
this._guidedTourService.startTour('basicDemoTour');
this._guidedTourService
  .tourEvent$(TourEvents.show)
  .subscribe((event: IGuidedTourEvent) => {
    /* event object contains current step, previous step and tour objects */
  });
```

--------------------------------

### Install Covalent Nightly Builds

Source: https://github.com/teradata/covalent/blob/main/docs/ANGULAR_GETTING_STARTED.md

Installs the latest changes from the Covalent develop branch for testing purposes. This is useful for developers who want to use the most recent features or bug fixes.

```bash
npm install --save https://github.com/Teradata/covalent-nightly.git
npm install --save https://github.com/Teradata/covalent-echarts-nightly.git
```

--------------------------------

### Install Covalent Components via npm or yarn

Source: https://github.com/teradata/covalent/blob/main/docs/COMPONENTS_QUICKSTART.md

Provides commands for installing the `@covalent/components` library using either npm or yarn package managers. This is a prerequisite for using the components in a project locally.

```bash
# Using npm
npm install --save @covalent/components

# Using yarn
yarn add @covalent/components
```

--------------------------------

### Create New Angular Project

Source: https://github.com/teradata/covalent/blob/main/docs/ANGULAR_GETTING_STARTED.md

Creates a new Angular project with a build system. This command initializes a new project directory with all the necessary files and configurations for an Angular application.

```bash
ng new my-project
```

--------------------------------

### Production Setup: npm/yarn Installation

Source: https://github.com/teradata/covalent/blob/main/libs/components/README.md

Provides instructions for adding Covalent components to a project using package managers like npm or yarn for production environments.

```bash
# Using npm
npm install --save @covalent/components

# Using yarn
yarn add @covalent/components
```

--------------------------------

### HTML Structure for Guided Tour Demo

Source: https://github.com/teradata/covalent/blob/main/libs/angular-guided-tour/README.md

Provides the HTML markup for a basic guided tour demo, including elements that the tour steps will target. It also includes a button to manually start the tour.

```html
<div id="basic-demo">
  <button mat-raised-button color="accent" (click)="startTour()">
    Start tour
  </button>
  <meter
    id="fuel"
    min="0"
    max="100"
    low="33"
    high="66"
    optimum="50"
    value="50"
  ></meter>
  <progress id="oxygen" max="100" value="70">70%</progress>
  <marquee id="status">All systems are running smoothly</marquee>
</div>
```

--------------------------------

### Start Covalent Data Mock API Server

Source: https://github.com/teradata/covalent/blob/main/apps/docs-app/src/app/content/docs/mock-data/mock-data.component.html

Starts the Covalent Data Mock API server, which runs as a background process. This command is part of the Covalent Quickstart integration.

```bash
npm run start-api
```

--------------------------------

### Build Style Dictionary (Bash)

Source: https://github.com/teradata/covalent/blob/main/libs/tokens/README.md

Command to build the style dictionary using the style-dictionary CLI. Assumes the module is installed globally.

```bash
style-dictionary build
```

--------------------------------

### Covalent Theming with Material Design

Source: https://github.com/teradata/covalent/blob/main/docs/ANGULAR_GETTING_STARTED.md

Defines Covalent and Material Design themes using SCSS. This includes setting up typography, color palettes, and applying component themes.

```scss
@use '@angular/material' as mat;

// (optional) Additional themes
@use '@covalent/markdown/markdown-theme' as markdown;
@use '@covalent/highlight/highlight-theme' as highlight;
@import '@covalent/flavored-markdown/flavored-markdown-theme';

// Covalent core themes
@import '@covalent/core/theming/all-theme';
@import '@covalent/core/theming/teradata-theme';

// Plus imports for other components in your app.

@include mat.core();

// Define a custom typography config that overrides the font-family
// or any typography level.
$typography: mat.m2-define-typography-config(
  $font-family: 'Inter, monospace',
  $headline-1: mat.m2-define-typography-level(32px, 48px, 700),
);

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$primary: mat.m2-define-palette($mat-blue, 700);
$accent: mat.m2-define-palette($mat-orange, 800, A100, A400);

// The warn palette is optional (defaults to red).
$warn: mat.m2-define-palette($mat-red, 600);

// Create the theme object (a Sass map containing all of the palettes).
$theme: mat.m2-define-light-theme(
  (
    color: (
      primary: $primary,
      accent: $accent,
      warn: $warn,
    ),
    typography: $typography,
  )
);

@include mat.typography-hierarchy($theme, $back-compat: true);

// Include the Angular Material styles using the custom theme
@include mat.all-component-themes($theme);

// Include theme styles for core and each component used in your app.
@include covalent-theme($theme);
@include markdown.covalent-markdown-theme($theme);
@include covalent-flavored-markdown-theme($theme);
@include highlight.covalent-highlight-theme($theme);

```

--------------------------------

### Component Configuration for Covalent Build

Source: https://github.com/teradata/covalent/blob/main/docs/COMPONENTS_DEVELOPER_GUIDE.md

Example JSON configuration for including a new component ('CovalentBadge') in the Covalent build process. Specifies the component's name, selector, file path, and any events it dispatches.

```json
[
  ...,
  {
    "name": "CovalentBadge",
    "selector": "cv-badge",
    "path": "./badge/badge",
    "events": ["change", "action"]
  },
  ...
]

```

--------------------------------

### Install Covalent Email Templates

Source: https://github.com/teradata/covalent/blob/main/libs/email-templates/README.md

Installs the @covalent/email-templates library using npm or yarn.

```bash
npm install --save @covalent/email-templates
```

```bash
yarn add @covalent/email-templates
```

--------------------------------

### Full Layout Example (HTML)

Source: https://github.com/teradata/covalent/blob/main/apps/docs-app/src/app/content/layouts/card-over/card-over.component.html

Provides a comprehensive HTML example of a Covalent layout, showcasing all available options, templates, and common usage patterns.

```html
<!-- tdLayoutLinksHtml -->
<div layout="column" layout-fill>
  <div layout="row" layout-fill>
    <md-sidenav layout="column" class="md-accent md-whiteframe-z2" md-component-id="left" md-is-open="true">
      <md-toolbar layout="row" class="md-accent">
        <div class="md-toolbar-tools">
          <span>Covalent</span>
        </div>
      </md-toolbar>
      <md-content flex layout-padding>
        <a ng-href="https://teradata.github.io/covalent/">
          <md-icon md-svg-icon="chrome_reader_mode"></md-icon>
          <span>Covalent</span>
        </a>
        <a ng-href="https://github.com/teradata/covalent">
          <md-icon md-svg-icon="github"></md-icon>
          <span>GitHub</span>
        </a>
      </md-content>
    </md-sidenav>
    <div flex layout="column" role="main" class="auto-scroll">
      <md-content flex layout-padding>
        <div layout="column" layout-gt-sm="row" layout-wrap>
          <div flex-gt-sm="50" flex-sm="100">
            <md-card>
              <md-card-header>
                <md-card-header-text>
                  <span class="md-headline">Card Over Layout</span>
                  <span class="md-subhead">A card over layout with all available options</span>
                </md-card-header-text>
              </md-card-header>
              <md-card-content>
                <div layout="column">
                  <div layout="row" layout-align="space-between">
                    <div layout="column">
                      <md-icon md-svg-icon="{{ item.icon }}"></md-icon>
                      <h3>{{ item.title }}</h3>
                    </div>
                    <div layout="column">
                      <md-icon md-svg-icon="{{ item.icon }}"></md-icon>
                      <h3>{{ item.title }}</h3>
                    </div>
                  </div>
                  <div layout="row" layout-align="space-between">
                    <div layout="column">
                      <md-icon md-svg-icon="{{ item.icon }}"></md-icon>
                      <h3>{{ item.title }}</h3>
                    </div>
                    <div layout="column">
                      <md-icon md-svg-icon="{{ item.icon }}"></md-icon>
                      <h3>{{ item.title }}</h3>
                    </div>
                  </div>
                </div>
              </md-card-content>
            </md-card>
          </div>
          <div flex-gt-sm="50" flex-sm="100">
            <md-card>
              <md-card-header>
                <md-card-header-text>
                  <span class="md-headline">Metadata</span>
                </md-card-header-text>
              </md-card-header>
              <md-card-content>
                <div layout="column">
                  <div layout="row" layout-align="space-between">
                    <div layout="column">
                      <md-icon md-svg-icon="{{ item.icon }}"></md-icon>
                      <h3>{{ item.title }}</h3>
                    </div>
                    <div layout="column">
                      <md-icon md-svg-icon="{{ item.icon }}"></md-icon>
                      <h3>{{ item.date | timeAgo }}</h3>
                    </div>
                  </div>
                  <p>{{ item.description }}</p>
                  <md-button class="md-raised">Edit</md-button>
                </div>
              </md-card-content>
            </md-card>
          </div>
        </div>
      </md-content>
    </div>
  </div>
</div>
```

--------------------------------

### React Integration with Covalent Components

Source: https://github.com/teradata/covalent/blob/main/libs/components/README.md

Demonstrates using Covalent components within a React application, recommending the dedicated React wrapper library for enhanced TypeScript support and React-centric APIs. Includes installation instructions and example usage.

```jsx
// Example usage
import { CovalentButton, CovalentSwitch } from '@covalent/components-react';

function App() {
  return (
    <>
      <CovalentSwitch checked onChange={(e) => console.log(e.detail)} />
      <CovalentButton label="React Power" onClick={() => alert('Works like regular React components!')} />
    </>
  );
}

```

```bash
npm install @covalent/components-react
# or
yarn add @covalent/components-react
```

--------------------------------

### Include Covalent CSS in Angular CLI

Source: https://github.com/teradata/covalent/blob/main/docs/ANGULAR_GETTING_STARTED.md

This snippet demonstrates how to add the Covalent platform.css file to the 'styles' array in the .angular-cli.json configuration file. This method includes all Covalent utility CSS classes and Material Icons by default.

```json
{
  "styles": [
    {
      "input": "node_modules/@covalent/core/common/platform.css",
      "bundleName": "covalent-styles",
      "inject": true
    }
  ]
}
```

--------------------------------

### Install Covalent Core

Source: https://github.com/teradata/covalent/blob/main/libs/angular/README.md

Installs the Covalent Core package as a project dependency using npm.

```bash
npm i -save @covalent/core
```

--------------------------------

### Covalent Core Installation

Source: https://github.com/teradata/covalent/blob/main/libs/angular/layout/README.md

Provides the npm command to install the Covalent core package, which includes the layout components.

```bash
npm i -save @covalent/core
```

--------------------------------

### Run Local Build with npm start

Source: https://github.com/teradata/covalent/blob/main/README.md

Executes the local build process for the project using the `npm run start` command. This is typically used to start a development server or build the project for local testing.

```Bash
npm run start
```

--------------------------------

### Import Covalent Guided Tour Module

Source: https://github.com/teradata/covalent/blob/main/libs/angular-guided-tour/README.md

Demonstrates how to import the CovalentGuidedTourModule into your Angular application. This is a necessary step before using any of the guided tour functionalities.

```typescript
import { CovalentGuidedTourModule } from '@covalent/guided-tour';
```

--------------------------------

### Install Covalent Packages

Source: https://github.com/teradata/covalent/blob/main/libs/markdown-flavored/README.md

Installs the necessary Covalent packages and Angular Material/CDK for the flavored markdown component.

```bash
npm i -save @angular/cdk
npm i -save @angular/material
npm i -save @covalent/core
npm i -save @covalent/markdown
npm i -save @covalent/highlight
npm i -save @covalent/flavored-markdown
```

--------------------------------

### Import Covalent Core NgModule in AppModule

Source: https://github.com/teradata/covalent/blob/main/docs/ANGULAR_GETTING_STARTED.md

Imports Covalent modules into the main Angular module (AppModule). This allows the application to use Covalent components and services.

```typescript
import { CovalentLayoutModule } from '@covalent/core/layout';
import { CovalentStepsModule  } from '@covalent/core/steps';
/* any other core modules */
// (optional) Additional Covalent Modules imports
import { CovalentHighlightModule } from '@covalent/highlight';
import { CovalentMarkdownModule } from '@covalent/markdown';
import { CovalentFlavoredMarkdownModule } from '@covalent/flavored-markdown';
import { CovalentDynamicFormsModule } from '@covalent/dynamic-forms';
import { CovalentBaseEchartsModule } from '@covalent/echarts/base';
// other imports
@NgModule({
  imports: [
    CovalentLayoutModule,
    CovalentStepsModule,
    // (optional) Additional Covalent Modules imports
    CovalentHighlightModule,
    CovalentMarkdownModule,
    CovalentFlavoredMarkdownModule,
    CovalentDynamicFormsModule,
    CovalentBaseEchartsModule,
  ],
  ...
})
export class AppModule { }
```

--------------------------------

### Extend Covalent Husky Hooks with Custom Commands

Source: https://github.com/teradata/covalent/blob/main/libs/coding-standards/src/lib/husky/README.md

Demonstrates how to extend the default husky hooks configuration provided by Covalent. This example shows adding a 'npm audit' command to the 'pre-commit' hook.

```javascript
const {
  covalentHooks,
  generateHuskyConfig,
} = require('./node_modules/@covalent/coding-standards/husky/husky.js');
const hooks = covalentHooks();
hooks['pre-commit'] = [...hooks['pre-commit'], 'npm audit']; // example of adding a hook
const huskyHooks = generateHuskyConfig(hooks);
module.exports = huskyHooks;
```

--------------------------------

### Install TdMarkdownComponent

Source: https://github.com/teradata/covalent/blob/main/libs/markdown/README.md

Installs the TdMarkdownComponent package using npm. This is the first step to integrate the markdown rendering capabilities into your project.

```bash
npm i -save @covalent/markdown
```

--------------------------------

### SCSS Variables Example

Source: https://github.com/teradata/covalent/blob/main/libs/tokens/README.md

Example of SCSS variables generated by the style dictionary build process, including color definitions for primary, secondary, error, and more.

```scss
// _variables.scss
$light-primary: #007373 !default;
$light-secondary: #007373 !default;
$light-error: #b11d00 !default;
$light-positive: #0a7e07 !default;
$light-caution: #ff8f00 !default;
$light-negative: #b11d00 !default;
$light-on-primary: white !default;
$light-on-secondary: white !default;
$light-on-background: rgba(0, 0, 0, 0.87) !default;
$light-on-surface: rgba(0, 0, 0, 0.87) !default;
$light-on-error: white !default;
$light-divider: rgba(0, 0, 0, 0.12) !default;
$light-background: #f5f5f5 !default;
$light-surface: white !default;
```

--------------------------------

### Minimal Layout (HTML)

Source: https://github.com/teradata/covalent/blob/main/apps/docs-app/src/app/content/layouts/card-over/card-over.component.html

Demonstrates the most basic HTML structure for a Covalent layout with no additional wrappers or components.

```html
<!-- tdLayoutMinHtml -->
<div layout="column" layout-fill>
  <div layout="row" layout-fill>
    <div flex> Content goes here </div>
  </div>
</div>
```

--------------------------------

### Run Covalent Storybook Docs

Source: https://github.com/teradata/covalent/blob/main/libs/components/README.md

Starts the main Storybook documentation site for the Covalent components project using the nx command-line tool.

```Bash
nx storybook components
```

--------------------------------

### Install Covalent Icons Package

Source: https://github.com/teradata/covalent/blob/main/docs/ICONS_QUICKSTART.md

Installs the `@covalent/icons` package using npm. This is the first step to integrate the custom icon font into your project.

```bash
npm install @covalent/icons
```

--------------------------------

### Install TSLint for TypeScript

Source: https://github.com/teradata/covalent/blob/main/apps/docs-app/src/app/content/docs/testing/testing.component.html

Installs TSLint, TypeScript, and Protractor globally, and updates the WebDriver. Ensure Protractor and TSLint are already set up for TypeScript and WebDriver is updated.

```Bash
npm install -g tslint typescript
npm install -g protractor
webdriver-manager update
./node_modules/.bin/webdriver-manager update
```

--------------------------------

### Set Up HTML with Covalent Components CDN

Source: https://github.com/teradata/covalent/blob/main/docs/COMPONENTS_QUICKSTART.md

This snippet shows a basic HTML template that imports Covalent Components from a CDN and includes the prebuilt light theme CSS. It serves as the foundational structure for using Covalent components in a web project.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Covalent - Web Components Library</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />

    <!-- Import Covalent Components from a CDN -->
    <script type="module" src="https://cdn.jsdelivr.net/npm/@covalent/components@latest/index.mjs"></script>

    <!-- Import Covalent Light Theme CSS -->
    <link href="https://cdn.jsdelivr.net/npm/@covalent/components@latest/theme/prebuilt/light-theme.css" rel="stylesheet" />
  </head>
  <body>
    <!-- Your content goes here -->
  </body>
</html>
```

--------------------------------

### CovalentFileModule Setup

Source: https://github.com/teradata/covalent/blob/main/libs/angular/file/src/file-upload/README.md

Example of how to import the CovalentFileModule into an NgModule to enable the use of file upload components.

```typescript
import { CovalentFileModule } from '@covalent/core/file';
@NgModule({
  imports: [
    CovalentFileModule,
    ...
  ],
  ...
})
export class MyModule {}
```

--------------------------------

### Full Covalent Demo (HTML)

Source: https://github.com/teradata/covalent/blob/main/apps/docs-app/src/app/content/layouts/nav-list/nav-list.component.html

Provides a comprehensive example of the Covalent framework with all options and templates configured. This includes detailed navigation, content display, and footer elements.

```html
{{ item.icon }} {{ item.title }}

{{ item.icon }} {{ item.title }}

<p>menu Covalent</p>

<p>arrow_back Page Title [chrome_reader_mode](https://teradata.github.io/covalent/)­[](https://github.com/teradata/covalent)</p>

{{ item.icon }}

<h3>{{ item.title }}</h3>

{{ item.description }}

<p>Main Content content area card content View more</p>

<p>Optional inner footer</p>

<p>Copyright © 2017 Teradata. All rights reserved</p>

{{ navListFullHtml }}
```

--------------------------------

### Quick Start: CDN Integration

Source: https://github.com/teradata/covalent/blob/main/libs/components/README.md

Demonstrates how to quickly integrate Covalent components into a project using a Content Delivery Network (CDN). This method is ideal for prototyping and simple projects, including the latest full bundle and an optional prebuilt theme.

```html
<!DOCTYPE html>
<html>
  <head>
    <!-- Latest full bundle -->
    <script type="module" src="https://cdn.jsdelivr.net/npm/@covalent/components@latest/+esm"></script>

    <!-- Optional theme (choose light/dark) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@covalent/components@latest/theme/prebuilt/light-theme.css" />
  </head>
  <body>
    <!-- Start using components! -->
    <cv-button label="Get Started" icon="rocket" raised></cv-button>
    <cv-alert heading="Pro Tip" type="success"> Check our Storybook for component playgrounds! </cv-alert>
  </body>
</html>
```

--------------------------------

### Import Covalent Modules in Standalone Component

Source: https://github.com/teradata/covalent/blob/main/docs/ANGULAR_GETTING_STARTED.md

Imports Covalent modules into a standalone Angular component. This approach is used for components that do not rely on NgModules.

```typescript
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
// Import any core or optional modules
import { CovalentMarkdownModule } from '@covalent/markdown';
import { CovalentFlavoredMarkdownModule } from '@covalent/flavored-markdown';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    // Add them to imports
    CovalentMarkdownModule,
    CovalentFlavoredMarkdownModule,
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  title = 'Covalent';
}
```

--------------------------------

### HTML Structure for Theme Toggling (HTML)

Source: https://github.com/teradata/covalent/blob/main/docs/COMPONENTS_THEMING.md

An example of an HTML structure where the `theme-dark` class can be added to the body to switch to the dark theme.

```HTML
<body class="theme-dark">
  <!-- Your content here -->
</body>
```

--------------------------------

### Generated Project Structure

Source: https://github.com/teradata/covalent/blob/main/libs/tokens/README.md

The directory structure created after building the style dictionary, including configuration files, token definitions, and build output.

```tree
├── README.md
├── config.json
├── tokens/
│   ├── color/
│       ├── base.json
│       ├── surface.json
│       ├── text.json
│       ├── palettes/
│          ├── material.json
│          ├── teradata.json
│   ├── typography/
│       ├── typography.json
├── build/
│   ├── json/
│      ├── variables.json
│   ├── scss/
│      ├── _variables.scss
│   ├── css/
│      ├── variables.scss
│   ├── js/
│      ├── variables.js
```

--------------------------------

### Run Covalent Component Tests

Source: https://github.com/teradata/covalent/blob/main/docs/COMPONENTS_DEVELOPER_GUIDE.md

Command to execute the unit tests for the Covalent component library using the Nx build system.

```bash
npx nx run components:test

```

--------------------------------

### Build Covalent Components

Source: https://github.com/teradata/covalent/blob/main/libs/components/README.md

Builds the Covalent components project, generating a publishable set of assets using webpack, executed via the nx command.

```Bash
nx build components
```

--------------------------------

### Install Angular CLI

Source: https://github.com/teradata/covalent/blob/main/apps/docs-app/src/app/content/docs/build-tasks/build-tasks.component.html

Installs the latest version of the Angular CLI globally using npm. Ensure you have Node.js version 6.11.1 or greater installed.

```bash
npm install -g @angular/cli@latest
```

--------------------------------

### Install Node Packages with npm ci

Source: https://github.com/teradata/covalent/blob/main/README.md

Installs Node.js packages using the `npm ci` command, ensuring a clean and reproducible installation based on the `package-lock.json` file. This is a standard command for setting up project dependencies.

```Bash
npm ci
```

--------------------------------

### Basic Button Examples

Source: https://github.com/teradata/covalent/blob/main/libs/components/src/button/Overview.mdx

Demonstrates the basic usage of Covalent UI buttons, including text, outlined, and contained button variants.

```html
<cv-button label="Text button" />

<cv-button label="Outlined button" outlined />

  <cv-button label="Contained button" raised />
```

--------------------------------

### Build Covalent Email Templates Library

Source: https://github.com/teradata/covalent/blob/main/libs/email-templates/README.md

Builds the email-templates library and generates publishable assets using webpack.

```bash
nx build email-templates
```

--------------------------------

### Install Covalent Code Editor

Source: https://github.com/teradata/covalent/blob/main/libs/angular-code-editor/README.md

Installs the Covalent code editor package using npm.

```bash
npm install @covalent/code-editor
```

--------------------------------

### Install Monaco Editor Webpack Plugin

Source: https://github.com/teradata/covalent/blob/main/libs/angular-code-editor/README.md

Installs the plugin required to bundle Monaco Editor with Webpack.

```bash
npm install --save-dev monaco-editor-webpack-plugin
```

--------------------------------

### Install Webpack Custom Builder

Source: https://github.com/teradata/covalent/blob/main/libs/angular-code-editor/README.md

Installs the Angular Webpack custom builder for integrating Monaco Editor.

```bash
npm install --save-dev @angular-builders/custom-webpack
```

--------------------------------

### Build Output Indicators (JSON, SCSS, CSS, JS)

Source: https://github.com/teradata/covalent/blob/main/libs/tokens/README.md

Indicators showing the successful build status for different file formats: JSON, SCSS, CSS, and JavaScript.

```json
⚠️ build/json/variables.json
```

```scss
✔︎ build/scss/_variables.scss
```

```css
✔︎ build/css/variables.css
```

```js
✔︎ build/js/variables.js
```

--------------------------------

### Import Covalent Menu Component

Source: https://github.com/teradata/covalent/blob/main/libs/components/README.md

Shows how to import the Covalent Menu component. Importing only the components you need is a best practice for production deployments.

```javascript
import '@covalent/components/menu';
// Usage: <cv-menu></cv-menu>
```

--------------------------------

### TypeScript Type Definitions for Guided Tours

Source: https://github.com/teradata/covalent/blob/main/libs/angular-guided-tour/README.md

Defines the TypeScript types and interfaces for creating guided tours, including tour steps, event handling, and tour options. These types are essential for structuring tour data and ensuring type safety.

```typescript
export type TourStep = Shepherd.Step.StepOptions;
export type TourStepButton = Shepherd.Step.StepOptionsButton;

export enum ITourEvent {
  'click' = 'click',
  'pointerover' = 'pointerover',
  'keyup' = 'keyup',
  'added' = 'added', // added to DOM
  'removed' = 'removed', // removed from DOM
}

export interface ITourEventOn {
  selector?: string; // css selector
  event?: keyof typeof ITourEvent; // click, pointerover, keyup, added, removed
}

export interface ITourEventOnOptions {
  timeBeforeShow?: number; // delay before step is displayed
  interval?: number; // time between searches for element, defaults to 500ms
}

export interface ITourAbortOn extends ITourEventOn {}

export interface ITourOptions extends Shepherd.Tour.TourOptions {
  abortOn?: ITourAbortOn[]; // events to abort on
}

export interface ITourStepAttachToOptions extends ITourEventOnOptions {
  highlight?: boolean;
  retries?: number; // # num of attempts to find element
  skipIfNotFound?: boolean; // if element is not found after n retries, move on to next step
  else?: string; // if element is not found, go to step with this id
  goBackTo?: string; // back button goes back to step with this id
  skipFromStepCount?: boolean; // show/hide the step count, removes step from total count
}

export interface ITourStepAdvanceOn extends ITourEventOn {}

export interface ITourStepAdvanceOnOptions extends ITourEventOnOptions {
  jumpTo?: string; // next button will jump to step with this id
  allowGoBack?: boolean; // allow back within this step
}

export interface ITourStep extends TourStep {
  attachToOptions?: ITourStepAttachToOptions;
  advanceOnOptions?: ITourStepAdvanceOnOptions;
  advanceOn?: ITourStepAdvanceOn[] | ITourStepAdvanceOn | any;
  abortOn?: ITourAbortOn[];
  count?: number;
}

export interface IGuidedTour extends ITourOptions {
  steps: IGuidedTourStep[];
  finishButtonText?: string; // optionally pass in a localized string; default value is 'finish'
  dismissButtonText?: string; // optionally pass in a localized string; default value is 'cancel tour'
}

export interface IGuidedTourStep extends ITourStep {
  routing?: {
    route: string;
    extras?: NavigationExtras;
  };
}

export enum TourEvents {
  complete = 'complete',
  cancel = 'cancel',
  hide = 'hide',
  show = 'show',
  start = 'start',
  active = 'active',
  inactive = 'inactive',
}

export interface IGuidedTourEvent {
  step: any; // current step tour is showing
  previous: any; // previous step of the tour
  tour: any; // tour object
}
```

--------------------------------

### Import Covalent Drawer Component

Source: https://github.com/teradata/covalent/blob/main/libs/components/README.md

Shows how to import the Covalent Drawer component. Importing specific components is a recommended practice for production deployments to optimize performance.

```javascript
import '@covalent/components/drawer';
// Usage: <cv-drawer></cv-drawer>
```

--------------------------------

### Import Covalent ExpansionPanel Component

Source: https://github.com/teradata/covalent/blob/main/libs/components/README.md

Illustrates importing the Covalent ExpansionPanel component. Importing individual components is encouraged for production deployments to reduce code size.

```javascript
import '@covalent/components/expansion-panel';
// Usage: <cv-expansion-panel></cv-expansion-panel>
```

--------------------------------

### Basic Covalent Layout Demo (HTML)

Source: https://github.com/teradata/covalent/blob/main/apps/docs-app/src/app/content/layouts/nav-list/nav-list.component.html

Presents a basic layout wrapper with a navigation drawer, suitable for standard application structures. It includes example navigation items and content placeholders.

```html
<p>Sidenav content here</p>

<p>Toggle</p>

<p>Content goes here</p>

{{ navListBasicHtml }}
```

--------------------------------

### Full Navigation View with Options (HTML)

Source: https://github.com/teradata/covalent/blob/main/apps/docs-app/src/app/content/layouts/nav-view/nav-view.component.html

Presents a comprehensive Covalent navigation view with all available options and templates. This example showcases a fully functional implementation.

```html
<div class="full-demo">
  {{ navViewFullHtml }}
</div>
```

--------------------------------

### Import Covalent ExpansionPanelItem Component

Source: https://github.com/teradata/covalent/blob/main/libs/components/README.md

Shows the import path for the Covalent ExpansionPanelItem component. Importing specific components helps optimize application performance.

```javascript
import '@covalent/components/expansion-panel-item';
// Usage: <cv-expansion-panel-item></cv-expansion-panel-item>
```

--------------------------------

### MarkdownNavigatorWindowComponent Setup

Source: https://github.com/teradata/covalent/blob/main/libs/markdown-navigator/README.md

Imports the CovalentMarkdownNavigatorModule into your Angular application module. This setup is identical to the MarkdownNavigatorComponent, making the MarkdownNavigatorWindowComponent available.

```typescript
import { CovalentMarkdownNavigatorModule } from '@covalent/markdown-navigator';
@NgModule({
  imports: [CovalentMarkdownNavigatorModule],
})
export class MyModule {}
```

--------------------------------

### Install Covalent Text Editor

Source: https://github.com/teradata/covalent/blob/main/libs/angular-highlight/README.md

Installs the Covalent text editor package using npm. This is the first step to using the component in your project.

```bash
npm install @covalent/text-editor
```

--------------------------------

### Install Covalent Text Editor

Source: https://github.com/teradata/covalent/blob/main/libs/angular-text-editor/README.md

Installs the Covalent text editor package using npm. This is the first step to using the component in your project.

```bash
npm install @covalent/text-editor
```

--------------------------------

### MarkdownNavigatorComponent Example Items

Source: https://github.com/teradata/covalent/blob/main/libs/markdown-navigator/README.md

Provides an example of how to structure the 'items' array for the MarkdownNavigatorComponent, including nested children and URLs to external markdown files.

```typescript
const items = [
  {
    id: 'covalent',
    title: 'Covalent',
    children: [
      {
        id: 'component',
        title: 'Components',
        children: [
          {
            id: 'td-loading',
            url: 'https://raw.githubusercontent.com/Teradata/covalent/main/src/platform/core/loading/README.md',
            title: 'tdLoading',
          },
        ],
      },
    ],
  },
];
```

--------------------------------

### Import Covalent Switch Component

Source: https://github.com/teradata/covalent/blob/main/libs/components/README.md

Illustrates importing the Covalent Switch component. Importing specific components helps reduce the overall code size and improve application performance.

```javascript
import '@covalent/components/switch';
// Usage: <cv-switch></cv-switch>
```

--------------------------------

### Import Covalent AppShell Component

Source: https://github.com/teradata/covalent/blob/main/libs/components/README.md

Illustrates importing the Covalent AppShell component. This practice of importing only necessary components aids in reducing the overall footprint of your application.

```javascript
import '@covalent/components/app-shell';
// Usage: <cv-app-shell></cv-app-shell>
```