@angular-mdc/web
Version:
428 lines (414 loc) • 15.3 kB
JavaScript
/**
* @license
* Copyright (c) Dominic Carretto
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/trimox/angular-mdc-web/blob/master/LICENSE
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/cdk/platform'), require('rxjs'), require('rxjs/operators'), require('@angular-mdc/web/base'), require('@angular-mdc/web/dom'), require('@material/tab-scroller')) :
typeof define === 'function' && define.amd ? define('@angular-mdc/web/tab-scroller', ['exports', '@angular/core', '@angular/cdk/platform', 'rxjs', 'rxjs/operators', '@angular-mdc/web/base', '@angular-mdc/web/dom', '@material/tab-scroller'], factory) :
(global = global || self, factory((global.ng = global.ng || {}, global.ng.web = global.ng.web || {}, global.ng.web.tabScroller = {}), global.ng.core, global.ng.cdk.platform, global.rxjs, global.rxjs.operators, global.ng.web.base, global.ng.web.dom, global.mdc.tabScroller));
}(this, (function (exports, core, platform, rxjs, operators, base, dom, tabScroller) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var _extendStatics = function extendStatics(d, b) {
_extendStatics = Object.setPrototypeOf || {
__proto__: []
} instanceof Array && function (d, b) {
d.__proto__ = b;
} || function (d, b) {
for (var p in b) {
if (b.hasOwnProperty(p)) d[p] = b[p];
}
};
return _extendStatics(d, b);
};
function __extends(d, b) {
_extendStatics(d, b);
function __() {
this.constructor = d;
}
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
/**
* @fileoverview added by tsickle
* Generated from: tab-scroller/tab-scroller.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var SCROLLER_EVENTS = [
'keydown',
'mousedown',
'pointerdown',
'touchstart',
'wheel'
];
var MdcTabScroller = /** @class */ (function (_super) {
__extends(MdcTabScroller, _super);
function MdcTabScroller(_ngZone, _platform, elementRef) {
var _this = _super.call(this, elementRef) || this;
_this._ngZone = _ngZone;
_this._platform = _platform;
_this.elementRef = elementRef;
/**
* Emits whenever the component is destroyed.
*/
_this._destroy = new rxjs.Subject();
_this._align = null;
_this._scrollAreaEventsSubscription = null;
return _this;
}
Object.defineProperty(MdcTabScroller.prototype, "align", {
get: /**
* @return {?}
*/
function () {
return this._align;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this.setAlign(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcTabScroller.prototype, "scrollAreaEvents", {
/** Combined stream of all of the scroll area events. */
get: /**
* Combined stream of all of the scroll area events.
* @return {?}
*/
function () {
var _this = this;
return rxjs.merge.apply(void 0, SCROLLER_EVENTS.map((/**
* @param {?} evt
* @return {?}
*/
function (evt) {
return rxjs.fromEvent(_this._getScrollArea(), evt, { passive: platform.supportsPassiveEventListeners() });
})));
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MdcTabScroller.prototype.getDefaultFoundation = /**
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var adapter = {
eventTargetMatchesSelector: (/**
* @param {?} evtTarget
* @param {?} selector
* @return {?}
*/
function (evtTarget, selector) { return dom.matches(evtTarget, selector); }),
addClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._getHostElement().classList.add(className); }),
removeClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._getHostElement().classList.remove(className); }),
addScrollAreaClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this.area.nativeElement.classList.add(className); }),
setScrollAreaStyleProperty: (/**
* @param {?} propName
* @param {?} value
* @return {?}
*/
function (propName, value) {
return _this.area.nativeElement.style.setProperty(propName, value);
}),
setScrollContentStyleProperty: (/**
* @param {?} propName
* @param {?} value
* @return {?}
*/
function (propName, value) {
return _this.content.nativeElement.style.setProperty(propName, value);
}),
getScrollContentStyleValue: (/**
* @param {?} propName
* @return {?}
*/
function (propName) {
return _this._platform.isBrowser ? window.getComputedStyle(_this.content.nativeElement).getPropertyValue(propName) : '';
}),
setScrollAreaScrollLeft: (/**
* @param {?} scrollX
* @return {?}
*/
function (scrollX) { return _this.area.nativeElement.scrollLeft = scrollX; }),
getScrollAreaScrollLeft: (/**
* @return {?}
*/
function () { return _this.area.nativeElement.scrollLeft; }),
getScrollContentOffsetWidth: (/**
* @return {?}
*/
function () { return _this.content.nativeElement.offsetWidth; }),
getScrollAreaOffsetWidth: (/**
* @return {?}
*/
function () { return _this.area.nativeElement.offsetWidth; }),
computeScrollAreaClientRect: (/**
* @return {?}
*/
function () {
return _this._platform.isBrowser ? _this.area.nativeElement.getBoundingClientRect() : {};
}),
computeScrollContentClientRect: (/**
* @return {?}
*/
function () {
return _this._platform.isBrowser ? _this.content.nativeElement.getBoundingClientRect() : {};
}),
computeHorizontalScrollbarHeight: (/**
* @return {?}
*/
function () {
return _this._platform.isBrowser ? tabScroller.util.computeHorizontalScrollbarHeight(document) : 0;
})
};
return new tabScroller.MDCTabScrollerFoundation(adapter);
};
/**
* @return {?}
*/
MdcTabScroller.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
this._foundation.init();
this._loadListeners();
};
/**
* @return {?}
*/
MdcTabScroller.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._destroy.next();
this._destroy.complete();
if (this._scrollAreaEventsSubscription) {
this._scrollAreaEventsSubscription.unsubscribe();
}
};
/**
* @param {?} align
* @return {?}
*/
MdcTabScroller.prototype.setAlign = /**
* @param {?} align
* @return {?}
*/
function (align) {
this._getHostElement().classList.remove("mdc-tab-scroller--align-" + this._align);
this._align = align;
if (align) {
this._getHostElement().classList.add("mdc-tab-scroller--align-" + align);
}
};
/** Returns the current visual scroll position */
/**
* Returns the current visual scroll position
* @return {?}
*/
MdcTabScroller.prototype.getScrollPosition = /**
* Returns the current visual scroll position
* @return {?}
*/
function () {
if (!this._platform.isBrowser) {
return -1;
}
return this._foundation.getScrollPosition();
};
/** Returns the width of the scroll content */
/**
* Returns the width of the scroll content
* @return {?}
*/
MdcTabScroller.prototype.getScrollContentWidth = /**
* Returns the width of the scroll content
* @return {?}
*/
function () {
return this.content.nativeElement.offsetWidth;
};
/** Increments the scroll value by the given amount */
/**
* Increments the scroll value by the given amount
* @param {?} scrollXIncrement
* @return {?}
*/
MdcTabScroller.prototype.incrementScroll = /**
* Increments the scroll value by the given amount
* @param {?} scrollXIncrement
* @return {?}
*/
function (scrollXIncrement) {
if (!this._platform.isBrowser) {
return -1;
}
this._foundation.incrementScroll(scrollXIncrement);
};
/** Scrolls to the given pixel position */
/**
* Scrolls to the given pixel position
* @param {?} scrollX
* @return {?}
*/
MdcTabScroller.prototype.scrollTo = /**
* Scrolls to the given pixel position
* @param {?} scrollX
* @return {?}
*/
function (scrollX) {
this._foundation.scrollTo(scrollX);
};
/**
* @private
* @return {?}
*/
MdcTabScroller.prototype._loadListeners = /**
* @private
* @return {?}
*/
function () {
var _this = this;
this._scrollAreaEventsSubscription = this.scrollAreaEvents.pipe()
.subscribe((/**
* @return {?}
*/
function () { return _this._foundation.handleInteraction(); }));
this._ngZone.runOutsideAngular((/**
* @return {?}
*/
function () {
return rxjs.fromEvent(_this._getScrollContent(), 'transitionend')
.pipe(operators.takeUntil(_this._destroy), operators.filter((/**
* @param {?} e
* @return {?}
*/
function (e) {
return e.target === _this._getScrollContent();
})))
.subscribe((/**
* @param {?} evt
* @return {?}
*/
function (evt) { return _this._ngZone.run((/**
* @return {?}
*/
function () { return _this._foundation.handleTransitionEnd(evt); })); }));
}));
};
/**
* @private
* @return {?}
*/
MdcTabScroller.prototype._getScrollArea = /**
* @private
* @return {?}
*/
function () {
return this.area.nativeElement;
};
/**
* @private
* @return {?}
*/
MdcTabScroller.prototype._getScrollContent = /**
* @private
* @return {?}
*/
function () {
return this.content.nativeElement;
};
/** Retrieves the DOM element of the component host. */
/**
* Retrieves the DOM element of the component host.
* @private
* @return {?}
*/
MdcTabScroller.prototype._getHostElement = /**
* Retrieves the DOM element of the component host.
* @private
* @return {?}
*/
function () {
return this.elementRef.nativeElement;
};
MdcTabScroller.decorators = [
{ type: core.Component, args: [{selector: '[mdcTabScroller], mdc-tab-scroller',
exportAs: 'mdcTabScroller',
host: {
'class': 'mdc-tab-scroller'
},
template: "\n <div #area class=\"mdc-tab-scroller__scroll-area\">\n <div #content class=\"mdc-tab-scroller__scroll-content\">\n <ng-content></ng-content>\n </div>\n </div>\n ",
changeDetection: core.ChangeDetectionStrategy.OnPush,
encapsulation: core.ViewEncapsulation.None
},] },
];
/** @nocollapse */
MdcTabScroller.ctorParameters = function () { return [
{ type: core.NgZone },
{ type: platform.Platform },
{ type: core.ElementRef }
]; };
MdcTabScroller.propDecorators = {
align: [{ type: core.Input }],
area: [{ type: core.ViewChild, args: ['area', { static: true },] }],
content: [{ type: core.ViewChild, args: ['content', { static: true },] }]
};
return MdcTabScroller;
}(base.MDCComponent));
/**
* @fileoverview added by tsickle
* Generated from: tab-scroller/module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MdcTabScrollerModule = /** @class */ (function () {
function MdcTabScrollerModule() {
}
MdcTabScrollerModule.decorators = [
{ type: core.NgModule, args: [{
exports: [MdcTabScroller],
declarations: [MdcTabScroller]
},] },
];
return MdcTabScrollerModule;
}());
exports.MdcTabScroller = MdcTabScroller;
exports.MdcTabScrollerModule = MdcTabScrollerModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=web-tab-scroller.umd.js.map