@nent/core/dist/components/n-view-link-list.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 } from '@stencil/core/internal/client';
import { e as eventBus } from './index2.js';
import { R as ROUTE_EVENTS } from './interfaces4.js';
import { s as state, o as onChange } from './state4.js';
import { d as defineCustomElement$2 } from './view-link.js';

const ViewLinkList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.route = null;
    this.match = null;
    this.routes = [];
    /**
     * The display mode for which routes to display.
     */
    this.mode = 'parents';
    /**
     * The active-class to use with the n-view-link elements.
     */
    this.activeClass = 'active';
    /**
     * The class to add to the anchor tag.
     */
    this.linkClass = '';
    /**
     * The list-class to use with the UL tag
     */
    this.listClass = '';
    /**
     * The list-item-class to use with the li tag
     */
    this.itemClass = '';
    /**
     * Specify if the '/' route should
     * be skipped in the list.
     */
    this.excludeRoot = false;
  }
  get parentView() {
    return this.el.closest('n-view');
  }
  get parentViewPrompt() {
    return this.el.closest('n-view-prompt');
  }
  componentWillLoad() {
    if (state.router) {
      this.setupRoute();
    }
    else {
      const dispose = onChange('router', () => {
        this.setupRoute();
        dispose();
      });
    }
  }
  get inView() {
    return this.parentView != null || this.parentViewPrompt != null;
  }
  setupRoute() {
    var _a, _b;
    if (this.parentViewPrompt) {
      this.route = ((_a = this.parentViewPrompt) === null || _a === void 0 ? void 0 : _a.route) || null;
    }
    else if (this.parentView) {
      this.route = ((_b = this.parentView) === null || _b === void 0 ? void 0 : _b.route) || null;
    }
    if (this.route == null)
      this.subscribe();
  }
  subscribe() {
    var _a, _b, _c;
    this.matchSubscription = eventBus.on(ROUTE_EVENTS.RouteMatchedExact, ({ route, match }) => {
      this.route = route;
      this.match = match;
      if (this.inView) {
        this.matchSubscription.call(this);
      }
    });
    this.route = ((_a = state.router) === null || _a === void 0 ? void 0 : _a.exactRoute) || null;
    this.match = ((_c = (_b = state.router) === null || _b === void 0 ? void 0 : _b.exactRoute) === null || _c === void 0 ? void 0 : _c.match) || null;
  }
  async componentWillRender() {
    let routes = await this.getRoutes();
    if (this.mode == 'parents' && (routes === null || routes === void 0 ? void 0 : routes.length) && this.excludeRoot)
      routes.shift();
    this.routes = routes || [];
  }
  async getRoutes() {
    var _a, _b, _c;
    switch (this.mode) {
      case 'parents':
        return await ((_a = this.route) === null || _a === void 0 ? void 0 : _a.getParentRoutes());
      case 'siblings':
        return await ((_b = this.route) === null || _b === void 0 ? void 0 : _b.getSiblingRoutes());
      case 'children':
        return await ((_c = this.route) === null || _c === void 0 ? void 0 : _c.getChildRoutes());
    }
  }
  getUrl(route) {
    var _a, _b;
    let url = ((_a = route.match) === null || _a === void 0 ? void 0 : _a.url) || route.path;
    if (this.match) {
      Object.keys((_b = this.match) === null || _b === void 0 ? void 0 : _b.params).forEach(param => {
        url = url.replace(`:${param}`, this.match.params[param]);
      });
    }
    return url;
  }
  render() {
    var _a;
    return (h("ul", { class: this.listClass }, (_a = this.routes) === null || _a === void 0 ? void 0 : _a.map((r) => [
      h("li", { class: this.itemClass }, h("n-view-link", { path: this.getUrl(r.route), exact: true, "link-class": this.linkClass, "active-class": this.activeClass }, r.title)),
    ])));
  }
  disconnectedCallback() {
    var _a;
    (_a = this.matchSubscription) === null || _a === void 0 ? void 0 : _a.call(this);
  }
  get el() { return this; }
}, [0, "n-view-link-list", {
    "mode": [1],
    "activeClass": [1, "active-class"],
    "linkClass": [1, "link-class"],
    "listClass": [1, "list-class"],
    "itemClass": [1, "item-class"],
    "excludeRoot": [4, "exclude-root"],
    "route": [32],
    "match": [32],
    "routes": [32]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["n-view-link-list", "n-view-link"];
  components.forEach(tagName => { switch (tagName) {
    case "n-view-link-list":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ViewLinkList);
      }
      break;
    case "n-view-link":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}

const NViewLinkList = ViewLinkList;
const defineCustomElement = defineCustomElement$1;

export { NViewLinkList, defineCustomElement };