@nent/core/dist/collection/components/n-content-show/content-show.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 { Component, Element, h, Host, Prop, State, } from '@stencil/core';
import { commonState } from '../../services/common';
import { CommonStateSubscriber } from '../../services/common/state-subscriber';
import { DATA_EVENTS } from '../../services/data/interfaces';
import { ROUTE_EVENTS } from '../n-views/services/interfaces';
/**
 * This element conditionally renders child elements based on the
 * configured predicate applied to the when value predicate.
 * To learn more about predicates, check out the
 * expressions documentation.
 *
 * @system content
 * @extension data
 */
export class ContentShow {
  constructor() {
    this.show = false;
  }
  componentWillLoad() {
    this.dataSubscription = new CommonStateSubscriber(this, 'dataEnabled', DATA_EVENTS.DataChanged);
    this.routeSubscription = new CommonStateSubscriber(this, 'routingEnabled', ROUTE_EVENTS.RouteChanged);
  }
  async componentWillRender() {
    if (commonState.dataEnabled) {
      const { evaluatePredicate } = await import('../../services/data/expressions');
      this.show = await evaluatePredicate(this.when);
    }
  }
  disconnectedCallback() {
    this.dataSubscription.destroy();
    this.routeSubscription.destroy();
  }
  render() {
    return (h(Host, { hidden: !this.show },
      h("slot", null)));
  }
  static get is() { return "n-content-show"; }
  static get properties() { return {
    "when": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": true,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The data expression to obtain a predicate for conditionally rendering\nthe inner-contents of this element."
      },
      "attribute": "when",
      "reflect": false
    }
  }; }
  static get states() { return {
    "show": {}
  }; }
  static get elementRef() { return "el"; }
}