@nent/core/dist/components/n-content-include.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, h, Host } from '@stencil/core/internal/client';
import { b as resolveRemoteContent, 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 { R as ROUTE_EVENTS } from './interfaces4.js';
import { s as state$1 } from './state4.js';
import { C as CommonStateSubscriber } from './state-subscriber.js';
import { a as state } from './state.js';
import { f as debugIf, w as warn } from './logging.js';

const ContentInclude = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.contentClass = 'remote-content';
    this.contentElement = null;
    /**
     * Cross Origin Mode
     */
    this.mode = 'cors';
    /**
     * Before rendering HTML, replace any data-tokens with their
     * resolved values. This also commands this element to
     * re-render it's HTML for data-changes. This can affect
     * performance.
     */
    this.resolveTokens = false;
    /**
     * If set, disables auto-rendering of this instance.
     * To fetch the contents change to false or remove
     * attribute.
     */
    this.deferLoad = false;
  }
  componentWillLoad() {
    if (this.resolveTokens || this.when != undefined) {
      this.dataSubscription = new CommonStateSubscriber(this, 'dataEnabled', DATA_EVENTS.DataChanged);
      this.routeSubscription = new CommonStateSubscriber(this, 'routingEnabled', ROUTE_EVENTS.RouteChanged);
    }
  }
  async componentWillRender() {
    let shouldRender = !this.deferLoad;
    if (state.dataEnabled && this.when) {
      const { evaluatePredicate } = await import('./expressions.js').then(function (n) { return n.f; });
      shouldRender = await evaluatePredicate(this.when);
    }
    if (shouldRender)
      this.contentElement = this.src
        ? await this.resolveContentElement()
        : null;
    else if (this.resolveTokens)
      this.contentElement = null;
  }
  async resolveContentElement() {
    var _a;
    try {
      let content = await resolveRemoteContent(window, this.src, this.mode, this.resolveTokens);
      if (content && this.json) {
        debugIf(state.debug, `n-content-include: filtering: ${this.json}`);
        const data = JSON.parse(content);
        content = await filterData(this.json, data);
      }
      if (content == null)
        return null;
      const div = document.createElement('div');
      div.innerHTML = content;
      div.className = this.contentClass;
      if (state.elementsEnabled)
        resolveChildElementXAttributes(div);
      (_a = state$1.router) === null || _a === void 0 ? void 0 : _a.captureInnerLinks(div);
      return div;
    }
    catch (_b) {
      warn(`n-content: unable to retrieve from ${this.src}`);
      return null;
    }
  }
  render() {
    replaceHtmlInElement(this.el, `.${this.contentClass}`, this.contentElement);
    return h(Host, { hidden: this.contentElement == null });
  }
  disconnectedCallback() {
    var _a, _b;
    (_a = this.dataSubscription) === null || _a === void 0 ? void 0 : _a.destroy();
    (_b = this.routeSubscription) === null || _b === void 0 ? void 0 : _b.destroy();
  }
  get el() { return this; }
}, [0, "n-content-include", {
    "src": [1],
    "mode": [1],
    "resolveTokens": [4, "resolve-tokens"],
    "deferLoad": [1028, "defer-load"],
    "when": [1025],
    "json": [1]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["n-content-include"];
  components.forEach(tagName => { switch (tagName) {
    case "n-content-include":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ContentInclude);
      }
      break;
  } });
}

const NContentInclude = ContentInclude;
const defineCustomElement = defineCustomElement$1;

export { NContentInclude, defineCustomElement };