@angular/material
Version:
Angular Material
812 lines (799 loc) • 49 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, Directive, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, ViewChild, NgModule, Injector, TemplateRef, Injectable, Optional, SkipSelf } from '@angular/core';
import { Subject } from 'rxjs';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import { trigger, state, style, transition, animate } from '@angular/animations';
import * as i3$1 from '@angular/cdk/portal';
import { BasePortalOutlet, CdkPortalOutlet, PortalModule, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
import * as i1 from '@angular/cdk/platform';
import { take, takeUntil } from 'rxjs/operators';
import * as i2$1 from '@angular/cdk/a11y';
import * as i3$2 from '@angular/cdk/layout';
import { Breakpoints } from '@angular/cdk/layout';
import * as i1$1 from '@angular/cdk/overlay';
import { OverlayModule, OverlayConfig } from '@angular/cdk/overlay';
import { MatCommonModule } from '@angular/material/core';
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/** Maximum amount of milliseconds that can be passed into setTimeout. */
const MAX_TIMEOUT = Math.pow(2, 31) - 1;
/**
* Reference to a snack bar dispatched from the snack bar service.
*/
class MatSnackBarRef {
constructor(containerInstance, _overlayRef) {
this._overlayRef = _overlayRef;
/** Subject for notifying the user that the snack bar has been dismissed. */
this._afterDismissed = new Subject();
/** Subject for notifying the user that the snack bar has opened and appeared. */
this._afterOpened = new Subject();
/** Subject for notifying the user that the snack bar action was called. */
this._onAction = new Subject();
/** Whether the snack bar was dismissed using the action button. */
this._dismissedByAction = false;
this.containerInstance = containerInstance;
containerInstance._onExit.subscribe(() => this._finishDismiss());
}
/** Dismisses the snack bar. */
dismiss() {
if (!this._afterDismissed.closed) {
this.containerInstance.exit();
}
clearTimeout(this._durationTimeoutId);
}
/** Marks the snackbar action clicked. */
dismissWithAction() {
if (!this._onAction.closed) {
this._dismissedByAction = true;
this._onAction.next();
this._onAction.complete();
this.dismiss();
}
clearTimeout(this._durationTimeoutId);
}
/**
* Marks the snackbar action clicked.
* @deprecated Use `dismissWithAction` instead.
* @breaking-change 8.0.0
*/
closeWithAction() {
this.dismissWithAction();
}
/** Dismisses the snack bar after some duration */
_dismissAfter(duration) {
// Note that we need to cap the duration to the maximum value for setTimeout, because
// it'll revert to 1 if somebody passes in something greater (e.g. `Infinity`). See #17234.
this._durationTimeoutId = setTimeout(() => this.dismiss(), Math.min(duration, MAX_TIMEOUT));
}
/** Marks the snackbar as opened */
_open() {
if (!this._afterOpened.closed) {
this._afterOpened.next();
this._afterOpened.complete();
}
}
/** Cleans up the DOM after closing. */
_finishDismiss() {
this._overlayRef.dispose();
if (!this._onAction.closed) {
this._onAction.complete();
}
this._afterDismissed.next({ dismissedByAction: this._dismissedByAction });
this._afterDismissed.complete();
this._dismissedByAction = false;
}
/** Gets an observable that is notified when the snack bar is finished closing. */
afterDismissed() {
return this._afterDismissed;
}
/** Gets an observable that is notified when the snack bar has opened and appeared. */
afterOpened() {
return this.containerInstance._onEnter;
}
/** Gets an observable that is notified when the snack bar action is called. */
onAction() {
return this._onAction;
}
}
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/** Injection token that can be used to access the data that was passed in to a snack bar. */
const MAT_SNACK_BAR_DATA = new InjectionToken('MatSnackBarData');
/**
* Configuration used when opening a snack-bar.
*/
class MatSnackBarConfig {
constructor() {
/** The politeness level for the MatAriaLiveAnnouncer announcement. */
this.politeness = 'assertive';
/**
* Message to be announced by the LiveAnnouncer. When opening a snackbar without a custom
* component or template, the announcement message will default to the specified message.
*/
this.announcementMessage = '';
/** The length of time in milliseconds to wait before automatically dismissing the snack bar. */
this.duration = 0;
/** Data being injected into the child component. */
this.data = null;
/** The horizontal position to place the snack bar. */
this.horizontalPosition = 'center';
/** The vertical position to place the snack bar. */
this.verticalPosition = 'bottom';
}
}
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/** Directive that should be applied to the text element to be rendered in the snack bar. */
class MatSnackBarLabel {
}
MatSnackBarLabel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSnackBarLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
MatSnackBarLabel.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-rc.1", type: MatSnackBarLabel, selector: "[matSnackBarLabel]", host: { classAttribute: "mat-mdc-snack-bar-label mdc-snackbar__label" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSnackBarLabel, decorators: [{
type: Directive,
args: [{
selector: `[matSnackBarLabel]`,
host: {
'class': 'mat-mdc-snack-bar-label mdc-snackbar__label',
},
}]
}] });
/** Directive that should be applied to the element containing the snack bar's action buttons. */
class MatSnackBarActions {
}
MatSnackBarActions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSnackBarActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
MatSnackBarActions.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-rc.1", type: MatSnackBarActions, selector: "[matSnackBarActions]", host: { classAttribute: "mat-mdc-snack-bar-actions mdc-snackbar__actions" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSnackBarActions, decorators: [{
type: Directive,
args: [{
selector: `[matSnackBarActions]`,
host: {
'class': 'mat-mdc-snack-bar-actions mdc-snackbar__actions',
},
}]
}] });
/** Directive that should be applied to each of the snack bar's action buttons. */
class MatSnackBarAction {
}
MatSnackBarAction.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSnackBarAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
MatSnackBarAction.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-rc.1", type: MatSnackBarAction, selector: "[matSnackBarAction]", host: { classAttribute: "mat-mdc-snack-bar-action mdc-snackbar__action" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSnackBarAction, decorators: [{
type: Directive,
args: [{
selector: `[matSnackBarAction]`,
host: {
'class': 'mat-mdc-snack-bar-action mdc-snackbar__action',
},
}]
}] });
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
class SimpleSnackBar {
constructor(snackBarRef, data) {
this.snackBarRef = snackBarRef;
this.data = data;
}
/** Performs the action on the snack bar. */
action() {
this.snackBarRef.dismissWithAction();
}
/** If the action button should be shown. */
get hasAction() {
return !!this.data.action;
}
}
SimpleSnackBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: SimpleSnackBar, deps: [{ token: MatSnackBarRef }, { token: MAT_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component });
SimpleSnackBar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-rc.1", type: SimpleSnackBar, selector: "simple-snack-bar", host: { classAttribute: "mat-mdc-simple-snack-bar" }, exportAs: ["matSnackBar"], ngImport: i0, template: "<div matSnackBarLabel>\n {{data.message}}\n</div>\n\n<div matSnackBarActions *ngIf=\"hasAction\">\n <button mat-button matSnackBarAction (click)=\"action()\">\n {{data.action}}\n </button>\n</div>\n", styles: [".mat-mdc-simple-snack-bar{display:flex}"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: MatSnackBarLabel, selector: "[matSnackBarLabel]" }, { kind: "directive", type: MatSnackBarActions, selector: "[matSnackBarActions]" }, { kind: "directive", type: MatSnackBarAction, selector: "[matSnackBarAction]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: SimpleSnackBar, decorators: [{
type: Component,
args: [{ selector: 'simple-snack-bar', exportAs: 'matSnackBar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
'class': 'mat-mdc-simple-snack-bar',
}, template: "<div matSnackBarLabel>\n {{data.message}}\n</div>\n\n<div matSnackBarActions *ngIf=\"hasAction\">\n <button mat-button matSnackBarAction (click)=\"action()\">\n {{data.action}}\n </button>\n</div>\n", styles: [".mat-mdc-simple-snack-bar{display:flex}"] }]
}], ctorParameters: function () { return [{ type: MatSnackBarRef }, { type: undefined, decorators: [{
type: Inject,
args: [MAT_SNACK_BAR_DATA]
}] }]; } });
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* Animations used by the Material snack bar.
* @docs-private
*/
const matSnackBarAnimations = {
/** Animation that shows and hides a snack bar. */
snackBarState: trigger('state', [
state('void, hidden', style({
transform: 'scale(0.8)',
opacity: 0,
})),
state('visible', style({
transform: 'scale(1)',
opacity: 1,
})),
transition('* => visible', animate('150ms cubic-bezier(0, 0, 0.2, 1)')),
transition('* => void, * => hidden', animate('75ms cubic-bezier(0.4, 0.0, 1, 1)', style({
opacity: 0,
}))),
]),
};
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* Base class for snack bar containers.
* @docs-private
*/
class _MatSnackBarContainerBase extends BasePortalOutlet {
constructor(_ngZone, _elementRef, _changeDetectorRef, _platform,
/** The snack bar configuration. */
snackBarConfig) {
super();
this._ngZone = _ngZone;
this._elementRef = _elementRef;
this._changeDetectorRef = _changeDetectorRef;
this._platform = _platform;
this.snackBarConfig = snackBarConfig;
/** The number of milliseconds to wait before announcing the snack bar's content. */
this._announceDelay = 150;
/** Whether the component has been destroyed. */
this._destroyed = false;
/** Subject for notifying that the snack bar has announced to screen readers. */
this._onAnnounce = new Subject();
/** Subject for notifying that the snack bar has exited from view. */
this._onExit = new Subject();
/** Subject for notifying that the snack bar has finished entering the view. */
this._onEnter = new Subject();
/** The state of the snack bar animations. */
this._animationState = 'void';
/**
* Attaches a DOM portal to the snack bar container.
* @deprecated To be turned into a method.
* @breaking-change 10.0.0
*/
this.attachDomPortal = (portal) => {
this._assertNotAttached();
const result = this._portalOutlet.attachDomPortal(portal);
this._afterPortalAttached();
return result;
};
// Use aria-live rather than a live role like 'alert' or 'status'
// because NVDA and JAWS have show inconsistent behavior with live roles.
if (snackBarConfig.politeness === 'assertive' && !snackBarConfig.announcementMessage) {
this._live = 'assertive';
}
else if (snackBarConfig.politeness === 'off') {
this._live = 'off';
}
else {
this._live = 'polite';
}
// Only set role for Firefox. Set role based on aria-live because setting role="alert" implies
// aria-live="assertive" which may cause issues if aria-live is set to "polite" above.
if (this._platform.FIREFOX) {
if (this._live === 'polite') {
this._role = 'status';
}
if (this._live === 'assertive') {
this._role = 'alert';
}
}
}
/** Attach a component portal as content to this snack bar container. */
attachComponentPortal(portal) {
this._assertNotAttached();
const result = this._portalOutlet.attachComponentPortal(portal);
this._afterPortalAttached();
return result;
}
/** Attach a template portal as content to this snack bar container. */
attachTemplatePortal(portal) {
this._assertNotAttached();
const result = this._portalOutlet.attachTemplatePortal(portal);
this._afterPortalAttached();
return result;
}
/** Handle end of animations, updating the state of the snackbar. */
onAnimationEnd(event) {
const { fromState, toState } = event;
if ((toState === 'void' && fromState !== 'void') || toState === 'hidden') {
this._completeExit();
}
if (toState === 'visible') {
// Note: we shouldn't use `this` inside the zone callback,
// because it can cause a memory leak.
const onEnter = this._onEnter;
this._ngZone.run(() => {
onEnter.next();
onEnter.complete();
});
}
}
/** Begin animation of snack bar entrance into view. */
enter() {
if (!this._destroyed) {
this._animationState = 'visible';
this._changeDetectorRef.detectChanges();
this._screenReaderAnnounce();
}
}
/** Begin animation of the snack bar exiting from view. */
exit() {
// It's common for snack bars to be opened by random outside calls like HTTP requests or
// errors. Run inside the NgZone to ensure that it functions correctly.
this._ngZone.run(() => {
// Note: this one transitions to `hidden`, rather than `void`, in order to handle the case
// where multiple snack bars are opened in quick succession (e.g. two consecutive calls to
// `MatSnackBar.open`).
this._animationState = 'hidden';
// Mark this element with an 'exit' attribute to indicate that the snackbar has
// been dismissed and will soon be removed from the DOM. This is used by the snackbar
// test harness.
this._elementRef.nativeElement.setAttribute('mat-exit', '');
// If the snack bar hasn't been announced by the time it exits it wouldn't have been open
// long enough to visually read it either, so clear the timeout for announcing.
clearTimeout(this._announceTimeoutId);
});
return this._onExit;
}
/** Makes sure the exit callbacks have been invoked when the element is destroyed. */
ngOnDestroy() {
this._destroyed = true;
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.
*/
_completeExit() {
this._ngZone.onMicrotaskEmpty.pipe(take(1)).subscribe(() => {
this._ngZone.run(() => {
this._onExit.next();
this._onExit.complete();
});
});
}
/**
* Called after the portal contents have been attached. Can be
* used to modify the DOM once it's guaranteed to be in place.
*/
_afterPortalAttached() {
const element = this._elementRef.nativeElement;
const panelClasses = this.snackBarConfig.panelClass;
if (panelClasses) {
if (Array.isArray(panelClasses)) {
// Note that we can't use a spread here, because IE doesn't support multiple arguments.
panelClasses.forEach(cssClass => element.classList.add(cssClass));
}
else {
element.classList.add(panelClasses);
}
}
}
/** Asserts that no content is already attached to the container. */
_assertNotAttached() {
if (this._portalOutlet.hasAttached() && (typeof ngDevMode === 'undefined' || ngDevMode)) {
throw Error('Attempting to attach snack bar content after content is already attached');
}
}
/**
* Starts a timeout to move the snack bar content to the live region so screen readers will
* announce it.
*/
_screenReaderAnnounce() {
if (!this._announceTimeoutId) {
this._ngZone.runOutsideAngular(() => {
this._announceTimeoutId = setTimeout(() => {
const inertElement = this._elementRef.nativeElement.querySelector('[aria-hidden]');
const liveElement = this._elementRef.nativeElement.querySelector('[aria-live]');
if (inertElement && liveElement) {
// If an element in the snack bar content is focused before being moved
// track it and restore focus after moving to the live region.
let focusedElement = null;
if (this._platform.isBrowser &&
document.activeElement instanceof HTMLElement &&
inertElement.contains(document.activeElement)) {
focusedElement = document.activeElement;
}
inertElement.removeAttribute('aria-hidden');
liveElement.appendChild(inertElement);
focusedElement?.focus();
this._onAnnounce.next();
this._onAnnounce.complete();
}
}, this._announceDelay);
});
}
}
}
_MatSnackBarContainerBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: _MatSnackBarContainerBase, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.Platform }, { token: MatSnackBarConfig }], target: i0.ɵɵFactoryTarget.Directive });
_MatSnackBarContainerBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-rc.1", type: _MatSnackBarContainerBase, viewQueries: [{ propertyName: "_portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: _MatSnackBarContainerBase, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.Platform }, { type: MatSnackBarConfig }]; }, propDecorators: { _portalOutlet: [{
type: ViewChild,
args: [CdkPortalOutlet, { static: true }]
}] } });
/**
* Internal component that wraps user-provided snack bar content.
* @docs-private
*/
class MatSnackBarContainer extends _MatSnackBarContainerBase {
/** Applies the correct CSS class to the label based on its content. */
_afterPortalAttached() {
super._afterPortalAttached();
// Check to see if the attached component or template uses the MDC template structure,
// specifically the MDC label. If not, the container should apply the MDC label class to this
// component's label container, which will apply MDC's label styles to the attached view.
const label = this._label.nativeElement;
const labelClass = 'mdc-snackbar__label';
label.classList.toggle(labelClass, !label.querySelector(`.${labelClass}`));
}
}
MatSnackBarContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSnackBarContainer, deps: null, target: i0.ɵɵFactoryTarget.Component });
MatSnackBarContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-rc.1", type: MatSnackBarContainer, selector: "mat-snack-bar-container", host: { listeners: { "@state.done": "onAnimationEnd($event)" }, properties: { "@state": "_animationState" }, classAttribute: "mdc-snackbar mat-mdc-snack-bar-container mdc-snackbar--open" }, viewQueries: [{ propertyName: "_label", first: true, predicate: ["label"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mdc-snackbar__surface\">\n <!--\n This outer label wrapper will have the class `mdc-snackbar__label` applied if\n the attached template/component does not contain it.\n -->\n <div class=\"mat-mdc-snack-bar-label\" #label>\n <!-- Initialy holds the snack bar content, will be empty after announcing to screen readers. -->\n <div aria-hidden=\"true\">\n <ng-template cdkPortalOutlet></ng-template>\n </div>\n\n <!-- Will receive the snack bar content from the non-live div, move will happen a short delay after opening -->\n <div [attr.aria-live]=\"_live\" [attr.role]=\"_role\"></div>\n </div>\n</div>\n", styles: [".mdc-snackbar{display:none;position:fixed;right:0;bottom:0;left:0;align-items:center;justify-content:center;box-sizing:border-box;pointer-events:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mdc-snackbar--opening,.mdc-snackbar--open,.mdc-snackbar--closing{display:flex}.mdc-snackbar--open .mdc-snackbar__label,.mdc-snackbar--open .mdc-snackbar__actions{visibility:visible}.mdc-snackbar__surface{padding-left:0;padding-right:8px;display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;transform:scale(0.8);opacity:0}.mdc-snackbar__surface::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-snackbar__surface::before{border-color:CanvasText}}[dir=rtl] .mdc-snackbar__surface,.mdc-snackbar__surface[dir=rtl]{padding-left:8px;padding-right:0}.mdc-snackbar--open .mdc-snackbar__surface{transform:scale(1);opacity:1;pointer-events:auto}.mdc-snackbar--closing .mdc-snackbar__surface{transform:scale(1)}.mdc-snackbar__label{padding-left:16px;padding-right:8px;width:100%;flex-grow:1;box-sizing:border-box;margin:0;visibility:hidden;padding-top:14px;padding-bottom:14px}[dir=rtl] .mdc-snackbar__label,.mdc-snackbar__label[dir=rtl]{padding-left:8px;padding-right:16px}.mdc-snackbar__label::before{display:inline;content:attr(data-mdc-snackbar-label-text)}.mdc-snackbar__actions{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box;visibility:hidden}.mdc-snackbar__action+.mdc-snackbar__dismiss{margin-left:8px;margin-right:0}[dir=rtl] .mdc-snackbar__action+.mdc-snackbar__dismiss,.mdc-snackbar__action+.mdc-snackbar__dismiss[dir=rtl]{margin-left:0;margin-right:8px}.mat-mdc-snack-bar-container{margin:8px;position:static}.mat-mdc-snack-bar-container .mdc-snackbar__surface{min-width:344px}@media(max-width: 480px),(max-width: 344px){.mat-mdc-snack-bar-container .mdc-snackbar__surface{min-width:100%}}.mat-mdc-snack-bar-container .mdc-snackbar__surface{max-width:672px}.mat-mdc-snack-bar-container .mdc-snackbar__surface{box-shadow:0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)}.mat-mdc-snack-bar-container .mdc-snackbar__dismiss .mdc-button__icon{font-size:var(--mdc-icon-button-icon-size, 24px)}.mat-mdc-snack-bar-container .mdc-snackbar__dismiss svg,.mat-mdc-snack-bar-container .mdc-snackbar__dismiss img{width:var(--mdc-icon-button-icon-size, 24px);height:var(--mdc-icon-button-icon-size, 24px)}.mat-mdc-snack-bar-container .mdc-snackbar__surface{background-color:var(--mdc-snackbar-container-color, inherit)}.mat-mdc-snack-bar-container .mdc-snackbar__surface{border-radius:var(--mdc-snackbar-container-shape, var(--mdc-shape-small, 4px))}.mat-mdc-snack-bar-container .mdc-snackbar__label{color:var(--mdc-snackbar-supporting-text-color, inherit)}.mat-mdc-snack-bar-container .mdc-snackbar__label{font-size:var(--mdc-snackbar-supporting-text-size, inherit);font-family:var(--mdc-snackbar-supporting-text-font, inherit);font-weight:var(--mdc-snackbar-supporting-text-weight, inherit);line-height:var(--mdc-snackbar-supporting-text-line-height, inherit)}.cdk-high-contrast-active .mat-mdc-snack-bar-container{border:solid 1px}.mat-mdc-snack-bar-container .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled){color:var(--mat-mdc-snack-bar-button-color, transparent);--mat-mdc-button-persistent-ripple-color: currentColor}.mat-mdc-snack-bar-container .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) .mat-ripple-element{background-color:currentColor;opacity:.1}.mat-mdc-snack-bar-handset,.mat-mdc-snack-bar-container,.mat-mdc-snack-bar-label{flex:1 1 auto}.mat-mdc-snack-bar-handset .mdc-snackbar__surface{width:100%}"], dependencies: [{ kind: "directive", type: i3$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [matSnackBarAnimations.snackBarState], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSnackBarContainer, decorators: [{
type: Component,
args: [{ selector: 'mat-snack-bar-container', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, animations: [matSnackBarAnimations.snackBarState], host: {
'class': 'mdc-snackbar mat-mdc-snack-bar-container mdc-snackbar--open',
'[@state]': '_animationState',
'(@state.done)': 'onAnimationEnd($event)',
}, template: "<div class=\"mdc-snackbar__surface\">\n <!--\n This outer label wrapper will have the class `mdc-snackbar__label` applied if\n the attached template/component does not contain it.\n -->\n <div class=\"mat-mdc-snack-bar-label\" #label>\n <!-- Initialy holds the snack bar content, will be empty after announcing to screen readers. -->\n <div aria-hidden=\"true\">\n <ng-template cdkPortalOutlet></ng-template>\n </div>\n\n <!-- Will receive the snack bar content from the non-live div, move will happen a short delay after opening -->\n <div [attr.aria-live]=\"_live\" [attr.role]=\"_role\"></div>\n </div>\n</div>\n", styles: [".mdc-snackbar{display:none;position:fixed;right:0;bottom:0;left:0;align-items:center;justify-content:center;box-sizing:border-box;pointer-events:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mdc-snackbar--opening,.mdc-snackbar--open,.mdc-snackbar--closing{display:flex}.mdc-snackbar--open .mdc-snackbar__label,.mdc-snackbar--open .mdc-snackbar__actions{visibility:visible}.mdc-snackbar__surface{padding-left:0;padding-right:8px;display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;transform:scale(0.8);opacity:0}.mdc-snackbar__surface::before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid rgba(0,0,0,0);border-radius:inherit;content:\"\";pointer-events:none}@media screen and (forced-colors: active){.mdc-snackbar__surface::before{border-color:CanvasText}}[dir=rtl] .mdc-snackbar__surface,.mdc-snackbar__surface[dir=rtl]{padding-left:8px;padding-right:0}.mdc-snackbar--open .mdc-snackbar__surface{transform:scale(1);opacity:1;pointer-events:auto}.mdc-snackbar--closing .mdc-snackbar__surface{transform:scale(1)}.mdc-snackbar__label{padding-left:16px;padding-right:8px;width:100%;flex-grow:1;box-sizing:border-box;margin:0;visibility:hidden;padding-top:14px;padding-bottom:14px}[dir=rtl] .mdc-snackbar__label,.mdc-snackbar__label[dir=rtl]{padding-left:8px;padding-right:16px}.mdc-snackbar__label::before{display:inline;content:attr(data-mdc-snackbar-label-text)}.mdc-snackbar__actions{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box;visibility:hidden}.mdc-snackbar__action+.mdc-snackbar__dismiss{margin-left:8px;margin-right:0}[dir=rtl] .mdc-snackbar__action+.mdc-snackbar__dismiss,.mdc-snackbar__action+.mdc-snackbar__dismiss[dir=rtl]{margin-left:0;margin-right:8px}.mat-mdc-snack-bar-container{margin:8px;position:static}.mat-mdc-snack-bar-container .mdc-snackbar__surface{min-width:344px}@media(max-width: 480px),(max-width: 344px){.mat-mdc-snack-bar-container .mdc-snackbar__surface{min-width:100%}}.mat-mdc-snack-bar-container .mdc-snackbar__surface{max-width:672px}.mat-mdc-snack-bar-container .mdc-snackbar__surface{box-shadow:0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)}.mat-mdc-snack-bar-container .mdc-snackbar__dismiss .mdc-button__icon{font-size:var(--mdc-icon-button-icon-size, 24px)}.mat-mdc-snack-bar-container .mdc-snackbar__dismiss svg,.mat-mdc-snack-bar-container .mdc-snackbar__dismiss img{width:var(--mdc-icon-button-icon-size, 24px);height:var(--mdc-icon-button-icon-size, 24px)}.mat-mdc-snack-bar-container .mdc-snackbar__surface{background-color:var(--mdc-snackbar-container-color, inherit)}.mat-mdc-snack-bar-container .mdc-snackbar__surface{border-radius:var(--mdc-snackbar-container-shape, var(--mdc-shape-small, 4px))}.mat-mdc-snack-bar-container .mdc-snackbar__label{color:var(--mdc-snackbar-supporting-text-color, inherit)}.mat-mdc-snack-bar-container .mdc-snackbar__label{font-size:var(--mdc-snackbar-supporting-text-size, inherit);font-family:var(--mdc-snackbar-supporting-text-font, inherit);font-weight:var(--mdc-snackbar-supporting-text-weight, inherit);line-height:var(--mdc-snackbar-supporting-text-line-height, inherit)}.cdk-high-contrast-active .mat-mdc-snack-bar-container{border:solid 1px}.mat-mdc-snack-bar-container .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled){color:var(--mat-mdc-snack-bar-button-color, transparent);--mat-mdc-button-persistent-ripple-color: currentColor}.mat-mdc-snack-bar-container .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) .mat-ripple-element{background-color:currentColor;opacity:.1}.mat-mdc-snack-bar-handset,.mat-mdc-snack-bar-container,.mat-mdc-snack-bar-label{flex:1 1 auto}.mat-mdc-snack-bar-handset .mdc-snackbar__surface{width:100%}"] }]
}], propDecorators: { _label: [{
type: ViewChild,
args: ['label', { static: true }]
}] } });
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
class MatSnackBarModule {
}
MatSnackBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSnackBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
MatSnackBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSnackBarModule, declarations: [SimpleSnackBar,
MatSnackBarContainer,
MatSnackBarLabel,
MatSnackBarActions,
MatSnackBarAction], imports: [OverlayModule, PortalModule, CommonModule, MatButtonModule, MatCommonModule], exports: [MatCommonModule,
MatSnackBarContainer,
MatSnackBarLabel,
MatSnackBarActions,
MatSnackBarAction] });
MatSnackBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSnackBarModule, imports: [OverlayModule, PortalModule, CommonModule, MatButtonModule, MatCommonModule, MatCommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSnackBarModule, decorators: [{
type: NgModule,
args: [{
imports: [OverlayModule, PortalModule, CommonModule, MatButtonModule, MatCommonModule],
exports: [
MatCommonModule,
MatSnackBarContainer,
MatSnackBarLabel,
MatSnackBarActions,
MatSnackBarAction,
],
declarations: [
SimpleSnackBar,
MatSnackBarContainer,
MatSnackBarLabel,
MatSnackBarActions,
MatSnackBarAction,
],
}]
}] });
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/** @docs-private */
function MAT_SNACK_BAR_DEFAULT_OPTIONS_FACTORY() {
return new MatSnackBarConfig();
}
/** Injection token that can be used to specify default snack bar. */
const MAT_SNACK_BAR_DEFAULT_OPTIONS = new InjectionToken('mat-snack-bar-default-options', {
providedIn: 'root',
factory: MAT_SNACK_BAR_DEFAULT_OPTIONS_FACTORY,
});
class _MatSnackBarBase {
constructor(_overlay, _live, _injector, _breakpointObserver, _parentSnackBar, _defaultConfig) {
this._overlay = _overlay;
this._live = _live;
this._injector = _injector;
this._breakpointObserver = _breakpointObserver;
this._parentSnackBar = _parentSnackBar;
this._defaultConfig = _defaultConfig;
/**
* Reference to the current snack bar 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;
}
/** Reference to the currently opened snackbar at *any* level. */
get _openedSnackBarRef() {
const parent = this._parentSnackBar;
return parent ? parent._openedSnackBarRef : this._snackBarRefAtThisLevel;
}
set _openedSnackBarRef(value) {
if (this._parentSnackBar) {
this._parentSnackBar._openedSnackBarRef = value;
}
else {
this._snackBarRefAtThisLevel = value;
}
}
/**
* Creates and dispatches a snack bar with a custom component for the content, removing any
* currently opened snack bars.
*
* @param component Component to be instantiated.
* @param config Extra configuration for the snack bar.
*/
openFromComponent(component, config) {
return this._attach(component, config);
}
/**
* Creates and dispatches a snack bar with a custom template for the content, removing any
* currently opened snack bars.
*
* @param template Template to be instantiated.
* @param config Extra configuration for the snack bar.
*/
openFromTemplate(template, config) {
return this._attach(template, config);
}
/**
* Opens a snackbar with a message and an optional action.
* @param message The message to show in the snackbar.
* @param action The label for the snackbar action.
* @param config Additional configuration options for the snackbar.
*/
open(message, action = '', config) {
const _config = { ...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, action };
// Since the snack bar has `role="alert"`, we don't
// want to announce the same message twice.
if (_config.announcementMessage === message) {
_config.announcementMessage = undefined;
}
return this.openFromComponent(this.simpleSnackBarComponent, _config);
}
/**
* Dismisses the currently-visible snack bar.
*/
dismiss() {
if (this._openedSnackBarRef) {
this._openedSnackBarRef.dismiss();
}
}
ngOnDestroy() {
// Only dismiss the snack bar at the current level on destroy.
if (this._snackBarRefAtThisLevel) {
this._snackBarRefAtThisLevel.dismiss();
}
}
/**
* Attaches the snack bar container component to the overlay.
*/
_attachSnackBarContainer(overlayRef, config) {
const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
const injector = Injector.create({
parent: userInjector || this._injector,
providers: [{ provide: MatSnackBarConfig, useValue: config }],
});
const containerPortal = new ComponentPortal(this.snackBarContainerComponent, config.viewContainerRef, injector);
const containerRef = overlayRef.attach(containerPortal);
containerRef.instance.snackBarConfig = config;
return containerRef.instance;
}
/**
* Places a new component or a template as the content of the snack bar container.
*/
_attach(content, userConfig) {
const config = { ...new MatSnackBarConfig(), ...this._defaultConfig, ...userConfig };
const overlayRef = this._createOverlay(config);
const container = this._attachSnackBarContainer(overlayRef, config);
const snackBarRef = new MatSnackBarRef(container, overlayRef);
if (content instanceof TemplateRef) {
const portal = new TemplatePortal(content, null, {
$implicit: config.data,
snackBarRef,
});
snackBarRef.instance = container.attachTemplatePortal(portal);
}
else {
const injector = this._createInjector(config, snackBarRef);
const portal = new ComponentPortal(content, undefined, injector);
const contentRef = container.attachComponentPortal(portal);
// We can't pass this via the injector, because the injector is created earlier.
snackBarRef.instance = contentRef.instance;
}
// Subscribe to the breakpoint observer and attach the mat-snack-bar-handset class as
// appropriate. This class is applied to the overlay element because the overlay must expand to
// fill the width of the screen for full width snackbars.
this._breakpointObserver
.observe(Breakpoints.HandsetPortrait)
.pipe(takeUntil(overlayRef.detachments()))
.subscribe(state => {
overlayRef.overlayElement.classList.toggle(this.handsetCssClass, state.matches);
});
if (config.announcementMessage) {
// Wait until the snack bar contents have been announced then deliver this message.
container._onAnnounce.subscribe(() => {
this._live.announce(config.announcementMessage, config.politeness);
});
}
this._animateSnackBar(snackBarRef, config);
this._openedSnackBarRef = snackBarRef;
return this._openedSnackBarRef;
}
/** Animates the old snack bar out and the new one in. */
_animateSnackBar(snackBarRef, config) {
// When the snackbar is dismissed, clear the reference to it.
snackBarRef.afterDismissed().subscribe(() => {
// Clear the snackbar ref if it hasn't already been replaced by a newer snackbar.
if (this._openedSnackBarRef == snackBarRef) {
this._openedSnackBarRef = null;
}
if (config.announcementMessage) {
this._live.clear();
}
});
if (this._openedSnackBarRef) {
// If a snack bar is already in view, dismiss it and enter the
// new snack bar after exit animation is complete.
this._openedSnackBarRef.afterDismissed().subscribe(() => {
snackBarRef.containerInstance.enter();
});
this._openedSnackBarRef.dismiss();
}
else {
// If no snack bar is in view, enter the new snack bar.
snackBarRef.containerInstance.enter();
}
// If a dismiss timeout is provided, set up dismiss based on after the snackbar is opened.
if (config.duration && config.duration > 0) {
snackBarRef.afterOpened().subscribe(() => snackBarRef._dismissAfter(config.duration));
}
}
/**
* Creates a new overlay and places it in the correct location.
* @param config The user-specified snack bar config.
*/
_createOverlay(config) {
const overlayConfig = new OverlayConfig();
overlayConfig.direction = config.direction;
let positionStrategy = this._overlay.position().global();
// Set horizontal position.
const isRtl = config.direction === 'rtl';
const isLeft = config.horizontalPosition === 'left' ||
(config.horizontalPosition === 'start' && !isRtl) ||
(config.horizontalPosition === 'end' && isRtl);
const isRight = !isLeft && config.horizontalPosition !== 'center';
if (isLeft) {
positionStrategy.left('0');
}
else if (isRight) {
positionStrategy.right('0');
}
else {
positionStrategy.centerHorizontally();
}
// Set horizontal position.
if (config.verticalPosition === 'top') {
positionStrategy.top('0');
}
else {
positionStrategy.bottom('0');
}
overlayConfig.positionStrategy = positionStrategy;
return this._overlay.create(overlayConfig);
}
/**
* Creates an injector to be used inside of a snack bar component.
* @param config Config that was used to create the snack bar.
* @param snackBarRef Reference to the snack bar.
*/
_createInjector(config, snackBarRef) {
const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
return Injector.create({
parent: userInjector || this._injector,
providers: [
{ provide: MatSnackBarRef, useValue: snackBarRef },
{ provide: MAT_SNACK_BAR_DATA, useValue: config.data },
],
});
}
}
_MatSnackBarBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: _MatSnackBarBase, deps: [{ token: i1$1.Overlay }, { token: i2$1.LiveAnnouncer }, { token: i0.Injector }, { token: i3$2.BreakpointObserver }, { token: _MatSnackBarBase, optional: true, skipSelf: true }, { token: MAT_SNACK_BAR_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Injectable });
_MatSnackBarBase.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: _MatSnackBarBase });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: _MatSnackBarBase, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i2$1.LiveAnnouncer }, { type: i0.Injector }, { type: i3$2.BreakpointObserver }, { type: _MatSnackBarBase, decorators: [{
type: Optional
}, {
type: SkipSelf
}] }, { type: MatSnackBarConfig, decorators: [{
type: Inject,
args: [MAT_SNACK_BAR_DEFAULT_OPTIONS]
}] }]; } });
/**
* Service to dispatch Material Design snack bar messages.
*/
class MatSnackBar extends _MatSnackBarBase {
constructor(overlay, live, injector, breakpointObserver, parentSnackBar, defaultConfig) {
super(overlay, live, injector, breakpointObserver, parentSnackBar, defaultConfig);
this.simpleSnackBarComponent = SimpleSnackBar;
this.snackBarContainerComponent = MatSnackBarContainer;
this.handsetCssClass = 'mat-mdc-snack-bar-handset';
}
}
MatSnackBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSnackBar, deps: [{ token: i1$1.Overlay }, { token: i2$1.LiveAnnouncer }, { token: i0.Injector }, { token: i3$2.BreakpointObserver }, { token: MatSnackBar, optional: true, skipSelf: true }, { token: MAT_SNACK_BAR_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Injectable });
MatSnackBar.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSnackBar, providedIn: MatSnackBarModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-rc.1", ngImport: i0, type: MatSnackBar, decorators: [{
type: Injectable,
args: [{ providedIn: MatSnackBarModule }]
}], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i2$1.LiveAnnouncer }, { type: i0.Injector }, { type: i3$2.BreakpointObserver }, { type: MatSnackBar, decorators: [{
type: Optional
}, {
type: SkipSelf
}] }, { type: MatSnackBarConfig, decorators: [{
type: Inject,
args: [MAT_SNACK_BAR_DEFAULT_OPTIONS]
}] }]; } });
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
/**
* Generated bundle index. Do not edit.
*/
export { MAT_SNACK_BAR_DATA, MAT_SNACK_BAR_DEFAULT_OPTIONS, MAT_SNACK_BAR_DEFAULT_OPTIONS_FACTORY, MatSnackBar, MatSnackBarAction, MatSnackBarActions, MatSnackBarConfig, MatSnackBarContainer, MatSnackBarLabel, MatSnackBarModule, MatSnackBarRef, SimpleSnackBar, _MatSnackBarBase, _MatSnackBarContainerBase, matSnackBarAnimations };
//# sourceMappingURL=snack-bar.mjs.map