@covalent/markdown-navigator 6.3.0 → 7.0.0

package/fesm2015/covalent-markdown-navigator.mjs

@@ -1,720 +0,0 @@
-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 { firstValueFrom } from 'rxjs';
-import * as i2 from '@angular/platform-browser';
-import * as i3 from '@angular/common/http';
-import * as i5 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i6 from '@angular/material/list';
-import { MatListModule } from '@angular/material/list';
-import * as i7 from '@angular/material/divider';
-import * as i8 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i9 from '@angular/material/progress-bar';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i10 from '@covalent/core/breadcrumbs';
-import { CovalentBreadcrumbsModule } from '@covalent/core/breadcrumbs';
-import * as i11 from '@covalent/flavored-markdown';
-import { CovalentFlavoredMarkdownModule } from '@covalent/flavored-markdown';
-import * as i12 from '@covalent/core/message';
-import { CovalentMessageModule } from '@covalent/core/message';
-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.itemSelected = 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.currentItemTitle;
-    }
-    get showMenu() {
-        const showMenu = this.currentMenuItems && this.currentMenuItems.length > 0;
-        return showMenu !== null && showMenu !== void 0 ? 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.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.itemSelected.emit(undefined);
-        this._changeDetectorRef.markForCheck();
-    }
-    goBack(goBackLength = 2) {
-        this.loading = false;
-        this.clearErrors();
-        let parent = this.historyStack[this.historyStack.length - goBackLength];
-        if (parent === null || parent === void 0 ? void 0 : 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, this.historyStack.length - goBackLength + 1);
-            this.setChildrenAsCurrentMenuItems(parent);
-        }
-        else {
-            this.reset();
-        }
-        this.itemSelected.emit(parent);
-        this._changeDetectorRef.markForCheck();
-    }
-    handleItemSelected(item) {
-        this.clearErrors();
-        this.currentMarkdownItem = item;
-        this.historyStack = [...this.historyStack, item];
-        this.setChildrenAsCurrentMenuItems(item);
-        this.itemSelected.emit(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) {
-        var _a, _b;
-        return __awaiter(this, void 0, void 0, function* () {
-            const sanitizedUrl = (_b = this._sanitizer.sanitize(SecurityContext.URL, (_a = item.childrenUrl) !== null && _a !== void 0 ? _a : null)) !== null && _b !== void 0 ? _b : '';
-            try {
-                return yield firstValueFrom(this._http.get(sanitizedUrl, Object.assign({}, item.httpOptions)));
-            }
-            catch (error) {
-                this.handleChildrenUrlError(error);
-                return [];
-            }
-        });
-    }
-    getTitle(item) {
-        var _a, _b, _c;
-        if (!item) {
-            return '';
-        }
-        return (removeLeadingHash((_a = item.anchor) !== null && _a !== void 0 ? _a : '') ||
-            item.title ||
-            getTitleFromUrl((_b = item.url) !== null && _b !== void 0 ? _b : '') ||
-            getTitleFromMarkdownString((_c = item.markdownString) !== null && _c !== void 0 ? _c : '') ||
-            '').trim();
-    }
-    getIcon(item) {
-        return (item === null || item === void 0 ? void 0 : item.icon) || 'subject';
-    }
-    handleChildrenUrlError(error) {
-        this.childrenUrlError = error.message;
-        this._changeDetectorRef.markForCheck();
-    }
-    handleMarkdownLoaderError(error) {
-        this.markdownLoaderError = error ? error.message : '';
-        this._changeDetectorRef.markForCheck();
-    }
-    _jumpTo(itemOrPath, children) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            const historyStack = this.historyStack;
-            let path = [];
-            if ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) {
-                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, index) => {
-                    if (index === 0) {
-                        this.reset();
-                    }
-                    this.handleItemSelected(pathItem);
-                });
-            }
-            return !!path.length;
-        });
-    }
-    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 (item && compareWith(child, item)) {
-                    return [child];
-                }
-                const ancestors = this.findPath(child.children, item);
-                if (ancestors.length) {
-                    return [child, ...ancestors];
-                }
-            }
-        }
-        return [];
-    }
-    handleLinkClick(event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            event.preventDefault();
-            const link = event.target;
-            const url = new URL(link.href);
-            const urlParts = url.href.split('/');
-            const id = urlParts[urlParts.length - 1].split('.md')[0];
-            this.loading = true;
-            this._changeDetectorRef.markForCheck();
-            const pathFound = yield this._jumpTo({ id });
-            if (pathFound) {
-                return;
-            }
-            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 === null || win === void 0 ? void 0 : win.focus();
-            }
-            finally {
-                this.loading = false;
-            }
-            this._changeDetectorRef.markForCheck();
-        });
-    }
-}
-TdMarkdownNavigatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", 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: "14.0.0", version: "15.2.5", type: TdMarkdownNavigatorComponent, selector: "td-markdown-navigator", inputs: { items: "items", labels: "labels", startAt: "startAt", copyCodeToClipboard: "copyCodeToClipboard", copyCodeTooltips: "copyCodeTooltips", footer: "footer", compareWith: "compareWith" }, outputs: { buttonClicked: "buttonClicked", itemSelected: "itemSelected" }, 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(historyStack.length - 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        (buttonClicked)=\"buttonClicked.emit($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 matListItemLine class=\"truncate\">\n            {{ getTitle(item) }}\n          </span>\n          <span matListItemLine 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 matListItemAvatar>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"], dependencies: [{ kind: "directive", type: i4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6.MatActionList, selector: "mat-action-list", exportAs: ["matActionList"] }, { kind: "component", type: i6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i6.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i6.MatListItemLine, selector: "[matListItemLine]" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i10.TdBreadcrumbsComponent, selector: "td-breadcrumbs", inputs: ["separatorIcon"] }, { kind: "component", type: i10.TdBreadcrumbComponent, selector: "td-breadcrumb, a[td-breadcrumb]" }, { kind: "component", type: i11.TdFlavoredMarkdownComponent, selector: "td-flavored-markdown", inputs: ["content", "simpleLineBreaks", "hostedUrl", "anchor", "copyCodeToClipboard", "copyCodeTooltips", "toggleRawCode", "rawToggleLabels", "useCfmList"], outputs: ["contentReady", "buttonClicked"] }, { kind: "component", type: i11.TdFlavoredMarkdownLoaderComponent, selector: "td-flavored-markdown-loader", inputs: ["url", "httpOptions", "anchor", "copyCodeToClipboard", "copyCodeTooltips", "useCfmList"], outputs: ["contentReady", "loadFailed", "buttonClicked"] }, { kind: "component", type: i12.TdMessageComponent, selector: "td-message", inputs: ["label", "sublabel", "icon", "color", "opened"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", 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(historyStack.length - 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        (buttonClicked)=\"buttonClicked.emit($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 matListItemLine class=\"truncate\">\n            {{ getTitle(item) }}\n          </span>\n          <span matListItemLine 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 matListItemAvatar>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
-            }], itemSelected: [{
-                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) {
-    var _a;
-    if (markdownString) {
-        const firstLine = (_a = markdownString.split(/[\r\n]+/).find((line) => !!line)) !== null && _a !== void 0 ? _a : '';
-        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();
-        this.itemSelected = 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: "15.2.5", ngImport: i0, type: TdMarkdownNavigatorWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TdMarkdownNavigatorWindowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", 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", itemSelected: "itemSelected" }, 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    (itemSelected)=\"itemSelected.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"], dependencies: [{ kind: "component", type: i1$1.TdWindowDialogComponent, selector: "td-window-dialog", inputs: ["toolbarColor", "docked", "title", "toggleDockedStateLabel", "closeLabel"], outputs: ["dockToggled", "closed"] }, { kind: "component", type: TdMarkdownNavigatorComponent, selector: "td-markdown-navigator", inputs: ["items", "labels", "startAt", "copyCodeToClipboard", "copyCodeTooltips", "footer", "compareWith"], outputs: ["buttonClicked", "itemSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", 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    (itemSelected)=\"itemSelected.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
-            }], itemSelected: [{
-                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) {
-        var _a;
-        this.close();
-        const configClass = (_a = config === null || config === void 0 ? void 0 : config.dialogConfig) === null || _a === void 0 ? void 0 : _a.panelClass;
-        const panelClass = configClass && !Array.isArray(configClass) ? [configClass] : [];
-        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,
-        };
-    }
-}
-TdMarkdownNavigatorWindowService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", 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: "15.2.5", ngImport: i0, type: TdMarkdownNavigatorWindowService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", 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: "15.2.5", ngImport: i0, type: TdMarkdownNavigatorWindowDirective, deps: [{ token: TdMarkdownNavigatorWindowService }], target: i0.ɵɵFactoryTarget.Directive });
-TdMarkdownNavigatorWindowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: TdMarkdownNavigatorWindowDirective, selector: "[tdMarkdownNavigatorWindow]", inputs: { config: ["tdMarkdownNavigatorWindow", "config"], disabled: "disabled" }, host: { listeners: { "click": "click()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", 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: "15.2.5", ngImport: i0, type: CovalentMarkdownNavigatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CovalentMarkdownNavigatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.5", 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: "15.2.5", 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: "15.2.5", 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