ngx-beacon-notify 1.0.0 → 1.1.0

package/beacon/beacon.component.css

@@ -1,175 +0,0 @@
-.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

@@ -1,46 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-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

@@ -1,142 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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
-      ]
-    }
-  }
-}