@covalent/core/fesm2022/covalent-core-breadcrumbs.mjs

import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, HostBinding, ContentChildren, Input, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import { Subject, fromEvent } from 'rxjs';
import { debounceTime, takeUntil, startWith } from 'rxjs/operators';

class TdBreadcrumbComponent {
    _elementRef;
    _changeDetectorRef;
    _displayCrumb = true;
    _width = 0;
    _displayIcon = true;
    _separatorIcon = 'chevron_right';
    matButtonClass = true;
    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';
    }
    constructor(_elementRef, _changeDetectorRef) {
        this._elementRef = _elementRef;
        this._changeDetectorRef = _changeDetectorRef;
    }
    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();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdBreadcrumbComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TdBreadcrumbComponent, selector: "td-breadcrumb, a[td-breadcrumb]", host: { properties: { "class.mdc-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  >{{ separatorIcon }}</mat-icon\n>\n", styles: [":host.td-breadcrumb{display:inline-flex;box-sizing:border-box;flex-direction:row;align-items:center;align-content:center;flex-shrink:0;justify-content:flex-end}:host.td-breadcrumb ::ng-deep>*{margin:0 10px}:host mat-icon{font-size:16px;width:16px;height:16px}:host.mdc-button{min-width:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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  >{{ separatorIcon }}</mat-icon\n>\n", styles: [":host.td-breadcrumb{display:inline-flex;box-sizing:border-box;flex-direction:row;align-items:center;align-content:center;flex-shrink:0;justify-content:flex-end}:host.td-breadcrumb ::ng-deep>*{margin:0 10px}:host mat-icon{font-size:16px;width:16px;height:16px}:host.mdc-button{min-width:0;padding:0}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { matButtonClass: [{
                type: HostBinding,
                args: ['class.mdc-button']
            }], tdBreadCrumbClass: [{
                type: HostBinding,
                args: ['class.td-breadcrumb']
            }], displayBinding: [{
                type: HostBinding,
                args: ['style.display']
            }] } });

class TdBreadcrumbsComponent {
    _elementRef;
    _changeDetectorRef;
    _resizing = false;
    _separatorIcon = 'chevron_right';
    _destroy$ = new Subject();
    tdBreadCrumbsClass = true;
    // all the sub components, which are the individual breadcrumbs
    _breadcrumbs;
    // the list of hidden breadcrumbs not shown right now (responsive)
    hiddenBreadcrumbs = [];
    /**
     * Sets the icon url shown between breadcrumbs. Defaults to 'chevron_right'.
     */
    set separatorIcon(separatorIcon) {
        this._separatorIcon = separatorIcon;
        this.setCrumbIcons();
    }
    get separatorIcon() {
        return this._separatorIcon;
    }
    constructor(_elementRef, _changeDetectorRef) {
        this._elementRef = _elementRef;
        this._changeDetectorRef = _changeDetectorRef;
    }
    ngOnInit() {
        fromEvent(window, 'resize')
            .pipe(debounceTime(10), takeUntil(this._destroy$))
            .subscribe(() => {
            if (!this._resizing) {
                this._resizing = true;
                setTimeout(() => {
                    this._calculateVisibility();
                    this._resizing = false;
                    this._changeDetectorRef.markForCheck();
                }, 100);
            }
        });
    }
    ngAfterViewInit() {
        this._waitToCalculateVisibility();
    }
    ngAfterContentInit() {
        // Note: doesn't need to unsubscribe since `QueryList.changes`
        // gets completed by Angular when the view is destroyed.
        this._breadcrumbs.changes
            .pipe(startWith(this._breadcrumbs))
            .subscribe(() => {
            this._waitToCalculateVisibility();
            this.setCrumbIcons();
            this._changeDetectorRef.markForCheck();
        });
    }
    ngOnDestroy() {
        this._destroy$.next();
    }
    /*
     * Current width of the element container
     */
    get nativeElementWidth() {
        const element = this._elementRef.nativeElement;
        // Need to take into account border, margin and padding that might be around all the crumbs
        const style = window.getComputedStyle(element);
        const borderLeft = parseInt(style.borderLeft, 10);
        const borderRight = parseInt(style.borderRight, 10);
        const marginLeft = parseInt(style.marginLeft, 10);
        const marginRight = parseInt(style.marginRight, 10);
        const paddingLeft = parseInt(style.paddingLeft, 10);
        const paddingRight = parseInt(style.paddingRight, 10);
        return (element.getBoundingClientRect().width -
            borderLeft -
            borderRight -
            marginLeft -
            marginRight -
            paddingLeft -
            paddingRight);
    }
    /**
     * The total count of individual breadcrumbs
     */
    get count() {
        return this._breadcrumbs ? this._breadcrumbs.length : 0;
    }
    /**
     * Set the crumb icon separators
     */
    setCrumbIcons() {
        if (this._breadcrumbs) {
            const breadcrumbArray = this._breadcrumbs.toArray();
            breadcrumbArray.forEach((breadcrumb, index) => {
                breadcrumb.separatorIcon = this.separatorIcon;
                // don't show the icon on the last breadcrumb
                breadcrumb.displayIcon = index < breadcrumbArray.length - 1;
            });
        }
    }
    _calculateVisibility() {
        const crumbsArray = this._breadcrumbs.toArray();
        let crumbWidthSum = 0;
        const hiddenCrumbs = [];
        // loop through crumbs in reverse order to calculate which ones should be removed
        for (let i = crumbsArray.length - 1; i >= 0; i--) {
            const breadcrumb = crumbsArray[i];
            // if crumb exceeds width, then we skip it from the sum and add it into the hiddencrumbs array
            // and hide it
            if (crumbWidthSum + breadcrumb.width > this.nativeElementWidth) {
                breadcrumb.displayCrumb = false;
                hiddenCrumbs.push(breadcrumb);
            }
            else {
                // else we show it
                breadcrumb.displayCrumb = true;
            }
            crumbWidthSum += breadcrumb.width;
        }
        this.hiddenBreadcrumbs = hiddenCrumbs;
        this._changeDetectorRef.markForCheck();
    }
    _waitToCalculateVisibility() {
        setTimeout(() => {
            this._calculateVisibility();
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdBreadcrumbsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TdBreadcrumbsComponent, selector: "td-breadcrumbs", inputs: { separatorIcon: "separatorIcon" }, host: { properties: { "class.td-breadcrumbs": "this.tdBreadCrumbsClass" } }, queries: [{ propertyName: "_breadcrumbs", predicate: TdBreadcrumbComponent, descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;align-items:center}:host.td-breadcrumbs{white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdBreadcrumbsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'td-breadcrumbs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;align-items:center}:host.td-breadcrumbs{white-space:nowrap}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { tdBreadCrumbsClass: [{
                type: HostBinding,
                args: ['class.td-breadcrumbs']
            }], _breadcrumbs: [{
                type: ContentChildren,
                args: [TdBreadcrumbComponent, { descendants: true }]
            }], separatorIcon: [{
                type: Input
            }] } });

class CovalentBreadcrumbsModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CovalentBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: CovalentBreadcrumbsModule, declarations: [TdBreadcrumbsComponent, TdBreadcrumbComponent], imports: [CommonModule, MatIconModule], exports: [TdBreadcrumbsComponent, TdBreadcrumbComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CovalentBreadcrumbsModule, imports: [CommonModule, MatIconModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CovalentBreadcrumbsModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule, MatIconModule],
                    declarations: [TdBreadcrumbsComponent, TdBreadcrumbComponent],
                    exports: [TdBreadcrumbsComponent, TdBreadcrumbComponent],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { CovalentBreadcrumbsModule, TdBreadcrumbComponent, TdBreadcrumbsComponent };
//# sourceMappingURL=covalent-core-breadcrumbs.mjs.map