@nent/core/dist/esm/n-view-prompt.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 state$1 } from './state-27a8a5bc.js';
import { c as resolveRemoteContentElement, r as replaceHtmlInElement } from './remote-0f753d9a.js';
import { D as DATA_EVENTS } from './interfaces-8c5cd1b8.js';
import { r as recordVisit } from './visits-b52975ad.js';
import { s as state } from './state-adf07580.js';
import { s as slugify } from './strings-47d55561.js';
import { C as CommonStateSubscriber } from './state-subscriber-eb44164a.js';
import './index-4bfabbbd.js';
import './tokens-78f8cdbe.js';
import './factory-acbf0d3d.js';
import './index-f7016b94.js';
import './values-ddfac998.js';
import './promises-584c4ece.js';
import './mutex-e5645c85.js';
import './memory-0d63dacd.js';

const viewPromptCss = ":host{display:block}:host([hidden]){display:none}";

const ViewPrompt = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.match = null;
    this.exactMatch = false;
    this.contentElement = null;
    /**
     * The title for this view. This is prefixed
     * before the app title configured in n-views
     *
     */
    this.pageTitle = '';
    /**
     * The page description for this view.
     *
     */
    this.pageDescription = '';
    /**
     * The keywords to add to the keywords meta-tag for this view.
     *
     */
    this.pageKeywords = '';
    /**
     * The robots instruction for search indexing
     *
     */
    this.pageRobots = 'none';
    /**
     * The url for this route should only be matched
     * when it is exact.
     */
    this.exact = true;
    /**
     * The visit strategy for this do.
     * once: persist the visit and never force it again
     * always: do not persist, but don't don't show again in-session
     * optional: do not force this view-do ever. It will be available by URL
     */
    this.visit = 'once';
    /**
     * Cross Origin Mode if the content is pulled from
     * a remote location
     */
    this.mode = 'cors';
    /**
     * Before rendering remote HTML, replace any data-tokens with their
     * resolved values. This also commands this component to
     * re-render it's HTML for data-changes. This can affect
     * performance.
     *
     * IMPORTANT: ONLY WORKS ON REMOTE HTML
     */
    this.resolveTokens = false;
    /**
     * Force render with data & route changes.
     */
    this.noCache = false;
    /**
     * To debug timed elements, set this value to true.
     */
    this.debug = false;
  }
  get parentView() {
    return this.el.closest('n-view');
  }
  componentWillLoad() {
    debugIf(this.debug, `n-view-prompt: ${this.path} loading`);
    this.contentKey = `rem-content-${slugify(this.contentSrc || 'none')}`;
    if (!state.router) {
      warn(`n-view-prompt: ${this.path} cannot load outside of an n-views element`);
      return;
    }
    if (!this.parentView) {
      warn(`n-view-prompt: ${this.path} cannot load outside of an n-views element`);
      return;
    }
    this.route = state.router.createRoute(this.el, this.parentView, (match) => {
      this.match = match ? Object.assign({}, match) : null;
      this.exactMatch = (match === null || match === void 0 ? void 0 : match.isExact) || false;
    });
    if (state$1.dataEnabled && this.resolveTokens) {
      this.dataSubscription = new CommonStateSubscriber(this, 'dataEnabled', DATA_EVENTS.DataChanged);
    }
  }
  async componentWillRender() {
    var _a;
    debugIf(this.debug, `n-view-prompt: ${this.path} will render`);
    if ((_a = this.match) === null || _a === void 0 ? void 0 : _a.isExact) {
      debugIf(this.debug, `n-view-prompt: ${this.path} matched exact`);
      if (this.contentSrc && this.contentElement == null)
        this.contentElement = await resolveRemoteContentElement(window, this.contentSrc, this.mode, this.contentKey, this.resolveTokens, 'content');
      await recordVisit(this.visit, this.path);
    }
  }
  render() {
    var _a;
    debugIf(this.debug, `n-view-prompt: ${this.path} render`);
    replaceHtmlInElement(this.el, `#${this.contentKey}`, this.contentElement);
    return (h(Host, { hidden: !((_a = this.match) === null || _a === void 0 ? void 0 : _a.isExact) }, h("slot", null), h("slot", { name: "content" })));
  }
  async componentDidRender() {
    var _a, _b, _c, _d;
    if (!((_b = (_a = this.route) === null || _a === void 0 ? void 0 : _a.match) === null || _b === void 0 ? void 0 : _b.isExact)) {
      (_c = this.contentElement) === null || _c === void 0 ? void 0 : _c.remove();
      if (this.noCache)
        this.contentElement = null;
    }
    await ((_d = this.route) === null || _d === void 0 ? void 0 : _d.loadCompleted());
  }
  disconnectedCallback() {
    var _a, _b;
    (_a = this.dataSubscription) === null || _a === void 0 ? void 0 : _a.destroy();
    (_b = this.route) === null || _b === void 0 ? void 0 : _b.destroy();
  }
  get el() { return getElement(this); }
};
ViewPrompt.style = viewPromptCss;

export { ViewPrompt as n_view_prompt };