@nent/core/dist/esm/n-content-template.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, a as getElement } from './index-916ca544.js';
import { w as warn, f as debugIf } from './logging-5a93c8af.js';
import { a as state } from './state-27a8a5bc.js';
import { a as fetchJson, r as replaceHtmlInElement } from './remote-0f753d9a.js';
import { r as resolveChildElementXAttributes } from './elements-1b845a48.js';
import { D as DATA_EVENTS } from './interfaces-8c5cd1b8.js';
import { f as filterData } from './jsonata.worker-8bcb5e74.js';
import { resolveTokens } from './tokens-78f8cdbe.js';
import { d as dedent } from './utils-337f03b7.js';
import { R as ROUTE_EVENTS } from './interfaces-3b78db83.js';
import { s as state$1 } from './state-adf07580.js';
import { C as CommonStateSubscriber } from './state-subscriber-eb44164a.js';
import './index-4bfabbbd.js';
import './expressions-2c27c47c.js';
import './factory-acbf0d3d.js';
import './index-f7016b94.js';
import './values-ddfac998.js';
import './promises-584c4ece.js';
import './strings-47d55561.js';

const ContentTemplate = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.contentClass = 'dynamic';
    this.contentElement = null;
    /**
     * If set, disables auto-rendering of this instance.
     * To fetch the contents change to false or remove
     * attribute.
     */
    this.deferLoad = false;
    /**
     * Turn on debug statements for load, update and render events.
     */
    this.debug = false;
    /**
     * Force render with data & route changes.
     */
    this.noCache = false;
    /**
     * Cross Origin Mode
     */
    this.mode = 'cors';
    /**
     * When declared, the child script tag is required and should be
     * the query text for the request. Also, this forces the HTTP
     * method to 'POST'.
     */
    this.graphql = false;
  }
  get childTemplate() {
    return this.el.querySelector('template');
  }
  get childScript() {
    return this.el.querySelector('script');
  }
  componentWillLoad() {
    this.dataSubscription = new CommonStateSubscriber(this, 'dataEnabled', DATA_EVENTS.DataChanged);
    this.routeSubscription = new CommonStateSubscriber(this, 'routingEnabled', ROUTE_EVENTS.RouteChanged);
    if (this.childTemplate !== null) {
      this.innerTemplate = this.childTemplate.innerHTML;
    }
  }
  async componentWillRender() {
    let shouldRender = !this.deferLoad;
    if (shouldRender && this.when && state.dataEnabled) {
      const { evaluatePredicate } = await import('./expressions-2c27c47c.js').then(function (n) { return n.f; });
      shouldRender = await evaluatePredicate(this.when);
    }
    if (shouldRender)
      this.contentElement = await this.resolveContentElement();
    else
      this.contentElement = null;
  }
  async resolveContentElement() {
    var _a;
    const content = await this.getContent();
    if (content == null)
      return null;
    const container = document.createElement(this.innerTemplate ? 'div' : 'span');
    container.innerHTML = content;
    container.className = this.contentClass;
    if (state.elementsEnabled) {
      resolveChildElementXAttributes(container);
    }
    if (state$1.router) {
      (_a = state$1.router) === null || _a === void 0 ? void 0 : _a.captureInnerLinks(container);
    }
    return container;
  }
  async getContent() {
    let content = null;
    const data = await this.resolveData();
    if (this.innerTemplate) {
      content = await resolveTokens(this.innerTemplate, false, data);
    }
    else if (this.text) {
      content = await resolveTokens(this.text, false, data);
    }
    return content;
  }
  async resolveData() {
    var _a;
    let data = {};
    if (this.el.dataset) {
      Object.assign(data, this.el.dataset);
    }
    if (this.childScript !== null && !this.graphql) {
      try {
        const json = JSON.parse(this.childScript.textContent || '');
        data = Object.assign(data, json);
      }
      catch (error) {
        warn(`n-content-template: unable to deserialize JSON: ${error}`);
      }
    }
    if (this.src) {
      try {
        data = this.graphql
          ? await fetchJson(window, this.src, this.mode, 'POST', JSON.stringify({
            query: dedent(((_a = this.childScript) === null || _a === void 0 ? void 0 : _a.textContent) || ''),
          }))
          : await fetchJson(window, this.src, this.mode);
        if (this.filter) {
          debugIf(this.debug, `n-content-template: filtering: ${this.filter}`);
          data = await filterData(this.filter, data);
        }
      }
      catch (error) {
        warn(`n-content-template: unable to fetch and filter data data ${error}`);
      }
    }
    return data;
  }
  render() {
    replaceHtmlInElement(this.el, `.${this.contentClass}`, this.contentElement);
    return null;
  }
  disconnectedCallback() {
    this.dataSubscription.destroy();
    this.routeSubscription.destroy();
  }
  get el() { return getElement(this); }
};

export { ContentTemplate as n_content_template };