guangxun-breadcrumb/fesm2022/guangxun-breadcrumb.mjs

Guangxun breadcrumb component for Angular

import * as i0 from '@angular/core';
import { InjectionToken, inject, Optional, Inject, Injectable, Component, NgModule } from '@angular/core';
import * as i4 from '@angular/router';
import { Router, NavigationEnd, RouterModule } from '@angular/router';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core';
import { BehaviorSubject, filter } from 'rxjs';

const BREADCRUMB_CONFIG = new InjectionToken('BREADCRUMB_CONFIG');

class GuangxunBreadcrumbService {
    _config;
    _router = inject(Router);
    _breadcrumbs = new BehaviorSubject([]);
    breadcrumbs$ = this._breadcrumbs.asObservable();
    constructor(_config) {
        this._config = _config;
        this._router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe(() => {
            const root = this._router.routerState.snapshot.root;
            let breadcrumbs = this._buildBreadcrumbs(root);
            const isAtHome = this._router.url === '/' || this._router.url === '/home';
            if (!isAtHome) {
                breadcrumbs = [
                    {
                        label: 'ROUTES.HOME',
                        link: '/home',
                        isClickable: true,
                    },
                    ...breadcrumbs,
                ];
            }
            // 確保最後一層不可點擊
            if (breadcrumbs.length > 0) {
                breadcrumbs[breadcrumbs.length - 1].isClickable = false;
            }
            this._breadcrumbs.next(breadcrumbs);
        });
    }
    _buildBreadcrumbs(route, url = '', breadcrumbs = []) {
        const children = route.children;
        if (route.data?.['breadcrumb']) {
            const segment = route.url.map((s) => s.path).join('/');
            const fullPath = segment ? `${url}/${segment}` : url;
            const crumb = {
                ...route.data['breadcrumb'],
                link: fullPath || '/',
                isClickable: route.data['breadcrumb'].isClickable !== false,
            };
            breadcrumbs.push(crumb);
        }
        for (const child of children) {
            return this._buildBreadcrumbs(child, `${url}/${child.url.map((s) => s.path).join('/')}`, breadcrumbs);
        }
        return breadcrumbs;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GuangxunBreadcrumbService, deps: [{ token: BREADCRUMB_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GuangxunBreadcrumbService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GuangxunBreadcrumbService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [BREADCRUMB_CONFIG]
                }] }] });

class GuangxunBreadcrumbComponent {
    _breadcrumbService;
    constructor(_breadcrumbService) {
        this._breadcrumbService = _breadcrumbService;
    }
    breadcrumbs = [];
    ngOnInit() {
        this._breadcrumbService.breadcrumbs$.subscribe((data) => {
            this.breadcrumbs = data;
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GuangxunBreadcrumbComponent, deps: [{ token: GuangxunBreadcrumbService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: GuangxunBreadcrumbComponent, isStandalone: true, selector: "lib-guangxun-breadcrumb", ngImport: i0, template: `
    <nav aria-label="breadcrumb">
      <ul class="breadcrumb">
        <li *ngFor="let i of breadcrumbs; let last = last" class="breadcrumb-item">
          <ng-container *ngIf="i.isClickable && !last; else noLink">
            <a [routerLink]="i.link">{{ i.label | translate }}</a>
          </ng-container>

          <ng-template #noLink>
            <span>{{ i.label | translate }}</span>
          </ng-template>
        </li>
      </ul>
    </nav>
  `, isInline: true, styles: [".breadcrumb{list-style:none;display:flex;align-items:center;padding:0;margin:0}.breadcrumb>.breadcrumb-item{display:flex;align-items:center}.breadcrumb>.breadcrumb-item:not(:first-child):before{content:\">\";color:#e6e6e6;margin-left:1rem;margin-right:1rem}.breadcrumb>.breadcrumb-item a{text-decoration:none;color:#889296}.breadcrumb>.breadcrumb-item span{color:#e6e6e6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GuangxunBreadcrumbComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-guangxun-breadcrumb', imports: [
                        CommonModule, TranslateModule, RouterModule
                    ], standalone: true, template: `
    <nav aria-label="breadcrumb">
      <ul class="breadcrumb">
        <li *ngFor="let i of breadcrumbs; let last = last" class="breadcrumb-item">
          <ng-container *ngIf="i.isClickable && !last; else noLink">
            <a [routerLink]="i.link">{{ i.label | translate }}</a>
          </ng-container>

          <ng-template #noLink>
            <span>{{ i.label | translate }}</span>
          </ng-template>
        </li>
      </ul>
    </nav>
  `, styles: [".breadcrumb{list-style:none;display:flex;align-items:center;padding:0;margin:0}.breadcrumb>.breadcrumb-item{display:flex;align-items:center}.breadcrumb>.breadcrumb-item:not(:first-child):before{content:\">\";color:#e6e6e6;margin-left:1rem;margin-right:1rem}.breadcrumb>.breadcrumb-item a{text-decoration:none;color:#889296}.breadcrumb>.breadcrumb-item span{color:#e6e6e6}\n"] }]
        }], ctorParameters: () => [{ type: GuangxunBreadcrumbService }] });

class GuangxunBreadcrumbModule {
    static forRoot(config) {
        return {
            ngModule: GuangxunBreadcrumbModule,
            providers: [
                {
                    provide: BREADCRUMB_CONFIG,
                    useValue: config,
                },
            ],
        };
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GuangxunBreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: GuangxunBreadcrumbModule, imports: [CommonModule, RouterModule, TranslateModule, GuangxunBreadcrumbComponent], exports: [GuangxunBreadcrumbComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GuangxunBreadcrumbModule, imports: [CommonModule, RouterModule, TranslateModule, GuangxunBreadcrumbComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GuangxunBreadcrumbModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule, RouterModule, TranslateModule, GuangxunBreadcrumbComponent],
                    exports: [GuangxunBreadcrumbComponent]
                }]
        }] });

/*
 * Public API Surface of guangxun-breadcrumb
 */

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

export { BREADCRUMB_CONFIG, GuangxunBreadcrumbComponent, GuangxunBreadcrumbModule, GuangxunBreadcrumbService };
//# sourceMappingURL=guangxun-breadcrumb.mjs.map