Merge branch 'main-beta' of https://github.com/exadel-inc/esl into bu…

…gfix/elements-types

CHANGELOG.md

@@ -1,3 +1,5 @@
+## [2.8.2](https://github.com/exadel-inc/esl/compare/v2.8.1...v2.8.2) (2021-08-04)
+
 # [3.0.0-beta.14](https://github.com/exadel-inc/esl/compare/v3.0.0-beta.13...v3.0.0-beta.14) (2021-08-02)
 
 

package.json

@@ -84,16 +84,16 @@
     "@semantic-release/release-notes-generator": "^9.0.3",
     "@types/jest": "^26.0.24",
     "@types/smoothscroll-polyfill": "^0.3.1",
-    "@typescript-eslint/eslint-plugin": "^4.28.5",
-    "@typescript-eslint/parser": "^4.28.5",
-    "@webcomponents/custom-elements": "^1.4.3",
-    "@webcomponents/webcomponents-platform": "^1.0.1",
+    "@typescript-eslint/eslint-plugin": "^4.29.0",
+    "@typescript-eslint/parser": "^4.29.0",
+    "@webcomponents/custom-elements": "1.4.3",
+    "@webcomponents/webcomponents-platform": "1.0.1",
     "browser-sync": "^2.27.5",
     "chokidar-cli": "^3.0.0",
-    "clean-css-cli": "^5.3.0",
+    "clean-css-cli": "^5.3.2",
     "concurrently": "^6.2.0",
     "copyfiles": "^2.4.1",
-    "eslint": "^7.31.0",
+    "eslint": "^7.32.0",
     "eslint-plugin-editorconfig": "^3.0.2",
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-sonarjs": "^0.9.1",
@@ -111,9 +111,9 @@
     "smoothscroll-polyfill": "^0.4.4",
     "stylelint": "^13.13.1",
     "ts-jest": "^27.0.4",
-    "ts-loader": "^9.2.4",
+    "ts-loader": "^9.2.5",
     "typescript": "4.3.5",
-    "webpack": "^5.47.1",
+    "webpack": "^5.48.0",
     "webpack-cli": "^4.7.2"
   },
   "browserslist": [

pages/views/drafts/esl-notes.njk → pages/views/drafts/esl-footnotes.njk

@@ -1,7 +1,7 @@
 ---
 layout: basic
-title: ESL Notes component
-name: Esl Notes component
+title: ESL Footnotes component
+name: Esl Footnotes component
 containerCls: container
 tags: drafts
 ---

src/modules/all.less

@@ -18,6 +18,5 @@
 
 @import "./esl-forms/all.less";
 
-@import "./esl-note/core.less";
 @import "./esl-footnotes/core.less";
 @import "./esl-tooltip/core.less";

src/modules/all.ts

@@ -22,6 +22,5 @@ export * from './esl-alert/core';
 
 export * from './esl-forms/all';
 
-export * from './esl-note/core';
 export * from './esl-footnotes/core';
 export * from './esl-tooltip/core';

src/modules/esl-footnotes/core.less

@@ -1 +1,2 @@
 @import "./core/esl-footnotes.less";
+@import "./core/esl-note.less";

src/modules/esl-footnotes/core.ts

@@ -1 +1,2 @@
 export * from './core/esl-footnotes';
+export * from './core/esl-note';

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

@@ -2,13 +2,15 @@ import {ExportNs} from '../../esl-utils/environment/export-ns';
 import {bind} from '../../esl-utils/decorators/bind';
 import {memoize} from '../../esl-utils/decorators/memoize';
 import {ESLBaseElement, attr} from '../../esl-base-element/core';
-import {ESLNote} from '../../esl-note/core';
 import {TraversingQuery} from '../../esl-traversing-query/core';
 import {EventUtils} from '../../esl-utils/dom/events';
 
+import type {ESLNote} from './esl-note';
+
 @ExportNs('Footnotes')
 export class ESLFootnotes extends ESLBaseElement {
   static is = 'esl-footnotes';
+  static eventNs = 'esl:footnotes';
 
   /** Target element {@link TraversingQuery} to define scope */
   @attr({defaultValue: '::parent'}) public scopeTarget: string;
@@ -37,13 +39,13 @@ export class ESLFootnotes extends ESLBaseElement {
 
   protected bindEvents() {
     if (this.scopeEl) {
-      this.scopeEl.addEventListener(`${ESLNote.eventNs}:response`, this._onNoteSubscribe);
+      this.scopeEl.addEventListener(`${ESLFootnotes.eventNs}:response`, this._onNoteSubscribe);
     }
     this.addEventListener('click', this._onClick);
   }
   protected unbindEvents() {
     if (this.scopeEl) {
-      this.scopeEl.removeEventListener(`${ESLNote.eventNs}:response`, this._onNoteSubscribe);
+      this.scopeEl.removeEventListener(`${ESLFootnotes.eventNs}:response`, this._onNoteSubscribe);
     }
     this.removeEventListener('click', this._onClick);
   }
@@ -104,6 +106,6 @@ export class ESLFootnotes extends ESLBaseElement {
   }
 
   protected _sendRequestToNote() {
-    EventUtils.dispatch(this, `${ESLNote.eventNs}:request`);
+    EventUtils.dispatch(this, `${ESLFootnotes.eventNs}:request`);
   }
 }

src/modules/esl-note/core/esl-note.ts → src/modules/esl-footnotes/core/esl-note.ts

@@ -5,16 +5,16 @@ import {ready} from '../../esl-utils/decorators/ready';
 import {ESLTooltip} from '../../esl-tooltip/core';
 import {EventUtils} from '../../esl-utils/dom/events';
 import {ENTER, SPACE} from '../../esl-utils/dom/keys';
+import {scrollIntoViewAsync} from '../../esl-utils/dom/scroll';
 import {DeviceDetector} from '../../esl-utils/environment/device-detector';
 import {ESLMediaQuery} from '../../esl-media-query/core';
+import {ESLFootnotes} from './esl-footnotes';
 
 import type {ToggleableActionParams} from '../../esl-toggleable/core/esl-toggleable';
-import type {ESLFootnotes} from '../../esl-footnotes/core/esl-footnotes';
 
 @ExportNs('Note')
 export class ESLNote extends ESLBaseElement {
   static is = 'esl-note';
-  static eventNs = 'esl:note';
 
   /** Linked state marker */
   @boolAttr() public linked: boolean;
@@ -64,23 +64,22 @@ export class ESLNote extends ESLBaseElement {
   }
 
   protected bindEvents() {
-    document.body.addEventListener(`${ESLNote.eventNs}:request`, this._onFootnotesReady);
+    document.body.addEventListener(`${ESLFootnotes.eventNs}:request`, this._onFootnotesReady);
     this.addEventListener('click', this._onClick);
     this.addEventListener('keydown', this._onKeydown);
     this.addEventListener('mouseenter', this._onMouseEnter);
     this.addEventListener('mouseleave', this._onMouseLeave);
   }
   protected unbindEvents() {
-    document.body.removeEventListener(`${ESLNote.eventNs}:request`, this._onFootnotesReady);
+    document.body.removeEventListener(`${ESLFootnotes.eventNs}:request`, this._onFootnotesReady);
     this.removeEventListener('click', this._onClick);
     this.removeEventListener('keydown', this._onKeydown);
     this.removeEventListener('mouseenter', this._onMouseEnter);
     this.removeEventListener('mouseleave', this._onMouseLeave);
   }
 
   public activate() {
-    this.scrollIntoView({behavior: 'smooth', block: 'nearest'});
-    this.showTooltip();
+    scrollIntoViewAsync(this, {behavior: 'smooth', block: 'nearest'}).then(() => this.showTooltip());
   }
 
   public link(footnotes: ESLFootnotes, index: number) {
@@ -164,6 +163,6 @@ export class ESLNote extends ESLBaseElement {
   }
 
   protected _sendResponseToFootnote() {
-    EventUtils.dispatch(this, `${ESLNote.eventNs}:response`);
+    EventUtils.dispatch(this, `${ESLFootnotes.eventNs}:response`);
   }
 }

src/modules/esl-popup/core/esl-popup-position.ts

@@ -2,16 +2,15 @@ import {Rect} from '../../esl-utils/dom/rect';
 
 export type PositionType = 'top' | 'bottom' | 'left' | 'right';
 
-export interface ArrowPositionValue {
+export interface Point {
   x: number;
   y: number;
-  position: string;
 }
 
 export interface PopupPositionValue {
-  x: number;
-  y: number;
-  arrow: ArrowPositionValue;
+  placedAt: PositionType;
+  popup: Rect;
+  arrow: Point;
 }
 
 export interface IntersectionRatioRect {
@@ -75,8 +74,8 @@ function getOppositePosition(position: PositionType): PositionType {
  * @param rect - popup position rect
  * @param arrow - arrow position value
  * */
-function fitByMajorAxis(cfg: PopupPositionConfig, rect: Rect, arrow: ArrowPositionValue) {
-  if (cfg.behavior !== 'fit') return;
+function fitByMajorAxis(cfg: PopupPositionConfig, rect: Rect, arrow: Point): PositionType {
+  if (cfg.behavior !== 'fit') return cfg.position;
 
   let isMirrored = false;
   switch (cfg.position) {
@@ -105,9 +104,8 @@ function fitByMajorAxis(cfg: PopupPositionConfig, rect: Rect, arrow: ArrowPositi
       }
       break;
   }
-  if (isMirrored) {
-    arrow.position = getOppositePosition(cfg.position);
-  }
+
+  return isMirrored ? getOppositePosition(cfg.position) : cfg.position;
 }
 
 /**
@@ -116,7 +114,7 @@ function fitByMajorAxis(cfg: PopupPositionConfig, rect: Rect, arrow: ArrowPositi
  * @param rect - popup position rect
  * @param arrow - arrow position value
  * */
-function fitByMinorAxisHorizontal(cfg: PopupPositionConfig, rect: Rect, arrow: ArrowPositionValue) {
+function fitByMinorAxisHorizontal(cfg: PopupPositionConfig, rect: Rect, arrow: Point) {
   if (cfg.trigger.x < cfg.outer.x || cfg.trigger.right > cfg.outer.right) return; // cancel fit mode if the element is out of window offset bounds
 
   let arrowAdjust = 0;
@@ -137,7 +135,7 @@ function fitByMinorAxisHorizontal(cfg: PopupPositionConfig, rect: Rect, arrow: A
  * @param rect - popup position rect
  * @param arrow - arrow position value
  * */
-function fitByMinorAxisVertical(cfg: PopupPositionConfig, rect: Rect, arrow: ArrowPositionValue) {
+function fitByMinorAxisVertical(cfg: PopupPositionConfig, rect: Rect, arrow: Point) {
   if (cfg.trigger.y < cfg.outer.y || cfg.trigger.bottom > cfg.outer.bottom) return; // cancel fit mode if the element is out of window offset bounds
 
   let arrowAdjust = 0;
@@ -158,7 +156,7 @@ function fitByMinorAxisVertical(cfg: PopupPositionConfig, rect: Rect, arrow: Arr
  * @param rect - popup position rect
  * @param arrow - arrow position value
  * */
-function fitByMinorAxis(cfg: PopupPositionConfig, rect: Rect, arrow: ArrowPositionValue) {
+function fitByMinorAxis(cfg: PopupPositionConfig, rect: Rect, arrow: Point) {
   if (cfg.behavior !== 'fit') return;
 
   if (['left', 'right'].includes(cfg.position)) {
@@ -173,19 +171,19 @@ function fitByMinorAxis(cfg: PopupPositionConfig, rect: Rect, arrow: ArrowPositi
  * @param cfg - popup position config
  * */
 export function calcPopupPosition(cfg: PopupPositionConfig): PopupPositionValue {
-  const rect = calcPopupBasicRect(cfg);
+  const popup = calcPopupBasicRect(cfg);
   const arrow = {
     x: cfg.element.width / 2,
     y: cfg.element.height / 2,
     position: cfg.position
   };
 
-  fitByMajorAxis(cfg, rect, arrow);
-  fitByMinorAxis(cfg, rect, arrow);
+  const placedAt = fitByMajorAxis(cfg, popup, arrow);
+  fitByMinorAxis(cfg, popup, arrow);
 
   return {
-    x: rect.x,
-    y: rect.y,
+    popup,
+    placedAt,
     arrow
   };
 }

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

@@ -41,21 +41,27 @@
     border-left: 1px solid @POPUP_BORDER_COLOR;
     border-top: 1px solid @POPUP_BORDER_COLOR;
     z-index: -1;
+  }
 
-    &[position=top] {
+  &[placed-at=top] {
+    .esl-popup-arrow {
       bottom: (-@POPUP_ARROW_HALF - 1);
       top: auto;
       transform: rotate(225deg);
     }
+  }
 
-    &[position=left] {
+  &[placed-at=left] {
+    .esl-popup-arrow {
       right: (-@POPUP_ARROW_HALF - 1);
       left: auto;
       margin-top: -@POPUP_ARROW_HALF;
       transform: rotate(135deg);
     }
+  }
 
-    &[position=right] {
+  &[placed-at=right] {
+    .esl-popup-arrow {
       left: auto;
       right: auto;
       margin-top: -@POPUP_ARROW_HALF;

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

@@ -174,12 +174,6 @@ export class ESLPopup extends ESLToggleable {
     this._activatorObserver.unsubscribers = [];
   }
 
-  protected set _arrowPosition(value: string) {
-    if (!this.$arrow) return;
-
-    this.$arrow.setAttribute('position', value);
-  }
-
   protected _updatePosition() {
     if (!this.activator) return;
 
@@ -199,17 +193,16 @@ export class ESLPopup extends ESLToggleable {
       outer: getWindowRect().shrink(this._offsetWindow)
     };
 
-    const {x, y, arrow} = calcPopupPosition(config);
+    const {placedAt, popup, arrow} = calcPopupPosition(config);
 
+    this.setAttribute('placed-at', placedAt);
     // set popup position
-    this.style.left = `${x}px`;
-    this.style.top = `${y}px`;
-
+    this.style.left = `${popup.x}px`;
+    this.style.top = `${popup.y}px`;
     // set arrow position
     if (this.$arrow) {
-      this.$arrow.style.left = ['top', 'bottom'].includes(arrow.position) ? `${arrow.x}px` : 'none';
-      this.$arrow.style.top = ['left', 'right'].includes(arrow.position) ? `${arrow.y}px` : 'none';
-      this._arrowPosition = arrow.position;
+      this.$arrow.style.left = ['top', 'bottom'].includes(placedAt) ? `${arrow.x}px` : 'none';
+      this.$arrow.style.top = ['left', 'right'].includes(placedAt) ? `${arrow.y}px` : 'none';
     }
   }
 }

src/modules/esl-utils/all.ts

@@ -27,13 +27,15 @@ export * from './async/delayed-task';
 // DOM
 export * from './dom/class';
 export * from './dom/events';
+export * from './dom/element';
 export * from './dom/focus';
 export * from './dom/keys';
 export * from './dom/ready';
 export * from './dom/rtl';
 export * from './dom/script';
 export * from './dom/scroll';
 export * from './dom/traversing';
+export * from './dom/window';
 
 // Device detection
 export * from './environment/device-detector';

src/modules/esl-utils/dom/element.ts

@@ -25,7 +25,9 @@ export function getParentNode(element: Element | ShadowRoot): Node {
     return element;
   }
 
-  return (element instanceof ShadowRoot
-    ? element.host
-    : element.assignedSlot || element.parentNode) || getDocumentElement(element as Element);
+  return (ShadowRoot
+    ? element instanceof ShadowRoot
+      ? element.host
+      : element.assignedSlot || element.parentNode
+    : element.parentNode) || getDocumentElement(element as Element);
 }

src/modules/esl-utils/dom/scroll.ts

@@ -98,3 +98,27 @@ export function isScrollParent(element: Element): boolean {
   const {overflow, overflowX, overflowY} = getComputedStyle(element);
   return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
 }
+
+/**
+ * This is a promise-based version of scrollIntoView().
+ * Method scrolls the element's parent container such that the element on which
+ * scrollIntoView() is called is visible to the user. The promise is resolved when
+ * the element became visible to the user.
+ * @param element - element to be made visible to the user
+ * @param options - scrollIntoView options
+ */
+export function scrollIntoViewAsync(element: Element, options: ScrollIntoViewOptions): Promise<void> {
+  element.scrollIntoView(options);
+
+  return new Promise((resolve, reject) => {
+    const intersectionObserver = new IntersectionObserver((entries) => {
+      const [entry] = entries;
+
+      if (entry.isIntersecting) {
+        intersectionObserver.unobserve(element);
+        resolve();
+      }
+    });
+    intersectionObserver.observe(element);
+  });
+}

src/modules/lib.d.ts

@@ -24,7 +24,7 @@ import type {ESLA11yGroup} from './esl-a11y-group/core/esl-a11y-group';
 import type {ESLTrigger} from './esl-trigger/core/esl-trigger';
 import type {ESLTab, ESLTabs} from './esl-tab/core';
 
-import type {ESLNote} from './esl-note/core/esl-note';
+import type {ESLNote} from './esl-footnotes/core/esl-note';
 import type {ESLFootnotes} from './esl-footnotes/core/esl-footnotes';
 import type {ESLTooltip} from './esl-tooltip/core/esl-tooltip';