@tapsellorg/angular-material-library
Version:
Angular library for Tapsell
95 lines (89 loc) • 8.37 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { toSignal } from '@angular/core/rxjs-interop';
import * as i1 from '@angular/router';
import { NavigationEnd, RouterModule } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { takeUntil, filter, startWith } from 'rxjs/operators';
import { withDestroy } from '@tapsellorg/angular-material-library/src/lib/common';
import * as i3 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
class PghBreadcrumbsService extends withDestroy() {
constructor(router) {
super();
this.router = router;
this._breadcrumbs$ = new BehaviorSubject([]);
this.breadcrumbs$ = this._breadcrumbs$.asObservable();
this.handleRouterEvents();
}
handleRouterEvents() {
this.router.events
.pipe(takeUntil(this._destroyed$), filter(event => event instanceof NavigationEnd), startWith(this.router))
.subscribe(() => {
const { root } = this.router.routerState.snapshot;
const breadcrumbs = [];
this.addBreadcrumb(root, [], breadcrumbs);
this._breadcrumbs$.next(breadcrumbs);
});
}
addBreadcrumb(route, parentUrl, breadcrumbs) {
if (!route)
return;
const routeUrl = parentUrl.concat(route.url.map(url => url.path));
if (route.data?.breadcrumb?.label) {
const breadcrumb = {
label: this.getLabel(route.data),
url: route.data.breadcrumb.dontLink ? undefined : `/${routeUrl.join('/')}`,
};
breadcrumbs.push(breadcrumb);
}
if (route.firstChild) {
this.addBreadcrumb(route.firstChild, routeUrl, breadcrumbs);
}
}
getLabel(data) {
return typeof data.breadcrumb.label === 'function'
? data.breadcrumb.label(data)
: data.breadcrumb.label;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghBreadcrumbsService, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghBreadcrumbsService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghBreadcrumbsService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: () => [{ type: i1.Router }] });
class PghBreadcrumbsComponent {
constructor(breadcrumbsService) {
this.breadcrumbsService = breadcrumbsService;
this.breadcrumbs = toSignal(this.breadcrumbsService.breadcrumbs$);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghBreadcrumbsComponent, deps: [{ token: PghBreadcrumbsService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: PghBreadcrumbsComponent, isStandalone: false, selector: "pgh-breadcrumbs", ngImport: i0, template: "@if (breadcrumbs() && breadcrumbs()!.length) {\n<nav class=\"pgh-breadcrumbs\" role=\"navigation\">\n @for (breadcrumb of breadcrumbs(); track breadcrumb; let last = $last) {\n <span\n class=\"pgh-crumb\"\n [attr.aria-current]=\"last ? 'page' : null\"\n [class.font-weight-bold]=\"last\"\n >\n @if (!last && breadcrumb.url) {\n <a [routerLink]=\"[breadcrumb.url]\">\n {{ breadcrumb.label }}\n </a>\n } @if (last || (!last && !breadcrumb.url)) {\n {{ breadcrumb.label }}\n }\n </span>\n @if (!last) {\n <mat-icon class=\"pgh-crumb-divider\" svgIcon=\"chevron_left\" aria-hidden=\"true\"></mat-icon>\n } }\n</nav>\n}\n", styles: [".pgh-breadcrumbs{--nav-gap: .5rem;display:flex;align-items:center;padding:calc(var(--nav-gap) / 2);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:calc(var(--nav-gap) / 2)}.pgh-breadcrumbs>*{margin-inline-end:var(--nav-gap)}@supports (-webkit-hyphens: none){.pgh-breadcrumbs{scroll-snap-type:none}}.pgh-crumb{display:inline-flex;align-items:center;color:var(--999)}.pgh-crumb>a{white-space:nowrap;color:var(--999);transition:all .4s ease}.pgh-crumb>a:hover{color:var(--777);text-shadow:0 0 2px rgba(50,50,50,.25)}.pgh-crumb:last-of-type{scroll-snap-align:end}.pgh-crumb-divider{color:var(--bbb)}\n"], dependencies: [{ kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghBreadcrumbsComponent, decorators: [{
type: Component,
args: [{ selector: 'pgh-breadcrumbs', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (breadcrumbs() && breadcrumbs()!.length) {\n<nav class=\"pgh-breadcrumbs\" role=\"navigation\">\n @for (breadcrumb of breadcrumbs(); track breadcrumb; let last = $last) {\n <span\n class=\"pgh-crumb\"\n [attr.aria-current]=\"last ? 'page' : null\"\n [class.font-weight-bold]=\"last\"\n >\n @if (!last && breadcrumb.url) {\n <a [routerLink]=\"[breadcrumb.url]\">\n {{ breadcrumb.label }}\n </a>\n } @if (last || (!last && !breadcrumb.url)) {\n {{ breadcrumb.label }}\n }\n </span>\n @if (!last) {\n <mat-icon class=\"pgh-crumb-divider\" svgIcon=\"chevron_left\" aria-hidden=\"true\"></mat-icon>\n } }\n</nav>\n}\n", styles: [".pgh-breadcrumbs{--nav-gap: .5rem;display:flex;align-items:center;padding:calc(var(--nav-gap) / 2);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:calc(var(--nav-gap) / 2)}.pgh-breadcrumbs>*{margin-inline-end:var(--nav-gap)}@supports (-webkit-hyphens: none){.pgh-breadcrumbs{scroll-snap-type:none}}.pgh-crumb{display:inline-flex;align-items:center;color:var(--999)}.pgh-crumb>a{white-space:nowrap;color:var(--999);transition:all .4s ease}.pgh-crumb>a:hover{color:var(--777);text-shadow:0 0 2px rgba(50,50,50,.25)}.pgh-crumb:last-of-type{scroll-snap-align:end}.pgh-crumb-divider{color:var(--bbb)}\n"] }]
}], ctorParameters: () => [{ type: PghBreadcrumbsService }] });
class PghBreadcrumbsModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: PghBreadcrumbsModule, declarations: [PghBreadcrumbsComponent], imports: [CommonModule, RouterModule, MatIconModule, MatButtonModule], exports: [PghBreadcrumbsComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghBreadcrumbsModule, imports: [CommonModule, RouterModule, MatIconModule, MatButtonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghBreadcrumbsModule, decorators: [{
type: NgModule,
args: [{
declarations: [PghBreadcrumbsComponent],
imports: [CommonModule, RouterModule, MatIconModule, MatButtonModule],
exports: [PghBreadcrumbsComponent],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { PghBreadcrumbsComponent, PghBreadcrumbsModule, PghBreadcrumbsService };
//# sourceMappingURL=tapsellorg-angular-material-library-breadcrumbs.mjs.map