ngx-beacon-notify 1.3.1 → 1.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/beacon/beacon.component.mjs +2 -2
- package/esm2022/lib/beacon-notify.service.mjs +11 -5
- package/esm2022/lib/types/constants/window.mjs +49 -0
- package/fesm2022/ngx-beacon-notify.mjs +60 -9
- package/fesm2022/ngx-beacon-notify.mjs.map +1 -1
- package/lib/beacon-notify.service.d.ts +2 -1
- package/lib/types/constants/window.d.ts +16 -0
- package/package.json +1 -1
|
@@ -1,16 +1,63 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken,
|
|
3
|
-
import * as i1 from '@angular/platform-browser';
|
|
2
|
+
import { InjectionToken, Injectable, PLATFORM_ID, EventEmitter, Inject, Component, Pipe, Input, ViewChild, NgModule } from '@angular/core';
|
|
4
3
|
import * as i3 from '@angular/common';
|
|
5
|
-
import { CommonModule } from '@angular/common';
|
|
4
|
+
import { isPlatformBrowser, CommonModule } from '@angular/common';
|
|
5
|
+
import * as i1 from '@angular/platform-browser';
|
|
6
6
|
|
|
7
7
|
const BEACON_GLOBAL_CONFIG = new InjectionToken('IBeaconGlobalConfig');
|
|
8
8
|
const BEACON_OVERLAY_COLOR = '#000000DD';
|
|
9
9
|
const BEACON_OVERLAY_ID = 'beacon-notify-focus-overlay_x';
|
|
10
10
|
const BEACON_TYPE_KEYS = ['a.a', 'a.e', 'a.i', 'a.s', 'a.w'];
|
|
11
11
|
|
|
12
|
+
/* Create a new injection token for injecting the window into a component. */
|
|
13
|
+
const WINDOW = new InjectionToken('WindowToken');
|
|
14
|
+
/* Define abstract class for obtaining reference to the global window object. */
|
|
15
|
+
class WindowRef {
|
|
16
|
+
get nativeWindow() {
|
|
17
|
+
throw new Error('Not implemented.');
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
/* Define class that implements the abstract class and returns the native window object. */
|
|
21
|
+
class BrowserWindowRef extends WindowRef {
|
|
22
|
+
constructor() {
|
|
23
|
+
super();
|
|
24
|
+
}
|
|
25
|
+
get nativeWindow() {
|
|
26
|
+
return window;
|
|
27
|
+
}
|
|
28
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BrowserWindowRef, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
29
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BrowserWindowRef });
|
|
30
|
+
}
|
|
31
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BrowserWindowRef, decorators: [{
|
|
32
|
+
type: Injectable
|
|
33
|
+
}], ctorParameters: () => [] });
|
|
34
|
+
/* Create an factory function that returns the native window object. */
|
|
35
|
+
function windowFactory(browserWindowRef, platformId) {
|
|
36
|
+
if (isPlatformBrowser(platformId)) {
|
|
37
|
+
return browserWindowRef.nativeWindow;
|
|
38
|
+
}
|
|
39
|
+
return new Object();
|
|
40
|
+
}
|
|
41
|
+
/* Create a injectable provider for the WindowRef token that uses the BrowserWindowRef class. */
|
|
42
|
+
const browserWindowProvider = {
|
|
43
|
+
provide: WindowRef,
|
|
44
|
+
useClass: BrowserWindowRef
|
|
45
|
+
};
|
|
46
|
+
/* Create an injectable provider that uses the windowFactory function for returning the native window object. */
|
|
47
|
+
const windowProvider = {
|
|
48
|
+
provide: WINDOW,
|
|
49
|
+
useFactory: windowFactory,
|
|
50
|
+
deps: [WindowRef, PLATFORM_ID]
|
|
51
|
+
};
|
|
52
|
+
/* Create an array of providers. */
|
|
53
|
+
const WINDOW_PROVIDERS = [
|
|
54
|
+
browserWindowProvider,
|
|
55
|
+
windowProvider
|
|
56
|
+
];
|
|
57
|
+
|
|
12
58
|
class BeaconNotifyService {
|
|
13
59
|
sanitizer;
|
|
60
|
+
window;
|
|
14
61
|
globalConfig;
|
|
15
62
|
beaconDefaultIconKeys = BEACON_TYPE_KEYS;
|
|
16
63
|
beaconConfigMap = {
|
|
@@ -69,8 +116,9 @@ class BeaconNotifyService {
|
|
|
69
116
|
beaconEventTaskMaster = new EventEmitter();
|
|
70
117
|
beaconLibrary = [];
|
|
71
118
|
beaconLibraryQueue = [];
|
|
72
|
-
constructor(sanitizer, globalConfig) {
|
|
119
|
+
constructor(sanitizer, window, globalConfig) {
|
|
73
120
|
this.sanitizer = sanitizer;
|
|
121
|
+
this.window = window;
|
|
74
122
|
this.globalConfig = globalConfig;
|
|
75
123
|
this.globalConfig && this.resolveGlobalConfig(this.globalConfig);
|
|
76
124
|
// Resolve events
|
|
@@ -446,7 +494,7 @@ class BeaconNotifyService {
|
|
|
446
494
|
// create notification beacon
|
|
447
495
|
beacon(message, type) {
|
|
448
496
|
// Get signature
|
|
449
|
-
const signature = window.btoa((this.beaconTitle || this.beaconConfigMap[type].title) + '.' + message);
|
|
497
|
+
const signature = this.window.btoa((this.beaconTitle || this.beaconConfigMap[type].title) + '.' + message);
|
|
450
498
|
// Generate beacon id
|
|
451
499
|
const beaconId = this.getId;
|
|
452
500
|
// Register beacon in event library
|
|
@@ -611,9 +659,9 @@ class BeaconNotifyService {
|
|
|
611
659
|
isNewBeaconADuplicate(signature) {
|
|
612
660
|
const duplicate = this.beaconLibrary.find(x => x.signature == signature);
|
|
613
661
|
const beacon = this.beaconContainer.nativeElement.querySelector(`div#bc_${duplicate?.bid}`);
|
|
614
|
-
return Boolean(beacon && window.getComputedStyle(beacon).opacity == '1');
|
|
662
|
+
return Boolean(beacon && this.window.getComputedStyle(beacon).opacity == '1');
|
|
615
663
|
}
|
|
616
|
-
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 });
|
|
664
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconNotifyService, deps: [{ token: i1.DomSanitizer }, { token: WINDOW }, { token: BEACON_GLOBAL_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
617
665
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconNotifyService, providedIn: 'root' });
|
|
618
666
|
}
|
|
619
667
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconNotifyService, decorators: [{
|
|
@@ -622,6 +670,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
|
|
|
622
670
|
providedIn: 'root'
|
|
623
671
|
}]
|
|
624
672
|
}], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: undefined, decorators: [{
|
|
673
|
+
type: Inject,
|
|
674
|
+
args: [WINDOW]
|
|
675
|
+
}] }, { type: undefined, decorators: [{
|
|
625
676
|
type: Inject,
|
|
626
677
|
args: [BEACON_GLOBAL_CONFIG]
|
|
627
678
|
}] }] });
|
|
@@ -839,11 +890,11 @@ class BeaconNotifyComponent {
|
|
|
839
890
|
}
|
|
840
891
|
}
|
|
841
892
|
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 });
|
|
842
|
-
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<span class=\"beacon-message-title\">{{ beacon.title }}</span>\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-svg-control{position:relative;top:0}.beacon-message-title{display:inline-flex;padding-right:5px}.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:15px}.beacon-message-header{display:flex;font-size:15px}.beacon-message-header>div:first-child{flex-grow:1;display:flex;place-items:flex-start;word-break:break-
|
|
893
|
+
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<span class=\"beacon-message-title\">{{ beacon.title }}</span>\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-svg-control{position:relative;top:0}.beacon-message-title{display:inline-flex;padding-right:5px}.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:15px}.beacon-message-header{display:flex;font-size:15px}.beacon-message-header>div:first-child{flex-grow:1;display:flex;place-items:flex-start;word-break:break-word}.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" }] });
|
|
843
894
|
}
|
|
844
895
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: BeaconNotifyComponent, decorators: [{
|
|
845
896
|
type: Component,
|
|
846
|
-
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<span class=\"beacon-message-title\">{{ beacon.title }}</span>\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-svg-control{position:relative;top:0}.beacon-message-title{display:inline-flex;padding-right:5px}.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:15px}.beacon-message-header{display:flex;font-size:15px}.beacon-message-header>div:first-child{flex-grow:1;display:flex;place-items:flex-start;word-break:break-
|
|
897
|
+
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<span class=\"beacon-message-title\">{{ beacon.title }}</span>\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-svg-control{position:relative;top:0}.beacon-message-title{display:inline-flex;padding-right:5px}.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:15px}.beacon-message-header{display:flex;font-size:15px}.beacon-message-header>div:first-child{flex-grow:1;display:flex;place-items:flex-start;word-break:break-word}.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"] }]
|
|
847
898
|
}], ctorParameters: () => [{ type: BeaconNotifyService }, { type: i1.DomSanitizer }], propDecorators: { beacon: [{
|
|
848
899
|
type: Input
|
|
849
900
|
}] } });
|