@angular-mdc/web
Version:
307 lines (303 loc) • 9.38 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
*/
import { Component, ChangeDetectionStrategy, ViewEncapsulation, NgZone, ElementRef, Input, ViewChild, NgModule } from '@angular/core';
import { supportsPassiveEventListeners, Platform } from '@angular/cdk/platform';
import { Subject, merge, fromEvent } from 'rxjs';
import { takeUntil, filter } from 'rxjs/operators';
import { MDCComponent } from '@angular-mdc/web/base';
import { matches } from '@angular-mdc/web/dom';
import { MDCTabScrollerFoundation, util } from '@material/tab-scroller';
/**
* @fileoverview added by tsickle
* Generated from: tab-scroller/tab-scroller.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const SCROLLER_EVENTS = [
'keydown',
'mousedown',
'pointerdown',
'touchstart',
'wheel'
];
class MdcTabScroller extends MDCComponent {
/**
* @param {?} _ngZone
* @param {?} _platform
* @param {?} elementRef
*/
constructor(_ngZone, _platform, elementRef) {
super(elementRef);
this._ngZone = _ngZone;
this._platform = _platform;
this.elementRef = elementRef;
/**
* Emits whenever the component is destroyed.
*/
this._destroy = new Subject();
this._align = null;
this._scrollAreaEventsSubscription = null;
}
/**
* @return {?}
*/
get align() {
return this._align;
}
/**
* @param {?} value
* @return {?}
*/
set align(value) {
this.setAlign(value);
}
/**
* Combined stream of all of the scroll area events.
* @return {?}
*/
get scrollAreaEvents() {
return merge(...SCROLLER_EVENTS.map((/**
* @param {?} evt
* @return {?}
*/
evt => fromEvent(this._getScrollArea(), evt, { passive: supportsPassiveEventListeners() }))));
}
/**
* @return {?}
*/
getDefaultFoundation() {
/** @type {?} */
const adapter = {
eventTargetMatchesSelector: (/**
* @param {?} evtTarget
* @param {?} selector
* @return {?}
*/
(evtTarget, selector) => matches(evtTarget, selector)),
addClass: (/**
* @param {?} className
* @return {?}
*/
(className) => this._getHostElement().classList.add(className)),
removeClass: (/**
* @param {?} className
* @return {?}
*/
(className) => this._getHostElement().classList.remove(className)),
addScrollAreaClass: (/**
* @param {?} className
* @return {?}
*/
(className) => this.area.nativeElement.classList.add(className)),
setScrollAreaStyleProperty: (/**
* @param {?} propName
* @param {?} value
* @return {?}
*/
(propName, value) => this.area.nativeElement.style.setProperty(propName, value)),
setScrollContentStyleProperty: (/**
* @param {?} propName
* @param {?} value
* @return {?}
*/
(propName, value) => this.content.nativeElement.style.setProperty(propName, value)),
getScrollContentStyleValue: (/**
* @param {?} propName
* @return {?}
*/
(propName) => this._platform.isBrowser ? window.getComputedStyle(this.content.nativeElement).getPropertyValue(propName) : ''),
setScrollAreaScrollLeft: (/**
* @param {?} scrollX
* @return {?}
*/
(scrollX) => this.area.nativeElement.scrollLeft = scrollX),
getScrollAreaScrollLeft: (/**
* @return {?}
*/
() => this.area.nativeElement.scrollLeft),
getScrollContentOffsetWidth: (/**
* @return {?}
*/
() => this.content.nativeElement.offsetWidth),
getScrollAreaOffsetWidth: (/**
* @return {?}
*/
() => this.area.nativeElement.offsetWidth),
computeScrollAreaClientRect: (/**
* @return {?}
*/
() => this._platform.isBrowser ? this.area.nativeElement.getBoundingClientRect() : {}),
computeScrollContentClientRect: (/**
* @return {?}
*/
() => this._platform.isBrowser ? this.content.nativeElement.getBoundingClientRect() : {}),
computeHorizontalScrollbarHeight: (/**
* @return {?}
*/
() => this._platform.isBrowser ? util.computeHorizontalScrollbarHeight(document) : 0)
};
return new MDCTabScrollerFoundation(adapter);
}
/**
* @return {?}
*/
ngAfterViewInit() {
this._foundation.init();
this._loadListeners();
}
/**
* @return {?}
*/
ngOnDestroy() {
this._destroy.next();
this._destroy.complete();
if (this._scrollAreaEventsSubscription) {
this._scrollAreaEventsSubscription.unsubscribe();
}
}
/**
* @param {?} align
* @return {?}
*/
setAlign(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
* @return {?}
*/
getScrollPosition() {
if (!this._platform.isBrowser) {
return -1;
}
return this._foundation.getScrollPosition();
}
/**
* Returns the width of the scroll content
* @return {?}
*/
getScrollContentWidth() {
return this.content.nativeElement.offsetWidth;
}
/**
* Increments the scroll value by the given amount
* @param {?} scrollXIncrement
* @return {?}
*/
incrementScroll(scrollXIncrement) {
if (!this._platform.isBrowser) {
return -1;
}
this._foundation.incrementScroll(scrollXIncrement);
}
/**
* Scrolls to the given pixel position
* @param {?} scrollX
* @return {?}
*/
scrollTo(scrollX) {
this._foundation.scrollTo(scrollX);
}
/**
* @private
* @return {?}
*/
_loadListeners() {
this._scrollAreaEventsSubscription = this.scrollAreaEvents.pipe()
.subscribe((/**
* @return {?}
*/
() => this._foundation.handleInteraction()));
this._ngZone.runOutsideAngular((/**
* @return {?}
*/
() => fromEvent(this._getScrollContent(), 'transitionend')
.pipe(takeUntil(this._destroy), filter((/**
* @param {?} e
* @return {?}
*/
(e) => e.target === this._getScrollContent())))
.subscribe((/**
* @param {?} evt
* @return {?}
*/
evt => this._ngZone.run((/**
* @return {?}
*/
() => this._foundation.handleTransitionEnd(evt)))))));
}
/**
* @private
* @return {?}
*/
_getScrollArea() {
return this.area.nativeElement;
}
/**
* @private
* @return {?}
*/
_getScrollContent() {
return this.content.nativeElement;
}
/**
* Retrieves the DOM element of the component host.
* @private
* @return {?}
*/
_getHostElement() {
return this.elementRef.nativeElement;
}
}
MdcTabScroller.decorators = [
{ type: Component, args: [{selector: '[mdcTabScroller], mdc-tab-scroller',
exportAs: 'mdcTabScroller',
host: {
'class': 'mdc-tab-scroller'
},
template: `
<div #area class="mdc-tab-scroller__scroll-area">
<div #content class="mdc-tab-scroller__scroll-content">
<ng-content></ng-content>
</div>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
},] },
];
/** @nocollapse */
MdcTabScroller.ctorParameters = () => [
{ type: NgZone },
{ type: Platform },
{ type: ElementRef }
];
MdcTabScroller.propDecorators = {
align: [{ type: Input }],
area: [{ type: ViewChild, args: ['area', { static: true },] }],
content: [{ type: ViewChild, args: ['content', { static: true },] }]
};
/**
* @fileoverview added by tsickle
* Generated from: tab-scroller/module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MdcTabScrollerModule {
}
MdcTabScrollerModule.decorators = [
{ type: NgModule, args: [{
exports: [MdcTabScroller],
declarations: [MdcTabScroller]
},] },
];
export { MdcTabScroller, MdcTabScrollerModule };
//# sourceMappingURL=tab-scroller.js.map