@nent/core/dist/components/n-view-prompt.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 { f as debugIf, w as warn } from './logging.js';
import { a as state$1 } from './state.js';
import { c as resolveRemoteContentElement, r as replaceHtmlInElement } from './remote.js';
import { D as DATA_EVENTS } from './interfaces3.js';
import { r as recordVisit } from './visits.js';
import { s as state } from './state4.js';
import { s as slugify } from './strings.js';
import { C as CommonStateSubscriber } from './state-subscriber.js';

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

const ViewPrompt = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    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 this; }
  static get style() { return viewPromptCss; }
}, [1, "n-view-prompt", {
    "route": [1040],
    "pageTitle": [1, "page-title"],
    "pageDescription": [1, "page-description"],
    "pageKeywords": [1, "page-keywords"],
    "pageRobots": [1, "page-robots"],
    "scrollTopOffset": [2, "scroll-top-offset"],
    "transition": [1],
    "path": [1537],
    "exact": [4],
    "visit": [1],
    "when": [1],
    "contentSrc": [1, "content-src"],
    "mode": [1],
    "resolveTokens": [4, "resolve-tokens"],
    "noCache": [4, "no-cache"],
    "debug": [4],
    "match": [32],
    "exactMatch": [32],
    "contentElement": [32]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["n-view-prompt"];
  components.forEach(tagName => { switch (tagName) {
    case "n-view-prompt":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ViewPrompt);
      }
      break;
  } });
}

const NViewPrompt = ViewPrompt;
const defineCustomElement = defineCustomElement$1;

export { NViewPrompt, defineCustomElement };