@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 } 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.label = '';
        this.buttonLabel = '';
        this.showClose = false;
        this.dismissed = false;
    }
    static { UmSnackbar_1 = this; }
    static { this.styles = [baseStyles, styles]; }
    render() {
        const classes = { dismiss: this.dismissed };
        return html `
      <div class="snackbar ${classMap(classes)}">
        <div class="label">${this.label}</div>
        ${this.renderButton()} ${this.renderCloseButton()}
      </div>
    `;
    }
    renderButton() {
        return this.buttonLabel
            ? html `
          <u-button variant="text">${this.buttonLabel}</u-button>
        `
            : nothing;
    }
    renderCloseButton() {
        return this.showClose
            ? html `
          <u-icon-button @click=${this.dismiss.bind(this)}>
            <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;
    }
    dismiss() {
        if (this.dismissed) {
            return;
        }
        this.dismissed = true;
        const onAnimationEnd = () => {
            this.snackbar.removeEventListener('animationend', onAnimationEnd);
            this.remove();
            UmSnackbar_1.showNext();
        };
        this.snackbar.addEventListener('animationend', onAnimationEnd);
    }
    static { this._queue = []; }
    static show(configOrLabel) {
        if (typeof configOrLabel === 'string') {
            configOrLabel = {
                label: configOrLabel,
            };
        }
        configOrLabel.duration ??= SnackbarDuration.short;
        const snackbar = this.createSnackbar(configOrLabel);
        UmSnackbar_1._queue.push(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;
            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.label = config.label;
        snackbar.buttonLabel = config.buttonLabel;
        snackbar.showClose = config.showClose;
        snackbar.duration = config.duration;
        return snackbar;
    }
};
__decorate([
    property({ reflect: true })
], UmSnackbar.prototype, "label", void 0);
__decorate([
    property({ reflect: true })
], UmSnackbar.prototype, "buttonLabel", void 0);
__decorate([
    property({ type: Boolean, attribute: 'show-close', reflect: true })
], UmSnackbar.prototype, "showClose", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], UmSnackbar.prototype, "dismissed", void 0);
__decorate([
    query('.snackbar')
], UmSnackbar.prototype, "snackbar", void 0);
UmSnackbar = UmSnackbar_1 = __decorate([
    customElement('u-snackbar')
], UmSnackbar);
export { UmSnackbar };
//# sourceMappingURL=snackbar.js.map