@covalent/core 4.0.0 → 4.1.0-develop.2

package/dialogs/dialogs.module.d.ts

@@ -1,2 +1,19 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./alert-dialog/alert-dialog.component";
+import * as i2 from "./confirm-dialog/confirm-dialog.component";
+import * as i3 from "./prompt-dialog/prompt-dialog.component";
+import * as i4 from "./dialog.component";
+import * as i5 from "./window-dialog/window-dialog.component";
+import * as i6 from "@angular/forms";
+import * as i7 from "@angular/common";
+import * as i8 from "@angular/material/dialog";
+import * as i9 from "@angular/material/input";
+import * as i10 from "@angular/material/button";
+import * as i11 from "@angular/material/toolbar";
+import * as i12 from "@angular/material/tooltip";
+import * as i13 from "@angular/material/icon";
 export declare class CovalentDialogsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentDialogsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CovalentDialogsModule, [typeof i1.TdAlertDialogComponent, typeof i2.TdConfirmDialogComponent, typeof i3.TdPromptDialogComponent, typeof i4.TdDialogComponent, typeof i4.TdDialogTitleDirective, typeof i4.TdDialogActionsDirective, typeof i4.TdDialogContentDirective, typeof i5.TdWindowDialogComponent, typeof i1.TdAlertDialogComponent, typeof i2.TdConfirmDialogComponent, typeof i3.TdPromptDialogComponent], [typeof i6.FormsModule, typeof i7.CommonModule, typeof i8.MatDialogModule, typeof i9.MatInputModule, typeof i10.MatButtonModule, typeof i11.MatToolbarModule, typeof i12.MatTooltipModule, typeof i13.MatIconModule], [typeof i1.TdAlertDialogComponent, typeof i2.TdConfirmDialogComponent, typeof i3.TdPromptDialogComponent, typeof i4.TdDialogComponent, typeof i4.TdDialogTitleDirective, typeof i4.TdDialogActionsDirective, typeof i4.TdDialogContentDirective, typeof i5.TdWindowDialogComponent, typeof i1.TdAlertDialogComponent, typeof i2.TdConfirmDialogComponent, typeof i3.TdPromptDialogComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CovalentDialogsModule>;
 }

package/dialogs/package.json

@@ -1,11 +1,10 @@
 {
-  "main": "../bundles/covalent-core-dialogs.umd.js",
-  "module": "../fesm2015/covalent-core-dialogs.js",
-  "es2015": "../fesm2015/covalent-core-dialogs.js",
-  "esm2015": "../esm2015/dialogs/covalent-core-dialogs.js",
-  "fesm2015": "../fesm2015/covalent-core-dialogs.js",
+  "module": "../fesm2015/covalent-core-dialogs.mjs",
+  "es2020": "../fesm2020/covalent-core-dialogs.mjs",
+  "esm2020": "../esm2020/dialogs/covalent-core-dialogs.mjs",
+  "fesm2020": "../fesm2020/covalent-core-dialogs.mjs",
+  "fesm2015": "../fesm2015/covalent-core-dialogs.mjs",
   "typings": "covalent-core-dialogs.d.ts",
-  "metadata": "covalent-core-dialogs.metadata.json",
   "sideEffects": false,
   "name": "@covalent/core/dialogs"
-}
+}

package/dialogs/prompt-dialog/prompt-dialog.component.d.ts

@@ -1,10 +1,11 @@
 import { ElementRef, AfterViewInit } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
+import * as i0 from "@angular/core";
 export declare class TdPromptDialogComponent implements AfterViewInit {
     private _dialogRef;
-    title: string;
-    message: string;
-    value: string;
+    title?: string;
+    message?: string;
+    value?: string;
     cancelButton: string;
     acceptButton: string;
     _input: ElementRef;
@@ -17,4 +18,6 @@ export declare class TdPromptDialogComponent implements AfterViewInit {
     handleInputFocus(): void;
     cancel(): void;
     accept(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdPromptDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdPromptDialogComponent, "td-prompt-dialog", never, {}, {}, never, never>;
 }

package/dialogs/{public-api.d.ts → public_api.d.ts}

@@ -5,3 +5,4 @@ export * from './confirm-dialog/confirm-dialog.component';
 export * from './prompt-dialog/prompt-dialog.component';
 export * from './services/dialog.service';
 export * from './resizable-draggable-dialog/resizable-draggable-dialog';
+export * from './window-dialog/window-dialog.component';

package/dialogs/services/dialog.service.d.ts

@@ -6,6 +6,7 @@ import { TdConfirmDialogComponent } from '../confirm-dialog/confirm-dialog.compo
 import { TdPromptDialogComponent } from '../prompt-dialog/prompt-dialog.component';
 import { DragDrop, DragRef } from '@angular/cdk/drag-drop';
 import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
 export interface IDialogConfig extends MatDialogConfig {
     title?: string;
     message: string;
@@ -99,4 +100,6 @@ export declare class TdDialogService {
      */
     openDraggable<T>({ component, config, dragHandleSelectors, draggableClass, }: IDraggableConfig<T>): IDraggableRefs<T>;
     private _createConfig;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdDialogService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<TdDialogService>;
 }

package/dialogs/src/README.md

@@ -0,0 +1,223 @@
+# TdDialogService
+
+Service provided with methods that wrap the @angular/material [MatDialog] service and provide an easier experience for simple dialogs.
+
+Note: if no [ViewContainerRef] is provided, [TdDialogService] will throw an error.
+
+<br/>
+
+## API Summary
+
+#### Methods
+
+- openAlert: function(IAlertConfig): MatDialogRef<TdAlertDialogComponent>
+  - Opens an alert dialog with the provided config.
+- openConfirm: function(IConfirmConfig): MatDialogRef<TdConfirmDialogComponent>
+  - Opens a confirm dialog with the provided config.
+- openPrompt: function(IPromptConfig): MatDialogRef<TdPromptDialogComponent>
+  - Opens a prompt dialog with the provided config.
+- open: function<T>(component: ComponentType<T>, config: MatDialogConfig): MatDialogRef<T>
+  - Wrapper function over the open() method in MatDialog. Opens a modal dialog containing the given component.
+- openDraggable: function<T>(IDraggableConfig<T>): MatDialogRef<T>
+  - Opens a draggable dialog containing the given component
+- closeAll: function()
+  - Wrapper function over the closeAll() method in MatDialog. Closes all of the currently-open dialogs.
+
+## Usage
+
+TypeScript
+
+```typescript
+import { ViewContainerRef } from '@angular/core';
+import { TdDialogService } from '@covalent/core/dialogs';
+...
+})
+export class Demo {
+  constructor(private _dialogService: TdDialogService,
+              private _viewContainerRef: ViewContainerRef) {
+    ...
+  }
+
+  openAlert(): void {
+    this._dialogService.openAlert({
+      message: 'This is how simple it is to create an alert with this wrapper service.',
+      disableClose: true | false, // defaults to false
+      viewContainerRef: this._viewContainerRef, //OPTIONAL
+      title: 'Alert', //OPTIONAL, hides if not provided
+      closeButton: 'Close', //OPTIONAL, defaults to 'CLOSE'
+      width: '400px', //OPTIONAL, defaults to 400px
+    });
+  }
+
+  openConfirm(): void {
+    this._dialogService.openConfirm({
+      message: 'This is how simple it is to create a confirm with this wrapper service. Do you agree?',
+      disableClose: true | false, // defaults to false
+      viewContainerRef: this._viewContainerRef, //OPTIONAL
+      title: 'Confirm', //OPTIONAL, hides if not provided
+      cancelButton: 'Disagree', //OPTIONAL, defaults to 'CANCEL'
+      acceptButton: 'Agree', //OPTIONAL, defaults to 'ACCEPT'
+      isDestructive: false, //OPTIONAL, defaults to false
+      width: '500px', //OPTIONAL, defaults to 400px
+    }).afterClosed().subscribe((accept: boolean) => {
+      if (accept) {
+        // DO SOMETHING
+      } else {
+        // DO SOMETHING ELSE
+      }
+    });
+  }
+
+  openPrompt(): void {
+    this._dialogService.openPrompt({
+      message: 'This is how simple it is to create a prompt with this wrapper service. Prompt something.',
+      disableClose: true | false, // defaults to false
+      viewContainerRef: this._viewContainerRef, //OPTIONAL
+      title: 'Prompt', //OPTIONAL, hides if not provided
+      value: 'Prepopulated value', //OPTIONAL
+      cancelButton: 'Cancel', //OPTIONAL, defaults to 'CANCEL'
+      acceptButton: 'Ok', //OPTIONAL, defaults to 'ACCEPT'
+      width: '400px', //OPTIONAL, defaults to 400px
+    }).afterClosed().subscribe((newValue: string) => {
+      if (newValue) {
+        // DO SOMETHING
+      } else {
+        // DO SOMETHING ELSE
+      }
+    });
+  }
+
+  openDraggable(): void {
+    this._dialogService.openDraggable({
+      component: DraggableDemoComponent,
+      config: { height: '300px' },
+      // CSS selectors of element(s) inside the component meant to be drag handle(s)
+      dragHandleSelectors: ['.drag-handle'],
+      // Class that will be added to the component signifying drag-ability
+      draggableClass: 'custom-class',
+    });
+  }
+}
+```
+
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-draggable-demo',
+  template: `
+    <h2>Draggable dialog</h2>
+    <p>Draggable via the drag handle</p>
+    <button mat-icon-button class="drag-handle">
+      <mat-icon>drag_handle</mat-icon>
+    </button>
+  `,
+})
+export class DraggableDemoComponent {}
+```
+
+## Setup
+
+Import the [CovalentDialogsModule] in your NgModule:
+
+```typescript
+import { CovalentDialogsModule } from '@covalent/core/dialogs';
+
+@NgModule({
+  imports: [
+    CovalentDialogsModule,
+    ...
+  ],
+  ...
+})
+export class MyModule {}
+```
+
+After that, just inject [TdDialogService] and use it for your dialogs.
+
+# ResizableDraggableDialog
+
+A utility to make a draggable dialog resizable.
+
+## Usage
+
+```ts
+ constructor(
+    private _dialogService: TdDialogService,
+    @Inject(DOCUMENT) private _document: any,
+    private _renderer2: Renderer2,
+  ) {}
+```
+
+```ts
+const {
+  matDialogRef,
+  dragRefSubject,
+}: IDraggableRefs<DraggableResizableDialogComponent> = this._dialogService.openDraggable(
+  {
+    component: DraggableResizableDialogComponent,
+    // CSS selectors of element(s) inside the component meant to be drag handle(s)
+    dragHandleSelectors: ['.drag-handle'],
+  }
+);
+
+let resizableDraggableDialog: ResizableDraggableDialog;
+dragRefSubject.subscribe((dragRf: DragRef) => {
+  resizableDraggableDialog = new ResizableDraggableDialog(
+    this._document,
+    this._renderer2,
+    matDialogRef,
+    dragRf
+  );
+});
+
+// Detach resize-ability event listeners after dialog closes
+matDialogRef.afterClosed().subscribe(() => resizableDraggableDialog.detach());
+```
+
+# TdWindowDialogComponent
+
+A component that can be utilized to create a dialog with a toolbar
+
+## API Summary
+
+#### Inputs
+
+- title: string
+  - Title that appears in toolbar
+- closeLabel: string
+  - Label to be used on close button
+- toolbarColor: ThemePalette
+  - Toolbar color
+
+#### Outputs
+
+- closed: string
+  - Emitted when close button is clicked
+
+## Usage
+
+```ts
+@Component({
+  template: `
+    <td-window-dialog
+      [title]="'Title'"
+      [toolbarColor]="'accent'"
+      [closeLabel]="'Close'"
+      (closed)="closed.emit()"
+    >
+      <p>Comes with a handy toolbar</p>
+    </td-window-dialog>
+  `,
+})
+export class DraggableResizableWindowDialogComponent {
+  @Output() closed: EventEmitter<void> = new EventEmitter();
+}
+```
+
+```ts
+const matDialogRef: MatDialogRef<DraggableResizableWindowDialogComponent> =
+  this._dialogService.open(DraggableResizableWindowDialogComponent);
+// listen to close event
+matDialogRef.componentInstance.closed.subscribe(() => matDialogRef.close());
+```

package/dialogs/window-dialog/window-dialog.component.d.ts

@@ -1,13 +1,16 @@
 import { EventEmitter } from '@angular/core';
 import { ThemePalette } from '@angular/material/core';
+import * as i0 from "@angular/core";
 export declare class TdWindowDialogComponent {
-    toolbarColor: ThemePalette;
-    docked: boolean;
-    title: string;
-    toggleDockedStateLabel: string;
-    closeLabel: string;
+    toolbarColor?: ThemePalette;
+    docked?: boolean | undefined;
+    title?: string;
+    toggleDockedStateLabel?: string;
+    closeLabel?: string;
     dockToggled: EventEmitter<boolean>;
     closed: EventEmitter<void>;
     toolbarHeight: number;
     toggleDockedState(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdWindowDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdWindowDialogComponent, "td-window-dialog", never, { "toolbarColor": "toolbarColor"; "docked": "docked"; "title": "title"; "toggleDockedStateLabel": "toggleDockedStateLabel"; "closeLabel": "closeLabel"; }, { "dockToggled": "dockToggled"; "closed": "closed"; }, never, ["*"]>;
 }

package/dynamic-menu/README.md

@@ -48,15 +48,15 @@ export interface ITdDynamicMenuLinkClickEvent {
 
 #### Inputs
 
-+ trigger: IMenuTrigger
-  + Definition for trigger button.
-+ items: IMenuItem[]
-  + One or more items to be displayed in menu.
+- trigger: IMenuTrigger
+  - Definition for trigger button.
+- items: IMenuItem[]
+  - One or more items to be displayed in menu.
 
 #### Output
 
-+ itemClicked: ITdDynamicMenuLinkClickEvent
-  + Emitted when an action link is pressed.
+- itemClicked: ITdDynamicMenuLinkClickEvent
+  - Emitted when an action link is pressed.
 
 ## Setup
 

package/dynamic-menu/covalent-core-dynamic-menu.d.ts

@@ -1,5 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
-export * from './index';
-export { TdDynamicMenuLinkComponent as ɵa } from './dynamic-menu-item/dynamic-menu-link/dynamic-menu-link.component';
+/// <amd-module name="@covalent/core/dynamic-menu" />
+export * from './public_api';

package/dynamic-menu/dynamic-menu-item/dynamic-menu-item.component.d.ts

@@ -1,9 +1,12 @@
 import { EventEmitter } from '@angular/core';
 import { MatMenu } from '@angular/material/menu';
-import { IMenuItem, ITdDynamicMenuLinkClickEvent } from '../dynamic-menu.component';
+import { IMenuItem, ITdDynamicMenuLinkClickEvent } from '../dynamic-menu.menu';
+import * as i0 from "@angular/core";
 export declare class TdDynamicMenuItemComponent {
     items: IMenuItem[];
     itemClicked: EventEmitter<ITdDynamicMenuLinkClickEvent>;
     childMenu: MatMenu;
     emitClicked(event: ITdDynamicMenuLinkClickEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdDynamicMenuItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdDynamicMenuItemComponent, "td-dynamic-menu-item", never, { "items": "items"; }, { "itemClicked": "itemClicked"; }, never, never>;
 }

package/dynamic-menu/dynamic-menu-item/dynamic-menu-link/dynamic-menu-link.component.d.ts

@@ -1,7 +1,10 @@
 import { EventEmitter } from '@angular/core';
-import { IMenuItem, ITdDynamicMenuLinkClickEvent } from '../../dynamic-menu.component';
+import { IMenuItem, ITdDynamicMenuLinkClickEvent } from '../../dynamic-menu.menu';
+import * as i0 from "@angular/core";
 export declare class TdDynamicMenuLinkComponent {
     item: IMenuItem;
     itemClicked: EventEmitter<ITdDynamicMenuLinkClickEvent>;
     emitClicked(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdDynamicMenuLinkComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdDynamicMenuLinkComponent, "td-dynamic-menu-link", never, { "item": "item"; }, { "itemClicked": "itemClicked"; }, never, never>;
 }

package/dynamic-menu/dynamic-menu.component.d.ts

@@ -1,29 +1,11 @@
 import { EventEmitter } from '@angular/core';
-export interface IMenuTrigger {
-    id?: string;
-    text?: string;
-    icon?: string;
-    svgIcon?: string;
-    iconClasses?: string[];
-}
-export interface IMenuItem {
-    id?: string;
-    text: string;
-    icon?: string;
-    svgIcon?: string;
-    iconClasses?: string[];
-    children?: IMenuItem[];
-    link?: string;
-    newTab?: boolean;
-    action?: string;
-}
-export interface ITdDynamicMenuLinkClickEvent {
-    text: string;
-    action: string;
-}
+import { IMenuItem, IMenuTrigger, ITdDynamicMenuLinkClickEvent } from './dynamic-menu.menu';
+import * as i0 from "@angular/core";
 export declare class TdDynamicMenuComponent {
     trigger: IMenuTrigger;
     items: IMenuItem[];
     itemClicked: EventEmitter<ITdDynamicMenuLinkClickEvent>;
     emitClicked(event: ITdDynamicMenuLinkClickEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TdDynamicMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TdDynamicMenuComponent, "td-dynamic-menu", never, { "trigger": "trigger"; "items": "items"; }, { "itemClicked": "itemClicked"; }, never, never>;
 }

package/dynamic-menu/dynamic-menu.menu.d.ts

@@ -0,0 +1,22 @@
+export interface IMenuTrigger {
+    id?: string;
+    text?: string;
+    icon?: string;
+    svgIcon?: string;
+    iconClasses?: string[];
+}
+export interface IMenuItem {
+    id?: string;
+    text: string;
+    icon?: string;
+    svgIcon?: string;
+    iconClasses?: string[];
+    children?: IMenuItem[];
+    link?: string;
+    newTab?: boolean;
+    action?: string;
+}
+export interface ITdDynamicMenuLinkClickEvent {
+    text: string;
+    action?: string;
+}

package/dynamic-menu/dynamic-menu.module.d.ts

@@ -1,2 +1,15 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./dynamic-menu.component";
+import * as i2 from "./dynamic-menu-item/dynamic-menu-item.component";
+import * as i3 from "./dynamic-menu-item/dynamic-menu-link/dynamic-menu-link.component";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/material/button";
+import * as i6 from "@angular/material/icon";
+import * as i7 from "@angular/material/list";
+import * as i8 from "@angular/material/menu";
+import * as i9 from "@angular/material/tooltip";
 export declare class CovalentDynamicMenuModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CovalentDynamicMenuModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CovalentDynamicMenuModule, [typeof i1.TdDynamicMenuComponent, typeof i2.TdDynamicMenuItemComponent, typeof i3.TdDynamicMenuLinkComponent], [typeof i4.CommonModule, typeof i5.MatButtonModule, typeof i6.MatIconModule, typeof i7.MatListModule, typeof i8.MatMenuModule, typeof i9.MatTooltipModule], [typeof i1.TdDynamicMenuComponent, typeof i2.TdDynamicMenuItemComponent, typeof i3.TdDynamicMenuLinkComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CovalentDynamicMenuModule>;
 }

package/dynamic-menu/package.json

@@ -1,11 +1,10 @@
 {
-  "main": "../bundles/covalent-core-dynamic-menu.umd.js",
-  "module": "../fesm2015/covalent-core-dynamic-menu.js",
-  "es2015": "../fesm2015/covalent-core-dynamic-menu.js",
-  "esm2015": "../esm2015/dynamic-menu/covalent-core-dynamic-menu.js",
-  "fesm2015": "../fesm2015/covalent-core-dynamic-menu.js",
+  "module": "../fesm2015/covalent-core-dynamic-menu.mjs",
+  "es2020": "../fesm2020/covalent-core-dynamic-menu.mjs",
+  "esm2020": "../esm2020/dynamic-menu/covalent-core-dynamic-menu.mjs",
+  "fesm2020": "../fesm2020/covalent-core-dynamic-menu.mjs",
+  "fesm2015": "../fesm2015/covalent-core-dynamic-menu.mjs",
   "typings": "covalent-core-dynamic-menu.d.ts",
-  "metadata": "covalent-core-dynamic-menu.metadata.json",
   "sideEffects": false,
   "name": "@covalent/core/dynamic-menu"
-}
+}

package/dynamic-menu/public_api.d.ts

@@ -1,3 +1,5 @@
 export * from './dynamic-menu.module';
+export * from './dynamic-menu.menu';
 export * from './dynamic-menu.component';
 export * from './dynamic-menu-item/dynamic-menu-item.component';
+export * from './dynamic-menu-item/dynamic-menu-link/dynamic-menu-link.component';

package/esm2020/breadcrumbs/breadcrumb/breadcrumb.component.mjs

@@ -0,0 +1,92 @@
+import { Component, ElementRef, HostBinding, ChangeDetectionStrategy, ChangeDetectorRef, } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/material/icon";
+import * as i2 from "@angular/common";
+export class TdBreadcrumbComponent {
+    constructor(_elementRef, _changeDetectorRef) {
+        this._elementRef = _elementRef;
+        this._changeDetectorRef = _changeDetectorRef;
+        this._displayCrumb = true;
+        this._width = 0;
+        this._displayIcon = true;
+        this._separatorIcon = 'chevron_right';
+        this.matButtonClass = true;
+        this.tdBreadCrumbClass = true;
+    }
+    // Sets the icon url shown between breadcrumbs. Defaults to 'chevron_right'
+    get separatorIcon() {
+        return this._separatorIcon;
+    }
+    set separatorIcon(separatorIcon) {
+        this._separatorIcon = separatorIcon;
+        setTimeout(() => {
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    // Should show the right chevron or not before the label
+    get displayIcon() {
+        return this._displayIcon;
+    }
+    set displayIcon(displayIcon) {
+        this._displayIcon = displayIcon;
+        setTimeout(() => {
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    get displayCrumb() {
+        return this._displayCrumb;
+    }
+    /**
+     * Whether to display the crumb or not
+     */
+    set displayCrumb(shouldDisplay) {
+        this._displayCrumb = shouldDisplay;
+        setTimeout(() => {
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    /**
+     * Width of the DOM element of the crumb
+     */
+    get width() {
+        return this._width;
+    }
+    /**
+     * Gets the display style of the crumb
+     */
+    get displayBinding() {
+        // Set the display to none on the component, just in case the end user is hiding
+        // and showing them instead of the component doing itself for reasons like responsive
+        return this._displayCrumb ? undefined : 'none';
+    }
+    ngAfterViewInit() {
+        // set the width from the actual rendered DOM element
+        setTimeout(() => {
+            this._width = (this._elementRef.nativeElement).getBoundingClientRect().width;
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    /**
+     * Stop click propagation when clicking on icon
+     */
+    _handleIconClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+    }
+}
+TdBreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdBreadcrumbComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TdBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdBreadcrumbComponent, selector: "td-breadcrumb, a[td-breadcrumb]", host: { properties: { "class.mat-button": "this.matButtonClass", "class.td-breadcrumb": "this.tdBreadCrumbClass", "style.display": "this.displayBinding" } }, ngImport: i0, template: "<ng-content></ng-content>\n<mat-icon\n  *ngIf=\"displayIcon\"\n  class=\"td-breadcrumb-separator-icon\"\n  [style.cursor]=\"'default'\"\n  (click)=\"_handleIconClick($event)\"\n>\n  {{ separatorIcon }}\n</mat-icon>\n", styles: [":host.td-breadcrumb{display:inline-block;box-sizing:border-box;flex-direction:row;align-items:center;align-content:center;max-width:100%;justify-content:flex-end}:host.td-breadcrumb ::ng-deep>*{margin:0 10px}:host .td-breadcrumb-separator-icon{display:inline-flex;vertical-align:middle}:host.mat-button{min-width:0;padding:0}\n"], components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-breadcrumb, a[td-breadcrumb]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<mat-icon\n  *ngIf=\"displayIcon\"\n  class=\"td-breadcrumb-separator-icon\"\n  [style.cursor]=\"'default'\"\n  (click)=\"_handleIconClick($event)\"\n>\n  {{ separatorIcon }}\n</mat-icon>\n", styles: [":host.td-breadcrumb{display:inline-block;box-sizing:border-box;flex-direction:row;align-items:center;align-content:center;max-width:100%;justify-content:flex-end}:host.td-breadcrumb ::ng-deep>*{margin:0 10px}:host .td-breadcrumb-separator-icon{display:inline-flex;vertical-align:middle}:host.mat-button{min-width:0;padding:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { matButtonClass: [{
+                type: HostBinding,
+                args: ['class.mat-button']
+            }], tdBreadCrumbClass: [{
+                type: HostBinding,
+                args: ['class.td-breadcrumb']
+            }], displayBinding: [{
+                type: HostBinding,
+                args: ['style.display']
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXIvYnJlYWRjcnVtYnMvc3JjL2JyZWFkY3J1bWIvYnJlYWRjcnVtYi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXIvYnJlYWRjcnVtYnMvc3JjL2JyZWFkY3J1bWIvYnJlYWRjcnVtYi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULFVBQVUsRUFDVixXQUFXLEVBRVgsdUJBQXVCLEVBQ3ZCLGlCQUFpQixHQUNsQixNQUFNLGVBQWUsQ0FBQzs7OztBQVF2QixNQUFNLE9BQU8scUJBQXFCO0lBOERoQyxZQUNVLFdBQXVCLEVBQ3ZCLGtCQUFxQztRQURyQyxnQkFBVyxHQUFYLFdBQVcsQ0FBWTtRQUN2Qix1QkFBa0IsR0FBbEIsa0JBQWtCLENBQW1CO1FBL0R2QyxrQkFBYSxHQUFHLElBQUksQ0FBQztRQUNyQixXQUFNLEdBQUcsQ0FBQyxDQUFDO1FBQ1gsaUJBQVksR0FBRyxJQUFJLENBQUM7UUFDcEIsbUJBQWMsR0FBRyxlQUFlLENBQUM7UUFFUixtQkFBYyxHQUFHLElBQUksQ0FBQztRQUNuQixzQkFBaUIsR0FBRyxJQUFJLENBQUM7SUEwRDFELENBQUM7SUF4REosMkVBQTJFO0lBQzNFLElBQVcsYUFBYTtRQUN0QixPQUFPLElBQUksQ0FBQyxjQUFjLENBQUM7SUFDN0IsQ0FBQztJQUNELElBQVcsYUFBYSxDQUFDLGFBQXFCO1FBQzVDLElBQUksQ0FBQyxjQUFjLEdBQUcsYUFBYSxDQUFDO1FBQ3BDLFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDZCxJQUFJLENBQUMsa0JBQWtCLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDekMsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsd0RBQXdEO0lBQ3hELElBQVcsV0FBVztRQUNwQixPQUFPLElBQUksQ0FBQyxZQUFZLENBQUM7SUFDM0IsQ0FBQztJQUNELElBQVcsV0FBVyxDQUFDLFdBQW9CO1FBQ3pDLElBQUksQ0FBQyxZQUFZLEdBQUcsV0FBVyxDQUFDO1FBQ2hDLFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDZCxJQUFJLENBQUMsa0JBQWtCLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDekMsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsSUFBSSxZQUFZO1FBQ2QsT0FBTyxJQUFJLENBQUMsYUFBYSxDQUFDO0lBQzVCLENBQUM7SUFFRDs7T0FFRztJQUNILElBQUksWUFBWSxDQUFDLGFBQXNCO1FBQ3JDLElBQUksQ0FBQyxhQUFhLEdBQUcsYUFBYSxDQUFDO1FBQ25DLFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDZCxJQUFJLENBQUMsa0JBQWtCLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDekMsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQ7O09BRUc7SUFDSCxJQUFJLEtBQUs7UUFDUCxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDckIsQ0FBQztJQUVEOztPQUVHO0lBQ0gsSUFDSSxjQUFjO1FBQ2hCLGdGQUFnRjtRQUNoRixxRkFBcUY7UUFDckYsT0FBTyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQztJQUNqRCxDQUFDO0lBT0QsZUFBZTtRQUNiLHFEQUFxRDtRQUNyRCxVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxDQUFDLE1BQU0sR0FBaUIsQ0FDMUIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQzlCLENBQUMscUJBQXFCLEVBQUUsQ0FBQyxLQUFLLENBQUM7WUFDakMsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ3pDLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVEOztPQUVHO0lBQ0gsZ0JBQWdCLENBQUMsS0FBWTtRQUMzQixLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDeEIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO0lBQ3pCLENBQUM7O2tIQW5GVSxxQkFBcUI7c0dBQXJCLHFCQUFxQixxT0NmbEMsME5BU0E7MkZETWEscUJBQXFCO2tCQU5qQyxTQUFTOytCQUNFLGlDQUFpQyxtQkFHMUIsdUJBQXVCLENBQUMsTUFBTTtpSUFRZCxjQUFjO3NCQUE5QyxXQUFXO3VCQUFDLGtCQUFrQjtnQkFDSyxpQkFBaUI7c0JBQXBELFdBQVc7dUJBQUMscUJBQXFCO2dCQWlEOUIsY0FBYztzQkFEakIsV0FBVzt1QkFBQyxlQUFlIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBIb3N0QmluZGluZyxcbiAgQWZ0ZXJWaWV3SW5pdCxcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndGQtYnJlYWRjcnVtYiwgYVt0ZC1icmVhZGNydW1iXScsXG4gIHN0eWxlVXJsczogWycuL2JyZWFkY3J1bWIuY29tcG9uZW50LnNjc3MnXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2JyZWFkY3J1bWIuY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgVGRCcmVhZGNydW1iQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG4gIHByaXZhdGUgX2Rpc3BsYXlDcnVtYiA9IHRydWU7XG4gIHByaXZhdGUgX3dpZHRoID0gMDtcbiAgcHJpdmF0ZSBfZGlzcGxheUljb24gPSB0cnVlO1xuICBwcml2YXRlIF9zZXBhcmF0b3JJY29uID0gJ2NoZXZyb25fcmlnaHQnO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MubWF0LWJ1dHRvbicpIG1hdEJ1dHRvbkNsYXNzID0gdHJ1ZTtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy50ZC1icmVhZGNydW1iJykgdGRCcmVhZENydW1iQ2xhc3MgPSB0cnVlO1xuXG4gIC8vIFNldHMgdGhlIGljb24gdXJsIHNob3duIGJldHdlZW4gYnJlYWRjcnVtYnMuIERlZmF1bHRzIHRvICdjaGV2cm9uX3JpZ2h0J1xuICBwdWJsaWMgZ2V0IHNlcGFyYXRvckljb24oKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5fc2VwYXJhdG9ySWNvbjtcbiAgfVxuICBwdWJsaWMgc2V0IHNlcGFyYXRvckljb24oc2VwYXJhdG9ySWNvbjogc3RyaW5nKSB7XG4gICAgdGhpcy5fc2VwYXJhdG9ySWNvbiA9IHNlcGFyYXRvckljb247XG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICB0aGlzLl9jaGFuZ2VEZXRlY3RvclJlZi5tYXJrRm9yQ2hlY2soKTtcbiAgICB9KTtcbiAgfVxuXG4gIC8vIFNob3VsZCBzaG93IHRoZSByaWdodCBjaGV2cm9uIG9yIG5vdCBiZWZvcmUgdGhlIGxhYmVsXG4gIHB1YmxpYyBnZXQgZGlzcGxheUljb24oKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuX2Rpc3BsYXlJY29uO1xuICB9XG4gIHB1YmxpYyBzZXQgZGlzcGxheUljb24oZGlzcGxheUljb246IGJvb2xlYW4pIHtcbiAgICB0aGlzLl9kaXNwbGF5SWNvbiA9IGRpc3BsYXlJY29uO1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgdGhpcy5fY2hhbmdlRGV0ZWN0b3JSZWYubWFya0ZvckNoZWNrKCk7XG4gICAgfSk7XG4gIH1cblxuICBnZXQgZGlzcGxheUNydW1iKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9kaXNwbGF5Q3J1bWI7XG4gIH1cblxuICAvKipcbiAgICogV2hldGhlciB0byBkaXNwbGF5IHRoZSBjcnVtYiBvciBub3RcbiAgICovXG4gIHNldCBkaXNwbGF5Q3J1bWIoc2hvdWxkRGlzcGxheTogYm9vbGVhbikge1xuICAgIHRoaXMuX2Rpc3BsYXlDcnVtYiA9IHNob3VsZERpc3BsYXk7XG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICB0aGlzLl9jaGFuZ2VEZXRlY3RvclJlZi5tYXJrRm9yQ2hlY2soKTtcbiAgICB9KTtcbiAgfVxuXG4gIC8qKlxuICAgKiBXaWR0aCBvZiB0aGUgRE9NIGVsZW1lbnQgb2YgdGhlIGNydW1iXG4gICAqL1xuICBnZXQgd2lkdGgoKTogbnVtYmVyIHtcbiAgICByZXR1cm4gdGhpcy5fd2lkdGg7XG4gIH1cblxuICAvKipcbiAgICogR2V0cyB0aGUgZGlzcGxheSBzdHlsZSBvZiB0aGUgY3J1bWJcbiAgICovXG4gIEBIb3N0QmluZGluZygnc3R5bGUuZGlzcGxheScpXG4gIGdldCBkaXNwbGF5QmluZGluZygpOiBzdHJpbmcgfCB1bmRlZmluZWQge1xuICAgIC8vIFNldCB0aGUgZGlzcGxheSB0byBub25lIG9uIHRoZSBjb21wb25lbnQsIGp1c3QgaW4gY2FzZSB0aGUgZW5kIHVzZXIgaXMgaGlkaW5nXG4gICAgLy8gYW5kIHNob3dpbmcgdGhlbSBpbnN0ZWFkIG9mIHRoZSBjb21wb25lbnQgZG9pbmcgaXRzZWxmIGZvciByZWFzb25zIGxpa2UgcmVzcG9uc2l2ZVxuICAgIHJldHVybiB0aGlzLl9kaXNwbGF5Q3J1bWIgPyB1bmRlZmluZWQgOiAnbm9uZSc7XG4gIH1cblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIF9lbGVtZW50UmVmOiBFbGVtZW50UmVmLFxuICAgIHByaXZhdGUgX2NoYW5nZURldGVjdG9yUmVmOiBDaGFuZ2VEZXRlY3RvclJlZlxuICApIHt9XG5cbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIC8vIHNldCB0aGUgd2lkdGggZnJvbSB0aGUgYWN0dWFsIHJlbmRlcmVkIERPTSBlbGVtZW50XG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICB0aGlzLl93aWR0aCA9ICg8SFRNTEVsZW1lbnQ+KFxuICAgICAgICB0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnRcbiAgICAgICkpLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLndpZHRoO1xuICAgICAgdGhpcy5fY2hhbmdlRGV0ZWN0b3JSZWYubWFya0ZvckNoZWNrKCk7XG4gICAgfSk7XG4gIH1cblxuICAvKipcbiAgICogU3RvcCBjbGljayBwcm9wYWdhdGlvbiB3aGVuIGNsaWNraW5nIG9uIGljb25cbiAgICovXG4gIF9oYW5kbGVJY29uQ2xpY2soZXZlbnQ6IEV2ZW50KTogdm9pZCB7XG4gICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgfVxufVxuIiwiPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPG1hdC1pY29uXG4gICpuZ0lmPVwiZGlzcGxheUljb25cIlxuICBjbGFzcz1cInRkLWJyZWFkY3J1bWItc2VwYXJhdG9yLWljb25cIlxuICBbc3R5bGUuY3Vyc29yXT1cIidkZWZhdWx0J1wiXG4gIChjbGljayk9XCJfaGFuZGxlSWNvbkNsaWNrKCRldmVudClcIlxuPlxuICB7eyBzZXBhcmF0b3JJY29uIH19XG48L21hdC1pY29uPlxuIl19