@nent/core/dist/components/view-link.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 { g as getChildInputValidity } from './elements3.js';
import { o as onChange, s as state } from './state4.js';
import { c as logIf } from './logging.js';
import { i as isValue } from './values.js';

const ViewLink = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    /**
     * The class to add when the matching route is active
     * in the browser
     */
    this.activeClass = 'active';
    /**
     * Only active on the exact href match,
     * and not on child routes
     */
    this.exact = false;
    /**
     * Only active on the exact href match
     * using every aspect of the URL including
     * parameters.
     */
    this.strict = true;
    /**
     * Provide log messages for path matching.
     */
    this.debug = false;
    /**
     * Validates any current-route inputs before navigating. Disables
     * navigation if any inputs are invalid.
     */
    this.validate = false;
  }
  get parentUrl() {
    var _a, _b;
    return (((_a = this.el.closest('n-view-prompt')) === null || _a === void 0 ? void 0 : _a.path) ||
      ((_b = this.el.closest('n-view')) === null || _b === void 0 ? void 0 : _b.path));
  }
  componentWillLoad() {
    this.routeSubscription = onChange('location', () => {
      if (state.router) {
        this.path = state.router.resolvePathname(this.path, this.parentUrl || '/');
        const match = state.router.matchPath({
          path: this.path,
          exact: this.exact,
          strict: this.strict,
        });
        this.match = match ? Object.assign({}, match) : null;
      }
    });
  }
  handleClick(e, path) {
    const router = state.router;
    if (router == null ||
      router.isModifiedEvent(e) ||
      path == undefined) {
      return true;
    }
    else {
      e.stopImmediatePropagation();
      e.preventDefault();
      if (this.validate == false ||
        getChildInputValidity(router.exactRoute.routeElement)) {
        router.goToRoute(path);
      }
      return false;
    }
  }
  render() {
    const { router } = state;
    const path = router === null || router === void 0 ? void 0 : router.resolvePathname(this.path, this.parentUrl);
    const match = router === null || router === void 0 ? void 0 : router.matchPath({
      path: path,
      exact: this.exact,
      strict: this.strict,
    });
    const classes = {
      [this.activeClass]: isValue(match),
      [this.linkClass || '']: true,
    };
    logIf(this.debug, 'n-view-link re-render ' + path);
    let anchorAttributes = {
      title: this.el.title,
      role: this.el.getAttribute('aria-role'),
      id: this.el.id,
    };
    return (h(Host, null, h("a", Object.assign({ href: path }, anchorAttributes, { "n-attached-click": true, "n-attached-key-press": true, class: classes, onClick: (e) => {
        return this.handleClick(e, path);
      }, onKeyPress: (e) => {
        return this.handleClick(e, path);
      } }), h("slot", null))));
  }
  disconnectedCallback() {
    var _a;
    (_a = this.routeSubscription) === null || _a === void 0 ? void 0 : _a.call(this);
  }
  get el() { return this; }
}, [4, "n-view-link", {
    "path": [1025],
    "linkClass": [1, "link-class"],
    "activeClass": [1, "active-class"],
    "exact": [4],
    "strict": [4],
    "debug": [4],
    "validate": [516],
    "match": [32]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["n-view-link"];
  components.forEach(tagName => { switch (tagName) {
    case "n-view-link":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ViewLink);
      }
      break;
  } });
}

export { ViewLink as V, defineCustomElement as d };