'use strict';

var index = require('./index-BjHIBY-I.js');
var translations = require('./translations-Bu_0fli7.js');
var randomString = require('./random-string-BTzDB2ee.js');

/**
 * Container to keep track of all snackbar elements that gets added to the page.
 * When an element gets added or removed, the container will emit a
 * `changeOffset` event on all elements in the container, letting them know
 * the new offset to where they should position themselves.
 */
class SnackbarContainer {
    constructor() {
        this.snackbarElements = [];
    }
    /**
     * Add a new element to the container
     *
     * @param snackbar - element to add
     */
    add(snackbar) {
        const popover = this.getPopover(snackbar);
        // @ts-expect-error Stencil does not seem to recognise the existance of showPopover
        popover === null || popover === void 0 ? void 0 : popover.showPopover();
        this.snackbarElements = [snackbar, ...this.snackbarElements];
        this.emitOffsets();
    }
    /**
     * Remove an element from the container
     *
     * @param snackbar - element to remove
     */
    remove(snackbar) {
        const popover = this.getPopover(snackbar);
        // @ts-expect-error Stencil does not seem to recognise the existance of hidePopover
        popover === null || popover === void 0 ? void 0 : popover.hidePopover();
        this.snackbarElements = this.snackbarElements.filter((item) => item !== snackbar);
        this.emitOffsets();
    }
    emitOffsets() {
        let offset = 0;
        for (const snackbar of this.snackbarElements) {
            snackbar.dispatchEvent(new CustomEvent('changeOffset', {
                detail: offset,
            }));
            offset += this.getPopover(snackbar).getBoundingClientRect().height;
        }
    }
    getPopover(snackbar) {
        return snackbar.shadowRoot.querySelector('[popover]');
    }
}

const snackbarCss = () => `.limel-portal--container{font-family:var(--limel-portal-font-family, inherit);opacity:0;display:none}.limel-portal--container.is-visible{opacity:1;display:inline-block}.limel-portal--container.is-visible>*{will-change:opacity, transform}@keyframes fade-in{from{opacity:0;transform:scale(0.94)}to{opacity:1;transform:scale(1) translate3d(0, 0, 0)}}@keyframes fade-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.94) translate3d(0, 0, 0)}}.limel-portal--container>*{animation:fade-in 0.18s cubic-bezier(0.11, 0.59, 0.18, 1.26) forwards}.limel-portal--container.is-hiding>*{animation:fade-out 0.22s ease forwards}.limel-portal--container[data-popper-placement=left-start]>*{transform-origin:right top}.limel-portal--container[data-popper-placement=left]>*{transform-origin:right center}.limel-portal--container[data-popper-placement=left-end]>*{transform-origin:right bottom}.limel-portal--container[data-popper-placement=top-start]>*{transform-origin:left bottom}.limel-portal--container[data-popper-placement=top]>*{transform-origin:center bottom}.limel-portal--container[data-popper-placement=top-end]>*{transform-origin:right bottom}.limel-portal--container[data-popper-placement=right-start]>*{transform-origin:left top}.limel-portal--container[data-popper-placement=right]>*{transform-origin:left center}.limel-portal--container[data-popper-placement=right-end]>*{transform-origin:left bottom}.limel-portal--container[data-popper-placement=bottom-start]>*{transform-origin:left top}.limel-portal--container[data-popper-placement=bottom]>*{transform-origin:center top}.limel-portal--container[data-popper-placement=bottom-end]>*{transform-origin:right top}*{box-sizing:border-box}aside{background:none;border:none;inset:unset;overflow:visible;padding:0.5rem 0.5rem 0 0.5rem;right:0;width:var(--limel-snackbar-width, 21rem);top:calc(var(--snackbar-distance-to-top-edge) + env(safe-area-inset-top, 0));transition:opacity var(--limel-snackbar-opacity-transition-speed, 0.2s) ease, top var(--limel-snackbar-top-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89), transform var(--limel-snackbar-top-transition-speed, 0.46s) ease;transform:translate3d(0, 0, 0);opacity:1}aside.is-closing{transform:translate3d(2rem, 0, 0);opacity:0;--limel-snackbar-top-transition-speed:0.2s;--limel-snackbar-opacity-transition-speed:0.2s}.surface{overflow:hidden;padding:0.5rem;display:flex;align-items:center;justify-content:flex-start;gap:0.25rem;min-height:3.25rem;border-radius:0.75rem;background-color:rgb(var(--contrast-1400));box-shadow:var(--shadow-depth-8), var(--shadow-depth-16)}.label{color:rgb(var(--contrast-100));-webkit-font-smoothing:antialiased;font-size:var(--limel-theme-default-small-font-size);font-weight:400;padding:0 0.25rem;width:100%;flex-grow:1}.actions{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box;gap:0.5rem}.dismiss,.actions{--lime-elevated-surface-background-color:rgb(       var(--contrast-1300)   )}.dismiss{--limel-theme-on-surface-color:rgb(       var(--contrast-100)   );--icon-background-color:var(--lime-elevated-surface-background-color);--fill-color:var(--lime-primary-color, var(--limel-theme-primary-color));--track-color:rgb(var(--contrast-800), 0.2);transition:opacity 0.1s ease, transform 0.1s ease;position:absolute;top:-0.375rem;left:-0.375rem;transform:scale(0.7);display:flex;align-items:center;justify-content:center}.dismiss svg{position:absolute;transform:rotate(90deg);fill:transparent;stroke-dasharray:100;stroke-linecap:round}aside.open .dismiss svg{animation:timeout var(--snackbar-timeout) linear forwards}.dismiss .is-closing{transform:scale(0.5);opacity:0}.dismiss-button{transform:scale(0.8);margin:0;padding:0}@keyframes timeout{0%{stroke-width:4;stroke-dashoffset:0;opacity:1}100%{stroke-width:1;stroke-dashoffset:-100;opacity:0.7}}`;

const container = new SnackbarContainer();
const hideAnimationDuration = 300;
const Snackbar = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.action = index.createEvent(this, "action");
        this.hide = index.createEvent(this, "hide");
        /**
         * `true` if the snackbar is open, `false` otherwise.
         */
        this.open = false;
        /**
         * The amount of time in milliseconds to show the snackbar.
         * If set to `-1`, the snackbar will be persistent.
         * This means:
         * - either the end user will need to close it manually,
         * which requires the `dismissible` property to be set to `true`.
         * - or the snackbar needs to be closed programmatically.
         */
        this.timeout = 5000;
        /**
         * When `true` displays a dismiss button on the snackbar,
         * allowing users to close it.
         */
        this.dismissible = true;
        /**
         * Defines the language for translations.
         */
        this.language = 'en';
        this.offset = 0;
        this.isOpen = false;
        this.closing = true;
        this.handleOpen = () => {
            if (this.isOpen) {
                return;
            }
            this.isOpen = true;
            this.closing = false;
            container.add(this.host);
            if (this.timeout && this.timeout !== -1) {
                this.timeoutId = window.setTimeout(this.handleClose, Math.max(this.timeout - hideAnimationDuration, hideAnimationDuration));
            }
        };
        this.handleClose = () => {
            if (!this.isOpen) {
                return;
            }
            this.closing = true;
            if (this.timeoutId) {
                clearTimeout(this.timeoutId);
                this.timeoutId = undefined;
            }
            setTimeout(() => {
                this.isOpen = false;
                container.remove(this.host);
                this.hide.emit();
                this.offset = 0;
            }, hideAnimationDuration);
        };
        this.handleClickAction = () => {
            this.action.emit();
        };
        this.snackbarId = randomString.createRandomString();
    }
    componentDidLoad() {
        if (this.open) {
            requestAnimationFrame(this.handleOpen);
        }
    }
    onChangeIndex(event) {
        event.stopPropagation();
        this.offset = event.detail;
    }
    watchOpen() {
        if (this.open) {
            this.handleOpen();
        }
        else {
            this.handleClose();
        }
        this.isOpen = this.open;
    }
    /**
     * Show the snackbar
     * @deprecated Use the `open` property instead.
     */
    async show() {
        console.warn('The `show` method in `limel-snackbar` is deprecated. Please use the `open` property instead.');
        if (!this.open) {
            this.handleOpen();
        }
    }
    render() {
        return (index.h("aside", { key: 'f6658fa4fb12f30db4bed68726dfc8a45acb0075', popover: "manual", style: {
                '--snackbar-timeout': `${Math.max(this.timeout || 0, 0)}ms`,
                '--snackbar-distance-to-top-edge': `${this.offset}px`,
            }, class: {
                open: this.open,
                'is-closing': this.closing,
                'limel-portal--parent': true,
            }, id: this.snackbarId, role: this.setAriaRoles(), "aria-atomic": this.open ? 'true' : undefined, "aria-relevant": this.open ? 'additions' : undefined }, index.h("div", { key: '2656ead3fd0b2e1e478229141a5651ed6fbf9c53', class: "surface" }, index.h("div", { key: '767a77e8558909e5f050715c94e2f72e7f3904e5', class: "label" }, this.message), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
    }
    setAriaRoles() {
        if (!this.open) {
            return;
        }
        if (!this.timeout || this.timeout === -1) {
            return 'alertdialog';
        }
        return 'status';
    }
    renderActions(actionText) {
        if (!actionText) {
            return;
        }
        return index.h("div", { class: "actions" }, this.renderActionButton(actionText));
    }
    renderActionButton(actionText) {
        if (!actionText) {
            return;
        }
        return (index.h("limel-button", { label: actionText, onClick: this.handleClickAction }));
    }
    renderDismissButton(dismissible) {
        if (!dismissible) {
            return;
        }
        const label = translations.translate.get('snackbar.dismiss', this.language);
        return (index.h("div", { class: "dismiss" }, this.renderTimeoutVisualization(), index.h("limel-icon-button", { class: "dismiss-button", icon: "multiply", label: label, onClick: this.handleClose, "aria-controls": this.snackbarId })));
    }
    renderTimeoutVisualization() {
        if (!this.timeout || this.timeout === -1) {
            return;
        }
        return (index.h("svg", { width: "36", height: "36", viewBox: "0 0 36 36" }, index.h("circle", { r: "18", cx: "18", cy: "18", fill: "var(--track-color)" }), index.h("path", { class: "track", d: "M 18,18 m -16,0 a 16,16 0 1,0 32,0 a 16,16 0 1,0 -32,0", stroke: "var(--fill-color)" })));
    }
    get host() { return index.getElement(this); }
    static get watchers() { return {
        "open": [{
                "watchOpen": 0
            }]
    }; }
};
Snackbar.style = snackbarCss();

exports.limel_snackbar = Snackbar;
