@nent/core/dist/components/n-content-template.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 { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
import { w as warn, f as debugIf } from './logging.js';
import { a as state } from './state.js';
import { a as fetchJson, r as replaceHtmlInElement } from './remote.js';
import { r as resolveChildElementXAttributes } from './elements2.js';
import { D as DATA_EVENTS } from './interfaces3.js';
import { f as filterData } from './jsonata.worker.js';
import { resolveTokens } from './tokens.js';
import { d as dedent } from './utils.js';
import { R as ROUTE_EVENTS } from './interfaces4.js';
import { s as state$1 } from './state4.js';
import { C as CommonStateSubscriber } from './state-subscriber.js';

const ContentTemplate = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    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.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 this; }
}, [0, "n-content-template", {
    "text": [1],
    "deferLoad": [1028, "defer-load"],
    "src": [1],
    "filter": [1],
    "debug": [4],
    "noCache": [4, "no-cache"],
    "when": [1],
    "mode": [1],
    "graphql": [4],
    "innerTemplate": [32],
    "contentElement": [32]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["n-content-template"];
  components.forEach(tagName => { switch (tagName) {
    case "n-content-template":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ContentTemplate);
      }
      break;
  } });
}

const NContentTemplate = ContentTemplate;
const defineCustomElement = defineCustomElement$1;

export { NContentTemplate, defineCustomElement };