@angular/material
Version:
Angular Material
872 lines (862 loc) • 48.9 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, Directive, inject, Component, ViewEncapsulation, ChangeDetectionStrategy, NgZone, ElementRef, ChangeDetectorRef, ANIMATION_MODULE_TYPE, afterRender, ViewChild, Injector, TemplateRef, Injectable, NgModule } from '@angular/core';
import { Subject, of } from 'rxjs';
import { M as MatButton, h as MatButtonModule } from './module-4627cbad.mjs';
import { DOCUMENT } from '@angular/common';
import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
import { _IdGenerator, LiveAnnouncer } from '@angular/cdk/a11y';
import { Platform } from '@angular/cdk/platform';
import { take, takeUntil } from 'rxjs/operators';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
import { M as MatCommonModule } from './common-module-5a9c16bb.mjs';
import './icon-button-701541b9.mjs';
import '@angular/cdk/private';
import './ripple-loader-64444b06.mjs';
import './ripple-33861831.mjs';
import '@angular/cdk/coercion';
import './structural-styles-afbfe518.mjs';
import './index-91512b69.mjs';
import '@angular/cdk/bidi';
/** 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 {
_overlayRef;
/** The instance of the component making up the content of the snack bar. */
instance;
/**
* The instance of the component making up the content of the snack bar.
* @docs-private
*/
containerInstance;
/** Subject for notifying the user that the snack bar has been dismissed. */
_afterDismissed = new Subject();
/** Subject for notifying the user that the snack bar has opened and appeared. */
_afterOpened = new Subject();
/** Subject for notifying the user that the snack bar action was called. */
_onAction = new Subject();
/**
* Timeout ID for the duration setTimeout call. Used to clear the timeout if the snackbar is
* dismissed before the duration passes.
*/
_durationTimeoutId;
/** Whether the snack bar was dismissed using the action button. */
_dismissedByAction = false;
constructor(containerInstance, _overlayRef) {
this._overlayRef = _overlayRef;
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;
}
}
/** 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 {
/** The politeness level for the MatAriaLiveAnnouncer announcement. */
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.
*/
announcementMessage = '';
/**
* The view container that serves as the parent for the snackbar for the purposes of dependency
* injection. Note: this does not affect where the snackbar is inserted in the DOM.
*/
viewContainerRef;
/** The length of time in milliseconds to wait before automatically dismissing the snack bar. */
duration = 0;
/** Extra CSS classes to be added to the snack bar container. */
panelClass;
/** Text layout direction for the snack bar. */
direction;
/** Data being injected into the child component. */
data = null;
/** The horizontal position to place the snack bar. */
horizontalPosition = 'center';
/** The vertical position to place the snack bar. */
verticalPosition = 'bottom';
}
/** Directive that should be applied to the text element to be rendered in the snack bar. */
class MatSnackBarLabel {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: MatSnackBarLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.0", type: MatSnackBarLabel, isStandalone: true, selector: "[matSnackBarLabel]", host: { classAttribute: "mat-mdc-snack-bar-label mdc-snackbar__label" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", 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 {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: MatSnackBarActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.0", type: MatSnackBarActions, isStandalone: true, selector: "[matSnackBarActions]", host: { classAttribute: "mat-mdc-snack-bar-actions mdc-snackbar__actions" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", 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 {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: MatSnackBarAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.0", type: MatSnackBarAction, isStandalone: true, selector: "[matSnackBarAction]", host: { classAttribute: "mat-mdc-snack-bar-action mdc-snackbar__action" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: MatSnackBarAction, decorators: [{
type: Directive,
args: [{
selector: `[matSnackBarAction]`,
host: {
'class': 'mat-mdc-snack-bar-action mdc-snackbar__action',
},
}]
}] });
class SimpleSnackBar {
snackBarRef = inject(MatSnackBarRef);
data = inject(MAT_SNACK_BAR_DATA);
constructor() { }
/** Performs the action on the snack bar. */
action() {
this.snackBarRef.dismissWithAction();
}
/** If the action button should be shown. */
get hasAction() {
return !!this.data.action;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: SimpleSnackBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: SimpleSnackBar, isStandalone: true, 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@if (hasAction) {\n <div matSnackBarActions>\n <button mat-button matSnackBarAction (click)=\"action()\">\n {{data.action}}\n </button>\n </div>\n}\n", styles: [".mat-mdc-simple-snack-bar{display:flex}"], dependencies: [{ kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", 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: "19.2.0", ngImport: i0, type: SimpleSnackBar, decorators: [{
type: Component,
args: [{ selector: 'simple-snack-bar', exportAs: 'matSnackBar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButton, MatSnackBarLabel, MatSnackBarActions, MatSnackBarAction], host: {
'class': 'mat-mdc-simple-snack-bar',
}, template: "<div matSnackBarLabel>\n {{data.message}}\n</div>\n\n@if (hasAction) {\n <div matSnackBarActions>\n <button mat-button matSnackBarAction (click)=\"action()\">\n {{data.action}}\n </button>\n </div>\n}\n", styles: [".mat-mdc-simple-snack-bar{display:flex}"] }]
}], ctorParameters: () => [] });
const ENTER_ANIMATION = '_mat-snack-bar-enter';
const EXIT_ANIMATION = '_mat-snack-bar-exit';
/**
* Internal component that wraps user-provided snack bar content.
* @docs-private
*/
class MatSnackBarContainer extends BasePortalOutlet {
_ngZone = inject(NgZone);
_elementRef = inject(ElementRef);
_changeDetectorRef = inject(ChangeDetectorRef);
_platform = inject(Platform);
_rendersRef;
_animationsDisabled = inject(ANIMATION_MODULE_TYPE, { optional: true }) === 'NoopAnimations';
snackBarConfig = inject(MatSnackBarConfig);
_document = inject(DOCUMENT);
_trackedModals = new Set();
_enterFallback;
_exitFallback;
_renders = new Subject();
/** The number of milliseconds to wait before announcing the snack bar's content. */
_announceDelay = 150;
/** The timeout for announcing the snack bar's content. */
_announceTimeoutId;
/** Whether the component has been destroyed. */
_destroyed = false;
/** The portal outlet inside of this container into which the snack bar content will be loaded. */
_portalOutlet;
/** Subject for notifying that the snack bar has announced to screen readers. */
_onAnnounce = new Subject();
/** Subject for notifying that the snack bar has exited from view. */
_onExit = new Subject();
/** Subject for notifying that the snack bar has finished entering the view. */
_onEnter = new Subject();
/** The state of the snack bar animations. */
_animationState = 'void';
/** aria-live value for the live region. */
_live;
/**
* Element that will have the `mdc-snackbar__label` class applied if the attached component
* or template does not have it. This ensures that the appropriate structure, typography, and
* color is applied to the attached view.
*/
_label;
/**
* Role of the live region. This is only for Firefox as there is a known issue where Firefox +
* JAWS does not read out aria-live message.
*/
_role;
/** Unique ID of the aria-live element. */
_liveElementId = inject(_IdGenerator).getId('mat-snack-bar-container-live-');
constructor() {
super();
const config = this.snackBarConfig;
// Use aria-live rather than a live role like 'alert' or 'status'
// because NVDA and JAWS have show inconsistent behavior with live roles.
if (config.politeness === 'assertive' && !config.announcementMessage) {
this._live = 'assertive';
}
else if (config.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';
}
}
// Note: ideally we'd just do an `afterNextRender` in the places where we need to delay
// something, however in some cases (TestBed teardown) the injector can be destroyed at an
// unexpected time, causing the `afterRender` to fail.
this._rendersRef = afterRender(() => this._renders.next(), { manualCleanup: true });
}
/** 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;
}
/**
* Attaches a DOM portal to the snack bar container.
* @deprecated To be turned into a method.
* @breaking-change 10.0.0
*/
attachDomPortal = (portal) => {
this._assertNotAttached();
const result = this._portalOutlet.attachDomPortal(portal);
this._afterPortalAttached();
return result;
};
/** Handle end of animations, updating the state of the snackbar. */
onAnimationEnd(animationName) {
if (animationName === EXIT_ANIMATION) {
this._completeExit();
}
else if (animationName === ENTER_ANIMATION) {
clearTimeout(this._enterFallback);
this._ngZone.run(() => {
this._onEnter.next();
this._onEnter.complete();
});
}
}
/** Begin animation of snack bar entrance into view. */
enter() {
if (!this._destroyed) {
this._animationState = 'visible';
// _animationState lives in host bindings and `detectChanges` does not refresh host bindings
// so we have to call `markForCheck` to ensure the host view is refreshed eventually.
this._changeDetectorRef.markForCheck();
this._changeDetectorRef.detectChanges();
this._screenReaderAnnounce();
if (this._animationsDisabled) {
this._renders.pipe(take(1)).subscribe(() => {
this._ngZone.run(() => queueMicrotask(() => this.onAnimationEnd(ENTER_ANIMATION)));
});
}
else {
clearTimeout(this._enterFallback);
this._enterFallback = setTimeout(() => {
// The snack bar will stay invisible if it fails to animate. Add a fallback class so it
// becomes visible. This can happen in some apps that do `* {animation: none !important}`.
this._elementRef.nativeElement.classList.add('mat-snack-bar-fallback-visible');
this.onAnimationEnd(ENTER_ANIMATION);
}, 200);
}
}
}
/** Begin animation of the snack bar exiting from view. */
exit() {
if (this._destroyed) {
return of(undefined);
}
// 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';
this._changeDetectorRef.markForCheck();
// 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);
if (this._animationsDisabled) {
this._renders.pipe(take(1)).subscribe(() => {
this._ngZone.run(() => queueMicrotask(() => this.onAnimationEnd(EXIT_ANIMATION)));
});
}
else {
clearTimeout(this._exitFallback);
this._exitFallback = setTimeout(() => this.onAnimationEnd(EXIT_ANIMATION), 200);
}
});
return this._onExit;
}
/** Makes sure the exit callbacks have been invoked when the element is destroyed. */
ngOnDestroy() {
this._destroyed = true;
this._clearFromModals();
this._completeExit();
this._renders.complete();
this._rendersRef.destroy();
}
_completeExit() {
clearTimeout(this._exitFallback);
queueMicrotask(() => {
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);
}
}
this._exposeToModals();
// 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}`));
}
/**
* Some browsers won't expose the accessibility node of the live element if there is an
* `aria-modal` and the live element is outside of it. This method works around the issue by
* pointing the `aria-owns` of all modals to the live element.
*/
_exposeToModals() {
// TODO(http://github.com/angular/components/issues/26853): consider de-duplicating this with the
// `LiveAnnouncer` and any other usages.
//
// Note that the selector here is limited to CDK overlays at the moment in order to reduce the
// section of the DOM we need to look through. This should cover all the cases we support, but
// the selector can be expanded if it turns out to be too narrow.
const id = this._liveElementId;
const modals = this._document.querySelectorAll('body > .cdk-overlay-container [aria-modal="true"]');
for (let i = 0; i < modals.length; i++) {
const modal = modals[i];
const ariaOwns = modal.getAttribute('aria-owns');
this._trackedModals.add(modal);
if (!ariaOwns) {
modal.setAttribute('aria-owns', id);
}
else if (ariaOwns.indexOf(id) === -1) {
modal.setAttribute('aria-owns', ariaOwns + ' ' + id);
}
}
}
/** Clears the references to the live element from any modals it was added to. */
_clearFromModals() {
this._trackedModals.forEach(modal => {
const ariaOwns = modal.getAttribute('aria-owns');
if (ariaOwns) {
const newValue = ariaOwns.replace(this._liveElementId, '').trim();
if (newValue.length > 0) {
modal.setAttribute('aria-owns', newValue);
}
else {
modal.removeAttribute('aria-owns');
}
}
});
this._trackedModals.clear();
}
/** 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) {
return;
}
this._ngZone.runOutsideAngular(() => {
this._announceTimeoutId = setTimeout(() => {
if (this._destroyed) {
return;
}
const element = this._elementRef.nativeElement;
const inertElement = element.querySelector('[aria-hidden]');
const liveElement = element.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);
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: MatSnackBarContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: MatSnackBarContainer, isStandalone: true, selector: "mat-snack-bar-container", host: { listeners: { "animationend": "onAnimationEnd($event.animationName)", "animationcancel": "onAnimationEnd($event.animationName)" }, properties: { "class.mat-snack-bar-container-enter": "_animationState === \"visible\"", "class.mat-snack-bar-container-exit": "_animationState === \"hidden\"", "class.mat-snack-bar-container-animations-enabled": "!_animationsDisabled" }, classAttribute: "mdc-snackbar mat-mdc-snack-bar-container" }, viewQueries: [{ propertyName: "_portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "_label", first: true, predicate: ["label"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mdc-snackbar__surface mat-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 />\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\" [attr.id]=\"_liveElementId\"></div>\n </div>\n</div>\n", styles: ["@keyframes _mat-snack-bar-enter{from{transform:scale(0.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes _mat-snack-bar-exit{from{opacity:1}to{opacity:0}}.mat-mdc-snack-bar-container{display:flex;align-items:center;justify-content:center;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0);margin:8px}.mat-mdc-snack-bar-handset .mat-mdc-snack-bar-container{width:100vw}.mat-snack-bar-container-animations-enabled{opacity:0}.mat-snack-bar-container-animations-enabled.mat-snack-bar-fallback-visible{opacity:1}.mat-snack-bar-container-animations-enabled.mat-snack-bar-container-enter{animation:_mat-snack-bar-enter 150ms cubic-bezier(0, 0, 0.2, 1) forwards}.mat-snack-bar-container-animations-enabled.mat-snack-bar-container-exit{animation:_mat-snack-bar-exit 75ms cubic-bezier(0.4, 0, 1, 1) forwards}.mat-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);display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;padding-left:0;padding-right:8px}[dir=rtl] .mat-mdc-snackbar-surface{padding-right:0;padding-left:8px}.mat-mdc-snack-bar-container .mat-mdc-snackbar-surface{min-width:344px;max-width:672px}.mat-mdc-snack-bar-handset .mat-mdc-snackbar-surface{width:100%;min-width:0}@media(forced-colors: active){.mat-mdc-snackbar-surface{outline:solid 1px}}.mat-mdc-snack-bar-container .mat-mdc-snackbar-surface{color:var(--mdc-snackbar-supporting-text-color, var(--mat-sys-inverse-on-surface));border-radius:var(--mdc-snackbar-container-shape, var(--mat-sys-corner-extra-small));background-color:var(--mdc-snackbar-container-color, var(--mat-sys-inverse-surface))}.mdc-snackbar__label{width:100%;flex-grow:1;box-sizing:border-box;margin:0;padding:14px 8px 14px 16px}[dir=rtl] .mdc-snackbar__label{padding-left:8px;padding-right:16px}.mat-mdc-snack-bar-container .mdc-snackbar__label{font-family:var(--mdc-snackbar-supporting-text-font, var(--mat-sys-body-medium-font));font-size:var(--mdc-snackbar-supporting-text-size, var(--mat-sys-body-medium-size));font-weight:var(--mdc-snackbar-supporting-text-weight, var(--mat-sys-body-medium-weight));line-height:var(--mdc-snackbar-supporting-text-line-height, var(--mat-sys-body-medium-line-height))}.mat-mdc-snack-bar-actions{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box}.mat-mdc-snack-bar-handset,.mat-mdc-snack-bar-container,.mat-mdc-snack-bar-label{flex:1 1 auto}.mat-mdc-snack-bar-container .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled).mat-unthemed{color:var(--mat-snack-bar-button-color, var(--mat-sys-inverse-primary))}.mat-mdc-snack-bar-container .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled){--mat-text-button-state-layer-color:currentColor;--mat-text-button-ripple-color:currentColor}.mat-mdc-snack-bar-container .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) .mat-ripple-element{opacity:.1}"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: MatSnackBarContainer, decorators: [{
type: Component,
args: [{ selector: 'mat-snack-bar-container', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, imports: [CdkPortalOutlet], host: {
'class': 'mdc-snackbar mat-mdc-snack-bar-container',
'[class.mat-snack-bar-container-enter]': '_animationState === "visible"',
'[class.mat-snack-bar-container-exit]': '_animationState === "hidden"',
'[class.mat-snack-bar-container-animations-enabled]': '!_animationsDisabled',
'(animationend)': 'onAnimationEnd($event.animationName)',
'(animationcancel)': 'onAnimationEnd($event.animationName)',
}, template: "<div class=\"mdc-snackbar__surface mat-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 />\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\" [attr.id]=\"_liveElementId\"></div>\n </div>\n</div>\n", styles: ["@keyframes _mat-snack-bar-enter{from{transform:scale(0.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes _mat-snack-bar-exit{from{opacity:1}to{opacity:0}}.mat-mdc-snack-bar-container{display:flex;align-items:center;justify-content:center;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0);margin:8px}.mat-mdc-snack-bar-handset .mat-mdc-snack-bar-container{width:100vw}.mat-snack-bar-container-animations-enabled{opacity:0}.mat-snack-bar-container-animations-enabled.mat-snack-bar-fallback-visible{opacity:1}.mat-snack-bar-container-animations-enabled.mat-snack-bar-container-enter{animation:_mat-snack-bar-enter 150ms cubic-bezier(0, 0, 0.2, 1) forwards}.mat-snack-bar-container-animations-enabled.mat-snack-bar-container-exit{animation:_mat-snack-bar-exit 75ms cubic-bezier(0.4, 0, 1, 1) forwards}.mat-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);display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;padding-left:0;padding-right:8px}[dir=rtl] .mat-mdc-snackbar-surface{padding-right:0;padding-left:8px}.mat-mdc-snack-bar-container .mat-mdc-snackbar-surface{min-width:344px;max-width:672px}.mat-mdc-snack-bar-handset .mat-mdc-snackbar-surface{width:100%;min-width:0}@media(forced-colors: active){.mat-mdc-snackbar-surface{outline:solid 1px}}.mat-mdc-snack-bar-container .mat-mdc-snackbar-surface{color:var(--mdc-snackbar-supporting-text-color, var(--mat-sys-inverse-on-surface));border-radius:var(--mdc-snackbar-container-shape, var(--mat-sys-corner-extra-small));background-color:var(--mdc-snackbar-container-color, var(--mat-sys-inverse-surface))}.mdc-snackbar__label{width:100%;flex-grow:1;box-sizing:border-box;margin:0;padding:14px 8px 14px 16px}[dir=rtl] .mdc-snackbar__label{padding-left:8px;padding-right:16px}.mat-mdc-snack-bar-container .mdc-snackbar__label{font-family:var(--mdc-snackbar-supporting-text-font, var(--mat-sys-body-medium-font));font-size:var(--mdc-snackbar-supporting-text-size, var(--mat-sys-body-medium-size));font-weight:var(--mdc-snackbar-supporting-text-weight, var(--mat-sys-body-medium-weight));line-height:var(--mdc-snackbar-supporting-text-line-height, var(--mat-sys-body-medium-line-height))}.mat-mdc-snack-bar-actions{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box}.mat-mdc-snack-bar-handset,.mat-mdc-snack-bar-container,.mat-mdc-snack-bar-label{flex:1 1 auto}.mat-mdc-snack-bar-container .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled).mat-unthemed{color:var(--mat-snack-bar-button-color, var(--mat-sys-inverse-primary))}.mat-mdc-snack-bar-container .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled){--mat-text-button-state-layer-color:currentColor;--mat-text-button-ripple-color:currentColor}.mat-mdc-snack-bar-container .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) .mat-ripple-element{opacity:.1}"] }]
}], ctorParameters: () => [], propDecorators: { _portalOutlet: [{
type: ViewChild,
args: [CdkPortalOutlet, { static: true }]
}], _label: [{
type: ViewChild,
args: ['label', { static: true }]
}] } });
/**
* @docs-private
* @deprecated No longer used, will be removed.
* @breaking-change 21.0.0
*/
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,
});
/**
* Service to dispatch Material Design snack bar messages.
*/
class MatSnackBar {
_overlay = inject(Overlay);
_live = inject(LiveAnnouncer);
_injector = inject(Injector);
_breakpointObserver = inject(BreakpointObserver);
_parentSnackBar = inject(MatSnackBar, { optional: true, skipSelf: true });
_defaultConfig = inject(MAT_SNACK_BAR_DEFAULT_OPTIONS);
/**
* 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`.
*/
_snackBarRefAtThisLevel = null;
/** The component that should be rendered as the snack bar's simple component. */
simpleSnackBarComponent = SimpleSnackBar;
/** The container component that attaches the provided template or component. */
snackBarContainerComponent = MatSnackBarContainer;
/** The CSS class to apply for handset mode. */
handsetCssClass = 'mat-mdc-snack-bar-handset';
/** 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;
}
}
constructor() { }
/**
* 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 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));
}
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();
}
}
/**
* 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 },
],
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: MatSnackBar, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: MatSnackBar, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: MatSnackBar, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}], ctorParameters: () => [] });
const DIRECTIVES = [MatSnackBarContainer, MatSnackBarLabel, MatSnackBarActions, MatSnackBarAction];
class MatSnackBarModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: MatSnackBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.0", ngImport: i0, type: MatSnackBarModule, imports: [OverlayModule,
PortalModule,
MatButtonModule,
MatCommonModule,
SimpleSnackBar, MatSnackBarContainer, MatSnackBarLabel, MatSnackBarActions, MatSnackBarAction], exports: [MatCommonModule, MatSnackBarContainer, MatSnackBarLabel, MatSnackBarActions, MatSnackBarAction] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: MatSnackBarModule, providers: [MatSnackBar], imports: [OverlayModule,
PortalModule,
MatButtonModule,
MatCommonModule,
SimpleSnackBar, MatCommonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: MatSnackBarModule, decorators: [{
type: NgModule,
args: [{
imports: [
OverlayModule,
PortalModule,
MatButtonModule,
MatCommonModule,
SimpleSnackBar,
...DIRECTIVES,
],
exports: [MatCommonModule, ...DIRECTIVES],
providers: [MatSnackBar],
}]
}] });
/**
* Animations used by the Material snack bar.
* @docs-private
* @deprecated No longer used, will be removed.
* @breaking-change 21.0.0
*/
const matSnackBarAnimations = {
// Represents
// 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,
// }),
// ),
// ),
// ])
/** Animation that shows and hides a snack bar. */
snackBarState: {
type: 7,
name: 'state',
'definitions': [
{
type: 0,
name: 'void, hidden',
styles: { type: 6, styles: { transform: 'scale(0.8)', opacity: 0 }, offset: null },
},
{
type: 0,
name: 'visible',
styles: { type: 6, styles: { transform: 'scale(1)', opacity: 1 }, offset: null },
},
{
type: 1,
expr: '* => visible',
animation: { type: 4, styles: null, timings: '150ms cubic-bezier(0, 0, 0.2, 1)' },
options: null,
},
{
type: 1,
expr: '* => void, * => hidden',
animation: {
type: 4,
styles: { type: 6, styles: { opacity: 0 }, offset: null },
timings: '75ms cubic-bezier(0.4, 0.0, 1, 1)',
},
options: null,
},
],
options: {},
},
};
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, matSnackBarAnimations };
//# sourceMappingURL=snack-bar.mjs.map