@covalent/highlight 4.16.0-beta.1 → 4.16.0

package/fesm2020/covalent-highlight.mjs

@@ -1,17 +1,19 @@
 import * as i0 from '@angular/core';
-import { Component, Input, ViewChild, HostListener, EventEmitter, SecurityContext, Output, NgModule } from '@angular/core';
+import { EventEmitter, Component, Input, Output, ViewChild, HostListener, SecurityContext, NgModule } from '@angular/core';
 import * as i1$1 from '@angular/platform-browser';
-import * as i3 from '@angular/material/tooltip';
+import * as i6 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import hljs from 'highlight.js';
-import * as i2$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i1 from '@angular/cdk/clipboard';
-import { ClipboardModule } from '@angular/cdk/clipboard';
+import * as i1 from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i4 from '@angular/material/button';
+import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i5 from '@angular/cdk/clipboard';
+import { ClipboardModule } from '@angular/cdk/clipboard';
 
 class TdCopyCodeButtonComponent {
     constructor() {
@@ -22,6 +24,10 @@ class TdCopyCodeButtonComponent {
          * Tooltips for copy button to copy and upon copying.
          */
         this.copyCodeTooltips = {};
+        this.toggleRawButton = false;
+        this.rawToggleLabels = {};
+        this.rawToggle = false;
+        this.toggleRaw = new EventEmitter();
     }
     get copyTooltip() {
         return (this.copyCodeTooltips && this.copyCodeTooltips.copy) || 'Copy';
@@ -29,6 +35,14 @@ class TdCopyCodeButtonComponent {
     get copiedTooltip() {
         return (this.copyCodeTooltips && this.copyCodeTooltips.copied) || 'Copied';
     }
+    get rawToggleText() {
+        if (this.rawToggle) {
+            return this.rawToggleLabels?.viewCode || 'View code';
+        }
+        else {
+            return this.rawToggleLabels?.viewRaw || 'Raw';
+        }
+    }
     textCopied(event) {
         if (event) {
             this.tooltip.hide();
@@ -41,18 +55,39 @@ class TdCopyCodeButtonComponent {
             this.tooltip.message = this.copyTooltip;
         }, 200);
     }
+    toggleRawClicked() {
+        this.rawToggle = !this.rawToggle;
+        this.toggleRaw.emit();
+        this.rawButton.checked = false;
+    }
+    copyClicked() {
+        console.log('copyClicked');
+        this.copyButton.checked = false;
+    }
 }
-TdCopyCodeButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TdCopyCodeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TdCopyCodeButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TdCopyCodeButtonComponent, selector: "td-copy-code-button", inputs: { copiedContent: "copiedContent", copyCodeToClipboard: "copyCodeToClipboard", copyCodeTooltips: "copyCodeTooltips" }, host: { listeners: { "mouseleave": "initializeTooltip()" } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: "<button\n  mat-icon-button\n  [cdkCopyToClipboard]=\"copiedContent\"\n  class=\"copy-button\"\n  [matTooltip]=\"copyTooltip\"\n  #tooltip=\"matTooltip\"\n  (cdkCopyToClipboardCopied)=\"textCopied($event)\"\n>\n  <mat-icon role=\"img\">content_copy</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TdCopyCodeButtonComponent, decorators: [{
+TdCopyCodeButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdCopyCodeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TdCopyCodeButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdCopyCodeButtonComponent, selector: "td-copy-code-button", inputs: { copiedContent: "copiedContent", copyCodeToClipboard: "copyCodeToClipboard", copyCodeTooltips: "copyCodeTooltips", toggleRawButton: "toggleRawButton", rawToggleLabels: "rawToggleLabels" }, outputs: { toggleRaw: "toggleRaw" }, host: { listeners: { "mouseleave": "initializeTooltip()" } }, viewQueries: [{ propertyName: "copyButton", first: true, predicate: ["copyButton"], descendants: true }, { propertyName: "rawButton", first: true, predicate: ["rawButton"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: "<mat-button-toggle-group\n  multiple\n  class=\"raw-and-copy-buttons\"\n  *ngIf=\"toggleRawButton; else button\"\n>\n  <mat-button-toggle (click)=\"toggleRawClicked()\" #rawButton>{{\n    rawToggleText\n  }}</mat-button-toggle>\n  <mat-button-toggle\n    [cdkCopyToClipboard]=\"copiedContent\"\n    [matTooltip]=\"copyTooltip\"\n    #tooltip=\"matTooltip\"\n    #copyButton\n    (click)=\"copyClicked()\"\n    (cdkCopyToClipboardCopied)=\"textCopied($event)\"\n  >\n    <mat-icon width>content_copy</mat-icon>\n  </mat-button-toggle>\n</mat-button-toggle-group>\n\n<ng-template #button>\n  <button\n    mat-icon-button\n    [cdkCopyToClipboard]=\"copiedContent\"\n    class=\"copy-button\"\n    [matTooltip]=\"copyTooltip\"\n    #tooltip=\"matTooltip\"\n    (cdkCopyToClipboardCopied)=\"textCopied($event)\"\n  >\n    <mat-icon role=\"img\">content_copy</mat-icon>\n  </button>\n</ng-template>\n", styles: ["mat-button-toggle-group.raw-and-copy-buttons{margin-top:-8px;margin-right:-8px;margin-left:8px}mat-button-toggle-group.raw-and-copy-buttons ::ng-deep .mat-button-toggle-label-content{font-size:12px;line-height:28px}mat-button-toggle-group.raw-and-copy-buttons ::ng-deep .mat-button-toggle-label-content mat-icon{width:16px;height:16px;font-size:16px}\n"], components: [{ type: i1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i5.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdCopyCodeButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'td-copy-code-button', template: "<button\n  mat-icon-button\n  [cdkCopyToClipboard]=\"copiedContent\"\n  class=\"copy-button\"\n  [matTooltip]=\"copyTooltip\"\n  #tooltip=\"matTooltip\"\n  (cdkCopyToClipboardCopied)=\"textCopied($event)\"\n>\n  <mat-icon role=\"img\">content_copy</mat-icon>\n</button>\n" }]
+            args: [{ selector: 'td-copy-code-button', template: "<mat-button-toggle-group\n  multiple\n  class=\"raw-and-copy-buttons\"\n  *ngIf=\"toggleRawButton; else button\"\n>\n  <mat-button-toggle (click)=\"toggleRawClicked()\" #rawButton>{{\n    rawToggleText\n  }}</mat-button-toggle>\n  <mat-button-toggle\n    [cdkCopyToClipboard]=\"copiedContent\"\n    [matTooltip]=\"copyTooltip\"\n    #tooltip=\"matTooltip\"\n    #copyButton\n    (click)=\"copyClicked()\"\n    (cdkCopyToClipboardCopied)=\"textCopied($event)\"\n  >\n    <mat-icon width>content_copy</mat-icon>\n  </mat-button-toggle>\n</mat-button-toggle-group>\n\n<ng-template #button>\n  <button\n    mat-icon-button\n    [cdkCopyToClipboard]=\"copiedContent\"\n    class=\"copy-button\"\n    [matTooltip]=\"copyTooltip\"\n    #tooltip=\"matTooltip\"\n    (cdkCopyToClipboardCopied)=\"textCopied($event)\"\n  >\n    <mat-icon role=\"img\">content_copy</mat-icon>\n  </button>\n</ng-template>\n", styles: ["mat-button-toggle-group.raw-and-copy-buttons{margin-top:-8px;margin-right:-8px;margin-left:8px}mat-button-toggle-group.raw-and-copy-buttons ::ng-deep .mat-button-toggle-label-content{font-size:12px;line-height:28px}mat-button-toggle-group.raw-and-copy-buttons ::ng-deep .mat-button-toggle-label-content mat-icon{width:16px;height:16px;font-size:16px}\n"] }]
         }], propDecorators: { copiedContent: [{
                 type: Input
             }], copyCodeToClipboard: [{
                 type: Input
             }], copyCodeTooltips: [{
                 type: Input
+            }], toggleRawButton: [{
+                type: Input
+            }], rawToggleLabels: [{
+                type: Input
+            }], toggleRaw: [{
+                type: Output
+            }], copyButton: [{
+                type: ViewChild,
+                args: ['copyButton']
+            }], rawButton: [{
+                type: ViewChild,
+                args: ['rawButton']
             }], tooltip: [{
                 type: ViewChild,
                 args: ['tooltip']
@@ -69,6 +104,7 @@ class TdHighlightComponent {
         this.cdr = cdr;
         this._initialized = false;
         this._lang = 'typescript';
+        this._showRaw = false;
         /**
          * copyCodeToClipboard?: boolean
          *
@@ -81,6 +117,18 @@ class TdHighlightComponent {
          * Tooltips for copy button to copy and upon copying.
          */
         this.copyCodeTooltips = {};
+        /**
+         * toggleRawButton?: boolean
+         *
+         * Display button to toggle raw code.
+         */
+        this.toggleRawButton = false;
+        /**
+         * rawToggleLabels?: IRawToggleLabels
+         *
+         * Labels for raw toggle button.
+         */
+        this.rawToggleLabels = {};
         /**
          * contentReady?: function
          * Event emitted after the highlight content rendering is finished.
@@ -97,6 +145,7 @@ class TdHighlightComponent {
      */
     set content(content) {
         this._content = content;
+        console.log(this._content);
         if (this._initialized) {
             this._loadContent(this._content);
         }
@@ -123,11 +172,10 @@ class TdHighlightComponent {
     }
     ngAfterViewInit() {
         if (!this._content) {
-            this._loadContent(this.highlightComp.nativeElement.textContent);
-        }
-        else {
-            this._loadContent(this._content);
+            this._content =
+                this.highlightComp.nativeElement.textContent || '';
         }
+        this._loadContent(this._content);
         this._initialized = true;
     }
     setLanguage(lang) {
@@ -139,6 +187,17 @@ class TdHighlightComponent {
             this._loadContent(this._content);
         }
     }
+    toggleRawClicked() {
+        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
      */
@@ -146,8 +205,7 @@ class TdHighlightComponent {
         if (code && code.trim().length > 0) {
             // Clean container
             this._renderer.setProperty(this._elementRef.nativeElement, 'innerHTML', '');
-            // Parse html string into actual HTML elements.
-            this._elementFromString(this._render(code));
+            this._elementFromString(code);
             if (this.copyCodeToClipboard) {
                 this._renderer.appendChild(this._elementRef.nativeElement, this.copyComp.nativeElement);
             }
@@ -163,9 +221,17 @@ class TdHighlightComponent {
         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, codeStr) ?? '';
-        return preElement;
+            this._domSanitizer.sanitize(SecurityContext.HTML, highlightedCode) ?? '';
+        if (this.toggleRawButton) {
+            const divElement = 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');
+        }
     }
     _render(contents) {
         // Trim leading and trailing newlines
@@ -203,17 +269,21 @@ class TdHighlightComponent {
         return highlightedCode.value;
     }
 }
-TdHighlightComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TdHighlightComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1$1.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TdHighlightComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TdHighlightComponent, selector: "td-highlight", inputs: { content: "content", copyCodeToClipboard: "copyCodeToClipboard", copyCodeTooltips: "copyCodeTooltips", codeLang: "codeLang", lang: "lang" }, outputs: { contentReady: "contentReady" }, viewQueries: [{ propertyName: "highlightComp", first: true, predicate: ["highlightComponent"], descendants: true }, { propertyName: "copyComp", first: true, predicate: ["copyComponent"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: "<div>\n  <div #highlightComponent>\n    <ng-content></ng-content>\n  </div>\n\n  <div #copyComponent *ngIf=\"copyCodeToClipboard\">\n    <td-copy-code-button\n      [copiedContent]=\"copyContent\"\n      [copyCodeToClipboard]=\"copyCodeToClipboard\"\n      [copyCodeTooltips]=\"copyCodeTooltips\"\n    ></td-copy-code-button>\n  </div>\n</div>\n", styles: [":host ::ng-deep{overflow-x:auto;padding:16px;display:flex}:host ::ng-deep pre,:host ::ng-deep code,:host ::ng-deep .highlight{font-family:Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace}:host ::ng-deep pre{display:block;overflow-x:auto;padding:0;margin:0;background:transparent;font-family:Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;line-height:1.45;tab-size:2;-webkit-font-smoothing:auto;-webkit-text-size-adjust:none;text-size-adjust:none;position:relative;border-radius:2px;font-size:.8rem;width:100%}:host ::ng-deep code{margin:0;padding:0;overflow-wrap:break-word;white-space:pre-wrap}:host ::ng-deep .highlight{display:block;overflow-wrap:break-word;line-height:1.5;margin:0}:host ::ng-deep .copy-button{border:none;background:inherit;margin-top:-8px;margin-right:-8px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TdCopyCodeButtonComponent, selector: "td-copy-code-button", inputs: ["copiedContent", "copyCodeToClipboard", "copyCodeTooltips"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TdHighlightComponent, decorators: [{
+TdHighlightComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdHighlightComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1$1.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TdHighlightComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdHighlightComponent, selector: "td-highlight", inputs: { content: "content", copyCodeToClipboard: "copyCodeToClipboard", copyCodeTooltips: "copyCodeTooltips", toggleRawButton: "toggleRawButton", rawToggleLabels: "rawToggleLabels", codeLang: "codeLang", lang: "lang" }, outputs: { contentReady: "contentReady" }, viewQueries: [{ propertyName: "highlightComp", first: true, predicate: ["highlightComponent"], descendants: true }, { propertyName: "copyComp", first: true, predicate: ["copyComponent"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: "<div>\n  <div #highlightComponent>\n    <ng-content></ng-content>\n  </div>\n\n  <div #copyComponent *ngIf=\"copyCodeToClipboard\">\n    <td-copy-code-button\n      [toggleRawButton]=\"toggleRawButton\"\n      [rawToggleLabels]=\"rawToggleLabels\"\n      (toggleRaw)=\"toggleRawClicked()\"\n      [copiedContent]=\"copyContent\"\n      [copyCodeToClipboard]=\"copyCodeToClipboard\"\n      [copyCodeTooltips]=\"copyCodeTooltips\"\n    ></td-copy-code-button>\n  </div>\n</div>\n", styles: [":host ::ng-deep{overflow-x:auto;padding:16px;display:flex;position:relative}:host ::ng-deep pre,:host ::ng-deep code,:host ::ng-deep .highlight{font-family:Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace}:host ::ng-deep pre{display:block;overflow-x:auto;padding:0;margin:0;background:transparent;font-family:Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;line-height:1.45;tab-size:2;-webkit-font-smoothing:auto;-webkit-text-size-adjust:none;text-size-adjust:none;position:relative;border-radius:2px;font-size:.8rem;width:100%}:host ::ng-deep code{margin:0;padding:0;overflow-wrap:break-word;white-space:pre-wrap}:host ::ng-deep div.raw{flex-grow:1}:host ::ng-deep .highlight{display:block;overflow-wrap:break-word;line-height:1.5;margin:0}:host ::ng-deep .copy-button{border:none;background:inherit;margin-top:-8px;margin-right:-8px}\n"], components: [{ type: TdCopyCodeButtonComponent, selector: "td-copy-code-button", inputs: ["copiedContent", "copyCodeToClipboard", "copyCodeTooltips", "toggleRawButton", "rawToggleLabels"], outputs: ["toggleRaw"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdHighlightComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'td-highlight', template: "<div>\n  <div #highlightComponent>\n    <ng-content></ng-content>\n  </div>\n\n  <div #copyComponent *ngIf=\"copyCodeToClipboard\">\n    <td-copy-code-button\n      [copiedContent]=\"copyContent\"\n      [copyCodeToClipboard]=\"copyCodeToClipboard\"\n      [copyCodeTooltips]=\"copyCodeTooltips\"\n    ></td-copy-code-button>\n  </div>\n</div>\n", styles: [":host ::ng-deep{overflow-x:auto;padding:16px;display:flex}:host ::ng-deep pre,:host ::ng-deep code,:host ::ng-deep .highlight{font-family:Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace}:host ::ng-deep pre{display:block;overflow-x:auto;padding:0;margin:0;background:transparent;font-family:Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;line-height:1.45;tab-size:2;-webkit-font-smoothing:auto;-webkit-text-size-adjust:none;text-size-adjust:none;position:relative;border-radius:2px;font-size:.8rem;width:100%}:host ::ng-deep code{margin:0;padding:0;overflow-wrap:break-word;white-space:pre-wrap}:host ::ng-deep .highlight{display:block;overflow-wrap:break-word;line-height:1.5;margin:0}:host ::ng-deep .copy-button{border:none;background:inherit;margin-top:-8px;margin-right:-8px}\n"] }]
+            args: [{ selector: 'td-highlight', template: "<div>\n  <div #highlightComponent>\n    <ng-content></ng-content>\n  </div>\n\n  <div #copyComponent *ngIf=\"copyCodeToClipboard\">\n    <td-copy-code-button\n      [toggleRawButton]=\"toggleRawButton\"\n      [rawToggleLabels]=\"rawToggleLabels\"\n      (toggleRaw)=\"toggleRawClicked()\"\n      [copiedContent]=\"copyContent\"\n      [copyCodeToClipboard]=\"copyCodeToClipboard\"\n      [copyCodeTooltips]=\"copyCodeTooltips\"\n    ></td-copy-code-button>\n  </div>\n</div>\n", styles: [":host ::ng-deep{overflow-x:auto;padding:16px;display:flex;position:relative}:host ::ng-deep pre,:host ::ng-deep code,:host ::ng-deep .highlight{font-family:Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace}:host ::ng-deep pre{display:block;overflow-x:auto;padding:0;margin:0;background:transparent;font-family:Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;line-height:1.45;tab-size:2;-webkit-font-smoothing:auto;-webkit-text-size-adjust:none;text-size-adjust:none;position:relative;border-radius:2px;font-size:.8rem;width:100%}:host ::ng-deep code{margin:0;padding:0;overflow-wrap:break-word;white-space:pre-wrap}:host ::ng-deep div.raw{flex-grow:1}:host ::ng-deep .highlight{display:block;overflow-wrap:break-word;line-height:1.5;margin:0}:host ::ng-deep .copy-button{border:none;background:inherit;margin-top:-8px;margin-right:-8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1$1.DomSanitizer }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { content: [{
                 type: Input
             }], copyCodeToClipboard: [{
                 type: Input
             }], copyCodeTooltips: [{
                 type: Input
+            }], toggleRawButton: [{
+                type: Input
+            }], rawToggleLabels: [{
+                type: Input
             }], codeLang: [{
                 type: Input
             }], lang: [{
@@ -233,24 +303,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 
 class CovalentHighlightModule {
 }
-CovalentHighlightModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CovalentHighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CovalentHighlightModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: CovalentHighlightModule, declarations: [TdHighlightComponent, TdCopyCodeButtonComponent], imports: [CommonModule,
+CovalentHighlightModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentHighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CovalentHighlightModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentHighlightModule, declarations: [TdHighlightComponent, TdCopyCodeButtonComponent], imports: [CommonModule,
         ClipboardModule,
         MatIconModule,
+        MatButtonToggleModule,
+        MatButtonModule,
         MatTooltipModule,
         MatButtonModule], exports: [TdHighlightComponent] });
-CovalentHighlightModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CovalentHighlightModule, imports: [CommonModule,
-        ClipboardModule,
-        MatIconModule,
-        MatTooltipModule,
-        MatButtonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CovalentHighlightModule, decorators: [{
+CovalentHighlightModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentHighlightModule, imports: [[
+            CommonModule,
+            ClipboardModule,
+            MatIconModule,
+            MatButtonToggleModule,
+            MatButtonModule,
+            MatTooltipModule,
+            MatButtonModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentHighlightModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
                         ClipboardModule,
                         MatIconModule,
+                        MatButtonToggleModule,
+                        MatButtonModule,
                         MatTooltipModule,
                         MatButtonModule,
                     ],

package/fesm2020/covalent-highlight.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"covalent-highlight.mjs","sources":["../../../../libs/angular-highlight/src/lib/copy-code-button/copy-code-button.component.ts","../../../../libs/angular-highlight/src/lib/copy-code-button/copy-code-button.component.html","../../../../libs/angular-highlight/src/lib/highlight.component.ts","../../../../libs/angular-highlight/src/lib/highlight.component.html","../../../../libs/angular-highlight/src/lib/highlight.module.ts","../../../../libs/angular-highlight/src/covalent-highlight.ts"],"sourcesContent":["import { Component, Input, ViewChild, HostListener } from '@angular/core';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nexport interface ICopyCodeTooltips {\n  copy?: string;\n  copied?: string;\n}\n\n@Component({\n  selector: 'td-copy-code-button',\n  templateUrl: './copy-code-button.component.html',\n  styleUrls: ['./copy-code-button.component.scss'],\n})\nexport class TdCopyCodeButtonComponent {\n  // private _copyCodeTooltips: ICopyCodeTooltips = {};\n  @Input() copiedContent!: string;\n  @Input() copyCodeToClipboard = false;\n  /**\n   * copyCodeTooltips?: ICopyCodeTooltips\n   *\n   * Tooltips for copy button to copy and upon copying.\n   */\n  @Input() copyCodeTooltips?: ICopyCodeTooltips = {};\n\n  get copyTooltip(): string {\n    return (this.copyCodeTooltips && this.copyCodeTooltips.copy) || 'Copy';\n  }\n\n  get copiedTooltip(): string {\n    return (this.copyCodeTooltips && this.copyCodeTooltips.copied) || 'Copied';\n  }\n\n  @ViewChild('tooltip') tooltip!: MatTooltip;\n\n  textCopied(event: boolean): void {\n    if (event) {\n      this.tooltip.hide();\n      this.tooltip.message = this.copiedTooltip;\n      this.tooltip.show();\n    }\n  }\n  @HostListener('mouseleave')\n  initializeTooltip(): void {\n    setTimeout(() => {\n      this.tooltip.message = this.copyTooltip;\n    }, 200);\n  }\n}\n","<button\n  mat-icon-button\n  [cdkCopyToClipboard]=\"copiedContent\"\n  class=\"copy-button\"\n  [matTooltip]=\"copyTooltip\"\n  #tooltip=\"matTooltip\"\n  (cdkCopyToClipboardCopied)=\"textCopied($event)\"\n>\n  <mat-icon role=\"img\">content_copy</mat-icon>\n</button>\n","import {\n  Component,\n  AfterViewInit,\n  ElementRef,\n  Input,\n  Output,\n  EventEmitter,\n  Renderer2,\n  SecurityContext,\n  ViewChild,\n  ChangeDetectorRef,\n  AfterViewChecked,\n} from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { ICopyCodeTooltips } from './copy-code-button/copy-code-button.component';\n\nimport hljs from 'highlight.js';\n\n@Component({\n  selector: 'td-highlight',\n  styleUrls: ['./highlight.component.scss'],\n  templateUrl: './highlight.component.html',\n})\nexport class TdHighlightComponent implements AfterViewInit, AfterViewChecked {\n  private _initialized = false;\n\n  private _content!: string;\n  private _lang = 'typescript';\n\n  /**\n   * content?: string\n   *\n   * Code content to be parsed as highlighted html.\n   * Used to load data dynamically.\n   *\n   * e.g. `.html`, `.ts` , etc.\n   */\n  @Input()\n  set content(content: string) {\n    this._content = content;\n    if (this._initialized) {\n      this._loadContent(this._content);\n    }\n  }\n\n  /**\n   * copyCodeToClipboard?: boolean\n   *\n   * Display copy button on code snippets to copy code to clipboard.\n   */\n  @Input() copyCodeToClipboard? = false;\n\n  /**\n   * copyCodeTooltips?: ICopyCodeTooltips\n   *\n   * Tooltips for copy button to copy and upon copying.\n   */\n  @Input() copyCodeTooltips?: ICopyCodeTooltips = {};\n\n  /**\n   * lang?: string\n   *\n   * Language of the code content to be parsed as highlighted html.\n   * Defaults to `typescript`\n   *\n   * e.g. `typescript`, `html` , etc.\n   */\n\n  @Input()\n  set codeLang(lang: string) {\n    this.setLanguage(lang);\n  }\n  /** @deprecated - removed completely @4.0.0 */\n  @Input()\n  set lang(lang: string) {\n    // tslint:disable-next-line: no-console\n    console.warn(\n      'DEPRECATION WARNING: switch to codeLang attribute as lang attribute is deprecated.'\n    );\n    this.setLanguage(lang);\n  }\n\n  copyContent!: string;\n\n  /**\n   * contentReady?: function\n   * Event emitted after the highlight content rendering is finished.\n   */\n  @Output() contentReady: EventEmitter<void> = new EventEmitter<void>();\n  @ViewChild('highlightComponent') highlightComp!: ElementRef;\n  @ViewChild('copyComponent') copyComp!: ElementRef;\n\n  @ViewChild('tooltip') tooltip!: MatTooltip;\n\n  constructor(\n    private _renderer: Renderer2,\n    private _elementRef: ElementRef,\n    private _domSanitizer: DomSanitizer,\n    private cdr: ChangeDetectorRef\n  ) {}\n\n  ngAfterViewChecked(): void {\n    this.cdr.detectChanges();\n  }\n\n  ngAfterViewInit(): void {\n    if (!this._content) {\n      this._loadContent(\n        (<HTMLElement>this.highlightComp.nativeElement).textContent\n      );\n    } else {\n      this._loadContent(this._content);\n    }\n    this._initialized = true;\n  }\n\n  setLanguage(lang: string): void {\n    if (!lang) {\n      throw new Error(\n        'Error: language attribute must be defined in TdHighlightComponent.'\n      );\n    }\n    this._lang = lang;\n    if (this._initialized) {\n      this._loadContent(this._content);\n    }\n  }\n\n  /**\n   * General method to parse a string of code into HTML Elements and load them into the container\n   */\n  private _loadContent(code: string | null): void {\n    if (code && code.trim().length > 0) {\n      // Clean container\n      this._renderer.setProperty(\n        this._elementRef.nativeElement,\n        'innerHTML',\n        ''\n      );\n      // Parse html string into actual HTML elements.\n      this._elementFromString(this._render(code));\n      if (this.copyCodeToClipboard) {\n        this._renderer.appendChild(\n          this._elementRef.nativeElement,\n          this.copyComp.nativeElement\n        );\n      }\n    }\n    this.contentReady.emit();\n  }\n\n  private _elementFromString(codeStr: string): HTMLPreElement {\n    // Renderer2 doesnt have a parsing method, so we have to sanitize and use [innerHTML]\n    // to parse the string into DOM element for now.\n    const preElement: HTMLPreElement = this._renderer.createElement('pre');\n    this._renderer.appendChild(this._elementRef.nativeElement, preElement);\n    const codeElement: HTMLElement = this._renderer.createElement('code');\n    this._renderer.appendChild(preElement, codeElement);\n    // Set .highlight class into <code> element\n    this._renderer.addClass(codeElement, 'highlight');\n    codeElement.innerHTML =\n      this._domSanitizer.sanitize(SecurityContext.HTML, codeStr) ?? '';\n    return preElement;\n  }\n\n  private _render(contents: string): string {\n    // Trim leading and trailing newlines\n    contents = contents\n      .replace(/^(\\s|\\t)*\\n+/g, '')\n      .replace(/(\\s|\\t)*\\n+(\\s|\\t)*$/g, '');\n    // Split markup by line characters\n    let lines: string[] = contents.split('\\n');\n\n    // check how much indentation is used by the first actual code line\n    const firstLineWhitespaceMatch = lines[0].match(/^(\\s|\\t)*/);\n    const firstLineWhitespace = firstLineWhitespaceMatch\n      ? firstLineWhitespaceMatch[0]\n      : null;\n\n    // Remove all indentation spaces so code can be parsed correctly\n    const startingWhitespaceRegex = new RegExp('^' + firstLineWhitespace);\n    lines = lines.map(function (line: string): string {\n      return line\n        .replace('=\"\"', '') // remove empty values\n        .replace(startingWhitespaceRegex, '')\n        .replace(/\\s+$/, ''); // remove trailing white spaces\n    });\n\n    const codeToParse: string = lines\n      .join('\\n')\n      .replace(/\\{ \\{/gi, '{{')\n      .replace(/\\} \\}/gi, '}}')\n      .replace(/&lt;/gi, '<')\n      .replace(/&gt;/gi, '>'); // replace with < and > to render HTML in Angular\n    this.copyContent = codeToParse;\n    // Parse code with highlight.js depending on language\n    const highlightedCode: any = hljs.highlight(this._lang, codeToParse, true);\n    highlightedCode.value = highlightedCode.value\n      .replace(/=<span class=\"hljs-value\">\"\"<\\/span>/gi, '')\n      .replace('<head>', '')\n      .replace('<head/>', '');\n    return highlightedCode.value;\n  }\n}\n","<div>\n  <div #highlightComponent>\n    <ng-content></ng-content>\n  </div>\n\n  <div #copyComponent *ngIf=\"copyCodeToClipboard\">\n    <td-copy-code-button\n      [copiedContent]=\"copyContent\"\n      [copyCodeToClipboard]=\"copyCodeToClipboard\"\n      [copyCodeTooltips]=\"copyCodeTooltips\"\n    ></td-copy-code-button>\n  </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ClipboardModule } from '@angular/cdk/clipboard';\nimport { TdHighlightComponent } from './highlight.component';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { MatButtonModule } from '@angular/material/button';\nimport { TdCopyCodeButtonComponent } from './copy-code-button/copy-code-button.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ClipboardModule,\n    MatIconModule,\n    MatTooltipModule,\n    MatButtonModule,\n  ],\n  declarations: [TdHighlightComponent, TdCopyCodeButtonComponent],\n  exports: [TdHighlightComponent],\n})\nexport class CovalentHighlightModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1","i2","i3.TdCopyCodeButtonComponent"],"mappings":"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"}
+{"version":3,"file":"covalent-highlight.mjs","sources":["../../../../libs/angular-highlight/src/lib/copy-code-button/copy-code-button.component.ts","../../../../libs/angular-highlight/src/lib/copy-code-button/copy-code-button.component.html","../../../../libs/angular-highlight/src/lib/highlight.component.ts","../../../../libs/angular-highlight/src/lib/highlight.component.html","../../../../libs/angular-highlight/src/lib/highlight.module.ts","../../../../libs/angular-highlight/src/covalent-highlight.ts"],"sourcesContent":["import {\n  Component,\n  Input,\n  ViewChild,\n  HostListener,\n  EventEmitter,\n  Output,\n} from '@angular/core';\nimport { MatButtonToggle } from '@angular/material/button-toggle';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nexport interface ICopyCodeTooltips {\n  copy?: string;\n  copied?: string;\n}\n\nexport interface IRawToggleLabels {\n  viewRaw?: string;\n  viewCode?: string;\n}\n\n@Component({\n  selector: 'td-copy-code-button',\n  templateUrl: './copy-code-button.component.html',\n  styleUrls: ['./copy-code-button.component.scss'],\n})\nexport class TdCopyCodeButtonComponent {\n  // private _copyCodeTooltips: ICopyCodeTooltips = {};\n  @Input() copiedContent!: string;\n  @Input() copyCodeToClipboard = false;\n  /**\n   * copyCodeTooltips?: ICopyCodeTooltips\n   *\n   * Tooltips for copy button to copy and upon copying.\n   */\n  @Input() copyCodeTooltips?: ICopyCodeTooltips = {};\n\n  @Input() toggleRawButton = false;\n  @Input() rawToggleLabels?: IRawToggleLabels = {};\n\n  rawToggle = false;\n\n  @Output() toggleRaw = new EventEmitter<boolean>();\n\n  @ViewChild('copyButton') copyButton!: MatButtonToggle;\n  @ViewChild('rawButton') rawButton!: MatButtonToggle;\n\n  get copyTooltip(): string {\n    return (this.copyCodeTooltips && this.copyCodeTooltips.copy) || 'Copy';\n  }\n\n  get copiedTooltip(): string {\n    return (this.copyCodeTooltips && this.copyCodeTooltips.copied) || 'Copied';\n  }\n\n  get rawToggleText(): string {\n    if (this.rawToggle) {\n      return this.rawToggleLabels?.viewCode || 'View code';\n    } else {\n      return this.rawToggleLabels?.viewRaw || 'Raw';\n    }\n  }\n\n  @ViewChild('tooltip') tooltip!: MatTooltip;\n\n  textCopied(event: boolean): void {\n    if (event) {\n      this.tooltip.hide();\n      this.tooltip.message = this.copiedTooltip;\n      this.tooltip.show();\n    }\n  }\n  @HostListener('mouseleave')\n  initializeTooltip(): void {\n    setTimeout(() => {\n      this.tooltip.message = this.copyTooltip;\n    }, 200);\n  }\n\n  toggleRawClicked(): void {\n    this.rawToggle = !this.rawToggle;\n    this.toggleRaw.emit();\n    this.rawButton.checked = false;\n  }\n\n  copyClicked(): void {\n    console.log('copyClicked');\n    this.copyButton.checked = false;\n  }\n}\n","<mat-button-toggle-group\n  multiple\n  class=\"raw-and-copy-buttons\"\n  *ngIf=\"toggleRawButton; else button\"\n>\n  <mat-button-toggle (click)=\"toggleRawClicked()\" #rawButton>{{\n    rawToggleText\n  }}</mat-button-toggle>\n  <mat-button-toggle\n    [cdkCopyToClipboard]=\"copiedContent\"\n    [matTooltip]=\"copyTooltip\"\n    #tooltip=\"matTooltip\"\n    #copyButton\n    (click)=\"copyClicked()\"\n    (cdkCopyToClipboardCopied)=\"textCopied($event)\"\n  >\n    <mat-icon width>content_copy</mat-icon>\n  </mat-button-toggle>\n</mat-button-toggle-group>\n\n<ng-template #button>\n  <button\n    mat-icon-button\n    [cdkCopyToClipboard]=\"copiedContent\"\n    class=\"copy-button\"\n    [matTooltip]=\"copyTooltip\"\n    #tooltip=\"matTooltip\"\n    (cdkCopyToClipboardCopied)=\"textCopied($event)\"\n  >\n    <mat-icon role=\"img\">content_copy</mat-icon>\n  </button>\n</ng-template>\n","import {\n  Component,\n  AfterViewInit,\n  ElementRef,\n  Input,\n  Output,\n  EventEmitter,\n  Renderer2,\n  SecurityContext,\n  ViewChild,\n  ChangeDetectorRef,\n  AfterViewChecked,\n} from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport {\n  ICopyCodeTooltips,\n  IRawToggleLabels,\n} from './copy-code-button/copy-code-button.component';\n\nimport hljs from 'highlight.js';\n\n@Component({\n  selector: 'td-highlight',\n  styleUrls: ['./highlight.component.scss'],\n  templateUrl: './highlight.component.html',\n})\nexport class TdHighlightComponent implements AfterViewInit, AfterViewChecked {\n  private _initialized = false;\n\n  private _content!: string;\n  private _lang = 'typescript';\n\n  private _showRaw = false;\n\n  /**\n   * content?: string\n   *\n   * Code content to be parsed as highlighted html.\n   * Used to load data dynamically.\n   *\n   * e.g. `.html`, `.ts` , etc.\n   */\n  @Input()\n  set content(content: string) {\n    this._content = content;\n    console.log(this._content);\n    if (this._initialized) {\n      this._loadContent(this._content);\n    }\n  }\n\n  /**\n   * copyCodeToClipboard?: boolean\n   *\n   * Display copy button on code snippets to copy code to clipboard.\n   */\n  @Input() copyCodeToClipboard? = false;\n\n  /**\n   * copyCodeTooltips?: ICopyCodeTooltips\n   *\n   * Tooltips for copy button to copy and upon copying.\n   */\n  @Input() copyCodeTooltips?: ICopyCodeTooltips = {};\n\n  /**\n   * toggleRawButton?: boolean\n   *\n   * Display button to toggle raw code.\n   */\n  @Input() toggleRawButton = false;\n\n  /**\n   * rawToggleLabels?: IRawToggleLabels\n   *\n   * Labels for raw toggle button.\n   */\n  @Input() rawToggleLabels?: IRawToggleLabels = {};\n\n  /**\n   * lang?: string\n   *\n   * Language of the code content to be parsed as highlighted html.\n   * Defaults to `typescript`\n   *\n   * e.g. `typescript`, `html` , etc.\n   */\n\n  @Input()\n  set codeLang(lang: string) {\n    this.setLanguage(lang);\n  }\n  /** @deprecated - removed completely @4.0.0 */\n  @Input()\n  set lang(lang: string) {\n    // tslint:disable-next-line: no-console\n    console.warn(\n      'DEPRECATION WARNING: switch to codeLang attribute as lang attribute is deprecated.'\n    );\n    this.setLanguage(lang);\n  }\n\n  copyContent!: string;\n\n  /**\n   * contentReady?: function\n   * Event emitted after the highlight content rendering is finished.\n   */\n  @Output() contentReady: EventEmitter<void> = new EventEmitter<void>();\n  @ViewChild('highlightComponent') highlightComp!: ElementRef;\n  @ViewChild('copyComponent') copyComp!: ElementRef;\n\n  @ViewChild('tooltip') tooltip!: MatTooltip;\n\n  constructor(\n    private _renderer: Renderer2,\n    private _elementRef: ElementRef,\n    private _domSanitizer: DomSanitizer,\n    private cdr: ChangeDetectorRef\n  ) {}\n\n  ngAfterViewChecked(): void {\n    this.cdr.detectChanges();\n  }\n\n  ngAfterViewInit(): void {\n    if (!this._content) {\n      this._content =\n        (<HTMLElement>this.highlightComp.nativeElement).textContent || '';\n    }\n    this._loadContent(this._content);\n\n    this._initialized = true;\n  }\n\n  setLanguage(lang: string): void {\n    if (!lang) {\n      throw new Error(\n        'Error: language attribute must be defined in TdHighlightComponent.'\n      );\n    }\n    this._lang = lang;\n    if (this._initialized) {\n      this._loadContent(this._content);\n    }\n  }\n\n  toggleRawClicked(): void {\n    this._showRaw = !this._showRaw;\n    this._elementRef.nativeElement.querySelector('pre').style.display = this\n      ._showRaw\n      ? 'none'\n      : 'block';\n    this._elementRef.nativeElement.querySelector('.raw').style.display = this\n      ._showRaw\n      ? 'block'\n      : 'none';\n  }\n\n  /**\n   * General method to parse a string of code into HTML Elements and load them into the container\n   */\n  private _loadContent(code: string | null): void {\n    if (code && code.trim().length > 0) {\n      // Clean container\n      this._renderer.setProperty(\n        this._elementRef.nativeElement,\n        'innerHTML',\n        ''\n      );\n\n      this._elementFromString(code);\n\n      if (this.copyCodeToClipboard) {\n        this._renderer.appendChild(\n          this._elementRef.nativeElement,\n          this.copyComp.nativeElement\n        );\n      }\n    }\n    this.contentReady.emit();\n  }\n\n  private _elementFromString(codeStr: string): void {\n    // Renderer2 doesnt have a parsing method, so we have to sanitize and use [innerHTML]\n    // to parse the string into DOM element for now.\n    const preElement: HTMLPreElement = this._renderer.createElement('pre');\n    this._renderer.appendChild(this._elementRef.nativeElement, preElement);\n    const codeElement: HTMLElement = this._renderer.createElement('code');\n    this._renderer.appendChild(preElement, codeElement);\n    // Set .highlight class into <code> element\n    this._renderer.addClass(codeElement, 'highlight');\n\n    const highlightedCode = this._render(codeStr);\n\n    codeElement.innerHTML =\n      this._domSanitizer.sanitize(SecurityContext.HTML, highlightedCode) ?? '';\n\n    if (this.toggleRawButton) {\n      const divElement: HTMLDivElement = this._renderer.createElement('div');\n      divElement.className = 'raw';\n      this._renderer.appendChild(this._elementRef.nativeElement, divElement);\n      divElement.innerHTML =\n        this._domSanitizer.sanitize(SecurityContext.HTML, codeStr) ?? '';\n      this._renderer.setStyle(divElement, 'display', 'none');\n    }\n  }\n\n  private _render(contents: string): string {\n    // Trim leading and trailing newlines\n    contents = contents\n      .replace(/^(\\s|\\t)*\\n+/g, '')\n      .replace(/(\\s|\\t)*\\n+(\\s|\\t)*$/g, '');\n    // Split markup by line characters\n    let lines: string[] = contents.split('\\n');\n\n    // check how much indentation is used by the first actual code line\n    const firstLineWhitespaceMatch = lines[0].match(/^(\\s|\\t)*/);\n    const firstLineWhitespace = firstLineWhitespaceMatch\n      ? firstLineWhitespaceMatch[0]\n      : null;\n\n    // Remove all indentation spaces so code can be parsed correctly\n    const startingWhitespaceRegex = new RegExp('^' + firstLineWhitespace);\n    lines = lines.map(function (line: string): string {\n      return line\n        .replace('=\"\"', '') // remove empty values\n        .replace(startingWhitespaceRegex, '')\n        .replace(/\\s+$/, ''); // remove trailing white spaces\n    });\n\n    const codeToParse: string = lines\n      .join('\\n')\n      .replace(/\\{ \\{/gi, '{{')\n      .replace(/\\} \\}/gi, '}}')\n      .replace(/&lt;/gi, '<')\n      .replace(/&gt;/gi, '>'); // replace with < and > to render HTML in Angular\n    this.copyContent = codeToParse;\n    // Parse code with highlight.js depending on language\n    const highlightedCode: any = hljs.highlight(this._lang, codeToParse, true);\n    highlightedCode.value = highlightedCode.value\n      .replace(/=<span class=\"hljs-value\">\"\"<\\/span>/gi, '')\n      .replace('<head>', '')\n      .replace('<head/>', '');\n    return highlightedCode.value;\n  }\n}\n","<div>\n  <div #highlightComponent>\n    <ng-content></ng-content>\n  </div>\n\n  <div #copyComponent *ngIf=\"copyCodeToClipboard\">\n    <td-copy-code-button\n      [toggleRawButton]=\"toggleRawButton\"\n      [rawToggleLabels]=\"rawToggleLabels\"\n      (toggleRaw)=\"toggleRawClicked()\"\n      [copiedContent]=\"copyContent\"\n      [copyCodeToClipboard]=\"copyCodeToClipboard\"\n      [copyCodeTooltips]=\"copyCodeTooltips\"\n    ></td-copy-code-button>\n  </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ClipboardModule } from '@angular/cdk/clipboard';\nimport { TdHighlightComponent } from './highlight.component';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatButtonToggleModule } from '@angular/material/button-toggle';\nimport { TdCopyCodeButtonComponent } from './copy-code-button/copy-code-button.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    ClipboardModule,\n    MatIconModule,\n    MatButtonToggleModule,\n    MatButtonModule,\n    MatTooltipModule,\n    MatButtonModule,\n  ],\n  declarations: [TdHighlightComponent, TdCopyCodeButtonComponent],\n  exports: [TdHighlightComponent],\n})\nexport class CovalentHighlightModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1","i2.TdCopyCodeButtonComponent","i3"],"mappings":"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"}

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

@@ -1,9 +1,15 @@
+import { EventEmitter } from '@angular/core';
+import { MatButtonToggle } from '@angular/material/button-toggle';
 import { MatTooltip } from '@angular/material/tooltip';
 import * as i0 from "@angular/core";
 export interface ICopyCodeTooltips {
     copy?: string;
     copied?: string;
 }
+export interface IRawToggleLabels {
+    viewRaw?: string;
+    viewCode?: string;
+}
 export declare class TdCopyCodeButtonComponent {
     copiedContent: string;
     copyCodeToClipboard: boolean;
@@ -13,11 +19,20 @@ export declare class TdCopyCodeButtonComponent {
      * Tooltips for copy button to copy and upon copying.
      */
     copyCodeTooltips?: ICopyCodeTooltips;
+    toggleRawButton: boolean;
+    rawToggleLabels?: IRawToggleLabels;
+    rawToggle: boolean;
+    toggleRaw: EventEmitter<boolean>;
+    copyButton: MatButtonToggle;
+    rawButton: MatButtonToggle;
     get copyTooltip(): string;
     get copiedTooltip(): string;
+    get rawToggleText(): string;
     tooltip: MatTooltip;
     textCopied(event: boolean): void;
     initializeTooltip(): void;
+    toggleRawClicked(): void;
+    copyClicked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdCopyCodeButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TdCopyCodeButtonComponent, "td-copy-code-button", never, { "copiedContent": "copiedContent"; "copyCodeToClipboard": "copyCodeToClipboard"; "copyCodeTooltips": "copyCodeTooltips"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdCopyCodeButtonComponent, "td-copy-code-button", never, { "copiedContent": "copiedContent"; "copyCodeToClipboard": "copyCodeToClipboard"; "copyCodeTooltips": "copyCodeTooltips"; "toggleRawButton": "toggleRawButton"; "rawToggleLabels": "rawToggleLabels"; }, { "toggleRaw": "toggleRaw"; }, never, never>;
 }

package/lib/highlight.component.d.ts

@@ -1,7 +1,7 @@
 import { AfterViewInit, ElementRef, EventEmitter, Renderer2, ChangeDetectorRef, AfterViewChecked } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { MatTooltip } from '@angular/material/tooltip';
-import { ICopyCodeTooltips } from './copy-code-button/copy-code-button.component';
+import { ICopyCodeTooltips, IRawToggleLabels } from './copy-code-button/copy-code-button.component';
 import * as i0 from "@angular/core";
 export declare class TdHighlightComponent implements AfterViewInit, AfterViewChecked {
     private _renderer;
@@ -11,6 +11,7 @@ export declare class TdHighlightComponent implements AfterViewInit, AfterViewChe
     private _initialized;
     private _content;
     private _lang;
+    private _showRaw;
     /**
      * content?: string
      *
@@ -32,6 +33,18 @@ export declare class TdHighlightComponent implements AfterViewInit, AfterViewChe
      * Tooltips for copy button to copy and upon copying.
      */
     copyCodeTooltips?: ICopyCodeTooltips;
+    /**
+     * toggleRawButton?: boolean
+     *
+     * Display button to toggle raw code.
+     */
+    toggleRawButton: boolean;
+    /**
+     * rawToggleLabels?: IRawToggleLabels
+     *
+     * Labels for raw toggle button.
+     */
+    rawToggleLabels?: IRawToggleLabels;
     /**
      * lang?: string
      *
@@ -56,6 +69,7 @@ export declare class TdHighlightComponent implements AfterViewInit, AfterViewChe
     ngAfterViewChecked(): void;
     ngAfterViewInit(): void;
     setLanguage(lang: string): void;
+    toggleRawClicked(): void;
     /**
      * General method to parse a string of code into HTML Elements and load them into the container
      */
@@ -63,5 +77,5 @@ export declare class TdHighlightComponent implements AfterViewInit, AfterViewChe
     private _elementFromString;
     private _render;
     static ɵfac: i0.ɵɵFactoryDeclaration<TdHighlightComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TdHighlightComponent, "td-highlight", never, { "content": "content"; "copyCodeToClipboard": "copyCodeToClipboard"; "copyCodeTooltips": "copyCodeTooltips"; "codeLang": "codeLang"; "lang": "lang"; }, { "contentReady": "contentReady"; }, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdHighlightComponent, "td-highlight", never, { "content": "content"; "copyCodeToClipboard": "copyCodeToClipboard"; "copyCodeTooltips": "copyCodeTooltips"; "toggleRawButton": "toggleRawButton"; "rawToggleLabels": "rawToggleLabels"; "codeLang": "codeLang"; "lang": "lang"; }, { "contentReady": "contentReady"; }, never, ["*"]>;
 }

package/lib/highlight.module.d.ts

@@ -4,10 +4,11 @@ import * as i2 from "./copy-code-button/copy-code-button.component";
 import * as i3 from "@angular/common";
 import * as i4 from "@angular/cdk/clipboard";
 import * as i5 from "@angular/material/icon";
-import * as i6 from "@angular/material/tooltip";
+import * as i6 from "@angular/material/button-toggle";
 import * as i7 from "@angular/material/button";
+import * as i8 from "@angular/material/tooltip";
 export declare class CovalentHighlightModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<CovalentHighlightModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<CovalentHighlightModule, [typeof i1.TdHighlightComponent, typeof i2.TdCopyCodeButtonComponent], [typeof i3.CommonModule, typeof i4.ClipboardModule, typeof i5.MatIconModule, typeof i6.MatTooltipModule, typeof i7.MatButtonModule], [typeof i1.TdHighlightComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CovalentHighlightModule, [typeof i1.TdHighlightComponent, typeof i2.TdCopyCodeButtonComponent], [typeof i3.CommonModule, typeof i4.ClipboardModule, typeof i5.MatIconModule, typeof i6.MatButtonToggleModule, typeof i7.MatButtonModule, typeof i8.MatTooltipModule, typeof i7.MatButtonModule], [typeof i1.TdHighlightComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<CovalentHighlightModule>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@covalent/highlight",
-  "version": "4.16.0-beta.1",
+  "version": "4.16.0",
   "description": "Teradata UI Platform Highlight Module",
   "keywords": [
     "angular",
@@ -20,11 +20,11 @@
   "author": "Teradata UX",
   "peerDependencies": {
     "highlight.js": "^11.4.0",
-    "@angular/common": "^14.2.12",
-    "@angular/core": "^14.2.12",
-    "@angular/platform-browser": "^14.2.12",
-    "@angular/cdk": "^14.2.12",
-    "@angular/material": "^14.2.7"
+    "@angular/common": "^13.2.0",
+    "@angular/core": "^13.2.0",
+    "@angular/platform-browser": "^13.2.0",
+    "@angular/cdk": "^13.2.0",
+    "@angular/material": "^13.2.1"
   },
   "dependencies": {
     "tslib": "^2.0.0"
@@ -34,13 +34,13 @@
   "esm2020": "esm2020/covalent-highlight.mjs",
   "fesm2020": "fesm2020/covalent-highlight.mjs",
   "fesm2015": "fesm2015/covalent-highlight.mjs",
-  "typings": "index.d.ts",
+  "typings": "covalent-highlight.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
     },
     ".": {
-      "types": "./index.d.ts",
+      "types": "./covalent-highlight.d.ts",
       "esm2020": "./esm2020/covalent-highlight.mjs",
       "es2020": "./fesm2020/covalent-highlight.mjs",
       "es2015": "./fesm2015/covalent-highlight.mjs",