@nent/core
Version:
144 lines (143 loc) • 3.98 kB
JavaScript
/*!
* NENT 2022
*/
import { Component, Element, h, Prop, State } from '@stencil/core';
import { onRoutingChange, routingState, } from '../n-views/services/state';
/**
* Hide or show content based on the active route.
*
* @slot active - content to display when route match
* @slot inactive - content to display when no route match
*
* @system routing
*/
export class ViewDetect {
constructor() {
/**
* 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;
}
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));
}
checkRoutingState() {
if (!routingState || !routingState.router)
return;
this.route = routingState.router.resolvePathname(this.route, this.parentUrl || '/');
if (this.routeMatch) {
this.routeMatch = new RegExp(this.routeMatch, !this.strict ? 'i' : undefined);
}
const match = routingState.router.matchPath({
path: this.routeMatch != null ? this.routeMatch : this.route,
exact: this.exact,
strict: this.strict,
});
this.match = match ? Object.assign({}, match) : null;
}
componentWillLoad() {
this.checkRoutingState();
this.routeSubscription = onRoutingChange('location', () => {
this.checkRoutingState();
});
}
render() {
return this.match ? (h("slot", { name: "active" })) : (h("slot", { name: "inactive" }));
}
disconnectedCallback() {
var _a;
(_a = this.routeSubscription) === null || _a === void 0 ? void 0 : _a.call(this);
}
static get is() { return "n-view-detect"; }
static get encapsulation() { return "shadow"; }
static get properties() { return {
"route": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "The route that will toggle the active slot of this component"
},
"attribute": "route",
"reflect": false
},
"routeMatch": {
"type": "string",
"mutable": true,
"complexType": {
"original": "Path",
"resolved": "(string | RegExp)[] | RegExp | string | undefined",
"references": {
"Path": {
"location": "import",
"path": "../n-views/services/utils/path-regex"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Optional Regex value to route match on"
},
"attribute": "route-match",
"reflect": false
},
"exact": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Only active on the exact href match,\nand not on child routes"
},
"attribute": "exact",
"reflect": false,
"defaultValue": "false"
},
"strict": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Only active on the exact href match\nusing every aspect of the URL including\nparameters."
},
"attribute": "strict",
"reflect": false,
"defaultValue": "true"
}
}; }
static get states() { return {
"match": {}
}; }
static get elementRef() { return "el"; }
}