igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
177 lines (171 loc) • 10.1 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, EventEmitter, booleanAttribute, Input, ContentChild, Output, HostBinding, Component, NgModule } from '@angular/core';
import { IgxIconComponent } from 'igniteui-angular/icon';
/**
* IgxActionIcon is a container for the action nav icon of the IgxNavbar.
*/
class IgxNavbarActionDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavbarActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxNavbarActionDirective, isStandalone: true, selector: "igx-navbar-action,[igxNavbarAction]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavbarActionDirective, decorators: [{
type: Directive,
args: [{
selector: 'igx-navbar-action,[igxNavbarAction]',
standalone: true
}]
}] });
class IgxNavbarTitleDirective {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavbarTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxNavbarTitleDirective, isStandalone: true, selector: "igx-navbar-title,[igxNavbarTitle]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavbarTitleDirective, decorators: [{
type: Directive,
args: [{
selector: 'igx-navbar-title,[igxNavbarTitle]',
standalone: true
}]
}] });
let NEXT_ID = 0;
/**
* **Ignite UI for Angular Navbar** -
* [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navbar.html)
*
* The Ignite UI Navbar is most commonly used to provide an app header with a hamburger menu and navigation
* state such as a "Go Back" button. It also supports other actions represented by icons.
*
* Example:
* ```html
* <igx-navbar title="Sample App" actionButtonIcon="menu">
* <igx-icon>search</igx-icon>
* <igx-icon>favorite</igx-icon>
* <igx-icon>more_vert</igx-icon>
* </igx-navbar>
* ```
*/
class IgxNavbarComponent {
constructor() {
/**
* Sets the value of the `id` attribute. If not provided it will be automatically generated.
* ```html
* <igx-navbar [id]="'igx-navbar-12'" title="Sample App" actionButtonIcon="menu">
* ```
*/
this.id = `igx-navbar-${NEXT_ID++}`;
/**
* The event that will be thrown when the action is executed,
* provides reference to the `IgxNavbar` component as argument
* ```typescript
* public actionExc(event){
* alert("Action Execute!");
* }
* //..
* ```
* ```html
* <igx-navbar (action)="actionExc($event)" title="Sample App" actionButtonIcon="menu">
* ```
*/
this.action = new EventEmitter();
/**
* Sets the titleId of the `IgxNavbarComponent`. If not set it will be automatically generated.
* ```html
* <igx-navbar [titleId]="'igx-navbar-7'" title="Sample App" actionButtonIcon="menu">
* ```
*/
this.titleId = `igx-navbar-title-${NEXT_ID++}`;
this.isVisible = true;
}
/**
* Sets whether the action button of the `IgxNavbarComponent` is visible.
* ```html
* <igx-navbar [title]="currentView" [isActionButtonVisible]="'false'"></igx-navbar>
* ```
*/
set isActionButtonVisible(value) {
this.isVisible = value;
}
/**
* Returns whether the `IgxNavbarComponent` action button is visible, true/false.
* ```typescript
* @ViewChild("MyChild")
* public navBar: IgxNavbarComponent;
* ngAfterViewInit(){
* let actionButtonVisibile = this.navBar.isActionButtonVisible;
* }
* ```
*/
get isActionButtonVisible() {
if (this.actionIconTemplate || !this.actionButtonIcon) {
return false;
}
return this.isVisible;
}
get isTitleContentVisible() {
return this.titleContent ? true : false;
}
/**
* @hidden
*/
_triggerAction() {
this.action.emit(this);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxNavbarComponent, isStandalone: true, selector: "igx-navbar", inputs: { id: "id", actionButtonIcon: "actionButtonIcon", title: "title", titleId: "titleId", isActionButtonVisible: ["isActionButtonVisible", "isActionButtonVisible", booleanAttribute] }, outputs: { action: "action" }, host: { properties: { "attr.id": "this.id" } }, queries: [{ propertyName: "actionIconTemplate", first: true, predicate: IgxNavbarActionDirective, descendants: true, read: IgxNavbarActionDirective }, { propertyName: "titleContent", first: true, predicate: IgxNavbarTitleDirective, descendants: true, read: IgxNavbarTitleDirective }], ngImport: i0, template: "<nav class=\"igx-navbar\" role=\"navigation\" [attr.aria-labelledby]=\"titleId\">\n <div class=\"igx-navbar__left\">\n @if (isActionButtonVisible) {\n <igx-icon (click)=\"_triggerAction()\">\n {{actionButtonIcon}}\n </igx-icon>\n }\n <ng-content select=\"igx-navbar-action, [igxNavbarAction]\"></ng-content>\n </div>\n <div class=\"igx-navbar__middle\">\n @if (!isTitleContentVisible) {\n <h1\n class=\"igx-navbar__title\"\n [attr.id]=\"titleId\">\n {{ title }}\n </h1>\n }\n <ng-content select=\"igx-navbar-title, [igxNavbarTitle]\"></ng-content>\n </div>\n <div class=\"igx-navbar__right\">\n <ng-content></ng-content>\n </div>\n</nav>\n", styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavbarComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-navbar', imports: [IgxIconComponent], template: "<nav class=\"igx-navbar\" role=\"navigation\" [attr.aria-labelledby]=\"titleId\">\n <div class=\"igx-navbar__left\">\n @if (isActionButtonVisible) {\n <igx-icon (click)=\"_triggerAction()\">\n {{actionButtonIcon}}\n </igx-icon>\n }\n <ng-content select=\"igx-navbar-action, [igxNavbarAction]\"></ng-content>\n </div>\n <div class=\"igx-navbar__middle\">\n @if (!isTitleContentVisible) {\n <h1\n class=\"igx-navbar__title\"\n [attr.id]=\"titleId\">\n {{ title }}\n </h1>\n }\n <ng-content select=\"igx-navbar-title, [igxNavbarTitle]\"></ng-content>\n </div>\n <div class=\"igx-navbar__right\">\n <ng-content></ng-content>\n </div>\n</nav>\n", styles: [":host{display:block;width:100%}\n"] }]
}], propDecorators: { id: [{
type: HostBinding,
args: ['attr.id']
}, {
type: Input
}], actionButtonIcon: [{
type: Input
}], title: [{
type: Input
}], action: [{
type: Output
}], titleId: [{
type: Input
}], actionIconTemplate: [{
type: ContentChild,
args: [IgxNavbarActionDirective, { read: IgxNavbarActionDirective }]
}], titleContent: [{
type: ContentChild,
args: [IgxNavbarTitleDirective, { read: IgxNavbarTitleDirective }]
}], isActionButtonVisible: [{
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
/* NOTE: Navbar directives collection for ease-of-use import in standalone components scenario */
const IGX_NAVBAR_DIRECTIVES = [
IgxNavbarComponent,
IgxNavbarActionDirective,
IgxNavbarTitleDirective
];
/**
* @hidden
* IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
*/
class IgxNavbarModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxNavbarModule, imports: [IgxNavbarComponent, IgxNavbarActionDirective, IgxNavbarTitleDirective], exports: [IgxNavbarComponent, IgxNavbarActionDirective, IgxNavbarTitleDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavbarModule, imports: [IgxNavbarComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavbarModule, decorators: [{
type: NgModule,
args: [{
imports: [
...IGX_NAVBAR_DIRECTIVES
],
exports: [
...IGX_NAVBAR_DIRECTIVES
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { IGX_NAVBAR_DIRECTIVES, IgxNavbarActionDirective, IgxNavbarComponent, IgxNavbarModule, IgxNavbarTitleDirective };
//# sourceMappingURL=igniteui-angular-navbar.mjs.map