{"code":"import * as tslib_1 from \"tslib\";\r\nimport { html, LitElement } from '@polymer/lit-element';\r\nimport { unsafeHTML } from 'lit-html/lib/unsafe-html';\r\n// @ts-ignore\r\nimport { installRouter } from 'pwa-helpers/router';\r\nimport { property } from 'util/decorators';\r\nimport matchPath from '../../lib/Path';\r\nexport default class Router extends LitElement {\r\n    constructor() {\r\n        super(...arguments);\r\n        this.path = window.location.pathname;\r\n        this.routes = [];\r\n        this.base = '/';\r\n        /** Only show one route */\r\n        this.switch = true;\r\n    }\r\n    _firstRendered() {\r\n        // Setup to watch the location and bind to redux store\r\n        installRouter((location) => {\r\n            this._store.dispatch(\r\n            // @ts-ignore\r\n            App.navigate(window.decodeURIComponent(location.pathname)));\r\n        });\r\n    }\r\n    _render({ path, routes, base }) {\r\n        const pages = this._getRoutes(this.routes, base, path);\r\n        if (!pages.length && this.notfound) {\r\n            pages.push(this._renderElement({ element: this.notfound, path: '' }));\r\n        }\r\n        return html `${pages}`;\r\n    }\r\n    _getRoutes(routes, base, path) {\r\n        const r = [...routes]\r\n            // Match each route against the current location\r\n            .filter(r => {\r\n            return matchPath(path, {\r\n                path: this.base + r.path,\r\n                exact: r.exact,\r\n                strict: false\r\n            });\r\n            // if (params) return {params: params.params, element: r.element};\r\n        })\r\n            // Convert each valid route to a html template\r\n            .map(r => this._renderElement(r));\r\n        if (!r.length)\r\n            return [];\r\n        return this.switch ? [r[0]] : r;\r\n    }\r\n    _renderElement(r) {\r\n        let attrs = '';\r\n        if (r.attributes) {\r\n            attrs = Object.entries(r.attributes)\r\n                .map(([attr, val]) => `${attr}=\"${val}\"`)\r\n                .join(' ');\r\n        }\r\n        // TODO: Pass in props\r\n        const unsafe = `<${r.element} ${attrs}></${r.element}>`;\r\n        return html `${unsafeHTML(unsafe)}`;\r\n    }\r\n}\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", String)\r\n], Router.prototype, \"path\", void 0);\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", Array)\r\n], Router.prototype, \"routes\", void 0);\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", String)\r\n], Router.prototype, \"base\", void 0);\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", String)\r\n], Router.prototype, \"notfound\", void 0);\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", Boolean)\r\n], Router.prototype, \"switch\", void 0);\r\n","dts":{"name":"/Users/tristanmatthias/projects/origami/zen/packages/components/Router/Router.d.ts","text":"import { LitElement } from '@polymer/lit-element';\r\nimport { TemplateResult } from 'lit-html';\r\nexport interface Route {\r\n    path: string;\r\n    exact?: boolean;\r\n    element: string;\r\n    attributes?: {\r\n        [prop: string]: string | number | boolean;\r\n    };\r\n}\r\nexport interface RouterProps {\r\n    path: string;\r\n    routes: Route[];\r\n    base: string;\r\n    switch: boolean;\r\n}\r\nexport default class Router extends LitElement implements RouterProps {\r\n    path: string;\r\n    routes: Route[];\r\n    base: string;\r\n    notfound?: string;\r\n    /** Only show one route */\r\n    switch: boolean;\r\n    protected _store: any;\r\n    _firstRendered(): void;\r\n    _render({path, routes, base}: RouterProps): TemplateResult;\r\n    _getRoutes(routes: Route[], base: string, path: string): TemplateResult[];\r\n    _renderElement(r: Route): TemplateResult;\r\n}\r\n"}}