UNPKG

@angular-mdc/web

Version:
827 lines (819 loc) 29.1 kB
/** * @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 { InjectionToken, Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, ElementRef, Inject, ViewChild, NgZone, NgModule, Injectable, Injector, Optional, SkipSelf, ɵɵdefineInjectable, ɵɵinject, INJECTOR } from '@angular/core'; import { CommonModule } from '@angular/common'; import { OverlayModule, Overlay } from '@angular/cdk/overlay'; import { CdkPortalOutlet, BasePortalOutlet, PortalModule, PortalInjector, ComponentPortal } from '@angular/cdk/portal'; import { MdcButtonModule } from '@angular-mdc/web/button'; import { __extends, __assign } from 'tslib'; import { LiveAnnouncer } from '@angular/cdk/a11y'; import { MDCComponent } from '@angular-mdc/web/base'; import { Subject } from 'rxjs'; import { MDCSnackbarFoundation } from '@material/snackbar'; import { take } from 'rxjs/operators'; /** * @fileoverview added by tsickle * Generated from: snackbar/snackbar-ref.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * Reference to a snackbar dispatched from the snackbar service. * @template T */ var /** * Reference to a snackbar dispatched from the snackbar service. * @template T */ MdcSnackbarRef = /** @class */ (function () { function MdcSnackbarRef(containerInstance, _overlayRef) { this.containerInstance = containerInstance; this._overlayRef = _overlayRef; /** * Subject for notifying the user that the snackbar has been dismissed. */ this._afterDismiss = new Subject(); this.componentInstance = containerInstance; } /** Gets an observable that is notified when the snackbar is finished closing. */ /** * Gets an observable that is notified when the snackbar is finished closing. * @return {?} */ MdcSnackbarRef.prototype.afterDismiss = /** * Gets an observable that is notified when the snackbar is finished closing. * @return {?} */ function () { return this._afterDismiss.asObservable(); }; /** * @param {?=} reason * @return {?} */ MdcSnackbarRef.prototype.dismiss = /** * @param {?=} reason * @return {?} */ function (reason) { if (!this._afterDismiss.closed) { this._dismissedReason = reason; this._finishDismiss(); } }; /** Cleans up the DOM after closing. */ /** * Cleans up the DOM after closing. * @private * @return {?} */ MdcSnackbarRef.prototype._finishDismiss = /** * Cleans up the DOM after closing. * @private * @return {?} */ function () { this._overlayRef.dispose(); this._afterDismiss.next(this._dismissedReason); this._afterDismiss.complete(); }; return MdcSnackbarRef; }()); /** * @fileoverview added by tsickle * Generated from: snackbar/snackbar-config.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * Injection token that can be used to access the data that was passed in to a snackbar. * @type {?} */ var MDC_SNACKBAR_DATA = new InjectionToken('MdcSnackbarData'); /** * @template D */ var /** * @template D */ MdcSnackbarConfig = /** @class */ (function () { function MdcSnackbarConfig() { /** * Data being injected into the child component. */ this.data = null; /** * Positions the action button/icon below the label instead of alongside it. */ this.stacked = false; /** * Positions the snackbar on the leading edge of the screen */ this.leading = false; /** * Positions the snackbar on the trailing edge of the screen */ this.trailing = false; /** * The layout direction of the snackbar content */ this.direction = 'ltr'; /** * Show dismiss ("X") icon */ this.dismiss = false; /** * Whether the snackbar closes when it is focused and the user presses the ESC key */ this.closeOnEscape = true; /** * The politeness level for the screen reader announcement. */ this.politeness = 'polite'; } return MdcSnackbarConfig; }()); /** * @fileoverview added by tsickle * Generated from: snackbar/snackbar.component.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var MdcSnackbarComponent = /** @class */ (function (_super) { __extends(MdcSnackbarComponent, _super); function MdcSnackbarComponent(_changeDetectorRef, _liveAnnouncer, elementRef, snackbarRef, data) { var _this = _super.call(this, elementRef) || this; _this._changeDetectorRef = _changeDetectorRef; _this._liveAnnouncer = _liveAnnouncer; _this.elementRef = elementRef; _this.snackbarRef = snackbarRef; _this.data = data; return _this; } Object.defineProperty(MdcSnackbarComponent.prototype, "config", { get: /** * @return {?} */ function () { return this.snackbarRef.componentInstance.snackbarConfig; }, enumerable: true, configurable: true }); /** * @return {?} */ MdcSnackbarComponent.prototype.getDefaultFoundation = /** * @return {?} */ function () { var _this = this; /** @type {?} */ var adapter = { addClass: (/** * @param {?} className * @return {?} */ function (className) { return _this._getHostElement().classList.add(className); }), removeClass: (/** * @param {?} className * @return {?} */ function (className) { return _this._getHostElement().classList.remove(className); }), announce: (/** * @return {?} */ function () { return _this.label.nativeElement ? _this._liveAnnouncer.announce(_this.config.data.message, _this.config.politeness, _this.config.timeoutMs || MDCSnackbarFoundation.numbers.ARIA_LIVE_DELAY_MS) : {}; }), notifyClosing: (/** * @return {?} */ function () { }), notifyOpened: (/** * @return {?} */ function () { }), notifyOpening: (/** * @return {?} */ function () { }), notifyClosed: (/** * @param {?} reason * @return {?} */ function (reason) { return _this.snackbarRef.dismiss(reason); }) }; return new MDCSnackbarFoundation(adapter); }; /** * @return {?} */ MdcSnackbarComponent.prototype.ngOnInit = /** * @return {?} */ function () { this._changeDetectorRef.detectChanges(); this._applyClasses(); this._applyConfig(); }; /** * @return {?} */ MdcSnackbarComponent.prototype.ngOnDestroy = /** * @return {?} */ function () { if (this._foundation) { this._foundation.destroy(); } }; /** * @param {?} evt * @return {?} */ MdcSnackbarComponent.prototype._onKeydown = /** * @param {?} evt * @return {?} */ function (evt) { this._foundation.handleKeyDown(evt); }; /** * @param {?} evt * @return {?} */ MdcSnackbarComponent.prototype._onActionClick = /** * @param {?} evt * @return {?} */ function (evt) { this._foundation.handleActionButtonClick(evt); }; /** * @param {?} evt * @return {?} */ MdcSnackbarComponent.prototype._onActionIconClick = /** * @param {?} evt * @return {?} */ function (evt) { this._foundation.handleActionIconClick(evt); }; /** * @return {?} */ MdcSnackbarComponent.prototype.open = /** * @return {?} */ function () { this._foundation.open(); }; /** * @param {?=} reason * @return {?} */ MdcSnackbarComponent.prototype.close = /** * @param {?=} reason * @return {?} */ function (reason) { this._foundation.close(reason !== undefined ? reason.action ? 'action' : reason.dismiss ? 'dismiss' : '' : ''); }; /** * @private * @return {?} */ MdcSnackbarComponent.prototype._applyClasses = /** * @private * @return {?} */ function () { var _a, _b, _c; /** @type {?} */ var classes = this.config.classes; if (classes) { if (classes instanceof Array) { (_a = this._getHostElement().classList).add.apply(_a, (/** @type {?} */ (this.config.classes))); } else { this._getHostElement().classList.toggle(classes); } } /** @type {?} */ var actionClasses = this.config.actionClasses; if (actionClasses && this.action) { if (actionClasses instanceof Array) { (_b = this.action.nativeElement.classList).add.apply(_b, (/** @type {?} */ (this.config.actionClasses))); } else { this.action.nativeElement.classList.toggle(actionClasses); } } if (this.dismiss) { /** @type {?} */ var dismissClasses = this.config.dismissClasses; if (dismissClasses) { if (dismissClasses instanceof Array) { (_c = this.dismiss.nativeElement.classList).add.apply(_c, (/** @type {?} */ (this.config.dismissClasses))); } else { this.dismiss.nativeElement.classList.toggle(dismissClasses); } } } }; /** * @private * @return {?} */ MdcSnackbarComponent.prototype._applyConfig = /** * @private * @return {?} */ function () { if (this.config.timeoutMs) { this._foundation.setTimeoutMs(this.config.timeoutMs); } if (this.config.dismiss) { this._foundation.setCloseOnEscape(this.config.closeOnEscape ? true : false); } }; /** Retrieves the DOM element of the component host. */ /** * Retrieves the DOM element of the component host. * @private * @return {?} */ MdcSnackbarComponent.prototype._getHostElement = /** * Retrieves the DOM element of the component host. * @private * @return {?} */ function () { return this.elementRef.nativeElement; }; MdcSnackbarComponent.decorators = [ { type: Component, args: [{selector: 'mdc-snackbar', host: { 'class': 'mdc-snackbar', '[dir]': 'this.config.direction', '[class.mdc-snackbar--stacked]': 'config.stacked', '[class.mdc-snackbar--leading]': 'config.leading', '[class.ngx-mdc-snackbar--trailing]': 'config.trailing', '(keydown)': '_onKeydown($event)' }, template: "\n <div #surface class=\"mdc-snackbar__surface\">\n <div #label class=\"mdc-snackbar__label\"\n role=\"status\"\n aria-live=\"polite\">{{data.message}}</div>\n <div class=\"mdc-snackbar__actions\" *ngIf=\"data.action\">\n <button #action type=\"button\" class=\"mdc-button mdc-snackbar__action\"\n (click)=\"_onActionClick($event)\">{{data.action}}</button>\n <button #dismiss *ngIf=\"config.dismiss\"\n class=\"mdc-icon-button mdc-snackbar__dismiss material-icons\"\n title=\"Dismiss\" (click)=\"_onActionIconClick($event)\">close</button>\n </div>\n </div>", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [LiveAnnouncer] },] }, ]; /** @nocollapse */ MdcSnackbarComponent.ctorParameters = function () { return [ { type: ChangeDetectorRef }, { type: LiveAnnouncer }, { type: ElementRef }, { type: MdcSnackbarRef }, { type: undefined, decorators: [{ type: Inject, args: [MDC_SNACKBAR_DATA,] }] } ]; }; MdcSnackbarComponent.propDecorators = { label: [{ type: ViewChild, args: ['label', { static: true },] }], action: [{ type: ViewChild, args: ['action', { static: false },] }], dismiss: [{ type: ViewChild, args: ['dismiss', { static: false },] }] }; return MdcSnackbarComponent; }(MDCComponent)); /** * @fileoverview added by tsickle * Generated from: snackbar/snackbar-container.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var MdcSnackbarContainer = /** @class */ (function (_super) { __extends(MdcSnackbarContainer, _super); function MdcSnackbarContainer(_ngZone, snackbarConfig) { var _this = _super.call(this) || this; _this._ngZone = _ngZone; _this.snackbarConfig = snackbarConfig; /** * Subject for notifying that the snackbar has exited from view. */ _this._onExit = new Subject(); return _this; } /** Attach a component portal as content to this snackbar container. */ /** * Attach a component portal as content to this snackbar container. * @template T * @param {?} portal * @return {?} */ MdcSnackbarContainer.prototype.attachComponentPortal = /** * Attach a component portal as content to this snackbar container. * @template T * @param {?} portal * @return {?} */ function (portal) { return this._portalOutlet.attachComponentPortal(portal); }; /** Attach a template portal as content to this snackbar container. */ /** * Attach a template portal as content to this snackbar container. * @template C * @param {?} portal * @return {?} */ MdcSnackbarContainer.prototype.attachTemplatePortal = /** * Attach a template portal as content to this snackbar container. * @template C * @param {?} portal * @return {?} */ function (portal) { return this._portalOutlet.attachTemplatePortal(portal); }; /** * @return {?} */ MdcSnackbarContainer.prototype.ngOnDestroy = /** * @return {?} */ function () { this._completeExit(); }; /** * Waits for the zone to settle before removing the element. Helps prevent * errors where we end up removing an element which is in the middle of an animation. */ /** * Waits for the zone to settle before removing the element. Helps prevent * errors where we end up removing an element which is in the middle of an animation. * @private * @return {?} */ MdcSnackbarContainer.prototype._completeExit = /** * Waits for the zone to settle before removing the element. Helps prevent * errors where we end up removing an element which is in the middle of an animation. * @private * @return {?} */ function () { var _this = this; this._ngZone.onMicrotaskEmpty.asObservable().pipe(take(1)).subscribe((/** * @return {?} */ function () { _this._onExit.next(); _this._onExit.complete(); })); }; MdcSnackbarContainer.decorators = [ { type: Component, args: [{selector: 'mdc-snackbar-container', template: '<ng-template cdkPortalOutlet></ng-template>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None },] }, ]; /** @nocollapse */ MdcSnackbarContainer.ctorParameters = function () { return [ { type: NgZone }, { type: MdcSnackbarConfig } ]; }; MdcSnackbarContainer.propDecorators = { _portalOutlet: [{ type: ViewChild, args: [CdkPortalOutlet, { static: true },] }] }; return MdcSnackbarContainer; }(BasePortalOutlet)); /** * @fileoverview added by tsickle * Generated from: snackbar/module.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var MdcSnackbarModule = /** @class */ (function () { function MdcSnackbarModule() { } MdcSnackbarModule.decorators = [ { type: NgModule, args: [{ imports: [ CommonModule, OverlayModule, PortalModule, MdcButtonModule ], exports: [MdcSnackbarContainer], declarations: [MdcSnackbarContainer, MdcSnackbarComponent], entryComponents: [MdcSnackbarContainer, MdcSnackbarComponent] },] }, ]; return MdcSnackbarModule; }()); /** * @fileoverview added by tsickle * Generated from: snackbar/snackbar.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * Injection token that can be used to specify default snackbar. * @type {?} */ var MDC_SNACKBAR_DEFAULT_OPTIONS = new InjectionToken('mdc-snackbar-default-options', { providedIn: 'root', factory: MDC_SNACKBAR_DEFAULT_OPTIONS_FACTORY, }); /** * \@docs-private * @return {?} */ function MDC_SNACKBAR_DEFAULT_OPTIONS_FACTORY() { return new MdcSnackbarConfig(); } var MdcSnackbar = /** @class */ (function () { function MdcSnackbar(_overlay, _injector, _parentSnackBar, _defaultConfig) { this._overlay = _overlay; this._injector = _injector; this._parentSnackBar = _parentSnackBar; this._defaultConfig = _defaultConfig; /** * Reference to the current snackbar in the view *at this level* (in the Angular injector tree). * If there is a parent snack-bar service, all operations should delegate to that parent * via `_openedSnackBarRef`. */ this._snackBarRefAtThisLevel = null; } Object.defineProperty(MdcSnackbar.prototype, "_openedSnackbarRef", { /** Reference to the currently opened snackbar at *any* level. */ get: /** * Reference to the currently opened snackbar at *any* level. * @return {?} */ function () { /** @type {?} */ var parent = this._parentSnackBar; return parent ? parent._openedSnackbarRef : this._snackBarRefAtThisLevel; }, set: /** * @param {?} value * @return {?} */ function (value) { if (this._parentSnackBar) { this._parentSnackBar._openedSnackbarRef = value; } else { this._snackBarRefAtThisLevel = value; } }, enumerable: true, configurable: true }); /** * Creates and dispatches a snackbar with a custom component for the content, removing any * currently opened snackbars. * * @param component Component to be instantiated. * @param config Extra configuration for the snackbar. */ /** * Creates and dispatches a snackbar with a custom component for the content, removing any * currently opened snackbars. * * @template T * @param {?} component Component to be instantiated. * @param {?=} config Extra configuration for the snackbar. * @return {?} */ MdcSnackbar.prototype.openFromComponent = /** * Creates and dispatches a snackbar with a custom component for the content, removing any * currently opened snackbars. * * @template T * @param {?} component Component to be instantiated. * @param {?=} config Extra configuration for the snackbar. * @return {?} */ function (component, config) { return (/** @type {?} */ (this._attach(component, config))); }; /** * Opens a snackbar with a message and an optional action. * @param message Message text. * @param action The label for the snackbar action. * @param config Additional configuration options for the snackbar. */ /** * Opens a snackbar with a message and an optional action. * @param {?} message Message text. * @param {?=} action The label for the snackbar action. * @param {?=} config Additional configuration options for the snackbar. * @return {?} */ MdcSnackbar.prototype.open = /** * Opens a snackbar with a message and an optional action. * @param {?} message Message text. * @param {?=} action The label for the snackbar action. * @param {?=} config Additional configuration options for the snackbar. * @return {?} */ function (message, action, config) { if (action === void 0) { action = ''; } /** @type {?} */ var _config = __assign(__assign({}, this._defaultConfig), config); // Since the user doesn't have access to the component, we can // override the data to pass in our own message and action. _config.data = { message: message, action: action }; return this.openFromComponent(MdcSnackbarComponent, _config); }; /** * Dismisses the currently-visible snackbar. */ /** * Dismisses the currently-visible snackbar. * @return {?} */ MdcSnackbar.prototype.dismiss = /** * Dismisses the currently-visible snackbar. * @return {?} */ function () { if (this._openedSnackbarRef) { if (this._openedSnackbarRef.instance instanceof MdcSnackbarComponent) { ((/** @type {?} */ (this._openedSnackbarRef.instance))).close(); } this._openedSnackbarRef.dismiss(); } }; /** * @return {?} */ MdcSnackbar.prototype.ngOnDestroy = /** * @return {?} */ function () { // Only dismiss the snackbar at the current level on destroy. if (this._snackBarRefAtThisLevel) { this._snackBarRefAtThisLevel.dismiss(); } }; /** * Attaches the snackbar container component to the overlay. */ /** * Attaches the snackbar container component to the overlay. * @private * @param {?} overlayRef * @param {?} config * @return {?} */ MdcSnackbar.prototype._attachSnackbarContainer = /** * Attaches the snackbar container component to the overlay. * @private * @param {?} overlayRef * @param {?} config * @return {?} */ function (overlayRef, config) { /** @type {?} */ var userInjector = config && config.viewContainerRef && config.viewContainerRef.injector; /** @type {?} */ var injector = new PortalInjector(userInjector || this._injector, new WeakMap([ [MdcSnackbarConfig, config] ])); /** @type {?} */ var containerPortal = new ComponentPortal(MdcSnackbarContainer, config.viewContainerRef, injector); /** @type {?} */ var containerRef = overlayRef.attach(containerPortal); containerRef.instance.snackbarConfig = config; return containerRef.instance; }; /** * Places a new component or a template as the content of the snackbar container. */ /** * Places a new component or a template as the content of the snackbar container. * @private * @template T * @param {?} content * @param {?=} userConfig * @return {?} */ MdcSnackbar.prototype._attach = /** * Places a new component or a template as the content of the snackbar container. * @private * @template T * @param {?} content * @param {?=} userConfig * @return {?} */ function (content, userConfig) { /** @type {?} */ var config = __assign(__assign(__assign({}, new MdcSnackbarConfig()), this._defaultConfig), userConfig); /** @type {?} */ var overlayRef = this._createOverlay(); /** @type {?} */ var container = this._attachSnackbarContainer(overlayRef, config); /** @type {?} */ var snackbarRef = new MdcSnackbarRef(container, overlayRef); /** @type {?} */ var injector = this._createInjector(config, snackbarRef); /** @type {?} */ var portal = new ComponentPortal(content, undefined, injector); /** @type {?} */ var contentRef = container.attachComponentPortal(portal); // We can't pass this via the injector, because the injector is created earlier. snackbarRef.instance = contentRef.instance; this._loadListeners(snackbarRef); this._openedSnackbarRef = snackbarRef; if (snackbarRef.instance instanceof MdcSnackbarComponent) { ((/** @type {?} */ (snackbarRef.instance))).open(); } return this._openedSnackbarRef; }; /** * @private * @param {?} snackbarRef * @return {?} */ MdcSnackbar.prototype._loadListeners = /** * @private * @param {?} snackbarRef * @return {?} */ function (snackbarRef) { var _this = this; // When the snackbar is dismissed, clear the reference to it. snackbarRef.afterDismiss().subscribe((/** * @return {?} */ function () { // Clear the snackbar ref if it hasn't already been replaced by a newer snackbar. if (_this._openedSnackbarRef === snackbarRef) { _this._openedSnackbarRef = null; } })); if (this._openedSnackbarRef) { this._openedSnackbarRef.dismiss(); } }; /** * Creates a new overlay and places it in the correct location. * @param config The user-specified snackbar config. */ /** * Creates a new overlay and places it in the correct location. * @private * @return {?} */ MdcSnackbar.prototype._createOverlay = /** * Creates a new overlay and places it in the correct location. * @private * @return {?} */ function () { return this._overlay.create(); }; /** * Creates an injector to be used inside of a snackbar component. * @param config Config that was used to create the snackbar. * @param snackbarRef Reference to the snackbar. */ /** * Creates an injector to be used inside of a snackbar component. * @private * @template T * @param {?} config Config that was used to create the snackbar. * @param {?} snackbarRef Reference to the snackbar. * @return {?} */ MdcSnackbar.prototype._createInjector = /** * Creates an injector to be used inside of a snackbar component. * @private * @template T * @param {?} config Config that was used to create the snackbar. * @param {?} snackbarRef Reference to the snackbar. * @return {?} */ function (config, snackbarRef) { /** @type {?} */ var userInjector = config && config.viewContainerRef && config.viewContainerRef.injector; return new PortalInjector(userInjector || this._injector, new WeakMap([ [MdcSnackbarRef, snackbarRef], [MDC_SNACKBAR_DATA, config.data] ])); }; MdcSnackbar.decorators = [ { type: Injectable, args: [{ providedIn: MdcSnackbarModule },] }, ]; /** @nocollapse */ MdcSnackbar.ctorParameters = function () { return [ { type: Overlay }, { type: Injector }, { type: MdcSnackbar, decorators: [{ type: Optional }, { type: SkipSelf }] }, { type: MdcSnackbarConfig, decorators: [{ type: Inject, args: [MDC_SNACKBAR_DEFAULT_OPTIONS,] }] } ]; }; /** @nocollapse */ MdcSnackbar.ɵprov31 = ɵɵdefineInjectable({ factory: function MdcSnackbar_Factory() { return new MdcSnackbar(ɵɵinject(Overlay), ɵɵinject(INJECTOR), ɵɵinject(MdcSnackbar, 12), ɵɵinject(MDC_SNACKBAR_DEFAULT_OPTIONS)); }, token: MdcSnackbar, providedIn: MdcSnackbarModule }); return MdcSnackbar; }()); export { MDC_SNACKBAR_DATA, MDC_SNACKBAR_DEFAULT_OPTIONS, MDC_SNACKBAR_DEFAULT_OPTIONS_FACTORY, MdcSnackbar, MdcSnackbarComponent, MdcSnackbarConfig, MdcSnackbarContainer, MdcSnackbarModule, MdcSnackbarRef }; //# sourceMappingURL=snackbar.es5.js.map