@trimble-oss/moduswebcomponents/components/modus-wc-toast.js

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

import { p as proxyCustomElement, H, h, c as Host } from './p-BMvVSi6Y.js';
import { i as inheritAriaAttributes } from './p-COxr4v9W.js';

const convertPropsToClasses = ({ position, }) => {
    let classes = '';
    if (position) {
        switch (position) {
            case 'top-start':
                classes = `${classes} modus-wc-toast-top modus-wc-toast-start`;
                break;
            case 'top-center':
                classes = `${classes} modus-wc-toast-top modus-wc-toast-center`;
                break;
            case 'top-end':
                classes = `${classes} modus-wc-toast-top modus-wc-toast-end`;
                break;
            case 'middle-start':
                classes = `${classes} modus-wc-toast-start modus-wc-toast-middle`;
                break;
            case 'middle-center':
                classes = `${classes} modus-wc-toast-center modus-wc-toast-middle`;
                break;
            case 'middle-end':
                classes = `${classes} modus-wc-toast-end modus-wc-toast-middle`;
                break;
            case 'bottom-start':
                classes = `${classes} modus-wc-toast-start`;
                break;
            case 'bottom-center':
                classes = `${classes} modus-wc-toast-center`;
                break;
            case 'bottom-end':
                classes = `${classes} modus-wc-toast-end`;
                break;
        }
    }
    return classes.trim();
};

const modusWcToastCss = "";

const ModusWcToast$1 = /*@__PURE__*/ proxyCustomElement(class ModusWcToast extends H {
    constructor() {
        super();
        this.__registerHost();
        this.inheritedAttributes = {};
        /** Additional classes for custom styling. */
        this.customClass = '';
        /** The position of the toast in the parent container. */
        this.position = 'top-end';
        this.getClasses = () => {
            const classList = ['modus-wc-toast'];
            const propClasses = convertPropsToClasses({
                position: this.position,
            });
            // The order CSS classes are added matters to CSS specificity
            if (propClasses)
                classList.push(propClasses);
            if (this.customClass)
                classList.push(this.customClass);
            return classList.join(' ');
        };
    }
    componentWillLoad() {
        this.inheritedAttributes = inheritAriaAttributes(this.el);
    }
    delayChanged(newDelay) {
        clearTimeout(this.timerId);
        this.timerId = setTimeout(() => {
            this.dismissElement();
        }, newDelay);
    }
    dismissElement() {
        this.el.remove();
    }
    componentDidLoad() {
        if (this.delay && this.delay > 0) {
            this.timerId = setTimeout(() => {
                this.dismissElement();
            }, this.delay);
        }
    }
    disconnectedCallback() {
        clearTimeout(this.timerId);
    }
    render() {
        return (h(Host, { key: '93b95c49060550caa9c4f9e4c1062d8b8d8bb0db' }, h("div", Object.assign({ key: 'dbffa02ec39f115537d66be7da6cadfd29f30a67', class: this.getClasses() }, this.inheritedAttributes), h("slot", { key: '90c9964b18fb4d356b291cbe0a029229b0071737' }))));
    }
    get el() { return this; }
    static get watchers() { return {
        "delay": ["delayChanged"]
    }; }
    static get style() { return modusWcToastCss; }
}, [4, "modus-wc-toast", {
        "customClass": [1, "custom-class"],
        "delay": [2],
        "position": [1]
    }, undefined, {
        "delay": ["delayChanged"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["modus-wc-toast"];
    components.forEach(tagName => { switch (tagName) {
        case "modus-wc-toast":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, ModusWcToast$1);
            }
            break;
    } });
}

const ModusWcToast = ModusWcToast$1;
const defineCustomElement = defineCustomElement$1;

export { ModusWcToast, defineCustomElement };