UNPKG

ng-zorro-antd

Version:

An enterprise-class UI components based on Ant Design and Angular

288 lines (280 loc) 9.88 kB
import { Component, ChangeDetectionStrategy, ViewEncapsulation, Injector, NgZone, ChangeDetectorRef, ElementRef, Renderer2, Input, NgModule } from '@angular/core'; import { NzDropDownModule } from 'ng-zorro-antd/dropdown'; import { __decorate, __metadata } from 'tslib'; import { Router, ActivatedRoute, NavigationEnd, PRIMARY_OUTLET } from '@angular/router'; import { Subject } from 'rxjs'; import { filter, takeUntil, startWith } from 'rxjs/operators'; import { PREFIX, InputBoolean, NzAddOnModule, NzOverlayModule } from 'ng-zorro-antd/core'; import { OverlayModule } from '@angular/cdk/overlay'; import { CommonModule } from '@angular/common'; import { NzIconModule } from 'ng-zorro-antd/icon'; /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @record */ function BreadcrumbOption() { } if (false) { /** @type {?} */ BreadcrumbOption.prototype.label; /** @type {?} */ BreadcrumbOption.prototype.params; /** @type {?} */ BreadcrumbOption.prototype.url; } class NzBreadCrumbComponent { /** * @param {?} injector * @param {?} ngZone * @param {?} cdr * @param {?} elementRef * @param {?} renderer */ constructor(injector, ngZone, cdr, elementRef, renderer) { this.injector = injector; this.ngZone = ngZone; this.cdr = cdr; this.nzAutoGenerate = false; this.nzSeparator = '/'; this.nzRouteLabel = 'breadcrumb'; this.breadcrumbs = []; this.destroy$ = new Subject(); renderer.addClass(elementRef.nativeElement, 'ant-breadcrumb'); } /** * @return {?} */ ngOnInit() { if (this.nzAutoGenerate) { this.registerRouterChange(); } } /** * @return {?} */ ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); } /** * @param {?} url * @param {?} e * @return {?} */ navigate(url, e) { e.preventDefault(); this.ngZone .run((/** * @return {?} */ () => this.injector .get(Router) .navigateByUrl(url) .then())) .then(); } /** * @private * @return {?} */ registerRouterChange() { try { /** @type {?} */ const router = this.injector.get(Router); /** @type {?} */ const activatedRoute = this.injector.get(ActivatedRoute); router.events .pipe(filter((/** * @param {?} e * @return {?} */ e => e instanceof NavigationEnd)), takeUntil(this.destroy$), startWith(true) // Trigger initial render. ) .subscribe((/** * @return {?} */ () => { this.breadcrumbs = this.getBreadcrumbs(activatedRoute.root); this.cdr.markForCheck(); })); } catch (e) { throw new Error(`${PREFIX} You should import RouterModule if you want to use 'NzAutoGenerate'.`); } } /** * @private * @param {?} route * @param {?=} url * @param {?=} breadcrumbs * @return {?} */ getBreadcrumbs(route, url = '', breadcrumbs = []) { /** @type {?} */ const children = route.children; // If there's no sub root, then stop the recurse and returns the generated breadcrumbs. if (children.length === 0) { return breadcrumbs; } for (const child of children) { if (child.outlet === PRIMARY_OUTLET) { // Only parse components in primary router-outlet (in another word, router-outlet without a specific name). // Parse this layer and generate a breadcrumb item. /** @type {?} */ const routeURL = child.snapshot.url.map((/** * @param {?} segment * @return {?} */ segment => segment.path)).join('/'); /** @type {?} */ const nextUrl = url + `/${routeURL}`; /** @type {?} */ const breadcrumbLabel = child.snapshot.data[this.nzRouteLabel]; // If have data, go to generate a breadcrumb for it. if (routeURL && breadcrumbLabel) { /** @type {?} */ const breadcrumb = { label: breadcrumbLabel, params: child.snapshot.params, url: nextUrl }; breadcrumbs.push(breadcrumb); } return this.getBreadcrumbs(child, nextUrl, breadcrumbs); } } } } NzBreadCrumbComponent.decorators = [ { type: Component, args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, selector: 'nz-breadcrumb', exportAs: 'nzBreadcrumb', preserveWhitespaces: false, template: "<ng-content></ng-content>\n<ng-container *ngIf=\"nzAutoGenerate\">\n <nz-breadcrumb-item *ngFor=\"let breadcrumb of breadcrumbs\">\n <a [attr.href]=\"breadcrumb.url\" (click)=\"navigate(breadcrumb.url, $event)\">{{ breadcrumb.label }}</a>\n </nz-breadcrumb-item>\n</ng-container>", styles: [` nz-breadcrumb { display: block; } `] }] } ]; /** @nocollapse */ NzBreadCrumbComponent.ctorParameters = () => [ { type: Injector }, { type: NgZone }, { type: ChangeDetectorRef }, { type: ElementRef }, { type: Renderer2 } ]; NzBreadCrumbComponent.propDecorators = { nzAutoGenerate: [{ type: Input }], nzSeparator: [{ type: Input }], nzRouteLabel: [{ type: Input }] }; __decorate([ InputBoolean(), __metadata("design:type", Object) ], NzBreadCrumbComponent.prototype, "nzAutoGenerate", void 0); if (false) { /** @type {?} */ NzBreadCrumbComponent.prototype.nzAutoGenerate; /** @type {?} */ NzBreadCrumbComponent.prototype.nzSeparator; /** @type {?} */ NzBreadCrumbComponent.prototype.nzRouteLabel; /** @type {?} */ NzBreadCrumbComponent.prototype.breadcrumbs; /** * @type {?} * @private */ NzBreadCrumbComponent.prototype.destroy$; /** * @type {?} * @private */ NzBreadCrumbComponent.prototype.injector; /** * @type {?} * @private */ NzBreadCrumbComponent.prototype.ngZone; /** * @type {?} * @private */ NzBreadCrumbComponent.prototype.cdr; } /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzBreadCrumbItemComponent { /** * @param {?} nzBreadCrumbComponent */ constructor(nzBreadCrumbComponent) { this.nzBreadCrumbComponent = nzBreadCrumbComponent; } } NzBreadCrumbItemComponent.decorators = [ { type: Component, args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, selector: 'nz-breadcrumb-item', exportAs: 'nzBreadcrumbItem', preserveWhitespaces: false, template: "<ng-container *ngIf=\"!!nzOverlay; else noMenuTpl\">\n <span class=\"ant-breadcrumb-overlay-link\" nz-dropdown [nzDropdownMenu]=\"nzOverlay\">\n <ng-template [ngTemplateOutlet]=\"noMenuTpl\"></ng-template>\n <i *ngIf=\"!!nzOverlay\" nz-icon nzType=\"down\"></i>\n </span>\n</ng-container>\n\n<ng-template #noMenuTpl>\n <span class=\"ant-breadcrumb-link\">\n <ng-content></ng-content>\n </span>\n</ng-template>\n\n<span class=\"ant-breadcrumb-separator\">\n <ng-container *nzStringTemplateOutlet=\"nzBreadCrumbComponent.nzSeparator\">\n {{ nzBreadCrumbComponent.nzSeparator }}\n </ng-container>\n</span>\n", styles: [` nz-breadcrumb-item:last-child { color: rgba(0, 0, 0, 0.65); } nz-breadcrumb-item:last-child .ant-breadcrumb-separator { display: none; } `] }] } ]; /** @nocollapse */ NzBreadCrumbItemComponent.ctorParameters = () => [ { type: NzBreadCrumbComponent } ]; NzBreadCrumbItemComponent.propDecorators = { nzOverlay: [{ type: Input }] }; if (false) { /** * Dropdown content of a breadcrumb item. * @type {?} */ NzBreadCrumbItemComponent.prototype.nzOverlay; /** @type {?} */ NzBreadCrumbItemComponent.prototype.nzBreadCrumbComponent; } /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzBreadCrumbModule { } NzBreadCrumbModule.decorators = [ { type: NgModule, args: [{ imports: [CommonModule, NzAddOnModule, OverlayModule, NzOverlayModule, NzDropDownModule, NzIconModule], declarations: [NzBreadCrumbComponent, NzBreadCrumbItemComponent], exports: [NzBreadCrumbComponent, NzBreadCrumbItemComponent] },] } ]; /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ export { NzBreadCrumbComponent, NzBreadCrumbItemComponent, NzBreadCrumbModule }; //# sourceMappingURL=ng-zorro-antd-breadcrumb.js.map