ngx-beacon-notify 1.0.0

package/beacon/beacon.component.css

@@ -0,0 +1,175 @@
+.beacon-message-control {
+	width: 270px;
+	height: auto;
+	background: #eeeeee;
+	margin: 6px;
+	border-radius: 4px;
+	position: relative;
+	z-index: 4000;
+	cursor: pointer;
+}
+.beacon-message-control:hover {
+	box-shadow: 0 0 20px #44444433;
+}
+.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: bold;
+	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: #444444;
+}
+.beacon-message-close:hover {
+	opacity: .7;
+}
+.beacon-message-alert {
+	background: #eeeeee;
+	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;
+  }
+  100% {
+  	opacity: 0;
+    display: none;
+  }
+}

package/beacon/beacon.component.html

@@ -0,0 +1,46 @@
+<div #beaconControl 
+		[id]="'bc_' + beacon.bid"
+		(mouseenter)="autoClose(false, beaconControl)" 
+		(mouseleave)="autoClose(true, beaconControl)"
+		(click)="beacon.preventClickClose ? null : closeBeacon(beaconControl, beacon)"
+		[attr.data-beacon-static]="beacon.static"
+		class="beacon-message-control {{ (beacon.static !== true && beacon.fixed !== true) ? beacon.animationClass : '' }} {{ beacon.replacementClass || beacon.type }} {{ beacon.styleClass }}"
+		[class.beacon-message-control-no-hover-effect]="beacon.noHoverEffect">
+	<div class="beacon-message-header">
+		<div>
+			<span *ngIf="beacon.fontIcon"><i [class]="beacon.icon"></i></span>
+			<span *ngIf="!beacon.fontIcon && beaconDefaultIconKeys.includes(beacon.icon)" class="beacon-message-svg-control">
+				<app-beacon-icon-alert *ngIf="beacon.icon | beaconTypeResolve:'alert'"></app-beacon-icon-alert>
+				<app-beacon-icon-error *ngIf="beacon.icon | beaconTypeResolve:'error'"></app-beacon-icon-error>
+				<app-beacon-icon-info *ngIf="beacon.icon | beaconTypeResolve:'info'"></app-beacon-icon-info>
+				<app-beacon-icon-success *ngIf="beacon.icon | beaconTypeResolve:'success'"></app-beacon-icon-success>
+				<app-beacon-icon-warning *ngIf="beacon.icon | beaconTypeResolve:'warning'"></app-beacon-icon-warning>
+			</span>
+			<span *ngIf="!beacon.fontIcon && beacon.icon && !beaconDefaultIconKeys.includes(beacon.icon)" class="beacon-message-svg-control" [innerHTML]="beacon.svgIcon"></span>
+			{{ beacon.title }}
+		</div>
+		<div>
+			<div *ngIf="!beacon.fixed" class="beacon-message-close" (click)="closeBeacon(beaconControl, beacon)">
+				<svg width="10" height="10" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+			    <rect y="7.07104" width="10" height="100" rx="5" transform="rotate(-45 0 7.07104)" />
+			    <rect x="70.7109" width="10" height="100" rx="5" transform="rotate(45 70.7109 0)" />
+				</svg>
+			</div>
+		</div>
+	</div>
+	<div class="beacon-message-divider"></div>
+	<div class="beacon-message-body" [innerHTML]="beacon.bodyHtml"></div>
+	<div class="beacon-message-divider" *ngIf="beacon.buttons?.one || beacon.buttons?.two"></div>
+
+	<div class="beacon-message-footer" *ngIf="beacon.buttons && beacon.buttons.one && beacon.buttons.two">
+		<div><button (click)="beaconButtonClick($event, 1)">{{ beacon.buttons.one.text }}</button></div>
+		<div><button (click)="beaconButtonClick($event, 2)">{{ beacon.buttons.two.text }}</button></div>
+	</div>
+
+	<div class="beacon-message-footer" *ngIf="beacon.buttons && beacon.buttons.one && !beacon.buttons.two">
+		<div [class]="beacon.buttons.one.position ? ('beacon-message-button-container-' + beacon.buttons.one.position) : ''">
+			<button (click)="beaconButtonClick($event, 1)">{{ beacon.buttons.one.text }}</button>
+		</div>
+	</div>
+
+</div>

package/beacon/beacon.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BeaconNotifyComponent } from './beacon.component';
+
+describe('BeaconNotifyComponent', () => {
+  let component: BeaconNotifyComponent;
+  let fixture: ComponentFixture<BeaconNotifyComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [BeaconNotifyComponent]
+    });
+    fixture = TestBed.createComponent(BeaconNotifyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/beacon/beacon.component.ts

@@ -0,0 +1,142 @@
+import { Component, Input, AfterViewInit } from '@angular/core';
+import { BeaconNotifyService } from '../beacon-notify.service';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { IBeaconConfig, IBeaconEventMessage } from '../types';
+
+@Component({
+  selector: 'app-beacon',
+  templateUrl: './beacon.component.html',
+  styleUrls: ['./beacon.component.css']
+})
+export class BeaconNotifyComponent {
+  @Input() beacon!: IBeaconConfig
+  private beaconDOM!: HTMLElement
+  public beaconDefaultIconKeys!: string[]
+
+  constructor(private beaconService: BeaconNotifyService,
+    private sanitizer: DomSanitizer){
+    this.beaconDefaultIconKeys = this.beaconService.getBeaconDefaultIconKeys
+  }
+
+  ngOnInit(): void {
+    // Fire mount event
+    this.beaconService.beaconEventTaskMaster.emit({
+      mount: true,
+      id: this.beacon.bid
+    })
+  }
+
+  ngAfterViewInit(): void {
+    // 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: IBeaconEventMessage) => {
+      // Check for next for focus event
+      if (message.autoDetectNextFocusBeacon)
+        this.resolvePossibleFocusForBeacon(this.beaconDOM, false)
+    })
+  }
+
+  // When beacon button is clicked
+  beaconButtonClick(e: Event, no: number): void {
+    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: Element, beaconData: IBeaconConfig): void {
+    ((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: boolean, control: HTMLElement): void {
+    status
+      ? (control.getAttribute('data-beacon-static') != 'true' && this.resolveDelayForBeacon(control, false))
+      : control.classList.remove(String(this.beacon.animationClass))
+  }
+
+  // Resolve delay for beacon
+  resolveDelayForBeacon(beacon: HTMLElement, onLoad?: boolean): void {
+    // 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: HTMLElement, createOverlay: boolean = true): void {
+    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: any, beaconData: IBeaconConfig): void {
+    if (!this.beacon?.fixed) {
+      this.beaconService.beaconEventTaskMaster.emit({
+        delete: true,
+        id: beaconControl.getAttribute('id').replace(/bc_/, '')
+      })
+    }
+  }
+}

package/beacon-notify.module.ts

@@ -0,0 +1,43 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BeaconNotifyContainerComponent } from './container/container.component';
+import { BeaconNotifyComponent } from './beacon/beacon.component';
+import { IBeaconGlobalConfig, BEACON_GLOBAL_CONFIG } from './types';
+import { BeaconNotifyService } from './beacon-notify.service';
+import { BeaconIconSuccessComponent } from './icons/beacon-icon-success/beacon-icon-success.component';
+import { BeaconIconAlertComponent } from './icons/beacon-icon-alert/beacon-icon-alert.component';
+import { BeaconIconErrorComponent } from './icons/beacon-icon-error/beacon-icon-error.component';
+import { BeaconIconInfoComponent } from './icons/beacon-icon-info/beacon-icon-info.component';
+import { BeaconIconWarningComponent } from './icons/beacon-icon-warning/beacon-icon-warning.component';
+import { BeaconTypeResolvePipe } from './pipes/beacon-type-resolve.pipe';
+
+@NgModule({
+  declarations: [
+    BeaconNotifyComponent,
+    BeaconNotifyContainerComponent,
+    BeaconIconAlertComponent,
+    BeaconIconErrorComponent,
+    BeaconIconInfoComponent,
+    BeaconIconSuccessComponent,
+    BeaconIconWarningComponent,
+    BeaconTypeResolvePipe
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    BeaconNotifyComponent,
+    BeaconNotifyContainerComponent
+  ]
+})
+export class BeaconNotifyModule {
+  static forRoot(config?: IBeaconGlobalConfig): ModuleWithProviders<BeaconNotifyModule> {
+    return {
+      ngModule: BeaconNotifyModule,
+      providers: [
+        { provide: BEACON_GLOBAL_CONFIG, useValue: config },
+        BeaconNotifyService
+      ]
+    }
+  }
+}