ngx-obelisco-example/esm2020/nav/o-nav-horizontal/o-nav-horizontal.component.mjs

Componentes funcionales y reutilizables para Angular.

import { Component, Input, ViewChildren } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/router";
export class ONavHorizontalComponent {
    constructor(renderer) {
        this.renderer = renderer;
        this.navHorItems = [];
        this.isBordered = false;
        this.size = 'md';
        this.exactRouteActive = false;
        this.customClasses = '';
    }
    ngAfterViewInit() {
        const indexArr = this.navHorItems.map((_, i) => i);
        this.navLinks.forEach((e, index) => {
            if ((e.nativeElement.href === '' || !e.nativeElement.href) && indexArr.includes(index)) {
                this.renderer.setAttribute(e.nativeElement, 'href', this.navHorItems[index].link);
            }
        });
    }
}
ONavHorizontalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ONavHorizontalComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
ONavHorizontalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ONavHorizontalComponent, selector: "o-nav-horizontal", inputs: { navHorItems: "navHorItems", isBordered: "isBordered", size: "size", exactRouteActive: "exactRouteActive", customClasses: "customClasses" }, viewQueries: [{ propertyName: "navLinks", predicate: ["navLink"], descendants: true }], ngImport: i0, template: "<nav [ngClass]=\"customClasses\">\r\n  <ul class=\"nav flex-row nav-pills\">\r\n    <li class=\"nav-item\" *ngFor=\"let item of navHorItems; index as i\">\r\n      <a\r\n        #navLink\r\n        class=\"nav-link\"\r\n        [class.border-link]=\"isBordered\"\r\n        [class.disabled]=\"item.isDisabled\"\r\n        routerLinkActive=\"active\"\r\n        [routerLinkActiveOptions]=\"{ exact: exactRouteActive ? true : false }\"\r\n        [routerLink]=\"item.route\"\r\n        [ngClass]=\"size ? 'nav-link-' + size : ''\"\r\n      >\r\n        <div *ngIf=\"i === 0 && item.icon; else simpleTitle\" class=\"nav-icon\">\r\n          <i [class]=\"item.icon\"></i>\r\n          <span>{{ item.title }}</span>\r\n        </div>\r\n        <ng-template #simpleTitle>\r\n          <span>{{ item.title }}</span>\r\n        </ng-template>\r\n      </a>\r\n    </li>\r\n  </ul>\r\n</nav>\r\n<!-- (click)=\"scrollToTop()\" -->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ONavHorizontalComponent, decorators: [{
            type: Component,
            args: [{ selector: 'o-nav-horizontal', template: "<nav [ngClass]=\"customClasses\">\r\n  <ul class=\"nav flex-row nav-pills\">\r\n    <li class=\"nav-item\" *ngFor=\"let item of navHorItems; index as i\">\r\n      <a\r\n        #navLink\r\n        class=\"nav-link\"\r\n        [class.border-link]=\"isBordered\"\r\n        [class.disabled]=\"item.isDisabled\"\r\n        routerLinkActive=\"active\"\r\n        [routerLinkActiveOptions]=\"{ exact: exactRouteActive ? true : false }\"\r\n        [routerLink]=\"item.route\"\r\n        [ngClass]=\"size ? 'nav-link-' + size : ''\"\r\n      >\r\n        <div *ngIf=\"i === 0 && item.icon; else simpleTitle\" class=\"nav-icon\">\r\n          <i [class]=\"item.icon\"></i>\r\n          <span>{{ item.title }}</span>\r\n        </div>\r\n        <ng-template #simpleTitle>\r\n          <span>{{ item.title }}</span>\r\n        </ng-template>\r\n      </a>\r\n    </li>\r\n  </ul>\r\n</nav>\r\n<!-- (click)=\"scrollToTop()\" -->\r\n" }]
        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { navHorItems: [{
                type: Input
            }], isBordered: [{
                type: Input
            }], size: [{
                type: Input
            }], exactRouteActive: [{
                type: Input
            }], customClasses: [{
                type: Input
            }], navLinks: [{
                type: ViewChildren,
                args: ['navLink']
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiby1uYXYtaG9yaXpvbnRhbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtb2JlbGlzY28vbmF2L28tbmF2LWhvcml6b250YWwvby1uYXYtaG9yaXpvbnRhbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtb2JlbGlzY28vbmF2L28tbmF2LWhvcml6b250YWwvby1uYXYtaG9yaXpvbnRhbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWlCLFNBQVMsRUFBYyxLQUFLLEVBQXdCLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQVNoSCxNQUFNLE9BQU8sdUJBQXVCO0lBU2xDLFlBQTZCLFFBQW1CO1FBQW5CLGFBQVEsR0FBUixRQUFRLENBQVc7UUFSaEMsZ0JBQVcsR0FBeUIsRUFBRSxDQUFDO1FBQ3ZDLGVBQVUsR0FBWSxLQUFLLENBQUM7UUFDNUIsU0FBSSxHQUFVLElBQUksQ0FBQztRQUNuQixxQkFBZ0IsR0FBWSxLQUFLLENBQUM7UUFDbEMsa0JBQWEsR0FBVyxFQUFFLENBQUM7SUFJUSxDQUFDO0lBRTdDLGVBQWU7UUFDcEIsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUVuRCxJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsRUFBRSxLQUFLLEVBQUUsRUFBRTtZQUNqQyxJQUFJLENBQUMsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxJQUFJLEtBQUssRUFBRSxJQUFJLENBQUMsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxRQUFRLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxFQUFFO2dCQUN0RixJQUFJLENBQUMsUUFBUSxDQUFDLFlBQVksQ0FBQyxDQUFDLENBQUMsYUFBYSxFQUFFLE1BQU0sRUFBRSxJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxDQUFDLElBQUssQ0FBQyxDQUFDO2FBQ3BGO1FBQ0gsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDOztvSEFuQlUsdUJBQXVCO3dHQUF2Qix1QkFBdUIsc1NDVHBDLCs1QkF5QkE7MkZEaEJhLHVCQUF1QjtrQkFMbkMsU0FBUzsrQkFDRSxrQkFBa0I7Z0dBS1osV0FBVztzQkFBMUIsS0FBSztnQkFDVSxVQUFVO3NCQUF6QixLQUFLO2dCQUNVLElBQUk7c0JBQW5CLEtBQUs7Z0JBQ1UsZ0JBQWdCO3NCQUEvQixLQUFLO2dCQUNVLGFBQWE7c0JBQTVCLEtBQUs7Z0JBRTBCLFFBQVE7c0JBQXZDLFlBQVk7dUJBQUMsU0FBUyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFmdGVyVmlld0luaXQsIENvbXBvbmVudCwgRWxlbWVudFJlZiwgSW5wdXQsIFF1ZXJ5TGlzdCwgUmVuZGVyZXIyLCBWaWV3Q2hpbGRyZW4gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTmF2SG9yaXpvbnRhbEl0ZW1zIH0gZnJvbSAnbmd4LW9iZWxpc2NvLWV4YW1wbGUvY29yZS9tb2RlbHMnO1xyXG5pbXBvcnQgeyBTaXplcyB9IGZyb20gJ25neC1vYmVsaXNjby1leGFtcGxlL2NvcmUvbW9kZWxzJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnby1uYXYtaG9yaXpvbnRhbCcsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL28tbmF2LWhvcml6b250YWwuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL28tbmF2LWhvcml6b250YWwuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgT05hdkhvcml6b250YWxDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0IHtcclxuICBASW5wdXQoKSBwdWJsaWMgbmF2SG9ySXRlbXM6IE5hdkhvcml6b250YWxJdGVtc1tdID0gW107XHJcbiAgQElucHV0KCkgcHVibGljIGlzQm9yZGVyZWQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBASW5wdXQoKSBwdWJsaWMgc2l6ZTogU2l6ZXMgPSAnbWQnO1xyXG4gIEBJbnB1dCgpIHB1YmxpYyBleGFjdFJvdXRlQWN0aXZlOiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KCkgcHVibGljIGN1c3RvbUNsYXNzZXM6IHN0cmluZyA9ICcnO1xyXG5cclxuICBAVmlld0NoaWxkcmVuKCduYXZMaW5rJykgcHVibGljIG5hdkxpbmtzITogUXVlcnlMaXN0PEVsZW1lbnRSZWY+O1xyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHJlYWRvbmx5IHJlbmRlcmVyOiBSZW5kZXJlcjIpIHt9XHJcblxyXG4gIHB1YmxpYyBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XHJcbiAgICBjb25zdCBpbmRleEFyciA9IHRoaXMubmF2SG9ySXRlbXMubWFwKChfLCBpKSA9PiBpKTtcclxuXHJcbiAgICB0aGlzLm5hdkxpbmtzLmZvckVhY2goKGUsIGluZGV4KSA9PiB7XHJcbiAgICAgIGlmICgoZS5uYXRpdmVFbGVtZW50LmhyZWYgPT09ICcnIHx8ICFlLm5hdGl2ZUVsZW1lbnQuaHJlZikgJiYgaW5kZXhBcnIuaW5jbHVkZXMoaW5kZXgpKSB7XHJcbiAgICAgICAgdGhpcy5yZW5kZXJlci5zZXRBdHRyaWJ1dGUoZS5uYXRpdmVFbGVtZW50LCAnaHJlZicsIHRoaXMubmF2SG9ySXRlbXNbaW5kZXhdLmxpbmshKTtcclxuICAgICAgfVxyXG4gICAgfSk7XHJcbiAgfVxyXG5cclxuICAvLyBwdWJsaWMgc2Nyb2xsVG9Ub3AoKTogdm9pZCB7XHJcbiAgLy8gICB3aW5kb3cuc2Nyb2xsVG8oeyB0b3A6IDAsIGJlaGF2aW9yOiAnc21vb3RoJyB9KTtcclxuICAvLyB9XHJcbn1cclxuIiwiPG5hdiBbbmdDbGFzc109XCJjdXN0b21DbGFzc2VzXCI+XHJcbiAgPHVsIGNsYXNzPVwibmF2IGZsZXgtcm93IG5hdi1waWxsc1wiPlxyXG4gICAgPGxpIGNsYXNzPVwibmF2LWl0ZW1cIiAqbmdGb3I9XCJsZXQgaXRlbSBvZiBuYXZIb3JJdGVtczsgaW5kZXggYXMgaVwiPlxyXG4gICAgICA8YVxyXG4gICAgICAgICNuYXZMaW5rXHJcbiAgICAgICAgY2xhc3M9XCJuYXYtbGlua1wiXHJcbiAgICAgICAgW2NsYXNzLmJvcmRlci1saW5rXT1cImlzQm9yZGVyZWRcIlxyXG4gICAgICAgIFtjbGFzcy5kaXNhYmxlZF09XCJpdGVtLmlzRGlzYWJsZWRcIlxyXG4gICAgICAgIHJvdXRlckxpbmtBY3RpdmU9XCJhY3RpdmVcIlxyXG4gICAgICAgIFtyb3V0ZXJMaW5rQWN0aXZlT3B0aW9uc109XCJ7IGV4YWN0OiBleGFjdFJvdXRlQWN0aXZlID8gdHJ1ZSA6IGZhbHNlIH1cIlxyXG4gICAgICAgIFtyb3V0ZXJMaW5rXT1cIml0ZW0ucm91dGVcIlxyXG4gICAgICAgIFtuZ0NsYXNzXT1cInNpemUgPyAnbmF2LWxpbmstJyArIHNpemUgOiAnJ1wiXHJcbiAgICAgID5cclxuICAgICAgICA8ZGl2ICpuZ0lmPVwiaSA9PT0gMCAmJiBpdGVtLmljb247IGVsc2Ugc2ltcGxlVGl0bGVcIiBjbGFzcz1cIm5hdi1pY29uXCI+XHJcbiAgICAgICAgICA8aSBbY2xhc3NdPVwiaXRlbS5pY29uXCI+PC9pPlxyXG4gICAgICAgICAgPHNwYW4+e3sgaXRlbS50aXRsZSB9fTwvc3Bhbj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8bmctdGVtcGxhdGUgI3NpbXBsZVRpdGxlPlxyXG4gICAgICAgICAgPHNwYW4+e3sgaXRlbS50aXRsZSB9fTwvc3Bhbj5cclxuICAgICAgICA8L25nLXRlbXBsYXRlPlxyXG4gICAgICA8L2E+XHJcbiAgICA8L2xpPlxyXG4gIDwvdWw+XHJcbjwvbmF2PlxyXG48IS0tIChjbGljayk9XCJzY3JvbGxUb1RvcCgpXCIgLS0+XHJcbiJdfQ==