ngx-obelisco-example
Version:
Componentes funcionales y reutilizables para Angular.
244 lines (237 loc) • 31.7 kB
JavaScript
import * as i2 from '@angular/router';
import { RouterModule } from '@angular/router';
import * as i0 from '@angular/core';
import { Component, Input, ViewChildren, ViewContainerRef, ViewChild, HostListener, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
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']
}] } });
class ONavVerticalComponent {
constructor() {
this.navVertItems = [];
this.exactRouteActive = false;
this.customClasses = '';
}
scrollToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
}
ONavVerticalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ONavVerticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ONavVerticalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ONavVerticalComponent, selector: "o-nav-vertical", inputs: { navVertItems: "navVertItems", exactRouteActive: "exactRouteActive", customClasses: "customClasses" }, ngImport: i0, template: "<nav [ngClass]=\"customClasses\">\r\n <ul class=\"nav flex-column nav-pills nav-lg\">\r\n <li class=\"nav-item\" *ngFor=\"let item of navVertItems; index as i\">\r\n <a\r\n *ngIf=\"item.children && item.children?.length !== 0; else templateChild\"\r\n routerLinkActive=\"active-child\"\r\n class=\"nav-link\"\r\n [class.active-child]=\"navLink.isActive\"\r\n #navLink=\"routerLinkActive\"\r\n [class.disabled]=\"item.isDisabled\"\r\n [routerLink]=\"item.route\"\r\n (click)=\"scrollToTop()\"\r\n >\r\n <div class=\"nav-icon\">\r\n <ng-container *ngIf=\"item.icon\">\r\n <i *ngIf=\"item.icon.includes('bx')\" [ngClass]=\"item.icon\"></i>\r\n <span *ngIf=\"!item.icon.includes('bx')\" class=\"material-icons-round\" aria-hidden=\"true\">{{\r\n item.icon\r\n }}</span>\r\n </ng-container>\r\n <span>{{ item.title }}</span>\r\n </div>\r\n </a>\r\n <ng-template #templateChild>\r\n <a\r\n class=\"nav-link\"\r\n [class.active]=\"navLinkSecondLevel.isActive\"\r\n routerLinkActive=\"active\"\r\n [routerLinkActiveOptions]=\"{ exact: exactRouteActive ? true : false }\"\r\n #navLinkSecondLevel=\"routerLinkActive\"\r\n [routerLink]=\"item.route\"\r\n [class.disabled]=\"item.isDisabled\"\r\n (click)=\"scrollToTop()\"\r\n >\r\n <div class=\"nav-icon\">\r\n <ng-container *ngIf=\"item.icon\">\r\n <i *ngIf=\"item.icon.includes('bx')\" [ngClass]=\"item.icon\"></i>\r\n <span *ngIf=\"!item.icon.includes('bx')\" class=\"material-icons-round\" aria-hidden=\"true\">{{\r\n item.icon\r\n }}</span>\r\n </ng-container>\r\n <span>{{ item.title }}</span>\r\n </div>\r\n </a>\r\n </ng-template>\r\n <ul *ngFor=\"let secondItem of item.children; index as j\" class=\"nav flex-column nav-pills\">\r\n <li class=\"nav-item\">\r\n <a\r\n *ngIf=\"secondItem.children && secondItem.children?.length !== 0; else templateChild\"\r\n class=\"nav-link\"\r\n [class.active-child]=\"navLinkSecondLevel.isActive\"\r\n routerLinkActive=\"active-child\"\r\n #navLinkSecondLevel=\"routerLinkActive\"\r\n [routerLink]=\"secondItem.route\"\r\n [class.disabled]=\"item.isDisabled\"\r\n (click)=\"scrollToTop()\"\r\n >\r\n <div class=\"nav-icon\">\r\n <ng-container *ngIf=\"secondItem.icon\">\r\n <i *ngIf=\"secondItem.icon.includes('bx')\" [ngClass]=\"secondItem.icon\"></i>\r\n <span *ngIf=\"!secondItem.icon.includes('bx')\" class=\"material-icons-round\" aria-hidden=\"true\">{{\r\n secondItem.icon\r\n }}</span>\r\n </ng-container>\r\n <i class=\"bx bxs-info-circle\"></i>\r\n <span>{{ secondItem.title }} </span>\r\n </div>\r\n </a>\r\n <ng-template #templateChild>\r\n <a\r\n class=\"nav-link\"\r\n [class.active]=\"navLinkSecondLevel.isActive\"\r\n routerLinkActive=\"active\"\r\n [routerLinkActiveOptions]=\"{ exact: exactRouteActive ? true : false }\"\r\n #navLinkSecondLevel=\"routerLinkActive\"\r\n [routerLink]=\"secondItem.route\"\r\n [class.disabled]=\"item.isDisabled\"\r\n (click)=\"scrollToTop()\"\r\n >\r\n <div class=\"nav-icon\">\r\n <ng-container *ngIf=\"secondItem.icon\">\r\n <i *ngIf=\"secondItem.icon.includes('bx')\" [ngClass]=\"secondItem.icon\"></i>\r\n <span *ngIf=\"!secondItem.icon.includes('bx')\" class=\"material-icons-round\" aria-hidden=\"true\">{{\r\n secondItem.icon\r\n }}</span>\r\n </ng-container>\r\n <span>{{ secondItem.title }} </span>\r\n </div>\r\n </a>\r\n </ng-template>\r\n <ul *ngFor=\"let thirdItem of secondItem.children; index as z\" class=\"nav flex-column nav-pills\">\r\n <li class=\"nav-item\">\r\n <a\r\n class=\"nav-link\"\r\n [class.active]=\"navLinkThirdLevel.isActive\"\r\n routerLinkActive=\"active\"\r\n [routerLinkActiveOptions]=\"{ exact: exactRouteActive ? true : false }\"\r\n #navLinkThirdLevel=\"routerLinkActive\"\r\n [routerLink]=\"thirdItem.route\"\r\n [class.disabled]=\"item.isDisabled\"\r\n (click)=\"scrollToTop()\"\r\n >\r\n <div class=\"nav-icon\">\r\n <ng-container *ngIf=\"thirdItem.icon\">\r\n <i *ngIf=\"thirdItem.icon.includes('bx')\" [ngClass]=\"thirdItem.icon\"></i>\r\n <span *ngIf=\"!thirdItem.icon.includes('bx')\" class=\"material-icons-round\" aria-hidden=\"true\">{{\r\n thirdItem.icon\r\n }}</span>\r\n </ng-container>\r\n <span>{{ thirdItem.title }}</span>\r\n </div>\r\n </a>\r\n </li>\r\n </ul>\r\n </li>\r\n </ul>\r\n </li>\r\n </ul>\r\n</nav>\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: ONavVerticalComponent, decorators: [{
type: Component,
args: [{ selector: 'o-nav-vertical', template: "<nav [ngClass]=\"customClasses\">\r\n <ul class=\"nav flex-column nav-pills nav-lg\">\r\n <li class=\"nav-item\" *ngFor=\"let item of navVertItems; index as i\">\r\n <a\r\n *ngIf=\"item.children && item.children?.length !== 0; else templateChild\"\r\n routerLinkActive=\"active-child\"\r\n class=\"nav-link\"\r\n [class.active-child]=\"navLink.isActive\"\r\n #navLink=\"routerLinkActive\"\r\n [class.disabled]=\"item.isDisabled\"\r\n [routerLink]=\"item.route\"\r\n (click)=\"scrollToTop()\"\r\n >\r\n <div class=\"nav-icon\">\r\n <ng-container *ngIf=\"item.icon\">\r\n <i *ngIf=\"item.icon.includes('bx')\" [ngClass]=\"item.icon\"></i>\r\n <span *ngIf=\"!item.icon.includes('bx')\" class=\"material-icons-round\" aria-hidden=\"true\">{{\r\n item.icon\r\n }}</span>\r\n </ng-container>\r\n <span>{{ item.title }}</span>\r\n </div>\r\n </a>\r\n <ng-template #templateChild>\r\n <a\r\n class=\"nav-link\"\r\n [class.active]=\"navLinkSecondLevel.isActive\"\r\n routerLinkActive=\"active\"\r\n [routerLinkActiveOptions]=\"{ exact: exactRouteActive ? true : false }\"\r\n #navLinkSecondLevel=\"routerLinkActive\"\r\n [routerLink]=\"item.route\"\r\n [class.disabled]=\"item.isDisabled\"\r\n (click)=\"scrollToTop()\"\r\n >\r\n <div class=\"nav-icon\">\r\n <ng-container *ngIf=\"item.icon\">\r\n <i *ngIf=\"item.icon.includes('bx')\" [ngClass]=\"item.icon\"></i>\r\n <span *ngIf=\"!item.icon.includes('bx')\" class=\"material-icons-round\" aria-hidden=\"true\">{{\r\n item.icon\r\n }}</span>\r\n </ng-container>\r\n <span>{{ item.title }}</span>\r\n </div>\r\n </a>\r\n </ng-template>\r\n <ul *ngFor=\"let secondItem of item.children; index as j\" class=\"nav flex-column nav-pills\">\r\n <li class=\"nav-item\">\r\n <a\r\n *ngIf=\"secondItem.children && secondItem.children?.length !== 0; else templateChild\"\r\n class=\"nav-link\"\r\n [class.active-child]=\"navLinkSecondLevel.isActive\"\r\n routerLinkActive=\"active-child\"\r\n #navLinkSecondLevel=\"routerLinkActive\"\r\n [routerLink]=\"secondItem.route\"\r\n [class.disabled]=\"item.isDisabled\"\r\n (click)=\"scrollToTop()\"\r\n >\r\n <div class=\"nav-icon\">\r\n <ng-container *ngIf=\"secondItem.icon\">\r\n <i *ngIf=\"secondItem.icon.includes('bx')\" [ngClass]=\"secondItem.icon\"></i>\r\n <span *ngIf=\"!secondItem.icon.includes('bx')\" class=\"material-icons-round\" aria-hidden=\"true\">{{\r\n secondItem.icon\r\n }}</span>\r\n </ng-container>\r\n <i class=\"bx bxs-info-circle\"></i>\r\n <span>{{ secondItem.title }} </span>\r\n </div>\r\n </a>\r\n <ng-template #templateChild>\r\n <a\r\n class=\"nav-link\"\r\n [class.active]=\"navLinkSecondLevel.isActive\"\r\n routerLinkActive=\"active\"\r\n [routerLinkActiveOptions]=\"{ exact: exactRouteActive ? true : false }\"\r\n #navLinkSecondLevel=\"routerLinkActive\"\r\n [routerLink]=\"secondItem.route\"\r\n [class.disabled]=\"item.isDisabled\"\r\n (click)=\"scrollToTop()\"\r\n >\r\n <div class=\"nav-icon\">\r\n <ng-container *ngIf=\"secondItem.icon\">\r\n <i *ngIf=\"secondItem.icon.includes('bx')\" [ngClass]=\"secondItem.icon\"></i>\r\n <span *ngIf=\"!secondItem.icon.includes('bx')\" class=\"material-icons-round\" aria-hidden=\"true\">{{\r\n secondItem.icon\r\n }}</span>\r\n </ng-container>\r\n <span>{{ secondItem.title }} </span>\r\n </div>\r\n </a>\r\n </ng-template>\r\n <ul *ngFor=\"let thirdItem of secondItem.children; index as z\" class=\"nav flex-column nav-pills\">\r\n <li class=\"nav-item\">\r\n <a\r\n class=\"nav-link\"\r\n [class.active]=\"navLinkThirdLevel.isActive\"\r\n routerLinkActive=\"active\"\r\n [routerLinkActiveOptions]=\"{ exact: exactRouteActive ? true : false }\"\r\n #navLinkThirdLevel=\"routerLinkActive\"\r\n [routerLink]=\"thirdItem.route\"\r\n [class.disabled]=\"item.isDisabled\"\r\n (click)=\"scrollToTop()\"\r\n >\r\n <div class=\"nav-icon\">\r\n <ng-container *ngIf=\"thirdItem.icon\">\r\n <i *ngIf=\"thirdItem.icon.includes('bx')\" [ngClass]=\"thirdItem.icon\"></i>\r\n <span *ngIf=\"!thirdItem.icon.includes('bx')\" class=\"material-icons-round\" aria-hidden=\"true\">{{\r\n thirdItem.icon\r\n }}</span>\r\n </ng-container>\r\n <span>{{ thirdItem.title }}</span>\r\n </div>\r\n </a>\r\n </li>\r\n </ul>\r\n </li>\r\n </ul>\r\n </li>\r\n </ul>\r\n</nav>\r\n" }]
}], propDecorators: { navVertItems: [{
type: Input
}], exactRouteActive: [{
type: Input
}], customClasses: [{
type: Input
}] } });
class OTabsComponent {
constructor(viewContainerRef, renderer, cdr) {
this.viewContainerRef = viewContainerRef;
this.renderer = renderer;
this.cdr = cdr;
this.navTabsItems = [];
this.isFixedWidth = false;
this.isItemsRounded = false;
this.isItemsRoundedLight = false;
this.size = 'md';
this.isSlidered = false;
this.customClasses = '';
this.activeTabComponentRef = null;
this.activeTabIndex = null;
this.isDragging = false;
this.dragStartPositionX = 0;
}
ngAfterViewInit() {
const initialActiveTabIndex = this.navTabsItems.findIndex((tab) => tab.isActive);
if (initialActiveTabIndex !== -1) {
this.activateTab(initialActiveTabIndex);
}
this.cdr.detectChanges();
// Agregar event listeners a los botones de flecha
const arrowIcons = this.tabsListRef.nativeElement.parentElement.querySelectorAll('.icon');
if (arrowIcons.length >= 2) {
arrowIcons[0].addEventListener('click', () => this.handleArrowClick('left'));
arrowIcons[1].addEventListener('click', () => this.handleArrowClick('right'));
}
}
handleArrowClick(direction) {
const movementX = direction === 'left' ? -340 : 340;
const newScrollLeft = this.tabsListRef.nativeElement.scrollLeft + movementX;
this.tabsListRef.nativeElement.scrollTo({
left: newScrollLeft,
behavior: 'smooth'
});
this.handleIcons(newScrollLeft);
}
activateTab(tabIndex) {
if (!this.navTabsItems[tabIndex].isDisabled) {
if (this.activeTabIndex !== null) {
this.navTabsItems[this.activeTabIndex].isActive = false;
}
this.activeTabIndex = tabIndex;
this.navTabsItems[tabIndex].isActive = true;
if (this.activeTabComponentRef) {
this.activeTabComponentRef.destroy();
}
if (this.navTabsItems[tabIndex].child) {
this.activeTabComponentRef = this.viewContainerRef.createComponent(this.navTabsItems[tabIndex].child);
}
else {
this.activeTabComponentRef = null;
}
}
}
handleTabClick(tabIndex, event) {
this.activateTab(tabIndex);
}
handleTabKeyup(event, tabIndex) {
if (event.key === 'Enter') {
this.activateTab(tabIndex);
}
}
// Función para el evento 'mousedown'
onMouseDown(event) {
const target = event.target;
if (target.classList.contains('material-icons-round')) {
return;
}
this.isDragging = true;
this.dragStartPositionX = event.clientX;
this.renderer.addClass(this.tabsListRef.nativeElement, 'dragging');
this.renderer.setStyle(this.tabsListRef.nativeElement, 'cursor', 'grabbing');
this.renderer.setStyle(document.body, 'user-select', 'none');
}
onMouseLeave() {
if (this.isDragging) {
this.isDragging = false;
this.renderer.removeClass(this.tabsListRef.nativeElement, 'dragging');
}
}
onMouseMove(event) {
if (this.isDragging) {
const movementX = event.clientX - this.dragStartPositionX;
this.dragStartPositionX = event.clientX;
this.renderer.setProperty(this.tabsListRef.nativeElement, 'scrollLeft', this.tabsListRef.nativeElement.scrollLeft - movementX);
this.handleIcons(this.tabsListRef.nativeElement.scrollLeft);
event.preventDefault();
}
}
// Función para el evento 'mouseup'
onMouseUp() {
this.isDragging = false;
this.renderer.removeClass(this.tabsListRef.nativeElement, 'dragging');
this.renderer.removeStyle(this.tabsListRef.nativeElement, 'cursor');
this.renderer.removeStyle(document.body, 'user-select');
}
// Función para mostrar u ocultar las flechas de navegación
handleIcons(scrollVal) {
const arrowIcons = this.tabsListRef.nativeElement.parentElement.querySelectorAll('.icon');
const maxScrollableWidth = this.tabsListRef.nativeElement.scrollWidth - this.tabsListRef.nativeElement.clientWidth;
if (arrowIcons[0]) {
arrowIcons[0].style.display = scrollVal <= 0 ? 'none' : 'flex';
}
if (arrowIcons[1]) {
arrowIcons[1].style.display = maxScrollableWidth - scrollVal <= 1 ? 'none' : 'flex';
}
}
ngOnDestroy() {
if (this.activeTabComponentRef) {
this.activeTabComponentRef.destroy();
}
}
}
OTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OTabsComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
OTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OTabsComponent, selector: "o-tabs", inputs: { navTabsItems: "navTabsItems", isFixedWidth: "isFixedWidth", isItemsRounded: "isItemsRounded", isItemsRoundedLight: "isItemsRoundedLight", size: "size", isSlidered: "isSlidered", customClasses: "customClasses" }, host: { listeners: { "mousedown": "onMouseDown($event)", "mouseleave": "onMouseLeave()", "mousemove": "onMouseMove($event)", "mouseup": "onMouseUp()" } }, viewQueries: [{ propertyName: "tabContentContainer", first: true, predicate: ["tabContentContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "tabsListRef", first: true, predicate: ["tabsList"], descendants: true }], ngImport: i0, template: "<nav\r\n [class.tabs-slider]=\"true\"\r\n [class.px-0]=\"!isSlidered\"\r\n [ngClass]=\"customClasses\"\r\n aria-label=\"Navegaci\u00F3n por pesta\u00F1as\"\r\n>\r\n <ul\r\n #tabsList\r\n class=\"nav nav-pills tabs\"\r\n [class.nav-box]=\"isItemsRounded\"\r\n [class.nav-box-bg]=\"isItemsRoundedLight\"\r\n [class.fixedWidth]=\"isFixedWidth\"\r\n >\r\n <li class=\"nav-item\" *ngFor=\"let tab of navTabsItems; let i = index\">\r\n <a\r\n class=\"nav-link\"\r\n [class.active]=\"i === activeTabIndex\"\r\n [class.disabled]=\"tab.isDisabled\"\r\n (click)=\"handleTabClick(i, $event)\"\r\n [ngClass]=\"{\r\n 'nav-link-lg': size === 'lg',\r\n 'nav-link-sm': size === 'sm'\r\n }\"\r\n tabindex=\"0\"\r\n (keyup)=\"handleTabKeyup($event, i)\"\r\n >\r\n <div class=\"nav-icon\">\r\n <ng-container *ngIf=\"tab.icon\">\r\n <ng-container *ngIf=\"tab.icon.includes('bx')\">\r\n <i [ngClass]=\"tab.icon\"></i>\r\n </ng-container>\r\n <ng-container *ngIf=\"!tab.icon.includes('bx')\">\r\n <span class=\"material-icons-round\" aria-hidden=\"true\">{{ tab.icon }}</span>\r\n </ng-container>\r\n </ng-container>\r\n {{ tab.title }}\r\n <ng-container *ngIf=\"tab.iconRight\">\r\n <ng-container *ngIf=\"tab.icon && tab.icon.includes('bx')\">\r\n <i [ngClass]=\"tab.icon\"></i>\r\n </ng-container>\r\n <ng-container *ngIf=\"tab.icon && !tab.icon.includes('bx')\">\r\n <span class=\"material-icons-round\" aria-hidden=\"true\">{{ tab.icon }}</span>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"icons-container\" *ngIf=\"isSlidered\">\r\n <button type=\"button\" class=\"right-left icon\" id=\"left\">\r\n <span class=\"material-icons-round\" aria-hidden=\"true\">arrow_back_ios</span>\r\n </button>\r\n <button type=\"button\" class=\"right-left icon\" id=\"right\">\r\n <span class=\"material-icons-round\" aria-hidden=\"true\">arrow_forward_ios</span>\r\n </button>\r\n </div>\r\n</nav>\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"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OTabsComponent, decorators: [{
type: Component,
args: [{ selector: 'o-tabs', template: "<nav\r\n [class.tabs-slider]=\"true\"\r\n [class.px-0]=\"!isSlidered\"\r\n [ngClass]=\"customClasses\"\r\n aria-label=\"Navegaci\u00F3n por pesta\u00F1as\"\r\n>\r\n <ul\r\n #tabsList\r\n class=\"nav nav-pills tabs\"\r\n [class.nav-box]=\"isItemsRounded\"\r\n [class.nav-box-bg]=\"isItemsRoundedLight\"\r\n [class.fixedWidth]=\"isFixedWidth\"\r\n >\r\n <li class=\"nav-item\" *ngFor=\"let tab of navTabsItems; let i = index\">\r\n <a\r\n class=\"nav-link\"\r\n [class.active]=\"i === activeTabIndex\"\r\n [class.disabled]=\"tab.isDisabled\"\r\n (click)=\"handleTabClick(i, $event)\"\r\n [ngClass]=\"{\r\n 'nav-link-lg': size === 'lg',\r\n 'nav-link-sm': size === 'sm'\r\n }\"\r\n tabindex=\"0\"\r\n (keyup)=\"handleTabKeyup($event, i)\"\r\n >\r\n <div class=\"nav-icon\">\r\n <ng-container *ngIf=\"tab.icon\">\r\n <ng-container *ngIf=\"tab.icon.includes('bx')\">\r\n <i [ngClass]=\"tab.icon\"></i>\r\n </ng-container>\r\n <ng-container *ngIf=\"!tab.icon.includes('bx')\">\r\n <span class=\"material-icons-round\" aria-hidden=\"true\">{{ tab.icon }}</span>\r\n </ng-container>\r\n </ng-container>\r\n {{ tab.title }}\r\n <ng-container *ngIf=\"tab.iconRight\">\r\n <ng-container *ngIf=\"tab.icon && tab.icon.includes('bx')\">\r\n <i [ngClass]=\"tab.icon\"></i>\r\n </ng-container>\r\n <ng-container *ngIf=\"tab.icon && !tab.icon.includes('bx')\">\r\n <span class=\"material-icons-round\" aria-hidden=\"true\">{{ tab.icon }}</span>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n <div class=\"icons-container\" *ngIf=\"isSlidered\">\r\n <button type=\"button\" class=\"right-left icon\" id=\"left\">\r\n <span class=\"material-icons-round\" aria-hidden=\"true\">arrow_back_ios</span>\r\n </button>\r\n <button type=\"button\" class=\"right-left icon\" id=\"right\">\r\n <span class=\"material-icons-round\" aria-hidden=\"true\">arrow_forward_ios</span>\r\n </button>\r\n </div>\r\n</nav>\r\n" }]
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { navTabsItems: [{
type: Input
}], isFixedWidth: [{
type: Input
}], isItemsRounded: [{
type: Input
}], isItemsRoundedLight: [{
type: Input
}], size: [{
type: Input
}], isSlidered: [{
type: Input
}], customClasses: [{
type: Input
}], tabContentContainer: [{
type: ViewChild,
args: ['tabContentContainer', { read: ViewContainerRef }]
}], tabsListRef: [{
type: ViewChild,
args: ['tabsList']
}], onMouseDown: [{
type: HostListener,
args: ['mousedown', ['$event']]
}], onMouseLeave: [{
type: HostListener,
args: ['mouseleave']
}], onMouseMove: [{
type: HostListener,
args: ['mousemove', ['$event']]
}], onMouseUp: [{
type: HostListener,
args: ['mouseup']
}] } });
class ONavModule {
}
ONavModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ONavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
ONavModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ONavModule, declarations: [ONavHorizontalComponent, ONavVerticalComponent, OTabsComponent], imports: [CommonModule, RouterModule], exports: [ONavHorizontalComponent, ONavVerticalComponent, OTabsComponent] });
ONavModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ONavModule, imports: [CommonModule, RouterModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ONavModule, decorators: [{
type: NgModule,
args: [{
declarations: [ONavHorizontalComponent, ONavVerticalComponent, OTabsComponent],
imports: [CommonModule, RouterModule],
exports: [ONavHorizontalComponent, ONavVerticalComponent, OTabsComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ONavHorizontalComponent, ONavModule, ONavVerticalComponent, OTabsComponent };
//# sourceMappingURL=ngx-obelisco-example-nav.mjs.map