@covalent/flavored-markdown 3.1.2 → 4.0.0-beta.2

package/fesm2015/covalent-flavored-markdown.mjs

@@ -0,0 +1,763 @@
+import * as i0 from '@angular/core';
+import { Component, Input, ViewChild, EventEmitter, HostBinding, Output, Directive, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
+import * as i2$1 from '@angular/material/sort';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import * as i1$1 from '@angular/material/table';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import * as i1 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@angular/material/core';
+import * as i4 from '@angular/material/divider';
+import { TdHighlightComponent, CovalentHighlightModule } from '@covalent/highlight';
+import * as i1$2 from '@covalent/markdown';
+import { scrollToAnchor, TdMarkdownComponent, CovalentMarkdownModule } from '@covalent/markdown';
+import * as i4$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3$1 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { __awaiter } from 'tslib';
+
+function TdFlavoredListComponent_ng_template_1_p_3_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "p", 1);
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const subline_r5 = ctx.$implicit;
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", subline_r5, " ");
+    }
+}
+function TdFlavoredListComponent_ng_template_1_mat_divider_4_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelement(0, "mat-divider");
+    }
+}
+function TdFlavoredListComponent_ng_template_1_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "mat-list-item");
+        i0.ɵɵelementStart(1, "h4", 1);
+        i0.ɵɵtext(2);
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(3, TdFlavoredListComponent_ng_template_1_p_3_Template, 2, 1, "p", 2);
+        i0.ɵɵtemplate(4, TdFlavoredListComponent_ng_template_1_mat_divider_4_Template, 1, 0, "mat-divider", 3);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const line_r1 = ctx.$implicit;
+        const last_r2 = ctx.last;
+        i0.ɵɵadvance(2);
+        i0.ɵɵtextInterpolate1(" ", line_r1.line, " ");
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngForOf", line_r1.sublines);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", !last_r2);
+    }
+}
+class TdFlavoredListComponent {
+    constructor() {
+        this.dense = false;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ TdFlavoredListComponent.ɵfac = function TdFlavoredListComponent_Factory(t) { return new (t || TdFlavoredListComponent)(); };
+/** @nocollapse */ /** @nocollapse */ TdFlavoredListComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdFlavoredListComponent, selectors: [["cfm-list"]], inputs: { lines: "lines", dense: "dense" }, decls: 2, vars: 2, consts: [["ngFor", "", 3, "ngForOf"], ["matLine", ""], ["matLine", "", 4, "ngFor", "ngForOf"], [4, "ngIf"]], template: function TdFlavoredListComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelementStart(0, "mat-list");
+            i0.ɵɵtemplate(1, TdFlavoredListComponent_ng_template_1_Template, 5, 3, "ng-template", 0);
+            i0.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            i0.ɵɵattribute("dense", ctx.dense ? true : null);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngForOf", ctx.lines);
+        }
+    }, directives: [i1.MatList, i2.NgForOf, i1.MatListItem, i3.MatLine, i2.NgIf, i4.MatDivider], styles: [""] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdFlavoredListComponent, [{
+            type: Component,
+            args: [{ selector: 'cfm-list', template: "<mat-list [attr.dense]=\"dense ? true : null\">\n  <ng-template let-line let-last=\"last\" ngFor [ngForOf]=\"lines\">\n    <mat-list-item>\n      <h4 matLine>\n        {{ line.line }}\n      </h4>\n      <p *ngFor=\"let subline of line.sublines\" matLine>\n        {{ subline }}\n      </p>\n      <mat-divider *ngIf=\"!last\"></mat-divider>\n    </mat-list-item>\n  </ng-template>\n</mat-list>\n", styles: [""] }]
+        }], null, { lines: [{
+                type: Input
+            }], dense: [{
+                type: Input
+            }] });
+})();
+
+function TdFlavoredMarkdownTableComponent_ng_template_1_mat_header_cell_1_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "mat-header-cell", 7);
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const column_r3 = i0.ɵɵnextContext().$implicit;
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate(column_r3.label);
+    }
+}
+function TdFlavoredMarkdownTableComponent_ng_template_1_mat_cell_2_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "mat-cell");
+        i0.ɵɵtext(1);
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const row_r7 = ctx.$implicit;
+        const column_r3 = i0.ɵɵnextContext().$implicit;
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate(row_r7[column_r3.name]);
+    }
+}
+function TdFlavoredMarkdownTableComponent_ng_template_1_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementContainerStart(0, 4);
+        i0.ɵɵtemplate(1, TdFlavoredMarkdownTableComponent_ng_template_1_mat_header_cell_1_Template, 2, 1, "mat-header-cell", 5);
+        i0.ɵɵtemplate(2, TdFlavoredMarkdownTableComponent_ng_template_1_mat_cell_2_Template, 2, 1, "mat-cell", 6);
+        i0.ɵɵelementContainerEnd();
+    }
+    if (rf & 2) {
+        const column_r3 = ctx.$implicit;
+        i0.ɵɵproperty("matColumnDef", column_r3.name);
+    }
+}
+function TdFlavoredMarkdownTableComponent_mat_header_row_2_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelement(0, "mat-header-row");
+    }
+}
+function TdFlavoredMarkdownTableComponent_mat_row_3_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelement(0, "mat-row");
+    }
+}
+const _c0 = ["*"];
+class TdFlavoredMarkdownTableComponent {
+    constructor() {
+        this.columnDefs = [];
+    }
+    ngOnInit() {
+        this.displayedColumns = this.columnDefs.map((c) => c.name);
+        this.dataSource = new MatTableDataSource(this.data);
+    }
+    ngAfterViewInit() {
+        this.dataSource.sort = this.sort;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ TdFlavoredMarkdownTableComponent.ɵfac = function TdFlavoredMarkdownTableComponent_Factory(t) { return new (t || TdFlavoredMarkdownTableComponent)(); };
+/** @nocollapse */ /** @nocollapse */ TdFlavoredMarkdownTableComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdFlavoredMarkdownTableComponent, selectors: [["ng-component"]], viewQuery: function TdFlavoredMarkdownTableComponent_Query(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵviewQuery(MatSort, 5);
+        }
+        if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.sort = _t.first);
+        }
+    }, inputs: { columnDefs: "columnDefs", data: "data" }, decls: 4, vars: 4, consts: [["matSort", "", 3, "dataSource"], ["ngFor", "", 3, "ngForOf"], [4, "matHeaderRowDef"], [4, "matRowDef", "matRowDefColumns"], [3, "matColumnDef"], ["mat-sort-header", "", 4, "matHeaderCellDef"], [4, "matCellDef"], ["mat-sort-header", ""]], template: function TdFlavoredMarkdownTableComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelementStart(0, "mat-table", 0);
+            i0.ɵɵtemplate(1, TdFlavoredMarkdownTableComponent_ng_template_1_Template, 3, 1, "ng-template", 1);
+            i0.ɵɵtemplate(2, TdFlavoredMarkdownTableComponent_mat_header_row_2_Template, 1, 0, "mat-header-row", 2);
+            i0.ɵɵtemplate(3, TdFlavoredMarkdownTableComponent_mat_row_3_Template, 1, 0, "mat-row", 3);
+            i0.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            i0.ɵɵproperty("dataSource", ctx.dataSource);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngForOf", ctx.columnDefs);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("matHeaderRowDef", ctx.displayedColumns);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("matRowDefColumns", ctx.displayedColumns);
+        }
+    }, directives: [i1$1.MatTable, i2$1.MatSort, i2.NgForOf, i1$1.MatColumnDef, i1$1.MatHeaderCellDef, i1$1.MatHeaderCell, i2$1.MatSortHeader, i1$1.MatCellDef, i1$1.MatCell, i1$1.MatHeaderRowDef, i1$1.MatHeaderRow, i1$1.MatRowDef, i1$1.MatRow], encapsulation: 2 });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdFlavoredMarkdownTableComponent, [{
+            type: Component,
+            args: [{
+                    template: `
+    <mat-table [dataSource]="dataSource" matSort>
+      <!-- Column Definition -->
+      <ng-template ngFor let-column [ngForOf]="columnDefs">
+        <ng-container [matColumnDef]="column.name">
+          <mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.label }}</mat-header-cell>
+          <mat-cell *matCellDef="let row">{{ row[column.name] }}</mat-cell>
+        </ng-container>
+      </ng-template>
+      <!-- Header and Row Declarations -->
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+    </mat-table>
+  `,
+                }]
+        }], null, { columnDefs: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], sort: [{
+                type: ViewChild,
+                args: [MatSort]
+            }] });
+})();
+class TdFlavoredMarkdownButtonComponent {
+    constructor() {
+        this.display = 'inline-block';
+        this.text = '';
+        this.data = '';
+        this.clicked = new EventEmitter();
+    }
+    emitClick() {
+        this.clicked.emit({ text: this.text, data: this.data });
+    }
+}
+/** @nocollapse */ /** @nocollapse */ TdFlavoredMarkdownButtonComponent.ɵfac = function TdFlavoredMarkdownButtonComponent_Factory(t) { return new (t || TdFlavoredMarkdownButtonComponent)(); };
+/** @nocollapse */ /** @nocollapse */ TdFlavoredMarkdownButtonComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdFlavoredMarkdownButtonComponent, selectors: [["ng-component"]], hostVars: 2, hostBindings: function TdFlavoredMarkdownButtonComponent_HostBindings(rf, ctx) {
+        if (rf & 2) {
+            i0.ɵɵstyleProp("display", ctx.display);
+        }
+    }, inputs: { text: "text", data: "data" }, outputs: { clicked: "clicked" }, decls: 2, vars: 1, consts: [["mat-raised-button", "", 3, "click"]], template: function TdFlavoredMarkdownButtonComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵelementStart(0, "button", 0);
+            i0.ɵɵlistener("click", function TdFlavoredMarkdownButtonComponent_Template_button_click_0_listener() { return ctx.emitClick(); });
+            i0.ɵɵtext(1);
+            i0.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            i0.ɵɵadvance(1);
+            i0.ɵɵtextInterpolate1(" ", ctx.text, " ");
+        }
+    }, directives: [i4$1.MatButton], encapsulation: 2 });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdFlavoredMarkdownButtonComponent, [{
+            type: Component,
+            args: [{
+                    template: `
+    <button mat-raised-button (click)="emitClick()">
+      {{ text }}
+    </button>
+  `,
+                }]
+        }], null, { display: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], text: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] });
+})();
+class TdFlavoredMarkdownContainerDirective {
+    constructor(viewContainerRef, _renderer) {
+        this.viewContainerRef = viewContainerRef;
+        this._renderer = _renderer;
+    }
+    clear() {
+        this._renderer.setProperty(this.viewContainerRef.element.nativeElement, 'innerHTML', '');
+        this.viewContainerRef.clear();
+    }
+}
+/** @nocollapse */ /** @nocollapse */ TdFlavoredMarkdownContainerDirective.ɵfac = function TdFlavoredMarkdownContainerDirective_Factory(t) { return new (t || TdFlavoredMarkdownContainerDirective)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.Renderer2)); };
+/** @nocollapse */ /** @nocollapse */ TdFlavoredMarkdownContainerDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: TdFlavoredMarkdownContainerDirective, selectors: [["", "tdFlavoredMarkdownContainer", ""]] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdFlavoredMarkdownContainerDirective, [{
+            type: Directive,
+            args: [{
+                    selector: '[tdFlavoredMarkdownContainer]',
+                }]
+        }], function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }]; }, null);
+})();
+class TdFlavoredMarkdownComponent {
+    constructor(_componentFactoryResolver, _renderer, _changeDetectorRef, _injector, _elementRef) {
+        this._componentFactoryResolver = _componentFactoryResolver;
+        this._renderer = _renderer;
+        this._changeDetectorRef = _changeDetectorRef;
+        this._injector = _injector;
+        this._elementRef = _elementRef;
+        this._simpleLineBreaks = false;
+        this._components = {};
+        this._viewInit = false;
+        /**
+         * copyCodeToClipboard?: boolean
+         *
+         * Display copy button on code snippets to copy code to clipboard.
+         *
+         */
+        this.copyCodeToClipboard = false;
+        /**
+         * copyCodeTooltips?: ICopyCodeTooltips
+         *
+         * Tooltips for copy button to copy and upon copying.
+         */
+        this.copyCodeTooltips = {};
+        /**
+         * contentReady?: function
+         * Event emitted after the markdown content rendering is finished.
+         */
+        this.contentReady = new EventEmitter();
+        /**
+         * buttonClicked?: ITdFlavoredMarkdownButtonClickEvent
+         * Event emitted when a button is clicked
+         * Is an object containing text and data of button
+         */
+        this.buttonClicked = new EventEmitter();
+    }
+    /**
+     * content?: string
+     *
+     * Markdown format content to be parsed as material/covalent markup.
+     *
+     * e.g. README.md content.
+     */
+    set content(content) {
+        this._content = content;
+    }
+    /**
+     * simpleLineBreaks?: string
+     *
+     * Sets whether newline characters inside paragraphs and spans are parsed as <br/>.
+     * Defaults to false.
+     */
+    set simpleLineBreaks(simpleLineBreaks) {
+        this._simpleLineBreaks = simpleLineBreaks;
+    }
+    /**
+     * hostedUrl?: string
+     *
+     * If markdown contains relative paths, this is required to generate correct urls
+     *
+     */
+    set hostedUrl(hostedUrl) {
+        this._hostedUrl = hostedUrl;
+    }
+    /**
+     * anchor?: string
+     *
+     * Anchor to jump to
+     *
+     */
+    set anchor(anchor) {
+        this._anchor = anchor;
+    }
+    ngOnChanges(changes) {
+        // only anchor changed
+        if (changes.anchor && !changes.content && !changes.simpleLineBreaks && !changes.hostedUrl) {
+            scrollToAnchor(this._elementRef.nativeElement, this._anchor, false);
+        }
+        else {
+            this.refresh();
+        }
+    }
+    ngAfterViewInit() {
+        if (!this._content) {
+            this._loadContent(this.container.viewContainerRef.element.nativeElement.textContent);
+            Promise.resolve().then(() => {
+                this._viewInit = true;
+                this._changeDetectorRef.markForCheck();
+            });
+        }
+    }
+    refresh() {
+        if (this._content) {
+            this._loadContent(this._content);
+        }
+        else if (this._viewInit) {
+            this._loadContent(this.container.viewContainerRef.element.nativeElement.textContent);
+        }
+        this._changeDetectorRef.markForCheck();
+    }
+    _loadContent(markdown) {
+        if (markdown && markdown.trim().length > 0) {
+            this.container.clear();
+            markdown = markdown.replace(/^(\s|\t)*\n+/g, '').replace(/(\s|\t)*\n+(\s|\t)*$/g, '');
+            // Split markdown by line characters
+            let lines = markdown.split('\n');
+            // check how much indentation is used by the first actual markdown line
+            const firstLineWhitespace = lines[0].match(/^(\s|\t)*/)[0];
+            // Remove all indentation spaces so markdown can be parsed correctly
+            const startingWhitespaceRegex = new RegExp('^' + firstLineWhitespace);
+            lines = lines.map(function (line) {
+                return line.replace(startingWhitespaceRegex, '');
+            });
+            // Join lines again with line characters
+            markdown = [...lines, '', ''].join('\n');
+            markdown = this._replaceCodeBlocks(markdown);
+            markdown = this._replaceCheckbox(markdown);
+            markdown = this._replaceTables(markdown);
+            markdown = this._replaceLists(markdown);
+            markdown = this._replaceButtons(markdown);
+            const keys = Object.keys(this._components);
+            // need to sort the placeholders in order of encounter in markdown content
+            keys.sort((compA, compB) => {
+                return markdown.indexOf(compA) > markdown.indexOf(compB) ? 1 : -1;
+            });
+            this._render(markdown, keys[0], keys);
+            // TODO: timeout required since resizing of html elements occurs which causes a change in the scroll position
+            setTimeout(() => scrollToAnchor(this._elementRef.nativeElement, this._anchor, false), 250);
+            this.contentReady.emit();
+            Promise.resolve().then(() => {
+                this._changeDetectorRef.markForCheck();
+            });
+        }
+    }
+    _render(markdown, key, keys) {
+        if (!markdown) {
+            return;
+        }
+        if (key && markdown.indexOf(key) > -1) {
+            const markdownParts = markdown.split(key);
+            keys.shift();
+            this._render(markdownParts[0], undefined, undefined);
+            this.container.viewContainerRef.insert(this._components[key].hostView, this.container.viewContainerRef.length);
+            this._components[key] = undefined;
+            delete this._components[key];
+            this._render(markdownParts[1], keys[0], keys);
+        }
+        else {
+            const contentRef = this._componentFactoryResolver
+                .resolveComponentFactory(TdMarkdownComponent)
+                .create(this._injector);
+            contentRef.instance.content = markdown;
+            contentRef.instance.hostedUrl = this._hostedUrl;
+            contentRef.instance.simpleLineBreaks = this._simpleLineBreaks;
+            contentRef.instance.refresh();
+            this.container.viewContainerRef.insert(contentRef.hostView, this.container.viewContainerRef.length);
+        }
+    }
+    _replaceComponent(markdown, type, regExp, replacerFunc) {
+        let componentIndex = 0;
+        return markdown.replace(regExp, (...args) => {
+            const componentFactory = this._componentFactoryResolver.resolveComponentFactory(type);
+            const componentRef = componentFactory.create(this._injector);
+            replacerFunc(componentRef, ...args);
+            const key = '[' + componentFactory.selector + '-placeholder-' + componentIndex++ + ']';
+            this._components[key] = componentRef;
+            return key;
+        });
+    }
+    _replaceCheckbox(markdown) {
+        const checkboxRegExp = /(?:^|\n)- \[(x| )\](.*)/gi;
+        return this._replaceComponent(markdown, MatCheckbox, checkboxRegExp, (componentRef, match, checked, label) => {
+            componentRef.instance.checked = !!checked.trim();
+            componentRef.instance.disabled = true;
+            componentRef.instance.labelPosition = 'after';
+            this._renderer.setProperty(componentRef.instance._elementRef.nativeElement.getElementsByClassName('mat-checkbox-label')[0], 'innerHTML', label);
+        });
+    }
+    _replaceButtons(markdown) {
+        const buttonRegExp = /\[([^\[]+)\](\(#data=(.*)\))/i;
+        const globalButtonRegExp = new RegExp(buttonRegExp.source, buttonRegExp.flags + 'g');
+        return this._replaceComponent(markdown, TdFlavoredMarkdownButtonComponent, globalButtonRegExp, (componentRef, match) => {
+            const matches = buttonRegExp.exec(match);
+            const text = matches[1];
+            const data = matches[3];
+            componentRef.instance.text = text;
+            componentRef.instance.data = data;
+            componentRef.instance.clicked.subscribe((clickEvent) => this.buttonClicked.emit(clickEvent));
+        });
+    }
+    _replaceCodeBlocks(markdown) {
+        const codeBlockRegExp = /(?:^|\n)```(.*)\n([\s\S]*?)\n```/g;
+        return this._replaceComponent(markdown, TdHighlightComponent, codeBlockRegExp, (componentRef, match, language, codeblock) => {
+            if (language) {
+                componentRef.instance.codeLang = language;
+            }
+            componentRef.instance.copyCodeToClipboard = this.copyCodeToClipboard;
+            componentRef.instance.copyCodeTooltips = this.copyCodeTooltips;
+            componentRef.instance.content = codeblock;
+        });
+    }
+    _replaceTables(markdown) {
+        const tableRgx = /^ {0,3}\|?.+\|.+\n[ \t]{0,3}\|?[ \t]*:?[ \t]*(?:-|=){2,}[ \t]*:?[ \t]*\|[ \t]*:?[ \t]*(?:-|=){2,}[\s\S]+?(?:\n\n|~0)/gm;
+        return this._replaceComponent(markdown, TdFlavoredMarkdownTableComponent, tableRgx, (componentRef, match) => {
+            const dataTableLines = match.replace(/(\s|\t)*\n+(\s|\t)*$/g, '').split('\n');
+            const columns = dataTableLines[0]
+                .split('|')
+                .filter((col) => {
+                return col;
+            })
+                .map((s) => {
+                return s.trim();
+            });
+            const alignment = dataTableLines[1]
+                .split('|')
+                .filter((v) => {
+                return v;
+            })
+                .map((s) => {
+                return s.trim();
+            });
+            const data = [];
+            for (let i = 2; i < dataTableLines.length; i++) {
+                const rowSplit = dataTableLines[i]
+                    .split('|')
+                    .filter((cell) => {
+                    return cell;
+                })
+                    .map((s) => {
+                    return s.trim();
+                });
+                const row = {};
+                columns.forEach((col, index) => {
+                    const rowSplitCell = rowSplit[index];
+                    if (rowSplitCell) {
+                        row[col.toLowerCase().trim()] = rowSplitCell.replace(/`(.*)`/, (m, value) => {
+                            return value;
+                        });
+                    }
+                });
+                data.push(row);
+            }
+            componentRef.instance.columnDefs = columns.map((col, index) => {
+                return {
+                    label: col,
+                    name: col.toLowerCase().trim(),
+                    numeric: /^--*[ \t]*:[ \t]*$/.test(alignment[index]),
+                };
+            });
+            componentRef.instance.data = data;
+        });
+    }
+    _replaceLists(markdown) {
+        const listRegExp = /(?:^|\n)(( *\+)[ |\t](.*)\n)+/g;
+        return this._replaceComponent(markdown, TdFlavoredListComponent, listRegExp, (componentRef, match) => {
+            const lineTexts = match.split(new RegExp('\\n {' + (match.indexOf('+') - 1).toString() + '}\\+[ |\\t]'));
+            lineTexts.shift();
+            const lines = [];
+            lineTexts.forEach((text, index) => {
+                const sublineTexts = text.split(/\n *\+ /);
+                lines.push({
+                    line: sublineTexts.shift(),
+                    sublines: sublineTexts.map((subline) => {
+                        return subline.trim();
+                    }),
+                });
+            });
+            componentRef.instance.lines = lines;
+        });
+    }
+}
+/** @nocollapse */ /** @nocollapse */ TdFlavoredMarkdownComponent.ɵfac = function TdFlavoredMarkdownComponent_Factory(t) { return new (t || TdFlavoredMarkdownComponent)(i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+/** @nocollapse */ /** @nocollapse */ TdFlavoredMarkdownComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdFlavoredMarkdownComponent, selectors: [["td-flavored-markdown"]], viewQuery: function TdFlavoredMarkdownComponent_Query(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵviewQuery(TdFlavoredMarkdownContainerDirective, 7);
+        }
+        if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.container = _t.first);
+        }
+    }, inputs: { content: "content", simpleLineBreaks: "simpleLineBreaks", hostedUrl: "hostedUrl", anchor: "anchor", copyCodeToClipboard: "copyCodeToClipboard", copyCodeTooltips: "copyCodeTooltips" }, outputs: { contentReady: "contentReady", buttonClicked: "buttonClicked" }, features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 2, vars: 0, consts: [["tdFlavoredMarkdownContainer", ""]], template: function TdFlavoredMarkdownComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵprojection(1);
+            i0.ɵɵelementEnd();
+        }
+    }, directives: [TdFlavoredMarkdownContainerDirective], styles: ["[_nghost-%COMP%]     td-markdown:first-of-type>div:first-of-type>h1:first-of-type, [_nghost-%COMP%]     td-markdown:first-of-type>div:first-of-type>h2:first-of-type{margin-top:0}[_nghost-%COMP%]     td-data-table, [_nghost-%COMP%]     mat-checkbox{display:block}[_nghost-%COMP%]     td-data-table, [_nghost-%COMP%]     td-highlight, [_nghost-%COMP%]     mat-checkbox:last-of-type{margin-bottom:16px}[_nghost-%COMP%]     :not(pre)>code{font-family:Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;padding-left:2px;padding-right:2px}[_nghost-%COMP%]     td-highlight{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}"], changeDetection: 0 });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdFlavoredMarkdownComponent, [{
+            type: Component,
+            args: [{ selector: 'td-flavored-markdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div tdFlavoredMarkdownContainer>\n  <ng-content></ng-content>\n</div>\n", styles: [":host ::ng-deep td-markdown:first-of-type>div:first-of-type>h1:first-of-type,:host ::ng-deep td-markdown:first-of-type>div:first-of-type>h2:first-of-type{margin-top:0}:host ::ng-deep td-data-table,:host ::ng-deep mat-checkbox{display:block}:host ::ng-deep td-data-table,:host ::ng-deep td-highlight,:host ::ng-deep mat-checkbox:last-of-type{margin-bottom:16px}:host ::ng-deep :not(pre)>code{font-family:Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;padding-left:2px;padding-right:2px}:host ::ng-deep td-highlight{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}\n"] }]
+        }], function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i0.ElementRef }]; }, { content: [{
+                type: Input,
+                args: ['content']
+            }], simpleLineBreaks: [{
+                type: Input,
+                args: ['simpleLineBreaks']
+            }], hostedUrl: [{
+                type: Input,
+                args: ['hostedUrl']
+            }], anchor: [{
+                type: Input,
+                args: ['anchor']
+            }], copyCodeToClipboard: [{
+                type: Input
+            }], copyCodeTooltips: [{
+                type: Input
+            }], contentReady: [{
+                type: Output
+            }], buttonClicked: [{
+                type: Output
+            }], container: [{
+                type: ViewChild,
+                args: [TdFlavoredMarkdownContainerDirective, { static: true }]
+            }] });
+})();
+
+function TdFlavoredMarkdownLoaderComponent_mat_progress_bar_0_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelement(0, "mat-progress-bar", 2);
+    }
+    if (rf & 2) {
+        i0.ɵɵproperty("ngClass", "delay");
+    }
+}
+function TdFlavoredMarkdownLoaderComponent_td_flavored_markdown_1_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r3 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "td-flavored-markdown", 3);
+        i0.ɵɵlistener("contentReady", function TdFlavoredMarkdownLoaderComponent_td_flavored_markdown_1_Template_td_flavored_markdown_contentReady_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r2 = i0.ɵɵnextContext(); return ctx_r2.contentReady.emit(); })("buttonClicked", function TdFlavoredMarkdownLoaderComponent_td_flavored_markdown_1_Template_td_flavored_markdown_buttonClicked_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r4 = i0.ɵɵnextContext(); return ctx_r4.buttonClicked.emit($event); });
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r1 = i0.ɵɵnextContext();
+        i0.ɵɵproperty("content", ctx_r1.content)("hostedUrl", ctx_r1.url)("anchor", ctx_r1.anchor)("copyCodeToClipboard", ctx_r1.copyCodeToClipboard)("copyCodeTooltips", ctx_r1.copyCodeTooltips);
+    }
+}
+// TODO: make a td-markdown-loader component
+class TdFlavoredMarkdownLoaderComponent {
+    constructor(_changeDetectorRef, _markdownUrlLoaderService) {
+        this._changeDetectorRef = _changeDetectorRef;
+        this._markdownUrlLoaderService = _markdownUrlLoaderService;
+        /**
+         * copyCodeToClipboard?: boolean
+         *
+         * Display copy button on code snippets to copy code to clipboard.
+         *
+         */
+        this.copyCodeToClipboard = false;
+        /**
+         * copyCodeTooltips?: ICopyCodeTooltips
+         *
+         * Tooltips for copy button to copy and upon copying.
+         */
+        this.copyCodeTooltips = {};
+        /**
+         * contentReady: void
+         * Emitted when markdown rendering is finished.
+         */
+        this.contentReady = new EventEmitter();
+        /**
+         * loadFailed: Error
+         * Emitted when loading of markdown file fails.
+         */
+        this.loadFailed = new EventEmitter();
+        this.buttonClicked = new EventEmitter();
+        this.loading = true;
+    }
+    ngOnChanges(changes) {
+        if (changes.url || changes.httpOptions) {
+            this.loadMarkdown();
+        }
+    }
+    loadMarkdown() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.loading = true;
+            this._changeDetectorRef.markForCheck();
+            try {
+                this.content = yield this._markdownUrlLoaderService.load(this.url, this.httpOptions);
+            }
+            catch (error) {
+                this.loadFailed.emit(error);
+            }
+            finally {
+                this.loading = false;
+                this._changeDetectorRef.markForCheck();
+            }
+        });
+    }
+}
+/** @nocollapse */ /** @nocollapse */ TdFlavoredMarkdownLoaderComponent.ɵfac = function TdFlavoredMarkdownLoaderComponent_Factory(t) { return new (t || TdFlavoredMarkdownLoaderComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$2.TdMarkdownLoaderService)); };
+/** @nocollapse */ /** @nocollapse */ TdFlavoredMarkdownLoaderComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdFlavoredMarkdownLoaderComponent, selectors: [["td-flavored-markdown-loader"]], inputs: { url: "url", httpOptions: "httpOptions", anchor: "anchor", copyCodeToClipboard: "copyCodeToClipboard", copyCodeTooltips: "copyCodeTooltips" }, outputs: { contentReady: "contentReady", loadFailed: "loadFailed", buttonClicked: "buttonClicked" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 2, consts: [["mode", "indeterminate", "color", "accent", "class", "sticky", 3, "ngClass", 4, "ngIf"], [3, "content", "hostedUrl", "anchor", "copyCodeToClipboard", "copyCodeTooltips", "contentReady", "buttonClicked", 4, "ngIf"], ["mode", "indeterminate", "color", "accent", 1, "sticky", 3, "ngClass"], [3, "content", "hostedUrl", "anchor", "copyCodeToClipboard", "copyCodeTooltips", "contentReady", "buttonClicked"]], template: function TdFlavoredMarkdownLoaderComponent_Template(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵtemplate(0, TdFlavoredMarkdownLoaderComponent_mat_progress_bar_0_Template, 1, 1, "mat-progress-bar", 0);
+            i0.ɵɵtemplate(1, TdFlavoredMarkdownLoaderComponent_td_flavored_markdown_1_Template, 1, 5, "td-flavored-markdown", 1);
+        }
+        if (rf & 2) {
+            i0.ɵɵproperty("ngIf", ctx.loading);
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngIf", !ctx.loading);
+        }
+    }, directives: [i2.NgIf, i3$1.MatProgressBar, i2.NgClass, TdFlavoredMarkdownComponent], styles: ["[_nghost-%COMP%]{display:block}.sticky[_ngcontent-%COMP%]{position:absolute;top:0}.delay[_ngcontent-%COMP%]{-webkit-animation:delay-animation;animation:delay-animation;-webkit-animation-duration:.6s;animation-duration:.6s}@-webkit-keyframes delay-animation{0%{opacity:0}99%{opacity:0}to{opacity:1}}@keyframes delay-animation{0%{opacity:0}99%{opacity:0}to{opacity:1}}"], changeDetection: 0 });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdFlavoredMarkdownLoaderComponent, [{
+            type: Component,
+            args: [{ selector: 'td-flavored-markdown-loader', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-progress-bar\n  [ngClass]=\"'delay'\"\n  *ngIf=\"loading\"\n  mode=\"indeterminate\"\n  color=\"accent\"\n  class=\"sticky\"\n></mat-progress-bar>\n<td-flavored-markdown\n  *ngIf=\"!loading\"\n  [content]=\"content\"\n  [hostedUrl]=\"url\"\n  [anchor]=\"anchor\"\n  [copyCodeToClipboard]=\"copyCodeToClipboard\"\n  [copyCodeTooltips]=\"copyCodeTooltips\"\n  (contentReady)=\"contentReady.emit()\"\n  (buttonClicked)=\"buttonClicked.emit($event)\"\n></td-flavored-markdown>\n", styles: [":host{display:block}.sticky{position:absolute;top:0}.delay{-webkit-animation:delay-animation;animation:delay-animation;-webkit-animation-duration:.6s;animation-duration:.6s}@-webkit-keyframes delay-animation{0%{opacity:0}99%{opacity:0}to{opacity:1}}@keyframes delay-animation{0%{opacity:0}99%{opacity:0}to{opacity:1}}\n"] }]
+        }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$2.TdMarkdownLoaderService }]; }, { url: [{
+                type: Input
+            }], httpOptions: [{
+                type: Input
+            }], anchor: [{
+                type: Input
+            }], copyCodeToClipboard: [{
+                type: Input
+            }], copyCodeTooltips: [{
+                type: Input
+            }], contentReady: [{
+                type: Output
+            }], loadFailed: [{
+                type: Output
+            }], buttonClicked: [{
+                type: Output
+            }] });
+})();
+
+class CovalentFlavoredMarkdownModule {
+}
+/** @nocollapse */ /** @nocollapse */ CovalentFlavoredMarkdownModule.ɵfac = function CovalentFlavoredMarkdownModule_Factory(t) { return new (t || CovalentFlavoredMarkdownModule)(); };
+/** @nocollapse */ /** @nocollapse */ CovalentFlavoredMarkdownModule.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: CovalentFlavoredMarkdownModule });
+/** @nocollapse */ /** @nocollapse */ CovalentFlavoredMarkdownModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ imports: [[
+            CommonModule,
+            MatCheckboxModule,
+            MatListModule,
+            MatProgressBarModule,
+            CovalentHighlightModule,
+            CovalentMarkdownModule,
+            MatButtonModule,
+            MatTableModule,
+            MatSortModule,
+        ]] });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentFlavoredMarkdownModule, [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        MatCheckboxModule,
+                        MatListModule,
+                        MatProgressBarModule,
+                        CovalentHighlightModule,
+                        CovalentMarkdownModule,
+                        MatButtonModule,
+                        MatTableModule,
+                        MatSortModule,
+                    ],
+                    declarations: [
+                        TdFlavoredListComponent,
+                        TdFlavoredMarkdownComponent,
+                        TdFlavoredMarkdownContainerDirective,
+                        TdFlavoredMarkdownLoaderComponent,
+                        TdFlavoredMarkdownButtonComponent,
+                        TdFlavoredMarkdownTableComponent,
+                    ],
+                    exports: [TdFlavoredMarkdownComponent, TdFlavoredMarkdownLoaderComponent],
+                }]
+        }], null, null);
+})();
+(function () {
+    (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(CovalentFlavoredMarkdownModule, { declarations: [TdFlavoredListComponent,
+            TdFlavoredMarkdownComponent,
+            TdFlavoredMarkdownContainerDirective,
+            TdFlavoredMarkdownLoaderComponent,
+            TdFlavoredMarkdownButtonComponent,
+            TdFlavoredMarkdownTableComponent], imports: [CommonModule,
+            MatCheckboxModule,
+            MatListModule,
+            MatProgressBarModule,
+            CovalentHighlightModule,
+            CovalentMarkdownModule,
+            MatButtonModule,
+            MatTableModule,
+            MatSortModule], exports: [TdFlavoredMarkdownComponent, TdFlavoredMarkdownLoaderComponent] });
+})();
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CovalentFlavoredMarkdownModule, TdFlavoredMarkdownButtonComponent, TdFlavoredMarkdownComponent, TdFlavoredMarkdownContainerDirective, TdFlavoredMarkdownLoaderComponent, TdFlavoredMarkdownTableComponent };
+//# sourceMappingURL=covalent-flavored-markdown.mjs.map