@covalent/highlight 0.0.0-COVALENT

package/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.dev/reference/versions#browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

package/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "td",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "td",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,67 @@
+## TdTextEditorComponent: td-text-editor
+
+`<td-text-editor>` element generates an easymde markdown editor.
+
+## API Summary
+
+#### Inputs
+
+- value?: string
+  - value of text in editor
+- options?: object
+  - Options Object of valid Configurations listed here: <a href="https://github.com/Ionaru/easy-markdown-editor#configuration">https://github.com/Ionaru/easy-markdown-editor#configuration</a>
+
+#### Properties
+
+- isPreviewActive?: function()
+  - is the Preview Active. Returns boolean
+- isSideBySideActive?: function()
+  - is the Side By Side Active. Returns boolean
+- isFullscreenActive?: function()
+  - is Full Screen Active. Returns boolean
+- clearAutosavedValue?: function()
+  - clears Auto Saved Value. Returns void
+- toTextArea?: function()
+  - reverts to the Initial textarea. Returns void
+- easyMDE?: function()
+  - getter function for the underlying easyMDE Object. Returns EasyMDE
+
+## Installation
+
+This component can be installed as npm package.
+
+```bash
+npm install @covalent/text-editor
+```
+
+## Setup
+
+Import the **CovalentTextEditorModule** in your NgModule:
+
+```typescript
+import { CovalentTextEditorModule } from '@covalent/text-editor';
+@NgModule({
+  imports: [
+    CovalentTextEditorModule,
+    ...
+  ],
+  ...
+})
+export class MyModule {}
+```
+
+### Usage
+
+```html
+<td-text-editor [value]="Some Text" [options]="options"></td-text-editor>
+```
+
+```typescript
+class MyComponent {
+  options: any = {
+    lineWrapping: true,
+    toolbar: false,
+    ...
+  };
+}
+```

package/_highlight-theme.scss

@@ -0,0 +1,93 @@
+@mixin covalent-highlight-theme($theme) {
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+  $is-dark: map-get($theme, is-dark);
+
+  .raw-and-copy-buttons {
+    border-color: map-get($foreground, divider);
+
+    .mat-button-toggle {
+      background-color: inherit;
+      color: map-get($foreground, text);
+
+      mat-icon {
+        color: map-get($foreground, icon);
+      }
+
+      & + .mat-button-toggle {
+        border-left-color: map-get($foreground, divider);
+      }
+    }
+  }
+
+  td-highlight {
+    background-color: if($is-dark, #1a1c1d, #eeeeee);
+
+    .highlight {
+      color: if($is-dark, #abb2bf, #383a42);
+    }
+
+    .raw {
+      color: if($is-dark, rgba(255, 255, 255, 87%), rgba(0, 0, 0, 87%));
+    }
+
+    .hljs-comment,
+    .hljs-quote {
+      color: if($is-dark, #5c6370, #a0a1a7);
+      font-style: italic;
+    }
+
+    .hljs-doctag,
+    .hljs-formula,
+    .hljs-keyword {
+      color: if($is-dark, #c678dd, #a626a4);
+    }
+
+    .hljs-deletion,
+    .hljs-name,
+    .hljs-tag,
+    .hljs-section,
+    .hljs-selector-tag,
+    .hljs-subst {
+      color: if($is-dark, #e06c75, #e45649);
+    }
+
+    .hljs-literal {
+      color: if($is-dark, #56b6c2, #0184bb);
+    }
+
+    .hljs-addition,
+    .hljs-attribute,
+    .hljs-meta .hljs-string,
+    .hljs-regexp,
+    .hljs-string {
+      color: if($is-dark, #98c379, #50a14f);
+    }
+
+    .hljs-attr,
+    .hljs-number,
+    .hljs-selector-attr,
+    .hljs-selector-class,
+    .hljs-selector-pseudo,
+    .hljs-template-variable,
+    .hljs-type,
+    .hljs-variable {
+      color: if($is-dark, #d19a66, #986801);
+    }
+
+    .hljs-bullet,
+    .hljs-link,
+    .hljs-meta,
+    .hljs-selector-id,
+    .hljs-symbol,
+    .hljs-title {
+      color: if($is-dark, #61aeee, #4078f2);
+    }
+
+    .hljs-built_in,
+    .hljs-class .hljs-title,
+    .hljs-title.class_ {
+      color: if($is-dark, #e6c07b, #c18401);
+    }
+  }
+}

package/jest.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+  displayName: 'angular-highlight',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {},
+  coverageDirectory: '../../coverage/libs/angular-highlight',
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

package/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/libs/angular-highlight",
+  "assets": ["./**/*theme.scss"]
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@covalent/highlight",
+  "version": "0.0.0-COVALENT",
+  "description": "Teradata UI Platform Highlight Module",
+  "keywords": [
+    "angular",
+    "components",
+    "reusable",
+    "highlight",
+    "highlightjs"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/teradata/covalent.git"
+  },
+  "bugs": {
+    "url": "https://github.com/teradata/covalent/issues"
+  },
+  "license": "MIT",
+  "author": "Teradata UX",
+  "peerDependencies": {
+    "highlight.js": "0.0.0-HIGHLIGHT",
+    "@angular/common": "0.0.0-NG",
+    "@angular/core": "0.0.0-NG",
+    "@angular/platform-browser": "0.0.0-NG",
+    "@angular/cdk": "0.0.0-NG",
+    "@angular/material": "0.0.0-MATERIAL"
+  },
+  "dependencies": {
+    "tslib": "0.0.0-TSLIB"
+  },
+  "exports": {
+    "./highlight-theme": {
+      "sass": "./_highlight-theme.scss"
+    }
+  }
+}

package/project.json

@@ -0,0 +1,53 @@
+{
+  "name": "angular-highlight",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "sourceRoot": "libs/angular-highlight/src",
+  "prefix": "covalent",
+  "targets": {
+    "build": {
+      "executor": "@angular-devkit/build-angular:ng-packagr",
+      "outputs": ["{workspaceRoot}/dist/libs/angular-highlight"],
+      "options": {
+        "project": "libs/angular-highlight/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "libs/angular-highlight/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "libs/angular-highlight/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/libs/angular-highlight"],
+      "options": {
+        "jestConfig": "libs/angular-highlight/jest.config.js",
+        "passWithNoTests": true
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "lintFilePatterns": [
+          "libs/angular-highlight/src/**/*.ts",
+          "libs/angular-highlight/src/**/*.html"
+        ]
+      }
+    },
+    "scsslint": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          {
+            "command": "./node_modules/.bin/stylelint --allow-empty-input 'libs/angular-highlight/**/*.scss'"
+          }
+        ]
+      }
+    }
+  },
+  "tags": []
+}

package/src/lib/copy-code-button/copy-code-button.component.html

@@ -0,0 +1,32 @@
+<mat-button-toggle-group
+  multiple
+  class="raw-and-copy-buttons"
+  *ngIf="toggleRawButton; else button"
+>
+  <mat-button-toggle (click)="toggleRawClicked()" #rawButton>{{
+    rawToggleText
+  }}</mat-button-toggle>
+  <mat-button-toggle
+    [cdkCopyToClipboard]="copiedContent"
+    [matTooltip]="copyTooltip"
+    #tooltip="matTooltip"
+    #copyButton
+    (click)="copyClicked()"
+    (cdkCopyToClipboardCopied)="textCopied($event)"
+  >
+    <mat-icon width>content_copy</mat-icon>
+  </mat-button-toggle>
+</mat-button-toggle-group>
+
+<ng-template #button>
+  <button
+    mat-icon-button
+    [cdkCopyToClipboard]="copiedContent"
+    class="copy-button"
+    [matTooltip]="copyTooltip"
+    #tooltip="matTooltip"
+    (cdkCopyToClipboardCopied)="textCopied($event)"
+  >
+    <mat-icon role="img">content_copy</mat-icon>
+  </button>
+</ng-template>

package/src/lib/copy-code-button/copy-code-button.component.scss

@@ -0,0 +1,16 @@
+mat-button-toggle-group.raw-and-copy-buttons {
+  margin-top: -8px;
+  margin-right: -8px;
+  margin-left: 8px;
+
+  ::ng-deep .mat-button-toggle-label-content {
+    font-size: 12px;
+    line-height: 28px;
+
+    mat-icon {
+      width: 16px;
+      height: 16px;
+      font-size: 16px;
+    }
+  }
+}

package/src/lib/copy-code-button/copy-code-button.component.spec.ts

@@ -0,0 +1,70 @@
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TdCopyCodeButtonComponent } from './copy-code-button.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatButtonModule } from '@angular/material/button';
+import { By } from '@angular/platform-browser';
+
+describe('CopyCodeButtonComponent', () => {
+  let component: TdCopyCodeButtonComponent;
+  let fixture: ComponentFixture<TdCopyCodeButtonComponent>;
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [
+          ClipboardModule,
+          MatIconModule,
+          MatTooltipModule,
+          MatButtonModule,
+          TdCopyCodeButtonComponent,
+        ],
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TdCopyCodeButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+    expect(
+      fixture.debugElement.query(By.css('button')).nativeElement
+    ).toBeTruthy();
+  });
+
+  it('should display default tooltip', () => {
+    component.copyCodeTooltips = undefined;
+    component.copyCodeToClipboard = true;
+    expect(component).toBeTruthy();
+    expect(
+      fixture.debugElement.query(By.css('button')).nativeElement
+    ).toBeTruthy();
+    expect(
+      fixture.debugElement
+        .query(By.css('button'))
+        .nativeElement.getAttribute('ng-reflect-message')
+    ).toEqual('Copy');
+  });
+
+  it('should override tooltip', () => {
+    component.copyCodeTooltips = { copy: 'CC', copied: 'CC Copied' };
+    component.copyCodeToClipboard = true;
+    fixture.detectChanges();
+    fixture.whenStable();
+    expect(component).toBeTruthy();
+    expect(
+      fixture.debugElement.query(By.css('button')).nativeElement
+    ).toBeTruthy();
+    expect(
+      fixture.debugElement
+        .query(By.css('button'))
+        .nativeElement.getAttribute('ng-reflect-message')
+    ).toEqual('CC');
+  });
+});

package/src/lib/copy-code-button/copy-code-button.component.ts

@@ -0,0 +1,93 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  Input,
+  ViewChild,
+  HostListener,
+  EventEmitter,
+  Output,
+} from '@angular/core';
+import { MatButtonToggle, MatButtonToggleGroup } from '@angular/material/button-toggle';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+
+export interface ICopyCodeTooltips {
+  copy?: string;
+  copied?: string;
+}
+
+export interface IRawToggleLabels {
+  viewRaw?: string;
+  viewCode?: string;
+}
+
+@Component({
+  selector: 'td-copy-code-button',
+  templateUrl: './copy-code-button.component.html',
+  styleUrls: ['./copy-code-button.component.scss'],
+  imports: [CommonModule, MatButtonToggle, MatButtonToggleGroup, MatIcon, MatTooltip, ClipboardModule],
+})
+export class TdCopyCodeButtonComponent {
+  // private _copyCodeTooltips: ICopyCodeTooltips = {};
+  @Input() copiedContent!: string;
+  @Input() copyCodeToClipboard = false;
+  /**
+   * copyCodeTooltips?: ICopyCodeTooltips
+   *
+   * Tooltips for copy button to copy and upon copying.
+   */
+  @Input() copyCodeTooltips?: ICopyCodeTooltips = {};
+
+  @Input() toggleRawButton = false;
+  @Input() rawToggleLabels?: IRawToggleLabels = {};
+
+  rawToggle = false;
+
+  @Output() toggleRaw = new EventEmitter<boolean>();
+
+  @ViewChild('copyButton') copyButton!: MatButtonToggle;
+  @ViewChild('rawButton') rawButton!: MatButtonToggle;
+
+  get copyTooltip(): string {
+    return (this.copyCodeTooltips && this.copyCodeTooltips.copy) || 'Copy';
+  }
+
+  get copiedTooltip(): string {
+    return (this.copyCodeTooltips && this.copyCodeTooltips.copied) || 'Copied';
+  }
+
+  get rawToggleText(): string {
+    if (this.rawToggle) {
+      return this.rawToggleLabels?.viewCode || 'View code';
+    } else {
+      return this.rawToggleLabels?.viewRaw || 'Raw';
+    }
+  }
+
+  @ViewChild('tooltip') tooltip!: MatTooltip;
+
+  textCopied(event: boolean): void {
+    if (event) {
+      this.tooltip.hide();
+      this.tooltip.message = this.copiedTooltip;
+      this.tooltip.show();
+    }
+  }
+  @HostListener('mouseleave')
+  initializeTooltip(): void {
+    setTimeout(() => {
+      this.tooltip.message = this.copyTooltip;
+    }, 200);
+  }
+
+  toggleRawClicked(): void {
+    this.rawToggle = !this.rawToggle;
+    this.toggleRaw.emit();
+    this.rawButton.checked = false;
+  }
+
+  copyClicked(): void {
+    this.copyButton.checked = false;
+  }
+}

package/src/lib/highlight.component.html

@@ -0,0 +1,16 @@
+<div>
+  <div #highlightComponent>
+    <ng-content></ng-content>
+  </div>
+
+  <div #copyComponent *ngIf="copyCodeToClipboard">
+    <td-copy-code-button
+      [toggleRawButton]="toggleRawButton"
+      [rawToggleLabels]="rawToggleLabels"
+      (toggleRaw)="toggleRawClicked()"
+      [copiedContent]="copyContent"
+      [copyCodeToClipboard]="copyCodeToClipboard"
+      [copyCodeTooltips]="copyCodeTooltips"
+    ></td-copy-code-button>
+  </div>
+</div>

package/src/lib/highlight.component.scss

@@ -0,0 +1,63 @@
+@use '@covalent/tokens' as tokens;
+$typography: map-get(tokens.$tokens, typography);
+
+$code-font: 'Menlo', 'Monaco', 'Andale Mono', 'lucida console', 'Courier New',
+  monospace;
+$padding: 16px;
+
+:host ::ng-deep {
+  overflow-x: auto;
+  padding: $padding;
+  display: flex;
+  position: relative;
+
+  pre,
+  code {
+    font-family: $code-font;
+  }
+
+  pre {
+    display: block;
+    overflow-x: auto;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    font-family: $code-font;
+    line-height: 1.45;
+    tab-size: 2;
+    -webkit-font-smoothing: auto;
+    text-size-adjust: none;
+    position: relative;
+    border-radius: 2px;
+    font-size: 0.8rem;
+    width: 100%;
+  }
+
+  code {
+    margin: 0;
+    padding: 0;
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+  }
+
+  div.raw {
+    flex-grow: 1;
+  }
+
+  .highlight {
+    display: block;
+    overflow-wrap: break-word;
+    margin: 0;
+    font-family: map-get($typography, code-font-family);
+    font-size: map-get($typography, code-font-size);
+    font-weight: map-get($typography, code-font-weight);
+    line-height: map-get($typography, code-line-height);
+  }
+
+  .copy-button {
+    border: none;
+    background: inherit;
+    margin-top: -8px;
+    margin-right: -8px;
+  }
+}

package/src/lib/highlight.component.spec.ts

@@ -0,0 +1,304 @@
+import { TestBed, waitForAsync, fakeAsync } from '@angular/core/testing';
+import { Component } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { TdHighlightComponent } from './highlight.component';
+
+describe('Component: Highlight', () => {
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        TdHighlightEmptyStaticTestRenderingComponent,
+        TdHighlightStaticHtmlTestRenderingComponent,
+        TdHighlightDynamicCssTestRenderingComponent,
+        TdHighlightUndefinedLangTestRenderingComponent,
+
+        TdHighlightEmptyStaticTestEventsComponent,
+        TdHighlightStaticHtmlTestEventsComponent,
+        TdHighlightDynamicCssTestEventsComponent,
+        TdHighlightUndefinedLangTestEventsComponent,
+      ],
+    });
+    TestBed.compileComponents();
+  }));
+
+  describe('Rendering: ', () => {
+    it('should render empty', waitForAsync(() => {
+      fakeAsync(() => {
+        const fixture = TestBed.createComponent(
+          TdHighlightEmptyStaticTestRenderingComponent
+        );
+        const element: HTMLElement = fixture.nativeElement;
+
+        expect(
+          fixture.debugElement
+            .query(By.css('td-highlight'))
+            .nativeElement.textContent.trim()
+        ).toBe(``);
+        expect(element.querySelector('td-highlight pre code')).toBeFalsy();
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          fixture.detectChanges();
+          expect(element.querySelector('td-highlight pre code')).toBeFalsy();
+          expect(
+            fixture.debugElement
+              .query(By.css('td-highlight > div > div'))
+              .nativeElement.textContent.trim()
+          ).toBe('');
+        });
+      });
+    }));
+
+    it('should render code from static content', waitForAsync(() => {
+      const fixture = TestBed.createComponent(
+        TdHighlightStaticHtmlTestRenderingComponent
+      );
+      const element: HTMLElement = fixture.nativeElement;
+
+      expect(element.querySelector('td-highlight pre code')).toBeFalsy();
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        expect(
+          fixture.debugElement
+            .query(By.css('td-highlight'))
+            .nativeElement.textContent.trim()
+        ).toContain(`{{property}}`.trim());
+        expect(element.querySelector('td-highlight pre code')).toBeTruthy();
+        expect(
+          element.querySelector('td-highlight pre code')?.textContent?.trim()
+        ).toContain(`{{property}}`);
+        expect(element.querySelectorAll('.hljs-tag').length).toBe(6);
+      });
+    }));
+
+    it('should render code from dynamic content', waitForAsync(() => {
+      const fixture = TestBed.createComponent(
+        TdHighlightDynamicCssTestRenderingComponent
+      );
+      const component: TdHighlightDynamicCssTestRenderingComponent =
+        fixture.debugElement.componentInstance;
+      component.content = `
+        pre {
+          background: #002451;
+          border-radius: 2px;
+        }`;
+      const element: HTMLElement = fixture.nativeElement;
+
+      expect(
+        fixture.debugElement
+          .query(By.css('td-highlight > div > div'))
+          .nativeElement.textContent.trim()
+      ).toBe('');
+      expect(element.querySelector('td-highlight pre code')).toBeFalsy();
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        expect(element.querySelector('td-highlight pre code')).toBeTruthy();
+        expect(element.querySelectorAll('.hljs-number').length).toBe(2);
+      });
+    }));
+
+    it('should throw error for undefined language', waitForAsync(() => {
+      const fixture = TestBed.createComponent(
+        TdHighlightUndefinedLangTestRenderingComponent
+      );
+      expect(function (): void {
+        fixture.detectChanges();
+      }).toThrowError();
+    }));
+  });
+
+  describe('Event bindings: ', () => {
+    describe('contentReady event: ', () => {
+      it('should be fired only once after display renders empty static content', waitForAsync(() => {
+        const fixture = TestBed.createComponent(
+          TdHighlightEmptyStaticTestEventsComponent
+        );
+        const component: TdHighlightEmptyStaticTestEventsComponent =
+          fixture.debugElement.componentInstance;
+        jest.spyOn(component, 'tdHighlightContentIsReady');
+
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          fixture.detectChanges();
+          expect(component.tdHighlightContentIsReady).toHaveBeenCalledTimes(1);
+        });
+      }));
+
+      it('should be fired only once after display renders highlight from static html', waitForAsync(() => {
+        const fixture = TestBed.createComponent(
+          TdHighlightStaticHtmlTestEventsComponent
+        );
+        const component: TdHighlightStaticHtmlTestEventsComponent =
+          fixture.debugElement.componentInstance;
+        jest.spyOn(component, 'tdHighlightContentIsReady');
+
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          fixture.detectChanges();
+          expect(component.tdHighlightContentIsReady).toHaveBeenCalledTimes(1);
+        });
+      }));
+
+      it('should be fired only once after display renders inital highlight from dynamic css content', waitForAsync(() => {
+        const fixture = TestBed.createComponent(
+          TdHighlightDynamicCssTestEventsComponent
+        );
+        const component: TdHighlightDynamicCssTestEventsComponent =
+          fixture.debugElement.componentInstance;
+        jest.spyOn(component, 'tdHighlightContentIsReady');
+
+        // Inital dynamic css content
+        component.content = `
+            pre {
+              background: #002451;
+              border-radius: 2px;
+            }`;
+
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          fixture.detectChanges();
+          expect(component.tdHighlightContentIsReady).toHaveBeenCalledTimes(1);
+        });
+      }));
+
+      it('should be fired twice after changing the inital rendered highlight dynamic css content', waitForAsync(() => {
+        const fixture = TestBed.createComponent(
+          TdHighlightDynamicCssTestEventsComponent
+        );
+        const component: TdHighlightDynamicCssTestEventsComponent =
+          fixture.debugElement.componentInstance;
+        jest.spyOn(component, 'tdHighlightContentIsReady');
+
+        component.content = `
+            pre {
+              background: #002451;
+              border-radius: 2px;
+            }`;
+
+        fixture.detectChanges();
+
+        component.content = `
+            pre {
+              color: red;
+              background: #000000;
+              border-radius: 1em;
+            }`;
+
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          fixture.detectChanges();
+          expect(component.tdHighlightContentIsReady).toBeCalledTimes(2);
+        });
+      }));
+    });
+  });
+});
+
+// Use the 4 components below to test the rendering requirements of the TdHighlight component.
+@Component({
+  template: ` <td-highlight></td-highlight> `,
+  imports: [TdHighlightComponent],
+})
+class TdHighlightEmptyStaticTestRenderingComponent {}
+
+@Component({
+  template: `
+    <td-highlight codeLang="html">
+      {{ dataHtml0 }}
+    </td-highlight>
+  `,
+  imports: [TdHighlightComponent],
+})
+class TdHighlightStaticHtmlTestRenderingComponent {
+  dataHtml0 = `
+    <td-highlight codeLang="html">
+      <h1>hello world!</h1>
+      <span>{{property}}</span>
+    </td-highlight>
+  `;
+}
+
+@Component({
+  template: `
+    <td-highlight codeLang="css" [content]="content"></td-highlight>
+  `,
+  imports: [TdHighlightComponent],
+})
+class TdHighlightDynamicCssTestRenderingComponent {
+  content!: string;
+}
+
+@Component({
+  template: ` <td-highlight [codeLang]="lang"></td-highlight> `,
+  imports: [TdHighlightComponent],
+})
+class TdHighlightUndefinedLangTestRenderingComponent {
+  lang!: string;
+}
+
+// Use the 4 components below to test event binding requirements of the TdHighlight component.
+@Component({
+  template: `
+    <td-highlight (contentReady)="tdHighlightContentIsReady()"></td-highlight>
+  `,
+  imports: [TdHighlightComponent],
+})
+class TdHighlightEmptyStaticTestEventsComponent {
+  tdHighlightContentIsReady(): void {
+    /* Stub */
+  }
+}
+
+@Component({
+  template: `
+    <td-highlight codeLang="html" (contentReady)="tdHighlightContentIsReady()">
+      {{ dataHtml }}
+    </td-highlight>
+  `,
+  imports: [TdHighlightComponent],
+})
+class TdHighlightStaticHtmlTestEventsComponent {
+  dataHtml = `
+    <td-highlight codeLang="html">
+      <h1>hello world!</h1>
+      <span>{ {property} }</span>
+    </td-highlight>
+  `;
+  tdHighlightContentIsReady(): void {
+    /* Stub */
+  }
+}
+
+@Component({
+  template: `
+    <td-highlight
+      codeLang="css"
+      [content]="content"
+      (contentReady)="tdHighlightContentIsReady()"
+    ></td-highlight>
+  `,
+  imports: [TdHighlightComponent],
+})
+class TdHighlightDynamicCssTestEventsComponent {
+  content!: string;
+  tdHighlightContentIsReady(): void {
+    /* Stub */
+  }
+}
+
+@Component({
+  template: `
+    <td-highlight
+      [codeLang]="lang"
+      (contentReady)="tdHighlightContentIsReady()"
+    ></td-highlight>
+  `,
+  imports: [TdHighlightComponent],
+})
+class TdHighlightUndefinedLangTestEventsComponent {
+  lang!: string;
+  tdHighlightContentIsReady(): void {
+    /* Stub */
+  }
+}

package/src/lib/highlight.component.ts

@@ -0,0 +1,253 @@
+import {
+  Component,
+  AfterViewInit,
+  ElementRef,
+  Input,
+  Output,
+  EventEmitter,
+  Renderer2,
+  SecurityContext,
+  ViewChild,
+  ChangeDetectorRef,
+  AfterViewChecked,
+} from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { MatTooltip } from '@angular/material/tooltip';
+import {
+  ICopyCodeTooltips,
+  IRawToggleLabels,
+  TdCopyCodeButtonComponent,
+} from './copy-code-button/copy-code-button.component';
+
+import hljs, { HighlightResult } from 'highlight.js';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'td-highlight',
+  styleUrls: ['./highlight.component.scss'],
+  templateUrl: './highlight.component.html',
+  imports: [CommonModule, TdCopyCodeButtonComponent],
+})
+export class TdHighlightComponent implements AfterViewInit, AfterViewChecked {
+  private _initialized = false;
+
+  private _content!: string;
+  private _lang = 'typescript';
+
+  private _showRaw = false;
+
+  /**
+   * content?: string
+   *
+   * Code content to be parsed as highlighted html.
+   * Used to load data dynamically.
+   *
+   * e.g. `.html`, `.ts` , etc.
+   */
+  @Input()
+  set content(content: string) {
+    this._content = content;
+    if (this._initialized) {
+      this._loadContent(this._content);
+    }
+  }
+
+  /**
+   * copyCodeToClipboard?: boolean
+   *
+   * Display copy button on code snippets to copy code to clipboard.
+   */
+  @Input() copyCodeToClipboard? = false;
+
+  /**
+   * copyCodeTooltips?: ICopyCodeTooltips
+   *
+   * Tooltips for copy button to copy and upon copying.
+   */
+  @Input() copyCodeTooltips?: ICopyCodeTooltips = {};
+
+  /**
+   * toggleRawButton?: boolean
+   *
+   * Display button to toggle raw code.
+   */
+  @Input() toggleRawButton = false;
+
+  /**
+   * rawToggleLabels?: IRawToggleLabels
+   *
+   * Labels for raw toggle button.
+   */
+  @Input() rawToggleLabels?: IRawToggleLabels = {};
+
+  /**
+   * lang?: string
+   *
+   * Language of the code content to be parsed as highlighted html.
+   * Defaults to `typescript`
+   *
+   * e.g. `typescript`, `html` , etc.
+   */
+
+  @Input()
+  set codeLang(lang: string) {
+    this.setLanguage(lang);
+  }
+  /** @deprecated - removed completely @4.0.0 */
+  @Input()
+  set lang(lang: string) {
+    // tslint:disable-next-line: no-console
+    console.warn(
+      'DEPRECATION WARNING: switch to codeLang attribute as lang attribute is deprecated.'
+    );
+    this.setLanguage(lang);
+  }
+
+  copyContent!: string;
+
+  /**
+   * contentReady?: function
+   * Event emitted after the highlight content rendering is finished.
+   */
+  @Output() contentReady: EventEmitter<void> = new EventEmitter<void>();
+  @ViewChild('highlightComponent') highlightComp!: ElementRef;
+  @ViewChild('copyComponent') copyComp!: ElementRef;
+
+  @ViewChild('tooltip') tooltip!: MatTooltip;
+
+  constructor(
+    private _renderer: Renderer2,
+    private _elementRef: ElementRef,
+    private _domSanitizer: DomSanitizer,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  ngAfterViewChecked(): void {
+    this.cdr.detectChanges();
+  }
+
+  ngAfterViewInit(): void {
+    if (!this._content) {
+      this._content =
+        (<HTMLElement>this.highlightComp.nativeElement).textContent || '';
+    }
+    this._loadContent(this._content);
+
+    this._initialized = true;
+  }
+
+  setLanguage(lang: string): void {
+    if (!lang) {
+      throw new Error(
+        'Error: language attribute must be defined in TdHighlightComponent.'
+      );
+    }
+    this._lang = lang;
+    if (this._initialized) {
+      this._loadContent(this._content);
+    }
+  }
+
+  toggleRawClicked(): void {
+    this._showRaw = !this._showRaw;
+    this._elementRef.nativeElement.querySelector('pre').style.display = this
+      ._showRaw
+      ? 'none'
+      : 'block';
+    this._elementRef.nativeElement.querySelector('.raw').style.display = this
+      ._showRaw
+      ? 'block'
+      : 'none';
+  }
+
+  /**
+   * General method to parse a string of code into HTML Elements and load them into the container
+   */
+  private _loadContent(code: string | null): void {
+    if (code && code.trim().length > 0) {
+      // Clean container
+      this._renderer.setProperty(
+        this._elementRef.nativeElement,
+        'innerHTML',
+        ''
+      );
+
+      this._elementFromString(code);
+
+      if (this.copyCodeToClipboard) {
+        this._renderer.appendChild(
+          this._elementRef.nativeElement,
+          this.copyComp.nativeElement
+        );
+      }
+    }
+    this.contentReady.emit();
+  }
+
+  private _elementFromString(codeStr: string): void {
+    // Renderer2 doesnt have a parsing method, so we have to sanitize and use [innerHTML]
+    // to parse the string into DOM element for now.
+    const preElement: HTMLPreElement = this._renderer.createElement('pre');
+    this._renderer.appendChild(this._elementRef.nativeElement, preElement);
+    const codeElement: HTMLElement = this._renderer.createElement('code');
+    this._renderer.appendChild(preElement, codeElement);
+    // Set .highlight class into <code> element
+    this._renderer.addClass(codeElement, 'highlight');
+
+    const highlightedCode = this._render(codeStr);
+
+    codeElement.innerHTML =
+      this._domSanitizer.sanitize(SecurityContext.HTML, highlightedCode) ?? '';
+
+    if (this.toggleRawButton) {
+      const divElement: HTMLDivElement = this._renderer.createElement('div');
+      divElement.className = 'raw';
+      this._renderer.appendChild(this._elementRef.nativeElement, divElement);
+      divElement.innerHTML =
+        this._domSanitizer.sanitize(SecurityContext.HTML, codeStr) ?? '';
+      this._renderer.setStyle(divElement, 'display', 'none');
+    }
+  }
+
+  private _render(contents: string): string {
+    // Trim leading and trailing newlines
+    contents = contents
+      .replace(/^(\s|\t)*\n+/g, '')
+      .replace(/(\s|\t)*\n+(\s|\t)*$/g, '');
+    // Split markup by line characters
+    let lines: string[] = contents.split('\n');
+
+    // check how much indentation is used by the first actual code line
+    const firstLineWhitespaceMatch = lines[0].match(/^(\s|\t)*/);
+    const firstLineWhitespace = firstLineWhitespaceMatch
+      ? firstLineWhitespaceMatch[0]
+      : null;
+
+    // Remove all indentation spaces so code can be parsed correctly
+    const startingWhitespaceRegex = new RegExp('^' + firstLineWhitespace);
+    lines = lines.map(function (line: string): string {
+      return line
+        .replace('=""', '') // remove empty values
+        .replace(startingWhitespaceRegex, '')
+        .replace(/\s+$/, ''); // remove trailing white spaces
+    });
+
+    const codeToParse: string = lines
+      .join('\n')
+      .replace(/\{ \{/gi, '{{')
+      .replace(/\} \}/gi, '}}')
+      .replace(/&lt;/gi, '<')
+      .replace(/&gt;/gi, '>'); // replace with < and > to render HTML in Angular
+    this.copyContent = codeToParse;
+    // Parse code with highlight.js depending on language
+    const highlightedCode: HighlightResult = hljs.highlight(codeToParse, {
+      language: this._lang,
+      ignoreIllegals: true,
+    });
+    highlightedCode.value = highlightedCode.value
+      .replace(/=<span class="hljs-value">""<\/span>/gi, '')
+      .replace('<head>', '')
+      .replace('<head/>', '');
+    return highlightedCode.value;
+  }
+}

package/src/lib/highlight.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { TdHighlightComponent } from './highlight.component';
+import { TdCopyCodeButtonComponent } from './copy-code-button/copy-code-button.component';
+
+/**
+ * @deprecated This module is deprecated and will be removed in future versions.
+ * Please migrate to using standalone components as soon as possible.
+ */
+@NgModule({
+  imports: [TdHighlightComponent, TdCopyCodeButtonComponent],
+  exports: [TdHighlightComponent],
+})
+export class CovalentHighlightModule {}

package/src/public_api.ts

@@ -0,0 +1,3 @@
+export * from './lib/highlight.component';
+export * from './lib/highlight.module';
+export * from './lib/copy-code-button/copy-code-button.component';

package/src/test-setup.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

package/tailwind.config.js

@@ -0,0 +1,13 @@
+const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
+const { join } = require('path');
+
+module.exports = {
+  content: [
+    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.lib.prod.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "angularCompilerOptions": {
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

package/tsconfig.lib.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts"],
+  "include": ["**/*.ts"]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "full"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]
+}