@nent/core/dist/cjs/n-view-link.cjs.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
 */
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-1829aebc.js');
const elements = require('./elements-088b606d.js');
const state = require('./state-246c735d.js');
const logging = require('./logging-37c154cf.js');
const values = require('./values-b2399e33.js');
require('./index-96f3ab3f.js');

const ViewLink = class {
  constructor(hostRef) {
    index.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 = state.onChange('location', () => {
      if (state.state.router) {
        this.path = state.state.router.resolvePathname(this.path, this.parentUrl || '/');
        const match = state.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.state.router;
    if (router == null ||
      router.isModifiedEvent(e) ||
      path == undefined) {
      return true;
    }
    else {
      e.stopImmediatePropagation();
      e.preventDefault();
      if (this.validate == false ||
        elements.getChildInputValidity(router.exactRoute.routeElement)) {
        router.goToRoute(path);
      }
      return false;
    }
  }
  render() {
    const { router } = state.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]: values.isValue(match),
      [this.linkClass || '']: true,
    };
    logging.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 (index.h(index.Host, null, index.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);
      } }), index.h("slot", null))));
  }
  disconnectedCallback() {
    var _a;
    (_a = this.routeSubscription) === null || _a === void 0 ? void 0 : _a.call(this);
  }
  get el() { return index.getElement(this); }
};

exports.n_view_link = ViewLink;