@riverty/web-components 6.3.0 → 6.3.1

package/dist/cjs/r-toast.cjs.entry.js

@@ -0,0 +1,314 @@
+'use strict';
+
+var index = require('./index-BnETQtSf.js');
+
+const toastCss = ":host([status=info]){--r-toast--border-color:var(--r-status-info-regular, #3e5c73);--r-toast--background-color:var(--r-status-info-soft, #f8fafb);--r-toast--leading-icon--color:var(--r-status-info-regular, #3e5c73)}:host([status=warning]){--r-toast--border-color:var(--r-status-warning-regular, #ff7429);--r-toast--background-color:var(--r-status-warning-soft, #fef9f5);--r-toast--leading-icon--color:var(--r-status-warning-regular, #89411A)}:host([status=error]){--r-toast--border-color:var(--r-status-error-regular, #b00c15);--r-toast--background-color:var(--r-status-error-soft, #fef6f6);--r-toast--leading-icon--color:var(--r-status-error-regular, #b00c15)}:host([status=success]){--r-toast--border-color:var(--r-status-success-regular, #298535);--r-toast--background-color:var(--r-status-success-soft, #f7fdf8);--r-toast--leading-icon--color:var(--r-status-success-regular, #298535)}:host([is-content=false]){--r-toast--content--display:none}:host([headline]){--r-toast--content--margin-top:var(--r-spacing-050, 0.5rem)}:host([data-visually-hidden=true]){--r-toast--host--animation-duration:0.2s;--r-toast--host--animation-name:fade-out}:host(:not(:last-child)){margin-bottom:var(--r-toast-group--spacing, 0)}:host{animation-duration:var(--r-toast--host--animation-duration, 0.3s);animation-fill-mode:var(--r-toast--host--animation-fill-mode, forwards);animation-name:var(--r-toast--host--animation-name, fade-in);box-sizing:var(--r-toast--host--box-sizing, border-box);display:var(--r-toast--host--display, block);height:var(--r-toast--host--height, var(--r-toast--host--height-expanded, auto));opacity:var(--r-toast--host--opacity, 1);overflow:var(--r-toast--host--overflow, hidden);position:var(--r-toast--host--position, relative);transition:var(--r-toast--host--transition, none);transition-delay:var(--r-toast--host--transition-delay, 0s)}:host ::slotted(p){margin:0}:host ::slotted(p+p),:host ::slotted(p+ul),:host ::slotted(p+ol){margin-top:1rem}:host .r-toast--trailing-button{--r-button--width:2.75rem;--r-button--height:2.75rem;--r-button--color:var(--r-text-regular, #282828);--r-button--border-color:transparent;--r-button--background-color:transparent;position:relative;margin-top:-8px;margin-right:-8px}:host .r-toast--trailing-button:hover{--r-button--color:var(--r-text-strong, #000000);--r-button--background-color:var(--r-background-interactive-hovered, #000000)}:host .r-toast--trailing-button:active{--r-button--transform:scale(0.94)}@media (prefers-reduced-motion){:host{transition:none;animation-name:none}}@keyframes fade-in{from{opacity:0;max-height:0}to{opacity:1;max-height:var(--r-toast--host--height-expanded)}}@keyframes fade-out{from{opacity:1;max-height:var(--r-toast--host--height-expanded);margin-top:var(--r-spacing-100, 1rem)}to{opacity:0;max-height:0;margin-top:0}}.r-toast{font-family:var(--r-toast--font-family, var(--r-font-family-text, system-ui));font-size:var(--r-toast--font-size, var(--r-font-size-400, 1rem));display:var(--r-toast--display, flex);flex-direction:var(--r-toast--flex-direction, row);align-items:var(--r-toast--align-items, stretch);gap:var(--r-toast--gap, var(--r-spacing-050, 0.5rem));padding:var(--r-toast--padding, 12px);border-width:var(--r-toast--border-width, 1px);border-style:var(--r-toast--border-style, solid);border-color:var(--r-toast--border-color, var(--r-status-info-regular, #3e5c73));background-color:var(--r-toast--background-color, var(--r-status-info-soft, #f8fafb));box-sizing:var(--r-toast--box-sizing, border-box);transition:var(--r-toast--transition, none)}.r-toast--main{flex:var(--r-toast--content--flex, 1);word-break:var(--r-toast--content--word-break, break-word)}.r-toast--leading-icon{color:var(--r-toast--leading-icon--color, var(--r-status-info-regular, #3e5c73));margin-top:var(--r-toast--leading-icon--margin-top, 0);margin-right:var(--r-toast--leading-icon--margin-right, var(--r-spacing-025, 0.25rem))}.r-toast--headline{color:var(--r-toast--headline--color, var(--r-text-regular, #282828));font-size:var(--r-toast--headline--font-size, var(--r-font-size-400, 1rem));font-weight:var(--r-toast--headline--font-weight, var(--r-font-weight-semibold, 600));line-height:var(--r-toast--headline--line-height, var(--r-line-height-m, 1.5));margin:var(--r-toast--headline--margin, 0)}.r-toast--content{display:var(--r-toast--content--display, block);color:var(--r-toast--content--color, var(--r-text-regular, #282828));line-height:var(--r-toast--content--line-height, var(--r-line-height-m, 1.5));font-size:var(--r-toast--content--font-size, var(--r-font-size-300, 0.875rem));font-weight:var(--r-toast--content--font-weight, var(--r-font-weight-regular, 400));margin-top:var(--r-toast--content--margin-top, 0);word-break:var(--r-toast--content--word-break, break-word)}.r-toast--action{display:var(--r-toast--action--display, flex);margin-top:var(--r-toast--action--margin-top, var(--r-spacing-050, 0.5rem));color:var(--r-toast--action--color, var(--r-text-regular, #282828));font-size:var(--r-toast--action--font-size, var(--r-font-size-300, 0.875rem));font-weight:var(--r-toast--action--font-weight, var(--r-font-weight-light, 300))}.r-toast--action-link,.r-toast--action ::slotted(r-button){--r-button--background-color:transparent;--r-button--border-width:0;--r-button--color:var(--r-text-regular);--r-button--padding:10px 2px 18px 2px;--r-button--slot--text-decoration:underline;--r-button--slot--text-underline-offset:9px}.r-toast--action-link:hover,.r-toast--action ::slotted(r-button:hover:not([disabled]):not([disabled=true])){--r-button--background-color:var(--r-background-interactive-hovered)}.r-toast--action-link:active,.r-toast--action ::slotted(r-button:active:not([disabled]):not([disabled=true])){--r-button--background-color:var(--r-background-interactive-pressed)}.r-toast--action ::slotted(*){font-size:inherit;color:inherit}.r-toast--action ::slotted(a){color:var(--r-toast--action--color, var(--r-text-regular, #282828))}";
+
+const Toast = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.rClickToastTrailingIcon = index.createEvent(this, "rClickToastTrailingIcon");
+        this.toastDismiss = index.createEvent(this, "dismiss");
+        this.toastReveal = index.createEvent(this, "reveal");
+        this.toastHide = index.createEvent(this, "hide");
+        this.toastDismissed = index.createEvent(this, "dismissed");
+        /**
+         * Controls if toast is initially shown.
+         * */
+        this.open = true;
+        /** Defines the appearance of the dialog based on the message type.
+         * Options are: "info", "success", "warning", or "error".
+         * @default 'info' */
+        this.status = 'info';
+        /** Sets role="alert" and will be announced to screen reader users */
+        this.announced = true;
+        /**
+         * Defines whether the leading icon is visible.
+         * @default true
+         * */
+        this.leadingIconVisible = true;
+        /** Specifies an optional icon for the trailing slot of the dialog.
+         * @default 'cross'
+         * */
+        this.trailingIcon = 'cross';
+        /** Specifies the target for the linked URL when `href` is provided.
+         * Options are: "_blank", "_self", "_parent", or "_top".
+         * @default '_self' */
+        this.target = '_self';
+        /** Specifies the time in miliseconds before the alert automatically collapses.
+         * @default 3000
+        */
+        this.delay = 3000;
+        /**
+         * Defines the behavior of the component's dismissing.
+         * - `auto`: The component will be dismissed automatically after number of ms set by `delay` property.
+         * - `manual`: The component requires explicit user action to close.
+         * @default "manual"
+         */
+        this.dismissMode = 'manual';
+        /** Provides content for `aria-label` attribute of the dismiss button. */
+        this.dismissLabel = 'Dismiss the toast';
+        /** Defines amount of time im miliseconds before toast is removed from DOM.
+         * @default 300
+         * */
+        this.delayBeforeRemoval = 300;
+        this.animationCompleted = false;
+        /** Unique id for each accordion item/row */
+        this.uniqueId = `r-toast-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
+        this.hasElContent = (selector) => {
+            const el = this.host.querySelector(selector);
+            return el !== null && (el === null || el === void 0 ? void 0 : el.textContent.trim().length) > 0;
+        };
+        this.getElContent = (selector) => {
+            var _a;
+            const el = this.host.querySelector(selector);
+            return (_a = el === null || el === void 0 ? void 0 : el.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+        };
+        this.startDelayTimer = () => {
+            const time = this.delay;
+            this.delayTimer = setTimeout(() => {
+                this.dismiss();
+                clearTimeout(this.delayTimer);
+            }, time);
+        };
+        this.handleAnimationEnd = (event) => {
+            if (event.animationName === 'fade-out') {
+                this.animationCompleted = true;
+                // Only emit if still connected to DOM
+                if (this.host.isConnected) {
+                    this.toastDismissed.emit();
+                }
+                // Clear height after fade-out completes as final cleanup
+                this.host.style.setProperty('--r-toast--host--height-expanded', null);
+            }
+            else if (event.animationName === 'fade-in') {
+                // Clear height restriction after fade-in completes to allow natural resizing
+                // The toast can now grow/shrink dynamically without animation constraints
+                this.host.style.setProperty('--r-toast--host--height-expanded', null);
+            }
+        };
+        this.handleTrailingButtonClick = () => {
+            this.rClickToastTrailingIcon.emit();
+            this.dismiss();
+        };
+        this.handleSlotChange = () => {
+            this.host.setAttribute('is-content', `${this.hasContent}`);
+        };
+    }
+    /**
+     * Dismisses the toast notification by setting it to a hidden state and then
+     * removing it from the DOM after a short delay. This can be used to manually
+     * hide the toast before the auto-dismiss timer expires.
+     */
+    async dismiss() {
+        // Re-measure height before fade-out to ensure smooth collapse animation
+        // This captures the current natural height for the animation
+        this.updateHeightVariable();
+        this.isOpen = false;
+        // Only emit if still connected to DOM
+        if (this.host.isConnected) {
+            this.toastDismiss.emit();
+        }
+        this.animationCompleted = false;
+        if (this.removalTimer)
+            clearTimeout(this.removalTimer);
+        this.removalTimer = setTimeout(() => {
+            if (!this.animationCompleted && this.host.isConnected) {
+                this.toastDismissed.emit();
+            }
+            // Safely remove from DOM - check parent exists and contains this element
+            if (this.host.isConnected && this.host.parentNode) {
+                try {
+                    this.host.remove();
+                }
+                catch (e) {
+                    // In test environments, element may have already been removed
+                    // or DOM structure changed - silently ignore
+                }
+            }
+        }, this.delayBeforeRemoval);
+    }
+    /**
+     * Reveals the toast notification by setting it to a visible state.
+     * If the auto-dismiss delay is enabled, it will start the timer to
+     * automatically dismiss the toast after the specified duration.
+     */
+    async reveal() {
+        // Measure height for smooth fade-in animation
+        await this.measureAndPrepareHeight();
+        this.isOpen = true;
+        // Only emit if still connected to DOM
+        if (this.host.isConnected) {
+            this.toastReveal.emit();
+        }
+        if (this.delayTimer)
+            clearTimeout(this.delayTimer);
+        if (this.isDismissManual)
+            return;
+        if (this.hasDelay)
+            this.startDelayTimer();
+        return this;
+    }
+    /**
+     * Hides toast, keeps it in dom.
+     * */
+    async hide() {
+        this.updateHeightVariable();
+        this.isOpen = false;
+        // Only emit if still connected to DOM
+        if (this.host.isConnected) {
+            this.toastHide.emit();
+        }
+        return this;
+    }
+    /**
+     * Toggles visibility of the toast.
+     * */
+    async toggle() {
+        this.isOpen ? this.hide() : this.reveal();
+        return this;
+    }
+    /**
+     * Measures the natural height of toast and prepares it for reveal animation.
+     * This should be called on newly added toasts before they are revealed.
+     */
+    async measureAndPrepareHeight() {
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                // Temporarily override animation to prevent visual glitches during measurement
+                const tempStyle = this.host.style.cssText;
+                this.host.style.cssText = tempStyle + '; animation: none !important; max-height: none !important; height: auto !important;';
+                const height = this.host.scrollHeight;
+                // Restore original style
+                this.host.style.cssText = tempStyle;
+                // Set the measured height for animation
+                if (height > 0) {
+                    this.host.style.setProperty('--r-toast--host--height-expanded', `${height}px`);
+                }
+                resolve();
+            });
+        });
+    }
+    handleOpenChange() {
+        this.isOpen ? this.hide() : this.reveal();
+    }
+    get hasLeadingSlot() {
+        return this.hasElContent('[slot="leading"]');
+    }
+    get hasLeading() {
+        return this.leadingIconVisible || this.hasLeadingSlot;
+    }
+    get hasTrailingSlot() {
+        return this.hasElContent('[slot="trailing"]');
+    }
+    get isDismissManual() {
+        return this.dismissMode === 'manual';
+    }
+    get hasTrailing() {
+        return this.hasTrailingSlot || this.isDismissManual;
+    }
+    get hasContent() {
+        var _a;
+        return ((_a = this.host.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) > 0;
+    }
+    get hasActionLink() {
+        return typeof (this.href) == 'string' && typeof (this.action) == 'string';
+    }
+    get hasActionSlot() {
+        return this.hasElContent('[slot="action"]');
+    }
+    get hasAction() {
+        return this.hasActionLink || this.hasActionSlot;
+    }
+    get hasHeadlineSlot() {
+        return this.hasElContent('[slot="headline"]');
+    }
+    get hasHeadline() {
+        return typeof (this.headline) == 'string' || this.hasHeadlineSlot;
+    }
+    get hasDelay() {
+        return this.delay && this.delay > 0;
+    }
+    get isError() {
+        return this.status === 'error';
+    }
+    get leadingIconName() {
+        if (this.leadingIcon)
+            return this.leadingIcon;
+        switch (this.status) {
+            case 'info':
+                return 'circled-information-i';
+            case 'success':
+                return 'circled-check';
+            case 'warning':
+                return 'circled-exclamation-mark';
+            case 'error':
+                return 'triangle-with-exclamation-mark';
+            default:
+                return 'circled-information-i';
+        }
+    }
+    componentWillLoad() {
+        // Set initial state but don't trigger reveal yet - let mutation observer handle it
+        this.isOpen = this.open;
+    }
+    async componentDidLoad() {
+        this.host.addEventListener('animationend', this.handleAnimationEnd);
+        // Measure and store the toast height for smooth initial fade-in animation
+        await this.measureAndPrepareHeight();
+        // Start auto-dismiss timer if configured and toast is initially open
+        if (this.isOpen && !this.isDismissManual && this.hasDelay) {
+            this.startDelayTimer();
+        }
+    }
+    updateHeightVariable() {
+        // Use requestAnimationFrame to ensure the element is fully rendered
+        requestAnimationFrame(() => {
+            if (this.host.offsetHeight > 0) {
+                this.host.style.setProperty('--r-toast--host--height-expanded', `${this.host.offsetHeight}px`);
+            }
+        });
+    }
+    disconnectedCallback() {
+        this.host.removeEventListener('animationend', this.handleAnimationEnd);
+        // Clear pending timers to prevent events from firing after component is removed
+        if (this.delayTimer)
+            clearTimeout(this.delayTimer);
+        if (this.removalTimer)
+            clearTimeout(this.removalTimer);
+    }
+    render() {
+        const { headline, href, action, target, trailingIcon } = this;
+        const hostAttrs = this.announced ? {
+            role: 'alert',
+            'aria-live': this.isError ? 'assertive' : 'polite'
+        } : {
+            role: 'region',
+            'aria-label': this.getElContent('[slot="headline"]') || this.headline || null
+        };
+        const actionAttrs = { href, target };
+        const leadingIconAttrs = {
+            name: this.leadingIconName,
+            size: 'm'
+        };
+        const trailingIconAttrs = {
+            name: trailingIcon,
+            size: 'm'
+        };
+        return (index.h(index.Host, Object.assign({ key: '011a8bc8e8a873265a9f239290f479d37c01bedf' }, hostAttrs, { id: this.uniqueId, "data-visually-hidden": `${this.isOpen ? 'false' : 'true'}`, style: { visibility: this.isOpen ? 'visible' : 'hidden' } }), index.h("div", { key: '04b15f304e0870df9d420f838463d23a5b44e0c8', class: "r-toast" }, this.hasLeading &&
+            index.h("div", { key: '1f093aa61c368f7cfaf250c1c67e9cdeeffc004f', class: "r-toast--leading" }, this.hasLeadingSlot && index.h("slot", { key: 'a60995cbcae0f7f89698696f8430e70905ffab52', name: "leading" }), this.leadingIconVisible && index.h("r-icon", Object.assign({ key: '4828bd01672cade715b713b9ae0fc711c4e3ae28', class: "r-toast--leading-icon" }, leadingIconAttrs))), index.h("div", { key: 'ff6be09bfb6c97c00fda03fe8b87cd41e7d6b5e3', class: "r-toast--main" }, this.hasHeadline &&
+            index.h("h2", { key: 'd127a98f7f215a490df84131fc213f83badce1ab', class: "r-toast--headline" }, index.h("slot", { key: 'b848f1596357d6806ca557b86bf18a7d476d7d61', name: "headline" }, headline)), this.hasContent &&
+            index.h("div", { key: 'a54472f865378dc9c0b387e3bd0b844bcef3e270', class: "r-toast--content r-typography" }, index.h("slot", { key: 'e5451f47f218f8c40c99acddbec8c36d683d00ca', onSlotchange: this.handleSlotChange })), this.hasAction &&
+            index.h("div", { key: 'da37911c654dd01adc69dbcb7e26fd06b29fef6d', class: "r-toast--action" }, index.h("slot", { key: 'b0a1aa508b2d9de350a1faa7ef7667c088f801fe', name: "action" }, this.hasActionLink &&
+                index.h("r-button", Object.assign({ key: 'b0473bb3b8d24ccd2b26a3e588ae58c21e026b59', class: "r-toast--action-link", variant: "text-inline", size: "small" }, actionAttrs), action)))), this.hasTrailing &&
+            index.h("div", { key: '69711c390acb6ca35f2ddfd350910f1e6c080f69', class: "r-toast--trailing" }, this.hasTrailingSlot && index.h("slot", { key: 'f5a1da0280b06c562c4b4c26a7d505c2cbf80903', name: "trailing" }), this.isDismissManual &&
+                index.h("r-icon-button", Object.assign({ key: '53f5d398b82066da7ebfba497efcc42845134e3c' }, trailingIconAttrs, { class: "r-toast--trailing-button", onClick: this.handleTrailingButtonClick, label: this.dismissLabel }), index.h("slot", { key: '0fa33220eff7b05ff9580bd62a658ee67b70c09e', name: "dismiss" }))))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": ["handleOpenChange"]
+    }; }
+};
+Toast.style = toastCss;
+
+exports.r_toast = Toast;