@nent/core/dist/esm/n-action-activator.entry.js

Functional elements to add routing, data-binding, dynamic HTML, declarative actions, audio, video, and so much more. Supercharge static HTML files into web apps without script or builds.

/*!
 * NENT 2022
 */
import { r as registerInstance, h, H as Host, a as getElement } from './index-916ca544.js';
import { f as debugIf, w as warn } from './logging-5a93c8af.js';
import { A as ActionActivationStrategy } from './interfaces-837cdb60.js';
import { i as isValue } from './values-ddfac998.js';

const ActionActivator = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.actions = [];
    this.activated = false;
    /**
     * The activation strategy to use for the contained actions.
     */
    this.activate = 'on-element-event';
    /**
     * This is the name of the event/s to listen to on the target element
     * separated by comma.
     */
    this.targetEvent = 'click,keydown';
    /**
     * Turn on debug statements for load, update and render events.
     */
    this.debug = false;
    /**
     * Limit the activation to ONCE. This could be helpful if an action
     * has side-effects if it is run multiple times.
     *
     * Note: the activation
     * state is stored in memory and does not persist across refreshes.
     */
    this.once = false;
  }
  /**
   * Manually activate all actions within this activator.
   */
  async activateActions(once = false) {
    if ((once || this.once) && this.activated)
      return;
    const values = {};
    let isValid = true;
    this.childInputs.forEach((el, index) => {
      var _a, _b;
      if (((_a = el.checkValidity) === null || _a === void 0 ? void 0 : _a.call(el)) === false) {
        (_b = el.reportValidity) === null || _b === void 0 ? void 0 : _b.call(el);
        isValid = false;
      }
      else {
        values[el.id || el.name || index] =
          el.value || (el.type == 'checkbox' ? el.checked : null);
      }
    });
    if (!isValid)
      return;
    await Promise.all(this.childActions.map(async (a) => {
      const action = await a.getAction();
      if (!action)
        return;
      const dataString = JSON.stringify(action.data);
      debugIf(this.debug, `n-action-activator: activating [${this.activate}~{topic: ${action === null || action === void 0 ? void 0 : action.topic}, command:${action === null || action === void 0 ? void 0 : action.command}, data: ${dataString}]`);
      await a.sendAction(values);
    }));
    this.activated = true;
  }
  get childInputs() {
    return this.el.querySelectorAll('input,select,textarea');
  }
  get childActions() {
    const actions = Array.from(this.el.childNodes)
      .filter(n => n.nodeName.toLocaleLowerCase().includes('action'))
      .map(n => n);
    return actions;
  }
  async componentDidLoad() {
    debugIf(this.debug, `n-action-activator: loading`);
    if (this.childActions.length === 0) {
      warn(`n-action-activator: no children actions detected`);
      return;
    }
    if (this.activate === ActionActivationStrategy.OnElementEvent) {
      const elements = this.targetElement
        ? this.el.ownerDocument.querySelectorAll(this.targetElement)
        : this.el.querySelectorAll('a,button,input[type=button]');
      if (!elements || elements.length == 0) {
        warn(`n-action-activator: no elements found for '${this.targetElement}'`);
      }
      else {
        debugIf(this.debug, `n-action-activator: elements found ${elements.length}`);
        elements.forEach(element => {
          debugIf(this.debug, `n-action-activator: element found ${element.nodeName}`);
          const events = this.targetEvent
            .split(',')
            .filter(e => isValue(e));
          events.forEach(event => {
            element.addEventListener(event, async () => {
                debugIf(this.debug, `n-action-activator: received ${element.nodeName} ${this.targetEvent} event`);
                await this.activateActions();
              });
          });
        });
      }
    }
    else if (this.activate === ActionActivationStrategy.OnRender) {
      await this.activateActions();
    }
  }
  render() {
    return (h(Host, { style: { display: 'contents' } }, h("slot", null)));
  }
  get el() { return getElement(this); }
};

export { ActionActivator as n_action_activator };