@nent/core/dist/esm/n-view-link.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 { g as getChildInputValidity } from './elements-397b851b.js';
import { o as onChange, s as state } from './state-adf07580.js';
import { c as logIf } from './logging-5a93c8af.js';
import { i as isValue } from './values-ddfac998.js';
import './index-4bfabbbd.js';

const ViewLink = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /**
     * 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 getElement(this); }
};

export { ViewLink as n_view_link };