@alyle/ui/fesm2022/alyle-ui-snack-bar.mjs

Minimal Design, a set of components for Angular

import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Output, Input, Directive, NgModule } from '@angular/core';
import * as i1 from '@alyle/ui';
import { XPosition, YPosition, st2c, LyOverlayModule } from '@alyle/ui';
import { Subject } from 'rxjs';

const DEFAULT_DURATION = 6e3;
class LySnackBarRef {
    /** Gets an observable that is notified when the snack bar is finished closing. */
    afterDismissed() {
        return this._afterDismissed.asObservable();
    }
    constructor(_snackBarService, _overlay, _afterDismissedEventEmitter, duration, _theme) {
        this._snackBarService = _snackBarService;
        this._overlay = _overlay;
        this._afterDismissedEventEmitter = _afterDismissedEventEmitter;
        this._theme = _theme;
        this._dismissedByAction = false;
        /** Subject for notifying the user that the snack bar has been dismissed. */
        this._afterDismissed = new Subject();
        if (duration !== 'Infinity') {
            this._timer = setTimeout(() => {
                this.dismiss();
            }, duration || DEFAULT_DURATION);
        }
    }
    dismiss() {
        const snackBar = this._overlay;
        const timer = this._timer;
        this._afterDismissedEventEmitter.emit({ dismissedByAction: this._dismissedByAction });
        this._afterDismissed.next();
        this._afterDismissed.complete();
        if (snackBar) {
            if (timer) {
                // clear previous timer
                clearTimeout(timer);
            }
            snackBar.containerElement.classList.remove(this._theme.selectorOf('SnackBar:open'));
            setTimeout(() => {
                snackBar.destroy();
            }, 350);
            this._snackBarService._currentSnackBar = null;
            this._overlay = null;
        }
    }
    dismissWithAction() {
        const snackBar = this._overlay;
        if (snackBar) {
            this._dismissedByAction = true;
            this.dismiss();
        }
    }
}

class LySnackBarService {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LySnackBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LySnackBarService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LySnackBarService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }] });

const STYLE_PRIORITY = -2;
const DEFAULT_HORIZONTAL_POSITION = XPosition.after;
const DEFAULT_VERTICAL_POSITION = YPosition.below;
const STYLES = (theme) => ({
    $priority: STYLE_PRIORITY,
    root: (_className) => `${_className}{border-radius:4px;display:flex;justify-content:space-between;align-items:center;margin:8px;padding:0 16px;min-height:48px;min-width:320px;max-width:320px;opacity:0;transition:opacity ${theme.animations.curves.standard} 350ms,transform ${theme.animations.curves.deceleration} 350ms;font-size:${theme.pxToRem(theme.typography.fontSize)};box-sizing:border-box;pointer-events:all !important;}@media ${theme.breakpoints['XSmall']}{${_className}{width:calc(100% - 16px);min-width:calc(100% - 16px);}}${st2c(((theme.snackBar
        && theme.snackBar.root) || null), `${_className}`)}`
});
class LySnackBar {
    constructor(_templateRef, _theme, _overlay, _snackBarService) {
        this._templateRef = _templateRef;
        this._theme = _theme;
        this._overlay = _overlay;
        this._snackBarService = _snackBarService;
        this.classes = this._theme.renderStyleSheet(STYLES);
        this.afterDismissed = new EventEmitter();
    }
    ngOnDestroy() {
        this.dismiss();
    }
    /**
     * Open a LySnackBar template
     * @param snackBarData Data to be passed to the snack-bark.
     */
    open(snackBarData) {
        // close previous snackBar if exist
        const sbrPrev = this._snackBarService._currentSnackBar;
        if (sbrPrev) {
            sbrPrev.dismiss();
        }
        const duration = this.duration;
        const horizontalPosition = this.horizontalPosition || DEFAULT_HORIZONTAL_POSITION;
        const verticalPosition = this.verticalPosition || DEFAULT_VERTICAL_POSITION;
        const snackBar = this._overlay.create(this._templateRef, snackBarData, {
            styles: {
                // this remove previous style
                justifyContent: null
            },
            hasBackdrop: false,
            classes: [
                this.classes.root,
                this._theme.renderStyle(`SnackBar.hp:${horizontalPosition}.vp:${verticalPosition}`, (theme) => {
                    let marginLeft;
                    let left;
                    let marginRight;
                    let right;
                    let transform;
                    let top;
                    let bottom;
                    let hp;
                    if (verticalPosition === YPosition.above) {
                        transform = 'translateY(-180%)';
                        top = 0;
                    }
                    else if (verticalPosition === YPosition.below) {
                        transform = 'translateY(180%)';
                        bottom = 0;
                    }
                    if (horizontalPosition === 'center') {
                        marginRight = marginLeft = 'auto';
                        left = right = 0;
                    }
                    else {
                        hp = theme.getDirection(horizontalPosition);
                    }
                    return (_className) => `${_className}{margin-left:${marginLeft};left:${left};margin-right:${marginRight};right:${right};transform:${transform};top:${top};bottom:${bottom};${hp}:0;}`;
                }, STYLE_PRIORITY)
            ]
        });
        this._theme.requestAnimationFrame(() => {
            const newClass = this._theme.renderStyle('SnackBar:open', () => ((_className) => `${_className}{opacity:1;transform:translateY(0);}`), STYLE_PRIORITY + 1);
            snackBar.containerElement.classList.add(newClass);
        });
        window.getComputedStyle(snackBar.containerElement).getPropertyValue('opacity');
        const sbr = new LySnackBarRef(this._snackBarService, snackBar, this.afterDismissed, duration, this._theme);
        this._snackBarService._currentSnackBar = sbr;
        return sbr;
    }
    /** Dismiss snackBar */
    dismiss() {
        const sbr = this._snackBarService._currentSnackBar;
        if (sbr) {
            sbr.dismissWithAction();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LySnackBar, deps: [{ token: i0.TemplateRef }, { token: i1.LyTheme2 }, { token: i1.LyOverlay }, { token: LySnackBarService }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: LySnackBar, isStandalone: false, selector: "ng-template[ly-snack-bar]", inputs: { duration: "duration", horizontalPosition: "horizontalPosition", verticalPosition: "verticalPosition" }, outputs: { afterDismissed: "afterDismissed" }, exportAs: ["lySnackBar"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LySnackBar, decorators: [{
            type: Directive,
            args: [{
                    selector: 'ng-template[ly-snack-bar]',
                    exportAs: 'lySnackBar',
                    standalone: false
                }]
        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i1.LyTheme2 }, { type: i1.LyOverlay }, { type: LySnackBarService }], propDecorators: { duration: [{
                type: Input
            }], horizontalPosition: [{
                type: Input
            }], verticalPosition: [{
                type: Input
            }], afterDismissed: [{
                type: Output
            }] } });

class LySnackBarModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LySnackBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: LySnackBarModule, declarations: [LySnackBar], imports: [LyOverlayModule], exports: [LySnackBar] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LySnackBarModule, imports: [LyOverlayModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LySnackBarModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [LyOverlayModule],
                    declarations: [LySnackBar],
                    exports: [LySnackBar]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { LySnackBar, LySnackBarModule, STYLES };
//# sourceMappingURL=alyle-ui-snack-bar.mjs.map