igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
941 lines (934 loc) • 38.6 kB
JavaScript
import * as i0 from '@angular/core';
import { booleanAttribute, HostBinding, Input, Directive, inject, TemplateRef, ElementRef, Renderer2, EventEmitter, ContentChild, ViewChild, Output, Component, NgModule } from '@angular/core';
import { fromEvent, interval } from 'rxjs';
import { debounce } from 'rxjs/operators';
import { IgxNavigationService, HammerGesturesManager, PlatformUtil } from 'igniteui-angular/core';
import { NgTemplateOutlet } from '@angular/common';
class IgxNavDrawerItemDirective {
constructor() {
/**
* Styles a navigation drawer item as selected.
* If not set, `active` will have default value `false`.
*
* @example
* ```html
* <span igxDrawerItem [active]="true">Active Item</span>
* ```
*/
this.active = false;
/**
* Disables a navigation drawer item.
* If not set, `disabled` will have default value `false`.
*
* @example
* ```html
* <span igxDrawerItem [disabled]="true">Disabled Item</span>
* ```
*/
this.disabled = false;
/**
* Styles a navigation drawer item as a group header.
* If not set, `isHeader` will have default value `false`.
*
* @example
* ```html
* <span igxDrawerItem [isHeader]="true">Header</span>
* ```
*/
this.isHeader = false;
/**
* @hidden
*/
this.activeClass = 'igx-nav-drawer__item--active';
/**
* @hidden
*/
this.disabledClass = 'igx-nav-drawer__item--disabled';
}
/**
* @hidden
*/
get defaultCSS() {
return !this.active && !this.isHeader;
}
/**
* @hidden
*/
get currentCSS() {
return this.active && !this.isHeader && !this.disabled;
}
/**
* @hidden
*/
get headerCSS() {
return this.isHeader;
}
/**
* @hidden
*/
get disabledCSS() {
return this.disabled;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavDrawerItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.2", type: IgxNavDrawerItemDirective, isStandalone: true, selector: "[igxDrawerItem]", inputs: { active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], isHeader: ["isHeader", "isHeader", booleanAttribute] }, host: { properties: { "class.igx-nav-drawer__item": "this.defaultCSS", "class.igx-nav-drawer__item--active": "this.currentCSS", "class.igx-nav-drawer__item--header": "this.headerCSS", "class.igx-nav-drawer__item--disabled": "this.disabledCSS" } }, exportAs: ["igxDrawerItem"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavDrawerItemDirective, decorators: [{
type: Directive,
args: [{
selector: '[igxDrawerItem]',
exportAs: 'igxDrawerItem',
standalone: true
}]
}], propDecorators: { active: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], isHeader: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], defaultCSS: [{
type: HostBinding,
args: ['class.igx-nav-drawer__item']
}], currentCSS: [{
type: HostBinding,
args: ['class.igx-nav-drawer__item--active']
}], headerCSS: [{
type: HostBinding,
args: ['class.igx-nav-drawer__item--header']
}], disabledCSS: [{
type: HostBinding,
args: ['class.igx-nav-drawer__item--disabled']
}] } });
class IgxNavDrawerTemplateDirective {
constructor() {
this.template = inject(TemplateRef);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavDrawerTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxNavDrawerTemplateDirective, isStandalone: true, selector: "[igxDrawer]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavDrawerTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[igxDrawer]',
standalone: true
}]
}] });
class IgxNavDrawerMiniTemplateDirective {
constructor() {
this.template = inject(TemplateRef);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavDrawerMiniTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxNavDrawerMiniTemplateDirective, isStandalone: true, selector: "[igxDrawerMini]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavDrawerMiniTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[igxDrawerMini]',
standalone: true
}]
}] });
let NEXT_ID = 0;
/**
* **Ignite UI for Angular Navigation Drawer** -
* [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navdrawer)
*
* The Ignite UI Navigation Drawer is a collapsible side navigation container commonly used in combination with the Navbar.
*
* Example:
* ```html
* <igx-nav-drawer id="navigation" [isOpen]="true">
* <ng-template igxDrawer>
* <nav>
* <span igxDrawerItem [isHeader]="true">Email</span>
* <span igxDrawerItem igxRipple>Inbox</span>
* <span igxDrawerItem igxRipple>Deleted</span>
* <span igxDrawerItem igxRipple>Sent</span>
* </nav>
* </ng-template>
* </igx-nav-drawer>
* ```
*/
class IgxNavigationDrawerComponent {
constructor() {
this.elementRef = inject(ElementRef);
this._state = inject(IgxNavigationService, { optional: true });
this.renderer = inject(Renderer2);
this._touchManager = inject(HammerGesturesManager);
this.platformUtil = inject(PlatformUtil);
/** @hidden @internal */
this.cssClass = true;
/**
* ID of the component
*
* ```typescript
* // get
* let myNavDrawerId = this.navdrawer.id;
* ```
*
* ```html
* <!--set-->
* <igx-nav-drawer id='navdrawer'></igx-nav-drawer>
* ```
*/
this.id = `igx-nav-drawer-${NEXT_ID++}`;
/**
* Position of the Navigation Drawer. Can be "left"(default) or "right".
*
* ```typescript
* // get
* let myNavDrawerPosition = this.navdrawer.position;
* ```
*
* ```html
* <!--set-->
* <igx-nav-drawer [position]="'left'"></igx-nav-drawer>
* ```
*/
this.position = 'left';
/**
* Enables the use of touch gestures to manipulate the drawer:
* - swipe/pan from edge to open, swipe-toggle and pan-drag.
*
* ```typescript
* // get
* let gesturesEnabled = this.navdrawer.enableGestures;
* ```
*
* ```html
* <!--set-->
* <igx-nav-drawer [enableGestures]='true'></igx-nav-drawer>
* ```
*/
this.enableGestures = true;
/**
* @hidden
*/
this.isOpenChange = new EventEmitter();
/**
* Minimum device width required for automatic pin to be toggled.
* Default is 1024, can be set to a falsy value to disable this behavior.
*
* ```typescript
* // get
* let navDrawerPinThreshold = this.navdrawer.pinThreshold;
* ```
*
* ```html
* <!--set-->
* <igx-nav-drawer [pinThreshold]='1024'></igx-nav-drawer>
* ```
*/
this.pinThreshold = 1024;
/**
* When pinned the drawer is relatively positioned instead of sitting above content.
* May require additional layout styling.
*
* ```typescript
* // get
* let navDrawerIsPinned = this.navdrawer.pin;
* ```
*
* ```html
* <!--set-->
* <igx-nav-drawer [pin]="false"></igx-nav-drawer>
* ```
*/
this.pin = false;
/**
* Enables/disables the animation, when toggling the drawer. Set to `false` by default.
* ````html
* <igx-nav-drawer [disableAnimation]="true"></igx-nav-drawer>
* ````
*/
this.disableAnimation = false;
/**
* Pinned state change output for two-way binding.
*
* ```html
* <igx-nav-drawer [(pin)]='isPinned'></igx-nav-drawer>
* ```
*/
this.pinChange = new EventEmitter(true);
/**
* Event fired as the Navigation Drawer is about to open.
*
* ```html
* <igx-nav-drawer (opening)='onOpening()'></igx-nav-drawer>
* ```
*/
this.opening = new EventEmitter();
/**
* Event fired when the Navigation Drawer has opened.
*
* ```html
* <igx-nav-drawer (opened)='onOpened()'></igx-nav-drawer>
* ```
*/
this.opened = new EventEmitter();
/**
* Event fired as the Navigation Drawer is about to close.
*
* ```html
* <igx-nav-drawer (closing)='onClosing()'></igx-nav-drawer>
* ```
*/
this.closing = new EventEmitter();
/**
* Event fired when the Navigation Drawer has closed.
*
* ```html
* <igx-nav-drawer (closed)='onClosed()'></igx-nav-drawer>
* ```
*/
this.closed = new EventEmitter();
this._isOpen = false;
this._gesturesAttached = false;
this._widthCache = { width: null, miniWidth: null, windowWidth: null };
this.css = {
drawer: 'igx-nav-drawer__aside',
mini: 'igx-nav-drawer__aside--mini',
overlay: 'igx-nav-drawer__overlay',
styleDummy: 'igx-nav-drawer__style-dummy'
};
/** Pan animation properties */
this._panning = false;
this._maxEdgeZone = 50;
this.checkPinThreshold = (evt) => {
if (!this.platformUtil.isBrowser) {
return;
}
let windowWidth;
if (this.pinThreshold) {
windowWidth = this.getWindowWidth();
if (evt && this._widthCache.windowWidth === windowWidth) {
return;
}
this._widthCache.windowWidth = windowWidth;
if (!this.pin && windowWidth >= this.pinThreshold) {
this.pin = true;
this.pinChange.emit(true);
}
else if (this.pin && windowWidth < this.pinThreshold) {
this.pin = false;
this.pinChange.emit(false);
}
}
};
this.swipe = (evt) => {
// TODO: Could also force input type: http://stackoverflow.com/a/27108052
if (!this.enableGestures || evt.pointerType !== 'touch') {
return;
}
// HammerJS swipe is horizontal-only by default, don't check deltaY
let deltaX;
let startPosition;
if (this.position === 'right') {
// when on the right use inverse of deltaX
deltaX = -evt.deltaX;
startPosition = this.getWindowWidth() - (evt.center.x + evt.distance);
}
else {
deltaX = evt.deltaX;
startPosition = evt.center.x - evt.distance;
}
// only accept closing swipe (ignoring minEdgeZone) when the drawer is expanded:
if ((this.isOpen && deltaX < 0) ||
// positive deltaX from the edge:
(deltaX > 0 && startPosition < this.maxEdgeZone)) {
this.toggle();
}
};
this.panstart = (evt) => {
if (!this.enableGestures || this.pin || evt.pointerType !== 'touch') {
return;
}
const startPosition = this.position === 'right' ? this.getWindowWidth() - (evt.center.x + evt.distance)
: evt.center.x - evt.distance;
// cache width during animation, flag to allow further handling
if (this.isOpen || (startPosition < this.maxEdgeZone)) {
this._panning = true;
this._panStartWidth = this.getExpectedWidth(!this.isOpen);
this._panLimit = this.getExpectedWidth(this.isOpen);
this.renderer.addClass(this.overlay, 'panning');
this.renderer.addClass(this.drawer, 'panning');
}
};
this.pan = (evt) => {
// TODO: input.deltaX = prevDelta.x + (center.x - offset.x);
// get actual delta (not total session one) from event?
// pan WILL also fire after a full swipe, only resize on flag
if (!this._panning) {
return;
}
const right = this.position === 'right';
// when on the right use inverse of deltaX
const deltaX = right ? -evt.deltaX : evt.deltaX;
let newX;
let percent;
const visibleWidth = this._panStartWidth + deltaX;
if (this.isOpen && deltaX < 0) {
// when visibleWidth hits limit - stop animating
if (visibleWidth <= this._panLimit) {
return;
}
if (this.hasAnimateWidth) {
percent = (visibleWidth - this._panLimit) / (this._panStartWidth - this._panLimit);
newX = visibleWidth;
}
else {
percent = visibleWidth / this._panStartWidth;
newX = evt.deltaX;
}
this.setXSize(newX, percent.toPrecision(2));
}
else if (!this.isOpen && deltaX > 0) {
// when visibleWidth hits limit - stop animating
if (visibleWidth >= this._panLimit) {
return;
}
if (this.hasAnimateWidth) {
percent = (visibleWidth - this._panStartWidth) / (this._panLimit - this._panStartWidth);
newX = visibleWidth;
}
else {
percent = visibleWidth / this._panLimit;
newX = (this._panLimit - visibleWidth) * (right ? 1 : -1);
}
this.setXSize(newX, percent.toPrecision(2));
}
};
this.panEnd = (evt) => {
if (this._panning) {
const deltaX = this.position === 'right' ? -evt.deltaX : evt.deltaX;
const visibleWidth = this._panStartWidth + deltaX;
this.resetPan();
// check if pan brought the drawer to 50%
if (this.isOpen && visibleWidth <= this._panStartWidth / 2) {
this.close();
}
else if (!this.isOpen && visibleWidth >= this._panLimit / 2) {
this.open();
}
this._panStartWidth = null;
}
};
this.toggleOpenedEvent = () => {
this.elementRef.nativeElement.removeEventListener('transitionend', this.toggleOpenedEvent, false);
this.opened.emit();
};
this.toggleClosedEvent = () => {
this.elementRef.nativeElement.removeEventListener('transitionend', this.toggleClosedEvent, false);
this.closed.emit();
};
}
get width() {
return this._width;
}
set width(value) {
this._width = value;
}
/**
* State of the drawer.
*
* ```typescript
* // get
* let navDrawerIsOpen = this.navdrawer.isOpen;
* ```
*
* ```html
* <!--set-->
* <igx-nav-drawer [isOpen]='false'></igx-nav-drawer>
* ```
*
* Two-way data binding.
* ```html
* <!--set-->
* <igx-nav-drawer [(isOpen)]='model.isOpen'></igx-nav-drawer>
* ```
*/
get isOpen() {
return this._isOpen;
}
set isOpen(value) {
this._isOpen = value;
this.isOpenChange.emit(this._isOpen);
}
/**
* Returns nativeElement of the component.
*
* @hidden
*/
get element() {
return this.elementRef.nativeElement;
}
/**
* @hidden
*/
get template() {
if (this.miniTemplate && !this.isOpen) {
return this.miniTemplate.template;
}
else if (this.contentTemplate) {
return this.contentTemplate.template;
}
}
/**
* @hidden
*/
get miniTemplate() {
return this._miniTemplate;
}
/**
* @hidden
*/
set miniTemplate(v) {
this._miniTemplate = v;
}
/** @hidden @internal */
get isMini() {
return !!this._miniTemplate && !this.isOpen;
}
/** @hidden @internal */
get pinned() {
return !!this.pin;
}
/**
* @hidden
*/
get normalSize() {
if (!this.isOpen) {
return '0px';
}
return this.width;
}
/**
* @hidden
*/
get miniSize() {
if (this.miniTemplate && this.miniWidth) {
return this.miniWidth;
}
}
/** @hidden */
get isPinnedRight() {
return this.pin && this.position === 'right' ? '1' : '0';
}
/**
* @hidden
*/
get drawer() {
return this._drawer.nativeElement;
}
/**
* @hidden
*/
get overlay() {
return this._overlay.nativeElement;
}
/**
* @hidden
*/
get styleDummy() {
return this._styleDummy.nativeElement;
}
/**
* Property to decide whether to change width or translate the drawer from pan gesture.
*
* @hidden
*/
get hasAnimateWidth() {
return this.pin || !!this.miniTemplate;
}
/**
* Used for touch gestures (swipe and pan).
* Defaults to 50 (in px) and is extended to at least 110% of the mini template width if available.
*
* @hidden
*/
get maxEdgeZone() {
return this._maxEdgeZone;
}
/**
* Gets the Drawer width for specific state.
* Will attempt to evaluate requested state and cache.
*
*
* @hidden
*/
get expectedWidth() {
return this.getExpectedWidth(false);
}
/**
* Get the Drawer mini width for specific state.
* Will attempt to evaluate requested state and cache.
*
* @hidden
*/
get expectedMiniWidth() {
return this.getExpectedWidth(true);
}
/**
* @hidden
*/
get touchManager() {
return this._touchManager;
}
/**
* Exposes optional navigation service
*
* @hidden
*/
get state() {
return this._state;
}
/**
* @hidden
*/
ngOnInit() {
// DOM and @Input()-s initialized
if (this._state) {
this._state.add(this.id, this);
}
}
/**
* @hidden
*/
ngAfterContentInit() {
// wait for template and ng-content to be ready
this.updateEdgeZone();
this.checkPinThreshold();
this.ensureEvents();
// TODO: apply platform-safe Ruler from http://plnkr.co/edit/81nWDyreYMzkunihfRgX?p=preview
// (https://github.com/angular/angular/issues/6515), blocked by https://github.com/angular/angular/issues/6904
}
/**
* @hidden
*/
ngOnDestroy() {
this._touchManager.destroy();
if (this._state) {
this._state.remove(this.id);
}
if (this._resizeObserver) {
this._resizeObserver.unsubscribe();
}
}
/**
* @hidden
*/
ngOnChanges(changes) {
// simple settings can come from attribute set (rather than binding), make sure boolean props are converted
if (changes.enableGestures && changes.enableGestures.currentValue !== undefined) {
this.enableGestures = !!(this.enableGestures && this.enableGestures.toString() === 'true');
this.ensureEvents();
}
if (changes.pin && changes.pin.currentValue !== undefined) {
this.pin = !!(this.pin && this.pin.toString() === 'true');
if (this.pin) {
this._touchManager.destroy();
this._gesturesAttached = false;
}
else {
this.ensureEvents();
}
}
if (changes.pinThreshold) {
if (this.pinThreshold) {
this.ensureEvents();
this.checkPinThreshold();
}
}
if (changes.miniWidth) {
this.updateEdgeZone();
}
}
/**
* Toggle the open state of the Navigation Drawer.
*
* ```typescript
* this.navdrawer.toggle();
* ```
*/
toggle() {
if (this.isOpen) {
this.close();
}
else {
this.open();
}
}
/**
* Open the Navigation Drawer. Has no effect if already opened.
*
* ```typescript
* this.navdrawer.open();
* ```
*/
open() {
if (this._panning) {
this.resetPan();
}
if (this.isOpen) {
return;
}
this.opening.emit();
this.isOpen = true;
// TODO: Switch to animate API when available
// var animationCss = this.animate.css();
// animationCss
// .setStyles({'width':'50px'}, {'width':'400px'})
// .start(this.elementRef.nativeElement)
// .onComplete(() => animationCss.setToStyles({'width':'auto'}).start(this.elementRef.nativeElement));
this.elementRef.nativeElement.addEventListener('transitionend', this.toggleOpenedEvent, false);
requestAnimationFrame(() => { });
}
/**
* Close the Navigation Drawer. Has no effect if already closed.
*
* ```typescript
* this.navdrawer.close();
* ```
*/
close() {
if (this._panning) {
this.resetPan();
}
if (!this.isOpen) {
return;
}
this.closing.emit();
this.isOpen = false;
this.elementRef.nativeElement.addEventListener('transitionend', this.toggleClosedEvent, false);
}
/**
* @hidden
*/
set_maxEdgeZone(value) {
this._maxEdgeZone = value;
}
/**
* Get the Drawer width for specific state. Will attempt to evaluate requested state and cache.
*
* @hidden
* @param [mini] - Request mini width instead
*/
getExpectedWidth(mini) {
if (mini) {
if (!this.miniTemplate) {
return 0;
}
if (this.miniWidth) {
return parseFloat(this.miniWidth);
}
else {
// if (!this.isOpen) { // This WON'T work due to transition timings...
// return this.elementRef.nativeElement.children[1].offsetWidth;
// } else {
if (this._widthCache.miniWidth === null) {
// force class for width calc. TODO?
// force class for width calc. TODO?
this.renderer.addClass(this.styleDummy, this.css.drawer);
this.renderer.addClass(this.styleDummy, this.css.mini);
this._widthCache.miniWidth = this.styleDummy.offsetWidth;
this.renderer.removeClass(this.styleDummy, this.css.drawer);
this.renderer.removeClass(this.styleDummy, this.css.mini);
}
return this._widthCache.miniWidth;
}
}
else {
if (this.width) {
return parseFloat(this.width);
}
else {
if (this._widthCache.width === null) {
// force class for width calc. TODO?
// force class for width calc. TODO?
this.renderer.addClass(this.styleDummy, this.css.drawer);
this._widthCache.width = this.styleDummy.offsetWidth;
this.renderer.removeClass(this.styleDummy, this.css.drawer);
}
return this._widthCache.width;
}
}
}
getWindowWidth() {
return (window.innerWidth > 0) ? window.innerWidth : screen.width;
}
/**
* Get current Drawer width.
*/
getDrawerWidth() {
return this.drawer.offsetWidth;
}
ensureEvents() {
// set listeners for swipe/pan only if needed, but just once
if (this.enableGestures && !this.pin && !this._gesturesAttached) {
// Built-in manager handler(L20887) causes endless loop and max stack exception.
// https://github.com/angular/angular/issues/6993
// Use ours for now (until beta.10):
// this.renderer.listen(document, "swipe", this.swipe);
this._touchManager.addGlobalEventListener('document', 'swipe', this.swipe);
this._gesturesAttached = true;
// this.renderer.listen(document, "panstart", this.panstart);
// this.renderer.listen(document, "pan", this.pan);
this._touchManager.addGlobalEventListener('document', 'panstart', this.panstart);
this._touchManager.addGlobalEventListener('document', 'panmove', this.pan);
this._touchManager.addGlobalEventListener('document', 'panend', this.panEnd);
}
if (!this._resizeObserver && this.platformUtil.isBrowser) {
this._resizeObserver = fromEvent(window, 'resize').pipe(debounce(() => interval(150)))
.subscribe((value) => {
this.checkPinThreshold(value);
});
}
}
updateEdgeZone() {
let maxValue;
if (this.miniTemplate) {
maxValue = Math.max(this._maxEdgeZone, this.getExpectedWidth(true) * 1.1);
this.set_maxEdgeZone(maxValue);
}
}
resetPan() {
this._panning = false;
/* styles fail to apply when set on parent due to extra attributes, prob ng bug */
/* styles fail to apply when set on parent due to extra attributes, prob ng bug */
this.renderer.removeClass(this.overlay, 'panning');
this.renderer.removeClass(this.drawer, 'panning');
this.setXSize(0, '');
}
/**
* Sets the absolute position or width in case the drawer doesn't change position.
*
* @param x the number pixels to translate on the X axis or the width to set. 0 width will clear the style instead.
* @param opacity optional value to apply to the overlay
*/
setXSize(x, opacity) {
// Angular polyfills patches window.requestAnimationFrame, but switch to DomAdapter API (TODO)
window.requestAnimationFrame(() => {
if (this.hasAnimateWidth) {
this.renderer.setStyle(this.drawer, 'width', x ? Math.abs(x) + 'px' : '');
}
else {
this.renderer.setStyle(this.drawer, 'transform', x ? 'translate3d(' + x + 'px,0,0)' : '');
this.renderer.setStyle(this.drawer, '-webkit-transform', x ? 'translate3d(' + x + 'px,0,0)' : '');
}
if (opacity !== undefined) {
this.renderer.setStyle(this.overlay, 'opacity', opacity);
}
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavigationDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.2", type: IgxNavigationDrawerComponent, isStandalone: true, selector: "igx-nav-drawer", inputs: { id: "id", position: "position", enableGestures: ["enableGestures", "enableGestures", booleanAttribute], pinThreshold: "pinThreshold", pin: ["pin", "pin", booleanAttribute], width: "width", disableAnimation: ["disableAnimation", "disableAnimation", booleanAttribute], miniWidth: "miniWidth", isOpen: ["isOpen", "isOpen", booleanAttribute] }, outputs: { isOpenChange: "isOpenChange", pinChange: "pinChange", opening: "opening", opened: "opened", closing: "closing", closed: "closed" }, host: { properties: { "class.igx-nav-drawer": "this.cssClass", "attr.id": "this.id", "class.igx-nav-drawer--disable-animation": "this.disableAnimation", "class.igx-nav-drawer--mini": "this.isMini", "class.igx-nav-drawer--pinned": "this.pinned", "style.--igx-nav-drawer-size": "this.normalSize", "style.--igx-nav-drawer-size--mini": "this.miniSize", "style.order": "this.isPinnedRight" } }, providers: [HammerGesturesManager], queries: [{ propertyName: "contentTemplate", first: true, predicate: IgxNavDrawerTemplateDirective, descendants: true, read: IgxNavDrawerTemplateDirective }, { propertyName: "miniTemplate", first: true, predicate: IgxNavDrawerMiniTemplateDirective, descendants: true, read: IgxNavDrawerMiniTemplateDirective }], viewQueries: [{ propertyName: "_drawer", first: true, predicate: ["aside"], descendants: true, static: true }, { propertyName: "_overlay", first: true, predicate: ["overlay"], descendants: true, static: true }, { propertyName: "_styleDummy", first: true, predicate: ["dummy"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultItemsTemplate>\n <div igxDrawerItem [isHeader]=\"true\">Navigation Drawer</div>\n <div igxDrawerItem> Start by adding</div>\n <div igxDrawerItem> <code><ng-template igxDrawer></code> </div>\n <div igxDrawerItem> And some items inside </div>\n <div igxDrawerItem> Style with igxDrawerItem </div>\n <div igxDrawerItem> and igxRipple directives</div>\n <div igxDrawerItem [disabled]=\"true\">Disabled Item</div>\n</ng-template>\n\n<div [hidden]=\"pin\"\n class=\"igx-nav-drawer__overlay\"\n [class.igx-nav-drawer__overlay--hidden]=\"!isOpen\"\n [class.igx-nav-drawer--disable-animation]=\"disableAnimation\"\n (click)=\"close()\" #overlay>\n</div>\n<nav\n class=\"igx-nav-drawer__aside\"\n [class.igx-nav-drawer__aside--collapsed]=\"!miniTemplate && !isOpen\"\n [class.igx-nav-drawer__aside--mini]=\"miniTemplate && !isOpen\"\n [class.igx-nav-drawer__aside--normal]=\"!miniTemplate || isOpen\"\n [class.igx-nav-drawer__aside--pinned]=\"pin\"\n [class.igx-nav-drawer__aside--right]=\"position === 'right'\" #aside\n [class.igx-nav-drawer--disable-animation]=\"disableAnimation\">\n\n <ng-container *ngTemplateOutlet=\"template || defaultItemsTemplate\"></ng-container>\n</nav>\n<div class=\"igx-nav-drawer__style-dummy\" #dummy></div>\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "directive", type: IgxNavDrawerItemDirective, selector: "[igxDrawerItem]", inputs: ["active", "disabled", "isHeader"], exportAs: ["igxDrawerItem"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavigationDrawerComponent, decorators: [{
type: Component,
args: [{ providers: [HammerGesturesManager], selector: 'igx-nav-drawer', imports: [IgxNavDrawerItemDirective, NgTemplateOutlet], template: "<ng-template #defaultItemsTemplate>\n <div igxDrawerItem [isHeader]=\"true\">Navigation Drawer</div>\n <div igxDrawerItem> Start by adding</div>\n <div igxDrawerItem> <code><ng-template igxDrawer></code> </div>\n <div igxDrawerItem> And some items inside </div>\n <div igxDrawerItem> Style with igxDrawerItem </div>\n <div igxDrawerItem> and igxRipple directives</div>\n <div igxDrawerItem [disabled]=\"true\">Disabled Item</div>\n</ng-template>\n\n<div [hidden]=\"pin\"\n class=\"igx-nav-drawer__overlay\"\n [class.igx-nav-drawer__overlay--hidden]=\"!isOpen\"\n [class.igx-nav-drawer--disable-animation]=\"disableAnimation\"\n (click)=\"close()\" #overlay>\n</div>\n<nav\n class=\"igx-nav-drawer__aside\"\n [class.igx-nav-drawer__aside--collapsed]=\"!miniTemplate && !isOpen\"\n [class.igx-nav-drawer__aside--mini]=\"miniTemplate && !isOpen\"\n [class.igx-nav-drawer__aside--normal]=\"!miniTemplate || isOpen\"\n [class.igx-nav-drawer__aside--pinned]=\"pin\"\n [class.igx-nav-drawer__aside--right]=\"position === 'right'\" #aside\n [class.igx-nav-drawer--disable-animation]=\"disableAnimation\">\n\n <ng-container *ngTemplateOutlet=\"template || defaultItemsTemplate\"></ng-container>\n</nav>\n<div class=\"igx-nav-drawer__style-dummy\" #dummy></div>\n", styles: [":host{display:block;height:100%}\n"] }]
}], propDecorators: { cssClass: [{
type: HostBinding,
args: ['class.igx-nav-drawer']
}], id: [{
type: HostBinding,
args: ['attr.id']
}, {
type: Input
}], position: [{
type: Input
}], enableGestures: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], isOpenChange: [{
type: Output
}], pinThreshold: [{
type: Input
}], pin: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], width: [{
type: Input
}], disableAnimation: [{
type: HostBinding,
args: ['class.igx-nav-drawer--disable-animation']
}, {
type: Input,
args: [{ transform: booleanAttribute }]
}], miniWidth: [{
type: Input
}], pinChange: [{
type: Output
}], opening: [{
type: Output
}], opened: [{
type: Output
}], closing: [{
type: Output
}], closed: [{
type: Output
}], contentTemplate: [{
type: ContentChild,
args: [IgxNavDrawerTemplateDirective, { read: IgxNavDrawerTemplateDirective }]
}], _drawer: [{
type: ViewChild,
args: ['aside', { static: true }]
}], _overlay: [{
type: ViewChild,
args: ['overlay', { static: true }]
}], _styleDummy: [{
type: ViewChild,
args: ['dummy', { static: true }]
}], isOpen: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], miniTemplate: [{
type: ContentChild,
args: [IgxNavDrawerMiniTemplateDirective, { read: IgxNavDrawerMiniTemplateDirective }]
}], isMini: [{
type: HostBinding,
args: ['class.igx-nav-drawer--mini']
}], pinned: [{
type: HostBinding,
args: ['class.igx-nav-drawer--pinned']
}], normalSize: [{
type: HostBinding,
args: ['style.--igx-nav-drawer-size']
}], miniSize: [{
type: HostBinding,
args: ['style.--igx-nav-drawer-size--mini']
}], isPinnedRight: [{
type: HostBinding,
args: ['style.order']
}] } });
/* NOTE: Navigation drawer directives collection for ease-of-use import in standalone components scenario */
const IGX_NAVIGATION_DRAWER_DIRECTIVES = [
IgxNavigationDrawerComponent,
IgxNavDrawerItemDirective,
IgxNavDrawerMiniTemplateDirective,
IgxNavDrawerTemplateDirective
];
/**
* @hidden
*/
class IgxNavigationDrawerModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavigationDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxNavigationDrawerModule, imports: [IgxNavigationDrawerComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective], exports: [IgxNavigationDrawerComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavigationDrawerModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxNavigationDrawerModule, decorators: [{
type: NgModule,
args: [{
imports: [
...IGX_NAVIGATION_DRAWER_DIRECTIVES
],
exports: [
...IGX_NAVIGATION_DRAWER_DIRECTIVES
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { IGX_NAVIGATION_DRAWER_DIRECTIVES, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective, IgxNavigationDrawerComponent, IgxNavigationDrawerModule };
//# sourceMappingURL=igniteui-angular-navigation-drawer.mjs.map