Merge pull request #43 from exadel-inc/dev

dev -> main-beta

src/modules/draft/esl-select/core.less

@@ -3,6 +3,7 @@
 @esl-select-primary: green;
 @esl-select-secondary: lightgray;
 @esl-select-background: white;
+@esl-select-empty-color: gray;
 
 // ESL Select parts
 @import "./core/esl-select";

src/modules/draft/esl-select/core/esl-select-text.less

@@ -5,6 +5,11 @@ esl-select-text {
     align-items: center;
   }
 
+  &[empty]::before {
+    content: attr(empty-text);
+    color: @esl-select-empty-color;
+  }
+
   .esl-select-text {
     display: inline-block;
     white-space: nowrap;

src/modules/draft/esl-select/core/esl-select-text.ts

@@ -2,10 +2,15 @@ import {ESLBaseElement} from '../../../esl-base-element/core/esl-base-element';
 import {ESLSelectModel} from './esl-select-model';
 import {rafDecorator} from '../../../esl-utils/async/raf';
 import {bind} from '../../../esl-utils/decorators/bind';
+import {attr} from '../../../esl-base-element/decorators/attr';
+import {boolAttr} from '../../../esl-base-element/decorators/bool-attr';
 
 export class ESLSelectText extends ESLBaseElement {
   public static readonly is = 'esl-select-text';
 
+  @attr() public emptyText: string;
+  @boolAttr({name: 'empty'}) public isEmpty: boolean;
+
   protected $container: HTMLDivElement;
   protected $rest: HTMLElement;
   protected $text: HTMLElement;
@@ -79,19 +84,23 @@ export class ESLSelectText extends ESLBaseElement {
   @bind
   public render() {
     if (!this.model) return;
-    const activeText = this.model.selected.map((item) => item.text);
-    let size = 0;
-    do {
-      this.apply(activeText, ++size); // Render with extended limit while it not fits to the container
-    } while (size <= activeText.length && this.$container.scrollWidth <= this.$container.clientWidth);
-    this.apply(activeText, size - 1); // Render last limit that fits
+    const selected = this.model.selected;
+    this.isEmpty = !selected.length;
+    this.applyItems(selected.map((item) => item.text));
   }
-  /**
-   * Render item with a visible items limit limit
-   */
+
+  /** Render item with a visible items limit */
   protected apply(items: string[], limit: number) {
     const rest = items.length - limit;
     this.$text.textContent = items.slice(0, limit).join(', ');
     this.$rest.textContent = rest > 0 ? `${rest} more...` : '';
   }
+  /** Render items using adaptive algorithm */
+  protected applyItems(items: string[]) {
+    let size = 0;
+    do {
+      this.apply(items, ++size); // Render with extended limit while it not fits to the container
+    } while (size <= items.length && this.$container.scrollWidth <= this.$container.clientWidth);
+    this.apply(items, size - 1); // Render last limit that fits
+  }
 }

src/modules/draft/esl-select/core/esl-select.ts

@@ -1,5 +1,6 @@
 import {attr} from '../../../esl-base-element/core';
 import {bind} from '../../../esl-utils/decorators/bind';
+import {CSSUtil} from '../../../esl-utils/dom/styles';
 
 import {ESLBaseTrigger} from '../../../esl-base-trigger/core/esl-base-trigger';
 import {ESLBasePopup} from '../../../esl-base-popup/core/esl-base-popup';
@@ -8,12 +9,15 @@ import {ESLSelectModel} from './esl-select-model';
 import {ESLSelectList} from './esl-select-list';
 import {ESLSelectItem} from './esl-select-item';
 import {ESLSelectDropdown} from './esl-select-dropdown';
+import {EventUtils} from '../../../esl-utils/dom/events';
 
 export class ESLSelect extends ESLBaseTrigger {
   public static readonly is = 'esl-select';
 
   @attr() public name: string;
-  @attr() public placeholder: string;
+  @attr() public emptyText: string;
+  @attr() public hasValueClass: string;
+  @attr() public hasFocusClass: string;
   @attr() public selectAllLabel: string;
 
   protected _model?: ESLSelectModel;
@@ -48,6 +52,7 @@ export class ESLSelect extends ESLBaseTrigger {
   protected prepare() {
     this.$text.model = this.model;
     this.$text.className = this.$select.className;
+    this.$text.emptyText = this.emptyText;
     this.$popup.model = this.model;
     this.$popup.selectAllLabel = this.selectAllLabel;
     this.appendChild(this.$text);
@@ -67,6 +72,7 @@ export class ESLSelect extends ESLBaseTrigger {
   public get model(): ESLSelectModel {
     if (!this._model) {
       this._model = new ESLSelectModel(this.options);
+      this._model.addListener(this._onChange);
     }
     return this._model;
   }
@@ -82,10 +88,18 @@ export class ESLSelect extends ESLBaseTrigger {
 
   @bind
   public update() {
-    this.classList.toggle('has-value', this.model.fill);
+    const hasValue = this.model.fill;
+    this.toggleAttribute('has-value', hasValue);
+    CSSUtil.toggleClsTo(this, this.hasValueClass, hasValue);
     const focusEl = document.activeElement;
     const hasFocus = this.$popup.open || focusEl && this.contains(focusEl);
-    this.classList.toggle('has-focus', !!hasFocus);
+    CSSUtil.toggleClsTo(this, this.hasFocusClass, !!hasFocus);
+  }
+
+  @bind
+  public _onChange() {
+    this.update();
+    EventUtils.dispatch(this, 'change');
   }
 
   public updateA11y() {}

src/modules/esl-base-popup/README.md

@@ -9,7 +9,7 @@ Authors: *Julia Murashko*, *Alexey Stsefanovich (ala'n)*.
 ESLBasePopup - is a custom element, that is used as a base for "Popup like" components creation.
 
 ESLPopupDispatcher - plugin component, that prevents activation of multiple ESLBasePopup instances in bounds of managed container.
-Usually (and by default) binds to document.body. Use native dom events to manage controlled instances state.
+Usually (and by default) binds to document.body. Use native DOM events to manage controlled instances state.
 
 Use `ESLPopupDispatcher.init()` to initialize (and bind) ESLPopupDispatcher.
 

src/modules/esl-panel/core/esl-panel-stack.less

@@ -21,6 +21,13 @@ esl-panel-stack {
   }
 }
 
+// fix a11y
+esl-panel-stack:not(.animate) esl-panel:not(.open) {
+  * {
+    visibility: hidden !important;
+  }
+}
+
 @keyframes postponedHide {
   0%, 99% {
     display: block;

test-server/views/pages/esl-select.html

@@ -18,7 +18,7 @@
         <div>
           <esl-select class="form-group"
                       style="display: block"
-                      placeholder="Color"
+                      empty-text="Color"
                       select-all-label="All Colors">
             <label for="color_field" class="form-label">Color</label>
             <select esl-select-target
@@ -357,7 +357,7 @@
         <div>
           <esl-select class="form-group"
                       style="display: block"
-                      placeholder="Color 2"
+                      empty-text="Color 2"
                       select-all-label="All Colors">
             <label for="color_field_2" class="form-label">Color 2</label>
             <select esl-select-target