feat: update ESL Alert Component

src/modules/esl-alert/README.md

@@ -0,0 +1,34 @@
+# [ESL](../../../README.md) Alert
+
+Version: *1.0.0-beta*
+
+***Important Notice: the component is under beta version, it tested and ready to use but be aware of its potential critical API changes***
+
+Authors: *Julia Murashko*
+
+ESLAlert is a simple component to show small notification on your pages
+
+---
+
+##Usage
+
+Firstly, register component using static `ESLAlert.init` method.
+Then the following events can be dispatched globally (on window) to control alert: 
+- `esl:alert:show` to show alert
+- `esl:alert:hide` to hide alert
+
+Use custom event details to customize alert.
+
+Description TBD.
+
+## Example
+
+```javascript
+window.dispatchEvent(new CustomEvent(`esl:alert:show`, {
+    detail: {
+       text: 'Hello World',
+       cls: 'alert alert-info'
+    }
+}));
+```
+

src/modules/esl-alert/core/esl-alert.less

@@ -1,17 +1,22 @@
+@import "../../esl-utils/fixes/ie-fixes";
+
 esl-alert {
   display: flex;
-  position: fixed;
   justify-content: center;
-  width: 30%;
+  position: fixed;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity .3s ease .05s, visibility 0s linear .35s;
+
+  z-index: 10002;
+
   right: 35%;
   bottom: 20px;
   padding: 20px;
-  opacity: 0;
-  visibility: hidden;
+  width: 30%;
+
   background-color: #008000;
-  transition: opacity .3s ease .05s, visibility 0s linear .35s;
   color: #fff;
-  z-index: 10002;
 
   &[open] {
     opacity: 1;

src/modules/esl-alert/core/esl-alert.ts

@@ -1,11 +1,15 @@
 import {ExportNs} from '../../esl-utils/environment/export-ns';
 import {bind} from '../../esl-utils/decorators/bind';
-import {attr, jsonAttr} from '../../esl-base-element/core';
+import {jsonAttr} from '../../esl-base-element/core';
 import {ESLBasePopup, PopupActionParams} from '../../esl-base-popup/core';
 import {DeviceDetector} from '../../esl-utils/environment/device-detector';
+import {CSSUtil} from '../../esl-utils/dom/styles';
+import {createIframe} from '../../esl-utils/fixes/ie-fixes';
 
 export interface AlertActionParams extends PopupActionParams {
-  text: string;
+  /** text to be shown; pass empty string or null to hide */
+  text?: string;
+  /** classes to add to alert element */
   cls?: string;
 }
 
@@ -14,23 +18,28 @@ export class ESLAlert extends ESLBasePopup {
   static is = 'esl-alert';
   static eventNs = 'esl:alert';
 
-  @jsonAttr<AlertActionParams>({defaultValue: {text: '', cls: ''}})
+  static defaultConfig: AlertActionParams = {
+    hideDelay: 2500
+  };
+
+  @jsonAttr<AlertActionParams>({defaultValue: ESLAlert.defaultConfig})
   public defaultParams: AlertActionParams;
 
-  @attr({defaultValue: ''}) public cls: string;
-  protected text: HTMLElement;
+  protected textEl: HTMLElement;
 
+  /** Register and create global alert instance */
   public static init() {
     if (document.querySelector(ESLAlert.is)) return;
     ESLAlert.register();
     const alert = document.createElement(ESLAlert.is) as ESLAlert;
     document.body.appendChild(alert);
   }
 
+  /** Global event handler */
   @bind
-  onTriggerHandler(e: CustomEvent) {
+  onWindowEvent(e: CustomEvent) {
     if (e.type === `${ESLAlert.eventNs}:show`) {
-      const params = Object.assign({}, {hideDelay: 2500}, e.detail, {force: true});
+      const params = Object.assign({}, e.detail, {force: true});
       this.show(params);
     }
     if (e.type === `${ESLAlert.eventNs}:hide`) {
@@ -41,20 +50,25 @@ export class ESLAlert extends ESLBasePopup {
 
   public onShow(params: AlertActionParams) {
     if (params.text) {
-      this.cls = params.cls || this.cls;
-      this.text.textContent = params.text;
+      CSSUtil.addCls(this, params.cls);
+      this.textEl.textContent = params.text;
       super.onShow(params);
     }
     this.hide(params);
     return this;
   }
 
+  public onHide(params: AlertActionParams) {
+    super.onHide(params);
+    CSSUtil.removeCls(this, params.cls);
+  }
+
   protected connectedCallback() {
     super.connectedCallback();
-    this.text = document.createElement('span');
-    this.text.className = 'hpe-alert-text';
+    this.textEl = document.createElement('span');
+    this.textEl.className = 'esl-alert-text';
     this.innerHTML = '';
-    this.appendChild(this.text);
+    this.appendChild(this.textEl);
     if (DeviceDetector.isIE) {
       this.appendChild(createIframe());
     }
@@ -63,23 +77,16 @@ export class ESLAlert extends ESLBasePopup {
   protected bindEvents() {
     super.bindEvents();
 
-    window.addEventListener(`${ESLAlert.eventNs}:show`, this.onTriggerHandler);
-    window.addEventListener(`${ESLAlert.eventNs}:hide`, this.onTriggerHandler);
+    window.addEventListener(`${ESLAlert.eventNs}:show`, this.onWindowEvent);
+    window.addEventListener(`${ESLAlert.eventNs}:hide`, this.onWindowEvent);
   }
 
   protected unbindEvents() {
     super.unbindEvents();
 
-    window.removeEventListener(`${ESLAlert.eventNs}:show`, this.onTriggerHandler);
-    window.removeEventListener(`${ESLAlert.eventNs}:hide`, this.onTriggerHandler);
+    window.removeEventListener(`${ESLAlert.eventNs}:show`, this.onWindowEvent);
+    window.removeEventListener(`${ESLAlert.eventNs}:hide`, this.onWindowEvent);
   }
 }
 
-function createIframe() {
-  const iframe = document.createElement('iframe');
-  iframe.className = 'ie-zindex-fix';
-  iframe.src = 'about:blank';
-  return iframe;
-}
-
 export default ESLAlert;

src/modules/esl-utils/all.ts

@@ -27,3 +27,6 @@ export * from './dom/traversing';
 
 // Device detection
 export * from './environment/device-detector';
+
+// Fixes
+export * from './fixes/ie-fixes';

src/modules/esl-utils/fixes/ie-fixes.less

@@ -0,0 +1,9 @@
+.ie-zindex-fix {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: -1;
+  border: none;
+}

src/modules/esl-utils/fixes/ie-fixes.ts

@@ -0,0 +1,7 @@
+/** Fix IE browser to allow to display alert under iframe */
+export function createIframe(): HTMLElement {
+  const iframe = document.createElement('iframe');
+  iframe.className = 'ie-zindex-fix';
+  iframe.src = 'about:blank';
+  return iframe;
+}