@angular-mdc/web
Version:
726 lines (721 loc) • 22.2 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 { Directive, ElementRef, Component, ChangeDetectionStrategy, Input, EventEmitter, ViewEncapsulation, NgZone, ChangeDetectorRef, Output, ContentChild, ContentChildren, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { Platform } from '@angular/cdk/platform';
import { Subject, fromEvent } from 'rxjs';
import { startWith, takeUntil } from 'rxjs/operators';
import { MDCComponent } from '@angular-mdc/web/base';
import { MDCRippleFoundation } from '@material/ripple';
import { MdcRipple } from '@angular-mdc/web/ripple';
import { MDCTopAppBarBaseFoundation, MDCShortTopAppBarFoundation, MDCFixedTopAppBarFoundation, MDCTopAppBarFoundation, cssClasses } from '@material/top-app-bar';
/**
* @fileoverview added by tsickle
* Generated from: top-app-bar/top-app-bar.directives.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class MdcTopAppBarFixedAdjust {
/**
* @param {?} elementRef
*/
constructor(elementRef) {
this.elementRef = elementRef;
}
}
MdcTopAppBarFixedAdjust.decorators = [
{ type: Directive, args: [{
selector: '[mdcTopAppBarFixedAdjust]',
host: { 'class': 'mdc-top-app-bar--fixed-adjust' }
},] },
];
/** @nocollapse */
MdcTopAppBarFixedAdjust.ctorParameters = () => [
{ type: ElementRef }
];
class MdcTopAppBarRow {
/**
* @param {?} elementRef
*/
constructor(elementRef) {
this.elementRef = elementRef;
}
}
MdcTopAppBarRow.decorators = [
{ type: Directive, args: [{
selector: 'mdc-top-app-bar-row, [mdcTopAppBarRow]',
exportAs: 'mdcTopAppBarRow',
host: { 'class': 'mdc-top-app-bar__row' }
},] },
];
/** @nocollapse */
MdcTopAppBarRow.ctorParameters = () => [
{ type: ElementRef }
];
class MdcTopAppBarSection {
/**
* @param {?} elementRef
*/
constructor(elementRef) {
this.elementRef = elementRef;
}
}
MdcTopAppBarSection.decorators = [
{ type: Component, args: [{selector: 'mdc-top-app-bar-section, [mdcTopAppBarSection]',
exportAs: 'mdcTopAppBarSection',
host: {
'role': 'toolbar',
'class': 'mdc-top-app-bar__section',
'[class.mdc-top-app-bar__section--align-start]': 'align === "start"',
'[class.mdc-top-app-bar__section--align-end]': 'align === "end"'
},
template: `
<ng-content></ng-content>
<span class="mdc-top-app-bar__title" *ngIf="title">{{title}}</span>`,
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MdcTopAppBarSection.ctorParameters = () => [
{ type: ElementRef }
];
MdcTopAppBarSection.propDecorators = {
title: [{ type: Input }],
align: [{ type: Input }]
};
class MdcTopAppBarActionItem {
/**
* @param {?} elementRef
* @param {?} _ripple
*/
constructor(elementRef, _ripple) {
this.elementRef = elementRef;
this._ripple = _ripple;
this._root = elementRef.nativeElement;
_ripple = this._createRipple();
_ripple.init();
}
/**
* @return {?}
*/
ngOnDestroy() {
this._ripple.destroy();
}
/**
* @private
* @return {?}
*/
_createRipple() {
/** @type {?} */
const adapter = Object.assign(Object.assign({}, MdcRipple.createAdapter(this)), { isUnbounded: (/**
* @return {?}
*/
() => true) });
return new MdcRipple(this.elementRef, new MDCRippleFoundation(adapter));
}
}
MdcTopAppBarActionItem.decorators = [
{ type: Directive, args: [{
selector: '[mdcTopAppBarActionItem], mdc-top-app-bar-action-item',
exportAs: 'mdcTopAppBarActionItem',
host: {
'role': 'button',
'class': 'mdc-top-app-bar__action-item mdc-icon-button'
},
providers: [MdcRipple]
},] },
];
/** @nocollapse */
MdcTopAppBarActionItem.ctorParameters = () => [
{ type: ElementRef },
{ type: MdcRipple }
];
class MdcTopAppBarNavigationIcon {
/**
* @param {?} elementRef
* @param {?} _ripple
*/
constructor(elementRef, _ripple) {
this.elementRef = elementRef;
this._ripple = _ripple;
this._root = elementRef.nativeElement;
_ripple = this._createRipple();
_ripple.init();
}
/**
* @return {?}
*/
ngOnDestroy() {
this._ripple.destroy();
}
/**
* @private
* @return {?}
*/
_createRipple() {
/** @type {?} */
const adapter = Object.assign(Object.assign({}, MdcRipple.createAdapter(this)), { isUnbounded: (/**
* @return {?}
*/
() => true) });
return new MdcRipple(this.elementRef, new MDCRippleFoundation(adapter));
}
}
MdcTopAppBarNavigationIcon.decorators = [
{ type: Directive, args: [{
selector: '[mdcTopAppBarNavIcon], mdc-icon[mdcTopAppBarNavigationIcon]',
exportAs: 'mdcTopAppBarNavigationIcon',
host: {
'role': 'button',
'class': 'mdc-top-app-bar__navigation-icon mdc-icon-button'
},
providers: [MdcRipple]
},] },
];
/** @nocollapse */
MdcTopAppBarNavigationIcon.ctorParameters = () => [
{ type: ElementRef },
{ type: MdcRipple }
];
class MdcTopAppBarTitle {
/**
* @param {?} elementRef
*/
constructor(elementRef) {
this.elementRef = elementRef;
}
}
MdcTopAppBarTitle.decorators = [
{ type: Directive, args: [{
selector: 'mdc-top-app-bar-title, [mdcTopAppBarTitle]',
exportAs: 'mdcTopAppBarTitle',
host: { 'class': 'mdc-top-app-bar__title' },
},] },
];
/** @nocollapse */
MdcTopAppBarTitle.ctorParameters = () => [
{ type: ElementRef }
];
/**
* @fileoverview added by tsickle
* Generated from: top-app-bar/top-app-bar.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Event object emitted by MdcTopAppBar navigation icon selected.
*/
class MdcTopAppBarNavSelected {
/**
* @param {?} source
*/
constructor(source) {
this.source = source;
}
}
class MdcTopAppBar extends MDCComponent {
/**
* @param {?} _ngZone
* @param {?} _platform
* @param {?} _changeDetectorRef
* @param {?} elementRef
*/
constructor(_ngZone, _platform, _changeDetectorRef, elementRef) {
super(elementRef);
this._ngZone = _ngZone;
this._platform = _platform;
this._changeDetectorRef = _changeDetectorRef;
this.elementRef = elementRef;
/**
* Emits whenever the component is destroyed.
*/
this._destroyed = new Subject();
this._fixed = false;
this._prominent = false;
this._short = false;
this._shortCollapsed = false;
this._dense = false;
this._fixedAdjustElement = null;
this._scrollTarget = this._platform.isBrowser ? this.scrollTarget || window : undefined;
/**
* Event emitted when the navigation icon is selected.
*/
this.navigationSelected = new EventEmitter();
this._scrollTargetSubscription = null;
}
/**
* @return {?}
*/
get fixed() { return this._fixed; }
/**
* @param {?} value
* @return {?}
*/
set fixed(value) {
if (value !== this._fixed) {
this.setFixed(value);
}
}
/**
* @return {?}
*/
get prominent() { return this._prominent; }
/**
* @param {?} value
* @return {?}
*/
set prominent(value) {
if (value !== this._prominent) {
this.setProminent(value);
}
}
/**
* @return {?}
*/
get short() { return this._short; }
/**
* @param {?} value
* @return {?}
*/
set short(value) {
if (value !== this._short) {
this.setShort(value);
}
}
/**
* @return {?}
*/
get shortCollapsed() { return this._shortCollapsed; }
/**
* @param {?} value
* @return {?}
*/
set shortCollapsed(value) {
if (value !== this._shortCollapsed) {
this.setShortCollapsed(value);
}
}
/**
* @return {?}
*/
get dense() { return this._dense; }
/**
* @param {?} value
* @return {?}
*/
set dense(value) {
if (value !== this._dense) {
this.setDense(value);
}
}
/**
* @return {?}
*/
get fixedAdjustElement() { return this._fixedAdjustElement; }
/**
* @param {?} element
* @return {?}
*/
set fixedAdjustElement(element) {
if (this._fixedAdjustElement !== element) {
this._fixedAdjustElement = element;
this._initTopAppBar();
}
}
/**
* @return {?}
*/
get scrollTarget() { return this._scrollTarget; }
/**
* @param {?} target
* @return {?}
*/
set scrollTarget(target) {
if (target !== this._scrollTarget) {
this._scrollTarget = target ? target : this._platform.isBrowser ? window : undefined;
this._initScrollHandler();
}
}
/**
* @return {?}
*/
getDefaultFoundation() {
/** @type {?} */
const adapter = {
hasClass: (/**
* @param {?} className
* @return {?}
*/
(className) => this._getHostElement().classList.contains(className)),
addClass: (/**
* @param {?} className
* @return {?}
*/
(className) => this._getHostElement().classList.add(className)),
removeClass: (/**
* @param {?} className
* @return {?}
*/
(className) => {
if (className === cssClasses.SHORT_COLLAPSED_CLASS && this.shortCollapsed) {
return;
}
this._getHostElement().classList.remove(className);
}),
setStyle: (/**
* @param {?} property
* @param {?} value
* @return {?}
*/
(property, value) => this._getHostElement().style.setProperty(property, value)),
getTopAppBarHeight: (/**
* @return {?}
*/
() => this._getHostElement().clientHeight),
notifyNavigationIconClicked: (/**
* @return {?}
*/
() => this.navigationSelected.emit({ source: this })),
getViewportScrollY: (/**
* @return {?}
*/
() => {
if (!this._platform.isBrowser) {
return 0;
}
return this._scrollTarget[this._scrollTarget === window ? 'pageYOffset' : 'scrollTop'];
}),
getTotalActionItems: (/**
* @return {?}
*/
() => this.actions ? this.actions.length : 0)
};
/** @type {?} */
let foundation;
if (!this.elementRef) {
return new MDCTopAppBarBaseFoundation(adapter);
}
if (this.short) {
foundation = new MDCShortTopAppBarFoundation(adapter);
}
else if (this.fixed) {
foundation = new MDCFixedTopAppBarFoundation(adapter);
}
else {
foundation = new MDCTopAppBarFoundation(adapter);
}
return foundation;
}
/**
* @return {?}
*/
ngAfterContentInit() {
this.actions.changes.pipe(startWith(null), takeUntil(this._destroyed))
.subscribe((/**
* @return {?}
*/
() => {
if (this.short && this.actions.length) {
this._getHostElement().classList.toggle(cssClasses.SHORT_HAS_ACTION_ITEM_CLASS);
}
}));
}
/**
* @return {?}
*/
ngAfterViewInit() {
this._initFoundation();
}
/**
* @return {?}
*/
ngOnDestroy() {
this._destroyed.next();
this._destroyed.complete();
if (this._scrollTargetSubscription) {
this._scrollTargetSubscription.unsubscribe();
}
this._destroyFoundation();
}
/**
* Sets the top app bar to fixed or not.
* @param {?} fixed
* @param {?=} isUserInput
* @return {?}
*/
setFixed(fixed, isUserInput = false) {
this._fixed = coerceBooleanProperty(fixed);
if (this.fixed && this.short) {
this.setShort(false);
}
if (isUserInput) {
this._initFoundation();
}
}
/**
* Sets the top app bar to prominent or not.
* @param {?} prominent
* @param {?=} isUserInput
* @return {?}
*/
setProminent(prominent, isUserInput = false) {
this._prominent = coerceBooleanProperty(prominent);
if (this.prominent && this.short) {
this.setShort(false);
}
if (isUserInput) {
this._initFoundation();
}
}
/**
* Sets the top app bar to dense variant.
* @param {?} dense
* @param {?=} isUserInput
* @return {?}
*/
setDense(dense, isUserInput = false) {
this._dense = coerceBooleanProperty(dense);
if (this.dense && this.short) {
this.setShort(false);
}
if (isUserInput) {
this._initFoundation();
}
}
/**
* Sets the top app bar to short or not.
* @param {?} short
* @param {?=} isUserInput
* @return {?}
*/
setShort(short, isUserInput = false) {
this._short = coerceBooleanProperty(short);
if (this.short) {
this.setProminent(false);
this.setDense(false);
this.setFixed(false);
}
else {
this.setShortCollapsed(false);
}
if (isUserInput) {
this._initFoundation();
}
}
/**
* Sets the top app bar to short-collapsed or not.
* @param {?} shortCollapsed
* @param {?=} isUserInput
* @return {?}
*/
setShortCollapsed(shortCollapsed, isUserInput = false) {
this._shortCollapsed = coerceBooleanProperty(shortCollapsed);
if (this.shortCollapsed && !this.short) {
this.setShort(true);
}
if (isUserInput) {
this._initFoundation();
}
}
/**
* @return {?}
*/
isCollapsed() {
return this._getHostElement().classList.contains(cssClasses.SHORT_COLLAPSED_CLASS);
}
/**
* @private
* @return {?}
*/
_initFoundation() {
this._destroyFoundation();
this._getHostElement().style.top = '0px';
this._resetFixedShort();
this._foundation = this.getDefaultFoundation();
this._foundation.init();
this._initTopAppBar();
this._initScrollHandler();
this._changeDetectorRef.markForCheck();
}
/**
* @private
* @return {?}
*/
_resetFixedShort() {
this._getHostElement().classList.remove(cssClasses.SHORT_HAS_ACTION_ITEM_CLASS);
this._getHostElement().classList.remove(cssClasses.SHORT_COLLAPSED_CLASS);
this._getHostElement().classList.remove(cssClasses.FIXED_SCROLLED_CLASS);
}
/**
* @private
* @return {?}
*/
_initTopAppBar() {
if (!this.fixed) {
this._getHostElement().classList.remove(cssClasses.FIXED_SCROLLED_CLASS);
}
if (this.fixed && this._getScrollOffset() > 0) {
this._getHostElement().classList.add(cssClasses.FIXED_SCROLLED_CLASS);
}
if (!this.short) {
this._getHostElement().classList.remove(cssClasses.SHORT_HAS_ACTION_ITEM_CLASS);
this._getHostElement().classList.remove(cssClasses.SHORT_COLLAPSED_CLASS);
}
if (this.short && this._getScrollOffset() > 0) {
this._getHostElement().classList.add(cssClasses.SHORT_COLLAPSED_CLASS);
}
if (this.shortCollapsed) {
this._getHostElement().classList.add(cssClasses.SHORT_COLLAPSED_CLASS);
}
if (this.fixedAdjustElement) {
this._removeFixedAdjustClasses();
this._addFixedAdjustClass();
}
}
/**
* @private
* @return {?}
*/
_removeFixedAdjustClasses() {
(/** @type {?} */ (this.fixedAdjustElement)).classList.remove('mdc-top-app-bar--short-fixed-adjust');
(/** @type {?} */ (this.fixedAdjustElement)).classList.remove('mdc-top-app-bar--fixed-adjust');
(/** @type {?} */ (this.fixedAdjustElement)).classList.remove('mdc-top-app-bar--dense-fixed-adjust');
(/** @type {?} */ (this.fixedAdjustElement)).classList.remove('mdc-top-app-bar--prominent-fixed-adjust');
(/** @type {?} */ (this.fixedAdjustElement)).classList.remove('mdc-top-app-bar--dense-prominent-fixed-adjust');
}
/**
* @private
* @return {?}
*/
_addFixedAdjustClass() {
if (this._short) {
(/** @type {?} */ (this.fixedAdjustElement)).classList.add('mdc-top-app-bar--short-fixed-adjust');
}
else if (this._dense && this._prominent) {
(/** @type {?} */ (this.fixedAdjustElement)).classList.add('mdc-top-app-bar--dense-prominent-fixed-adjust');
}
else if (this._dense) {
(/** @type {?} */ (this.fixedAdjustElement)).classList.add('mdc-top-app-bar--dense-fixed-adjust');
}
else if (this._prominent) {
(/** @type {?} */ (this.fixedAdjustElement)).classList.add('mdc-top-app-bar--prominent-fixed-adjust');
}
else {
(/** @type {?} */ (this.fixedAdjustElement)).classList.add('mdc-top-app-bar--fixed-adjust');
}
}
/**
* @private
* @return {?}
*/
_destroyFoundation() {
var _a;
(_a = this._foundation) === null || _a === void 0 ? void 0 : _a.destroy();
}
/**
* @private
* @return {?}
*/
_initScrollHandler() {
if (this._scrollTargetSubscription) {
this._scrollTargetSubscription.unsubscribe();
}
if (!this._platform.isBrowser) {
return;
}
this._scrollTargetSubscription = this._ngZone.runOutsideAngular((/**
* @return {?}
*/
() => fromEvent(this.scrollTarget || window, 'scroll')
.subscribe((/**
* @return {?}
*/
() => this._ngZone.run((/**
* @return {?}
*/
() => this._foundation.handleTargetScroll()))))));
}
/**
* @private
* @return {?}
*/
_getScrollOffset() {
if (!this._platform.isBrowser) {
return 0;
}
return this.scrollTarget ? this.scrollTarget.scrollTop : window.pageYOffset;
}
/**
* Retrieves the DOM element of the component host.
* @private
* @return {?}
*/
_getHostElement() {
return this.elementRef.nativeElement;
}
}
MdcTopAppBar.decorators = [
{ type: Component, args: [{
selector: 'mdc-top-app-bar, [mdc-top-app-bar]',
exportAs: 'mdcTopAppBar',
host: {
'class': 'mdc-top-app-bar',
'[class.mdc-top-app-bar--prominent]': 'prominent',
'[class.mdc-top-app-bar--dense]': 'dense',
'[class.mdc-top-app-bar--short]': 'short',
'[class.mdc-top-app-bar--fixed]': 'fixed'
},
template: '<ng-content></ng-content>',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
},] },
];
/** @nocollapse */
MdcTopAppBar.ctorParameters = () => [
{ type: NgZone },
{ type: Platform },
{ type: ChangeDetectorRef },
{ type: ElementRef }
];
MdcTopAppBar.propDecorators = {
fixed: [{ type: Input }],
prominent: [{ type: Input }],
short: [{ type: Input }],
shortCollapsed: [{ type: Input }],
dense: [{ type: Input }],
fixedAdjustElement: [{ type: Input }],
scrollTarget: [{ type: Input }],
navigationSelected: [{ type: Output }],
navigationIcon: [{ type: ContentChild, args: [MdcTopAppBarNavigationIcon, { static: false },] }],
actions: [{ type: ContentChildren, args: [MdcTopAppBarActionItem, { descendants: true },] }]
};
/**
* @fileoverview added by tsickle
* Generated from: top-app-bar/module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const TOP_APP_BAR_DECLARATIONS = [
MdcTopAppBar,
MdcTopAppBarActionItem,
MdcTopAppBarFixedAdjust,
MdcTopAppBarNavigationIcon,
MdcTopAppBarRow,
MdcTopAppBarSection,
MdcTopAppBarTitle
];
class MdcTopAppBarModule {
}
MdcTopAppBarModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
exports: TOP_APP_BAR_DECLARATIONS,
declarations: TOP_APP_BAR_DECLARATIONS
},] },
];
export { MdcTopAppBar, MdcTopAppBarActionItem, MdcTopAppBarFixedAdjust, MdcTopAppBarModule, MdcTopAppBarNavSelected, MdcTopAppBarNavigationIcon, MdcTopAppBarRow, MdcTopAppBarSection, MdcTopAppBarTitle };
//# sourceMappingURL=top-app-bar.js.map