ngx-beacon-notify 1.0.0 → 1.1.0

package/fesm2022/ngx-beacon-notify.mjs

@@ -0,0 +1,941 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, EventEmitter, Injectable, Inject, Component, Pipe, Input, ViewChild, NgModule } from '@angular/core';
+import * as i1 from '@angular/platform-browser';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+const BEACON_GLOBAL_CONFIG = new InjectionToken('IBeaconGlobalConfig');
+const BEACON_OVERLAY_COLOR = '#000000DD';
+const BEACON_OVERLAY_ID = 'beacon-notify-focus-overlay_x';
+const BEACON_TYPE_KEYS = ['a.a', 'a.e', 'a.i', 'a.s', 'a.w'];
+
+class BeaconNotifyService {
+    sanitizer;
+    globalConfig;
+    beaconDefaultIconKeys = BEACON_TYPE_KEYS;
+    beaconConfigMap = {
+        alert: { icon: this.beaconDefaultIconKeys[0], fontIcon: 'false', class: 'beacon-message-alert', title: 'Alert', style: '', animation: '', type: 'alert' },
+        error: { icon: this.beaconDefaultIconKeys[1], fontIcon: 'false', class: 'beacon-message-error', title: 'Error', style: '', animation: '', type: 'error' },
+        info: { icon: this.beaconDefaultIconKeys[2], fontIcon: 'false', class: 'beacon-message-info', title: 'Information', style: '', animation: '', type: 'info' },
+        success: { icon: this.beaconDefaultIconKeys[3], fontIcon: 'false', class: 'beacon-message-success', title: 'Success', style: '', animation: '', type: 'success' },
+        warning: { icon: this.beaconDefaultIconKeys[4], fontIcon: 'false', class: 'beacon-message-warning', title: 'Warning', style: '', animation: '', type: 'warning' }
+    };
+    beaconTypeMap = {
+        a: 'success', b: 'error', c: 'warning', d: 'info', e: 'alert'
+    };
+    beaconTitle;
+    beaconMessage;
+    beaconIcon;
+    beaconManualId;
+    beaconSelectedManualId;
+    beaconIconFromFont;
+    beaconStatic;
+    beaconFixed;
+    beaconBlockOthers;
+    beaconPreventClickClose;
+    beaconAllowDuplicate;
+    beaconFocus;
+    beaconFocusShine;
+    beaconOverlayColor;
+    beaconStyleClass;
+    beaconReplacementClass;
+    beaconAnimationClass;
+    beaconNoHoverEffect;
+    beaconGlobalStatic;
+    beaconGlobalFixed;
+    beaconGlobalBlockOthers;
+    beaconGlobalPreventClickClose;
+    beaconGlobalDuplicate;
+    beaconGlobalNoHoverEffect;
+    beaconGlobalPositioning;
+    beaconGlobalFocusOverlayColor;
+    beaconContainer;
+    beaconDefaultAnimationClassName = 'beacon-message-control-animate';
+    beaconSuccessorBlockerAutoId;
+    beaconWithActiveFocusAutoId;
+    beaconButtons = {};
+    beaconFocusOrderLibrary = [];
+    beaconSubscribedEventLibrary = {};
+    beaconWatchedEventLibrary = new Map([]);
+    beaconWatchedEventTaskMaster = new EventEmitter();
+    beaconAllEventTaskMaster = new EventEmitter();
+    beaconFocusOverlayDOM;
+    beaconEventTaskMaster = new EventEmitter();
+    beaconLibrary = [];
+    beaconLibraryQueue = [];
+    constructor(sanitizer, globalConfig) {
+        this.sanitizer = sanitizer;
+        this.globalConfig = globalConfig;
+        this.globalConfig && this.resolveGlobalConfig(this.globalConfig);
+        // Resolve events
+        this.resolveBeaconEvents();
+    }
+    // Resolve global config
+    resolveGlobalConfig(globalConfig) {
+        if (globalConfig.static) {
+            if (typeof globalConfig.static == 'boolean') {
+                this.beaconGlobalFixed = undefined;
+                this.beaconGlobalStatic = true;
+            }
+            else
+                this.beaconGlobalStatic = globalConfig.static;
+        }
+        if (globalConfig.fixed) {
+            this.beaconGlobalStatic = undefined;
+            this.beaconGlobalFixed = true;
+        }
+        globalConfig.preventClickClose && (this.beaconGlobalPreventClickClose = globalConfig.preventClickClose);
+        globalConfig.blockOthers && (this.beaconGlobalBlockOthers = globalConfig.blockOthers);
+        globalConfig.overlayColor && (this.beaconGlobalFocusOverlayColor = globalConfig.overlayColor);
+        globalConfig.duplicate && (this.beaconGlobalDuplicate = globalConfig.duplicate);
+        globalConfig.icon && this.resolveGlobalIconConfig(globalConfig.icon);
+        globalConfig.styleClass && this.resolveGlobalPropertyConfig(globalConfig.styleClass, 'style');
+        globalConfig.replacementClass && this.resolveGlobalPropertyConfig(globalConfig.replacementClass, 'class');
+        globalConfig.animationClass && this.resolveGlobalPropertyConfig(globalConfig.animationClass, 'animation');
+        globalConfig.position && (this.beaconGlobalPositioning = globalConfig.position);
+        globalConfig.noHoverEffect && (this.beaconGlobalNoHoverEffect = globalConfig.noHoverEffect);
+    }
+    // Resolve global config / for property
+    resolveGlobalPropertyConfig(config, property) {
+        config.alert && (this.beaconConfigMap.alert[property] = config.alert);
+        config.error && (this.beaconConfigMap.error[property] = config.error);
+        config.info && (this.beaconConfigMap.info[property] = config.info);
+        config.success && (this.beaconConfigMap.success[property] = config.success);
+        config.warning && (this.beaconConfigMap.warning[property] = config.warning);
+    }
+    // Resolve global config / for icons
+    resolveGlobalIconConfig(config) {
+        config?.alert?.icon && (this.beaconConfigMap.alert.icon = config.alert.icon) && (this.beaconConfigMap.alert.fontIcon = String((config?.alert?.fontIcon || false)));
+        config?.error?.icon && (this.beaconConfigMap.error.icon = config.error.icon) && (this.beaconConfigMap.error.fontIcon = String((config?.error?.fontIcon || false)));
+        config?.info?.icon && (this.beaconConfigMap.info.icon = config.info.icon) && (this.beaconConfigMap.info.fontIcon = String((config.info.fontIcon || false)));
+        config?.success?.icon && (this.beaconConfigMap.success.icon = config.success.icon) && (this.beaconConfigMap.success.fontIcon = String((config.success.fontIcon || false)));
+        config?.warning?.icon && (this.beaconConfigMap.warning.icon = config.warning.icon) && (this.beaconConfigMap.warning.fontIcon = String((config.warning.fontIcon || false)));
+    }
+    // Resolve beacon events
+    resolveBeaconEvents() {
+        this.beaconEventTaskMaster.subscribe((message) => {
+            const id = String(message.id);
+            if (message.delete) {
+                this.resolvePossibleBlockedBeacons(id);
+                this.resolvePossibleQueuedFocus(id);
+                this.performEventTask(id, { on: false, off: true });
+                delete this.beaconSubscribedEventLibrary[id];
+            }
+            else if (message.mount) {
+                this.performEventTask(id, { on: true, off: false });
+            }
+        });
+    }
+    // Perform event task
+    performEventTask(id, eventObject) {
+        const stamp = this.beaconSubscribedEventLibrary[id];
+        const event = stamp.event;
+        const manualId = stamp?.manualId?.toString().replace(/undefined/, '');
+        event.emit(eventObject);
+        this.beaconAllEventTaskMaster.emit({ id: manualId || null, type: String(stamp.type), ...eventObject });
+        // Check if this manual id is watched
+        if (manualId && this.beaconWatchedEventLibrary.has(manualId)) {
+            this.beaconWatchedEventTaskMaster.emit({ id: manualId, type: String(stamp.type), ...eventObject });
+            // Check if beacon is off
+            if (eventObject.off)
+                this.beaconWatchedEventLibrary.delete(manualId);
+        }
+    }
+    // Resolve possible blocked beacons
+    resolvePossibleBlockedBeacons(id) {
+        // Check if this id is blocking others
+        if (id == this.beaconSuccessorBlockerAutoId) {
+            if (this.beaconLibraryQueue.length) {
+                const queueLength = this.beaconLibraryQueue.length;
+                // Loop through queue
+                for (let x = 0; x < queueLength; x++) {
+                    const nextInLine = this.beaconLibraryQueue.shift();
+                    // Add message to library
+                    if (this.getBeaconGlobalPositionConfig?.topBottom == 'top')
+                        this.beaconLibrary.unshift(nextInLine);
+                    else
+                        this.beaconLibrary.push(nextInLine);
+                    // Check if set to block
+                    if (nextInLine.blockOthers) {
+                        this.beaconSuccessorBlockerAutoId = nextInLine.bid;
+                        break;
+                    }
+                }
+                // Check if no new beacon is set as blocker and unset previous value
+                if (id == this.beaconSuccessorBlockerAutoId)
+                    this.beaconSuccessorBlockerAutoId = undefined;
+            }
+            else
+                this.beaconSuccessorBlockerAutoId = undefined;
+        }
+    }
+    // Resolve queued beacon focus
+    resolvePossibleQueuedFocus(id) {
+        // Check if this id is active focus beacon
+        if (id == this.beaconWithActiveFocusAutoId) {
+            if (this.beaconFocusOrderLibrary.length) {
+                // Pass the next focus
+                this.beaconWithActiveFocusAutoId = this.beaconFocusOrderLibrary.shift();
+                this.beaconEventTaskMaster.emit({ autoDetectNextFocusBeacon: true });
+            }
+            else {
+                this.beaconWithActiveFocusAutoId = undefined;
+                this.destroyBeaconFocusOverlay();
+            }
+        }
+    }
+    // Generate unique id for item
+    get getId() {
+        return crypto.getRandomValues(new Uint32Array(2)).toString().split(',').join('');
+    }
+    // Set beacon container
+    setBeaconContainer(container) {
+        this.beaconContainer = container;
+    }
+    // Get beacon container
+    get getBeaconContainer() {
+        return this.beaconContainer;
+    }
+    // Get beacon global position config
+    get getBeaconGlobalPositionConfig() {
+        return this.beaconGlobalPositioning;
+    }
+    // Get default icon keys
+    get getBeaconDefaultIconKeys() {
+        return this.beaconDefaultIconKeys;
+    }
+    // Get active focus beacon id
+    get getActiveFocusBeaconId() {
+        return this.beaconWithActiveFocusAutoId;
+    }
+    // Create overlay for focused beacon
+    createBeaconFocusOverlay(overlayColor) {
+        const overlay = document.createElement('div');
+        overlay.setAttribute('id', BEACON_OVERLAY_ID);
+        overlay.style.position = 'fixed';
+        overlay.style.top = '0';
+        overlay.style.bottom = '0';
+        overlay.style.right = '0';
+        overlay.style.left = '0';
+        overlay.style.zIndex = '9002';
+        overlay.style.background = overlayColor || this.beaconGlobalFocusOverlayColor || BEACON_OVERLAY_COLOR;
+        document.body.style.overflow = 'hidden';
+        // Pass overlay element
+        this.beaconFocusOverlayDOM = overlay;
+        this.beaconContainer.nativeElement.appendChild(overlay);
+    }
+    // Repaint overlay for focused beacon
+    repaintBeaconFocusOverlay(overlayColor) {
+        if (this.beaconFocusOverlayDOM)
+            this.beaconFocusOverlayDOM.style.background = overlayColor || this.beaconGlobalFocusOverlayColor || BEACON_OVERLAY_COLOR;
+    }
+    // Destroy overlay for focused beacon
+    destroyBeaconFocusOverlay() {
+        document.body.style.overflow = 'auto';
+        this.beaconContainer.nativeElement.querySelector('div#' + BEACON_OVERLAY_ID).remove();
+        this.beaconFocusOverlayDOM = undefined;
+    }
+    // Set id for beacon
+    id(id) {
+        id && (this.beaconManualId = id);
+        return this;
+    }
+    // Set notification title
+    title(title) {
+        title && (this.beaconTitle = title);
+        return this;
+    }
+    // Set notification message
+    message(message) {
+        message && (this.beaconMessage = message);
+        return this;
+    }
+    // Highlight id of beacon to update
+    select(id) {
+        id && (this.beaconSelectedManualId = id);
+        return this;
+    }
+    // Change notification title
+    setTitle(title) {
+        // Check for active manual id / and if a beacon is tied to it
+        if (this.beaconSelectedManualId) {
+            const beaconIndex = this.beaconLibrary.findIndex(x => x.mid == this.beaconSelectedManualId);
+            if (beaconIndex >= 0)
+                this.beaconLibrary[beaconIndex].title = title;
+        }
+    }
+    // Change notification message
+    setMessage(message) {
+        // Check for active manual id / and if a beacon is tied to it
+        if (this.beaconSelectedManualId) {
+            const beaconIndex = this.beaconLibrary.findIndex(x => x.mid == this.beaconSelectedManualId);
+            if (beaconIndex >= 0)
+                this.beaconLibrary[beaconIndex].body = message;
+        }
+    }
+    // Change notification title & message
+    setContent(title, message) {
+        // Check for active manual id / and if a beacon is tied to it
+        if (this.beaconSelectedManualId) {
+            const beaconIndex = this.beaconLibrary.findIndex(x => x.mid == this.beaconSelectedManualId);
+            if (beaconIndex >= 0)
+                this.beaconLibrary[beaconIndex].title = title;
+            this.beaconLibrary[beaconIndex].body = message;
+        }
+    }
+    // Update beacon button 1
+    setButtonOne(text, canDismiss, callback, callbackArgs, position) {
+        // Check for active manual id / and if a beacon is tied to it
+        if (this.beaconSelectedManualId) {
+            const beaconIndex = this.beaconLibrary.findIndex(x => x.mid == this.beaconSelectedManualId);
+            if (beaconIndex >= 0) {
+                this.beaconLibrary[beaconIndex].buttons.one = {
+                    text: text.substring(0, 15),
+                    canDismiss,
+                    callback,
+                    callbackArgs,
+                    position
+                };
+            }
+        }
+    }
+    // Update beacon button 2
+    setButtonTwo(text, canDismiss, callback, callbackArgs, position) {
+        // Check for active manual id / and if a beacon is tied to it
+        if (this.beaconSelectedManualId) {
+            const beaconIndex = this.beaconLibrary.findIndex(x => x.mid == this.beaconSelectedManualId);
+            if (beaconIndex >= 0) {
+                if (this.beaconLibrary[beaconIndex].buttons?.one) {
+                    this.beaconLibrary[beaconIndex].buttons.two = {
+                        text: text.substring(0, 15),
+                        canDismiss,
+                        callback,
+                        callbackArgs,
+                        position
+                    };
+                }
+                else
+                    this.setButtonOne(text, canDismiss, callback, callbackArgs, position);
+            }
+        }
+    }
+    // Remove beacon button 1
+    removeButtonOne() {
+        // Check for active manual id / and if a beacon is tied to it
+        if (this.beaconSelectedManualId) {
+            const beaconIndex = this.beaconLibrary.findIndex(x => x.mid == this.beaconSelectedManualId);
+            if (beaconIndex >= 0) {
+                this.beaconLibrary[beaconIndex].buttons.one = undefined;
+            }
+        }
+    }
+    // Remove beacon button 2
+    removeButtonTwo() {
+        // Check for active manual id / and if a beacon is tied to it
+        if (this.beaconSelectedManualId) {
+            const beaconIndex = this.beaconLibrary.findIndex(x => x.mid == this.beaconSelectedManualId);
+            if (beaconIndex >= 0) {
+                this.beaconLibrary[beaconIndex].buttons.two = undefined;
+            }
+        }
+    }
+    // Remove beacon buttons
+    removeButtons() {
+        // Check for active manual id / and if a beacon is tied to it
+        if (this.beaconSelectedManualId) {
+            const beaconIndex = this.beaconLibrary.findIndex(x => x.mid == this.beaconSelectedManualId);
+            if (beaconIndex >= 0) {
+                this.beaconLibrary[beaconIndex].buttons.one = undefined;
+                this.beaconLibrary[beaconIndex].buttons.two = undefined;
+            }
+        }
+    }
+    // Set beacon as static or with delay
+    static(delay) {
+        this.beaconStatic = delay || true;
+        this.beaconFixed = undefined;
+        return this;
+    }
+    // Set beacon as fixed which removes the close button and disallows close on click
+    fixed() {
+        this.beaconStatic = undefined;
+        this.beaconFixed = true;
+        return this;
+    }
+    // Allow beacon to block others
+    block() {
+        this.beaconBlockOthers = true;
+        return this;
+    }
+    // Focus on beacon
+    focus(overlayColor) {
+        overlayColor && (this.beaconOverlayColor = overlayColor);
+        this.beaconFocus = true;
+        return this;
+    }
+    // Focus beacon on center screen
+    shine(overlayColor) {
+        overlayColor && (this.beaconOverlayColor = overlayColor);
+        this.beaconFocusShine = this.beaconFocus = true;
+        return this;
+    }
+    // Add button for beacon
+    button(text, canDismiss, callback, callbackArgs, position) {
+        if (!this.beaconButtons?.one) {
+            this.beaconButtons.one = {
+                text: text.substring(0, 15),
+                canDismiss,
+                callback,
+                callbackArgs,
+                position
+            };
+        }
+        else if (this.beaconButtons.one && !this.beaconButtons.two) {
+            this.beaconButtons.two = {
+                text: text.substring(0, 15),
+                canDismiss,
+                callback,
+                callbackArgs,
+                position
+            };
+        }
+        return this;
+    }
+    // Allow duplicate for beacon
+    duplicate() {
+        this.beaconAllowDuplicate = true;
+        return this;
+    }
+    // Set config values for beacon
+    build(config) {
+        if (config.static) {
+            if (typeof config.static == 'boolean')
+                this.static();
+            else
+                this.static(Number(config.static));
+        }
+        config.fixed && this.fixed();
+        config.duplicate && this.duplicate();
+        config.preventClickClose && (this.beaconPreventClickClose = config.preventClickClose);
+        config.blockOthers && (this.beaconBlockOthers = config.blockOthers);
+        config.focus && (this.beaconFocus = config.focus);
+        config.shine && (this.beaconFocusShine = this.beaconFocus = config.shine);
+        config.icon && (this.beaconIcon = config.icon);
+        config.fontIcon && (this.beaconIconFromFont = config.fontIcon);
+        config.styleClass && (this.beaconStyleClass = config.styleClass);
+        config.replacementClass && (this.beaconReplacementClass = config.replacementClass);
+        config.animationClass && (this.beaconAnimationClass = config.animationClass);
+        config.animationClass && (this.beaconAnimationClass = config.animationClass);
+        config.overlayColor && (this.beaconOverlayColor = config.overlayColor);
+        config.noHoverEffect && (this.beaconNoHoverEffect = config.noHoverEffect);
+        return this;
+    }
+    // create notification beacon
+    beacon(message, type) {
+        // Get signature
+        const signature = window.btoa((this.beaconTitle || this.beaconConfigMap[type].title) + '.' + message);
+        // Generate beacon id
+        const beaconId = this.getId;
+        // Register beacon in event library
+        this.beaconSubscribedEventLibrary[beaconId] = Object.create({});
+        // Check for duplicate if set to prevent or proceed if turned off
+        if (this.beaconAllowDuplicate || (([undefined, false].includes(this.beaconGlobalDuplicate) && this.isNewBeaconADuplicate(signature) == !1) || this.beaconGlobalDuplicate)) {
+            const beaconObject = {
+                bid: beaconId,
+                mid: this.beaconManualId,
+                type: this.beaconConfigMap[type].class,
+                icon: this.beaconIcon || this.beaconConfigMap[type].icon,
+                fontIcon: this.beaconIconFromFont || (this.beaconConfigMap[type].fontIcon == 'true' ? true : undefined),
+                title: this.beaconTitle || this.beaconConfigMap[type].title,
+                static: this.beaconStatic || this.beaconGlobalStatic,
+                fixed: this.beaconFixed || this.beaconGlobalFixed,
+                preventClickClose: this.beaconPreventClickClose || this.beaconGlobalPreventClickClose,
+                styleClass: this.beaconStyleClass || this.beaconConfigMap[type].style,
+                replacementClass: this.beaconReplacementClass,
+                animationClass: this.beaconAnimationClass || this.beaconConfigMap[type].animation || this.beaconDefaultAnimationClassName,
+                blockOthers: this.beaconBlockOthers || this.beaconGlobalBlockOthers,
+                buttons: this.beaconButtons,
+                overlayColor: this.beaconOverlayColor,
+                bodyHtml: this.sanitizer.bypassSecurityTrustHtml(message),
+                body: message,
+                focus: this.beaconFocus,
+                shine: this.beaconFocusShine,
+                noHoverEffect: this.beaconNoHoverEffect || this.beaconGlobalNoHoverEffect,
+                signature
+            };
+            // Sanitize icon if passed
+            if (!beaconObject.fontIcon && beaconObject.icon && !this.beaconDefaultIconKeys.includes(beaconObject.icon)) {
+                beaconObject.svgIcon = this.sanitizer.bypassSecurityTrustHtml(beaconObject.icon);
+            }
+            // Check if there is an active beacon blocking others and add build beacon to queue
+            if (this.beaconSuccessorBlockerAutoId) {
+                this.beaconLibraryQueue.push(beaconObject);
+            }
+            else {
+                // Check if beacon can block and register id
+                if (beaconObject.blockOthers)
+                    this.beaconSuccessorBlockerAutoId = beaconObject.bid;
+                // Add message to library
+                if (this.getBeaconGlobalPositionConfig?.topBottom == 'top')
+                    this.beaconLibrary.unshift(beaconObject);
+                else
+                    this.beaconLibrary.push(beaconObject);
+            }
+            // Check if beacon has focus
+            if (this.beaconFocus) {
+                if (this.beaconWithActiveFocusAutoId)
+                    this.beaconFocusOrderLibrary.push(beaconObject.bid);
+                else
+                    this.beaconWithActiveFocusAutoId = beaconObject.bid;
+            }
+            // Check if id is set and register it
+            if (this.beaconManualId) {
+                this.beaconSubscribedEventLibrary[beaconId].manualId = this.beaconManualId;
+                // Map the defined id to the auto-gen id
+                this.beaconWatchedEventLibrary.set(this.beaconManualId, beaconId);
+            }
+            // Register beacon type 
+            this.beaconSubscribedEventLibrary[beaconId].type = this.beaconConfigMap[type].type;
+        }
+        // Register event for beacon
+        this.beaconSubscribedEventLibrary[beaconId].event = new EventEmitter();
+        // Reset
+        this.beaconTitle = undefined;
+        this.beaconMessage = undefined;
+        this.beaconStatic = undefined;
+        this.beaconFixed = undefined;
+        this.beaconBlockOthers = undefined;
+        this.beaconManualId = undefined;
+        this.beaconFocus = undefined;
+        this.beaconFocusShine = undefined;
+        this.beaconOverlayColor = undefined;
+        this.beaconAllowDuplicate = undefined;
+        this.beaconNoHoverEffect = undefined;
+        this.beaconIcon = undefined;
+        this.beaconIconFromFont = undefined;
+        this.beaconStyleClass = undefined;
+        this.beaconReplacementClass = undefined;
+        this.beaconAnimationClass = undefined;
+        this.beaconButtons = {};
+        return this.beaconSubscribedEventLibrary[beaconId].event;
+    }
+    // Set notification message / success
+    success(...message) {
+        // Set title
+        (message.length > 1) && message[0] && this.title(message[0]);
+        // Set body
+        return this.beacon(message[1] || message[0] || this.beaconMessage || this.beaconConfigMap.success.title, this.beaconTypeMap.a);
+    }
+    // Set notification message / error
+    error(...message) {
+        // Set title
+        (message.length > 1) && message[0] && this.title(message[0]);
+        // Set body
+        return this.beacon(message[1] || message[0] || this.beaconMessage || this.beaconConfigMap.error.title, this.beaconTypeMap.b);
+    }
+    // Set notification message / warning
+    warning(...message) {
+        // Set title
+        (message.length > 1) && message[0] && this.title(message[0]);
+        // Set body
+        return this.beacon(message[1] || message[0] || this.beaconMessage || this.beaconConfigMap.warning.title, this.beaconTypeMap.c);
+    }
+    // Set notification message / info
+    info(...message) {
+        // Set title
+        (message.length > 1) && message[0] && this.title(message[0]);
+        // Set body
+        return this.beacon(message[1] || message[0] || this.beaconMessage || this.beaconConfigMap.info.title, this.beaconTypeMap.d);
+    }
+    // Set notification message / alert
+    alert(...message) {
+        // Set title
+        (message.length > 1) && message[0] && this.title(message[0]);
+        // Set body
+        return this.beacon(message[1] || message[0] || this.beaconMessage || this.beaconConfigMap.alert.title, this.beaconTypeMap.e);
+    }
+    // Watch events for beacon with specified id
+    watch(id) {
+        // Register watched id
+        if (Array.isArray(id))
+            id.forEach(k => this.beaconWatchedEventLibrary.set(k, String()));
+        else
+            this.beaconWatchedEventLibrary.set(id, String());
+        return this.beaconWatchedEventTaskMaster;
+    }
+    // Watch events for all beacons
+    events() {
+        return this.beaconAllEventTaskMaster;
+    }
+    // Close beacon with id
+    closeOne(id) {
+        if (this.beaconWatchedEventLibrary.has(id)) {
+            const autoId = this.beaconWatchedEventLibrary.get(id);
+            // Remove the beacon
+            this.beaconLibrary = this.beaconLibrary.filter(x => {
+                return (x.bid != autoId);
+            });
+            this.beaconEventTaskMaster.emit({
+                delete: true,
+                id: autoId
+            });
+        }
+    }
+    // Close all beacons
+    closeAll() {
+        this.beaconLibrary = this.beaconLibrary.filter(x => {
+            this.beaconEventTaskMaster.emit({
+                delete: true,
+                id: x.bid
+            });
+            return !(x.bid);
+        });
+    }
+    // Check for possible duplicate
+    isNewBeaconADuplicate(signature) {
+        const duplicate = this.beaconLibrary.find(x => x.signature == signature);
+        const beacon = this.beaconContainer.nativeElement.querySelector(`div#bc_${duplicate?.bid}`);
+        return Boolean(beacon && window.getComputedStyle(beacon).opacity == '1');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconNotifyService, deps: [{ token: i1.DomSanitizer }, { token: BEACON_GLOBAL_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconNotifyService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconNotifyService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [BEACON_GLOBAL_CONFIG]
+                }] }] });
+
+class BeaconIconAlertComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconIconAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: BeaconIconAlertComponent, selector: "app-beacon-icon-alert", ngImport: i0, template: "<svg fill=\"currentColor\" viewBox=\"0 0 48 48\" data-name=\"Layer 1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n  <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n  <g id=\"SVGRepo_iconCarrier\">\n    <title></title>\n    <path\n      d=\"M40.62,28.34l-.87-.7A2,2,0,0,1,39,26.08V18A15,15,0,0,0,26.91,3.29a3,3,0,0,0-5.81,0A15,15,0,0,0,9,18v8.08a2,2,0,0,1-.75,1.56l-.87.7a9,9,0,0,0-3.38,7V37a4,4,0,0,0,4,4h8.26a8,8,0,0,0,15.47,0H40a4,4,0,0,0,4-4V35.36A9,9,0,0,0,40.62,28.34ZM24,43a4,4,0,0,1-3.44-2h6.89A4,4,0,0,1,24,43Zm16-6H8V35.36a5,5,0,0,1,1.88-3.9l.87-.7A6,6,0,0,0,13,26.08V18a11,11,0,0,1,22,0v8.08a6,6,0,0,0,2.25,4.69l.87.7A5,5,0,0,1,40,35.36Z\"\n    ></path>\n  </g>\n</svg>\n", styles: ["svg{width:20px!important;height:20px!important;margin-right:7px!important;margin-top:-2px}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconIconAlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-beacon-icon-alert', template: "<svg fill=\"currentColor\" viewBox=\"0 0 48 48\" data-name=\"Layer 1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n  <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n  <g id=\"SVGRepo_iconCarrier\">\n    <title></title>\n    <path\n      d=\"M40.62,28.34l-.87-.7A2,2,0,0,1,39,26.08V18A15,15,0,0,0,26.91,3.29a3,3,0,0,0-5.81,0A15,15,0,0,0,9,18v8.08a2,2,0,0,1-.75,1.56l-.87.7a9,9,0,0,0-3.38,7V37a4,4,0,0,0,4,4h8.26a8,8,0,0,0,15.47,0H40a4,4,0,0,0,4-4V35.36A9,9,0,0,0,40.62,28.34ZM24,43a4,4,0,0,1-3.44-2h6.89A4,4,0,0,1,24,43Zm16-6H8V35.36a5,5,0,0,1,1.88-3.9l.87-.7A6,6,0,0,0,13,26.08V18a11,11,0,0,1,22,0v8.08a6,6,0,0,0,2.25,4.69l.87.7A5,5,0,0,1,40,35.36Z\"\n    ></path>\n  </g>\n</svg>\n", styles: ["svg{width:20px!important;height:20px!important;margin-right:7px!important;margin-top:-2px}\n"] }]
+        }] });
+
+class BeaconIconErrorComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconIconErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: BeaconIconErrorComponent, selector: "app-beacon-icon-error", ngImport: i0, template: "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n  <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n  <g id=\"SVGRepo_iconCarrier\">\n    <path\n      d=\"M11.3586 20.6831C11.5639 20.7901 11.6666 20.8436 11.809 20.8713C11.92 20.8929 12.08 20.8929 12.191 20.8713C12.3334 20.8436 12.4361 20.7901 12.6414 20.6831C14.54 19.6939 20 16.4612 20 12.0001V8.21772C20 7.4182 20 7.01845 19.8692 6.67482C19.7537 6.37126 19.566 6.10039 19.3223 5.88564C19.0465 5.64255 18.6722 5.50219 17.9236 5.22146L12.5618 3.21079C12.3539 3.13283 12.25 3.09385 12.143 3.07839C12.0482 3.06469 11.9518 3.06469 11.857 3.07839C11.75 3.09385 11.6461 3.13283 11.4382 3.21079L6.0764 5.22146C5.3278 5.50219 4.9535 5.64255 4.67766 5.88564C4.43398 6.10039 4.24627 6.37126 4.13076 6.67482C4 7.01845 4 7.4182 4 8.21772V12.0001C4 16.4612 9.45996 19.6939 11.3586 20.6831Z\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    ></path>\n  </g>\n</svg>\n", styles: ["svg{width:22px!important;height:22px!important;margin-right:7px!important;margin-top:-2px}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconIconErrorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-beacon-icon-error', template: "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n  <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n  <g id=\"SVGRepo_iconCarrier\">\n    <path\n      d=\"M11.3586 20.6831C11.5639 20.7901 11.6666 20.8436 11.809 20.8713C11.92 20.8929 12.08 20.8929 12.191 20.8713C12.3334 20.8436 12.4361 20.7901 12.6414 20.6831C14.54 19.6939 20 16.4612 20 12.0001V8.21772C20 7.4182 20 7.01845 19.8692 6.67482C19.7537 6.37126 19.566 6.10039 19.3223 5.88564C19.0465 5.64255 18.6722 5.50219 17.9236 5.22146L12.5618 3.21079C12.3539 3.13283 12.25 3.09385 12.143 3.07839C12.0482 3.06469 11.9518 3.06469 11.857 3.07839C11.75 3.09385 11.6461 3.13283 11.4382 3.21079L6.0764 5.22146C5.3278 5.50219 4.9535 5.64255 4.67766 5.88564C4.43398 6.10039 4.24627 6.37126 4.13076 6.67482C4 7.01845 4 7.4182 4 8.21772V12.0001C4 16.4612 9.45996 19.6939 11.3586 20.6831Z\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    ></path>\n  </g>\n</svg>\n", styles: ["svg{width:22px!important;height:22px!important;margin-right:7px!important;margin-top:-2px}\n"] }]
+        }] });
+
+class BeaconIconInfoComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconIconInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: BeaconIconInfoComponent, selector: "app-beacon-icon-info", ngImport: i0, template: "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n  <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n  <g id=\"SVGRepo_iconCarrier\">\n    <path\n      d=\"M10 22H14M5 9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9C19 11.3787 17.8135 13.4694 16 14.7344L15.4582 17.3004C15.3097 18.2778 14.4695 19 13.4809 19H10.5191C9.53052 19 8.69027 18.2778 8.54177 17.3004L8 14.7453C6.18652 13.4804 5 11.3787 5 9Z\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    ></path>\n    <path d=\"M8 15H16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n  </g>\n</svg>\n", styles: ["svg{width:22px!important;height:22px!important;margin-right:7px!important;margin-top:-2px}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconIconInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-beacon-icon-info', template: "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n  <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n  <g id=\"SVGRepo_iconCarrier\">\n    <path\n      d=\"M10 22H14M5 9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9C19 11.3787 17.8135 13.4694 16 14.7344L15.4582 17.3004C15.3097 18.2778 14.4695 19 13.4809 19H10.5191C9.53052 19 8.69027 18.2778 8.54177 17.3004L8 14.7453C6.18652 13.4804 5 11.3787 5 9Z\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    ></path>\n    <path d=\"M8 15H16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n  </g>\n</svg>\n", styles: ["svg{width:22px!important;height:22px!important;margin-right:7px!important;margin-top:-2px}\n"] }]
+        }] });
+
+class BeaconIconSuccessComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconIconSuccessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: BeaconIconSuccessComponent, selector: "app-beacon-icon-success", ngImport: i0, template: "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n  <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n  <g id=\"SVGRepo_iconCarrier\">\n    <path\n      d=\"M8.5 12.5L10.0089 14.0089C10.3526 14.3526 10.5245 14.5245 10.7198 14.5822C10.8914 14.6328 11.0749 14.6245 11.2412 14.5585C11.4305 14.4834 11.5861 14.2967 11.8973 13.9232L16 9M16.3287 4.75855C17.0676 4.77963 17.8001 5.07212 18.364 5.636C18.9278 6.19989 19.2203 6.9324 19.2414 7.67121C19.2623 8.40232 19.2727 8.76787 19.2942 8.85296C19.3401 9.0351 19.2867 8.90625 19.383 9.06752C19.428 9.14286 19.6792 9.40876 20.1814 9.94045C20.6889 10.4778 21 11.2026 21 12C21 12.7974 20.6889 13.5222 20.1814 14.0595C19.6792 14.5912 19.428 14.8571 19.383 14.9325C19.2867 15.0937 19.3401 14.9649 19.2942 15.147C19.2727 15.2321 19.2623 15.5977 19.2414 16.3288C19.2203 17.0676 18.9278 17.8001 18.364 18.364C17.8001 18.9279 17.0676 19.2204 16.3287 19.2414C15.5976 19.2623 15.2321 19.2727 15.147 19.2942C14.9649 19.3401 15.0937 19.2868 14.9325 19.3831C14.8571 19.4281 14.5912 19.6792 14.0595 20.1814C13.5222 20.6889 12.7974 21 12 21C11.2026 21 10.4778 20.6889 9.94047 20.1814C9.40874 19.6792 9.14287 19.4281 9.06753 19.3831C8.90626 19.2868 9.0351 19.3401 8.85296 19.2942C8.76788 19.2727 8.40225 19.2623 7.67121 19.2414C6.93238 19.2204 6.19986 18.9279 5.63597 18.364C5.07207 17.8001 4.77959 17.0676 4.75852 16.3287C4.73766 15.5976 4.72724 15.2321 4.70578 15.147C4.65985 14.9649 4.71322 15.0937 4.61691 14.9324C4.57192 14.8571 4.32082 14.5912 3.81862 14.0595C3.31113 13.5222 3 12.7974 3 12C3 11.2026 3.31113 10.4778 3.81862 9.94048C4.32082 9.40876 4.57192 9.14289 4.61691 9.06755C4.71322 8.90628 4.65985 9.03512 4.70578 8.85299C4.72724 8.7679 4.73766 8.40235 4.75852 7.67126C4.77959 6.93243 5.07207 6.1999 5.63597 5.636C6.19986 5.07211 6.93238 4.77963 7.67121 4.75855C8.40232 4.73769 8.76788 4.72727 8.85296 4.70581C9.0351 4.65988 8.90626 4.71325 9.06753 4.61694C9.14287 4.57195 9.40876 4.32082 9.94047 3.81863C10.4778 3.31113 11.2026 3 12 3C12.7974 3 13.5222 3.31114 14.0595 3.81864C14.5913 4.32084 14.8571 4.57194 14.9325 4.61693C15.0937 4.71324 14.9649 4.65988 15.147 4.70581C15.2321 4.72726 15.5976 4.73769 16.3287 4.75855Z\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    ></path>\n  </g>\n</svg>", styles: ["svg{width:22px!important;height:22px!important;margin-right:7px!important;margin-top:-2px}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconIconSuccessComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-beacon-icon-success', template: "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n  <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n  <g id=\"SVGRepo_iconCarrier\">\n    <path\n      d=\"M8.5 12.5L10.0089 14.0089C10.3526 14.3526 10.5245 14.5245 10.7198 14.5822C10.8914 14.6328 11.0749 14.6245 11.2412 14.5585C11.4305 14.4834 11.5861 14.2967 11.8973 13.9232L16 9M16.3287 4.75855C17.0676 4.77963 17.8001 5.07212 18.364 5.636C18.9278 6.19989 19.2203 6.9324 19.2414 7.67121C19.2623 8.40232 19.2727 8.76787 19.2942 8.85296C19.3401 9.0351 19.2867 8.90625 19.383 9.06752C19.428 9.14286 19.6792 9.40876 20.1814 9.94045C20.6889 10.4778 21 11.2026 21 12C21 12.7974 20.6889 13.5222 20.1814 14.0595C19.6792 14.5912 19.428 14.8571 19.383 14.9325C19.2867 15.0937 19.3401 14.9649 19.2942 15.147C19.2727 15.2321 19.2623 15.5977 19.2414 16.3288C19.2203 17.0676 18.9278 17.8001 18.364 18.364C17.8001 18.9279 17.0676 19.2204 16.3287 19.2414C15.5976 19.2623 15.2321 19.2727 15.147 19.2942C14.9649 19.3401 15.0937 19.2868 14.9325 19.3831C14.8571 19.4281 14.5912 19.6792 14.0595 20.1814C13.5222 20.6889 12.7974 21 12 21C11.2026 21 10.4778 20.6889 9.94047 20.1814C9.40874 19.6792 9.14287 19.4281 9.06753 19.3831C8.90626 19.2868 9.0351 19.3401 8.85296 19.2942C8.76788 19.2727 8.40225 19.2623 7.67121 19.2414C6.93238 19.2204 6.19986 18.9279 5.63597 18.364C5.07207 17.8001 4.77959 17.0676 4.75852 16.3287C4.73766 15.5976 4.72724 15.2321 4.70578 15.147C4.65985 14.9649 4.71322 15.0937 4.61691 14.9324C4.57192 14.8571 4.32082 14.5912 3.81862 14.0595C3.31113 13.5222 3 12.7974 3 12C3 11.2026 3.31113 10.4778 3.81862 9.94048C4.32082 9.40876 4.57192 9.14289 4.61691 9.06755C4.71322 8.90628 4.65985 9.03512 4.70578 8.85299C4.72724 8.7679 4.73766 8.40235 4.75852 7.67126C4.77959 6.93243 5.07207 6.1999 5.63597 5.636C6.19986 5.07211 6.93238 4.77963 7.67121 4.75855C8.40232 4.73769 8.76788 4.72727 8.85296 4.70581C9.0351 4.65988 8.90626 4.71325 9.06753 4.61694C9.14287 4.57195 9.40876 4.32082 9.94047 3.81863C10.4778 3.31113 11.2026 3 12 3C12.7974 3 13.5222 3.31114 14.0595 3.81864C14.5913 4.32084 14.8571 4.57194 14.9325 4.61693C15.0937 4.71324 14.9649 4.65988 15.147 4.70581C15.2321 4.72726 15.5976 4.73769 16.3287 4.75855Z\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    ></path>\n  </g>\n</svg>", styles: ["svg{width:22px!important;height:22px!important;margin-right:7px!important;margin-top:-2px}\n"] }]
+        }] });
+
+class BeaconIconWarningComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconIconWarningComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: BeaconIconWarningComponent, selector: "app-beacon-icon-warning", ngImport: i0, template: "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n  <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n  <g id=\"SVGRepo_iconCarrier\">\n    <path d=\"M12 7.75V13\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    <path\n      d=\"M21.08 8.58003V15.42C21.08 16.54 20.48 17.58 19.51 18.15L13.57 21.58C12.6 22.14 11.4 22.14 10.42 21.58L4.47998 18.15C3.50998 17.59 2.90997 16.55 2.90997 15.42V8.58003C2.90997 7.46003 3.50998 6.41999 4.47998 5.84999L10.42 2.42C11.39 1.86 12.59 1.86 13.57 2.42L19.51 5.84999C20.48 6.41999 21.08 7.45003 21.08 8.58003Z\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    ></path>\n    <path d=\"M12 16.2V16.2999\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n  </g>\n</svg>\n", styles: ["svg{width:22px!important;height:22px!important;margin-right:7px!important;margin-top:-2px}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconIconWarningComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-beacon-icon-warning', template: "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n  <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n  <g id=\"SVGRepo_iconCarrier\">\n    <path d=\"M12 7.75V13\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    <path\n      d=\"M21.08 8.58003V15.42C21.08 16.54 20.48 17.58 19.51 18.15L13.57 21.58C12.6 22.14 11.4 22.14 10.42 21.58L4.47998 18.15C3.50998 17.59 2.90997 16.55 2.90997 15.42V8.58003C2.90997 7.46003 3.50998 6.41999 4.47998 5.84999L10.42 2.42C11.39 1.86 12.59 1.86 13.57 2.42L19.51 5.84999C20.48 6.41999 21.08 7.45003 21.08 8.58003Z\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    ></path>\n    <path d=\"M12 16.2V16.2999\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n  </g>\n</svg>\n", styles: ["svg{width:22px!important;height:22px!important;margin-right:7px!important;margin-top:-2px}\n"] }]
+        }] });
+
+class BeaconTypeResolvePipe {
+    beaconTypeKeys;
+    constructor() {
+        this.beaconTypeKeys = BEACON_TYPE_KEYS;
+    }
+    transform(value, ...args) {
+        let status = false;
+        switch (args[0]) {
+            case 'alert':
+                status = value == this.beaconTypeKeys[0];
+                break;
+            case 'error':
+                status = value == this.beaconTypeKeys[1];
+                break;
+            case 'info':
+                status = value == this.beaconTypeKeys[2];
+                break;
+            case 'success':
+                status = value == this.beaconTypeKeys[3];
+                break;
+            case 'warning':
+                status = value == this.beaconTypeKeys[4];
+                break;
+        }
+        return status;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconTypeResolvePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: BeaconTypeResolvePipe, name: "beaconTypeResolve" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconTypeResolvePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'beaconTypeResolve'
+                }]
+        }], ctorParameters: () => [] });
+
+class BeaconNotifyComponent {
+    beaconService;
+    sanitizer;
+    beacon;
+    beaconDOM;
+    beaconDefaultIconKeys;
+    constructor(beaconService, sanitizer) {
+        this.beaconService = beaconService;
+        this.sanitizer = sanitizer;
+        this.beaconDefaultIconKeys = this.beaconService.getBeaconDefaultIconKeys;
+    }
+    ngOnInit() {
+        // Fire mount event
+        this.beaconService.beaconEventTaskMaster.emit({
+            mount: true,
+            id: this.beacon.bid
+        });
+    }
+    ngAfterViewInit() {
+        // Get beacon
+        const beacon = this.beaconDOM = this.beaconService.getBeaconContainer.nativeElement.querySelector(`#bc_${this.beacon.bid}`);
+        // Resolve possible focus for beacon
+        this.resolvePossibleFocusForBeacon(beacon);
+        setTimeout(() => {
+            // Resolve delay setting
+            this.resolveDelayForBeacon(beacon, true);
+            // Set beacon listener
+            this.setListenerForBeacon(beacon, this.beacon);
+            // Sanitize svg content if not font icon
+            if (this.beacon.svgIcon) {
+                const beaconSvgIcon = beacon.querySelector('span.beacon-message-svg-control svg');
+                beaconSvgIcon.style.width = '20px';
+                beaconSvgIcon.style.height = '20px';
+                beaconSvgIcon.style.marginRight = '7px';
+                beaconSvgIcon.style.marginTop = '-2px';
+            }
+        }, 0);
+        // Listen for event
+        this.beaconService.beaconEventTaskMaster.subscribe((message) => {
+            // Check for next for focus event
+            if (message.autoDetectNextFocusBeacon)
+                this.resolvePossibleFocusForBeacon(this.beaconDOM, false);
+        });
+    }
+    // When beacon button is clicked
+    beaconButtonClick(e, no) {
+        e.stopPropagation();
+        switch (no) {
+            case 1:
+                // Check for callback
+                if (this.beacon?.buttons?.one?.callback)
+                    this.beacon?.buttons?.one?.callback(this.beacon?.buttons?.one?.callbackArgs);
+                // Check if can dismiss
+                if (this.beacon?.buttons?.one?.canDismiss)
+                    this.closeBeacon(this.beaconDOM, this.beacon);
+                break;
+            case 2:
+                // Check for callback
+                if (this.beacon?.buttons?.two?.callback)
+                    this.beacon?.buttons?.two?.callback(this.beacon?.buttons?.two?.callbackArgs);
+                // Check if can dismiss
+                if (this.beacon?.buttons?.two?.canDismiss)
+                    this.closeBeacon(this.beaconDOM, this.beacon);
+                break;
+        }
+    }
+    // Set listener for beacon changes
+    setListenerForBeacon(beacon, beaconData) {
+        ((b, d) => {
+            beacon?.addEventListener('animationend', (e) => this.closeBeacon(b, d));
+            beacon?.addEventListener('webkitAnimationEnd', (e) => this.closeBeacon(b, d));
+            beacon?.addEventListener('oAnimationEnd', (e) => this.closeBeacon(b, d));
+        })(beacon, beaconData);
+    }
+    // Toggle auto-close
+    autoClose(status, control) {
+        status
+            ? (control.getAttribute('data-beacon-static') != 'true' && this.resolveDelayForBeacon(control, false))
+            : control.classList.remove(String(this.beacon.animationClass));
+    }
+    // Resolve delay for beacon
+    resolveDelayForBeacon(beacon, onLoad) {
+        // Check if delay set
+        if (this.beacon.static && typeof this.beacon.static == 'number') {
+            beacon && (beacon.style.animationDelay = this.beacon.static + 's');
+        }
+        else {
+            if (onLoad == !1 && this.beacon?.fixed != true)
+                beacon.classList.add(String(this.beacon.animationClass));
+        }
+    }
+    // Resolve focus beacon
+    resolvePossibleFocusForBeacon(beacon, createOverlay = true) {
+        const activeFocusBeaconId = this.beaconService.getActiveFocusBeaconId;
+        if (activeFocusBeaconId == this.beacon.bid) {
+            beacon.style.zIndex = '9003';
+            // Check if beacon should be centered
+            if (this.beacon.shine) {
+                beacon.style.position = 'fixed';
+                beacon.style.right = '0';
+                beacon.style.left = '0';
+                beacon.style.bottom = '50%';
+                beacon.style.margin = 'auto';
+                beacon.style.transform = 'scale(1.6)';
+            }
+            // Create overlay
+            if (createOverlay)
+                this.beaconService.createBeaconFocusOverlay(this.beacon.overlayColor);
+            else
+                this.beaconService.repaintBeaconFocusOverlay(this.beacon.overlayColor);
+        }
+    }
+    // Trigger close beacon
+    closeBeacon(beaconControl, beaconData) {
+        if (!this.beacon?.fixed) {
+            this.beaconService.beaconEventTaskMaster.emit({
+                delete: true,
+                id: beaconControl.getAttribute('id').replace(/bc_/, '')
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconNotifyComponent, deps: [{ token: BeaconNotifyService }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: BeaconNotifyComponent, selector: "app-beacon", inputs: { beacon: "beacon" }, ngImport: i0, template: "<div #beaconControl \n\t\t[id]=\"'bc_' + beacon.bid\"\n\t\t(mouseenter)=\"autoClose(false, beaconControl)\" \n\t\t(mouseleave)=\"autoClose(true, beaconControl)\"\n\t\t(click)=\"beacon.preventClickClose ? null : closeBeacon(beaconControl, beacon)\"\n\t\t[attr.data-beacon-static]=\"beacon.static\"\n\t\tclass=\"beacon-message-control {{ (beacon.static !== true && beacon.fixed !== true) ? beacon.animationClass : '' }} {{ beacon.replacementClass || beacon.type }} {{ beacon.styleClass }}\"\n\t\t[class.beacon-message-control-no-hover-effect]=\"beacon.noHoverEffect\">\n\t<div class=\"beacon-message-header\">\n\t\t<div>\n\t\t\t<span *ngIf=\"beacon.fontIcon\"><i [class]=\"beacon.icon\"></i></span>\n\t\t\t<span *ngIf=\"!beacon.fontIcon && beaconDefaultIconKeys.includes(beacon.icon)\" class=\"beacon-message-svg-control\">\n\t\t\t\t<app-beacon-icon-alert *ngIf=\"beacon.icon | beaconTypeResolve:'alert'\"></app-beacon-icon-alert>\n\t\t\t\t<app-beacon-icon-error *ngIf=\"beacon.icon | beaconTypeResolve:'error'\"></app-beacon-icon-error>\n\t\t\t\t<app-beacon-icon-info *ngIf=\"beacon.icon | beaconTypeResolve:'info'\"></app-beacon-icon-info>\n\t\t\t\t<app-beacon-icon-success *ngIf=\"beacon.icon | beaconTypeResolve:'success'\"></app-beacon-icon-success>\n\t\t\t\t<app-beacon-icon-warning *ngIf=\"beacon.icon | beaconTypeResolve:'warning'\"></app-beacon-icon-warning>\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!beacon.fontIcon && beacon.icon && !beaconDefaultIconKeys.includes(beacon.icon)\" class=\"beacon-message-svg-control\" [innerHTML]=\"beacon.svgIcon\"></span>\n\t\t\t{{ beacon.title }}\n\t\t</div>\n\t\t<div>\n\t\t\t<div *ngIf=\"!beacon.fixed\" class=\"beacon-message-close\" (click)=\"closeBeacon(beaconControl, beacon)\">\n\t\t\t\t<svg width=\"10\" height=\"10\" viewBox=\"0 0 78 78\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t    <rect y=\"7.07104\" width=\"10\" height=\"100\" rx=\"5\" transform=\"rotate(-45 0 7.07104)\" />\n\t\t\t    <rect x=\"70.7109\" width=\"10\" height=\"100\" rx=\"5\" transform=\"rotate(45 70.7109 0)\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"beacon-message-divider\"></div>\n\t<div class=\"beacon-message-body\" [innerHTML]=\"beacon.bodyHtml\"></div>\n\t<div class=\"beacon-message-divider\" *ngIf=\"beacon.buttons?.one || beacon.buttons?.two\"></div>\n\n\t<div class=\"beacon-message-footer\" *ngIf=\"beacon.buttons && beacon.buttons.one && beacon.buttons.two\">\n\t\t<div><button (click)=\"beaconButtonClick($event, 1)\">{{ beacon.buttons.one.text }}</button></div>\n\t\t<div><button (click)=\"beaconButtonClick($event, 2)\">{{ beacon.buttons.two.text }}</button></div>\n\t</div>\n\n\t<div class=\"beacon-message-footer\" *ngIf=\"beacon.buttons && beacon.buttons.one && !beacon.buttons.two\">\n\t\t<div [class]=\"beacon.buttons.one.position ? ('beacon-message-button-container-' + beacon.buttons.one.position) : ''\">\n\t\t\t<button (click)=\"beaconButtonClick($event, 1)\">{{ beacon.buttons.one.text }}</button>\n\t\t</div>\n\t</div>\n\n</div>", styles: [".beacon-message-control{width:270px;height:auto;background:#eee;margin:6px;border-radius:4px;position:relative;z-index:4000;cursor:pointer}.beacon-message-control:hover{box-shadow:0 0 20px #4443}.beacon-message-control-no-hover-effect{box-shadow:none!important}.beacon-message-control-animate{-webkit-animation:beacon-fade-out .5s 7s linear forwards;animation:beacon-fade-out .5s 7s linear forwards}.beacon-message-header,.beacon-message-body,.beacon-message-footer{padding:8px;font-size:14px}.beacon-message-header{font-weight:700;display:flex;font-size:15px}.beacon-message-header>div:first-child{flex-grow:1;display:flex;place-items:flex-start;word-break:break-all}.beacon-message-header>div:first-child i{font-size:20px;margin-right:7px;margin-top:2px}.beacon-message-header>div:last-child{flex-grow:0}.beacon-message-divider{border-top:1px solid #44444433}.beacon-message-close{height:22px;width:22px;border:1px solid #444444;display:flex;place-items:center;place-content:center;border-radius:100%;cursor:pointer;opacity:.3}.beacon-message-close svg rect{fill:#444}.beacon-message-close:hover{opacity:.7}.beacon-message-alert{background:#eee;color:#5e5e5e}.beacon-message-alert .beacon-message-footer button{border:1px solid #5E5E5E;color:#5e5e5e}.beacon-message-alert .beacon-message-footer button:hover{background:#5e5e5e;color:#fff}.beacon-message-success{background:#f0fff0;color:#698b69}.beacon-message-success .beacon-message-divider{border-color:#698b6933}.beacon-message-success .beacon-message-footer button{border:1px solid #698B69;color:#698b69}.beacon-message-success .beacon-message-footer button:hover{background:#698b69;color:#fff}.beacon-message-error{background:#ffe4e1;color:#b22222}.beacon-message-error .beacon-message-divider{border-color:#ee3b3b33}.beacon-message-error .beacon-message-footer button{border:1px solid #B22222;color:#b22222}.beacon-message-error .beacon-message-footer button:hover{background:#b22222;color:#fff}.beacon-message-warning{background:#fffacd;color:#b8860b}.beacon-message-warning .beacon-message-divider{border-color:#ffd70088}.beacon-message-warning .beacon-message-footer button{border:1px solid #B8860B;color:#b8860b}.beacon-message-warning .beacon-message-footer button:hover{background:#b8860b;color:#fff}.beacon-message-info{background:#bfefff;color:#4a708b}.beacon-message-info .beacon-message-divider{border-color:#5cacee33}.beacon-message-info .beacon-message-footer button{border:1px solid #4A708B;color:#4a708b}.beacon-message-info .beacon-message-footer button:hover{background:#4a708b;color:#fff}.beacon-message-footer{display:flex}.beacon-message-footer>div:first-child{flex-grow:1}.beacon-message-footer>div:last-child{flex-grow:1;text-align:right}.beacon-message-footer button{padding:4px 7px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;background:transparent;cursor:pointer}.beacon-message-footer .beacon-message-button-container-left{text-align:left!important}.beacon-message-footer .beacon-message-button-container-center{text-align:center!important}.beacon-message-footer .beacon-message-button-container-right{text-align:right!important}@keyframes beacon-fade-out{90%{opacity:0;display:none}to{opacity:0;display:none}}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BeaconIconAlertComponent, selector: "app-beacon-icon-alert" }, { kind: "component", type: BeaconIconErrorComponent, selector: "app-beacon-icon-error" }, { kind: "component", type: BeaconIconInfoComponent, selector: "app-beacon-icon-info" }, { kind: "component", type: BeaconIconSuccessComponent, selector: "app-beacon-icon-success" }, { kind: "component", type: BeaconIconWarningComponent, selector: "app-beacon-icon-warning" }, { kind: "pipe", type: BeaconTypeResolvePipe, name: "beaconTypeResolve" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconNotifyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-beacon', template: "<div #beaconControl \n\t\t[id]=\"'bc_' + beacon.bid\"\n\t\t(mouseenter)=\"autoClose(false, beaconControl)\" \n\t\t(mouseleave)=\"autoClose(true, beaconControl)\"\n\t\t(click)=\"beacon.preventClickClose ? null : closeBeacon(beaconControl, beacon)\"\n\t\t[attr.data-beacon-static]=\"beacon.static\"\n\t\tclass=\"beacon-message-control {{ (beacon.static !== true && beacon.fixed !== true) ? beacon.animationClass : '' }} {{ beacon.replacementClass || beacon.type }} {{ beacon.styleClass }}\"\n\t\t[class.beacon-message-control-no-hover-effect]=\"beacon.noHoverEffect\">\n\t<div class=\"beacon-message-header\">\n\t\t<div>\n\t\t\t<span *ngIf=\"beacon.fontIcon\"><i [class]=\"beacon.icon\"></i></span>\n\t\t\t<span *ngIf=\"!beacon.fontIcon && beaconDefaultIconKeys.includes(beacon.icon)\" class=\"beacon-message-svg-control\">\n\t\t\t\t<app-beacon-icon-alert *ngIf=\"beacon.icon | beaconTypeResolve:'alert'\"></app-beacon-icon-alert>\n\t\t\t\t<app-beacon-icon-error *ngIf=\"beacon.icon | beaconTypeResolve:'error'\"></app-beacon-icon-error>\n\t\t\t\t<app-beacon-icon-info *ngIf=\"beacon.icon | beaconTypeResolve:'info'\"></app-beacon-icon-info>\n\t\t\t\t<app-beacon-icon-success *ngIf=\"beacon.icon | beaconTypeResolve:'success'\"></app-beacon-icon-success>\n\t\t\t\t<app-beacon-icon-warning *ngIf=\"beacon.icon | beaconTypeResolve:'warning'\"></app-beacon-icon-warning>\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!beacon.fontIcon && beacon.icon && !beaconDefaultIconKeys.includes(beacon.icon)\" class=\"beacon-message-svg-control\" [innerHTML]=\"beacon.svgIcon\"></span>\n\t\t\t{{ beacon.title }}\n\t\t</div>\n\t\t<div>\n\t\t\t<div *ngIf=\"!beacon.fixed\" class=\"beacon-message-close\" (click)=\"closeBeacon(beaconControl, beacon)\">\n\t\t\t\t<svg width=\"10\" height=\"10\" viewBox=\"0 0 78 78\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t    <rect y=\"7.07104\" width=\"10\" height=\"100\" rx=\"5\" transform=\"rotate(-45 0 7.07104)\" />\n\t\t\t    <rect x=\"70.7109\" width=\"10\" height=\"100\" rx=\"5\" transform=\"rotate(45 70.7109 0)\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"beacon-message-divider\"></div>\n\t<div class=\"beacon-message-body\" [innerHTML]=\"beacon.bodyHtml\"></div>\n\t<div class=\"beacon-message-divider\" *ngIf=\"beacon.buttons?.one || beacon.buttons?.two\"></div>\n\n\t<div class=\"beacon-message-footer\" *ngIf=\"beacon.buttons && beacon.buttons.one && beacon.buttons.two\">\n\t\t<div><button (click)=\"beaconButtonClick($event, 1)\">{{ beacon.buttons.one.text }}</button></div>\n\t\t<div><button (click)=\"beaconButtonClick($event, 2)\">{{ beacon.buttons.two.text }}</button></div>\n\t</div>\n\n\t<div class=\"beacon-message-footer\" *ngIf=\"beacon.buttons && beacon.buttons.one && !beacon.buttons.two\">\n\t\t<div [class]=\"beacon.buttons.one.position ? ('beacon-message-button-container-' + beacon.buttons.one.position) : ''\">\n\t\t\t<button (click)=\"beaconButtonClick($event, 1)\">{{ beacon.buttons.one.text }}</button>\n\t\t</div>\n\t</div>\n\n</div>", styles: [".beacon-message-control{width:270px;height:auto;background:#eee;margin:6px;border-radius:4px;position:relative;z-index:4000;cursor:pointer}.beacon-message-control:hover{box-shadow:0 0 20px #4443}.beacon-message-control-no-hover-effect{box-shadow:none!important}.beacon-message-control-animate{-webkit-animation:beacon-fade-out .5s 7s linear forwards;animation:beacon-fade-out .5s 7s linear forwards}.beacon-message-header,.beacon-message-body,.beacon-message-footer{padding:8px;font-size:14px}.beacon-message-header{font-weight:700;display:flex;font-size:15px}.beacon-message-header>div:first-child{flex-grow:1;display:flex;place-items:flex-start;word-break:break-all}.beacon-message-header>div:first-child i{font-size:20px;margin-right:7px;margin-top:2px}.beacon-message-header>div:last-child{flex-grow:0}.beacon-message-divider{border-top:1px solid #44444433}.beacon-message-close{height:22px;width:22px;border:1px solid #444444;display:flex;place-items:center;place-content:center;border-radius:100%;cursor:pointer;opacity:.3}.beacon-message-close svg rect{fill:#444}.beacon-message-close:hover{opacity:.7}.beacon-message-alert{background:#eee;color:#5e5e5e}.beacon-message-alert .beacon-message-footer button{border:1px solid #5E5E5E;color:#5e5e5e}.beacon-message-alert .beacon-message-footer button:hover{background:#5e5e5e;color:#fff}.beacon-message-success{background:#f0fff0;color:#698b69}.beacon-message-success .beacon-message-divider{border-color:#698b6933}.beacon-message-success .beacon-message-footer button{border:1px solid #698B69;color:#698b69}.beacon-message-success .beacon-message-footer button:hover{background:#698b69;color:#fff}.beacon-message-error{background:#ffe4e1;color:#b22222}.beacon-message-error .beacon-message-divider{border-color:#ee3b3b33}.beacon-message-error .beacon-message-footer button{border:1px solid #B22222;color:#b22222}.beacon-message-error .beacon-message-footer button:hover{background:#b22222;color:#fff}.beacon-message-warning{background:#fffacd;color:#b8860b}.beacon-message-warning .beacon-message-divider{border-color:#ffd70088}.beacon-message-warning .beacon-message-footer button{border:1px solid #B8860B;color:#b8860b}.beacon-message-warning .beacon-message-footer button:hover{background:#b8860b;color:#fff}.beacon-message-info{background:#bfefff;color:#4a708b}.beacon-message-info .beacon-message-divider{border-color:#5cacee33}.beacon-message-info .beacon-message-footer button{border:1px solid #4A708B;color:#4a708b}.beacon-message-info .beacon-message-footer button:hover{background:#4a708b;color:#fff}.beacon-message-footer{display:flex}.beacon-message-footer>div:first-child{flex-grow:1}.beacon-message-footer>div:last-child{flex-grow:1;text-align:right}.beacon-message-footer button{padding:4px 7px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;background:transparent;cursor:pointer}.beacon-message-footer .beacon-message-button-container-left{text-align:left!important}.beacon-message-footer .beacon-message-button-container-center{text-align:center!important}.beacon-message-footer .beacon-message-button-container-right{text-align:right!important}@keyframes beacon-fade-out{90%{opacity:0;display:none}to{opacity:0;display:none}}\n"] }]
+        }], ctorParameters: () => [{ type: BeaconNotifyService }, { type: i1.DomSanitizer }], propDecorators: { beacon: [{
+                type: Input
+            }] } });
+
+class BeaconNotifyContainerComponent {
+    beaconService;
+    set content(content) {
+        content && this.resolveBeaconContainer(content);
+    }
+    beaconLibrary;
+    constructor(beaconService) {
+        this.beaconService = beaconService;
+        this.beaconLibrary = this.beaconService.beaconLibrary;
+    }
+    ngOnInit() {
+        // Listen for delete event
+        this.beaconService.beaconEventTaskMaster.subscribe((message) => {
+            if (message.delete)
+                this.beaconLibrary = this.beaconService.beaconLibrary = this.beaconService.beaconLibrary.filter(x => x.bid != message.id);
+        });
+    }
+    ngAfterViewInit() { }
+    // Resolve beacon container
+    resolveBeaconContainer(content) {
+        this.beaconService.setBeaconContainer(content);
+        // Resolve position
+        const position = this.beaconService.getBeaconGlobalPositionConfig;
+        // Resolve ltr
+        if (position?.leftRight) {
+            if (position?.leftRight == 'left') {
+                content.nativeElement.style.left = 0;
+                content.nativeElement.style.right = 'auto';
+            }
+            else if (position?.leftRight == 'center') {
+                content.nativeElement.style.left = 0;
+                content.nativeElement.style.right = 0;
+                content.nativeElement.style.margin = 'auto';
+            }
+            else {
+                content.nativeElement.style.left = 'auto';
+                content.nativeElement.style.right = 0;
+            }
+        }
+        // Resolve ttb
+        if (position?.topBottom) {
+            if (position?.topBottom == 'top') {
+                content.nativeElement.style.top = 0;
+                content.nativeElement.style.bottom = 'auto';
+            }
+            else {
+                content.nativeElement.style.top = 'auto';
+                content.nativeElement.style.bottom = 0;
+            }
+        }
+    }
+    // Track-by function
+    trackBy(idx, item) {
+        return item.bid;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconNotifyContainerComponent, deps: [{ token: BeaconNotifyService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: BeaconNotifyContainerComponent, selector: "ngx-beacon-notify", viewQueries: [{ propertyName: "content", first: true, predicate: ["beaconContainer"], descendants: true }], ngImport: i0, template: "<div id=\"app-beacon-notify-container\" #beaconContainer>\n\t<app-beacon *ngFor=\"let beacon of beaconLibrary; trackBy: trackBy\" [id]=\"'bcp_'+beacon.bid\" [beacon]=\"beacon\"></app-beacon>\n</div>", styles: ["#app-beacon-notify-container{position:fixed;height:auto;width:auto;inset:0 0 auto auto;z-index:3999;width:282px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BeaconNotifyComponent, selector: "app-beacon", inputs: ["beacon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconNotifyContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-beacon-notify', template: "<div id=\"app-beacon-notify-container\" #beaconContainer>\n\t<app-beacon *ngFor=\"let beacon of beaconLibrary; trackBy: trackBy\" [id]=\"'bcp_'+beacon.bid\" [beacon]=\"beacon\"></app-beacon>\n</div>", styles: ["#app-beacon-notify-container{position:fixed;height:auto;width:auto;inset:0 0 auto auto;z-index:3999;width:282px}\n"] }]
+        }], ctorParameters: () => [{ type: BeaconNotifyService }], propDecorators: { content: [{
+                type: ViewChild,
+                args: ['beaconContainer', { static: false }]
+            }] } });
+
+class BeaconNotifyModule {
+    static forRoot(config) {
+        return {
+            ngModule: BeaconNotifyModule,
+            providers: [
+                { provide: BEACON_GLOBAL_CONFIG, useValue: config },
+                BeaconNotifyService
+            ]
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconNotifyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: BeaconNotifyModule, declarations: [BeaconNotifyComponent,
+            BeaconNotifyContainerComponent,
+            BeaconIconAlertComponent,
+            BeaconIconErrorComponent,
+            BeaconIconInfoComponent,
+            BeaconIconSuccessComponent,
+            BeaconIconWarningComponent,
+            BeaconTypeResolvePipe], imports: [CommonModule], exports: [BeaconNotifyComponent,
+            BeaconNotifyContainerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconNotifyModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconNotifyModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BeaconNotifyComponent,
+                        BeaconNotifyContainerComponent,
+                        BeaconIconAlertComponent,
+                        BeaconIconErrorComponent,
+                        BeaconIconInfoComponent,
+                        BeaconIconSuccessComponent,
+                        BeaconIconWarningComponent,
+                        BeaconTypeResolvePipe
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        BeaconNotifyComponent,
+                        BeaconNotifyContainerComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BeaconNotifyComponent, BeaconNotifyContainerComponent, BeaconNotifyModule, BeaconNotifyService };
+//# sourceMappingURL=ngx-beacon-notify.mjs.map