igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
1,371 lines • 98.9 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, Inject, Input, Optional, Output, Renderer, ViewChild } from '@angular/core';
import { fromEvent, interval } from 'rxjs';
import { debounce } from 'rxjs/operators';
import { IgxNavigationService } from '../core/navigation';
import { HammerGesturesManager } from '../core/touch';
import { IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective } from './navigation-drawer.directives';
/** @type {?} */
var NEXT_ID = 0;
/**
* **Ignite UI for Angular Navigation Drawer** -
* [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/navdrawer.html)
*
* 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>
* ```
*/
var IgxNavigationDrawerComponent = /** @class */ (function () {
function IgxNavigationDrawerComponent(elementRef, _state, renderer, _touchManager) {
var _this = this;
this.elementRef = elementRef;
this._state = _state;
this.renderer = renderer;
this._touchManager = _touchManager;
this.cssClass = 'igx-nav-drawer';
/**
* 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;
/**
* State of the drawer.
*
* ```typescript
* // get
* let navDrawerIsOpen = this.navdrawer.isOpen;
* ```
*
* ```html
* <!--set-->
* <igx-nav-drawer [isOpen]='false'></igx-nav-drawer>
* ```
*/
this.isOpen = false;
/**
* 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;
/**
* 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 navDrawerPinTreshold = this.navdrawer.pinThreshold;
* ```
*
* ```html
* <!--set-->
* <igx-nav-drawer [pinTreshold]='1024'></igx-nav-drawer>
* ```
*/
this.pinThreshold = 1024;
/**
* Width of the drawer in its open state. Defaults to "280px".
*
* ```typescript
* // get
* let navDrawerWidth = this.navdrawer.width;
* ```
*
* ```html
* <!--set-->
* <igx-nav-drawer [width]="'228px'"></igx-nav-drawer>
* ```
*/
this.width = '280px';
/**
* Width of the drawer in its mini state. Defaults to 60px.
*
* ```typescript
* // get
* let navDrawerMiniWidth = this.navdrawer.miniWidth;
* ```
*
* ```html
* <!--set-->
* <igx-nav-drawer [miniWidth]="'34px'"></igx-nav-drawer>
* ```
*/
this.miniWidth = '60px';
/**
* 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._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 = function (evt) {
/** @type {?} */
var 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 = function (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
/** @type {?} */
var deltaX;
/** @type {?} */
var 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 = function (evt) {
if (!_this.enableGestures || _this.pin || evt.pointerType !== 'touch') {
return;
}
/** @type {?} */
var 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.setElementClass(_this.overlay, 'panning', true);
_this.renderer.setElementClass(_this.drawer, 'panning', true);
}
};
this.pan = function (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;
}
/** @type {?} */
var right = _this.position === 'right';
// when on the right use inverse of deltaX
/** @type {?} */
var deltaX = right ? -evt.deltaX : evt.deltaX;
/** @type {?} */
var visibleWidth;
/** @type {?} */
var newX;
/** @type {?} */
var percent;
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 = function (evt) {
if (_this._panning) {
/** @type {?} */
var deltaX = _this.position === 'right' ? -evt.deltaX : evt.deltaX;
/** @type {?} */
var 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 = function (evt) {
_this.elementRef.nativeElement.removeEventListener('transitionend', _this.toggleOpenedEvent, false);
_this.opened.emit();
};
this.toggleClosedEvent = function (evt) {
_this.elementRef.nativeElement.removeEventListener('transitionend', _this.toggleClosedEvent, false);
_this.closed.emit();
};
}
Object.defineProperty(IgxNavigationDrawerComponent.prototype, "element", {
/**
* Returns nativeElement of the component.
*
* @hidden
*/
get: /**
* Returns nativeElement of the component.
*
* @hidden
* @return {?}
*/
function () {
return this.elementRef.nativeElement;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxNavigationDrawerComponent.prototype, "template", {
/**
* @hidden
*/
get: /**
* @hidden
* @return {?}
*/
function () {
if (this.miniTemplate && !this.isOpen) {
return this.miniTemplate.template;
}
else if (this.contentTemplate) {
return this.contentTemplate.template;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxNavigationDrawerComponent.prototype, "miniTemplate", {
/**
* @hidden
*/
get: /**
* @hidden
* @return {?}
*/
function () {
return this._miniTemplate;
},
/**
* @hidden
*/
set: /**
* @hidden
* @param {?} v
* @return {?}
*/
function (v) {
if (!this.isOpen) {
this.setDrawerWidth(v ? this.miniWidth : '');
}
this._miniTemplate = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxNavigationDrawerComponent.prototype, "flexWidth", {
/**
* @hidden
*/
get: /**
* @hidden
* @return {?}
*/
function () {
if (!this.pin) {
return '0px';
}
if (this.isOpen) {
return this.width;
}
if (this.miniTemplate && this.miniWidth) {
return this.miniWidth;
}
return '0px';
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxNavigationDrawerComponent.prototype, "isPinnedRight", {
/** @hidden */
get: /**
* @hidden
* @return {?}
*/
function () {
return this.pin && this.position === 'right' ? '1' : '0';
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxNavigationDrawerComponent.prototype, "drawer", {
/**
* @hidden
*/
get: /**
* @hidden
* @return {?}
*/
function () {
return this._drawer.nativeElement;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxNavigationDrawerComponent.prototype, "overlay", {
/**
* @hidden
*/
get: /**
* @hidden
* @return {?}
*/
function () {
return this._overlay.nativeElement;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxNavigationDrawerComponent.prototype, "styleDummy", {
/**
* @hidden
*/
get: /**
* @hidden
* @return {?}
*/
function () {
return this._styleDummy.nativeElement;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxNavigationDrawerComponent.prototype, "hasAnimateWidth", {
/**
* Property to decide whether to change width or translate the drawer from pan gesture.
*
* @hidden
*/
get: /**
* Property to decide whether to change width or translate the drawer from pan gesture.
*
* @hidden
* @return {?}
*/
function () {
return this.pin || !!this.miniTemplate;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxNavigationDrawerComponent.prototype, "maxEdgeZone", {
/**
* 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: /**
* 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
* @return {?}
*/
function () {
return this._maxEdgeZone;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxNavigationDrawerComponent.prototype, "expectedWidth", {
/**
* Gets the Drawer width for specific state.
* Will attempt to evaluate requested state and cache.
*
*
* @hidden
*/
get: /**
* Gets the Drawer width for specific state.
* Will attempt to evaluate requested state and cache.
*
*
* @hidden
* @return {?}
*/
function () {
return this.getExpectedWidth(false);
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxNavigationDrawerComponent.prototype, "expectedMiniWidth", {
/**
* Get the Drawer mini width for specific state.
* Will attempt to evaluate requested state and cache.
*
* @hidden
*/
get: /**
* Get the Drawer mini width for specific state.
* Will attempt to evaluate requested state and cache.
*
* @hidden
* @return {?}
*/
function () {
return this.getExpectedWidth(true);
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxNavigationDrawerComponent.prototype, "touchManager", {
/**
* @hidden
*/
get: /**
* @hidden
* @return {?}
*/
function () {
return this._touchManager;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxNavigationDrawerComponent.prototype, "state", {
/**
* Exposes optional navigation service
*
* @hidden
*/
get: /**
* Exposes optional navigation service
*
* @hidden
* @return {?}
*/
function () {
return this._state;
},
enumerable: true,
configurable: true
});
/**
* @hidden
*/
/**
* @hidden
* @return {?}
*/
IgxNavigationDrawerComponent.prototype.ngOnInit = /**
* @hidden
* @return {?}
*/
function () {
// DOM and @Input()-s initialized
if (this._state) {
this._state.add(this.id, this);
}
if (this.isOpen) {
this.setDrawerWidth(this.width);
}
};
/**
* @hidden
*/
/**
* @hidden
* @return {?}
*/
IgxNavigationDrawerComponent.prototype.ngAfterContentInit = /**
* @hidden
* @return {?}
*/
function () {
// 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
*/
/**
* @hidden
* @return {?}
*/
IgxNavigationDrawerComponent.prototype.ngOnDestroy = /**
* @hidden
* @return {?}
*/
function () {
this._touchManager.destroy();
if (this._state) {
this._state.remove(this.id);
}
if (this._resizeObserver) {
this._resizeObserver.unsubscribe();
}
};
/**
* @hidden
*/
/**
* @hidden
* @param {?} changes
* @return {?}
*/
IgxNavigationDrawerComponent.prototype.ngOnChanges = /**
* @hidden
* @param {?} changes
* @return {?}
*/
function (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.width && this.isOpen) {
this.setDrawerWidth(changes.width.currentValue);
}
if (changes.miniWidth) {
if (!this.isOpen) {
this.setDrawerWidth(changes.miniWidth.currentValue);
}
this.updateEdgeZone();
}
};
/**
* Toggle the open state of the Navigation Drawer.
*
* ```typescript
* this.navdrawer.toggle();
* ```
*/
/**
* Toggle the open state of the Navigation Drawer.
*
* ```typescript
* this.navdrawer.toggle();
* ```
* @return {?}
*/
IgxNavigationDrawerComponent.prototype.toggle = /**
* Toggle the open state of the Navigation Drawer.
*
* ```typescript
* this.navdrawer.toggle();
* ```
* @return {?}
*/
function () {
if (this.isOpen) {
this.close();
}
else {
this.open();
}
};
/**
* Open the Navigation Drawer. Has no effect if already opened.
*
* ```typescript
* this.navdrawer.open();
* ```
*/
/**
* Open the Navigation Drawer. Has no effect if already opened.
*
* ```typescript
* this.navdrawer.open();
* ```
* @return {?}
*/
IgxNavigationDrawerComponent.prototype.open = /**
* Open the Navigation Drawer. Has no effect if already opened.
*
* ```typescript
* this.navdrawer.open();
* ```
* @return {?}
*/
function () {
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);
this.setDrawerWidth(this.width);
};
/**
* Close the Navigation Drawer. Has no effect if already closed.
*
* ```typescript
* this.navdrawer.close();
* ```
*/
/**
* Close the Navigation Drawer. Has no effect if already closed.
*
* ```typescript
* this.navdrawer.close();
* ```
* @return {?}
*/
IgxNavigationDrawerComponent.prototype.close = /**
* Close the Navigation Drawer. Has no effect if already closed.
*
* ```typescript
* this.navdrawer.close();
* ```
* @return {?}
*/
function () {
if (this._panning) {
this.resetPan();
}
if (!this.isOpen) {
return;
}
this.closing.emit();
this.isOpen = false;
this.setDrawerWidth(this.miniTemplate ? this.miniWidth : '');
this.elementRef.nativeElement.addEventListener('transitionend', this.toggleClosedEvent, false);
};
/**
* @hidden
*/
/**
* @hidden
* @protected
* @param {?} value
* @return {?}
*/
IgxNavigationDrawerComponent.prototype.set_maxEdgeZone = /**
* @hidden
* @protected
* @param {?} value
* @return {?}
*/
function (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
*/
/**
* Get the Drawer width for specific state. Will attempt to evaluate requested state and cache.
*
* @hidden
* @protected
* @param {?=} mini
* @return {?}
*/
IgxNavigationDrawerComponent.prototype.getExpectedWidth = /**
* Get the Drawer width for specific state. Will attempt to evaluate requested state and cache.
*
* @hidden
* @protected
* @param {?=} mini
* @return {?}
*/
function (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?
this.renderer.setElementClass(this.styleDummy, this.css.drawer, true);
this.renderer.setElementClass(this.styleDummy, this.css.mini, true);
this._widthCache.miniWidth = this.styleDummy.offsetWidth;
this.renderer.setElementClass(this.styleDummy, this.css.drawer, false);
this.renderer.setElementClass(this.styleDummy, this.css.mini, false);
}
return this._widthCache.miniWidth;
}
}
else {
if (this.width) {
return parseFloat(this.width);
}
else {
if (this._widthCache.width === null) {
// force class for width calc. TODO?
this.renderer.setElementClass(this.styleDummy, this.css.drawer, true);
this._widthCache.width = this.styleDummy.offsetWidth;
this.renderer.setElementClass(this.styleDummy, this.css.drawer, false);
}
return this._widthCache.width;
}
}
};
/**
* @private
* @return {?}
*/
IgxNavigationDrawerComponent.prototype.getWindowWidth = /**
* @private
* @return {?}
*/
function () {
return (window.innerWidth > 0) ? window.innerWidth : screen.width;
};
/**
* Sets the drawer width.
*/
/**
* Sets the drawer width.
* @private
* @param {?} width
* @return {?}
*/
IgxNavigationDrawerComponent.prototype.setDrawerWidth = /**
* Sets the drawer width.
* @private
* @param {?} width
* @return {?}
*/
function (width) {
var _this = this;
window.requestAnimationFrame(function () {
if (_this.drawer) {
_this.renderer.setElementStyle(_this.drawer, 'width', width);
}
});
};
/**
* Get current Drawer width.
*/
/**
* Get current Drawer width.
* @private
* @return {?}
*/
IgxNavigationDrawerComponent.prototype.getDrawerWidth = /**
* Get current Drawer width.
* @private
* @return {?}
*/
function () {
return this.drawer.offsetWidth;
};
/**
* @private
* @return {?}
*/
IgxNavigationDrawerComponent.prototype.ensureEvents = /**
* @private
* @return {?}
*/
function () {
var _this = this;
// 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._resizeObserver = fromEvent(window, 'resize').pipe(debounce(function () { return interval(150); }))
.subscribe(function (value) {
_this.checkPinThreshold(value);
});
}
};
/**
* @private
* @return {?}
*/
IgxNavigationDrawerComponent.prototype.updateEdgeZone = /**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var maxValue;
if (this.miniTemplate) {
maxValue = Math.max(this._maxEdgeZone, this.getExpectedWidth(true) * 1.1);
this.set_maxEdgeZone(maxValue);
}
};
/**
* @private
* @return {?}
*/
IgxNavigationDrawerComponent.prototype.resetPan = /**
* @private
* @return {?}
*/
function () {
this._panning = false;
/* styles fail to apply when set on parent due to extra attributes, prob ng bug */
this.renderer.setElementClass(this.overlay, 'panning', false);
this.renderer.setElementClass(this.drawer, 'panning', false);
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
*/
/**
* Sets the absolute position or width in case the drawer doesn't change position.
* @private
* @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
* @return {?}
*/
IgxNavigationDrawerComponent.prototype.setXSize = /**
* Sets the absolute position or width in case the drawer doesn't change position.
* @private
* @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
* @return {?}
*/
function (x, opacity) {
var _this = this;
// Angular polyfills patches window.requestAnimationFrame, but switch to DomAdapter API (TODO)
window.requestAnimationFrame(function () {
if (_this.hasAnimateWidth) {
_this.renderer.setElementStyle(_this.drawer, 'width', x ? Math.abs(x) + 'px' : '');
}
else {
_this.renderer.setElementStyle(_this.drawer, 'transform', x ? 'translate3d(' + x + 'px,0,0)' : '');
_this.renderer.setElementStyle(_this.drawer, '-webkit-transform', x ? 'translate3d(' + x + 'px,0,0)' : '');
}
if (opacity !== undefined) {
_this.renderer.setElementStyle(_this.overlay, 'opacity', opacity);
}
});
};
IgxNavigationDrawerComponent.decorators = [
{ type: Component, args: [{
providers: [HammerGesturesManager],
selector: 'igx-nav-drawer',
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</ng-template>\n\n<div [hidden]=\"pin\"\n class=\"igx-nav-drawer__overlay\"\n [class.igx-nav-drawer__overlay--hidden]=\"!isOpen\"\n (click)=\"close()\" #overlay>\n</div>\n<aside role=\"navigation\"\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\n <ng-container *ngTemplateOutlet=\"template || defaultItemsTemplate\"></ng-container>\n</aside>\n<div class=\"igx-nav-drawer__style-dummy\" #dummy></div>\n",
styles: ["\n :host {\n display: block;\n height: 100%;\n }\n "]
}] }
];
/** @nocollapse */
IgxNavigationDrawerComponent.ctorParameters = function () { return [
{ type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
{ type: IgxNavigationService, decorators: [{ type: Optional }] },
{ type: Renderer },
{ type: HammerGesturesManager }
]; };
IgxNavigationDrawerComponent.propDecorators = {
cssClass: [{ type: HostBinding, args: ['class',] }],
id: [{ type: HostBinding, args: ['attr.id',] }, { type: Input }],
position: [{ type: Input }],
enableGestures: [{ type: Input }],
isOpen: [{ type: Input }],
pin: [{ type: Input }],
pinThreshold: [{ type: Input }],
width: [{ type: Input }],
miniWidth: [{ type: Input }],
pinChange: [{ type: Output }],
opening: [{ type: Output }],
opened: [{ type: Output }],
closing: [{ type: Output }],
closed: [{ type: Output }],
miniTemplate: [{ type: ContentChild, args: [IgxNavDrawerMiniTemplateDirective, { read: IgxNavDrawerMiniTemplateDirective },] }],
contentTemplate: [{ type: ContentChild, args: [IgxNavDrawerTemplateDirective, { read: IgxNavDrawerTemplateDirective },] }],
flexWidth: [{ type: HostBinding, args: ['style.flexBasis',] }],
isPinnedRight: [{ type: HostBinding, args: ['style.order',] }],
_drawer: [{ type: ViewChild, args: ['aside',] }],
_overlay: [{ type: ViewChild, args: ['overlay',] }],
_styleDummy: [{ type: ViewChild, args: ['dummy',] }]
};
return IgxNavigationDrawerComponent;
}());
export { IgxNavigationDrawerComponent };
if (false) {
/** @type {?} */
IgxNavigationDrawerComponent.prototype.cssClass;
/**
* ID of the component
*
* ```typescript
* // get
* let myNavDrawerId = this.navdrawer.id;
* ```
*
* ```html
* <!--set-->
* <igx-nav-drawer id='navdrawer'></igx-nav-drawer>
* ```
* @type {?}
*/
IgxNavigationDrawerComponent.prototype.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>
* ```
* @type {?}
*/
IgxNavigationDrawerComponent.prototype.position;
/**
* 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>
* ```
* @type {?}
*/
IgxNavigationDrawerComponent.prototype.enableGestures;
/**
* State of the drawer.
*
* ```typescript
* // get
* let navDrawerIsOpen = this.navdrawer.isOpen;
* ```
*
* ```html
* <!--set-->
* <igx-nav-drawer [isOpen]='false'></igx-nav-drawer>
* ```
* @type {?}
*/
IgxNavigationDrawerComponent.prototype.isOpen;
/**
* 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>
* ```
* @type {?}
*/
IgxNavigationDrawerComponent.prototype.pin;
/**
* 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 navDrawerPinTreshold = this.navdrawer.pinThreshold;
* ```
*
* ```html
* <!--set-->
* <igx-nav-drawer [pinTreshold]='1024'></igx-nav-drawer>
* ```
* @type {?}
*/
IgxNavigationDrawerComponent.prototype.pinThreshold;
/**
* Width of the drawer in its open state. Defaults to "280px".
*
* ```typescript
* // get
* let navDrawerWidth = this.navdrawer.width;
* ```
*
* ```html
* <!--set-->
* <igx-nav-drawer [width]="'228px'"></igx-nav-drawer>
* ```
* @type {?}
*/
IgxNavigationDrawerComponent.prototype.width;
/**
* Width of the drawer in its mini state. Defaults to 60px.
*
* ```typescript
* // get
* let navDrawerMiniWidth = this.navdrawer.miniWidth;
* ```
*
* ```html
* <!--set-->
* <igx-nav-drawer [miniWidth]="'34px'"></igx-nav-drawer>
* ```
* @type {?}
*/
IgxNavigationDrawerComponent.prototype.miniWidth;
/**
* Pinned state change output for two-way binding.
*
* ```html
* <igx-nav-drawer [(pin)]='isPinned'></igx-nav-drawer>
* ```
* @type {?}
*/
IgxNavigationDrawerComponent.prototype.pinChange;
/**
* Event fired as the Navigation Drawer is about to open.
*
* ```html
* <igx-nav-drawer (opening)='onOpening()'></igx-nav-drawer>
* ```
* @type {?}
*/
IgxNavigationDrawerComponent.prototype.opening;
/**
* Event fired when the Navigation Drawer has opened.
*
* ```html
* <igx-nav-drawer (opened)='onOpened()'></igx-nav-drawer>
* ```
* @type {?}
*/
IgxNavigationDrawerComponent.prototype.opened;
/**
* Event fired as the Navigation Drawer is about to close.
*
* ```html
* <igx-nav-drawer (closing)='onClosing()'></igx-nav-drawer>
* ```
* @type {?}
*/
IgxNavigationDrawerComponent.prototype.closing;
/**
* Event fired when the Navigation Drawer has closed.
*
* ```html
* <igx-nav-drawer (closed)='onClosed()'></igx-nav-drawer>
* ```
* @type {?}
*/
IgxNavigationDrawerComponent.prototype.closed;
/**
* @type {?}
* @private
*/
IgxNavigationDrawerComponent.prototype._miniTemplate;
/**
* @hidden
* @type {?}
* @protected
*/
IgxNavigationDrawerComponent.prototype.contentTemplate;
/**
* @type {?}
* @private
*/
IgxNavigationDrawerComponent.prototype._gesturesAttached;
/**
* @type {?}
* @private
*/
IgxNavigationDrawerComponent.prototype._widthCache;
/**
* @type {?}
* @private
*/
IgxNavigationDrawerComponent.prototype._resizeObserver;
/**
* @type {?}
* @private
*/
IgxNavigationDrawerComponent.prototype.css;
/**
* @type {?}
* @private
*/
IgxNavigationDrawerComponent.prototype._drawer;
/**
* @type {?}
* @private
*/
IgxNavigationDrawerComponent.prototype._overlay;
/**
* @type {?}
* @private
*/
IgxNavigationDrawerComponent.prototype._styleDummy;
/**
* Pan animation properties
* @type {?}
* @private
*/
IgxNavigationDrawerComponent.prototype._panning;
/**
* @type {?}
* @private
*/
IgxNavigationDrawerComponent.prototype._panStartWidth;
/**
* @type {?}
* @private
*/
IgxNavigationDrawerComponent.prototype._panLimit;
/**
* @type {?}
* @private
*/
IgxNavigationDrawerComponent.prototype._maxEdgeZone;
/**
* @type {?}
* @private
*/
IgxNavigationDrawerComponent.prototype.checkPinThreshold;
/**
* @type {?}
* @private
*/
IgxNavigationDrawerComponent.prototype.swipe;
/**
* @type {?}
* @private
*/
IgxNavigationDrawerComponent.prototype.panstart;
/**
* @type {?}
* @private
*/
IgxNavigationDrawerComponent.prototype.pan;
/**
* @type {?}
* @private
*/
IgxNavigationDrawerComponent.prototype.panEnd;
/**
* @type {?}
* @private
*/
IgxNavigationDrawerComponent.prototype.toggleOpenedEvent;
/**
* @type {?}
* @private
*/
IgxNavigationDrawerComponent.prototype.toggleClosedEvent;
/**
* @type {?}
* @private
*/
IgxNavigationDrawerComponent.prototype.elementRef;
/**
* @type {?}
* @private
*/
IgxNavigationDrawerComponent.prototype._state;
/**
* @type {?}
* @protected
*/
IgxNavigationDrawerComponent.prototype.renderer;
/**
* @type {?}
* @private
*/
IgxNavigationDrawerComponent.prototype._touchManager;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2aWdhdGlvbi1kcmF3ZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vaWduaXRldWktYW5ndWxhci8iLCJzb3VyY2VzIjpbImxpYi9uYXZpZ2F0aW9uLWRyYXdlci9uYXZpZ2F0aW9uLWRyYXdlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFFSCxTQUFTLEVBQ1QsWUFBWSxFQUNaLFVBQVUsRUFDVixZQUFZLEVBQ1osV0FBVyxFQUNYLE1BQU0sRUFDTixLQUFLLEVBSUwsUUFBUSxFQUNSLE1BQU0sRUFDTixRQUFRLEVBR1IsU0FBUyxFQUNaLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFnQixNQUFNLE1BQU0sQ0FBQztBQUN6RCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDMUMsT0FBTyxFQUFFLG9CQUFvQixFQUFlLE1BQU0sb0JBQW9CLENBQUM7QUFDdkUsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3RELE9BQU8sRUFBRSxpQ0FBaUMsRUFBRSw2QkFBNkIsRUFBRSxNQUFNLGdDQUFnQyxDQUFDOztJQUU5RyxPQUFPLEdBQUcsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBcUJmO0lBK1ZJLHNDQUNnQyxVQUFzQixFQUM5QixNQUE0QixFQUV0QyxRQUFrQixFQUNwQixhQUFvQztRQUxoRCxpQkFNQztRQUwrQixlQUFVLEdBQVYsVUFBVSxDQUFZO1FBQzlCLFdBQU0sR0FBTixNQUFNLENBQXNCO1FBRXRDLGFBQVEsR0FBUixRQUFRLENBQVU7UUFDcEIsa0JBQWEsR0FBYixhQUFhLENBQXVCO1FBbFZuQixhQUFRLEdBQUcsZ0JBQWdCLENBQUM7Ozs7Ozs7Ozs7Ozs7O1FBZ0J6QyxPQUFFLEdBQUcsb0JBQWtCLE9BQU8sRUFBSSxDQUFDOzs7Ozs7Ozs7Ozs7OztRQWVuQyxhQUFRLEdBQUcsTUFB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