gov-gui/dist/collection/components/gov-toast/gov-toast.js

Gov UI Component Library Typscript Build

import { h } from "@stencil/core";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class GovToaster {
    constructor() {
        this.message = 'Default message'; // The message to display in the toast
        this.variant = 'info'; // Type of the toast
        this.duration = 6000; // Duration for which the toast is visible (in milliseconds)
        this.visible = false; // State to track visibility of the toast
        this.stackIndex = 0; // Position of the toast in the stack
        this.animationDelay = '2s';
        this.allClasses = '';
    }
    //watching for any change in animations to trigger them
    watchAnimations() {
        this.provideClass();
    }
    watchAnimationsDelay() {
        this.provideClass();
    }
    watchAnimationsSpeed() {
        this.provideClass();
    }
    // Method to show the toaster
    async show() {
        // Add this toast to the stack
        GovToaster.activeToasts.push(this);
        this.stackIndex = GovToaster.activeToasts.length - 1; // Set the index for positioning
        this.visible = true;
        setTimeout(() => {
            this.hide();
        }, this.duration);
    }
    // Method to hide the toaster
    hide() {
        this.visible = false;
        // Remove this toast from the stack after animation
        setTimeout(() => {
            const index = GovToaster.activeToasts.indexOf(this);
            if (index > -1) {
                GovToaster.activeToasts.splice(index, 1);
                // Update positions for remaining toasts
                GovToaster.activeToasts.forEach((toast, i) => {
                    toast.stackIndex = i;
                });
            }
        }, 300); // Match transition duration
    }
    // inject the animations and styles on component load
    componentWillLoad() {
        const animationClasses = getAnimationClasses({
            animation: this.animation,
            animationDelay: this.animationDelay,
            animationSpeed: this.animationSpeed
        });
        this.allClasses = getGlobalPropsClasses({
            classes: ' ' + animationClasses,
        });
    }
    //Called on change of any animation related property to trigger change
    provideClass() {
        const animationClasses = getAnimationClasses({
            animation: this.animation,
            animationDelay: this.animationDelay,
            animationSpeed: this.animationSpeed
        });
        this.allClasses = getGlobalPropsClasses({
            classes: ' ' + animationClasses,
        });
    }
    render() {
        const bottomPosition = GovToaster.toastHeight * this.stackIndex + 20;
        return (h("div", { key: '09a76a5fdbe4701a3940011711accbdcebd79268', class: {
                toaster: true,
                [this.variant]: true,
                [this.allClasses]: true,
                visible: this.visible,
            }, style: { bottom: `${bottomPosition}px` } }, this.icon && h("div", { key: '9ee2860c69edf1d1914b1f2c5e67c8e01fce86b7', class: this.variant == 'white' ? "toast-white-icon" : "toast-icon" }, " ", h("gov-icon", { key: '6b0ccef60cf8c7e39c54376a0125878aa45d1876', name: this.icon, size: "medium", variant: this.variant })), h("div", { key: 'cec8caaef14245c5deffae8e4d0ffc4dad2ed9cb', class: "toast-content" }, this.message), h("button", { key: 'e553be542be8400cf57f28027dd5c93e8fa62b87', class: "close-btn", onClick: () => this.hide() }, "x")));
    }
    static get is() { return "gov-toaster"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["./gov-toast.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["gov-toast.css"]
        };
    }
    static get properties() {
        return {
            "message": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "message",
                "reflect": false,
                "defaultValue": "'Default message'"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'success' | 'danger' | 'warning' | 'info' | 'white'",
                    "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\" | \"white\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "variant",
                "reflect": false,
                "defaultValue": "'info'"
            },
            "duration": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "duration",
                "reflect": false,
                "defaultValue": "6000"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "icon",
                "reflect": false
            },
            "animation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "animation",
                "reflect": false
            },
            "animationDelay": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'2s' | '3s' | '4s' | '5s'",
                    "resolved": "\"2s\" | \"3s\" | \"4s\" | \"5s\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "animation-delay",
                "reflect": false,
                "defaultValue": "'2s'"
            },
            "animationSpeed": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'slow' | 'slower' | 'fast' | 'faster'",
                    "resolved": "\"fast\" | \"faster\" | \"slow\" | \"slower\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "animation-speed",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "visible": {},
            "stackIndex": {}
        };
    }
    static get methods() {
        return {
            "show": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            }
        };
    }
    static get watchers() {
        return [{
                "propName": "animation",
                "methodName": "watchAnimations"
            }, {
                "propName": "animationDelay",
                "methodName": "watchAnimationsDelay"
            }, {
                "propName": "animationSpeed",
                "methodName": "watchAnimationsSpeed"
            }];
    }
}
GovToaster.activeToasts = []; // Shared list of active toasts
GovToaster.toastHeight = 80; // Approximate height of each toast (adjust based on CSS)
//# sourceMappingURL=gov-toast.js.map