Merge pull request #1642 from exadel-inc/feat/esl-base-interface

feat: `ESLBaseComponent` interface shared between `ESLMixinElement` and `ESLBaseElement`
exadel-inc · May 8, 2023 · e19871f · e19871f
2 parents 58bf417 + 71699f9
commit e19871f
Show file tree

Hide file tree

Showing 17 changed files with 68 additions and 17 deletions.
diff --git a/src/modules/draft/esl-carousel/core/esl-carousel.ts b/src/modules/draft/esl-carousel/core/esl-carousel.ts
@@ -171,7 +171,7 @@ export class ESLCarousel extends ESLBaseElement {
     ESLCarouselViewRegistry.instance.removeListener(this._onRegistryChange);
   }
 
-  private attributeChangedCallback(attrName: string, oldVal: string, newVal: string) {
+  protected override attributeChangedCallback(attrName: string, oldVal: string, newVal: string) {
     // TODO: change observed attributes
     if (attrName === 'config') {
       this.configRules = ESLMediaRuleList.parse<CarouselConfig>(this.config, ESLMediaRuleList.OBJECT_PARSER);

diff --git a/src/modules/draft/esl-carousel/plugin/esl-carousel-link.plugin.ts b/src/modules/draft/esl-carousel/plugin/esl-carousel-link.plugin.ts
@@ -50,7 +50,7 @@ export class ESLCarouselLinkPlugin extends ESLCarouselPlugin {
     $target.goTo($source.firstIndex, e.detail.direction);
   }
 
-  protected attributeChangedCallback(attrName: string, oldVal: string, newVal: string) {
+  protected override attributeChangedCallback(attrName: string, oldVal: string, newVal: string) {
     if (this.carousel && oldVal !== newVal) {
       this.unbind();
       if (attrName === 'to') {

diff --git a/src/modules/esl-animate/core/esl-animate.ts b/src/modules/esl-animate/core/esl-animate.ts
@@ -64,7 +64,7 @@ export class ESLAnimate extends ESLBaseElement {
     return ESLTraversingQuery.all(this.target, this) as HTMLElement[];
   }
 
-  protected attributeChangedCallback(): void {
+  protected override attributeChangedCallback(): void {
     if (!this.connected) return;
     this.reanimate();
   }

diff --git a/src/modules/esl-base-element/core/esl-base-element.ts b/src/modules/esl-base-element/core/esl-base-element.ts
@@ -9,12 +9,13 @@ import type {
   ESLListenerCriteria,
   ESLListenerDescriptor
 } from '../../esl-utils/dom/events';
+import type {ESLBaseComponent} from '../../esl-utils/abstract/component';
 
 /**
  * Base class for ESL custom elements
  * Allows defining custom element with the optional custom tag name
  */
-export abstract class ESLBaseElement extends HTMLElement {
+export abstract class ESLBaseElement extends HTMLElement implements ESLBaseComponent {
   /** Custom element tag name */
   public static is = '';
 
@@ -40,6 +41,12 @@ export abstract class ESLBaseElement extends HTMLElement {
     ESLEventUtils.unsubscribe(this);
   }
 
+  /**
+   * Callback to handle changing of element attributes.
+   * Happens when attribute accessed for writing independently of the actual value change
+   */
+  protected attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {}
+
   /** Check that the element is connected and `connectedCallback` has been executed */
   public get connected(): boolean {
     return this._connected;

diff --git a/src/modules/esl-footnotes/core/esl-note.ts b/src/modules/esl-footnotes/core/esl-note.ts
@@ -108,7 +108,7 @@ export class ESLNote extends ESLBaseElement {
     this.restore();
   }
 
-  protected attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
+  protected override attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
     if (!this.connected || oldVal === newVal) return;
     if (attrName === 'tooltip-shown' && newVal === null) {
       this._$footnotes?.turnOffHighlight(this);

diff --git a/src/modules/esl-forms/esl-select-list/core/esl-select-item.ts b/src/modules/esl-forms/esl-select-list/core/esl-select-item.ts
@@ -32,7 +32,7 @@ export class ESLSelectItem extends ESLBaseElement {
     this.setAttribute('aria-selected', String(this.selected));
   }
 
-  protected attributeChangedCallback(attrName: string): void {
+  protected override attributeChangedCallback(attrName: string): void {
     if (attrName === 'selected') {
       this.setAttribute('aria-selected', String(this.selected));
     }

diff --git a/src/modules/esl-forms/esl-select-list/core/esl-select-list.ts b/src/modules/esl-forms/esl-select-list/core/esl-select-list.ts
@@ -46,7 +46,7 @@ export class ESLSelectList extends ESLSelectWrapper {
     this.$selectAll.classList.add('esl-select-all-item');
   }
 
-  protected attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
+  protected override attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
     if (!this.connected || newVal === oldVal) return;
     if (attrName === 'select-all-label') {
       this.$selectAll.textContent = newVal;

diff --git a/src/modules/esl-forms/esl-select/core/esl-select.ts b/src/modules/esl-forms/esl-select/core/esl-select.ts
@@ -60,7 +60,7 @@ export class ESLSelect extends ESLSelectWrapper {
     this.$dropdown = document.createElement(ESLSelectDropdown.is);
   }
 
-  protected attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
+  protected override attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
     if (attrName === 'disabled') this._updateDisabled();
     if (attrName === 'dropdown-class') {
       this.$dropdown.$$cls(oldVal, false);

diff --git a/src/modules/esl-image/core/esl-image.ts b/src/modules/esl-image/core/esl-image.ts
@@ -89,7 +89,7 @@ export class ESLImage extends ESLBaseElement {
     }
   }
 
-  protected attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
+  protected override attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
     if (!this.connected || oldVal === newVal) return;
     switch (attrName) {
       case 'aria-label':

diff --git a/src/modules/esl-media/core/esl-media.ts b/src/modules/esl-media/core/esl-media.ts
@@ -150,7 +150,7 @@ export class ESLMedia extends ESLBaseElement {
     this._provider && this._provider.unbind();
   }
 
-  protected attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
+  protected override attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
     if (!this.connected || oldVal === newVal) return;
     switch (attrName) {
       case 'disabled':

diff --git a/src/modules/esl-mixin-element/ui/esl-mixin-element.ts b/src/modules/esl-mixin-element/ui/esl-mixin-element.ts
@@ -10,14 +10,15 @@ import type {
   ESLListenerDescriptor,
   ESLListenerHandler
 } from '../../esl-utils/dom/events';
+import type {ESLBaseComponent} from '../../esl-utils/abstract/component';
 import type {ESLDomElementRelated} from '../../esl-utils/abstract/dom-target';
 
 /**
  * Base class for mixin elements.
  * Mixin elements attaches to the DOM element via attribute.
  * Allows multiple mixin elements per one DOM element
  */
-export class ESLMixinElement implements ESLDomElementRelated {
+export class ESLMixinElement implements ESLBaseComponent, ESLDomElementRelated {
   /** Root attribute to identify mixin targets. Should contain dash in the name. */
   static is: string;
   /** Additional observed attributes */

diff --git a/src/modules/esl-panel-group/core/esl-panel-group.ts b/src/modules/esl-panel-group/core/esl-panel-group.ts
@@ -80,7 +80,7 @@ export class ESLPanelGroup extends ESLBaseElement {
     });
   }
 
-  protected attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
+  protected override attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
     if (!this.connected || oldVal === newVal) return;
     if (attrName === 'mode' || attrName === 'min-open-items' || attrName === 'max-open-items') {
       this.$$off(this._onConfigChange);

diff --git a/src/modules/esl-scrollbar/core/esl-scrollbar.ts b/src/modules/esl-scrollbar/core/esl-scrollbar.ts
@@ -67,7 +67,7 @@ export class ESLScrollbar extends ESLBaseElement {
     this._scrollTimer && window.clearTimeout(this._scrollTimer);
   }
 
-  protected attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
+  protected override attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
     if (!this.connected || oldVal === newVal) return;
     if (attrName === 'target') this.findTarget();
     if (attrName === 'horizontal') this.refresh();

diff --git a/src/modules/esl-tab/core/esl-tabs.ts b/src/modules/esl-tab/core/esl-tabs.ts
@@ -55,7 +55,7 @@ export class ESLTabs extends ESLBaseElement {
     this.updateScrollableType();
   }
 
-  protected attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
+  protected override attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
     if (!this.connected || oldVal === newVal) return;
     if (attrName === 'scrollable') {
       memoize.clear(this, 'scrollableTypeRules');

diff --git a/src/modules/esl-toggleable/core/esl-toggleable.ts b/src/modules/esl-toggleable/core/esl-toggleable.ts
@@ -39,7 +39,7 @@ export interface ESLToggleableRequestDetails extends ESLToggleableActionParams {
   match?: string | ((target: Element) => boolean);
 }
 
-/** @deprecated alias for ESLToggleableActionParams */
+/** @deprecated alias for ESLToggleableActionParams, will be removed in 5.0.0*/
 export type ToggleableActionParams = ESLToggleableActionParams;
 
 const activators: WeakMap<ESLToggleable, HTMLElement | undefined> = new WeakMap();
@@ -132,7 +132,7 @@ export class ESLToggleable extends ESLBaseElement {
     activators.delete(this);
   }
 
-  protected attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
+  protected override attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
     if (!this.connected || newVal === oldVal) return;
     switch (attrName) {
       case 'open':

diff --git a/src/modules/esl-trigger/core/esl-trigger.ts b/src/modules/esl-trigger/core/esl-trigger.ts
@@ -72,7 +72,7 @@ export class ESLTrigger extends ESLBaseElement {
 
   protected _$target: ESLToggleable | null;
 
-  protected attributeChangedCallback(attrName: string): void {
+  protected override attributeChangedCallback(attrName: string): void {
     if (!this.connected) return;
     if (attrName === 'target') return this.updateTargetFromSelector();
   }

diff --git a/src/modules/esl-utils/abstract/component.ts b/src/modules/esl-utils/abstract/component.ts
@@ -0,0 +1,43 @@
+import type {
+  ESLEventListener,
+  ESLListenerHandler,
+  ESLListenerCriteria,
+  ESLListenerDescriptor
+} from '../../esl-event-listener/core';
+
+export interface ESLBaseComponent {
+  /** Subscribes `handler` method marked with `@listen` decorator */
+  $$on(handler: ESLListenerHandler): ESLEventListener[];
+  /** Subscribes `handler` function by the passed DOM event descriptor {@link ESLListenerDescriptor} or event name */
+  $$on<EType extends keyof ESLListenerEventMap>(
+    event: EType | ESLListenerDescriptor<EType>,
+    handler: ESLListenerHandler<ESLListenerEventMap[EType]>
+  ): ESLEventListener[];
+
+  /** Unsubscribes event listeners */
+  $$off(...condition: ESLListenerCriteria[]): ESLEventListener[];
+
+  /**
+   * Dispatches component custom event on current DOM related element.
+   * @param eventName - event name
+   * @param eventInit - custom event init. See {@link CustomEventInit}
+   */
+  $$fire(eventName: string, eventInit?: CustomEventInit): boolean;
+
+  /**
+   * Gets or sets CSS classes for current DOM related element.
+   * @param cls - CSS classes query {@link CSSClassUtils}
+   * @param value - boolean to set CSS class(es) state or undefined to skip mutation
+   * @returns current classes state or passed state
+   */
+  $$cls(cls: string, value?: boolean): boolean;
+
+  /**
+   * Gets or sets an attribute for the current DOM related element.
+   * If the `value` param is undefined then skips mutation.
+   * @param name - attribute name
+   * @param value - string attribute value, boolean attribute state or `null` to delete attribute
+   * @returns the current attribute value or previous value for mutation
+   */
+  $$attr(name: string, value?: null | boolean | string): string | null;
+}