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

package/fesm2020/covalent-markdown-navigator.mjs

@@ -0,0 +1,700 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, SecurityContext, Component, ChangeDetectionStrategy, Input, Output, ViewChild, HostListener, Injectable, Inject, Directive, NgModule } from '@angular/core';
+import * as i11 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import * as i1 from '@covalent/markdown';
+import { isAnchorLink, removeLeadingHash } from '@covalent/markdown';
+import * as i2 from '@angular/platform-browser';
+import * as i3 from '@angular/common/http';
+import { firstValueFrom } from 'rxjs';
+import * as i4 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+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 i7 from '@angular/material/divider';
+import * as i8 from '@covalent/core/message';
+import { CovalentMessageModule } from '@covalent/core/message';
+import * as i9 from '@covalent/flavored-markdown';
+import { CovalentFlavoredMarkdownModule } from '@covalent/flavored-markdown';
+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 DEFAULT_MARKDOWN_NAVIGATOR_LABELS = {
+    goHome: 'Go home',
+    goBack: 'Go back',
+    emptyState: 'No item(s) to display',
+};
+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 showHeader() {
+        return this.showGoBackButton || !!this.currentItemTitle;
+    }
+    get showMenu() {
+        const showMenu = this.currentMenuItems && this.currentMenuItems.length > 0;
+        return showMenu ?? false;
+    }
+    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;
+        }
+        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);
+    }
+    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 '';
+    }
+    async ngOnChanges(changes) {
+        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(goBackLength = 1) {
+        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, -goBackLength);
+            }
+            if (parent) {
+                this.currentMarkdownItem = parent;
+                this.historyStack = this.historyStack.slice(0, -goBackLength);
+                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();
+    }
+    async setChildrenAsCurrentMenuItems(item) {
+        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 = await 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();
+    }
+    async loadChildrenUrl(item) {
+        const sanitizedUrl = this._sanitizer.sanitize(SecurityContext.URL, item.childrenUrl ?? null) ??
+            '';
+        try {
+            return await firstValueFrom(this._http.get(sanitizedUrl, {
+                ...item.httpOptions,
+            }));
+        }
+        catch (error) {
+            this.handleChildrenUrlError(error);
+            return [];
+        }
+    }
+    getTitle(item) {
+        if (!item) {
+            return '';
+        }
+        return (removeLeadingHash(item.anchor ?? '') ||
+            item.title ||
+            getTitleFromUrl(item.url ?? '') ||
+            getTitleFromMarkdownString(item.markdownString ?? '') ||
+            '').trim();
+    }
+    getIcon(item) {
+        return item?.icon || 'subject';
+    }
+    handleChildrenUrlError(error) {
+        this.childrenUrlError = error.message;
+        this._changeDetectorRef.markForCheck();
+    }
+    handleMarkdownLoaderError(error) {
+        this.markdownLoaderError = error ? error.message : '';
+        this._changeDetectorRef.markForCheck();
+    }
+    async _jumpTo(itemOrPath, children) {
+        const historyStack = this.historyStack;
+        this.reset();
+        if (this.items && this.items.length > 0) {
+            let path = [];
+            if (Array.isArray(itemOrPath)) {
+                path = await 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();
+    }
+    async followPath(items, path) {
+        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 = await 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 (item && compareWith(child, item)) {
+                    return [child];
+                }
+                const ancestors = this.findPath(child.children, item);
+                if (ancestors) {
+                    return [child, ...ancestors];
+                }
+            }
+        }
+        return undefined;
+    }
+    async handleLinkClick(event) {
+        event.preventDefault();
+        const link = event.target;
+        const url = new URL(link.href);
+        this.loading = true;
+        this._changeDetectorRef.markForCheck();
+        try {
+            const markdownString = await 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();
+    }
+}
+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',
+    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) {
+            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);
+    }
+    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);
+    }
+}
+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' };
+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.markdownNavigatorWindowDialogsOpen = 0;
+        this._renderer2 = rendererFactory.createRenderer(undefined, null);
+    }
+    open(config) {
+        this.close();
+        const configClass = config?.dialogConfig?.panelClass;
+        const panelClass = configClass && !Array.isArray(configClass) ? [configClass] : [];
+        const draggableConfig = {
+            ...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,
+        };
+    }
+}
+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) {
+        this._markdownNavigatorWindowService = _markdownNavigatorWindowService;
+        this.disabled = false;
+    }
+    click() {
+        if (!this.disabled && this.config) {
+            this._markdownNavigatorWindowService.open(this.config);
+        }
+    }
+}
+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 {
+}
+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,
+            MatTooltipModule,
+            MatListModule,
+            MatIconModule,
+            MatProgressBarModule,
+            CovalentBreadcrumbsModule,
+            CovalentDialogsModule,
+            CovalentFlavoredMarkdownModule,
+            CovalentMessageModule,
+        ]] });
+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.
+ */
+
+export { CovalentMarkdownNavigatorModule, DEFAULT_MARKDOWN_NAVIGATOR_LABELS, DEFAULT_MARKDOWN_NAVIGATOR_WINDOW_LABELS, TdMarkdownNavigatorComponent, TdMarkdownNavigatorWindowComponent, TdMarkdownNavigatorWindowDirective, TdMarkdownNavigatorWindowService };
+//# sourceMappingURL=covalent-markdown-navigator.mjs.map