@covalent/markdown-navigator 4.0.0-alpha.0 → 4.0.0-beta.4

package/fesm2015/covalent-markdown-navigator.mjs

@@ -0,0 +1,968 @@
+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 { DOCUMENT, CommonModule } from '@angular/common';
+import { __awaiter } from 'tslib';
+import * as i1 from '@covalent/markdown';
+import { removeLeadingHash, isAnchorLink } 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 { 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 { MatIconModule } from '@angular/material/icon';
+import * as i9 from '@angular/material/divider';
+import * as i10 from '@covalent/core/message';
+import { CovalentMessageModule } from '@covalent/core/message';
+import * as i11 from '@covalent/flavored-markdown';
+import { CovalentFlavoredMarkdownModule } from '@covalent/flavored-markdown';
+import * as i12 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import * as i13 from '@angular/material/core';
+import * as i1$1 from '@covalent/core/dialogs';
+import { ResizableDraggableDialog, CovalentDialogsModule } from '@covalent/core/dialogs';
+
+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;
+        this._changeDetectorRef = _changeDetectorRef;
+        this._sanitizer = _sanitizer;
+        this._http = _http;
+        /**
+         * 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 = {};
+        this.buttonClicked = new EventEmitter();
+        this.historyStack = []; // history
+        this.currentMenuItems = []; // current menu items
+        this.loading = false;
+    }
+    clickListener(event) {
+        const element = event.srcElement;
+        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;
+    }
+    get showMenu() {
+        return this.currentMenuItems && this.currentMenuItems.length > 0;
+    }
+    get showTdMarkdownLoader() {
+        return !!this.currentMarkdownItem && !!this.currentMarkdownItem.url && !this.showTdMarkdown;
+    }
+    get showTdMarkdown() {
+        return !!this.currentMarkdownItem && !!this.currentMarkdownItem.markdownString;
+    }
+    get url() {
+        if (this.currentMarkdownItem) {
+            return this.currentMarkdownItem.url;
+        }
+        return undefined;
+    }
+    get footerComponent() {
+        if (this.currentMarkdownItem && this.currentMarkdownItem.footer) {
+            return this.currentMarkdownItem.footer;
+        }
+        return this.footer;
+    }
+    get httpOptions() {
+        if (this.currentMarkdownItem) {
+            return this.currentMarkdownItem.httpOptions;
+        }
+    }
+    get markdownString() {
+        if (this.currentMarkdownItem) {
+            return this.currentMarkdownItem.markdownString;
+        }
+    }
+    get anchor() {
+        if (this.currentMarkdownItem) {
+            return this.currentMarkdownItem.anchor;
+        }
+    }
+    get showEmptyState() {
+        return !this.items || this.items.length < 1;
+    }
+    get goHomeLabel() {
+        return (this.labels && this.labels.goHome) || DEFAULT_MARKDOWN_NAVIGATOR_LABELS.goHome;
+    }
+    get goBackLabel() {
+        return (this.labels && this.labels.goBack) || DEFAULT_MARKDOWN_NAVIGATOR_LABELS.goBack;
+    }
+    get emptyStateLabel() {
+        return (this.labels && this.labels.emptyState) || DEFAULT_MARKDOWN_NAVIGATOR_LABELS.emptyState;
+    }
+    get currentItemTitle() {
+        if (this.historyStack.length < 1) {
+            return '';
+        }
+        else if (this.currentMarkdownItem) {
+            return this.getTitle(this.currentMarkdownItem);
+        }
+        else if (this.historyStack.length > 0) {
+            return this.getTitle(this.historyStack[this.historyStack.length - 1]);
+        }
+        return '';
+    }
+    ngOnChanges(changes) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (changes.items) {
+                this.reset();
+            }
+            if (changes.startAt && this.items && this.startAt) {
+                this._jumpTo(this.startAt, undefined);
+            }
+        });
+    }
+    hasChildrenOrChildrenUrl(item) {
+        return (item.children && item.children.length > 0) || !!item.childrenUrl;
+    }
+    clearErrors() {
+        this.markdownLoaderError = undefined;
+        this.childrenUrlError = undefined;
+    }
+    reset() {
+        this.loading = false;
+        this.clearErrors();
+        // if single item and no children
+        if (this.items && this.items.length === 1 && !this.hasChildrenOrChildrenUrl(this.items[0])) {
+            this.currentMenuItems = [];
+            this.currentMarkdownItem = this.items[0];
+        }
+        else {
+            this.currentMenuItems = this.items;
+            this.currentMarkdownItem = undefined;
+        }
+        this.historyStack = [];
+        this._changeDetectorRef.markForCheck();
+    }
+    goBack() {
+        this.loading = false;
+        this.clearErrors();
+        if (this.historyStack.length > 1) {
+            let parent = this.historyStack[this.historyStack.length - 2];
+            if (parent.startAtLink) {
+                parent = this.historyStack[this.historyStack.length - 3]
+                    ? this.historyStack[this.historyStack.length - 3]
+                    : undefined;
+                this.historyStack = this.historyStack.slice(0, -1);
+            }
+            if (parent) {
+                this.currentMarkdownItem = parent;
+                this.historyStack = this.historyStack.slice(0, -1);
+                this.setChildrenAsCurrentMenuItems(parent);
+            }
+            else {
+                this.reset();
+            }
+        }
+        else {
+            // one level down just go to root
+            this.reset();
+        }
+        this._changeDetectorRef.markForCheck();
+    }
+    handleItemSelected(item) {
+        this.clearErrors();
+        this.currentMarkdownItem = item;
+        this.historyStack = [...this.historyStack, item];
+        this.setChildrenAsCurrentMenuItems(item);
+        this._changeDetectorRef.markForCheck();
+    }
+    setChildrenAsCurrentMenuItems(item) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.currentMenuItems = [];
+            this.loading = true;
+            this._changeDetectorRef.markForCheck();
+            const stackSnapshot = this.historyStack;
+            let children = [];
+            if (item.children) {
+                children = item.children;
+            }
+            else if (item.childrenUrl) {
+                children = yield this.loadChildrenUrl(item);
+            }
+            if (children && children.length && item.startAtLink) {
+                this._jumpTo(item.startAtLink, children);
+            }
+            const newStackSnapshot = this.historyStack;
+            if (stackSnapshot.length === newStackSnapshot.length &&
+                stackSnapshot.every((stackItem, index) => stackItem === newStackSnapshot[index])) {
+                this.currentMenuItems = children;
+            }
+            this.loading = false;
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    loadChildrenUrl(item) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const sanitizedUrl = this._sanitizer.sanitize(SecurityContext.URL, item.childrenUrl);
+            try {
+                return yield this._http.get(sanitizedUrl, Object.assign({}, item.httpOptions)).toPromise();
+            }
+            catch (error) {
+                this.handleChildrenUrlError(error);
+                return [];
+            }
+        });
+    }
+    getTitle(item) {
+        if (item) {
+            return (removeLeadingHash(item.anchor) ||
+                item.title ||
+                getTitleFromUrl(item.url) ||
+                getTitleFromMarkdownString(item.markdownString) ||
+                '').trim();
+        }
+    }
+    getIcon(item) {
+        if (item) {
+            return item.icon || 'subject';
+        }
+    }
+    handleChildrenUrlError(error) {
+        this.childrenUrlError = error.message;
+        this._changeDetectorRef.markForCheck();
+    }
+    handleMarkdownLoaderError(error) {
+        this.markdownLoaderError = error.message;
+        this._changeDetectorRef.markForCheck();
+    }
+    _jumpTo(itemOrPath, children) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const historyStack = this.historyStack;
+            this.reset();
+            if (this.items && this.items.length > 0) {
+                let path = [];
+                if (Array.isArray(itemOrPath)) {
+                    path = yield this.followPath(this.items, itemOrPath);
+                }
+                else if (children && children.length > 0) {
+                    this.historyStack = historyStack;
+                    path = this.findPath(children, itemOrPath);
+                }
+                else {
+                    path = this.findPath(this.items, itemOrPath);
+                }
+                (path || []).forEach((pathItem) => this.handleItemSelected(pathItem));
+            }
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    followPath(items, path) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let pathItems = [];
+            let currentLevel = items;
+            const compareWith = this.compareWith || defaultCompareWith;
+            for (const pathItem of path) {
+                const foundItem = currentLevel.find((item) => compareWith(pathItem, item));
+                if (foundItem) {
+                    pathItems = [...pathItems, foundItem];
+                    if (foundItem.children) {
+                        currentLevel = foundItem.children;
+                    }
+                    else if (foundItem.childrenUrl) {
+                        currentLevel = yield this.loadChildrenUrl(foundItem);
+                    }
+                }
+                else {
+                    break;
+                }
+            }
+            if (pathItems.length !== path.length) {
+                pathItems = [];
+            }
+            return pathItems;
+        });
+    }
+    findPath(items, item) {
+        const compareWith = this.compareWith || defaultCompareWith;
+        if (items) {
+            for (const child of items) {
+                if (compareWith(child, item)) {
+                    return [child];
+                }
+                const ancestors = this.findPath(child.children, item);
+                if (ancestors) {
+                    return [child, ...ancestors];
+                }
+            }
+        }
+        return undefined;
+    }
+    handleLinkClick(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event.preventDefault();
+            const link = event.target;
+            const url = new URL(link.href);
+            this.loading = true;
+            this._changeDetectorRef.markForCheck();
+            try {
+                const markdownString = yield this._markdownUrlLoaderService.load(url.href);
+                // pass in url to be able to use currentMarkdownItem.url later on
+                this.handleItemSelected({ markdownString, url: url.href });
+                this.markdownWrapper.nativeElement.scrollTop = 0;
+            }
+            catch (error) {
+                const win = window.open(url.href, '_blank');
+                win.focus();
+            }
+            finally {
+                this.loading = false;
+            }
+            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']]
+            }] });
+})();
+
+const DEFAULT_MARKDOWN_NAVIGATOR_WINDOW_LABELS = {
+    title: 'Help',
+    close: 'Close',
+    dock: 'Dock',
+    unDock: 'Undock',
+};
+class TdMarkdownNavigatorWindowComponent {
+    constructor() {
+        this.toolbarColor = 'primary';
+        this.docked = false;
+        this.copyCodeToClipboard = false;
+        this.copyCodeTooltips = {};
+        this.closed = new EventEmitter();
+        this.dockToggled = new EventEmitter();
+        this.buttonClicked = new EventEmitter();
+    }
+    get markdownNavigatorLabels() {
+        if (this.labels) {
+            const { goHome, goBack, emptyState } = this.labels;
+            return {
+                goHome,
+                goBack,
+                emptyState,
+            };
+        }
+    }
+    get titleLabel() {
+        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;
+    }
+    get toggleDockedStateLabel() {
+        if (this.docked) {
+            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;
+        }
+    }
+    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
+            }] });
+})();
+
+const CDK_OVERLAY_CUSTOM_CLASS = 'td-window-dialog';
+const DEFAULT_POSITION = { bottom: '0px', right: '0px' };
+const DEFAULT_WIDTH = '360px';
+const DEFAULT_HEIGHT = '75vh';
+const MIN_HEIGHT = '56px';
+const MAX_WIDTH = '100vw';
+const DEFAULT_DRAGGABLE_DIALOG_CONFIG = {
+    hasBackdrop: false,
+    closeOnNavigation: true,
+    panelClass: [CDK_OVERLAY_CUSTOM_CLASS],
+    position: DEFAULT_POSITION,
+    height: DEFAULT_HEIGHT,
+    width: DEFAULT_WIDTH,
+    maxWidth: MAX_WIDTH,
+};
+class TdMarkdownNavigatorWindowService {
+    constructor(_tdDialogService, _document, rendererFactory) {
+        this._tdDialogService = _tdDialogService;
+        this._document = _document;
+        this.rendererFactory = rendererFactory;
+        this.markdownNavigatorWindowDialog = undefined;
+        this.markdownNavigatorWindowDialogsOpen = 0;
+        this._renderer2 = rendererFactory.createRenderer(undefined, undefined);
+    }
+    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 draggableConfig = Object.assign(Object.assign(Object.assign({}, DEFAULT_DRAGGABLE_DIALOG_CONFIG), config.dialogConfig), { panelClass });
+        const { matDialogRef, dragRefSubject } = this._tdDialogService.openDraggable({
+            component: TdMarkdownNavigatorWindowComponent,
+            config: draggableConfig,
+            dragHandleSelectors: ['.td-window-dialog-toolbar'],
+            draggableClass: 'td-draggable-markdown-navigator-window',
+        });
+        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.toolbarColor =
+            'toolbarColor' in config ? config.toolbarColor : 'primary';
+        this.markdownNavigatorWindowDialogsOpen++;
+        this.markdownNavigatorWindowDialog.componentInstance.footer = config.footer;
+        dragRefSubject.subscribe((dragRf) => {
+            this.dragRef = dragRf;
+            this.resizableDraggableDialog = new ResizableDraggableDialog(this._document, this._renderer2, this.markdownNavigatorWindowDialog, this.dragRef);
+        });
+        this._handleEvents();
+        return this.markdownNavigatorWindowDialog;
+    }
+    close() {
+        if (this.markdownNavigatorWindowDialog) {
+            if (this.resizableDraggableDialog) {
+                this.resizableDraggableDialog.detach();
+            }
+            this.markdownNavigatorWindowDialog.close();
+        }
+    }
+    get isOpen() {
+        return this.markdownNavigatorWindowDialogsOpen > 0;
+    }
+    _handleEvents() {
+        let position;
+        let dimensions;
+        this.markdownNavigatorWindowDialog.componentInstance.closed.subscribe(() => this.close());
+        this.markdownNavigatorWindowDialog.componentInstance.dockToggled.subscribe((docked) => {
+            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.dragRef.setFreeDragPosition(position);
+                this.dragRef.disabled = false;
+                this.resizableDraggableDialog.attach();
+            }
+            else {
+                dimensions = this._getDialogSize(this.markdownNavigatorWindowDialog);
+                position = this.dragRef.getFreeDragPosition();
+                this.markdownNavigatorWindowDialog.componentInstance.docked = true;
+                this.markdownNavigatorWindowDialog.updateSize(DEFAULT_WIDTH, MIN_HEIGHT);
+                this.markdownNavigatorWindowDialog.updatePosition(DEFAULT_POSITION);
+                this.dragRef.reset();
+                this.dragRef.disabled = true;
+                this.resizableDraggableDialog.detach();
+            }
+        });
+        this.markdownNavigatorWindowDialog
+            .afterClosed()
+            .toPromise()
+            .then(() => {
+            this.markdownNavigatorWindowDialogsOpen--;
+        });
+    }
+    _getDialogSize(dialogRef) {
+        const { width, height } = getComputedStyle(this._document.getElementById(dialogRef.id).parentElement);
+        return {
+            width,
+            height,
+        };
+    }
+}
+/** @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);
+})();
+
+class TdMarkdownNavigatorWindowDirective {
+    constructor(_markdownNavigatorWindowService) {
+        this._markdownNavigatorWindowService = _markdownNavigatorWindowService;
+        this.disabled = false;
+    }
+    click() {
+        if (!this.disabled) {
+            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']
+            }] });
+})();
+
+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: [[
+            CommonModule,
+            // material
+            MatButtonModule,
+            MatTooltipModule,
+            MatListModule,
+            MatIconModule,
+            MatProgressBarModule,
+            CovalentMessageModule,
+            CovalentFlavoredMarkdownModule,
+            CovalentDialogsModule,
+        ]] });
+(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] });
+})();
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CovalentMarkdownNavigatorModule, DEFAULT_MARKDOWN_NAVIGATOR_LABELS, DEFAULT_MARKDOWN_NAVIGATOR_WINDOW_LABELS, TdMarkdownNavigatorComponent, TdMarkdownNavigatorWindowComponent, TdMarkdownNavigatorWindowDirective, TdMarkdownNavigatorWindowService };
+//# sourceMappingURL=covalent-markdown-navigator.mjs.map