@indice/ng-components
Version:
Indice common components for Angular v12
54 lines • 14.9 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/router";
export class NavLinksListComponent {
constructor() {
// tslint:disable-next-line:no-input-rename
this.navLinkClass = 'nav-link';
// tslint:disable-next-line:no-input-rename
this.navLinkActiveClass = 'nav-link-active';
// tslint:disable-next-line:no-input-rename
this.containerClass = undefined;
// tslint:disable-next-line:no-input-rename
this.showIcons = false;
this.showText = true;
this.largeIcons = false;
}
ngOnDestroy() {
this.fragmentSub$?.unsubscribe();
}
ngOnInit() {
this.fragmentSub$ = this.activeFragment?.subscribe(fragment => this.fragmentValue = fragment);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: NavLinksListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: NavLinksListComponent, selector: "lib-nav-links-list", inputs: { links: "links", activeFragment: ["active-fragment", "activeFragment"], navLinkClass: ["link-class", "navLinkClass"], navLinkActiveClass: ["link-active-class", "navLinkActiveClass"], containerClass: ["container-class", "containerClass"], showIcons: ["show-icons", "showIcons"], showText: ["show-text", "showText"], largeIcons: ["large-icons", "largeIcons"] }, ngImport: i0, template: "\r\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\r\n <div class=\"nav-link-list-container-inner\" [class.icons-only]=\"!showText\">\r\n <ng-container *ngFor=\"let link of links | async\">\r\n <ng-container [ngSwitch]=\"link.type\">\r\n <div *ngSwitchCase=\"'sparator'\" class=\"h-2\"></div>\r\n <a *ngSwitchCase=\"'router'\"\r\n href=\"#\"\r\n [routerLink]=\"[link.path]\"\r\n [routerLinkActive]=\"navLinkActiveClass\"\r\n [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n [queryParams]=\"link.queryParams\"\r\n [class]=\"navLinkClass\"\r\n [class.min-nav-link-text-width]=\"showText\">\r\n <div class=\"inline-flex items-center\">\r\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon\" [class.text-2xl]=\"largeIcons\" [class.p-1]=\"largeIcons\"></i>\r\n <span [class.ml-3]=\"showIcons && link.icon\" *ngIf=\"showText\">{{ link.text }}</span>\r\n </div>\r\n </a>\r\n <a *ngSwitchCase=\"'external'\"\r\n [href]=\"link.path\"\r\n [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n [class]=\"navLinkClass\"\r\n [class.min-nav-link-text-width]=\"showText\">\r\n <div class=\"inline-flex items-center\">\r\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon\" [class.text-2xl]=\"largeIcons\" [class.p-1]=\"largeIcons\"></i>\r\n <span [class.ml-3]=\"showIcons && link.icon\" *ngIf=\"showText\">{{ link.text }}</span>\r\n </div>\r\n </a>\r\n <a *ngSwitchCase=\"'fragment'\"\r\n routerLink=\".\"\r\n [fragment]=\"link.path\"\r\n [class]=\"fragmentValue === link.path ? navLinkClass + ' ' + navLinkActiveClass : navLinkClass\"\r\n [class.min-nav-link-text-width]=\"showText\">\r\n <div class=\"inline-flex items-center\">\r\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon\" [class.text-2xl]=\"largeIcons\" [class.p-1]=\"largeIcons\"></i>\r\n <span [class.ml-3]=\"showIcons && link.icon\" *ngIf=\"showText\">{{ link.text }}</span>\r\n </div>\r\n </a>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: NavLinksListComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-nav-links-list', template: "\r\n<div [class]=\"containerClass ?? 'nav-link-list-container'\">\r\n <div class=\"nav-link-list-container-inner\" [class.icons-only]=\"!showText\">\r\n <ng-container *ngFor=\"let link of links | async\">\r\n <ng-container [ngSwitch]=\"link.type\">\r\n <div *ngSwitchCase=\"'sparator'\" class=\"h-2\"></div>\r\n <a *ngSwitchCase=\"'router'\"\r\n href=\"#\"\r\n [routerLink]=\"[link.path]\"\r\n [routerLinkActive]=\"navLinkActiveClass\"\r\n [routerLinkActiveOptions]=\"{ exact: link.exact }\"\r\n [queryParams]=\"link.queryParams\"\r\n [class]=\"navLinkClass\"\r\n [class.min-nav-link-text-width]=\"showText\">\r\n <div class=\"inline-flex items-center\">\r\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon\" [class.text-2xl]=\"largeIcons\" [class.p-1]=\"largeIcons\"></i>\r\n <span [class.ml-3]=\"showIcons && link.icon\" *ngIf=\"showText\">{{ link.text }}</span>\r\n </div>\r\n </a>\r\n <a *ngSwitchCase=\"'external'\"\r\n [href]=\"link.path\"\r\n [attr.target]=\"link.external ? '_blank' : '_self'\"\r\n [class]=\"navLinkClass\"\r\n [class.min-nav-link-text-width]=\"showText\">\r\n <div class=\"inline-flex items-center\">\r\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon\" [class.text-2xl]=\"largeIcons\" [class.p-1]=\"largeIcons\"></i>\r\n <span [class.ml-3]=\"showIcons && link.icon\" *ngIf=\"showText\">{{ link.text }}</span>\r\n </div>\r\n </a>\r\n <a *ngSwitchCase=\"'fragment'\"\r\n routerLink=\".\"\r\n [fragment]=\"link.path\"\r\n [class]=\"fragmentValue === link.path ? navLinkClass + ' ' + navLinkActiveClass : navLinkClass\"\r\n [class.min-nav-link-text-width]=\"showText\">\r\n <div class=\"inline-flex items-center\">\r\n <i *ngIf=\"showIcons && link.icon\" [class]=\"link.icon\" [class.text-2xl]=\"largeIcons\" [class.p-1]=\"largeIcons\"></i>\r\n <span [class.ml-3]=\"showIcons && link.icon\" *ngIf=\"showText\">{{ link.text }}</span>\r\n </div>\r\n </a>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</div>\r\n" }]
}], ctorParameters: () => [], propDecorators: { links: [{
type: Input
}], activeFragment: [{
type: Input,
args: ['active-fragment']
}], navLinkClass: [{
type: Input,
args: ['link-class']
}], navLinkActiveClass: [{
type: Input,
args: ['link-active-class']
}], containerClass: [{
type: Input,
args: ['container-class']
}], showIcons: [{
type: Input,
args: ['show-icons']
}], showText: [{
type: Input,
args: ['show-text']
}], largeIcons: [{
type: Input,
args: ['large-icons']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2LWxpbmtzLWxpc3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctY29tcG9uZW50cy9zcmMvbGliL2NvbnRyb2xzL25hdi1saW5rcy1saXN0L25hdi1saW5rcy1saXN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWNvbXBvbmVudHMvc3JjL2xpYi9jb250cm9scy9uYXYtbGlua3MtbGlzdC9uYXYtbGlua3MtbGlzdC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBcUIsTUFBTSxlQUFlLENBQUM7Ozs7QUFPcEUsTUFBTSxPQUFPLHFCQUFxQjtJQWlCaEM7UUFaQSwyQ0FBMkM7UUFDdEIsaUJBQVksR0FBb0IsVUFBVSxDQUFDO1FBQ2hFLDJDQUEyQztRQUNmLHVCQUFrQixHQUFzQixpQkFBaUIsQ0FBQztRQUN0RiwyQ0FBMkM7UUFDakIsbUJBQWMsR0FBa0MsU0FBUyxDQUFDO1FBQ3BGLDJDQUEyQztRQUN0QixjQUFTLEdBQXdCLEtBQUssQ0FBQztRQUN4QyxhQUFRLEdBQXdCLElBQUksQ0FBQztRQUNuQyxlQUFVLEdBQVksS0FBSyxDQUFDO0lBR2xDLENBQUM7SUFFakIsV0FBVztRQUNULElBQUksQ0FBQyxZQUFZLEVBQUUsV0FBVyxFQUFFLENBQUM7SUFDbkMsQ0FBQztJQUVELFFBQVE7UUFDSixJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxjQUFjLEVBQUUsU0FBUyxDQUFFLFFBQVEsQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLGFBQWEsR0FBRyxRQUFRLENBQUMsQ0FBQztJQUNuRyxDQUFDOzhHQXpCVSxxQkFBcUI7a0dBQXJCLHFCQUFxQiwyYUNSbEMsbXVFQTJDQTs7MkZEbkNhLHFCQUFxQjtrQkFKakMsU0FBUzsrQkFDRSxvQkFBb0I7d0RBS3JCLEtBQUs7c0JBQWIsS0FBSztnQkFFb0IsY0FBYztzQkFBdkMsS0FBSzt1QkFBQyxpQkFBaUI7Z0JBRUgsWUFBWTtzQkFBaEMsS0FBSzt1QkFBQyxZQUFZO2dCQUVTLGtCQUFrQjtzQkFBN0MsS0FBSzt1QkFBQyxtQkFBbUI7Z0JBRUEsY0FBYztzQkFBdkMsS0FBSzt1QkFBQyxpQkFBaUI7Z0JBRUgsU0FBUztzQkFBN0IsS0FBSzt1QkFBQyxZQUFZO2dCQUNDLFFBQVE7c0JBQTNCLEtBQUs7dUJBQUMsV0FBVztnQkFDSSxVQUFVO3NCQUEvQixLQUFLO3VCQUFDLGFBQWEiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBPYnNlcnZhYmxlLCBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25EZXN0cm95LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTmF2TGluayB9IGZyb20gJy4uLy4uL3R5cGVzJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbGliLW5hdi1saW5rcy1saXN0JyxcclxuICB0ZW1wbGF0ZVVybDogJy4vbmF2LWxpbmtzLWxpc3QuY29tcG9uZW50Lmh0bWwnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBOYXZMaW5rc0xpc3RDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XHJcblxyXG4gIEBJbnB1dCgpIGxpbmtzOiBPYnNlcnZhYmxlPE5hdkxpbmtbXT4gfCB1bmRlZmluZWQ7XHJcbiAgLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOm5vLWlucHV0LXJlbmFtZVxyXG4gIEBJbnB1dCgnYWN0aXZlLWZyYWdtZW50JykgYWN0aXZlRnJhZ21lbnQ6IE9ic2VydmFibGU8c3RyaW5nPiB8IHVuZGVmaW5lZDtcclxuICAvLyB0c2xpbnQ6ZGlzYWJsZS1uZXh0LWxpbmU6bm8taW5wdXQtcmVuYW1lXHJcbiAgQElucHV0KCdsaW5rLWNsYXNzJykgbmF2TGlua0NsYXNzOiBzdHJpbmcgfCBzdHJpbmcgPSAnbmF2LWxpbmsnO1xyXG4gIC8vIHRzbGludDpkaXNhYmxlLW5leHQtbGluZTpuby1pbnB1dC1yZW5hbWVcclxuICBASW5wdXQoJ2xpbmstYWN0aXZlLWNsYXNzJykgbmF2TGlua0FjdGl2ZUNsYXNzOiBzdHJpbmcgfCBzdHJpbmdbXSA9ICduYXYtbGluay1hY3RpdmUnO1xyXG4gIC8vIHRzbGludDpkaXNhYmxlLW5leHQtbGluZTpuby1pbnB1dC1yZW5hbWVcclxuICBASW5wdXQoJ2NvbnRhaW5lci1jbGFzcycpIGNvbnRhaW5lckNsYXNzOiBzdHJpbmcgfCBzdHJpbmdbXSB8IHVuZGVmaW5lZCA9IHVuZGVmaW5lZDtcclxuICAvLyB0c2xpbnQ6ZGlzYWJsZS1uZXh0LWxpbmU6bm8taW5wdXQtcmVuYW1lXHJcbiAgQElucHV0KCdzaG93LWljb25zJykgc2hvd0ljb25zOiBib29sZWFuIHwgdW5kZWZpbmVkID0gZmFsc2U7XHJcbiAgQElucHV0KCdzaG93LXRleHQnKSBzaG93VGV4dDogYm9vbGVhbiB8IHVuZGVmaW5lZCA9IHRydWU7XHJcbiAgQElucHV0KCdsYXJnZS1pY29ucycpIGxhcmdlSWNvbnM6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBwdWJsaWMgZnJhZ21lbnRWYWx1ZTogc3RyaW5nIHwgdW5kZWZpbmVkO1xyXG4gIHByaXZhdGUgZnJhZ21lbnRTdWIkOiBTdWJzY3JpcHRpb24gfCB1bmRlZmluZWQ7XHJcbiAgY29uc3RydWN0b3IoKSB7IH1cclxuICBcclxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcclxuICAgIHRoaXMuZnJhZ21lbnRTdWIkPy51bnN1YnNjcmliZSgpO1xyXG4gIH1cclxuXHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICAgIHRoaXMuZnJhZ21lbnRTdWIkID0gdGhpcy5hY3RpdmVGcmFnbWVudD8uc3Vic2NyaWJlKCBmcmFnbWVudCA9PiB0aGlzLmZyYWdtZW50VmFsdWUgPSBmcmFnbWVudCk7XHJcbiAgfVxyXG5cclxufVxyXG4iLCJcclxuPGRpdiBbY2xhc3NdPVwiY29udGFpbmVyQ2xhc3MgPz8gJ25hdi1saW5rLWxpc3QtY29udGFpbmVyJ1wiPlxyXG4gIDxkaXYgY2xhc3M9XCJuYXYtbGluay1saXN0LWNvbnRhaW5lci1pbm5lclwiIFtjbGFzcy5pY29ucy1vbmx5XT1cIiFzaG93VGV4dFwiPlxyXG4gICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgbGluayBvZiBsaW5rcyB8IGFzeW5jXCI+XHJcbiAgICAgIDxuZy1jb250YWluZXIgW25nU3dpdGNoXT1cImxpbmsudHlwZVwiPlxyXG4gICAgICAgIDxkaXYgKm5nU3dpdGNoQ2FzZT1cIidzcGFyYXRvcidcIiBjbGFzcz1cImgtMlwiPjwvZGl2PlxyXG4gICAgICAgIDxhICpuZ1N3aXRjaENhc2U9XCIncm91dGVyJ1wiXHJcbiAgICAgICAgICBocmVmPVwiI1wiXHJcbiAgICAgICAgICBbcm91dGVyTGlua109XCJbbGluay5wYXRoXVwiXHJcbiAgICAgICAgICBbcm91dGVyTGlua0FjdGl2ZV09XCJuYXZMaW5rQWN0aXZlQ2xhc3NcIlxyXG4gICAgICAgICAgW3JvdXRlckxpbmtBY3RpdmVPcHRpb25zXT1cInsgZXhhY3Q6IGxpbmsuZXhhY3QgfVwiXHJcbiAgICAgICAgICBbcXVlcnlQYXJhbXNdPVwibGluay5xdWVyeVBhcmFtc1wiXHJcbiAgICAgICAgICBbY2xhc3NdPVwibmF2TGlua0NsYXNzXCJcclxuICAgICAgICAgIFtjbGFzcy5taW4tbmF2LWxpbmstdGV4dC13aWR0aF09XCJzaG93VGV4dFwiPlxyXG4gICAgICAgICAgPGRpdiBjbGFzcz1cImlubGluZS1mbGV4IGl0ZW1zLWNlbnRlclwiPlxyXG4gICAgICAgICAgICA8aSAqbmdJZj1cInNob3dJY29ucyAmJiBsaW5rLmljb25cIiBbY2xhc3NdPVwibGluay5pY29uXCIgW2NsYXNzLnRleHQtMnhsXT1cImxhcmdlSWNvbnNcIiBbY2xhc3MucC0xXT1cImxhcmdlSWNvbnNcIj48L2k+XHJcbiAgICAgICAgICAgIDxzcGFuIFtjbGFzcy5tbC0zXT1cInNob3dJY29ucyAmJiBsaW5rLmljb25cIiAqbmdJZj1cInNob3dUZXh0XCI+e3sgbGluay50ZXh0IH19PC9zcGFuPlxyXG4gICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9hPlxyXG4gICAgICAgIDxhICpuZ1N3aXRjaENhc2U9XCInZXh0ZXJuYWwnXCJcclxuICAgICAgICAgIFtocmVmXT1cImxpbmsucGF0aFwiXHJcbiAgICAgICAgICBbYXR0ci50YXJnZXRdPVwibGluay5leHRlcm5hbCA/ICdfYmxhbmsnIDogJ19zZWxmJ1wiXHJcbiAgICAgICAgICBbY2xhc3NdPVwibmF2TGlua0NsYXNzXCJcclxuICAgICAgICAgIFtjbGFzcy5taW4tbmF2LWxpbmstdGV4dC13aWR0aF09XCJzaG93VGV4dFwiPlxyXG4gICAgICAgICAgPGRpdiBjbGFzcz1cImlubGluZS1mbGV4IGl0ZW1zLWNlbnRlclwiPlxyXG4gICAgICAgICAgPGkgKm5nSWY9XCJzaG93SWNvbnMgJiYgbGluay5pY29uXCIgW2NsYXNzXT1cImxpbmsuaWNvblwiIFtjbGFzcy50ZXh0LTJ4bF09XCJsYXJnZUljb25zXCIgW2NsYXNzLnAtMV09XCJsYXJnZUljb25zXCI+PC9pPlxyXG4gICAgICAgICAgPHNwYW4gW2NsYXNzLm1sLTNdPVwic2hvd0ljb25zICYmIGxpbmsuaWNvblwiICpuZ0lmPVwic2hvd1RleHRcIj57eyBsaW5rLnRleHQgfX08L3NwYW4+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9hPlxyXG4gICAgICAgIDxhICpuZ1N3aXRjaENhc2U9XCInZnJhZ21lbnQnXCJcclxuICAgICAgICAgIHJvdXRlckxpbms9XCIuXCJcclxuICAgICAgICAgIFtmcmFnbWVudF09XCJsaW5rLnBhdGhcIlxyXG4gICAgICAgICAgW2NsYXNzXT1cImZyYWdtZW50VmFsdWUgPT09IGxpbmsucGF0aCA/IG5hdkxpbmtDbGFzcyArICcgJyArIG5hdkxpbmtBY3RpdmVDbGFzcyA6IG5hdkxpbmtDbGFzc1wiXHJcbiAgICAgICAgICBbY2xhc3MubWluLW5hdi1saW5rLXRleHQtd2lkdGhdPVwic2hvd1RleHRcIj5cclxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJpbmxpbmUtZmxleCBpdGVtcy1jZW50ZXJcIj5cclxuICAgICAgICAgICAgPGkgKm5nSWY9XCJzaG93SWNvbnMgJiYgbGluay5pY29uXCIgW2NsYXNzXT1cImxpbmsuaWNvblwiIFtjbGFzcy50ZXh0LTJ4bF09XCJsYXJnZUljb25zXCIgW2NsYXNzLnAtMV09XCJsYXJnZUljb25zXCI+PC9pPlxyXG4gICAgICAgICAgICA8c3BhbiBbY2xhc3MubWwtM109XCJzaG93SWNvbnMgJiYgbGluay5pY29uXCIgKm5nSWY9XCJzaG93VGV4dFwiPnt7IGxpbmsudGV4dCB9fTwvc3Bhbj5cclxuICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDwvYT5cclxuICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICA8L25nLWNvbnRhaW5lcj5cclxuICA8L2Rpdj5cclxuPC9kaXY+XHJcbiJdfQ==