@pangz/ng-cloudflare-turnstile/fesm2022/pangz-ng-cloudflare-turnstile.mjs

An intuitive, lightweight and easy to integrate cloudflare-turnstile component for Angular.

import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output } from '@angular/core';

var DevSiteKey;
(function (DevSiteKey) {
    DevSiteKey["ALWAYS_PASSES"] = "1x00000000000000000000AA";
    DevSiteKey["ALWAYS_BLOCKS"] = "2x00000000000000000000AB";
    DevSiteKey["ALWAYS_PASSES_INVISIBLE"] = "1x00000000000000000000BB";
    DevSiteKey["ALWAYS_BLOCKS_INVISIBLE"] = "2x00000000000000000000BB";
    DevSiteKey["FORCE_INTERACTIVE_CHALLENGE"] = "3x00000000000000000000FF";
})(DevSiteKey || (DevSiteKey = {}));
var Language;
(function (Language) {
    Language["AUTO"] = "auto";
    Language["ARABIC"] = "ar-eg";
    Language["BULGARIAN"] = "bg-bg";
    Language["CHINESE_SIMPLIFIED"] = "zh-cn";
    Language["CHINESE_TRADITIONAL"] = "zh-tw";
    Language["CROATIAN"] = "hr-hr";
    Language["CZECH"] = "cs-cz";
    Language["DANISH"] = "da-dk";
    Language["DUTCH"] = "nl-nl";
    Language["ENGLISH"] = "en-us";
    Language["FARSI"] = "fa-ir";
    Language["FINNISH"] = "fi-fi";
    Language["FRENCH"] = "fr-fr";
    Language["GERMAN"] = "de-de";
    Language["GREEK"] = "el-gr";
    Language["HEBREW"] = "he-il";
    Language["HINDI"] = "hi-in";
    Language["HUNGARIAN"] = "hu-hu";
    Language["INDONESIAN"] = "id-id";
    Language["ITALIAN"] = "it-it";
    Language["JAPANESE"] = "ja-jp";
    Language["KLINGON"] = "tlh";
    Language["KOREAN"] = "ko-kr";
    Language["LITHUANIAN"] = "lt-lt";
    Language["MALAY"] = "ms-my";
    Language["NORWEGIAN"] = "nb-no";
    Language["POLISH"] = "pl-pl";
    Language["PORTUGUESE"] = "pt-br";
    Language["ROMANIAN"] = "ro-ro";
    Language["RUSSIAN"] = "ru-ru";
    Language["SERBIAN"] = "sr-ba";
    Language["SLOVAK"] = "sk-sk";
    Language["SLOVENIAN"] = "sl-si";
    Language["SPANISH"] = "es-es";
    Language["SWEDISH"] = "sv-se";
    Language["TAGALOG"] = "tl-ph";
    Language["THAI"] = "th-th";
    Language["TURKISH"] = "tr-tr";
    Language["UKRAINIAN"] = "uk-ua";
    Language["VIETNAMESE"] = "vi-vn";
})(Language || (Language = {}));
var Theme;
(function (Theme) {
    Theme["LIGHT"] = "light";
    Theme["DARK"] = "dark";
    Theme["AUTO"] = "auto";
})(Theme || (Theme = {}));
var Size;
(function (Size) {
    Size["NORMAL"] = "normal";
    Size["FLEXIBLE"] = "flexible";
    Size["COMPACT"] = "compact";
})(Size || (Size = {}));
var Appearance;
(function (Appearance) {
    Appearance["ALWAYS"] = "always";
    Appearance["EXECUTE"] = "execute";
    Appearance["INTERACTION_ONLY"] = "interaction-only";
})(Appearance || (Appearance = {}));
var Retry;
(function (Retry) {
    Retry["AUTO"] = "auto";
    Retry["NEVER"] = "never";
})(Retry || (Retry = {}));
var RefreshExpiry;
(function (RefreshExpiry) {
    RefreshExpiry["AUTO"] = "auto";
    RefreshExpiry["MANUAL"] = "manual";
    RefreshExpiry["NEVER"] = "never";
})(RefreshExpiry || (RefreshExpiry = {}));
var RefreshTimeout;
(function (RefreshTimeout) {
    RefreshTimeout["AUTO"] = "auto";
    RefreshTimeout["MANUAL"] = "manual";
    RefreshTimeout["NEVER"] = "never";
})(RefreshTimeout || (RefreshTimeout = {}));
var State;
(function (State) {
    State[State["SUCCESS"] = 0] = "SUCCESS";
    State[State["WIDGET_CREATED"] = 1] = "WIDGET_CREATED";
    State[State["WIDGET_REMOVED"] = 2] = "WIDGET_REMOVED";
    State[State["WIDGET_RESET"] = 3] = "WIDGET_RESET";
    State[State["AFTER_INTERACTIVE"] = 4] = "AFTER_INTERACTIVE";
    State[State["BEFORE_INTERACTIVE"] = 5] = "BEFORE_INTERACTIVE";
    State[State["ERROR"] = -1] = "ERROR";
    State[State["EXPIRED"] = -2] = "EXPIRED";
    State[State["TIMEOUT"] = -3] = "TIMEOUT";
})(State || (State = {}));
class TurnstileManager {
    obj;
    event;
    widgetId;
    containerRef;
    options;
    constructor(obj, event, widgetId = '', containerRef = '', options = '') {
        this.obj = obj;
        this.event = event;
        this.widgetId = widgetId;
        this.containerRef = containerRef;
        this.options = options;
    }
    reRender(options) {
        this.remove(null);
        this.updateOptions(options);
        this.widgetId = this.obj.render(this.containerRef, this.options);
        const payload = { name: 'WIDGET_CREATED', data: this.widgetId, result: State.WIDGET_CREATED, manager: this };
        this.options.onCreate(payload);
        this.event.emit(payload);
    }
    reset(id) {
        this.obj.reset(id ?? this.widgetId);
        const payload = { name: 'WIDGET_RESET', data: id, result: State.WIDGET_RESET, manager: this };
        this.options.onReset(payload);
        this.event.emit(payload);
    }
    remove(id) {
        this.obj.remove(id ?? this.widgetId);
        const payload = { name: 'WIDGET_REMOVED', data: id, result: State.WIDGET_REMOVED, manager: this };
        this.options.onRemove(payload);
        this.event.emit(payload);
    }
    updateOptions(options) {
        if (this.options.sitekey !== options.siteKey) {
            this.options.sitekey = options.siteKey;
        }
        if (this.options.action !== options.action) {
            this.options.action = options.action;
        }
        if (this.options.cData !== options.cData) {
            this.options.cData = options.cData;
        }
        if (this.options.tabindex !== options.tabIndex) {
            this.options.tabindex = options.tabIndex;
        }
        if (this.options.language !== options.language) {
            this.options.language = options.language;
        }
        if (this.options.theme !== options.theme) {
            this.options.theme = options.theme;
        }
        if (this.options.size !== options.size) {
            this.options.size = options.size;
        }
        if (this.options.appearance !== options.appearance) {
            this.options.appearance = options.appearance;
        }
        if (this.options.retry !== options.retry) {
            this.options.retry = options.retry;
        }
        if (this.options['retry-interval'] !== options.retryInterval) {
            this.options['retry-interval'] = options.retryInterval;
        }
        if (this.options['refresh-expired'] !== options.refreshExpired) {
            this.options['refresh-expired'] = options.refreshExpired;
        }
        if (this.options['refresh-timeout'] !== options.refreshTimeout) {
            this.options['refresh-timeout'] = options.refreshTimeout;
        }
        if (this.options['response-field'] !== options.responseField) {
            this.options['response-field'] = options.responseField;
        }
        if (this.options['feedback-enabled'] !== options.feedbackEnabled) {
            this.options['feedback-enabled'] = options.feedbackEnabled;
        }
    }
}
class EventHandler {
    static widgetId;
    static tsManager;
    static event;
    static config = {
        siteKey: '',
        action: '',
        cData: '',
        tabIndex: 0,
        language: Language.AUTO,
        theme: Theme.AUTO,
        size: Size.NORMAL,
        appearance: Appearance.ALWAYS,
        retry: Retry.AUTO,
        retryInterval: 8000,
        refreshExpired: RefreshExpiry.AUTO,
        refreshTimeout: RefreshTimeout.AUTO,
        responseField: true,
        feedbackEnabled: true,
        onSuccess: (_) => { },
        onError: (_) => { },
        onExpired: (_) => { },
        onBeforeInteractive: (_) => { },
        onAfterInteractive: (_) => { },
        onTimeout: (_) => { },
        onCreate: (_) => { },
        onReset: (_) => { },
        onRemove: (_) => { },
    };
    static init(e, config, manager, widgetId = '') {
        EventHandler.event = e;
        EventHandler.config = config;
        EventHandler.tsManager = manager;
        EventHandler.widgetId = widgetId;
    }
    static emit(d) {
        EventHandler.event.emit(d);
    }
    static get e() {
        return EventHandler.event;
    }
    static setWidgetId(id) {
        EventHandler.widgetId = id;
    }
    static getWidgetId() {
        return EventHandler.widgetId;
    }
    static get conf() {
        return EventHandler.config;
    }
    static get manager() {
        return EventHandler.tsManager;
    }
    static copyWith(p) {
        if (p.manager !== null) {
            EventHandler.tsManager = p.manager;
        }
        if (p.widgetId !== null) {
            EventHandler.widgetId = p.widgetId;
        }
    }
}
class NgCloudflareTurnstile {
    config = {
        siteKey: '',
        action: '',
        cData: '',
        tabIndex: 0,
        language: Language.AUTO,
        theme: Theme.AUTO,
        size: Size.NORMAL,
        appearance: Appearance.ALWAYS,
        retry: Retry.AUTO,
        retryInterval: 8000,
        refreshExpired: RefreshExpiry.AUTO,
        refreshTimeout: RefreshTimeout.AUTO,
        responseField: true,
        feedbackEnabled: true,
        onSuccess: (_) => { },
        onError: (_) => { },
        onExpired: (_) => { },
        onBeforeInteractive: (_) => { },
        onAfterInteractive: (_) => { },
        onTimeout: (_) => { },
        onCreate: (_) => { },
        onReset: (_) => { },
        onRemove: (_) => { },
    };
    event = new EventEmitter();
    constructor() {
        window.onloadTurnstileCallback = function () {
            const conf = EventHandler.conf;
            const containerRef = "#cf-container";
            const renderingConf = {
                sitekey: conf.siteKey,
                action: conf.action,
                cData: conf.cData,
                tabindex: conf.tabIndex,
                language: conf.language,
                theme: conf.theme,
                size: conf.size,
                appearance: conf.appearance,
                retry: conf.retry,
                'retry-interval': conf.retryInterval,
                'refresh-expired': conf.refreshExpired,
                'refresh-timeout': conf.refreshTimeout,
                'response-field': conf.responseField,
                'feedback-enabled': conf.feedbackEnabled,
                callback: (token) => {
                    const payload = { name: 'SUCCESS', data: token, result: State.SUCCESS, manager: EventHandler.manager };
                    EventHandler.conf.onSuccess(payload);
                    EventHandler.emit(payload);
                },
                'error-callback': (code) => {
                    const payload = { name: 'ERROR', data: code, result: State.ERROR, manager: EventHandler.manager };
                    EventHandler.conf.onError(payload);
                    EventHandler.emit(payload);
                },
                'expired-callback': (d) => {
                    const payload = { name: 'EXPIRED', data: d, result: State.EXPIRED, manager: EventHandler.manager };
                    EventHandler.conf.onExpired(payload);
                    EventHandler.emit(payload);
                },
                'before-interactive-callback': (d) => {
                    const payload = { name: 'BEFORE_INTERACTIVE', data: d, result: State.BEFORE_INTERACTIVE, manager: EventHandler.manager };
                    EventHandler.conf.onBeforeInteractive(payload);
                    EventHandler.emit(payload);
                },
                'after-interactive-callback': (d) => {
                    const payload = { name: 'AFTER_INTERACTIVE', data: d, result: State.AFTER_INTERACTIVE, manager: EventHandler.manager };
                    EventHandler.conf.onAfterInteractive(payload);
                    EventHandler.emit(payload);
                },
                'timeout-callback': (d) => {
                    const payload = { name: 'TIMEOUT', data: d, result: State.TIMEOUT, manager: EventHandler.manager };
                    EventHandler.conf.onTimeout(payload);
                    EventHandler.emit(payload);
                },
                // Add the custom callback
                onSuccess: conf.onSuccess,
                onError: conf.onError,
                onExpired: conf.onExpired,
                onBeforeInteractive: conf.onBeforeInteractive,
                onAfterInteractive: conf.onAfterInteractive,
                onTimeout: conf.onTimeout,
                onCreate: conf.onCreate,
                onReset: conf.onReset,
                onRemove: conf.onRemove,
            };
            const widgetId = window.turnstile.render(containerRef, renderingConf);
            EventHandler.setWidgetId(widgetId);
            EventHandler.copyWith({ manager: new TurnstileManager(window.turnstile, EventHandler.e, widgetId, containerRef, renderingConf) });
            const payload = { name: 'WIDGET_CREATED', data: widgetId, result: State.WIDGET_CREATED, manager: EventHandler.manager };
            EventHandler.conf.onCreate(payload);
            EventHandler.emit(payload);
        };
    }
    ngOnInit() {
        EventHandler.init(this.event, this.config, new TurnstileManager(window.turnstile, this.event));
        if (window.turnstile) {
            window.onloadTurnstileCallback();
        }
    }
    ngAfterViewInit() { this.loadTurnstileScript(); }
    loadTurnstileScript() {
        // Check if script is already loaded to avoid duplicates
        if (!document.querySelector('script[src*="turnstile"]')) {
            const script = document.createElement('script');
            script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit&onload=onloadTurnstileCallback';
            script.async = true;
            script.defer = true;
            document.head.appendChild(script);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgCloudflareTurnstile, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NgCloudflareTurnstile, isStandalone: true, selector: "ng-cloudflare-turnstile", inputs: { config: "config" }, outputs: { event: "event" }, ngImport: i0, template: `<div id="cf-container"></div>`, isInline: true, styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgCloudflareTurnstile, decorators: [{
            type: Component,
            args: [{ selector: 'ng-cloudflare-turnstile', standalone: true, imports: [], template: `<div id="cf-container"></div>` }]
        }], ctorParameters: () => [], propDecorators: { config: [{
                type: Input
            }], event: [{
                type: Output
            }] } });

/*
 * Public API Surface of ng-cloudflare-turnstile
 */

/**
 * Generated bundle index. Do not edit.
 */

export { Appearance, DevSiteKey, Language, NgCloudflareTurnstile, RefreshExpiry, RefreshTimeout, Retry, Size, State, Theme, TurnstileManager };
//# sourceMappingURL=pangz-ng-cloudflare-turnstile.mjs.map