[ESL Share]: follow up (wave 1)

src/modules/esl-share/core/esl-share-button.ts

@@ -1,3 +1,4 @@
+import {ExportNs} from '../../esl-utils/environment/export-ns';
 import {ESLBaseElement} from '../../esl-base-element/core';
 import {attr, boolAttr, jsonAttr, listen, memoize, prop} from '../../esl-utils/decorators';
 import {ENTER, SPACE} from '../../esl-utils/dom/keys';
@@ -9,12 +10,15 @@ import {ESLShareConfig} from './esl-share-config';
 import type {ESLShareBaseAction} from './esl-share-action';
 import type {ESLShareButtonConfig} from './esl-share-config';
 
+export type {ESLShareButtonTagShape} from './esl-share-button.shape';
+
 /**
  * ESLShareButton
  * @author Dmytro Shovchko
  *
  * ESLShareButton is a custom element to invoke a share actions, defined by {@link ESLShareBaseAction}
  */
+@ExportNs('ShareButton')
 export class ESLShareButton extends ESLBaseElement {
   public static override is = 'esl-share-button';
   public static observedAttributes = ['action', 'name'];
@@ -189,3 +193,12 @@ export class ESLShareButton extends ESLBaseElement {
     this.$$fire(this.SHARE_BUTTON_CHANGED_EVENT, {bubbles: false});
   }
 }
+
+declare global {
+  export interface ESLLibrary {
+    ShareButton: typeof ESLShareButton;
+  }
+  export interface HTMLElementTagNameMap {
+    'esl-share-button': ESLShareButton;
+  }
+}

src/modules/esl-share/core/esl-share-list.ts

@@ -1,3 +1,4 @@
+import {ExportNs} from '../../esl-utils/environment/export-ns';
 import {ESLBaseElement} from '../../esl-base-element/core';
 import {isEqual} from '../../esl-utils/misc/object/compare';
 import {attr, boolAttr, listen, memoize, prop} from '../../esl-utils/decorators';
@@ -6,14 +7,18 @@ import {ESLShareConfig} from './esl-share-config';
 
 import type {ESLShareButtonConfig} from './esl-share-config';
 
+export type {ESLShareListTagShape} from './esl-share-list.shape';
+
 /**
  * ESLShareList
  * @author Dmytro Shovchko
  *
  * ESLShareList is a custom element to dynamically draw {@link ESLShareButton}s using simplified shared config
  */
+@ExportNs('ShareList')
 export class ESLShareList extends ESLBaseElement {
   public static override is = 'esl-share-list';
+  public static observedAttributes = ['list'];
 
   /** Register {@link ESLShareList} component and dependent {@link ESLShareButton} */
   public static override register(): void {
@@ -41,7 +46,12 @@ export class ESLShareList extends ESLBaseElement {
     return ESLShareConfig.instance.get(this.list);
   }
 
-  public override connectedCallback(): void {
+  protected override attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
+    if (!this.connected || oldVal === newVal) return;
+    this.update();
+  }
+
+  protected override connectedCallback(): void {
     super.connectedCallback();
     this.init();
   }
@@ -53,6 +63,14 @@ export class ESLShareList extends ESLBaseElement {
     this.onReady();
   }
 
+  /** Updates the component if the buttons config was changed */
+  protected update(): void {
+    const {buttonsConfig} = this;
+    memoize.clear(this, 'buttonsConfig');
+    if (isEqual(this.buttonsConfig, buttonsConfig)) return;
+    this.init(true);
+  }
+
   /** Appends buttons to the component. */
   protected buildContent(): void {
     this.innerHTML = '';
@@ -70,9 +88,15 @@ export class ESLShareList extends ESLBaseElement {
 
   @listen({event: 'change', target: ESLShareConfig.instance})
   protected _onConfigChange(): void {
-    const {buttonsConfig} = this;
-    memoize.clear(this, 'buttonsConfig');
-    if (isEqual(this.buttonsConfig, buttonsConfig)) return;
-    this.init(true);
+    this.update();
+  }
+}
+
+declare global {
+  export interface ESLLibrary {
+    ShareList: typeof ESLShareList;
+  }
+  export interface HTMLElementTagNameMap {
+    'esl-share-list': ESLShareList;
   }
 }

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

@@ -1,3 +1,4 @@
+import {ExportNs} from '../../esl-utils/environment/export-ns';
 import {attr, jsonAttr} from '../../esl-utils/decorators';
 import {ESLTraversingQuery} from '../../esl-traversing-query/core';
 import {ESLTrigger} from '../../esl-trigger/core';
@@ -6,14 +7,18 @@ import {ESLSharePopup} from './esl-share-popup';
 import type {ESLToggleable} from '../../esl-toggleable/core/esl-toggleable';
 import type {ESLSharePopupActionParams} from './esl-share-popup';
 
+export type {ESLSharePopupTriggerTagShape} from './esl-share-popup-trigger.shape';
+
 /**
  * ESLSharePopupTrigger component
  * @author Dmytro Shovchko
  *
  * ESLSharePopupTrigger is a component that allows triggering {@link ESLSharePopup} instance state changes.
  */
+@ExportNs('SharePopupTrigger')
 export class ESLSharePopupTrigger extends ESLTrigger {
   public static override is = 'esl-share-popup-trigger';
+  public static override observedAttributes = ['list'];
 
   /** Register {@link ESLSharePopupTrigger} component and dependent {@link ESLSharePopup} */
   public static override register(): void {
@@ -67,6 +72,17 @@ export class ESLSharePopupTrigger extends ESLTrigger {
     return container ? ESLTraversingQuery.first(container, this) as HTMLElement : undefined;
   }
 
+  protected override attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {
+    if (!this.connected || oldValue === newValue) return;
+    this.update();
+  }
+
+  /** Updates the component and related popup */
+  protected update(): void {
+    if (!this.isTargetActive) return;
+    this.$target?.hide();
+  }
+
   /** Update `$target` Toggleable  from `target` selector */
   public override updateTargetFromSelector(): void {}
 

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

@@ -1,3 +1,4 @@
+import {ExportNs} from '../../esl-utils/environment/export-ns';
 import {ESLTooltip} from '../../esl-tooltip/core/esl-tooltip';
 import {bind, listen, memoize} from '../../esl-utils/decorators';
 import {ESLShareButton} from './esl-share-button';
@@ -7,6 +8,8 @@ import type {ESLToggleableActionParams} from '../../esl-toggleable/core';
 import type {TooltipActionParams} from '../../esl-tooltip/core/esl-tooltip';
 import type {ESLShareButtonConfig} from './esl-share-config';
 
+export type {ESLSharePopupTagShape} from './esl-share-popup.shape';
+
 function stringifyButtonsList(btns: ESLShareButtonConfig[]): string {
   return btns.map((btn) => btn.name).join(',');
 }
@@ -25,6 +28,7 @@ export interface ESLSharePopupActionParams extends TooltipActionParams {
  * - renders a list of {@link ESLShareButton}s based on the {@link ESLShareConfig} config from host {@link ESLShare} component
  * - forwards the sharing attributes from the host share {@link ESLShare} component
  */
+@ExportNs('SharePopup')
 export class ESLSharePopup extends ESLTooltip {
   static override is = 'esl-share-popup';
 

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

@@ -1,3 +1,4 @@
+import {ExportNs} from '../../esl-utils/environment/export-ns';
 import {ESLBaseElement} from '../../esl-base-element/core';
 import {attr, bind, boolAttr, jsonAttr} from '../../esl-utils/decorators';
 import {ESLShareList} from './esl-share-list';
@@ -6,13 +7,16 @@ import {ESLShareConfig} from './esl-share-config';
 
 import type {ESLSharePopupActionParams} from './esl-share-popup';
 
+export type {ESLShareTagShape} from './esl-share.shape';
+
 /**
  * ESLShare
  * @author Dmytro Shovchko
  *
  * ESLShare is a custom element to dynamically draw {@link ESLShareList}
  * or {@link ESLSharePopupTrigger} depending on the specified mode
  */
+@ExportNs('Share')
 export class ESLShare extends ESLBaseElement {
   public static override is = 'esl-share';
 
@@ -98,3 +102,12 @@ export class ESLShare extends ESLBaseElement {
     this.$$attr('ready', true);
   }
 }
+
+declare global {
+  export interface ESLLibrary {
+    Share: typeof ESLShare;
+  }
+  export interface HTMLElementTagNameMap {
+    'esl-share': ESLShare;
+  }
+}

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

@@ -74,7 +74,7 @@ export class ESLTrigger extends ESLBaseElement {
 
   protected _$target: ESLToggleable | null;
 
-  protected override attributeChangedCallback(attrName: string): void {
+  protected override attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {
     if (!this.connected) return;
     if (attrName === 'target') return this.updateTargetFromSelector();
   }