UNPKG

@indice/ng-components

Version:

Indice common components for Angular v12

26 lines 9.88 kB
import { Component } from '@angular/core'; import { BreadcrumbItem } from './breadcrumb-item'; import * as i0 from "@angular/core"; import * as i1 from "../../services/breadcrumb.service"; import * as i2 from "@angular/common"; import * as i3 from "@angular/router"; export class BreadcrumbComponent { constructor(_breadcrumbService) { this._breadcrumbService = _breadcrumbService; this.breadcrumb = []; } ngOnInit() { this._breadcrumbService .breadcrumb .subscribe((breadcrumb) => { this.breadcrumb = [...breadcrumb, new BreadcrumbItem('', '')]; }); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i1.BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: BreadcrumbComponent, selector: "lib-breadcrumb", ngImport: i0, template: "<nav class=\"bg-white border-b border-gray-200 flex\"\r\n aria-label=\"Breadcrumb\">\r\n <ol role=\"list\"\r\n class=\"w-full mx-auto px-4 flex space-x-4 sm:px-6 lg:px-8\">\r\n <li class=\"flex\"\r\n *ngFor=\"let item of breadcrumb; let i = index\">\r\n <div class=\"flex items-center\">\r\n <ng-container *ngTemplateOutlet=\"i === 0 ? homeTemplate : linkTemplate; context: { value: item }\"></ng-container>\r\n </div>\r\n </li>\r\n </ol>\r\n</nav>\r\n<ng-template let-value=\"value\"\r\n #homeTemplate>\r\n <a [routerLink]=\"value.urlSegments\"\r\n [title]=\"value.title\"\r\n class=\"text-gray-400 hover:text-gray-500\">\r\n <svg class=\"flex-shrink-0 h-5 w-5\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 20 20\"\r\n fill=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path d=\"M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z\" />\r\n </svg>\r\n <span class=\"sr-only\">{{ value.title }}</span>\r\n </a>\r\n</ng-template>\r\n<ng-template let-value=\"value\"\r\n #linkTemplate>\r\n <svg class=\"flex-shrink-0 w-6 h-full text-gray-200\"\r\n viewBox=\"0 0 24 44\"\r\n preserveAspectRatio=\"none\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-hidden=\"true\">\r\n <path d=\"M.293 0l22 22-22 22h1.414l22-22-22-22H.293z\" />\r\n </svg>\r\n <a [routerLink]=\"value.urlSegments\"\r\n class=\"ml-4 text-sm font-medium text-gray-500 hover:text-gray-700\">\r\n {{ value.title }}\r\n </a>\r\n</ng-template>", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); } } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: BreadcrumbComponent, decorators: [{ type: Component, args: [{ selector: 'lib-breadcrumb', template: "<nav class=\"bg-white border-b border-gray-200 flex\"\r\n aria-label=\"Breadcrumb\">\r\n <ol role=\"list\"\r\n class=\"w-full mx-auto px-4 flex space-x-4 sm:px-6 lg:px-8\">\r\n <li class=\"flex\"\r\n *ngFor=\"let item of breadcrumb; let i = index\">\r\n <div class=\"flex items-center\">\r\n <ng-container *ngTemplateOutlet=\"i === 0 ? homeTemplate : linkTemplate; context: { value: item }\"></ng-container>\r\n </div>\r\n </li>\r\n </ol>\r\n</nav>\r\n<ng-template let-value=\"value\"\r\n #homeTemplate>\r\n <a [routerLink]=\"value.urlSegments\"\r\n [title]=\"value.title\"\r\n class=\"text-gray-400 hover:text-gray-500\">\r\n <svg class=\"flex-shrink-0 h-5 w-5\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 20 20\"\r\n fill=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path d=\"M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z\" />\r\n </svg>\r\n <span class=\"sr-only\">{{ value.title }}</span>\r\n </a>\r\n</ng-template>\r\n<ng-template let-value=\"value\"\r\n #linkTemplate>\r\n <svg class=\"flex-shrink-0 w-6 h-full text-gray-200\"\r\n viewBox=\"0 0 24 44\"\r\n preserveAspectRatio=\"none\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-hidden=\"true\">\r\n <path d=\"M.293 0l22 22-22 22h1.414l22-22-22-22H.293z\" />\r\n </svg>\r\n <a [routerLink]=\"value.urlSegments\"\r\n class=\"ml-4 text-sm font-medium text-gray-500 hover:text-gray-700\">\r\n {{ value.title }}\r\n </a>\r\n</ng-template>" }] }], ctorParameters: () => [{ type: i1.BreadcrumbService }] }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1jb21wb25lbnRzL3NyYy9saWIvY29udHJvbHMvYnJlYWRjcnVtYi9icmVhZGNydW1iLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWNvbXBvbmVudHMvc3JjL2xpYi9jb250cm9scy9icmVhZGNydW1iL2JyZWFkY3J1bWIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUdsRCxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7Ozs7O0FBTW5ELE1BQU0sT0FBTyxtQkFBbUI7SUFDNUIsWUFDWSxrQkFBcUM7UUFBckMsdUJBQWtCLEdBQWxCLGtCQUFrQixDQUFtQjtRQVcxQyxlQUFVLEdBQXFCLEVBQUUsQ0FBQztJQVZyQyxDQUFDO0lBRUUsUUFBUTtRQUNYLElBQUksQ0FBQyxrQkFBa0I7YUFDbEIsVUFBVTthQUNWLFNBQVMsQ0FBQyxDQUFDLFVBQTRCLEVBQUUsRUFBRTtZQUN4QyxJQUFJLENBQUMsVUFBVSxHQUFHLENBQUMsR0FBRyxVQUFVLEVBQUUsSUFBSSxjQUFjLENBQUMsRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFDbEUsQ0FBQyxDQUFDLENBQUM7SUFDWCxDQUFDOzhHQVhRLG1CQUFtQjtrR0FBbkIsbUJBQW1CLHNEQ1RoQyw0dERBeUNjOzsyRkRoQ0QsbUJBQW1CO2tCQUovQixTQUFTOytCQUNJLGdCQUFnQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5pbXBvcnQgeyBCcmVhZGNydW1iU2VydmljZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL2JyZWFkY3J1bWIuc2VydmljZSc7XHJcbmltcG9ydCB7IEJyZWFkY3J1bWJJdGVtIH0gZnJvbSAnLi9icmVhZGNydW1iLWl0ZW0nO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ2xpYi1icmVhZGNydW1iJyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9icmVhZGNydW1iLmNvbXBvbmVudC5odG1sJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgQnJlYWRjcnVtYkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgICBjb25zdHJ1Y3RvcihcclxuICAgICAgICBwcml2YXRlIF9icmVhZGNydW1iU2VydmljZTogQnJlYWRjcnVtYlNlcnZpY2VcclxuICAgICkgeyB9XHJcblxyXG4gICAgcHVibGljIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gICAgICAgIHRoaXMuX2JyZWFkY3J1bWJTZXJ2aWNlXHJcbiAgICAgICAgICAgIC5icmVhZGNydW1iXHJcbiAgICAgICAgICAgIC5zdWJzY3JpYmUoKGJyZWFkY3J1bWI6IEJyZWFkY3J1bWJJdGVtW10pID0+IHtcclxuICAgICAgICAgICAgICAgIHRoaXMuYnJlYWRjcnVtYiA9IFsuLi5icmVhZGNydW1iLCBuZXcgQnJlYWRjcnVtYkl0ZW0oJycsICcnKV07XHJcbiAgICAgICAgICAgIH0pO1xyXG4gICAgfVxyXG5cclxuICAgIHB1YmxpYyBicmVhZGNydW1iOiBCcmVhZGNydW1iSXRlbVtdID0gW107XHJcbn1cclxuIiwiPG5hdiBjbGFzcz1cImJnLXdoaXRlIGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMCBmbGV4XCJcclxuICAgICBhcmlhLWxhYmVsPVwiQnJlYWRjcnVtYlwiPlxyXG4gIDxvbCByb2xlPVwibGlzdFwiXHJcbiAgICAgIGNsYXNzPVwidy1mdWxsIG14LWF1dG8gcHgtNCBmbGV4IHNwYWNlLXgtNCBzbTpweC02IGxnOnB4LThcIj5cclxuICAgIDxsaSBjbGFzcz1cImZsZXhcIlxyXG4gICAgICAgICpuZ0Zvcj1cImxldCBpdGVtIG9mIGJyZWFkY3J1bWI7IGxldCBpID0gaW5kZXhcIj5cclxuICAgICAgPGRpdiBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyXCI+XHJcbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImkgPT09IDAgPyBob21lVGVtcGxhdGUgOiBsaW5rVGVtcGxhdGU7IGNvbnRleHQ6IHsgdmFsdWU6IGl0ZW0gfVwiPjwvbmctY29udGFpbmVyPlxyXG4gICAgICA8L2Rpdj5cclxuICAgIDwvbGk+XHJcbiAgPC9vbD5cclxuPC9uYXY+XHJcbjxuZy10ZW1wbGF0ZSBsZXQtdmFsdWU9XCJ2YWx1ZVwiXHJcbiAgICAgICAgICAgICAjaG9tZVRlbXBsYXRlPlxyXG4gIDxhIFtyb3V0ZXJMaW5rXT1cInZhbHVlLnVybFNlZ21lbnRzXCJcclxuICAgICBbdGl0bGVdPVwidmFsdWUudGl0bGVcIlxyXG4gICAgIGNsYXNzPVwidGV4dC1ncmF5LTQwMCBob3Zlcjp0ZXh0LWdyYXktNTAwXCI+XHJcbiAgICA8c3ZnIGNsYXNzPVwiZmxleC1zaHJpbmstMCBoLTUgdy01XCJcclxuICAgICAgICAgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiXHJcbiAgICAgICAgIHZpZXdCb3g9XCIwIDAgMjAgMjBcIlxyXG4gICAgICAgICBmaWxsPVwiY3VycmVudENvbG9yXCJcclxuICAgICAgICAgYXJpYS1oaWRkZW49XCJ0cnVlXCI+XHJcbiAgICAgIDxwYXRoIGQ9XCJNMTAuNzA3IDIuMjkzYTEgMSAwIDAwLTEuNDE0IDBsLTcgN2ExIDEgMCAwMDEuNDE0IDEuNDE0TDQgMTAuNDE0VjE3YTEgMSAwIDAwMSAxaDJhMSAxIDAgMDAxLTF2LTJhMSAxIDAgMDExLTFoMmExIDEgMCAwMTEgMXYyYTEgMSAwIDAwMSAxaDJhMSAxIDAgMDAxLTF2LTYuNTg2bC4yOTMuMjkzYTEgMSAwIDAwMS40MTQtMS40MTRsLTctN3pcIiAvPlxyXG4gICAgPC9zdmc+XHJcbiAgICA8c3BhbiBjbGFzcz1cInNyLW9ubHlcIj57eyB2YWx1ZS50aXRsZSB9fTwvc3Bhbj5cclxuICA8L2E+XHJcbjwvbmctdGVtcGxhdGU+XHJcbjxuZy10ZW1wbGF0ZSBsZXQtdmFsdWU9XCJ2YWx1ZVwiXHJcbiAgICAgICAgICAgICAjbGlua1RlbXBsYXRlPlxyXG4gIDxzdmcgY2xhc3M9XCJmbGV4LXNocmluay0wIHctNiBoLWZ1bGwgdGV4dC1ncmF5LTIwMFwiXHJcbiAgICAgICB2aWV3Qm94PVwiMCAwIDI0IDQ0XCJcclxuICAgICAgIHByZXNlcnZlQXNwZWN0UmF0aW89XCJub25lXCJcclxuICAgICAgIGZpbGw9XCJjdXJyZW50Q29sb3JcIlxyXG4gICAgICAgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiXHJcbiAgICAgICBhcmlhLWhpZGRlbj1cInRydWVcIj5cclxuICAgIDxwYXRoIGQ9XCJNLjI5MyAwbDIyIDIyLTIyIDIyaDEuNDE0bDIyLTIyLTIyLTIySC4yOTN6XCIgLz5cclxuICA8L3N2Zz5cclxuICA8YSBbcm91dGVyTGlua109XCJ2YWx1ZS51cmxTZWdtZW50c1wiXHJcbiAgICAgY2xhc3M9XCJtbC00IHRleHQtc20gZm9udC1tZWRpdW0gdGV4dC1ncmF5LTUwMCBob3Zlcjp0ZXh0LWdyYXktNzAwXCI+XHJcbiAgICB7eyB2YWx1ZS50aXRsZSB9fVxyXG4gIDwvYT5cclxuPC9uZy10ZW1wbGF0ZT4iXX0=