@universal-material/web/snackbar/snackbar.js

Material web components

var UmSnackbar_1;
import { __decorate } from "tslib";
import { html, LitElement, nothing } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { styles as baseStyles } from '../shared/base.styles.js';
import { styles } from './snackbar.styles.js';
import '../button/button.js';
import '../button/icon-button.js';
export var SnackbarDuration;
(function (SnackbarDuration) {
    SnackbarDuration[SnackbarDuration["short"] = 2500] = "short";
    SnackbarDuration[SnackbarDuration["long"] = 5000] = "long";
    SnackbarDuration[SnackbarDuration["infinite"] = -1] = "infinite";
})(SnackbarDuration || (SnackbarDuration = {}));
let UmSnackbar = class UmSnackbar extends LitElement {
    constructor() {
        super(...arguments);
        this.message = '';
        this.action = '';
        this.showClose = false;
        this._dismissed = false;
        this._canDismiss = false;
    }
    static { UmSnackbar_1 = this; }
    static { this.styles = [baseStyles, styles]; }
    static { this.minDisplayTime = 1500; }
    firstUpdated(changedProperties) {
        super.firstUpdated(changedProperties);
        const onAnimationEnd = () => {
            this.container.removeEventListener('animationend', onAnimationEnd);
            if (UmSnackbar_1.minDisplayTime > 0) {
                setTimeout(() => this._canDismiss = true, UmSnackbar_1.minDisplayTime);
            }
            else {
                this._canDismiss = true;
            }
        };
        this.container.addEventListener('animationend', onAnimationEnd);
    }
    render() {
        const classes = { dismiss: this._dismissed && this._canDismiss };
        if (classes.dismiss) {
            const onAnimationEnd = () => {
                this.container.removeEventListener('animationend', onAnimationEnd);
                this.remove();
                UmSnackbar_1._showNext();
            };
            this.container.addEventListener('animationend', onAnimationEnd);
        }
        return html `
      <div class="container ${classMap(classes)}" part="container">
        <u-elevation></u-elevation>
        <div class="message-container" part="message-container">
          <div class="message" part="message">${this.message}</div>
        </div>
        ${this.renderButton()} ${this.renderCloseButton()}
      </div>
    `;
    }
    renderButton() {
        return this.action
            ? html `
          <u-button
            variant="text"
            @click=${this.actionClick.bind(this)}
            part="action"
          >${this.action}
          </u-button>
        `
            : nothing;
    }
    renderCloseButton() {
        return this.showClose
            ? html `
          <u-icon-button
            @click=${this.dismiss.bind(this)}
            part="close"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              height="1em"
              viewBox="0 -960 960 960"
              width="1em"
              fill="currentColor">
              <path
                d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
            </svg>
          </u-icon-button>
        `
            : nothing;
    }
    actionClick(e) {
        e.stopPropagation();
        const actionClickEvent = new CustomEvent('actionClick', { cancelable: true });
        this.dispatchEvent(actionClickEvent);
        if (actionClickEvent.defaultPrevented) {
            return;
        }
        this.dismiss();
    }
    dismiss() {
        if (this._dismissed) {
            return;
        }
        this._dismissed = true;
    }
    static { this._queue = []; }
    static { this._lastEnqueued = null; }
    static show(configOrMessage) {
        if (typeof configOrMessage === 'string') {
            configOrMessage = {
                message: configOrMessage,
            };
        }
        configOrMessage.duration ??= SnackbarDuration.long;
        const snackbar = this.createSnackbar(configOrMessage);
        UmSnackbar_1._queue.push(snackbar);
        UmSnackbar_1._lastEnqueued?.dismiss();
        UmSnackbar_1._lastEnqueued = snackbar;
        if (!UmSnackbar_1._consuming) {
            UmSnackbar_1._consumeQueue();
        }
        return snackbar;
    }
    static _consumeQueue() {
        if (UmSnackbar_1._queue.length) {
            UmSnackbar_1._consuming = true;
            UmSnackbar_1._showNext();
        }
    }
    static _showNext() {
        if (!UmSnackbar_1._queue.length) {
            UmSnackbar_1._consuming = false;
            UmSnackbar_1._lastEnqueued = null;
            return;
        }
        const snackbar = UmSnackbar_1._queue[0];
        UmSnackbar_1._queue = UmSnackbar_1._queue.slice(1);
        document.body.appendChild(snackbar);
        if (snackbar.duration === -1) {
            return;
        }
        setTimeout(() => snackbar.dismiss(), snackbar.duration);
    }
    static createSnackbar(config) {
        const snackbar = document.createElement('u-snackbar');
        snackbar.message = config.message;
        snackbar.action = config.action || '';
        snackbar.showClose = config.showClose;
        snackbar.duration = config.duration;
        return snackbar;
    }
};
__decorate([
    property({ reflect: true })
], UmSnackbar.prototype, "message", void 0);
__decorate([
    property({ reflect: true })
], UmSnackbar.prototype, "action", void 0);
__decorate([
    property({ type: Boolean, attribute: 'show-close', reflect: true })
], UmSnackbar.prototype, "showClose", void 0);
__decorate([
    state()
], UmSnackbar.prototype, "_dismissed", void 0);
__decorate([
    state()
], UmSnackbar.prototype, "_canDismiss", void 0);
__decorate([
    query('.container', true)
], UmSnackbar.prototype, "container", void 0);
UmSnackbar = UmSnackbar_1 = __decorate([
    customElement('u-snackbar')
], UmSnackbar);
export { UmSnackbar };
//# sourceMappingURL=snackbar.js.map