@angular/material
Version:
Angular Material
821 lines (812 loc) • 34.2 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, Directive, inject, ChangeDetectionStrategy, ViewEncapsulation, Component, NgZone, ElementRef, ChangeDetectorRef, DOCUMENT, Injector, afterNextRender, ViewChild, TemplateRef, Injectable, NgModule } from '@angular/core';
import { _IdGenerator, LiveAnnouncer } from '@angular/cdk/a11y';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { OverlayConfig, createGlobalPositionStrategy, createOverlayRef, OverlayModule } from '@angular/cdk/overlay';
import { Subject, of } from 'rxjs';
import { MatButton, MatButtonModule } from './button.mjs';
import { Platform } from '@angular/cdk/platform';
import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
import { _animationsDisabled } from './_animation-chunk.mjs';
import { takeUntil } from 'rxjs/operators';
import { BidiModule } from '@angular/cdk/bidi';
import './_icon-button-chunk.mjs';
import '@angular/cdk/private';
import './_ripple-loader-chunk.mjs';
import './_ripple-chunk.mjs';
import '@angular/cdk/coercion';
import './_structural-styles-chunk.mjs';
import './_ripple-module-chunk.mjs';
const MAX_TIMEOUT = Math.pow(2, 31) - 1;
class MatSnackBarRef {
_overlayRef;
instance;
containerInstance;
_afterDismissed = new Subject();
_afterOpened = new Subject();
_onAction = new Subject();
_durationTimeoutId;
_dismissedByAction = false;
constructor(containerInstance, _overlayRef) {
this._overlayRef = _overlayRef;
this.containerInstance = containerInstance;
containerInstance._onExit.subscribe(() => this._finishDismiss());
}
dismiss() {
if (!this._afterDismissed.closed) {
this.containerInstance.exit();
}
clearTimeout(this._durationTimeoutId);
}
dismissWithAction() {
if (!this._onAction.closed) {
this._dismissedByAction = true;
this._onAction.next();
this._onAction.complete();
this.dismiss();
}
clearTimeout(this._durationTimeoutId);
}
closeWithAction() {
this.dismissWithAction();
}
_dismissAfter(duration) {
this._durationTimeoutId = setTimeout(() => this.dismiss(), Math.min(duration, MAX_TIMEOUT));
}
_open() {
if (!this._afterOpened.closed) {
this._afterOpened.next();
this._afterOpened.complete();
}
}
_finishDismiss() {
this._overlayRef.dispose();
if (!this._onAction.closed) {
this._onAction.complete();
}
this._afterDismissed.next({
dismissedByAction: this._dismissedByAction
});
this._afterDismissed.complete();
this._dismissedByAction = false;
}
afterDismissed() {
return this._afterDismissed;
}
afterOpened() {
return this.containerInstance._onEnter;
}
onAction() {
return this._onAction;
}
}
const MAT_SNACK_BAR_DATA = new InjectionToken('MatSnackBarData');
class MatSnackBarConfig {
politeness = 'polite';
announcementMessage = '';
viewContainerRef;
duration = 0;
panelClass;
direction;
data = null;
horizontalPosition = 'center';
verticalPosition = 'bottom';
}
class MatSnackBarLabel {
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatSnackBarLabel,
deps: [],
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "14.0.0",
version: "22.0.0-next.5",
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: "22.0.0-next.5",
ngImport: i0,
type: MatSnackBarLabel,
decorators: [{
type: Directive,
args: [{
selector: `[matSnackBarLabel]`,
host: {
'class': 'mat-mdc-snack-bar-label mdc-snackbar__label'
}
}]
}]
});
class MatSnackBarActions {
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatSnackBarActions,
deps: [],
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "14.0.0",
version: "22.0.0-next.5",
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: "22.0.0-next.5",
ngImport: i0,
type: MatSnackBarActions,
decorators: [{
type: Directive,
args: [{
selector: `[matSnackBarActions]`,
host: {
'class': 'mat-mdc-snack-bar-actions mdc-snackbar__actions'
}
}]
}]
});
class MatSnackBarAction {
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatSnackBarAction,
deps: [],
target: i0.ɵɵFactoryTarget.Directive
});
static ɵdir = i0.ɵɵngDeclareDirective({
minVersion: "14.0.0",
version: "22.0.0-next.5",
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: "22.0.0-next.5",
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() {}
action() {
this.snackBarRef.dismissWithAction();
}
get hasAction() {
return !!this.data.action;
}
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: SimpleSnackBar,
deps: [],
target: i0.ɵɵFactoryTarget.Component
});
static ɵcmp = i0.ɵɵngDeclareComponent({
minVersion: "17.0.0",
version: "22.0.0-next.5",
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 matButton matSnackBarAction (click)=\"action()\">\n {{data.action}}\n </button>\n </div>\n}\n",
styles: [".mat-mdc-simple-snack-bar {\n display: flex;\n}\n.mat-mdc-simple-snack-bar .mat-mdc-snack-bar-label {\n max-height: 50vh;\n overflow: auto;\n}\n"],
dependencies: [{
kind: "component",
type: MatButton,
selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ",
inputs: ["matButton"],
exportAs: ["matButton", "matAnchor"]
}, {
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: "22.0.0-next.5",
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 matButton matSnackBarAction (click)=\"action()\">\n {{data.action}}\n </button>\n </div>\n}\n",
styles: [".mat-mdc-simple-snack-bar {\n display: flex;\n}\n.mat-mdc-simple-snack-bar .mat-mdc-snack-bar-label {\n max-height: 50vh;\n overflow: auto;\n}\n"]
}]
}],
ctorParameters: () => []
});
const ENTER_ANIMATION = '_mat-snack-bar-enter';
const EXIT_ANIMATION = '_mat-snack-bar-exit';
class MatSnackBarContainer extends BasePortalOutlet {
_ngZone = inject(NgZone);
_elementRef = inject(ElementRef);
_changeDetectorRef = inject(ChangeDetectorRef);
_platform = inject(Platform);
_animationsDisabled = _animationsDisabled();
snackBarConfig = inject(MatSnackBarConfig);
_document = inject(DOCUMENT);
_trackedModals = new Set();
_enterFallback;
_exitFallback;
_injector = inject(Injector);
_announceDelay = 150;
_announceTimeoutId;
_destroyed = false;
_portalOutlet;
_onAnnounce = new Subject();
_onExit = new Subject();
_onEnter = new Subject();
_animationState = 'void';
_live;
_label;
_role;
_liveElementId = inject(_IdGenerator).getId('mat-snack-bar-container-live-');
constructor() {
super();
const config = this.snackBarConfig;
if (config.politeness === 'assertive' && !config.announcementMessage) {
this._live = 'assertive';
} else if (config.politeness === 'off') {
this._live = 'off';
} else {
this._live = 'polite';
}
if (this._platform.FIREFOX) {
if (this._live === 'polite') {
this._role = 'status';
}
if (this._live === 'assertive') {
this._role = 'alert';
}
}
}
attachComponentPortal(portal) {
this._assertNotAttached();
const result = this._portalOutlet.attachComponentPortal(portal);
this._afterPortalAttached();
return result;
}
attachTemplatePortal(portal) {
this._assertNotAttached();
const result = this._portalOutlet.attachTemplatePortal(portal);
this._afterPortalAttached();
return result;
}
attachDomPortal = portal => {
this._assertNotAttached();
const result = this._portalOutlet.attachDomPortal(portal);
this._afterPortalAttached();
return result;
};
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();
});
}
}
enter() {
if (!this._destroyed) {
this._animationState = 'visible';
this._changeDetectorRef.markForCheck();
this._changeDetectorRef.detectChanges();
this._screenReaderAnnounce();
if (this._animationsDisabled) {
afterNextRender(() => {
this._ngZone.run(() => queueMicrotask(() => this.onAnimationEnd(ENTER_ANIMATION)));
}, {
injector: this._injector
});
} else {
clearTimeout(this._enterFallback);
this._enterFallback = setTimeout(() => {
this._elementRef.nativeElement.classList.add('mat-snack-bar-fallback-visible');
this.onAnimationEnd(ENTER_ANIMATION);
}, 200);
}
}
}
exit() {
if (this._destroyed) {
return of(undefined);
}
this._ngZone.run(() => {
this._animationState = 'hidden';
this._changeDetectorRef.markForCheck();
this._elementRef.nativeElement.setAttribute('mat-exit', '');
clearTimeout(this._announceTimeoutId);
if (this._animationsDisabled) {
afterNextRender(() => {
this._ngZone.run(() => queueMicrotask(() => this.onAnimationEnd(EXIT_ANIMATION)));
}, {
injector: this._injector
});
} else {
clearTimeout(this._exitFallback);
this._exitFallback = setTimeout(() => this.onAnimationEnd(EXIT_ANIMATION), 200);
}
});
return this._onExit;
}
ngOnDestroy() {
this._destroyed = true;
this._clearFromModals();
this._completeExit();
}
_completeExit() {
clearTimeout(this._exitFallback);
queueMicrotask(() => {
this._onExit.next();
this._onExit.complete();
});
}
_afterPortalAttached() {
const element = this._elementRef.nativeElement;
const panelClasses = this.snackBarConfig.panelClass;
if (panelClasses) {
if (Array.isArray(panelClasses)) {
panelClasses.forEach(cssClass => element.classList.add(cssClass));
} else {
element.classList.add(panelClasses);
}
}
this._exposeToModals();
const label = this._label.nativeElement;
const labelClass = 'mdc-snackbar__label';
label.classList.toggle(labelClass, !label.querySelector(`.${labelClass}`));
}
_exposeToModals() {
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);
}
}
}
_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();
}
_assertNotAttached() {
if (this._portalOutlet.hasAttached() && (typeof ngDevMode === 'undefined' || ngDevMode)) {
throw Error('Attempting to attach snack bar content after content is already attached');
}
}
_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) {
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: "22.0.0-next.5",
ngImport: i0,
type: MatSnackBarContainer,
deps: [],
target: i0.ɵɵFactoryTarget.Component
});
static ɵcmp = i0.ɵɵngDeclareComponent({
minVersion: "14.0.0",
version: "22.0.0-next.5",
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 {\n from {\n transform: scale(0.8);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n@keyframes _mat-snack-bar-exit {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n.mat-mdc-snack-bar-container {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n margin: 8px;\n}\n.mat-mdc-snack-bar-handset .mat-mdc-snack-bar-container {\n width: 100vw;\n}\n\n.mat-snack-bar-container-animations-enabled {\n opacity: 0;\n}\n.mat-snack-bar-container-animations-enabled.mat-snack-bar-fallback-visible {\n opacity: 1;\n}\n.mat-snack-bar-container-animations-enabled.mat-snack-bar-container-enter {\n animation: _mat-snack-bar-enter 150ms cubic-bezier(0, 0, 0.2, 1) forwards;\n}\n.mat-snack-bar-container-animations-enabled.mat-snack-bar-container-exit {\n animation: _mat-snack-bar-exit 75ms cubic-bezier(0.4, 0, 1, 1) forwards;\n}\n\n.mat-mdc-snackbar-surface {\n 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);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n box-sizing: border-box;\n padding-left: 0;\n padding-right: 8px;\n}\n[dir=rtl] .mat-mdc-snackbar-surface {\n padding-right: 0;\n padding-left: 8px;\n}\n.mat-mdc-snack-bar-container .mat-mdc-snackbar-surface {\n min-width: 344px;\n max-width: 672px;\n}\n.mat-mdc-snack-bar-handset .mat-mdc-snackbar-surface {\n width: 100%;\n min-width: 0;\n}\n@media (forced-colors: active) {\n .mat-mdc-snackbar-surface {\n outline: solid 1px;\n }\n}\n.mat-mdc-snack-bar-container .mat-mdc-snackbar-surface {\n color: var(--mat-snack-bar-supporting-text-color, var(--mat-sys-inverse-on-surface));\n border-radius: var(--mat-snack-bar-container-shape, var(--mat-sys-corner-extra-small));\n background-color: var(--mat-snack-bar-container-color, var(--mat-sys-inverse-surface));\n}\n\n.mdc-snackbar__label {\n width: 100%;\n flex-grow: 1;\n box-sizing: border-box;\n margin: 0;\n padding: 14px 8px 14px 16px;\n}\n[dir=rtl] .mdc-snackbar__label {\n padding-left: 8px;\n padding-right: 16px;\n}\n.mat-mdc-snack-bar-container .mdc-snackbar__label {\n font-family: var(--mat-snack-bar-supporting-text-font, var(--mat-sys-body-medium-font));\n font-size: var(--mat-snack-bar-supporting-text-size, var(--mat-sys-body-medium-size));\n font-weight: var(--mat-snack-bar-supporting-text-weight, var(--mat-sys-body-medium-weight));\n line-height: var(--mat-snack-bar-supporting-text-line-height, var(--mat-sys-body-medium-line-height));\n}\n\n.mat-mdc-snack-bar-actions {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n box-sizing: border-box;\n}\n\n.mat-mdc-snack-bar-handset,\n.mat-mdc-snack-bar-container,\n.mat-mdc-snack-bar-label {\n flex: 1 1 auto;\n}\n\n.mat-mdc-snack-bar-container .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled).mat-unthemed {\n color: var(--mat-snack-bar-button-color, var(--mat-sys-inverse-primary));\n}\n.mat-mdc-snack-bar-container .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) {\n --mat-button-text-state-layer-color: currentColor;\n --mat-button-text-ripple-color: currentColor;\n}\n.mat-mdc-snack-bar-container .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) .mat-ripple-element {\n opacity: 0.1;\n}\n"],
dependencies: [{
kind: "directive",
type: CdkPortalOutlet,
selector: "[cdkPortalOutlet]",
inputs: ["cdkPortalOutlet"],
outputs: ["attached"],
exportAs: ["cdkPortalOutlet"]
}],
changeDetection: i0.ChangeDetectionStrategy.Eager,
encapsulation: i0.ViewEncapsulation.None
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
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 {\n from {\n transform: scale(0.8);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n@keyframes _mat-snack-bar-exit {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n.mat-mdc-snack-bar-container {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n margin: 8px;\n}\n.mat-mdc-snack-bar-handset .mat-mdc-snack-bar-container {\n width: 100vw;\n}\n\n.mat-snack-bar-container-animations-enabled {\n opacity: 0;\n}\n.mat-snack-bar-container-animations-enabled.mat-snack-bar-fallback-visible {\n opacity: 1;\n}\n.mat-snack-bar-container-animations-enabled.mat-snack-bar-container-enter {\n animation: _mat-snack-bar-enter 150ms cubic-bezier(0, 0, 0.2, 1) forwards;\n}\n.mat-snack-bar-container-animations-enabled.mat-snack-bar-container-exit {\n animation: _mat-snack-bar-exit 75ms cubic-bezier(0.4, 0, 1, 1) forwards;\n}\n\n.mat-mdc-snackbar-surface {\n 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);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n box-sizing: border-box;\n padding-left: 0;\n padding-right: 8px;\n}\n[dir=rtl] .mat-mdc-snackbar-surface {\n padding-right: 0;\n padding-left: 8px;\n}\n.mat-mdc-snack-bar-container .mat-mdc-snackbar-surface {\n min-width: 344px;\n max-width: 672px;\n}\n.mat-mdc-snack-bar-handset .mat-mdc-snackbar-surface {\n width: 100%;\n min-width: 0;\n}\n@media (forced-colors: active) {\n .mat-mdc-snackbar-surface {\n outline: solid 1px;\n }\n}\n.mat-mdc-snack-bar-container .mat-mdc-snackbar-surface {\n color: var(--mat-snack-bar-supporting-text-color, var(--mat-sys-inverse-on-surface));\n border-radius: var(--mat-snack-bar-container-shape, var(--mat-sys-corner-extra-small));\n background-color: var(--mat-snack-bar-container-color, var(--mat-sys-inverse-surface));\n}\n\n.mdc-snackbar__label {\n width: 100%;\n flex-grow: 1;\n box-sizing: border-box;\n margin: 0;\n padding: 14px 8px 14px 16px;\n}\n[dir=rtl] .mdc-snackbar__label {\n padding-left: 8px;\n padding-right: 16px;\n}\n.mat-mdc-snack-bar-container .mdc-snackbar__label {\n font-family: var(--mat-snack-bar-supporting-text-font, var(--mat-sys-body-medium-font));\n font-size: var(--mat-snack-bar-supporting-text-size, var(--mat-sys-body-medium-size));\n font-weight: var(--mat-snack-bar-supporting-text-weight, var(--mat-sys-body-medium-weight));\n line-height: var(--mat-snack-bar-supporting-text-line-height, var(--mat-sys-body-medium-line-height));\n}\n\n.mat-mdc-snack-bar-actions {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n box-sizing: border-box;\n}\n\n.mat-mdc-snack-bar-handset,\n.mat-mdc-snack-bar-container,\n.mat-mdc-snack-bar-label {\n flex: 1 1 auto;\n}\n\n.mat-mdc-snack-bar-container .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled).mat-unthemed {\n color: var(--mat-snack-bar-button-color, var(--mat-sys-inverse-primary));\n}\n.mat-mdc-snack-bar-container .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) {\n --mat-button-text-state-layer-color: currentColor;\n --mat-button-text-ripple-color: currentColor;\n}\n.mat-mdc-snack-bar-container .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) .mat-ripple-element {\n opacity: 0.1;\n}\n"]
}]
}],
ctorParameters: () => [],
propDecorators: {
_portalOutlet: [{
type: ViewChild,
args: [CdkPortalOutlet, {
static: true
}]
}],
_label: [{
type: ViewChild,
args: ['label', {
static: true
}]
}]
}
});
const MAT_SNACK_BAR_DEFAULT_OPTIONS = new InjectionToken('mat-snack-bar-default-options', {
providedIn: 'root',
factory: () => new MatSnackBarConfig()
});
class MatSnackBar {
_live = inject(LiveAnnouncer);
_injector = inject(Injector);
_breakpointObserver = inject(BreakpointObserver);
_parentSnackBar = inject(MatSnackBar, {
optional: true,
skipSelf: true
});
_defaultConfig = inject(MAT_SNACK_BAR_DEFAULT_OPTIONS);
_animationsDisabled = _animationsDisabled();
_snackBarRefAtThisLevel = null;
simpleSnackBarComponent = SimpleSnackBar;
snackBarContainerComponent = MatSnackBarContainer;
handsetCssClass = 'mat-mdc-snack-bar-handset';
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() {}
openFromComponent(component, config) {
return this._attach(component, config);
}
openFromTemplate(template, config) {
return this._attach(template, config);
}
open(message, action = '', config) {
const _config = {
...this._defaultConfig,
...config
};
_config.data = {
message,
action
};
if (_config.announcementMessage === message) {
_config.announcementMessage = undefined;
}
return this.openFromComponent(this.simpleSnackBarComponent, _config);
}
dismiss() {
if (this._openedSnackBarRef) {
this._openedSnackBarRef.dismiss();
}
}
ngOnDestroy() {
if (this._snackBarRefAtThisLevel) {
this._snackBarRefAtThisLevel.dismiss();
}
}
_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;
}
_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);
snackBarRef.instance = contentRef.instance;
}
this._breakpointObserver.observe(Breakpoints.HandsetPortrait).pipe(takeUntil(overlayRef.detachments())).subscribe(state => {
overlayRef.overlayElement.classList.toggle(this.handsetCssClass, state.matches);
});
if (config.announcementMessage) {
container._onAnnounce.subscribe(() => {
this._live.announce(config.announcementMessage, config.politeness);
});
}
this._animateSnackBar(snackBarRef, config);
this._openedSnackBarRef = snackBarRef;
return this._openedSnackBarRef;
}
_animateSnackBar(snackBarRef, config) {
snackBarRef.afterDismissed().subscribe(() => {
if (this._openedSnackBarRef == snackBarRef) {
this._openedSnackBarRef = null;
}
if (config.announcementMessage) {
this._live.clear();
}
});
if (config.duration && config.duration > 0) {
snackBarRef.afterOpened().subscribe(() => snackBarRef._dismissAfter(config.duration));
}
if (this._openedSnackBarRef) {
this._openedSnackBarRef.afterDismissed().subscribe(() => {
snackBarRef.containerInstance.enter();
});
this._openedSnackBarRef.dismiss();
} else {
snackBarRef.containerInstance.enter();
}
}
_createOverlay(config) {
const overlayConfig = new OverlayConfig();
overlayConfig.direction = config.direction;
const positionStrategy = createGlobalPositionStrategy(this._injector);
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();
}
if (config.verticalPosition === 'top') {
positionStrategy.top('0');
} else {
positionStrategy.bottom('0');
}
overlayConfig.positionStrategy = positionStrategy;
overlayConfig.disableAnimations = this._animationsDisabled;
return createOverlayRef(this._injector, overlayConfig);
}
_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: "22.0.0-next.5",
ngImport: i0,
type: MatSnackBar,
deps: [],
target: i0.ɵɵFactoryTarget.Injectable
});
static ɵprov = i0.ɵɵngDeclareInjectable({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatSnackBar,
providedIn: 'root'
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
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: "22.0.0-next.5",
ngImport: i0,
type: MatSnackBarModule,
deps: [],
target: i0.ɵɵFactoryTarget.NgModule
});
static ɵmod = i0.ɵɵngDeclareNgModule({
minVersion: "14.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatSnackBarModule,
imports: [OverlayModule, PortalModule, MatButtonModule, SimpleSnackBar, MatSnackBarContainer, MatSnackBarLabel, MatSnackBarActions, MatSnackBarAction],
exports: [BidiModule, MatSnackBarContainer, MatSnackBarLabel, MatSnackBarActions, MatSnackBarAction]
});
static ɵinj = i0.ɵɵngDeclareInjector({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatSnackBarModule,
providers: [MatSnackBar],
imports: [OverlayModule, PortalModule, MatButtonModule, SimpleSnackBar, BidiModule]
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.0.0-next.5",
ngImport: i0,
type: MatSnackBarModule,
decorators: [{
type: NgModule,
args: [{
imports: [OverlayModule, PortalModule, MatButtonModule, SimpleSnackBar, ...DIRECTIVES],
exports: [BidiModule, ...DIRECTIVES],
providers: [MatSnackBar]
}]
}]
});
export { MAT_SNACK_BAR_DATA, MAT_SNACK_BAR_DEFAULT_OPTIONS, MatSnackBar, MatSnackBarAction, MatSnackBarActions, MatSnackBarConfig, MatSnackBarContainer, MatSnackBarLabel, MatSnackBarModule, MatSnackBarRef, SimpleSnackBar };
//# sourceMappingURL=snack-bar.mjs.map