added null filter in control base

BUG: not working with aot turned off?
added callback observable for notify and toast

Author: morrisjdev

.idea/runConfigurations/Angular_CLI_Server.xml

@@ -20,10 +20,12 @@
     "@angular/platform-browser-dynamic": "~8.1.0",
     "@angular/router": "~8.1.0",
     "core-js": "^2.5.4",
+    "highlight.js": "^9.15.9",
     "jquery.hotkeys": "^0.1.0",
     "linq4js": "^2.2.2",
     "metro4": "^4.2.47",
     "moment": "^2.24.0",
+    "ngx-highlightjs": "^3.0.3",
     "rxjs": "~6.5.2",
     "zone.js": "~0.9.1"
   },

.idea/workspace.xml

@@ -1,7 +1,7 @@
 {
   "name": "ng-metro4",
   "description": "ng-metro4 is an implementation of the beautiful metro4 components",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "peerDependencies": {
     "@angular/common": "~8.1.0",
     "@angular/core": "~8.1.0",

package-lock.json

@@ -23,7 +23,7 @@ export abstract class ControlBase<T> implements ControlValueAccessor, AfterViewI
   public touchCallback: () => void = () => {};
   public changeCallback: (currentValue: T) => void = (_) => {};
 
-  constructor(@Optional() public mainElement: ElementRef, protected cdRef: ChangeDetectorRef) {}
+  constructor(@Optional() public mainElement: ElementRef, private cdRef: ChangeDetectorRef) {}
 
   private observeClassValue() {
     this.classObserver = AttributeHelper.createObserver(this.mainElement, (newClasses, oldClasses) => {
@@ -79,6 +79,8 @@ export abstract class ControlBase<T> implements ControlValueAccessor, AfterViewI
   public abstract createControl(): Promise<void>;
 
   ngAfterViewInit() {
+    console.log(this.mainElement);
+
     this.createControl().then(() => {
       this.callNewValue();
       this.observeClassValue();
@@ -104,7 +106,11 @@ export abstract class ControlBase<T> implements ControlValueAccessor, AfterViewI
 
     if (oldValue !== newValue) {
       this[key] = newValue;
-      this.cdRef.detectChanges();
+
+      if (this.cdRef) {
+        this.cdRef.detectChanges();
+      }
+
       const changes: SimpleChanges = {};
       changes[key as string] = { previousValue: oldValue, currentValue: newValue, firstChange: false } as SimpleChange;
       this.ngOnChanges(changes);

package.json

@@ -12,6 +12,10 @@ export class AttributeHelper {
 
   public static createObserver(element: ElementRef,
                                newClassValues: (newClassValues: string[], oldClassValues: string[]) => void): MutationObserver {
+    if (!element || !element.nativeElement) {
+      return null;
+    }
+
     let previousClassValue: string[] = [];
     const classValueCallback = () => {
       const classValue: string = element.nativeElement.getAttribute('class') || '';

projects/ng-metro4/package.json

@@ -845,6 +845,40 @@ export const thinDictionary = {
   'ultra-thin': 'ultra-thin'
 };
 
+export const easingDictionary = {
+  'swing': 'swing',
+  'easeInQuad': 'easeInQuad',
+  'easeOutQuad': 'easeOutQuad',
+  'easeInOutQuad': 'easeInOutQuad',
+  'easeInCubic': 'easeInCubic',
+  'easeOutCubic': 'easeOutCubic',
+  'easeInOutCubic': 'easeInOutCubic',
+  'easeInQuart': 'easeInQuart',
+  'easeOutQuart': 'easeOutQuart',
+  'easeInOutQuart': 'easeInOutQuart',
+  'easeInQuint': 'easeInQuint',
+  'easeOutQuint': 'easeOutQuint',
+  'easeInOutQuint': 'easeInOutQuint',
+  'easeInSine': 'easeInSine',
+  'easeOutSine': 'easeOutSine',
+  'easeInOutSine': 'easeInOutSine',
+  'easeInExpo': 'easeInExpo',
+  'easeOutExpo': 'easeOutExpo',
+  'easeInOutExpo': 'easeInOutExpo',
+  'easeInCirc': 'easeInCirc',
+  'easeOutCirc': 'easeOutCirc',
+  'easeInOutCirc': 'easeInOutCirc',
+  'easeInElastic': 'easeInElastic',
+  'easeOutElastic': 'easeOutElastic',
+  'easeInOutElastic': 'easeInOutElastic',
+  'easeInBack': 'easeInBack',
+  'easeOutBack': 'easeOutBack',
+  'easeInOutBack': 'easeInOutBack',
+  'easeInBounce': 'easeInBounce',
+  'easeOutBounce': 'easeOutBounce',
+  'easeInOutBounce': 'easeInOutBounce'
+};
+
 export class Lists {
   public static icons() {
     return Object.values(iconDictionary);
@@ -913,4 +947,8 @@ export class Lists {
   public static thins() {
     return Object.values(thinDictionary);
   }
+
+  public static easings() {
+    return Object.values(easingDictionary);
+  }
 }

projects/ng-metro4/src/lib/form/control-base.ts

@@ -5,7 +5,7 @@ import {
   animationDictionary,
   buttonShapeDictionary,
   buttonSpecialDictionary,
-  colorDictionary,
+  colorDictionary, easingDictionary,
   gravatarDictionary,
   iconCategoryDictionary,
   iconDictionary,
@@ -54,3 +54,5 @@ export type ProgressTypeType = keyof typeof progressTypeDictionary;
 export type RoundTypeType = keyof typeof roundTypeDictionary;
 
 export type ThinType = keyof typeof thinDictionary;
+
+export type EasingType = keyof typeof easingDictionary;

projects/ng-metro4/src/lib/helper/attribute-helper.ts

@@ -51,7 +51,9 @@ export class DialogService {
     return (<any>window).Metro.dialog.create(options);
   }
 
-  public alert(title: string, message: string, cls?: string, okBtnText?: string, okBtnCls?: string) {
+  public alert(title: string, message: string, cls?: string, okBtnText?: string, okBtnCls?: string): Observable<void> {
+    const subject$ = new Subject<void>();
+
     const options: DialogOptions = {
       title: title,
       content: message,
@@ -63,11 +65,16 @@ export class DialogService {
       options.actions = [{
         caption: okBtnText,
         cls: (okBtnCls ? okBtnCls : '') + ' js-dialog-close',
-        onclick: () => {}
+        onclick: () => {
+          subject$.next();
+          subject$.complete();
+        }
       }];
     }
 
     this.create(options);
+
+    return subject$.asObservable();
   }
 
   public confirm(title: string, message: string, yesBtnText?: string, noBtnText?: string,

projects/ng-metro4/src/lib/helper/lists.ts

@@ -1,20 +1,20 @@
 import { Injectable } from '@angular/core';
+import {Observable, Subject} from 'rxjs';
+import {EasingType} from '../../helper/types';
 
-interface NotifySetupOptions {
+export interface NotifySetupOptions {
   container?: string;
   width?: string;
   timeout?: number;
   duration?: number;
   distance?: string;
-  animation?: string;
+  animation?: EasingType;
 }
 
-interface NotifyOptions {
+export interface NotifyOptions {
   keepOpen?: boolean;
   cls?: string;
-  width: string;
-  onShow?: () => void;
-  onClose?: () => void;
+  width?: string;
 }
 
 @Injectable({
@@ -32,7 +32,17 @@ export class NotifyService {
     (<any>window).Metro.notify.reset();
   }
 
-  public create(message: string, title?: string, options?: NotifyOptions) {
-    (<any>window).Metro.notify.create(message, title, options);
+  public create(message: string, title?: string, options?: NotifyOptions): Observable<void> {
+    const closeSubject$ = new Subject<any>();
+
+    (<any>window).Metro.notify.create(message, title, {
+      onClose: () => {
+        closeSubject$.next();
+        closeSubject$.complete();
+      },
+      ...options
+    });
+
+    return closeSubject$.asObservable();
   }
 }

projects/ng-metro4/src/lib/helper/types.ts

@@ -1,10 +1,10 @@
 import { Injectable } from '@angular/core';
 import {AccentType} from '../../helper/types';
+import {Observable, Subject} from 'rxjs';
 
 interface ToastOptions {
   timeout?: number;
   cls?: string|AccentType;
-  callback?: () => void;
   additional?: {
     distance?: number;
     showTop?: boolean;
@@ -18,7 +18,14 @@ export class ToastService {
 
   constructor() { }
 
-  public create(message: string, options: ToastOptions = {}) {
-    (<any>window).Metro.toast.create(message, options.callback, options.timeout, options.cls, options.additional);
+  public create(message: string, options: ToastOptions = {}): Observable<any> {
+    const closeSubject$ = new Subject<any>();
+
+    (<any>window).Metro.toast.create(message, () => {
+      closeSubject$.next();
+      closeSubject$.complete();
+    }, options.timeout, options.cls, options.additional);
+
+    return closeSubject$.asObservable();
   }
 }