@justifi/webcomponents 6.7.3 → 6.8.0

package/dist/collection/components/business-forms/payment-provisioning/plaid-verification/plaid-verification.js

@@ -0,0 +1,433 @@
+import { h } from "@stencil/core";
+import { Button, StyledHost } from "../../../../ui-components";
+import { PlaidService } from "../../../../api/services/plaid.service";
+import { ComponentErrorSeverity } from "../../../../api/ComponentError";
+import { PlaidErrorCodes, PLAID_ERROR_MESSAGES, PLAID_ERROR_SEVERITY, } from "../../../../api/Plaid";
+import plaidLogoSvg from "../../../../assets/plaid-icon.svg";
+import { buttonSecondary } from "../../../../styles/parts";
+export class PlaidVerification {
+    constructor() {
+        this.linkToken = null;
+        this.linkTokenId = null;
+        this.plaidLink = null;
+        this.isAuthenticating = false;
+        this.isSuccess = false;
+        this.error = null;
+        this.isLoading = false;
+        this.plaidService = new PlaidService();
+        this.abortController = null;
+        this.timeoutId = null;
+        this.initializePlaidLink = async () => {
+            try {
+                // Check if Plaid is available globally
+                if (typeof window.Plaid === 'undefined') {
+                    this.handleError({
+                        code: PlaidErrorCodes.PLAID_SDK_LOAD_FAILED,
+                        message: PLAID_ERROR_MESSAGES[PlaidErrorCodes.PLAID_SDK_LOAD_FAILED],
+                        severity: PLAID_ERROR_SEVERITY[PlaidErrorCodes.PLAID_SDK_LOAD_FAILED],
+                        retryable: true,
+                        userAction: 'Refresh the page and try again',
+                    });
+                    return;
+                }
+                // Get link token from backend
+                await this.getLinkToken();
+                if (!this.linkToken) {
+                    this.handleError({
+                        code: PlaidErrorCodes.PLAID_LINK_TOKEN_FAILED,
+                        message: PLAID_ERROR_MESSAGES[PlaidErrorCodes.PLAID_LINK_TOKEN_FAILED],
+                        severity: PLAID_ERROR_SEVERITY[PlaidErrorCodes.PLAID_LINK_TOKEN_FAILED],
+                        retryable: true,
+                        userAction: 'Click to try again',
+                    });
+                    return;
+                }
+                // Initialize Plaid Link
+                const Plaid = window.Plaid;
+                this.plaidLink = Plaid.create({
+                    token: this.linkToken,
+                    onSuccess: this.handlePlaidSuccess,
+                    onExit: this.handlePlaidExit,
+                    onEvent: this.handlePlaidEvent,
+                    onLoad: this.handlePlaidLoad,
+                });
+            }
+            catch (error) {
+                this.handleError({
+                    code: PlaidErrorCodes.PLAID_LINK_INIT_FAILED,
+                    message: PLAID_ERROR_MESSAGES[PlaidErrorCodes.PLAID_LINK_INIT_FAILED],
+                    severity: PLAID_ERROR_SEVERITY[PlaidErrorCodes.PLAID_LINK_INIT_FAILED],
+                    originalError: error,
+                    retryable: true,
+                    userAction: 'Click to try again',
+                });
+            }
+        };
+        this.getLinkToken = async () => {
+            var _a, _b, _c, _d;
+            try {
+                if (!this.authToken || !this.accountId) {
+                    this.handleError({
+                        code: PlaidErrorCodes.PLAID_LINK_TOKEN_FAILED,
+                        message: 'Missing authentication. Please provide authToken and accountId.',
+                        severity: ComponentErrorSeverity.ERROR,
+                        retryable: false,
+                        userAction: 'Provide required props',
+                    });
+                    return;
+                }
+                // Create abort controller for timeout handling
+                this.abortController = new AbortController();
+                // Set timeout for the request
+                this.timeoutId = setTimeout(() => {
+                    var _a;
+                    (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+                }, 30000); // 30 second timeout
+                const response = await this.plaidService.getLinkTokenForVerification(this.authToken, this.businessId, this.abortController.signal);
+                // Clear timeout
+                if (this.timeoutId) {
+                    clearTimeout(this.timeoutId);
+                    this.timeoutId = null;
+                }
+                if (response.error) {
+                    const errorMessage = typeof response.error === 'string'
+                        ? response.error
+                        : response.error.message || 'Failed to get link token';
+                    throw new Error(errorMessage);
+                }
+                this.linkToken = response.data.link_token;
+                this.linkTokenId = response.data.id;
+            }
+            catch (error) {
+                // Clear timeout
+                if (this.timeoutId) {
+                    clearTimeout(this.timeoutId);
+                    this.timeoutId = null;
+                }
+                let errorCode = PlaidErrorCodes.PLAID_LINK_TOKEN_FAILED;
+                let message = PLAID_ERROR_MESSAGES[errorCode];
+                let retryable = true;
+                // Handle specific error types
+                if (error.name === 'AbortError') {
+                    errorCode = PlaidErrorCodes.PLAID_TIMEOUT;
+                    message = PLAID_ERROR_MESSAGES[errorCode];
+                    retryable = true;
+                }
+                else if (((_a = error.message) === null || _a === void 0 ? void 0 : _a.includes('network')) || ((_b = error.message) === null || _b === void 0 ? void 0 : _b.includes('fetch'))) {
+                    errorCode = PlaidErrorCodes.PLAID_NETWORK_ERROR;
+                    message = PLAID_ERROR_MESSAGES[errorCode];
+                    retryable = true;
+                }
+                else if (((_c = error.message) === null || _c === void 0 ? void 0 : _c.includes('401')) || ((_d = error.message) === null || _d === void 0 ? void 0 : _d.includes('unauthorized'))) {
+                    errorCode = PlaidErrorCodes.PLAID_INVALID_CREDENTIALS;
+                    message = 'Authentication failed. Please check your credentials.';
+                    retryable = false;
+                }
+                this.handleError({
+                    code: errorCode,
+                    message: message,
+                    severity: PLAID_ERROR_SEVERITY[errorCode],
+                    originalError: error,
+                    retryable,
+                    userAction: retryable ? 'Click to try again' : 'Check your credentials',
+                });
+            }
+        };
+        this.openPlaidLink = () => {
+            if (this.plaidLink && this.linkToken) {
+                this.isAuthenticating = true;
+                this.clearError();
+                this.plaidLink.open();
+            }
+        };
+        this.handlePlaidSuccess = async (publicToken, _metadata) => {
+            var _a;
+            this.isAuthenticating = false;
+            this.isLoading = true;
+            this.clearError();
+            try {
+                // Send publicToken to backend
+                const response = await this.plaidService.postPlaidVerifiedBankAccountData(this.authToken, this.businessId, { public_token: publicToken, link_token_id: this.linkTokenId }, (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.signal);
+                if (response.error) {
+                    const errorMessage = typeof response.error === 'string'
+                        ? response.error
+                        : response.error.message || 'Failed to verify bank account';
+                    throw new Error(errorMessage);
+                }
+                // Success - display success message
+                this.isSuccess = true;
+                this.isLoading = false;
+                // Emit success event
+                this.plaidVerificationSuccess.emit({ publicToken, bankAccount: response.data });
+            }
+            catch (error) {
+                this.isLoading = false;
+                this.handleError({
+                    code: PlaidErrorCodes.PLAID_AUTHENTICATION_FAILED,
+                    message: (error === null || error === void 0 ? void 0 : error.message) || 'Failed to verify bank account',
+                    severity: PLAID_ERROR_SEVERITY[PlaidErrorCodes.PLAID_AUTHENTICATION_FAILED],
+                    originalError: error,
+                    retryable: true,
+                    userAction: 'Click to try again',
+                });
+            }
+        };
+        this.handlePlaidExit = (err, _metadata) => {
+            this.isAuthenticating = false;
+            if (err) {
+                this.handlePlaidError(err);
+            }
+        };
+        this.handlePlaidEvent = (eventName, metadata) => {
+            // Handle specific events if needed
+            switch (eventName) {
+                case 'OPEN':
+                    this.isAuthenticating = true;
+                    break;
+                case 'CLOSE':
+                    this.isAuthenticating = false;
+                    break;
+                case 'ERROR':
+                    this.handlePlaidError(metadata);
+                    break;
+            }
+        };
+        this.handlePlaidLoad = () => {
+            // Plaid Link loaded successfully
+        };
+        this.handlePlaidError = (error) => {
+            let errorCode = PlaidErrorCodes.PLAID_AUTHENTICATION_FAILED;
+            let message = PLAID_ERROR_MESSAGES[errorCode];
+            let retryable = true;
+            let userAction = 'Click to try again';
+            // Map Plaid error codes to our error codes
+            if (error.error_code) {
+                switch (error.error_code) {
+                    case 'INVALID_CREDENTIALS':
+                        errorCode = PlaidErrorCodes.PLAID_INVALID_CREDENTIALS;
+                        message = PLAID_ERROR_MESSAGES[errorCode];
+                        retryable = true;
+                        break;
+                    case 'ITEM_LOGIN_REQUIRED':
+                        errorCode = PlaidErrorCodes.PLAID_INVALID_CREDENTIALS;
+                        message = 'Your bank requires re-authentication. Please try again.';
+                        retryable = true;
+                        break;
+                    case 'ITEM_LOCKED':
+                        errorCode = PlaidErrorCodes.PLAID_ACCOUNT_LOCKED;
+                        message = PLAID_ERROR_MESSAGES[errorCode];
+                        retryable = false;
+                        userAction = 'Contact your bank';
+                        break;
+                    case 'INSTITUTION_NOT_RESPONDING':
+                        errorCode = PlaidErrorCodes.PLAID_MAINTENANCE;
+                        message = PLAID_ERROR_MESSAGES[errorCode];
+                        retryable = true;
+                        break;
+                    case 'RATE_LIMIT_EXCEEDED':
+                        errorCode = PlaidErrorCodes.PLAID_RATE_LIMITED;
+                        message = PLAID_ERROR_MESSAGES[errorCode];
+                        retryable = true;
+                        break;
+                    default:
+                        if (error.error_message) {
+                            message = error.error_message;
+                        }
+                        break;
+                }
+            }
+            this.handleError({
+                code: errorCode,
+                message,
+                severity: PLAID_ERROR_SEVERITY[errorCode],
+                originalError: error,
+                retryable,
+                userAction,
+            });
+            this.isAuthenticating = false;
+        };
+        this.handleError = (plaidError) => {
+            this.error = plaidError;
+            this.isLoading = false;
+            // Emit error event for parent components
+            this.plaidVerificationError.emit(plaidError);
+            console.error('Plaid verification error:', plaidError);
+        };
+        this.clearError = () => {
+            if (this.error) {
+                this.error = null;
+            }
+        };
+    }
+    componentDidRender() {
+        if (!this.scriptRef)
+            return;
+        this.scriptRef.onload = () => {
+            this.initializePlaidLink();
+        };
+        this.scriptRef.onerror = () => {
+            this.handleError({
+                code: PlaidErrorCodes.PLAID_SDK_LOAD_FAILED,
+                message: PLAID_ERROR_MESSAGES[PlaidErrorCodes.PLAID_SDK_LOAD_FAILED],
+                severity: PLAID_ERROR_SEVERITY[PlaidErrorCodes.PLAID_SDK_LOAD_FAILED],
+                retryable: true,
+                userAction: 'Refresh the page and try again',
+            });
+        };
+    }
+    disconnectedCallback() {
+        // Clean up timeouts and abort controllers
+        if (this.timeoutId) {
+            clearTimeout(this.timeoutId);
+        }
+        if (this.abortController) {
+            this.abortController.abort();
+        }
+    }
+    render() {
+        const renderErrorState = () => {
+            if (!this.error)
+                return null;
+            const errorClass = this.error.severity === ComponentErrorSeverity.ERROR
+                ? 'text-danger'
+                : this.error.severity === ComponentErrorSeverity.WARNING
+                    ? 'text-warning'
+                    : 'text-info';
+            return (h("div", { class: `${errorClass} mt-2` }, h("small", null, this.error.message), h("br", null), this.error.userAction && (h("small", { class: "text-muted" }, this.error.userAction))));
+        };
+        const renderStatusState = () => {
+            if (this.error)
+                return null;
+            if (this.isLoading) {
+                return (h("div", { class: "text-info mt-2" }, h("small", null, "Verifying bank account...")));
+            }
+            if (this.isSuccess) {
+                return (h("div", { class: "text-success mt-2" }, h("small", null, "\u2713 Bank account verified successfully")));
+            }
+            if (this.isAuthenticating) {
+                return (h("div", { class: "text-info mt-2" }, h("small", null, "Connecting to your bank...")));
+            }
+            return null;
+        };
+        const plaidLogo = (h("img", { class: "plaid-logo-img", src: plaidLogoSvg, alt: "Plaid", title: "Plaid", style: {
+                display: 'inline',
+                width: '20px',
+                height: '20px',
+                marginLeft: '5px',
+                marginTop: '-2px',
+            } }));
+        return (h(StyledHost, null, h("script", { src: "https://cdn.plaid.com/link/v2/stable/link-initialize.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", null, h("div", { class: "mb-3" }, h(Button, { variant: "secondary", type: "button", onClick: (event) => { event.preventDefault(); this.openPlaidLink(); }, disabled: this.isLoading, part: buttonSecondary }, "Link Bank Account with ", plaidLogo)), renderErrorState(), renderStatusState())));
+    }
+    static get is() { return "plaid-verification"; }
+    static get properties() {
+        return {
+            "authToken": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auth-token"
+            },
+            "accountId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "account-id"
+            },
+            "businessId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "business-id"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "linkToken": {},
+            "linkTokenId": {},
+            "plaidLink": {},
+            "isAuthenticating": {},
+            "isSuccess": {},
+            "error": {},
+            "isLoading": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "plaidVerificationSuccess",
+                "name": "plaidVerificationSuccess",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ publicToken: string, bankAccount: any }",
+                    "resolved": "{ publicToken: string; bankAccount: any; }",
+                    "references": {}
+                }
+            }, {
+                "method": "plaidVerificationError",
+                "name": "plaidVerificationError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "PlaidError",
+                    "resolved": "PlaidError",
+                    "references": {
+                        "PlaidError": {
+                            "location": "import",
+                            "path": "../../../../api/Plaid",
+                            "id": "src/api/Plaid.ts::PlaidError"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/modular-checkout/sub-components/plaid-payment-method.js

@@ -5,55 +5,7 @@ import plaidLogoSvg from "../../../assets/plaid-icon.svg";
 import { PlaidService } from "../../../api/services/plaid.service";
 import { ComponentErrorSeverity } from "../../../api/ComponentError";
 import { PAYMENT_METHODS } from "../ModularCheckout";
-// Plaid-specific error codes
-export var PlaidErrorCodes;
-(function (PlaidErrorCodes) {
-    PlaidErrorCodes["PLAID_SDK_LOAD_FAILED"] = "plaid-sdk-load-failed";
-    PlaidErrorCodes["PLAID_LINK_INIT_FAILED"] = "plaid-link-init-failed";
-    PlaidErrorCodes["PLAID_LINK_TOKEN_FAILED"] = "plaid-link-token-failed";
-    PlaidErrorCodes["PLAID_AUTHENTICATION_FAILED"] = "plaid-authentication-failed";
-    PlaidErrorCodes["PLAID_BANK_NOT_SUPPORTED"] = "plaid-bank-not-supported";
-    PlaidErrorCodes["PLAID_TOKEN_EXPIRED"] = "plaid-token-expired";
-    PlaidErrorCodes["PLAID_NETWORK_ERROR"] = "plaid-network-error";
-    PlaidErrorCodes["PLAID_USER_CANCELLED"] = "plaid-user-cancelled";
-    PlaidErrorCodes["PLAID_TIMEOUT"] = "plaid-timeout";
-    PlaidErrorCodes["PLAID_INVALID_CREDENTIALS"] = "plaid-invalid-credentials";
-    PlaidErrorCodes["PLAID_ACCOUNT_LOCKED"] = "plaid-account-locked";
-    PlaidErrorCodes["PLAID_MAINTENANCE"] = "plaid-maintenance";
-    PlaidErrorCodes["PLAID_RATE_LIMITED"] = "plaid-rate-limited";
-})(PlaidErrorCodes || (PlaidErrorCodes = {}));
-// Plaid error message mapping
-const PLAID_ERROR_MESSAGES = {
-    [PlaidErrorCodes.PLAID_SDK_LOAD_FAILED]: 'Unable to load Plaid. Please refresh the page and try again.',
-    [PlaidErrorCodes.PLAID_LINK_INIT_FAILED]: 'Unable to initialize bank connection. Please try again.',
-    [PlaidErrorCodes.PLAID_LINK_TOKEN_FAILED]: 'Unable to connect to bank service. Please try again.',
-    [PlaidErrorCodes.PLAID_AUTHENTICATION_FAILED]: 'Bank authentication failed. Please try again.',
-    [PlaidErrorCodes.PLAID_BANK_NOT_SUPPORTED]: 'Your bank is not currently supported. Please try a different payment method.',
-    [PlaidErrorCodes.PLAID_TOKEN_EXPIRED]: 'Your bank session has expired. Please reconnect your account.',
-    [PlaidErrorCodes.PLAID_NETWORK_ERROR]: 'Network connection issue. Please check your internet connection and try again.',
-    [PlaidErrorCodes.PLAID_USER_CANCELLED]: 'Bank connection was cancelled. Click to try again.',
-    [PlaidErrorCodes.PLAID_TIMEOUT]: 'Bank connection timed out. Please try again.',
-    [PlaidErrorCodes.PLAID_INVALID_CREDENTIALS]: 'Invalid bank credentials. Please check your username and password.',
-    [PlaidErrorCodes.PLAID_ACCOUNT_LOCKED]: 'Your bank account is temporarily locked. Please contact your bank.',
-    [PlaidErrorCodes.PLAID_MAINTENANCE]: 'Bank service is temporarily unavailable. Please try again later.',
-    [PlaidErrorCodes.PLAID_RATE_LIMITED]: 'Too many connection attempts. Please wait a moment and try again.',
-};
-// Plaid error severity mapping
-const PLAID_ERROR_SEVERITY = {
-    [PlaidErrorCodes.PLAID_SDK_LOAD_FAILED]: ComponentErrorSeverity.ERROR,
-    [PlaidErrorCodes.PLAID_LINK_INIT_FAILED]: ComponentErrorSeverity.ERROR,
-    [PlaidErrorCodes.PLAID_LINK_TOKEN_FAILED]: ComponentErrorSeverity.ERROR,
-    [PlaidErrorCodes.PLAID_AUTHENTICATION_FAILED]: ComponentErrorSeverity.ERROR,
-    [PlaidErrorCodes.PLAID_BANK_NOT_SUPPORTED]: ComponentErrorSeverity.WARNING,
-    [PlaidErrorCodes.PLAID_TOKEN_EXPIRED]: ComponentErrorSeverity.WARNING,
-    [PlaidErrorCodes.PLAID_NETWORK_ERROR]: ComponentErrorSeverity.WARNING,
-    [PlaidErrorCodes.PLAID_USER_CANCELLED]: ComponentErrorSeverity.INFO,
-    [PlaidErrorCodes.PLAID_TIMEOUT]: ComponentErrorSeverity.WARNING,
-    [PlaidErrorCodes.PLAID_INVALID_CREDENTIALS]: ComponentErrorSeverity.ERROR,
-    [PlaidErrorCodes.PLAID_ACCOUNT_LOCKED]: ComponentErrorSeverity.ERROR,
-    [PlaidErrorCodes.PLAID_MAINTENANCE]: ComponentErrorSeverity.WARNING,
-    [PlaidErrorCodes.PLAID_RATE_LIMITED]: ComponentErrorSeverity.WARNING,
-};
+import { PlaidErrorCodes, PLAID_ERROR_MESSAGES, PLAID_ERROR_SEVERITY, } from "../../../api/Plaid";
 export class PlaidPaymentMethod {
     constructor() {
         this.isAuthenticating = false;
@@ -834,8 +786,9 @@ export class PlaidPaymentMethod {
                             "id": "global::Promise"
                         },
                         "PlaidError": {
-                            "location": "global",
-                            "id": "global::PlaidError"
+                            "location": "import",
+                            "path": "../../../api/Plaid",
+                            "id": "src/api/Plaid.ts::PlaidError"
                         }
                     },
                     "return": "Promise<PlaidError>"

package/dist/collection/ui-components/custom-popper/custom-popper.js

@@ -5,38 +5,66 @@ export class CustomPopper {
         this.placement = 'bottom';
         this.offset = [0, 10];
         this.strategy = 'absolute';
-        this.trigger = 'click'; // 'click', 'hover', 'focus'
+        this.trigger = 'click';
         this.isOpen = false;
+        this.initialized = false;
+        this.boundHandlers = {
+            show: null,
+            hide: null,
+            handleClick: null,
+        };
+    }
+    onAnchorRefChange(newValue) {
+        if (newValue && this.popperContentRef && !this.initialized) {
+            this.initPopper();
+        }
     }
     componentDidLoad() {
+        if (this.anchorRef && this.popperContentRef) {
+            this.initPopper();
+        }
+    }
+    initPopper() {
+        if (this.initialized)
+            return;
+        this.initialized = true;
+        // Store bound references
+        this.boundHandlers.show = this.show.bind(this);
+        this.boundHandlers.hide = this.hide.bind(this);
+        this.boundHandlers.handleClick = this.handleClick.bind(this);
         this.popperInstance = createPopper(this.anchorRef, this.popperContentRef, this.popperOptions);
         if (this.trigger === 'click') {
-            window.addEventListener('click', this.handleClick.bind(this));
+            window.addEventListener('click', this.boundHandlers.handleClick);
         }
         else if (this.trigger === 'hover') {
-            this.anchorRef.addEventListener('mouseenter', this.show.bind(this));
-            this.anchorRef.addEventListener('mouseleave', this.hide.bind(this));
-            this.popperContentRef.addEventListener('mouseenter', this.show.bind(this));
-            this.popperContentRef.addEventListener('mouseleave', this.hide.bind(this));
+            this.anchorRef.addEventListener('mouseenter', this.boundHandlers.show);
+            this.anchorRef.addEventListener('mouseleave', this.boundHandlers.hide);
+            this.popperContentRef.addEventListener('mouseenter', this.boundHandlers.show);
+            this.popperContentRef.addEventListener('mouseleave', this.boundHandlers.hide);
         }
         else if (this.trigger === 'focus') {
-            this.anchorRef.addEventListener('focus', this.show.bind(this));
-            this.anchorRef.addEventListener('blur', this.hide.bind(this));
+            this.anchorRef.addEventListener('focus', this.boundHandlers.show);
+            this.anchorRef.addEventListener('blur', this.boundHandlers.hide);
         }
     }
     disconnectedCallback() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!this.initialized)
+            return;
+        // Clean up popper instance
+        (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
         if (this.trigger === 'click') {
-            window.removeEventListener('click', this.handleClick.bind(this));
+            window.removeEventListener('click', this.boundHandlers.handleClick);
         }
         else if (this.trigger === 'hover') {
-            this.anchorRef.removeEventListener('mouseenter', this.show.bind(this));
-            this.anchorRef.removeEventListener('mouseleave', this.hide.bind(this));
-            this.popperContentRef.removeEventListener('mouseenter', this.show.bind(this));
-            this.popperContentRef.removeEventListener('mouseleave', this.hide.bind(this));
+            (_b = this.anchorRef) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseenter', this.boundHandlers.show);
+            (_c = this.anchorRef) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', this.boundHandlers.hide);
+            (_d = this.popperContentRef) === null || _d === void 0 ? void 0 : _d.removeEventListener('mouseenter', this.boundHandlers.show);
+            (_e = this.popperContentRef) === null || _e === void 0 ? void 0 : _e.removeEventListener('mouseleave', this.boundHandlers.hide);
         }
         else if (this.trigger === 'focus') {
-            this.anchorRef.removeEventListener('focus', this.show.bind(this));
-            this.anchorRef.removeEventListener('blur', this.hide.bind(this));
+            (_f = this.anchorRef) === null || _f === void 0 ? void 0 : _f.removeEventListener('focus', this.boundHandlers.show);
+            (_g = this.anchorRef) === null || _g === void 0 ? void 0 : _g.removeEventListener('blur', this.boundHandlers.hide);
         }
     }
     handleClick(event) {
@@ -80,7 +108,7 @@ export class CustomPopper {
         this.hideEvent.emit();
     }
     render() {
-        return (h("div", { key: 'd9ed696150f2def459af17d43a2a06e0fb24b2d1' }, h("style", { key: 'eb3f2a09ace3aa7d0d6225947a0d511cf73b107b' }, `
+        return (h("div", { key: '2d57f47cc668826c2a72d70d3a0404837398a646' }, h("style", { key: '6d02bdb47dd36a529d2e8ae3f2b4adad6c8cdf88' }, `
           .popper-content {
             display: none;
           }
@@ -88,7 +116,7 @@ export class CustomPopper {
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '3221d4cc026a4b9ef06aaaa38a5ad4bc5f190f81', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '6481dcba1041571349cb8c91c350c497453fe054' }))));
+          `), h("div", { key: 'fdcb769c70b92532427e09fdaa5bbdffc59c8ac3', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '1cdd517d323181dee0f2a345406d07432889ee21' }))));
     }
     static get is() { return "custom-popper"; }
     static get properties() {
@@ -200,7 +228,7 @@ export class CustomPopper {
                         }
                     }
                 },
-                "required": true,
+                "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -249,4 +277,10 @@ export class CustomPopper {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "anchorRef",
+                "methodName": "onAnchorRefChange"
+            }];
+    }
 }