import { h, Build } from "@stencil/core";
import { formatDistanceToNow } from "date-fns";
import { translate, getTranslations } from "../../utils/locale.utils";
import * as dateFnsLocales from "date-fns/locale";
import DOMPurify from "dompurify";
import { WarningFilled, InfoCircleFilled, CheckCircleFilled, CloseCircleFilled, UpCircleFilled, QuestionCircleFilled, DownOutlined } from "@ant-design/icons-svg";
import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpers";
import { BLOCK_ELEMENT_REGEX, MAX_NOTIFICATION_LINES, MAX_NOTIFICATION_TEXT_LENGTH } from "./constants";
import { truncate } from "../../utils/utils";
import { deleteMessage, markAsRead } from "../../api/methods";
const systemIcons = {
    warning: {
        icon: renderIconDefinitionToSVGElement(WarningFilled, {
            extraSVGAttrs: { width: '20px', height: '20px', fill: '#FFF000' }
        })
    },
    info: {
        icon: renderIconDefinitionToSVGElement(InfoCircleFilled, {
            extraSVGAttrs: { width: '20px', height: '20px', fill: '#0000FF' }
        })
    },
    up: {
        icon: renderIconDefinitionToSVGElement(UpCircleFilled, {
            extraSVGAttrs: { width: '20px', height: '20px', fill: '#A1A1B2' }
        })
    },
    question: {
        icon: renderIconDefinitionToSVGElement(QuestionCircleFilled, {
            extraSVGAttrs: { width: '20px', height: '20px', fill: '#A1A1B2' }
        })
    },
    success: {
        icon: renderIconDefinitionToSVGElement(CheckCircleFilled, {
            extraSVGAttrs: { width: '20px', height: '20px', fill: '#4D9980' }
        })
    },
    error: {
        icon: renderIconDefinitionToSVGElement(CloseCircleFilled, {
            extraSVGAttrs: { width: '20px', height: '20px', fill: '#E54545' }
        })
    },
    arrowDown: {
        icon: renderIconDefinitionToSVGElement(DownOutlined, {
            extraSVGAttrs: { width: '16px', height: '16px', fill: '#A1A1B2' }
        })
    }
};
const dateFnsLocale = (lang) => {
    return lang in dateFnsLocales ? dateFnsLocales[lang] : dateFnsLocales.enUS;
};
export class NutsNotification {
    constructor() {
        this.toggleSettingsModal = (e) => {
            e.stopImmediatePropagation();
            this.showSettingsModal = !this.showSettingsModal;
            this.settingsOpened.emit(this.messageId);
        };
        this.toggleNotificationRead = async (event) => {
            event === null || event === void 0 ? void 0 : event.stopImmediatePropagation();
            const unread = this.messageRead;
            const markAsReadBody = {
                messageId: this.messageId,
                mark: {
                    seen: !unread,
                    read: !unread
                }
            };
            const { messageRead, messageSeen, showSettingsModal } = await markAsRead({
                baseUrl: this.baseUrl,
                body: markAsReadBody,
                token: this.token,
                unread
            });
            this.messageReadEmitter.emit({
                messageId: this.messageId,
                mark: {
                    seen: messageSeen,
                    read: messageRead
                }
            });
            this.messageRead = messageRead;
            this.messageSeen = messageSeen;
            this.showSettingsModal = showSettingsModal;
        };
        this.deleteNotification = async () => {
            const deleteMessageResponse = await deleteMessage({
                baseUrl: this.baseUrl,
                token: this.token,
                messageId: this.messageId
            });
            this.showSettingsModal = deleteMessageResponse;
            if (deleteMessageResponse) {
                return;
            }
            this.messageDeteled.emit(this.messageId);
        };
        this.accordionArrowClickHandler = (e) => {
            e.stopImmediatePropagation();
            this.notificationActionHandler();
            this.markNotificationAsRead();
        };
        this.markNotificationAsRead = async (event) => {
            if (this.messageRead)
                return;
            this.toggleNotificationRead(event);
        };
        this.notificationActionHandler = () => {
            var _a, _b, _c;
            if (!Build.isBrowser)
                return;
            if (((_a = this.displayedContent) === null || _a === void 0 ? void 0 : _a.length) !== ((_b = this.content) === null || _b === void 0 ? void 0 : _b.length) && this.displayedContent !== this.content) {
                this.displayedContent = this.content;
                this.dropdownArrowRef.classList.add('FlipX');
                return;
            }
            if ((this.notificationAction === 'default' || !this.notificationAction) && this.redirectUrl.length > 0) {
                window.location.href = this.redirectUrl;
                return;
            }
            if (this.notificationAction === 'postMessage') {
                window.postMessage({ type: 'NotificationRedirect', url: this.redirectUrl }, window.location.href);
                return;
            }
            const fullyStrippedContent = DOMPurify.sanitize(this.content, { ALLOWED_TAGS: [] });
            if ((fullyStrippedContent === null || fullyStrippedContent === void 0 ? void 0 : fullyStrippedContent.length) <= this.maxTextLength &&
                (((_c = this.content) === null || _c === void 0 ? void 0 : _c.match(BLOCK_ELEMENT_REGEX)) || []).length <= this.maxLines) {
                return;
            }
            this.displayedContent = truncate(this.content, this.maxTextLength, this.maxLines);
            this.dropdownArrowRef.classList.remove('FlipX');
        };
        this.setClientStyling = () => {
            let sheet = document.createElement('style');
            sheet.innerHTML = this.clientStyling;
            this.stylingContainer.prepend(sheet);
        };
        this.setClientStylingURL = () => {
            let url = new URL(this.clientStylingUrl);
            let cssFile = document.createElement('style');
            fetch(url.href)
                .then((res) => res.text())
                .then((data) => {
                cssFile.innerHTML = data;
                setTimeout(() => {
                    this.stylingContainer.prepend(cssFile);
                }, 1);
            })
                .catch((err) => {
                console.log('error ', err);
            });
        };
        this.assignRefToStylingContainer = (ref) => {
            this.stylingContainer = ref;
        };
        this.assignRefToDropdownArrow = (ref) => {
            this.dropdownArrowRef = ref;
        };
        this.badge = undefined;
        this.content = undefined;
        this.date = undefined;
        this.showSettings = undefined;
        this.read = undefined;
        this.seen = undefined;
        this.language = undefined;
        this.sessionId = undefined;
        this.subscriberId = undefined;
        this.userId = undefined;
        this.messageId = undefined;
        this.operatorId = undefined;
        this.token = undefined;
        this.backendUrl = undefined;
        this.redirectUrl = undefined;
        this.notificationAction = undefined;
        this.clientStylingUrl = undefined;
        this.translationUrl = '';
        this.clientStyling = '';
        this.maxTextLength = MAX_NOTIFICATION_TEXT_LENGTH;
        this.maxLines = MAX_NOTIFICATION_LINES;
        this.showSettingsModal = false;
        this.messageSeen = false;
        this.messageRead = false;
        this.displayedContent = undefined;
        this.limitStylingAppends = false;
    }
    allNotificationsReadHandler() {
        this.messageSeen = true;
        this.messageRead = true;
    }
    settingsOpenedHandler(event) {
        if (event.detail != this.messageId) {
            this.showSettingsModal = false;
        }
    }
    clickOutsideHandle(ev) {
        if (ev.composedPath().some((elem) => this.el === elem)) {
            return;
        }
        this.showSettingsModal = false;
    }
    handleStylingChange(newValue, oldValue) {
        if (newValue !== oldValue)
            this.setClientStyling();
    }
    handleStylingUrlChange(newValue, oldValue) {
        if (newValue !== oldValue)
            this.setClientStylingURL();
    }
    handleNewTranslations() {
        getTranslations(this.translationUrl);
    }
    componentDidRender() {
        // start custom styling area
        if (!this.limitStylingAppends && this.stylingContainer) {
            if (this.clientStyling)
                this.setClientStyling();
            if (this.clientStylingUrl)
                this.setClientStylingURL();
            this.limitStylingAppends = true;
        }
        // end custom styling area
    }
    async componentWillLoad() {
        this.maxTextLength = Number(this.maxTextLength);
        this.maxLines = Number(this.maxLines);
        if (this.translationUrl.length > 2) {
            await getTranslations(this.translationUrl);
        }
    }
    connectedCallback() {
        var _a;
        this.messageSeen = this.seen;
        this.messageRead = this.read;
        const fullyStrippedContent = DOMPurify.sanitize(this.content, { ALLOWED_TAGS: [] });
        if ((fullyStrippedContent === null || fullyStrippedContent === void 0 ? void 0 : fullyStrippedContent.length) > this.maxTextLength ||
            (((_a = this.content) === null || _a === void 0 ? void 0 : _a.match(BLOCK_ELEMENT_REGEX)) || []).length) {
            this.displayedContent = truncate(this.content, this.maxTextLength, this.maxLines);
        }
        else {
            this.displayedContent = this.content;
        }
        this.baseUrl = `${this.backendUrl}/v1/${this.operatorId}`;
    }
    render() {
        var _a, _b, _c;
        const sanitizedNotificationBody = DOMPurify.sanitize(this.displayedContent, {
            ALLOW_UNKNOWN_PROTOCOLS: true,
            ADD_ATTR: ['target', 'rel'],
            ALLOWED_TAGS: [
                'b',
                'u',
                'i',
                'br',
                'a',
                'em',
                'h1',
                'h2',
                'h3',
                'h4',
                'h5',
                'h6',
                'strong',
                'p',
                'i',
                'small',
                'mark',
                'del',
                'b',
                's',
                'ins',
                'sub',
                'sup',
                'var',
                'cite',
                'q',
                'blockquote',
                'img'
            ]
        });
        return (h("div", { key: 'a6e5c8ad297e9c99dc4955ec7aad14b201abf523', class: "Wrapper", onClick: this.markNotificationAsRead }, h("div", { key: '1e92d30f79d7eda3ee3d2592299bc4969cf41ede', class: 'NotificationContainer' + (this.messageSeen ? '' : ' Unseen'), ref: this.assignRefToStylingContainer, onClick: this.notificationActionHandler }, this.badge ? (h("div", { class: "AvatarContainer" }, h("div", { class: "Avatar" }, ((_a = systemIcons[this.badge]) === null || _a === void 0 ? void 0 : _a.icon) ? (h("div", { innerHTML: systemIcons[this.badge].icon })) : (h("img", { class: "AvatarImage", src: this.badge }))))) : (''), h("div", { key: 'c6df1cc1801ac038933ebc8986c66f2cf81c3833', class: "ContentContainer" }, h("div", { key: 'f15effff484f5f8679e31d05a794ac9ffd6462a8', innerHTML: sanitizedNotificationBody, class: "NotificationBody" }), h("p", { key: '24966927ff1e452a00482dfb9d9527a1d1d85742', class: "Date" }, formatDistanceToNow(new Date(this.date), {
            addSuffix: true,
            locale: dateFnsLocale(this.language)
        }))), h("div", { key: '71556828f255616171d3003b9a1b71f8c085d3f4', class: "RightActionsContainer" }, h("div", { key: 'e15d3cd943e119c5d9f221083cb1a7fe20b6995a', class: "Settings", onClick: this.toggleSettingsModal }, h("svg", { key: '1af781321dc8f23582f33ed55061012242236cc0', width: "24", height: "24", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'e79e7ef95efef24b70a2ba6389e57f385ea6a266', d: "M20.625 15.5C20.625 16.5547 21.4453 17.375 22.5 17.375C23.5156 17.375 24.375 16.5547 24.375 15.5C24.375 14.4844 23.5156 13.625 22.5 13.625C21.4453 13.625 20.625 14.4844 20.625 15.5ZM9.375 15.5C9.375 14.4844 8.51562 13.625 7.5 13.625C6.44531 13.625 5.625 14.4844 5.625 15.5C5.625 16.5547 6.44531 17.375 7.5 17.375C8.51562 17.375 9.375 16.5547 9.375 15.5ZM16.875 15.5C16.875 14.4844 16.0156 13.625 15 13.625C13.9453 13.625 13.125 14.4844 13.125 15.5C13.125 16.5547 13.9453 17.375 15 17.375C16.0156 17.375 16.875 16.5547 16.875 15.5Z", fill: "currentColor" }))), (((_b = DOMPurify.sanitize(this.content, { ALLOWED_TAGS: [] })) === null || _b === void 0 ? void 0 : _b.length) > this.maxTextLength ||
            (((_c = this.content) === null || _c === void 0 ? void 0 : _c.match(BLOCK_ELEMENT_REGEX)) || []).length > this.maxLines) && (h("div", { key: '56cdc3008e063cd38f1aeea1ce5aee111d97862b', class: "AccordionArrow", innerHTML: systemIcons.arrowDown.icon, ref: this.assignRefToDropdownArrow, onClick: this.accordionArrowClickHandler })))), this.showSettingsModal ? (h("div", { class: "SettingsDropdown" }, h("button", { onClick: this.toggleNotificationRead }, h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M14.9434 5.17969C14.2109 4.59375 13.625 4.125 10.1387 1.60547C9.64062 1.25391 8.67383 0.375 8 0.375V0.404297C7.9707 0.404297 7.9707 0.375 7.9707 0.375C7.29688 0.375 6.33008 1.25391 5.83203 1.60547C2.3457 4.125 1.75977 4.59375 1.02734 5.17969C0.675781 5.44336 0.5 5.85352 0.5 6.26367V13.9688C0.5 14.7598 1.11523 15.375 1.90625 15.375H14.0938C14.8555 15.375 15.5 14.7598 15.5 13.9688V6.26367C15.5 5.85352 15.2949 5.44336 14.9434 5.17969ZM9.37695 11.1562C8.9668 11.4785 8.46875 11.6543 8 11.6543C7.50195 11.6543 7.00391 11.4785 6.59375 11.1562L2.375 7.8457V6.49805C2.99023 6 3.72266 5.44336 6.94531 3.12891C7.0332 3.04102 7.15039 2.95312 7.26758 2.86523C7.41406 2.74805 7.73633 2.48438 8 2.33789C8.23438 2.48438 8.55664 2.74805 8.70312 2.86523C8.82031 2.95312 8.9375 3.04102 9.02539 3.12891C12.2188 5.44336 12.9805 6 13.625 6.49805V7.8457L9.37695 11.1562Z", fill: "currentColor" })), translate(this.messageRead ? 'markAsUnread' : 'markAsRead', this.language)), h("button", { onClick: this.deleteNotification }, h("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M4.375 15.4375C4.375 16.1758 4.94922 16.75 5.6875 16.75H13.5625C14.2734 16.75 14.875 16.1758 14.875 15.4375V6.25H4.375V15.4375ZM11.8125 8.4375C11.8125 8.21875 12.0039 8 12.25 8C12.4688 8 12.6875 8.21875 12.6875 8.4375V14.5625C12.6875 14.8086 12.4688 15 12.25 15C12.0039 15 11.8125 14.8086 11.8125 14.5625V8.4375ZM9.1875 8.4375C9.1875 8.21875 9.37891 8 9.625 8C9.84375 8 10.0625 8.21875 10.0625 8.4375V14.5625C10.0625 14.8086 9.84375 15 9.625 15C9.37891 15 9.1875 14.8086 9.1875 14.5625V8.4375ZM6.5625 8.4375C6.5625 8.21875 6.75391 8 7 8C7.21875 8 7.4375 8.21875 7.4375 8.4375V14.5625C7.4375 14.8086 7.21875 15 7 15C6.75391 15 6.5625 14.8086 6.5625 14.5625V8.4375ZM15.3125 3.625H12.25L11.9219 2.99609C11.8398 2.85938 11.7031 2.75 11.5391 2.75H7.68359C7.51953 2.75 7.38281 2.85938 7.30078 2.99609L7 3.625H3.9375C3.69141 3.625 3.5 3.84375 3.5 4.0625V4.9375C3.5 5.18359 3.69141 5.375 3.9375 5.375H15.3125C15.5312 5.375 15.75 5.18359 15.75 4.9375V4.0625C15.75 3.84375 15.5312 3.625 15.3125 3.625Z", fill: "currentColor" })), translate('removeMessage', this.language)))) : ('')));
    }
    static get is() { return "nuts-notification"; }
    static get originalStyleUrls() {
        return {
            "$": ["nuts-notification.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["nuts-notification.css"]
        };
    }
    static get properties() {
        return {
            "badge": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Src for badge / avatar"
                },
                "attribute": "badge",
                "reflect": true
            },
            "content": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Text content of the notification"
                },
                "attribute": "content",
                "reflect": true
            },
            "date": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Date of the notification"
                },
                "attribute": "date",
                "reflect": true
            },
            "showSettings": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Wether or not to show notification settings"
                },
                "attribute": "show-settings",
                "reflect": true
            },
            "read": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Wether or not the item has been read"
                },
                "attribute": "read",
                "reflect": true
            },
            "seen": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Wether or not the item has been seen"
                },
                "attribute": "seen",
                "reflect": true
            },
            "language": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Language code of the content"
                },
                "attribute": "language",
                "reflect": true
            },
            "sessionId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The sessionID of the user"
                },
                "attribute": "session-id",
                "reflect": true
            },
            "subscriberId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The subscriberID"
                },
                "attribute": "subscriber-id",
                "reflect": true
            },
            "userId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Unique ID of the user who receives the notification"
                },
                "attribute": "user-id",
                "reflect": true
            },
            "messageId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Unique ID of the notification content"
                },
                "attribute": "message-id",
                "reflect": true
            },
            "operatorId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Unique ID of the operator domain"
                },
                "attribute": "operator-id",
                "reflect": true
            },
            "token": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Token used in authorization of notification transactions"
                },
                "attribute": "token",
                "reflect": true
            },
            "backendUrl": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Endpoint for notification transactions"
                },
                "attribute": "backend-url",
                "reflect": true
            },
            "redirectUrl": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Redirect address in case of external url"
                },
                "attribute": "redirect-url",
                "reflect": true
            },
            "notificationAction": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Determines notification behaviour onClick"
                },
                "attribute": "notification-action",
                "reflect": true
            },
            "clientStylingUrl": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Custom styling passed as a URL"
                },
                "attribute": "client-styling-url",
                "reflect": true
            },
            "translationUrl": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Translations via URL"
                },
                "attribute": "translation-url",
                "reflect": true,
                "defaultValue": "''"
            },
            "clientStyling": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Clienty styling passed as a string"
                },
                "attribute": "client-styling",
                "reflect": true,
                "defaultValue": "''"
            },
            "maxTextLength": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Max length of notification text before truncating"
                },
                "attribute": "max-text-length",
                "reflect": true,
                "defaultValue": "MAX_NOTIFICATION_TEXT_LENGTH"
            },
            "maxLines": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Max number of lines before truncating"
                },
                "attribute": "max-lines",
                "reflect": true,
                "defaultValue": "MAX_NOTIFICATION_LINES"
            }
        };
    }
    static get states() {
        return {
            "showSettingsModal": {},
            "messageSeen": {},
            "messageRead": {},
            "displayedContent": {},
            "limitStylingAppends": {}
        };
    }
    static get events() {
        return [{
                "method": "messageDeteled",
                "name": "messageDeleted",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "settingsOpened",
                "name": "settingsOpened",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "messageReadEmitter",
                "name": "messageRead",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "clientStyling",
                "methodName": "handleStylingChange"
            }, {
                "propName": "clientStylingUrl",
                "methodName": "handleStylingUrlChange"
            }, {
                "propName": "translationUrl",
                "methodName": "handleNewTranslations"
            }];
    }
    static get listeners() {
        return [{
                "name": "allNotificationsRead",
                "method": "allNotificationsReadHandler",
                "target": "window",
                "capture": false,
                "passive": false
            }, {
                "name": "settingsOpened",
                "method": "settingsOpenedHandler",
                "target": "window",
                "capture": false,
                "passive": false
            }, {
                "name": "click",
                "method": "clickOutsideHandle",
                "target": "window",
                "capture": false,
                "passive": false
            }];
    }
}
