@daffodil/design 0.67.0 → 0.68.1

package/fesm2022/daffodil-design-toast.mjs

@@ -0,0 +1,625 @@
+import * as i1 from '@angular/cdk/layout';
+import * as i0 from '@angular/core';
+import { InjectionToken, Injectable, Inject, Directive, HostBinding, Component, ViewEncapsulation, ChangeDetectionStrategy, ContentChild, Input, HostListener, EventEmitter, Output, NgModule, Optional, SkipSelf } from '@angular/core';
+import * as i2 from '@daffodil/design';
+import { DaffBreakpoints, daffArticleEncapsulatedMixin, daffStatusMixin, DaffPrefixDirective, DaffPrefixSuffixModule } from '@daffodil/design';
+import * as i1$2 from '@angular/cdk/overlay';
+import { OverlayModule, GlobalPositionStrategy } from '@angular/cdk/overlay';
+import { PortalModule, ComponentPortal } from '@angular/cdk/portal';
+import * as i2$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i4 from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import * as i3 from '@daffodil/design/button';
+import { DaffButtonModule } from '@daffodil/design/button';
+import { trigger, transition, style, animate } from '@angular/animations';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import * as i1$1 from '@angular/cdk/a11y';
+import { merge, of, EMPTY } from 'rxjs';
+import { filter, map, tap, delay, take } from 'rxjs/operators';
+
+;
+;
+const daffToastDefaultOptions = {
+    position: {
+        vertical: 'top',
+        horizontal: 'right',
+    },
+    useParent: true,
+};
+const DAFF_TOAST_OPTIONS = new InjectionToken('DAFF_TOAST_OPTIONS', { providedIn: 'root', factory: () => daffToastDefaultOptions });
+const provideDaffToastOptions = (options) => ({ provide: DAFF_TOAST_OPTIONS, useValue: {
+        ...daffToastDefaultOptions,
+        ...options,
+    } });
+
+class DaffToastPositionService {
+    constructor(options, mediaQuery) {
+        this.options = options;
+        this.mediaQuery = mediaQuery;
+        this._config = options.position;
+    }
+    get config() {
+        return this.mediaQuery.isMatched(DaffBreakpoints.MOBILE)
+            ? this._position ?? this._config
+            : { vertical: 'bottom', horizontal: 'center' };
+    }
+    set config(val) {
+        this._config = val;
+    }
+    setPosition(position) {
+        this._position = position;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffToastPositionService, deps: [{ token: DAFF_TOAST_OPTIONS }, { token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffToastPositionService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffToastPositionService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DAFF_TOAST_OPTIONS]
+                }] }, { type: i1.BreakpointObserver }] });
+
+const daffToastChangesFocus = (toast) => toast.actions?.length > 0;
+
+class DaffToastActionsDirective {
+    constructor() {
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffToastActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: DaffToastActionsDirective, selector: "[daffToastActions]", host: { properties: { "class.daff-toast__actions": "this.class" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffToastActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffToastActions]',
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-toast__actions']
+            }] } });
+
+/**
+ * An _elementRef is needed for the core mixins
+ */
+class DaffToastBase {
+    constructor(_elementRef, _renderer) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+    }
+}
+const _daffToastBase = daffArticleEncapsulatedMixin(daffStatusMixin(DaffToastBase));
+/**
+ * DaffToastComponent provides a way to display and
+ * communicate information for user actions or system updates.
+ */
+class DaffToastComponent extends _daffToastBase {
+    /**
+     * @docs-private
+     */
+    onEscape() {
+        this.toast.dismiss();
+    }
+    constructor(elementRef, renderer, _focusTrapFactory, _focusStack) {
+        super(elementRef, renderer);
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this._focusTrapFactory = _focusTrapFactory;
+        this._focusStack = _focusStack;
+        /** @docs-private */
+        this.class = true;
+        /** @docs-private */
+        this.role = 'status';
+    }
+    ngAfterContentInit() {
+        if (daffToastChangesFocus(this.toast)) {
+            this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
+        }
+    }
+    ngAfterViewInit() {
+        if (daffToastChangesFocus(this.toast)) {
+            this._focusStack.push();
+            this._focusTrap.focusFirstTabbableElementWhenReady();
+        }
+    }
+    ngOnDestroy() {
+        if (daffToastChangesFocus(this.toast)) {
+            this._focusTrap.destroy();
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffToastComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.ConfigurableFocusTrapFactory }, { token: i2.DaffFocusStackService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DaffToastComponent, selector: "daff-toast", inputs: { status: "status", toast: "toast" }, host: { listeners: { "keydown.escape": "onEscape()" }, properties: { "class.daff-toast": "this.class", "attr.role": "this.role" } }, queries: [{ propertyName: "_actions", first: true, predicate: DaffToastActionsDirective, descendants: true }, { propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"_prefix\">\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n</ng-container>\n<div class=\"daff-toast__details\">\n  <div class=\"daff-toast__content\">\n    <ng-content select=\"[daffToastTitle]\"></ng-content>\n    <ng-content select=\"[daffToastMessage]\"></ng-content>\n  </div>\n  <ng-content select=\"[daffToastActions]\"></ng-content>\n</div>\n<ng-content></ng-content>\n", styles: [".daff-toast{display:flex;border-radius:.25rem;font-size:1rem;line-height:1.5rem;position:relative;min-width:15rem;max-width:90vw}@media (min-width: 480px){.daff-toast{max-width:22rem}}.daff-toast+div+.daff-toast,.daff-toast+div+div+.daff-toast,.daff-toast+.daff-toast{margin-top:.75rem}.daff-toast:before{content:\"\";border-radius:.25rem 0 0 .25rem;position:absolute;height:100%;left:0;top:0;width:.25rem}.daff-toast .daff-prefix{padding:1rem 0 1rem 1rem}.daff-toast__close-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;appearance:none;background:none;border:none;color:currentColor;margin:0;min-height:3rem;height:3rem;min-width:3rem;width:3rem}.daff-toast__details{display:block;font-size:1rem;line-height:1.5rem;width:100%}.daff-toast__content{display:flex;flex-direction:column;gap:.25rem;padding:1rem}.daff-toast__title{font-weight:600}.daff-toast__message{font-weight:400;line-height:1.25rem}.daff-toast__actions{display:flex;align-items:center;gap:.5rem;min-height:3rem;padding:0 1rem 1rem}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-toast', inputs: ['status'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"_prefix\">\n  <ng-content select=\"[daffPrefix]\"></ng-content>\n</ng-container>\n<div class=\"daff-toast__details\">\n  <div class=\"daff-toast__content\">\n    <ng-content select=\"[daffToastTitle]\"></ng-content>\n    <ng-content select=\"[daffToastMessage]\"></ng-content>\n  </div>\n  <ng-content select=\"[daffToastActions]\"></ng-content>\n</div>\n<ng-content></ng-content>\n", styles: [".daff-toast{display:flex;border-radius:.25rem;font-size:1rem;line-height:1.5rem;position:relative;min-width:15rem;max-width:90vw}@media (min-width: 480px){.daff-toast{max-width:22rem}}.daff-toast+div+.daff-toast,.daff-toast+div+div+.daff-toast,.daff-toast+.daff-toast{margin-top:.75rem}.daff-toast:before{content:\"\";border-radius:.25rem 0 0 .25rem;position:absolute;height:100%;left:0;top:0;width:.25rem}.daff-toast .daff-prefix{padding:1rem 0 1rem 1rem}.daff-toast__close-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;appearance:none;background:none;border:none;color:currentColor;margin:0;min-height:3rem;height:3rem;min-width:3rem;width:3rem}.daff-toast__details{display:block;font-size:1rem;line-height:1.5rem;width:100%}.daff-toast__content{display:flex;flex-direction:column;gap:.25rem;padding:1rem}.daff-toast__title{font-weight:600}.daff-toast__message{font-weight:400;line-height:1.25rem}.daff-toast__actions{display:flex;align-items:center;gap:.5rem;min-height:3rem;padding:0 1rem 1rem}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.ConfigurableFocusTrapFactory }, { type: i2.DaffFocusStackService }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-toast']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], _actions: [{
+                type: ContentChild,
+                args: [DaffToastActionsDirective]
+            }], _prefix: [{
+                type: ContentChild,
+                args: [DaffPrefixDirective]
+            }], toast: [{
+                type: Input
+            }], onEscape: [{
+                type: HostListener,
+                args: ['keydown.escape']
+            }] } });
+
+class DaffToastTitleDirective {
+    constructor() {
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffToastTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: DaffToastTitleDirective, selector: "[daffToastTitle]", host: { properties: { "class.daff-toast__title": "this.class" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffToastTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffToastTitle]',
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-toast__title']
+            }] } });
+
+class DaffToastMessageDirective {
+    constructor() {
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffToastMessageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: DaffToastMessageDirective, selector: "[daffToastMessage]", host: { properties: { "class.daff-toast__message": "this.class" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffToastMessageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffToastMessage]',
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-toast__message']
+            }] } });
+
+class DaffToastTemplateComponent {
+    constructor(cd, options, toastPosition) {
+        this.cd = cd;
+        this.options = options;
+        this.toastPosition = toastPosition;
+        this.faTimes = faTimes;
+        this._items = [];
+        this.closeToast = new EventEmitter();
+    }
+    onCloseToast(event) {
+        this.closeToast.emit();
+    }
+    get slideAnimation() {
+        switch (this.toastPosition.config.horizontal + '-' + this.toastPosition.config.vertical) {
+            case 'left-top':
+            case 'left-bottom':
+                return {
+                    value: 0,
+                    params: {
+                        startX: '-100%',
+                        endX: '0',
+                        startY: '0',
+                        endY: '0',
+                    },
+                };
+            case 'right-top':
+            case 'right-bottom':
+                return {
+                    value: 0,
+                    params: {
+                        startX: '100%',
+                        endX: '0',
+                        startY: '0',
+                        endY: '0',
+                    },
+                };
+            case 'center-top':
+                return {
+                    value: 0,
+                    params: {
+                        startX: '0',
+                        endX: '0',
+                        startY: '-100%',
+                        endY: '0',
+                    },
+                };
+            case 'center-bottom':
+                return {
+                    value: 0,
+                    params: {
+                        startX: '0',
+                        endX: '0',
+                        startY: '100%',
+                        endY: '0',
+                    },
+                };
+        }
+    }
+    get items() {
+        return this._items;
+    }
+    set items(value) {
+        this._items = value;
+        this.cd.markForCheck();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffToastTemplateComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DAFF_TOAST_OPTIONS }, { token: DaffToastPositionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DaffToastTemplateComponent, selector: "ng-component", inputs: { items: "items" }, outputs: { closeToast: "closeToast" }, ngImport: i0, template: `
+    <daff-toast
+      *ngFor="let item of items | slice:0:3"
+      [toast]="item"
+      [status]="item.status ?? null"
+      (closeToast)="item.dismiss()"
+      [@slideIn]="slideAnimation"
+      [attr.role]="item.actions ? 'alertdialog' : undefined"
+      [attr.aria-labelledby]="item.actions ? item.title : undefined"
+      [attr.aria-describedby]="item.actions ? item.message : undefined">
+      <div daffToastTitle>{{ item.title }}</div>
+      <div daffToastMessage>{{ item.message }}</div>
+      <div daffToastActions *ngIf="item.actions">
+        <ng-container *ngFor="let action of item.actions">
+          <ng-container *ngTemplateOutlet="button;context:{ action, item }"></ng-container>
+        </ng-container>
+      </div>
+      <button daff-icon-button color="theme-contrast"
+        *ngIf="item.dismissible"
+        aria-label="close button"
+        [attr.aria-hidden]="item.actions ? undefined : true"
+        (click)="onCloseToast(item.dismiss())">
+          <fa-icon [icon]="faTimes" size="sm" [fixedWidth]="true"></fa-icon>
+      </button>
+    </daff-toast>
+
+    <ng-template #button let-action="action" let-item="item">
+      <ng-container [ngSwitch]="action.type">
+        <button type="button" *ngSwitchDefault daff-button
+          [status]="action.status"
+          [color]="action.color"
+          [size]="action.size"
+          [attr.aria-label]="action.content"
+          (click)="action.eventEmitter?.emit({ event: $event, action})">
+            {{ action.content }}
+        </button>
+        <button type="button" *ngSwitchCase="'stroked'" daff-stroked-button
+          [status]="action.status"
+          [color]="action.color"
+          [size]="action.size"
+          [attr.aria-label]="action.content"
+          (click)="action.eventEmitter?.emit({ event: $event, action})">
+            {{ action.content }}
+        </button>
+        <button type="button" *ngSwitchCase="'raised'" daff-raised-button
+          [status]="action.status"
+          [color]="action.color"
+          [size]="action.size"
+          [attr.aria-label]="action.content"
+          (click)="action.eventEmitter?.emit({ event: $event, action})">
+            {{ action.content }}
+        </button>
+        <button type="button" *ngSwitchCase="'flat'" daff-flat-button
+          [status]="action.status"
+          [color]="action.color"
+          [size]="action.size"
+          [attr.aria-label]="action.content"
+          (click)="action.eventEmitter?.emit({ event: $event, action})">
+            {{ action.content }}
+        </button>
+        <button type="button" *ngSwitchCase="'underline'" daff-underline-button
+          [status]="action.status"
+          [color]="action.color"
+          [size]="action.size"
+          [attr.aria-label]="action.content"
+          (click)="action.eventEmitter?.emit({ event: $event, action})">
+            {{ action.content }}
+        </button>
+      </ng-container>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.DaffButtonComponent, selector: "button[daff-button],button[daff-stroked-button],button[daff-raised-button],button[daff-flat-button],button[daff-icon-button],button[daff-underline-button],a[daff-button],a[daff-stroked-button],a[daff-raised-button],a[daff-flat-button],a[daff-icon-button],a[daff-underline-button]", inputs: ["color", "size", "status", "loading", "tabindex", "disabled"] }, { kind: "component", type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: DaffToastComponent, selector: "daff-toast", inputs: ["status", "toast"] }, { kind: "directive", type: DaffToastActionsDirective, selector: "[daffToastActions]" }, { kind: "directive", type: DaffToastTitleDirective, selector: "[daffToastTitle]" }, { kind: "directive", type: DaffToastMessageDirective, selector: "[daffToastMessage]" }, { kind: "pipe", type: i2$1.SlicePipe, name: "slice" }], animations: [
+            trigger('slideIn', [
+                transition(':enter', [
+                    style({ opacity: '0', transform: 'translate({{startX}}, {{startY}})' }),
+                    animate('300ms ease-out', style({ opacity: '1', transform: 'translate({{endX}}, {{endY}})' })),
+                ], { params: {
+                        startX: '0',
+                        startY: '0',
+                        endX: '0',
+                        endY: '0',
+                    } }),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffToastTemplateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <daff-toast
+      *ngFor="let item of items | slice:0:3"
+      [toast]="item"
+      [status]="item.status ?? null"
+      (closeToast)="item.dismiss()"
+      [@slideIn]="slideAnimation"
+      [attr.role]="item.actions ? 'alertdialog' : undefined"
+      [attr.aria-labelledby]="item.actions ? item.title : undefined"
+      [attr.aria-describedby]="item.actions ? item.message : undefined">
+      <div daffToastTitle>{{ item.title }}</div>
+      <div daffToastMessage>{{ item.message }}</div>
+      <div daffToastActions *ngIf="item.actions">
+        <ng-container *ngFor="let action of item.actions">
+          <ng-container *ngTemplateOutlet="button;context:{ action, item }"></ng-container>
+        </ng-container>
+      </div>
+      <button daff-icon-button color="theme-contrast"
+        *ngIf="item.dismissible"
+        aria-label="close button"
+        [attr.aria-hidden]="item.actions ? undefined : true"
+        (click)="onCloseToast(item.dismiss())">
+          <fa-icon [icon]="faTimes" size="sm" [fixedWidth]="true"></fa-icon>
+      </button>
+    </daff-toast>
+
+    <ng-template #button let-action="action" let-item="item">
+      <ng-container [ngSwitch]="action.type">
+        <button type="button" *ngSwitchDefault daff-button
+          [status]="action.status"
+          [color]="action.color"
+          [size]="action.size"
+          [attr.aria-label]="action.content"
+          (click)="action.eventEmitter?.emit({ event: $event, action})">
+            {{ action.content }}
+        </button>
+        <button type="button" *ngSwitchCase="'stroked'" daff-stroked-button
+          [status]="action.status"
+          [color]="action.color"
+          [size]="action.size"
+          [attr.aria-label]="action.content"
+          (click)="action.eventEmitter?.emit({ event: $event, action})">
+            {{ action.content }}
+        </button>
+        <button type="button" *ngSwitchCase="'raised'" daff-raised-button
+          [status]="action.status"
+          [color]="action.color"
+          [size]="action.size"
+          [attr.aria-label]="action.content"
+          (click)="action.eventEmitter?.emit({ event: $event, action})">
+            {{ action.content }}
+        </button>
+        <button type="button" *ngSwitchCase="'flat'" daff-flat-button
+          [status]="action.status"
+          [color]="action.color"
+          [size]="action.size"
+          [attr.aria-label]="action.content"
+          (click)="action.eventEmitter?.emit({ event: $event, action})">
+            {{ action.content }}
+        </button>
+        <button type="button" *ngSwitchCase="'underline'" daff-underline-button
+          [status]="action.status"
+          [color]="action.color"
+          [size]="action.size"
+          [attr.aria-label]="action.content"
+          (click)="action.eventEmitter?.emit({ event: $event, action})">
+            {{ action.content }}
+        </button>
+      </ng-container>
+    </ng-template>
+  `,
+                    animations: [
+                        trigger('slideIn', [
+                            transition(':enter', [
+                                style({ opacity: '0', transform: 'translate({{startX}}, {{startY}})' }),
+                                animate('300ms ease-out', style({ opacity: '1', transform: 'translate({{endX}}, {{endY}})' })),
+                            ], { params: {
+                                    startX: '0',
+                                    startY: '0',
+                                    endX: '0',
+                                    endY: '0',
+                                } }),
+                        ]),
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DAFF_TOAST_OPTIONS]
+                }] }, { type: DaffToastPositionService }], propDecorators: { closeToast: [{
+                type: Output
+            }], items: [{
+                type: Input
+            }] } });
+
+class DaffToastModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: DaffToastModule, declarations: [DaffToastComponent,
+            DaffToastActionsDirective,
+            DaffToastTitleDirective,
+            DaffToastMessageDirective,
+            DaffToastTemplateComponent], imports: [CommonModule,
+            DaffPrefixSuffixModule,
+            DaffButtonModule,
+            FontAwesomeModule,
+            PortalModule,
+            OverlayModule], exports: [DaffToastComponent,
+            DaffToastActionsDirective,
+            DaffToastTitleDirective,
+            DaffToastMessageDirective,
+            DaffPrefixSuffixModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffToastModule, providers: [
+            DaffToastPositionService,
+        ], imports: [CommonModule,
+            DaffPrefixSuffixModule,
+            DaffButtonModule,
+            FontAwesomeModule,
+            PortalModule,
+            OverlayModule, DaffPrefixSuffixModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffToastModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        DaffPrefixSuffixModule,
+                        DaffButtonModule,
+                        FontAwesomeModule,
+                        PortalModule,
+                        OverlayModule,
+                    ],
+                    declarations: [
+                        DaffToastComponent,
+                        DaffToastActionsDirective,
+                        DaffToastTitleDirective,
+                        DaffToastMessageDirective,
+                        DaffToastTemplateComponent,
+                    ],
+                    exports: [
+                        DaffToastComponent,
+                        DaffToastActionsDirective,
+                        DaffToastTitleDirective,
+                        DaffToastMessageDirective,
+                        DaffPrefixSuffixModule,
+                    ],
+                    providers: [
+                        DaffToastPositionService,
+                    ],
+                }]
+        }] });
+
+const createPositionStrategy = (position) => {
+    const strat = new GlobalPositionStrategy();
+    switch (position.horizontal) {
+        case 'left':
+            strat.left('48px');
+            break;
+        case 'right':
+            strat.right('48px');
+            break;
+        case 'center':
+            strat.centerHorizontally();
+            break;
+        default:
+            strat.right('48px');
+    }
+    switch (position.vertical) {
+        case 'top':
+            strat.top('80px');
+            break;
+        case 'bottom':
+            strat.bottom('48px');
+            break;
+        default:
+            strat.top('80px');
+    }
+    return strat;
+};
+
+const daffDefaultToastConfiguration = {};
+
+class DaffToastService {
+    constructor(overlay, options, _parentToast, mediaQuery, toastPosition, focusStack) {
+        this.overlay = overlay;
+        this.options = options;
+        this._parentToast = _parentToast;
+        this.mediaQuery = mediaQuery;
+        this.toastPosition = toastPosition;
+        this.focusStack = focusStack;
+        this._toasts = [];
+        this._sub = this.mediaQuery.observe(DaffBreakpoints.MOBILE).pipe(filter(() => this._overlayRef !== undefined), map((position) => createPositionStrategy(this.toastPosition.config)), tap((strategy) => this._overlayRef.updatePositionStrategy(strategy))).subscribe();
+    }
+    ngOnDestroy() {
+        this._sub.unsubscribe();
+    }
+    _attachToastTemplate(overlayRef) {
+        const template = overlayRef.attach(new ComponentPortal(DaffToastTemplateComponent));
+        return template;
+    }
+    _createOverlayRef() {
+        return this.overlay.create({
+            hasBackdrop: false,
+            scrollStrategy: this.overlay.scrollStrategies.noop(),
+            positionStrategy: createPositionStrategy(this.toastPosition.config),
+        });
+    }
+    open(toast, configuration) {
+        if (this._parentToast && this.options.useParent) {
+            return this._parentToast.open(toast, configuration);
+        }
+        const config = {
+            ...daffDefaultToastConfiguration,
+            // sets the default duration to 5000ms if a toast does not have actions
+            duration: toast.actions?.length > 0 ? undefined : 5000,
+            ...configuration,
+        };
+        if (this._toasts.length === 0) {
+            this._overlayRef = this._createOverlayRef();
+            this._template = this._attachToastTemplate(this._overlayRef);
+        }
+        const dismissEvent = new EventEmitter();
+        const _toastPlus = {
+            dismissible: true,
+            ...toast,
+            dismiss: () => {
+                dismissEvent.emit();
+            },
+            dismissalStream: merge(config.duration ? of(undefined).pipe(delay(config.duration)) : EMPTY, dismissEvent).pipe(take(1)),
+        };
+        _toastPlus.dismissalStream.subscribe(() => {
+            this.close(_toastPlus);
+        });
+        this._toasts = [
+            _toastPlus,
+            ...this._toasts,
+        ];
+        this._template.instance.items = this._toasts;
+        return _toastPlus;
+    }
+    close(toast) {
+        if (this._parentToast && this.options.useParent) {
+            this._parentToast.close(toast);
+            return;
+        }
+        if (daffToastChangesFocus(toast)) {
+            this.focusStack.pop();
+        }
+        const index = this._toasts.indexOf(toast);
+        if (index === -1) {
+            throw new Error('The Toast that you are trying to remove does not exist.');
+        }
+        this._toasts = this._toasts.filter(m => m !== toast);
+        this._template.instance.items = [...this._toasts];
+        // This currently overrides the ":leave" animation as we currently
+        // remove the animating element immediately after there are no more toasts,
+        // without waiting for the animation to complete.
+        if (this._toasts.length === 0) {
+            this._overlayRef.dispose();
+            this._template.destroy();
+            this._overlayRef = undefined;
+            this._template = undefined;
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffToastService, deps: [{ token: i1$2.Overlay }, { token: DAFF_TOAST_OPTIONS }, { token: DaffToastService, optional: true, skipSelf: true }, { token: i1.BreakpointObserver }, { token: DaffToastPositionService }, { token: i2.DaffFocusStackService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffToastService, providedIn: DaffToastModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DaffToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: DaffToastModule }]
+        }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DAFF_TOAST_OPTIONS]
+                }] }, { type: DaffToastService, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }, { type: i1.BreakpointObserver }, { type: DaffToastPositionService }, { type: i2.DaffFocusStackService }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DAFF_TOAST_OPTIONS, DaffToastActionsDirective, DaffToastComponent, DaffToastMessageDirective, DaffToastModule, DaffToastPositionService, DaffToastService, DaffToastTitleDirective, provideDaffToastOptions };
+//# sourceMappingURL=daffodil-design-toast.mjs.map