@covalent/markdown-navigator 4.0.0-beta.2 → 4.1.0-develop.10

package/fesm2020/covalent-markdown-navigator.mjs

@@ -1,259 +1,37 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, SecurityContext, Component, ChangeDetectionStrategy, Input, Output, ViewChild, HostListener, Injectable, Inject, Directive, NgModule } from '@angular/core';
-import * as i4 from '@angular/common';
+import * as i11 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i1 from '@covalent/markdown';
-import { removeLeadingHash, isAnchorLink } from '@covalent/markdown';
+import { isAnchorLink, removeLeadingHash } from '@covalent/markdown';
 import * as i2 from '@angular/platform-browser';
 import * as i3 from '@angular/common/http';
-import * as i5 from '@angular/material/progress-bar';
+import { firstValueFrom } from 'rxjs';
+import * as i4 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i6 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i7 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i8 from '@angular/material/icon';
+import * as i5 from '@covalent/core/breadcrumbs';
+import { CovalentBreadcrumbsModule } from '@covalent/core/breadcrumbs';
+import * as i6 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i9 from '@angular/material/divider';
-import * as i10 from '@covalent/core/message';
+import * as i7 from '@angular/material/divider';
+import * as i8 from '@covalent/core/message';
 import { CovalentMessageModule } from '@covalent/core/message';
-import * as i11 from '@covalent/flavored-markdown';
+import * as i9 from '@covalent/flavored-markdown';
 import { CovalentFlavoredMarkdownModule } from '@covalent/flavored-markdown';
-import * as i12 from '@angular/material/list';
+import * as i10 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
+import * as i12 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i13 from '@angular/material/core';
 import * as i1$1 from '@covalent/core/dialogs';
 import { ResizableDraggableDialog, CovalentDialogsModule } from '@covalent/core/dialogs';
+import { MatButtonModule } from '@angular/material/button';
 
-const _c0 = ["markdownWrapper"];
-function TdMarkdownNavigatorComponent_ng_container_0_mat_progress_bar_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mat-progress-bar", 8);
-} }
-function TdMarkdownNavigatorComponent_ng_container_0_ng_container_2_button_2_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 12);
-    i0.ɵɵlistener("click", function TdMarkdownNavigatorComponent_ng_container_0_ng_container_2_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(3); return ctx_r11.reset(); });
-    i0.ɵɵelementStart(1, "mat-icon");
-    i0.ɵɵtext(2, "home");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r8 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("matTooltip", ctx_r8.goHomeLabel);
-    i0.ɵɵattribute("data-test", "home-button");
-    i0.ɵɵadvance(1);
-    i0.ɵɵattribute("aria-label", ctx_r8.goHomeLabel);
-} }
-function TdMarkdownNavigatorComponent_ng_container_0_ng_container_2_button_3_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 13);
-    i0.ɵɵlistener("click", function TdMarkdownNavigatorComponent_ng_container_0_ng_container_2_button_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r13 = i0.ɵɵnextContext(3); return ctx_r13.goBack(); });
-    i0.ɵɵelementStart(1, "mat-icon");
-    i0.ɵɵtext(2, "arrow_back");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r9 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("matTooltip", ctx_r9.goBackLabel);
-    i0.ɵɵattribute("data-test", "back-button");
-    i0.ɵɵadvance(1);
-    i0.ɵɵattribute("aria-label", ctx_r9.goBackLabel);
-} }
-function TdMarkdownNavigatorComponent_ng_container_0_ng_container_2_span_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 14);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r10 = i0.ɵɵnextContext(3);
-    i0.ɵɵattribute("data-test", "title");
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", ctx_r10.currentItemTitle, " ");
-} }
-function TdMarkdownNavigatorComponent_ng_container_0_ng_container_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "div");
-    i0.ɵɵtemplate(2, TdMarkdownNavigatorComponent_ng_container_0_ng_container_2_button_2_Template, 3, 3, "button", 9);
-    i0.ɵɵtemplate(3, TdMarkdownNavigatorComponent_ng_container_0_ng_container_2_button_3_Template, 3, 3, "button", 10);
-    i0.ɵɵtemplate(4, TdMarkdownNavigatorComponent_ng_container_0_ng_container_2_span_4_Template, 2, 2, "span", 11);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "mat-divider");
-    i0.ɵɵelementContainerEnd();
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(1);
-    i0.ɵɵstyleProp("display", "flex");
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r3.showHomeButton);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r3.showGoBackButton);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r3.currentItemTitle);
-    i0.ɵɵadvance(1);
-    i0.ɵɵstyleProp("position", "relative");
-} }
-function TdMarkdownNavigatorComponent_ng_container_0_div_4_td_message_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "td-message", 19);
-} if (rf & 2) {
-    const ctx_r16 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("sublabel", ctx_r16.markdownLoaderError);
-    i0.ɵɵattribute("data-test", "markdown-loader-error");
-} }
-function TdMarkdownNavigatorComponent_ng_container_0_div_4_td_flavored_markdown_loader_3_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "td-flavored-markdown-loader", 20);
-    i0.ɵɵlistener("loadFailed", function TdMarkdownNavigatorComponent_ng_container_0_div_4_td_flavored_markdown_loader_3_Template_td_flavored_markdown_loader_loadFailed_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r19 = i0.ɵɵnextContext(3); return ctx_r19.handleMarkdownLoaderError($event); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r17 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("url", ctx_r17.url)("httpOptions", ctx_r17.httpOptions)("anchor", ctx_r17.anchor)("copyCodeToClipboard", ctx_r17.copyCodeToClipboard)("copyCodeTooltips", ctx_r17.copyCodeTooltips);
-} }
-function TdMarkdownNavigatorComponent_ng_container_0_div_4_td_flavored_markdown_4_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "td-flavored-markdown", 21);
-    i0.ɵɵlistener("buttonClicked", function TdMarkdownNavigatorComponent_ng_container_0_div_4_td_flavored_markdown_4_Template_td_flavored_markdown_buttonClicked_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r21 = i0.ɵɵnextContext(3); return ctx_r21.buttonClicked.emit($event); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r18 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r18.markdownString)("hostedUrl", ctx_r18.url)("anchor", ctx_r18.anchor)("copyCodeToClipboard", ctx_r18.copyCodeToClipboard)("copyCodeTooltips", ctx_r18.copyCodeTooltips);
-} }
-function TdMarkdownNavigatorComponent_ng_container_0_div_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15, 16);
-    i0.ɵɵtemplate(2, TdMarkdownNavigatorComponent_ng_container_0_div_4_td_message_2_Template, 1, 2, "td-message", 5);
-    i0.ɵɵtemplate(3, TdMarkdownNavigatorComponent_ng_container_0_div_4_td_flavored_markdown_loader_3_Template, 1, 5, "td-flavored-markdown-loader", 17);
-    i0.ɵɵtemplate(4, TdMarkdownNavigatorComponent_ng_container_0_div_4_td_flavored_markdown_4_Template, 1, 5, "td-flavored-markdown", 18);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r4 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r4.markdownLoaderError);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r4.showTdMarkdownLoader);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r4.showTdMarkdown);
-} }
-function TdMarkdownNavigatorComponent_ng_container_0_td_message_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "td-message", 19);
-} if (rf & 2) {
-    const ctx_r5 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("sublabel", ctx_r5.childrenUrlError);
-    i0.ɵɵattribute("data-test", "children-url-error");
-} }
-function TdMarkdownNavigatorComponent_ng_container_0_div_6_button_2_Template(rf, ctx) { if (rf & 1) {
-    const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 24);
-    i0.ɵɵlistener("click", function TdMarkdownNavigatorComponent_ng_container_0_div_6_button_2_Template_button_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r27); const item_r24 = restoredCtx.$implicit; const ctx_r26 = i0.ɵɵnextContext(3); return ctx_r26.handleItemSelected(item_r24); });
-    i0.ɵɵelementStart(1, "mat-icon", 25);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 26);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 26);
-    i0.ɵɵtext(6);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(7, "mat-divider");
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const item_r24 = ctx.$implicit;
-    const index_r25 = ctx.index;
-    const ctx_r23 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("id", "td-markdown-navigator-list-item-" + (item_r24.id ? item_r24.id : index_r25))("matTooltip", ctx_r23.getTitle(item_r24));
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r23.getIcon(item_r24), " ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r23.getTitle(item_r24), " ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r24.description);
-} }
-function TdMarkdownNavigatorComponent_ng_container_0_div_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22);
-    i0.ɵɵelementStart(1, "mat-action-list");
-    i0.ɵɵtemplate(2, TdMarkdownNavigatorComponent_ng_container_0_div_6_button_2_Template, 8, 5, "button", 23);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r6 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r6.currentMenuItems);
-} }
-function TdMarkdownNavigatorComponent_ng_container_0_ng_container_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0);
-} }
-function TdMarkdownNavigatorComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, TdMarkdownNavigatorComponent_ng_container_0_mat_progress_bar_1_Template, 1, 0, "mat-progress-bar", 2);
-    i0.ɵɵtemplate(2, TdMarkdownNavigatorComponent_ng_container_0_ng_container_2_Template, 6, 7, "ng-container", 0);
-    i0.ɵɵelementStart(3, "div", 3);
-    i0.ɵɵtemplate(4, TdMarkdownNavigatorComponent_ng_container_0_div_4_Template, 5, 3, "div", 4);
-    i0.ɵɵtemplate(5, TdMarkdownNavigatorComponent_ng_container_0_td_message_5_Template, 1, 2, "td-message", 5);
-    i0.ɵɵtemplate(6, TdMarkdownNavigatorComponent_ng_container_0_div_6_Template, 3, 1, "div", 6);
-    i0.ɵɵtemplate(7, TdMarkdownNavigatorComponent_ng_container_0_ng_container_7_Template, 1, 0, "ng-container", 7);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementContainerEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r0.loading);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r0.showHeader);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r0.showTdMarkdownLoader || ctx_r0.showTdMarkdown);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r0.childrenUrlError);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", ctx_r0.showMenu);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngComponentOutlet", ctx_r0.footerComponent);
-} }
-function TdMarkdownNavigatorComponent_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27);
-    i0.ɵɵelementStart(1, "mat-icon", 28);
-    i0.ɵɵtext(2, "subject");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "h2");
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r1.emptyStateLabel);
-} }
 const DEFAULT_MARKDOWN_NAVIGATOR_LABELS = {
     goHome: 'Go home',
     goBack: 'Go back',
     emptyState: 'No item(s) to display',
 };
-function getTitleFromUrl(url) {
-    if (url) {
-        const temp = new URL(url);
-        if (temp.hash) {
-            return removeLeadingHash(temp.hash);
-        }
-        else {
-            const path = temp.pathname.split('/');
-            const fileName = path[path.length - 1];
-            return fileName.replace(/\.[^/.]+$/, ''); // remove .md
-        }
-    }
-    return undefined;
-}
-function getTitleFromMarkdownString(markdownString) {
-    if (markdownString) {
-        const firstLine = markdownString.split(/[\r\n]+/).find((line) => !!line);
-        return removeLeadingHash(firstLine).trim();
-    }
-    return undefined;
-}
-function isMarkdownHref(anchor) {
-    return !isAnchorLink(anchor) && anchor.pathname.endsWith('.md');
-}
-function defaultCompareWith(o1, o2) {
-    if (o1.id && o2.id) {
-        return o1.id === o2.id;
-    }
-    return o1 === o2;
-}
 class TdMarkdownNavigatorComponent {
     constructor(_markdownUrlLoaderService, _changeDetectorRef, _sanitizer, _http) {
         this._markdownUrlLoaderService = _markdownUrlLoaderService;
@@ -280,27 +58,28 @@ class TdMarkdownNavigatorComponent {
     }
     clickListener(event) {
         const element = event.srcElement;
-        if (element.matches('a[href]') && isMarkdownHref(element)) {
+        if (element.matches('a[href]') &&
+            isMarkdownHref(element)) {
             this.handleLinkClick(event);
         }
     }
     get showGoBackButton() {
         return this.historyStack.length > 0;
     }
-    get showHomeButton() {
-        return this.historyStack.length > 1;
-    }
     get showHeader() {
-        return this.showHomeButton || this.showGoBackButton || !!this.currentItemTitle;
+        return this.showGoBackButton || !!this.currentItemTitle;
     }
     get showMenu() {
-        return this.currentMenuItems && this.currentMenuItems.length > 0;
+        const showMenu = this.currentMenuItems && this.currentMenuItems.length > 0;
+        return showMenu ?? false;
     }
     get showTdMarkdownLoader() {
-        return !!this.currentMarkdownItem && !!this.currentMarkdownItem.url && !this.showTdMarkdown;
+        return (!!this.currentMarkdownItem &&
+            !!this.currentMarkdownItem.url &&
+            !this.showTdMarkdown);
     }
     get showTdMarkdown() {
-        return !!this.currentMarkdownItem && !!this.currentMarkdownItem.markdownString;
+        return (!!this.currentMarkdownItem && !!this.currentMarkdownItem.markdownString);
     }
     get url() {
         if (this.currentMarkdownItem) {
@@ -318,28 +97,34 @@ class TdMarkdownNavigatorComponent {
         if (this.currentMarkdownItem) {
             return this.currentMarkdownItem.httpOptions;
         }
+        return undefined;
     }
     get markdownString() {
         if (this.currentMarkdownItem) {
             return this.currentMarkdownItem.markdownString;
         }
+        return undefined;
     }
     get anchor() {
         if (this.currentMarkdownItem) {
             return this.currentMarkdownItem.anchor;
         }
+        return undefined;
     }
     get showEmptyState() {
         return !this.items || this.items.length < 1;
     }
     get goHomeLabel() {
-        return (this.labels && this.labels.goHome) || DEFAULT_MARKDOWN_NAVIGATOR_LABELS.goHome;
+        return ((this.labels && this.labels.goHome) ||
+            DEFAULT_MARKDOWN_NAVIGATOR_LABELS.goHome);
     }
     get goBackLabel() {
-        return (this.labels && this.labels.goBack) || DEFAULT_MARKDOWN_NAVIGATOR_LABELS.goBack;
+        return ((this.labels && this.labels.goBack) ||
+            DEFAULT_MARKDOWN_NAVIGATOR_LABELS.goBack);
     }
     get emptyStateLabel() {
-        return (this.labels && this.labels.emptyState) || DEFAULT_MARKDOWN_NAVIGATOR_LABELS.emptyState;
+        return ((this.labels && this.labels.emptyState) ||
+            DEFAULT_MARKDOWN_NAVIGATOR_LABELS.emptyState);
     }
     get currentItemTitle() {
         if (this.historyStack.length < 1) {
@@ -354,10 +139,10 @@ class TdMarkdownNavigatorComponent {
         return '';
     }
     async ngOnChanges(changes) {
-        if (changes.items) {
+        if (changes['items']) {
             this.reset();
         }
-        if (changes.startAt && this.items && this.startAt) {
+        if (changes['startAt'] && this.items && this.startAt) {
             this._jumpTo(this.startAt, undefined);
         }
     }
@@ -372,7 +157,9 @@ class TdMarkdownNavigatorComponent {
         this.loading = false;
         this.clearErrors();
         // if single item and no children
-        if (this.items && this.items.length === 1 && !this.hasChildrenOrChildrenUrl(this.items[0])) {
+        if (this.items &&
+            this.items.length === 1 &&
+            !this.hasChildrenOrChildrenUrl(this.items[0])) {
             this.currentMenuItems = [];
             this.currentMarkdownItem = this.items[0];
         }
@@ -383,20 +170,20 @@ class TdMarkdownNavigatorComponent {
         this.historyStack = [];
         this._changeDetectorRef.markForCheck();
     }
-    goBack() {
+    goBack(goBackLength = 1) {
         this.loading = false;
         this.clearErrors();
         if (this.historyStack.length > 1) {
             let parent = this.historyStack[this.historyStack.length - 2];
-            if (parent.startAtLink) {
+            if (parent?.startAtLink) {
                 parent = this.historyStack[this.historyStack.length - 3]
                     ? this.historyStack[this.historyStack.length - 3]
                     : undefined;
-                this.historyStack = this.historyStack.slice(0, -1);
+                this.historyStack = this.historyStack.slice(0, -goBackLength);
             }
             if (parent) {
                 this.currentMarkdownItem = parent;
-                this.historyStack = this.historyStack.slice(0, -1);
+                this.historyStack = this.historyStack.slice(0, -goBackLength);
                 this.setChildrenAsCurrentMenuItems(parent);
             }
             else {
@@ -440,9 +227,12 @@ class TdMarkdownNavigatorComponent {
         this._changeDetectorRef.markForCheck();
     }
     async loadChildrenUrl(item) {
-        const sanitizedUrl = this._sanitizer.sanitize(SecurityContext.URL, item.childrenUrl);
+        const sanitizedUrl = this._sanitizer.sanitize(SecurityContext.URL, item.childrenUrl ?? null) ??
+            '';
         try {
-            return await this._http.get(sanitizedUrl, { ...item.httpOptions }).toPromise();
+            return await firstValueFrom(this._http.get(sanitizedUrl, {
+                ...item.httpOptions,
+            }));
         }
         catch (error) {
             this.handleChildrenUrlError(error);
@@ -450,25 +240,24 @@ class TdMarkdownNavigatorComponent {
         }
     }
     getTitle(item) {
-        if (item) {
-            return (removeLeadingHash(item.anchor) ||
-                item.title ||
-                getTitleFromUrl(item.url) ||
-                getTitleFromMarkdownString(item.markdownString) ||
-                '').trim();
+        if (!item) {
+            return '';
         }
+        return (removeLeadingHash(item.anchor ?? '') ||
+            item.title ||
+            getTitleFromUrl(item.url ?? '') ||
+            getTitleFromMarkdownString(item.markdownString ?? '') ||
+            '').trim();
     }
     getIcon(item) {
-        if (item) {
-            return item.icon || 'subject';
-        }
+        return item?.icon || 'subject';
     }
     handleChildrenUrlError(error) {
         this.childrenUrlError = error.message;
         this._changeDetectorRef.markForCheck();
     }
     handleMarkdownLoaderError(error) {
-        this.markdownLoaderError = error.message;
+        this.markdownLoaderError = error ? error.message : '';
         this._changeDetectorRef.markForCheck();
     }
     async _jumpTo(itemOrPath, children) {
@@ -518,7 +307,7 @@ class TdMarkdownNavigatorComponent {
         const compareWith = this.compareWith || defaultCompareWith;
         if (items) {
             for (const child of items) {
-                if (compareWith(child, item)) {
+                if (item && compareWith(child, item)) {
                     return [child];
                 }
                 const ancestors = this.findPath(child.children, item);
@@ -543,7 +332,7 @@ class TdMarkdownNavigatorComponent {
         }
         catch (error) {
             const win = window.open(url.href, '_blank');
-            win.focus();
+            win?.focus();
         }
         finally {
             this.loading = false;
@@ -551,48 +340,64 @@ class TdMarkdownNavigatorComponent {
         this._changeDetectorRef.markForCheck();
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdMarkdownNavigatorComponent.ɵfac = function TdMarkdownNavigatorComponent_Factory(t) { return new (t || TdMarkdownNavigatorComponent)(i0.ɵɵdirectiveInject(i1.TdMarkdownLoaderService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i2.DomSanitizer), i0.ɵɵdirectiveInject(i3.HttpClient)); };
-/** @nocollapse */ /** @nocollapse */ TdMarkdownNavigatorComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdMarkdownNavigatorComponent, selectors: [["td-markdown-navigator"]], viewQuery: function TdMarkdownNavigatorComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0, 5);
-    } if (rf & 2) {
-        let _t;
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.markdownWrapper = _t.first);
-    } }, hostBindings: function TdMarkdownNavigatorComponent_HostBindings(rf, ctx) { if (rf & 1) {
-        i0.ɵɵlistener("click", function TdMarkdownNavigatorComponent_click_HostBindingHandler($event) { return ctx.clickListener($event); });
-    } }, inputs: { items: "items", labels: "labels", startAt: "startAt", copyCodeToClipboard: "copyCodeToClipboard", copyCodeTooltips: "copyCodeTooltips", footer: "footer", compareWith: "compareWith" }, outputs: { buttonClicked: "buttonClicked" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 2, consts: [[4, "ngIf"], ["layout", "column", "layout-align", "center center", "class", "empty-state", 4, "ngIf"], ["mode", "indeterminate", "color", "accent", 4, "ngIf"], ["id", "td-markdown-navigator-content", 1, "scroll-area"], ["class", "markdown-wrapper", 4, "ngIf"], ["color", "warn", "icon", "error", 3, "sublabel", 4, "ngIf"], ["class", "td-markdown-list", 4, "ngIf"], [4, "ngComponentOutlet"], ["mode", "indeterminate", "color", "accent"], ["id", "td-markdown-navigator-home-button", "mat-icon-button", "", 3, "matTooltip", "click", 4, "ngIf"], ["id", "td-markdown-navigator-back-button", "mat-icon-button", "", 3, "matTooltip", "click", 4, "ngIf"], ["flex", "", "class", "mat-body-2 title truncate", 4, "ngIf"], ["id", "td-markdown-navigator-home-button", "mat-icon-button", "", 3, "matTooltip", "click"], ["id", "td-markdown-navigator-back-button", "mat-icon-button", "", 3, "matTooltip", "click"], ["flex", "", 1, "mat-body-2", "title", "truncate"], [1, "markdown-wrapper"], ["markdownWrapper", ""], [3, "url", "httpOptions", "anchor", "copyCodeToClipboard", "copyCodeTooltips", "loadFailed", 4, "ngIf"], [3, "content", "hostedUrl", "anchor", "copyCodeToClipboard", "copyCodeTooltips", "buttonClicked", 4, "ngIf"], ["color", "warn", "icon", "error", 3, "sublabel"], [3, "url", "httpOptions", "anchor", "copyCodeToClipboard", "copyCodeTooltips", "loadFailed"], [3, "content", "hostedUrl", "anchor", "copyCodeToClipboard", "copyCodeTooltips", "buttonClicked"], [1, "td-markdown-list"], ["mat-list-item", "", "matTooltipPosition", "before", "matTooltipShowDelay", "500", 3, "id", "matTooltip", "click", 4, "ngFor", "ngForOf"], ["mat-list-item", "", "matTooltipPosition", "before", "matTooltipShowDelay", "500", 3, "id", "matTooltip", "click"], ["matListIcon", ""], ["matLine", "", 1, "truncate"], ["layout", "column", "layout-align", "center center", 1, "empty-state"], ["matListAvatar", ""]], template: function TdMarkdownNavigatorComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵtemplate(0, TdMarkdownNavigatorComponent_ng_container_0_Template, 8, 6, "ng-container", 0);
-        i0.ɵɵtemplate(1, TdMarkdownNavigatorComponent_div_1_Template, 5, 1, "div", 1);
-    } if (rf & 2) {
-        i0.ɵɵproperty("ngIf", !ctx.showEmptyState);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx.showEmptyState);
-    } }, directives: [i4.NgIf, i5.MatProgressBar, i6.MatButton, i7.MatTooltip, i8.MatIcon, i9.MatDivider, i10.TdMessageComponent, i11.TdFlavoredMarkdownLoaderComponent, i11.TdFlavoredMarkdownComponent, i12.MatList, i4.NgForOf, i12.MatListItem, i12.MatListIconCssMatStyler, i13.MatLine, i4.NgComponentOutlet, i12.MatListAvatarCssMatStyler], styles: ["[_nghost-%COMP%]{position:relative;height:inherit;height:100%;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}[_nghost-%COMP%]   .scroll-area[_ngcontent-%COMP%]{min-height:1px;overflow-y:auto;-ms-flex:1;flex:1;box-sizing:border-box}[_nghost-%COMP%]   .markdown-wrapper[_ngcontent-%COMP%]{padding:16px 16px 0}[_nghost-%COMP%]   .td-markdown-list[_ngcontent-%COMP%] > .mat-list[_ngcontent-%COMP%]{padding-top:0}[_nghost-%COMP%]   td-flavored-markdown-loader[_ngcontent-%COMP%]     .mat-progress-bar{top:0;left:0;right:0;position:absolute}[_nghost-%COMP%]   .title[_ngcontent-%COMP%]{display:inline-block;vertical-align:middle;margin:8px 0;padding-left:16px}.truncate[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.empty-state[_ngcontent-%COMP%]{padding:32px}.empty-state[_ngcontent-%COMP%]   mat-icon[_ngcontent-%COMP%]{font-size:4em}"], changeDetection: 0 });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdMarkdownNavigatorComponent, [{
-        type: Component,
-        args: [{ selector: 'td-markdown-navigator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!showEmptyState\">\n  <mat-progress-bar *ngIf=\"loading\" mode=\"indeterminate\" color=\"accent\"></mat-progress-bar>\n\n  <ng-container *ngIf=\"showHeader\">\n    <div [style.display]=\"'flex'\">\n      <button\n        id=\"td-markdown-navigator-home-button\"\n        *ngIf=\"showHomeButton\"\n        mat-icon-button\n        [matTooltip]=\"goHomeLabel\"\n        (click)=\"reset()\"\n        [attr.data-test]=\"'home-button'\"\n      >\n        <mat-icon [attr.aria-label]=\"goHomeLabel\">home</mat-icon>\n      </button>\n\n      <button\n        id=\"td-markdown-navigator-back-button\"\n        *ngIf=\"showGoBackButton\"\n        mat-icon-button\n        [matTooltip]=\"goBackLabel\"\n        (click)=\"goBack()\"\n        [attr.data-test]=\"'back-button'\"\n      >\n        <mat-icon [attr.aria-label]=\"goBackLabel\">arrow_back</mat-icon>\n      </button>\n      <span flex *ngIf=\"currentItemTitle\" class=\"mat-body-2 title truncate\" [attr.data-test]=\"'title'\">\n        {{ currentItemTitle }}\n      </span>\n    </div>\n\n    <mat-divider [style.position]=\"'relative'\"></mat-divider>\n  </ng-container>\n\n  <div class=\"scroll-area\" id=\"td-markdown-navigator-content\">\n    <div *ngIf=\"showTdMarkdownLoader || showTdMarkdown\" class=\"markdown-wrapper\" #markdownWrapper>\n      <td-message\n        *ngIf=\"markdownLoaderError\"\n        [sublabel]=\"markdownLoaderError\"\n        color=\"warn\"\n        icon=\"error\"\n        [attr.data-test]=\"'markdown-loader-error'\"\n      ></td-message>\n      <td-flavored-markdown-loader\n        *ngIf=\"showTdMarkdownLoader\"\n        [url]=\"url\"\n        [httpOptions]=\"httpOptions\"\n        [anchor]=\"anchor\"\n        [copyCodeToClipboard]=\"copyCodeToClipboard\"\n        [copyCodeTooltips]=\"copyCodeTooltips\"\n        (loadFailed)=\"handleMarkdownLoaderError($event)\"\n      ></td-flavored-markdown-loader>\n      <td-flavored-markdown\n        *ngIf=\"showTdMarkdown\"\n        [content]=\"markdownString\"\n        [hostedUrl]=\"url\"\n        [anchor]=\"anchor\"\n        [copyCodeToClipboard]=\"copyCodeToClipboard\"\n        [copyCodeTooltips]=\"copyCodeTooltips\"\n        (buttonClicked)=\"buttonClicked.emit($event)\"\n      ></td-flavored-markdown>\n    </div>\n\n    <td-message\n      *ngIf=\"childrenUrlError\"\n      [sublabel]=\"childrenUrlError\"\n      color=\"warn\"\n      icon=\"error\"\n      [attr.data-test]=\"'children-url-error'\"\n    ></td-message>\n    <div *ngIf=\"showMenu\" class=\"td-markdown-list\">\n      <mat-action-list>\n        <button\n          *ngFor=\"let item of currentMenuItems; index as index\"\n          [id]=\"'td-markdown-navigator-list-item-' + (item.id ? item.id : index)\"\n          (click)=\"handleItemSelected(item)\"\n          mat-list-item\n          [matTooltip]=\"getTitle(item)\"\n          matTooltipPosition=\"before\"\n          matTooltipShowDelay=\"500\"\n        >\n          <mat-icon matListIcon>\n            {{ getIcon(item) }}\n          </mat-icon>\n          <span matLine class=\"truncate\">\n            {{ getTitle(item) }}\n          </span>\n          <span matLine class=\"truncate\">{{ item.description }}</span>\n          <mat-divider></mat-divider>\n        </button>\n      </mat-action-list>\n    </div>\n\n    <ng-container *ngComponentOutlet=\"footerComponent\"></ng-container>\n  </div>\n</ng-container>\n\n<div *ngIf=\"showEmptyState\" layout=\"column\" layout-align=\"center center\" class=\"empty-state\">\n  <mat-icon matListAvatar>subject</mat-icon>\n  <h2>{{ emptyStateLabel }}</h2>\n</div>\n", styles: [":host{position:relative;height:inherit;height:100%;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .scroll-area{min-height:1px;overflow-y:auto;-ms-flex:1;flex:1;box-sizing:border-box}:host .markdown-wrapper{padding:16px 16px 0}:host .td-markdown-list>.mat-list{padding-top:0}:host td-flavored-markdown-loader ::ng-deep .mat-progress-bar{top:0;left:0;right:0;position:absolute}:host .title{display:inline-block;vertical-align:middle;margin:8px 0;padding-left:16px}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.empty-state{padding:32px}.empty-state mat-icon{font-size:4em}\n"] }]
-    }], function () { return [{ type: i1.TdMarkdownLoaderService }, { type: i0.ChangeDetectorRef }, { type: i2.DomSanitizer }, { type: i3.HttpClient }]; }, { items: [{
-            type: Input
-        }], labels: [{
-            type: Input
-        }], startAt: [{
-            type: Input
-        }], copyCodeToClipboard: [{
-            type: Input
-        }], copyCodeTooltips: [{
-            type: Input
-        }], footer: [{
-            type: Input
-        }], compareWith: [{
-            type: Input
-        }], buttonClicked: [{
-            type: Output
-        }], markdownWrapper: [{
-            type: ViewChild,
-            args: ['markdownWrapper']
-        }], clickListener: [{
-            type: HostListener,
-            args: ['click', ['$event']]
-        }] }); })();
+TdMarkdownNavigatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdMarkdownNavigatorComponent, deps: [{ token: i1.TdMarkdownLoaderService }, { token: i0.ChangeDetectorRef }, { token: i2.DomSanitizer }, { token: i3.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+TdMarkdownNavigatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdMarkdownNavigatorComponent, selector: "td-markdown-navigator", inputs: { items: "items", labels: "labels", startAt: "startAt", copyCodeToClipboard: "copyCodeToClipboard", copyCodeTooltips: "copyCodeTooltips", footer: "footer", compareWith: "compareWith" }, outputs: { buttonClicked: "buttonClicked" }, host: { listeners: { "click": "clickListener($event)" } }, viewQueries: [{ propertyName: "markdownWrapper", first: true, predicate: ["markdownWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!showEmptyState\">\n  <mat-progress-bar\n    *ngIf=\"loading\"\n    mode=\"indeterminate\"\n    color=\"accent\"\n  ></mat-progress-bar>\n  <ng-container *ngIf=\"showHeader\">\n    <td-breadcrumbs>\n      <a\n        td-breadcrumb\n        [matTooltip]=\"goHomeLabel ?? ''\"\n        (click)=\"reset()\"\n        [attr.data-test]=\"'home-button'\"\n        >Home</a\n      >\n      <ng-container\n        *ngFor=\"let stack of historyStack; last as isLast; index as index\"\n      >\n        <ng-container *ngIf=\"!isLast; else lastBreadCrumb\">\n          <a\n            td-breadcrumb\n            (click)=\"goBack(index)\"\n            [attr.data-test]=\"'back-button'\"\n            >{{ stack.title }}</a\n          >\n        </ng-container>\n        <ng-template #lastBreadCrumb>\n          <mat-icon class=\"breadcrumb-end-icon\">chevron_right</mat-icon>\n        </ng-template>\n      </ng-container>\n    </td-breadcrumbs>\n    <div class=\"breadcrumb-current-title\" [attr.data-test]=\"'title'\">\n      {{ currentItemTitle }}\n    </div>\n\n    <mat-divider [style.position]=\"'relative'\"></mat-divider>\n  </ng-container>\n\n  <div class=\"scroll-area\" id=\"td-markdown-navigator-content\">\n    <div\n      *ngIf=\"showTdMarkdownLoader || showTdMarkdown\"\n      class=\"markdown-wrapper\"\n      #markdownWrapper\n    >\n      <td-message\n        *ngIf=\"markdownLoaderError\"\n        [sublabel]=\"markdownLoaderError\"\n        color=\"warn\"\n        icon=\"error\"\n        [attr.data-test]=\"'markdown-loader-error'\"\n      ></td-message>\n      <td-flavored-markdown-loader\n        *ngIf=\"showTdMarkdownLoader\"\n        [url]=\"url ?? ''\"\n        [httpOptions]=\"httpOptions ?? {}\"\n        [anchor]=\"anchor ?? ''\"\n        [copyCodeToClipboard]=\"copyCodeToClipboard\"\n        [copyCodeTooltips]=\"copyCodeTooltips\"\n        (loadFailed)=\"handleMarkdownLoaderError($event)\"\n      ></td-flavored-markdown-loader>\n      <td-flavored-markdown\n        *ngIf=\"showTdMarkdown\"\n        [content]=\"markdownString ?? ''\"\n        [hostedUrl]=\"url ?? ''\"\n        [anchor]=\"anchor ?? ''\"\n        [copyCodeToClipboard]=\"copyCodeToClipboard\"\n        [copyCodeTooltips]=\"copyCodeTooltips\"\n        (buttonClicked)=\"buttonClicked.emit($event)\"\n      ></td-flavored-markdown>\n    </div>\n\n    <td-message\n      *ngIf=\"childrenUrlError\"\n      [sublabel]=\"childrenUrlError\"\n      color=\"warn\"\n      icon=\"error\"\n      [attr.data-test]=\"'children-url-error'\"\n    ></td-message>\n    <div *ngIf=\"showMenu\" class=\"td-markdown-list\">\n      <mat-action-list>\n        <button\n          *ngFor=\"let item of currentMenuItems; index as index\"\n          [id]=\"\n            'td-markdown-navigator-list-item-' + (item.id ? item.id : index)\n          \"\n          (click)=\"handleItemSelected(item)\"\n          mat-list-item\n          [matTooltip]=\"getTitle(item)\"\n          matTooltipPosition=\"before\"\n          matTooltipShowDelay=\"500\"\n        >\n          <mat-icon matListIcon>\n            {{ getIcon(item) }}\n          </mat-icon>\n          <span matLine class=\"truncate\">\n            {{ getTitle(item) }}\n          </span>\n          <span matLine class=\"truncate\">{{ item.description }}</span>\n          <mat-divider></mat-divider>\n        </button>\n      </mat-action-list>\n    </div>\n\n    <ng-container *ngComponentOutlet=\"footerComponent\"></ng-container>\n  </div>\n</ng-container>\n\n<div\n  *ngIf=\"showEmptyState\"\n  layout=\"column\"\n  layout-align=\"center center\"\n  class=\"empty-state\"\n>\n  <mat-icon matListAvatar>subject</mat-icon>\n  <h2>{{ emptyStateLabel }}</h2>\n</div>\n", styles: [":host{position:relative;height:inherit;height:100%;box-sizing:border-box;display:flex;flex-direction:column}:host td-breadcrumbs::ng-deep{margin:16px 16px 8px}:host td-breadcrumbs::ng-deep mat-icon{font-size:16px;margin-left:1px;margin-right:0;margin-top:-1px}:host .breadcrumb-end-icon{line-height:16px;margin-top:1px}:host .breadcrumb-current-title{font-weight:700;margin:0 16px 16px}:host .scroll-area{min-height:1px;overflow-y:auto;flex:1;box-sizing:border-box}:host .markdown-wrapper{padding:16px 16px 0}:host .td-markdown-list>.mat-list{padding-top:0}:host td-flavored-markdown-loader ::ng-deep .mat-progress-bar{top:0;left:0;right:0;position:absolute}:host .title{display:inline-block;vertical-align:middle;margin:8px 0;padding-left:16px}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.empty-state{padding:32px}.empty-state mat-icon{font-size:4em}\n"], components: [{ type: i4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i5.TdBreadcrumbsComponent, selector: "td-breadcrumbs", inputs: ["separatorIcon"] }, { type: i5.TdBreadcrumbComponent, selector: "td-breadcrumb, a[td-breadcrumb]" }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i8.TdMessageComponent, selector: "td-message", inputs: ["label", "sublabel", "icon", "color", "opened"] }, { type: i9.TdFlavoredMarkdownLoaderComponent, selector: "td-flavored-markdown-loader", inputs: ["url", "httpOptions", "anchor", "copyCodeToClipboard", "copyCodeTooltips"], outputs: ["contentReady", "loadFailed", "buttonClicked"] }, { type: i9.TdFlavoredMarkdownComponent, selector: "td-flavored-markdown", inputs: ["content", "simpleLineBreaks", "hostedUrl", "anchor", "copyCodeToClipboard", "copyCodeTooltips"], outputs: ["contentReady", "buttonClicked"] }, { type: i10.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i10.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i13.MatLine, selector: "[mat-line], [matLine]" }, { type: i11.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModuleFactory"] }, { type: i10.MatListAvatarCssMatStyler, selector: "[mat-list-avatar], [matListAvatar]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdMarkdownNavigatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-markdown-navigator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!showEmptyState\">\n  <mat-progress-bar\n    *ngIf=\"loading\"\n    mode=\"indeterminate\"\n    color=\"accent\"\n  ></mat-progress-bar>\n  <ng-container *ngIf=\"showHeader\">\n    <td-breadcrumbs>\n      <a\n        td-breadcrumb\n        [matTooltip]=\"goHomeLabel ?? ''\"\n        (click)=\"reset()\"\n        [attr.data-test]=\"'home-button'\"\n        >Home</a\n      >\n      <ng-container\n        *ngFor=\"let stack of historyStack; last as isLast; index as index\"\n      >\n        <ng-container *ngIf=\"!isLast; else lastBreadCrumb\">\n          <a\n            td-breadcrumb\n            (click)=\"goBack(index)\"\n            [attr.data-test]=\"'back-button'\"\n            >{{ stack.title }}</a\n          >\n        </ng-container>\n        <ng-template #lastBreadCrumb>\n          <mat-icon class=\"breadcrumb-end-icon\">chevron_right</mat-icon>\n        </ng-template>\n      </ng-container>\n    </td-breadcrumbs>\n    <div class=\"breadcrumb-current-title\" [attr.data-test]=\"'title'\">\n      {{ currentItemTitle }}\n    </div>\n\n    <mat-divider [style.position]=\"'relative'\"></mat-divider>\n  </ng-container>\n\n  <div class=\"scroll-area\" id=\"td-markdown-navigator-content\">\n    <div\n      *ngIf=\"showTdMarkdownLoader || showTdMarkdown\"\n      class=\"markdown-wrapper\"\n      #markdownWrapper\n    >\n      <td-message\n        *ngIf=\"markdownLoaderError\"\n        [sublabel]=\"markdownLoaderError\"\n        color=\"warn\"\n        icon=\"error\"\n        [attr.data-test]=\"'markdown-loader-error'\"\n      ></td-message>\n      <td-flavored-markdown-loader\n        *ngIf=\"showTdMarkdownLoader\"\n        [url]=\"url ?? ''\"\n        [httpOptions]=\"httpOptions ?? {}\"\n        [anchor]=\"anchor ?? ''\"\n        [copyCodeToClipboard]=\"copyCodeToClipboard\"\n        [copyCodeTooltips]=\"copyCodeTooltips\"\n        (loadFailed)=\"handleMarkdownLoaderError($event)\"\n      ></td-flavored-markdown-loader>\n      <td-flavored-markdown\n        *ngIf=\"showTdMarkdown\"\n        [content]=\"markdownString ?? ''\"\n        [hostedUrl]=\"url ?? ''\"\n        [anchor]=\"anchor ?? ''\"\n        [copyCodeToClipboard]=\"copyCodeToClipboard\"\n        [copyCodeTooltips]=\"copyCodeTooltips\"\n        (buttonClicked)=\"buttonClicked.emit($event)\"\n      ></td-flavored-markdown>\n    </div>\n\n    <td-message\n      *ngIf=\"childrenUrlError\"\n      [sublabel]=\"childrenUrlError\"\n      color=\"warn\"\n      icon=\"error\"\n      [attr.data-test]=\"'children-url-error'\"\n    ></td-message>\n    <div *ngIf=\"showMenu\" class=\"td-markdown-list\">\n      <mat-action-list>\n        <button\n          *ngFor=\"let item of currentMenuItems; index as index\"\n          [id]=\"\n            'td-markdown-navigator-list-item-' + (item.id ? item.id : index)\n          \"\n          (click)=\"handleItemSelected(item)\"\n          mat-list-item\n          [matTooltip]=\"getTitle(item)\"\n          matTooltipPosition=\"before\"\n          matTooltipShowDelay=\"500\"\n        >\n          <mat-icon matListIcon>\n            {{ getIcon(item) }}\n          </mat-icon>\n          <span matLine class=\"truncate\">\n            {{ getTitle(item) }}\n          </span>\n          <span matLine class=\"truncate\">{{ item.description }}</span>\n          <mat-divider></mat-divider>\n        </button>\n      </mat-action-list>\n    </div>\n\n    <ng-container *ngComponentOutlet=\"footerComponent\"></ng-container>\n  </div>\n</ng-container>\n\n<div\n  *ngIf=\"showEmptyState\"\n  layout=\"column\"\n  layout-align=\"center center\"\n  class=\"empty-state\"\n>\n  <mat-icon matListAvatar>subject</mat-icon>\n  <h2>{{ emptyStateLabel }}</h2>\n</div>\n", styles: [":host{position:relative;height:inherit;height:100%;box-sizing:border-box;display:flex;flex-direction:column}:host td-breadcrumbs::ng-deep{margin:16px 16px 8px}:host td-breadcrumbs::ng-deep mat-icon{font-size:16px;margin-left:1px;margin-right:0;margin-top:-1px}:host .breadcrumb-end-icon{line-height:16px;margin-top:1px}:host .breadcrumb-current-title{font-weight:700;margin:0 16px 16px}:host .scroll-area{min-height:1px;overflow-y:auto;flex:1;box-sizing:border-box}:host .markdown-wrapper{padding:16px 16px 0}:host .td-markdown-list>.mat-list{padding-top:0}:host td-flavored-markdown-loader ::ng-deep .mat-progress-bar{top:0;left:0;right:0;position:absolute}:host .title{display:inline-block;vertical-align:middle;margin:8px 0;padding-left:16px}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.empty-state{padding:32px}.empty-state mat-icon{font-size:4em}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.TdMarkdownLoaderService }, { type: i0.ChangeDetectorRef }, { type: i2.DomSanitizer }, { type: i3.HttpClient }]; }, propDecorators: { items: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], startAt: [{
+                type: Input
+            }], copyCodeToClipboard: [{
+                type: Input
+            }], copyCodeTooltips: [{
+                type: Input
+            }], footer: [{
+                type: Input
+            }], compareWith: [{
+                type: Input
+            }], buttonClicked: [{
+                type: Output
+            }], markdownWrapper: [{
+                type: ViewChild,
+                args: ['markdownWrapper']
+            }], clickListener: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+function getTitleFromUrl(url) {
+    if (url) {
+        const temp = new URL(url);
+        if (temp.hash) {
+            return removeLeadingHash(temp.hash);
+        }
+        else {
+            const path = temp.pathname.split('/');
+            const fileName = path[path.length - 1];
+            return fileName.replace(/\.[^/.]+$/, ''); // remove .md
+        }
+    }
+    return '';
+}
+function getTitleFromMarkdownString(markdownString) {
+    if (markdownString) {
+        const firstLine = markdownString.split(/[\r\n]+/).find((line) => !!line) ?? '';
+        return removeLeadingHash(firstLine).trim();
+    }
+    return '';
+}
+function isMarkdownHref(anchor) {
+    return !isAnchorLink(anchor) && anchor.pathname.endsWith('.md');
+}
+function defaultCompareWith(o1, o2) {
+    if (o1.id && o2.id) {
+        return o1.id === o2.id;
+    }
+    return o1 === o2;
+}
 
 const DEFAULT_MARKDOWN_NAVIGATOR_WINDOW_LABELS = {
     title: 'Help',
@@ -611,75 +416,68 @@ class TdMarkdownNavigatorWindowComponent {
         this.buttonClicked = new EventEmitter();
     }
     get markdownNavigatorLabels() {
-        if (this.labels) {
-            const { goHome, goBack, emptyState } = this.labels;
-            return {
-                goHome,
-                goBack,
-                emptyState,
-            };
+        if (!this.labels) {
+            return undefined;
         }
+        const { goHome, goBack, emptyState } = this.labels;
+        return {
+            goHome,
+            goBack,
+            emptyState,
+        };
     }
     get titleLabel() {
-        return (this.labels && this.labels.title) || DEFAULT_MARKDOWN_NAVIGATOR_WINDOW_LABELS.title;
+        return ((this.labels && this.labels.title) ||
+            DEFAULT_MARKDOWN_NAVIGATOR_WINDOW_LABELS.title);
     }
     get closeLabel() {
-        return (this.labels && this.labels.close) || DEFAULT_MARKDOWN_NAVIGATOR_WINDOW_LABELS.close;
+        return ((this.labels && this.labels.close) ||
+            DEFAULT_MARKDOWN_NAVIGATOR_WINDOW_LABELS.close);
     }
     get toggleDockedStateLabel() {
         if (this.docked) {
-            return (this.labels && this.labels.unDock) || DEFAULT_MARKDOWN_NAVIGATOR_WINDOW_LABELS.unDock;
+            return ((this.labels && this.labels.unDock) ||
+                DEFAULT_MARKDOWN_NAVIGATOR_WINDOW_LABELS.unDock);
         }
         else {
-            return (this.labels && this.labels.dock) || DEFAULT_MARKDOWN_NAVIGATOR_WINDOW_LABELS.dock;
+            return ((this.labels && this.labels.dock) ||
+                DEFAULT_MARKDOWN_NAVIGATOR_WINDOW_LABELS.dock);
         }
     }
     toggleDockedState() {
         this.dockToggled.emit(this.docked);
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdMarkdownNavigatorWindowComponent.ɵfac = function TdMarkdownNavigatorWindowComponent_Factory(t) { return new (t || TdMarkdownNavigatorWindowComponent)(); };
-/** @nocollapse */ /** @nocollapse */ TdMarkdownNavigatorWindowComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdMarkdownNavigatorWindowComponent, selectors: [["td-markdown-navigator-window"]], inputs: { items: "items", labels: "labels", toolbarColor: "toolbarColor", startAt: "startAt", compareWith: "compareWith", docked: "docked", copyCodeToClipboard: "copyCodeToClipboard", copyCodeTooltips: "copyCodeTooltips", footer: "footer" }, outputs: { closed: "closed", dockToggled: "dockToggled", buttonClicked: "buttonClicked" }, decls: 2, vars: 14, consts: [[3, "toolbarColor", "docked", "title", "toggleDockedStateLabel", "closeLabel", "dockToggled", "closed"], [3, "items", "labels", "startAt", "compareWith", "footer", "copyCodeToClipboard", "copyCodeTooltips", "buttonClicked"]], template: function TdMarkdownNavigatorWindowComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "td-window-dialog", 0);
-        i0.ɵɵlistener("dockToggled", function TdMarkdownNavigatorWindowComponent_Template_td_window_dialog_dockToggled_0_listener() { return ctx.toggleDockedState(); })("closed", function TdMarkdownNavigatorWindowComponent_Template_td_window_dialog_closed_0_listener() { return ctx.closed.emit(); });
-        i0.ɵɵelementStart(1, "td-markdown-navigator", 1);
-        i0.ɵɵlistener("buttonClicked", function TdMarkdownNavigatorWindowComponent_Template_td_markdown_navigator_buttonClicked_1_listener($event) { return ctx.buttonClicked.emit($event); });
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
-    } if (rf & 2) {
-        i0.ɵɵproperty("toolbarColor", ctx.toolbarColor)("docked", ctx.docked)("title", ctx.titleLabel)("toggleDockedStateLabel", ctx.toggleDockedStateLabel)("closeLabel", ctx.closeLabel);
-        i0.ɵɵadvance(1);
-        i0.ɵɵstyleProp("display", ctx.docked ? "none" : "inherit");
-        i0.ɵɵproperty("items", ctx.items)("labels", ctx.markdownNavigatorLabels)("startAt", ctx.startAt)("compareWith", ctx.compareWith)("footer", ctx.footer)("copyCodeToClipboard", ctx.copyCodeToClipboard)("copyCodeTooltips", ctx.copyCodeTooltips);
-    } }, directives: [i1$1.TdWindowDialogComponent, TdMarkdownNavigatorComponent], styles: ["[_nghost-%COMP%]{height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}td-markdown-navigator[_ngcontent-%COMP%]{height:calc(100% - 56px)}"], changeDetection: 0 });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdMarkdownNavigatorWindowComponent, [{
-        type: Component,
-        args: [{ selector: 'td-markdown-navigator-window', changeDetection: ChangeDetectionStrategy.OnPush, template: "<td-window-dialog\n  [toolbarColor]=\"toolbarColor\"\n  [docked]=\"docked\"\n  [title]=\"titleLabel\"\n  [toggleDockedStateLabel]=\"toggleDockedStateLabel\"\n  [closeLabel]=\"closeLabel\"\n  (dockToggled)=\"toggleDockedState()\"\n  (closed)=\"closed.emit()\"\n>\n  <td-markdown-navigator\n    [items]=\"items\"\n    [labels]=\"markdownNavigatorLabels\"\n    [style.display]=\"docked ? 'none' : 'inherit'\"\n    [startAt]=\"startAt\"\n    [compareWith]=\"compareWith\"\n    [footer]=\"footer\"\n    [copyCodeToClipboard]=\"copyCodeToClipboard\"\n    [copyCodeTooltips]=\"copyCodeTooltips\"\n    (buttonClicked)=\"buttonClicked.emit($event)\"\n  ></td-markdown-navigator>\n</td-window-dialog>\n", styles: [":host{height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}td-markdown-navigator{height:calc(100% - 56px)}\n"] }]
-    }], null, { items: [{
-            type: Input
-        }], labels: [{
-            type: Input
-        }], toolbarColor: [{
-            type: Input
-        }], startAt: [{
-            type: Input
-        }], compareWith: [{
-            type: Input
-        }], docked: [{
-            type: Input
-        }], copyCodeToClipboard: [{
-            type: Input
-        }], copyCodeTooltips: [{
-            type: Input
-        }], footer: [{
-            type: Input
-        }], closed: [{
-            type: Output
-        }], dockToggled: [{
-            type: Output
-        }], buttonClicked: [{
-            type: Output
-        }] }); })();
+TdMarkdownNavigatorWindowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdMarkdownNavigatorWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TdMarkdownNavigatorWindowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdMarkdownNavigatorWindowComponent, selector: "td-markdown-navigator-window", inputs: { items: "items", labels: "labels", toolbarColor: "toolbarColor", startAt: "startAt", compareWith: "compareWith", docked: "docked", copyCodeToClipboard: "copyCodeToClipboard", copyCodeTooltips: "copyCodeTooltips", footer: "footer" }, outputs: { closed: "closed", dockToggled: "dockToggled", buttonClicked: "buttonClicked" }, ngImport: i0, template: "<td-window-dialog\n  [toolbarColor]=\"toolbarColor\"\n  [docked]=\"docked\"\n  [title]=\"titleLabel\"\n  [toggleDockedStateLabel]=\"toggleDockedStateLabel\"\n  [closeLabel]=\"closeLabel\"\n  (dockToggled)=\"toggleDockedState()\"\n  (closed)=\"closed.emit()\"\n>\n  <td-markdown-navigator\n    [items]=\"items\"\n    [labels]=\"markdownNavigatorLabels\"\n    [style.display]=\"docked ? 'none' : 'inherit'\"\n    [startAt]=\"startAt\"\n    [compareWith]=\"compareWith\"\n    [footer]=\"footer\"\n    [copyCodeToClipboard]=\"copyCodeToClipboard\"\n    [copyCodeTooltips]=\"copyCodeTooltips\"\n    (buttonClicked)=\"buttonClicked.emit($event)\"\n  ></td-markdown-navigator>\n</td-window-dialog>\n", styles: [":host{height:100%;display:flex;flex-direction:column}td-markdown-navigator{height:calc(100% - 56px)}\n"], components: [{ type: i1$1.TdWindowDialogComponent, selector: "td-window-dialog", inputs: ["toolbarColor", "docked", "title", "toggleDockedStateLabel", "closeLabel"], outputs: ["dockToggled", "closed"] }, { type: TdMarkdownNavigatorComponent, selector: "td-markdown-navigator", inputs: ["items", "labels", "startAt", "copyCodeToClipboard", "copyCodeTooltips", "footer", "compareWith"], outputs: ["buttonClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdMarkdownNavigatorWindowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-markdown-navigator-window', changeDetection: ChangeDetectionStrategy.OnPush, template: "<td-window-dialog\n  [toolbarColor]=\"toolbarColor\"\n  [docked]=\"docked\"\n  [title]=\"titleLabel\"\n  [toggleDockedStateLabel]=\"toggleDockedStateLabel\"\n  [closeLabel]=\"closeLabel\"\n  (dockToggled)=\"toggleDockedState()\"\n  (closed)=\"closed.emit()\"\n>\n  <td-markdown-navigator\n    [items]=\"items\"\n    [labels]=\"markdownNavigatorLabels\"\n    [style.display]=\"docked ? 'none' : 'inherit'\"\n    [startAt]=\"startAt\"\n    [compareWith]=\"compareWith\"\n    [footer]=\"footer\"\n    [copyCodeToClipboard]=\"copyCodeToClipboard\"\n    [copyCodeTooltips]=\"copyCodeTooltips\"\n    (buttonClicked)=\"buttonClicked.emit($event)\"\n  ></td-markdown-navigator>\n</td-window-dialog>\n", styles: [":host{height:100%;display:flex;flex-direction:column}td-markdown-navigator{height:calc(100% - 56px)}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], toolbarColor: [{
+                type: Input
+            }], startAt: [{
+                type: Input
+            }], compareWith: [{
+                type: Input
+            }], docked: [{
+                type: Input
+            }], copyCodeToClipboard: [{
+                type: Input
+            }], copyCodeTooltips: [{
+                type: Input
+            }], footer: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }], dockToggled: [{
+                type: Output
+            }], buttonClicked: [{
+                type: Output
+            }] } });
 
 const CDK_OVERLAY_CUSTOM_CLASS = 'td-window-dialog';
 const DEFAULT_POSITION = { bottom: '0px', right: '0px' };
@@ -701,27 +499,19 @@ class TdMarkdownNavigatorWindowService {
         this._tdDialogService = _tdDialogService;
         this._document = _document;
         this.rendererFactory = rendererFactory;
-        this.markdownNavigatorWindowDialog = undefined;
         this.markdownNavigatorWindowDialogsOpen = 0;
-        this._renderer2 = rendererFactory.createRenderer(undefined, undefined);
+        this._renderer2 = rendererFactory.createRenderer(undefined, null);
     }
     open(config) {
         this.close();
-        let panelClass = [...DEFAULT_DRAGGABLE_DIALOG_CONFIG.panelClass];
-        if (config.dialogConfig && config.dialogConfig.panelClass) {
-            if (Array.isArray(config.dialogConfig.panelClass)) {
-                panelClass = [...config.dialogConfig.panelClass];
-            }
-            else {
-                panelClass = [config.dialogConfig.panelClass];
-            }
-        }
+        const configClass = config?.dialogConfig?.panelClass;
+        const panelClass = configClass && !Array.isArray(configClass) ? [configClass] : [];
         const draggableConfig = {
             ...DEFAULT_DRAGGABLE_DIALOG_CONFIG,
             ...config.dialogConfig,
-            panelClass,
+            ...panelClass,
         };
-        const { matDialogRef, dragRefSubject } = this._tdDialogService.openDraggable({
+        const { matDialogRef, dragRefSubject, } = this._tdDialogService.openDraggable({
             component: TdMarkdownNavigatorWindowComponent,
             config: draggableConfig,
             dragHandleSelectors: ['.td-window-dialog-toolbar'],
@@ -730,10 +520,14 @@ class TdMarkdownNavigatorWindowService {
         this.markdownNavigatorWindowDialog = matDialogRef;
         this.markdownNavigatorWindowDialog.componentInstance.items = config.items;
         this.markdownNavigatorWindowDialog.componentInstance.labels = config.labels;
-        this.markdownNavigatorWindowDialog.componentInstance.startAt = config.startAt;
-        this.markdownNavigatorWindowDialog.componentInstance.copyCodeToClipboard = config.copyCodeToClipboard;
-        this.markdownNavigatorWindowDialog.componentInstance.copyCodeTooltips = config.copyCodeTooltips;
-        this.markdownNavigatorWindowDialog.componentInstance.compareWith = config.compareWith;
+        this.markdownNavigatorWindowDialog.componentInstance.startAt =
+            config.startAt;
+        this.markdownNavigatorWindowDialog.componentInstance.copyCodeToClipboard =
+            config.copyCodeToClipboard;
+        this.markdownNavigatorWindowDialog.componentInstance.copyCodeTooltips =
+            config.copyCodeTooltips;
+        this.markdownNavigatorWindowDialog.componentInstance.compareWith =
+            config.compareWith;
         this.markdownNavigatorWindowDialog.componentInstance.toolbarColor =
             'toolbarColor' in config ? config.toolbarColor : 'primary';
         this.markdownNavigatorWindowDialogsOpen++;
@@ -764,7 +558,12 @@ class TdMarkdownNavigatorWindowService {
             if (docked) {
                 this.markdownNavigatorWindowDialog.componentInstance.docked = false;
                 this.markdownNavigatorWindowDialog.updateSize(dimensions.width, dimensions.height);
-                this.markdownNavigatorWindowDialog.updatePosition({ top: '0px', right: '0px', bottom: '0px', left: '0px' });
+                this.markdownNavigatorWindowDialog.updatePosition({
+                    top: '0px',
+                    right: '0px',
+                    bottom: '0px',
+                    left: '0px',
+                });
                 this.dragRef.setFreeDragPosition(position);
                 this.dragRef.disabled = false;
                 this.resizableDraggableDialog.attach();
@@ -795,14 +594,14 @@ class TdMarkdownNavigatorWindowService {
         };
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdMarkdownNavigatorWindowService.ɵfac = function TdMarkdownNavigatorWindowService_Factory(t) { return new (t || TdMarkdownNavigatorWindowService)(i0.ɵɵinject(i1$1.TdDialogService), i0.ɵɵinject(DOCUMENT), i0.ɵɵinject(i0.RendererFactory2)); };
-/** @nocollapse */ /** @nocollapse */ TdMarkdownNavigatorWindowService.ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: TdMarkdownNavigatorWindowService, factory: TdMarkdownNavigatorWindowService.ɵfac });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdMarkdownNavigatorWindowService, [{
-        type: Injectable
-    }], function () { return [{ type: i1$1.TdDialogService }, { type: undefined, decorators: [{
-                type: Inject,
-                args: [DOCUMENT]
-            }] }, { type: i0.RendererFactory2 }]; }, null); })();
+TdMarkdownNavigatorWindowService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdMarkdownNavigatorWindowService, deps: [{ token: i1$1.TdDialogService }, { token: DOCUMENT }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+TdMarkdownNavigatorWindowService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdMarkdownNavigatorWindowService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdMarkdownNavigatorWindowService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$1.TdDialogService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.RendererFactory2 }]; } });
 
 class TdMarkdownNavigatorWindowDirective {
     constructor(_markdownNavigatorWindowService) {
@@ -810,35 +609,47 @@ class TdMarkdownNavigatorWindowDirective {
         this.disabled = false;
     }
     click() {
-        if (!this.disabled) {
+        if (!this.disabled && this.config) {
             this._markdownNavigatorWindowService.open(this.config);
         }
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdMarkdownNavigatorWindowDirective.ɵfac = function TdMarkdownNavigatorWindowDirective_Factory(t) { return new (t || TdMarkdownNavigatorWindowDirective)(i0.ɵɵdirectiveInject(TdMarkdownNavigatorWindowService)); };
-/** @nocollapse */ /** @nocollapse */ TdMarkdownNavigatorWindowDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: TdMarkdownNavigatorWindowDirective, selectors: [["", "tdMarkdownNavigatorWindow", ""]], hostBindings: function TdMarkdownNavigatorWindowDirective_HostBindings(rf, ctx) { if (rf & 1) {
-        i0.ɵɵlistener("click", function TdMarkdownNavigatorWindowDirective_click_HostBindingHandler() { return ctx.click(); });
-    } }, inputs: { config: ["tdMarkdownNavigatorWindow", "config"], disabled: "disabled" } });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdMarkdownNavigatorWindowDirective, [{
-        type: Directive,
-        args: [{
-                selector: '[tdMarkdownNavigatorWindow]',
-            }]
-    }], function () { return [{ type: TdMarkdownNavigatorWindowService }]; }, { config: [{
-            type: Input,
-            args: ['tdMarkdownNavigatorWindow']
-        }], disabled: [{
-            type: Input
-        }], click: [{
-            type: HostListener,
-            args: ['click']
-        }] }); })();
+TdMarkdownNavigatorWindowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdMarkdownNavigatorWindowDirective, deps: [{ token: TdMarkdownNavigatorWindowService }], target: i0.ɵɵFactoryTarget.Directive });
+TdMarkdownNavigatorWindowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: TdMarkdownNavigatorWindowDirective, selector: "[tdMarkdownNavigatorWindow]", inputs: { config: ["tdMarkdownNavigatorWindow", "config"], disabled: "disabled" }, host: { listeners: { "click": "click()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdMarkdownNavigatorWindowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tdMarkdownNavigatorWindow]',
+                }]
+        }], ctorParameters: function () { return [{ type: TdMarkdownNavigatorWindowService }]; }, propDecorators: { config: [{
+                type: Input,
+                args: ['tdMarkdownNavigatorWindow']
+            }], disabled: [{
+                type: Input
+            }], click: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
 
 class CovalentMarkdownNavigatorModule {
 }
-/** @nocollapse */ /** @nocollapse */ CovalentMarkdownNavigatorModule.ɵfac = function CovalentMarkdownNavigatorModule_Factory(t) { return new (t || CovalentMarkdownNavigatorModule)(); };
-/** @nocollapse */ /** @nocollapse */ CovalentMarkdownNavigatorModule.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: CovalentMarkdownNavigatorModule });
-/** @nocollapse */ /** @nocollapse */ CovalentMarkdownNavigatorModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ providers: [TdMarkdownNavigatorWindowService], imports: [[
+CovalentMarkdownNavigatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentMarkdownNavigatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CovalentMarkdownNavigatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentMarkdownNavigatorModule, declarations: [TdMarkdownNavigatorComponent,
+        TdMarkdownNavigatorWindowComponent,
+        TdMarkdownNavigatorWindowDirective], imports: [CommonModule,
+        // material
+        MatButtonModule,
+        MatTooltipModule,
+        MatListModule,
+        MatIconModule,
+        MatProgressBarModule,
+        CovalentBreadcrumbsModule,
+        CovalentDialogsModule,
+        CovalentFlavoredMarkdownModule,
+        CovalentMessageModule], exports: [TdMarkdownNavigatorComponent,
+        TdMarkdownNavigatorWindowComponent,
+        TdMarkdownNavigatorWindowDirective] });
+CovalentMarkdownNavigatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentMarkdownNavigatorModule, providers: [TdMarkdownNavigatorWindowService], imports: [[
             CommonModule,
             // material
             MatButtonModule,
@@ -846,40 +657,40 @@ class CovalentMarkdownNavigatorModule {
             MatListModule,
             MatIconModule,
             MatProgressBarModule,
-            CovalentMessageModule,
-            CovalentFlavoredMarkdownModule,
+            CovalentBreadcrumbsModule,
             CovalentDialogsModule,
+            CovalentFlavoredMarkdownModule,
+            CovalentMessageModule,
         ]] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentMarkdownNavigatorModule, [{
-        type: NgModule,
-        args: [{
-                imports: [
-                    CommonModule,
-                    // material
-                    MatButtonModule,
-                    MatTooltipModule,
-                    MatListModule,
-                    MatIconModule,
-                    MatProgressBarModule,
-                    CovalentMessageModule,
-                    CovalentFlavoredMarkdownModule,
-                    CovalentDialogsModule,
-                ],
-                declarations: [TdMarkdownNavigatorComponent, TdMarkdownNavigatorWindowComponent, TdMarkdownNavigatorWindowDirective],
-                exports: [TdMarkdownNavigatorComponent, TdMarkdownNavigatorWindowComponent, TdMarkdownNavigatorWindowDirective],
-                providers: [TdMarkdownNavigatorWindowService],
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(CovalentMarkdownNavigatorModule, { declarations: [TdMarkdownNavigatorComponent, TdMarkdownNavigatorWindowComponent, TdMarkdownNavigatorWindowDirective], imports: [CommonModule,
-        // material
-        MatButtonModule,
-        MatTooltipModule,
-        MatListModule,
-        MatIconModule,
-        MatProgressBarModule,
-        CovalentMessageModule,
-        CovalentFlavoredMarkdownModule,
-        CovalentDialogsModule], exports: [TdMarkdownNavigatorComponent, TdMarkdownNavigatorWindowComponent, TdMarkdownNavigatorWindowDirective] }); })();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentMarkdownNavigatorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        // material
+                        MatButtonModule,
+                        MatTooltipModule,
+                        MatListModule,
+                        MatIconModule,
+                        MatProgressBarModule,
+                        CovalentBreadcrumbsModule,
+                        CovalentDialogsModule,
+                        CovalentFlavoredMarkdownModule,
+                        CovalentMessageModule,
+                    ],
+                    declarations: [
+                        TdMarkdownNavigatorComponent,
+                        TdMarkdownNavigatorWindowComponent,
+                        TdMarkdownNavigatorWindowDirective,
+                    ],
+                    exports: [
+                        TdMarkdownNavigatorComponent,
+                        TdMarkdownNavigatorWindowComponent,
+                        TdMarkdownNavigatorWindowDirective,
+                    ],
+                    providers: [TdMarkdownNavigatorWindowService],
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.