godown 2.7.7 → 3.0.0-canary.1

package/components/range.js

@@ -0,0 +1,193 @@
+import { __decorate } from 'tslib';
+import { godown } from '@godown/element/decorators/godown.js';
+import { part } from '@godown/element/decorators/part.js';
+import { styles } from '@godown/element/decorators/styles.js';
+import { classList } from '@godown/element/directives/class-list.js';
+import { conditionIf } from '@godown/element/directives/condition-if.js';
+import { htmlSlot } from '@godown/element/directives/html-slot.js';
+import { joinProperties } from '@godown/element/tools/css.js';
+import { isNil } from '@godown/element/tools/lib.js';
+import { css, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { scopePrefix, cssGlobalVars } from '../core/global-style.js';
+import SuperInput from '../core/super-input.js';
+
+const protoName = "range";
+const cssScope = scopePrefix(protoName);
+/**
+ * {@linkcode Range} is similar to <input type="range">.
+ *
+ * Value accepts a number, or an array of two numbers.
+ *
+ * Number have one handle, array have two.
+ *
+ * @category input
+ */
+let Range = class Range extends SuperInput {
+    constructor() {
+        super(...arguments);
+        /**
+         * Minimum value.
+         */
+        this.min = 0;
+        /**
+         * Maximum value.
+         */
+        this.max = 100;
+        /**
+         * Sliding step length.
+         */
+        this.step = 1;
+    }
+    /**
+     * Returns true when the second number is greater than the first number
+     */
+    get reverse() {
+        return this.range ? this.value[0] > this.value[1] : false;
+    }
+    /**
+     * Enable range sliding.
+     */
+    get range() {
+        return Array.isArray(this.value);
+    }
+    get rangeValue() {
+        return (this.range ? this.value : [0, this.value]);
+    }
+    render() {
+        const [from, to] = this.rangeValue;
+        const gap = this.max - this.min;
+        return html `<div part="root" class="${classList({
+            vertical: this.vertical,
+            range: this.range,
+            reverse: this.reverse,
+        })}" @mousedown="${this.disabled ? null : this._handleMousedownRoot}" style="${joinProperties({ "--start": `${((from - this.min) / gap) * 100}%`, "--end": `${((to - this.min) / gap) * 100}%` })}"><div part="track"></div>${conditionIf(this.range, html `<i part="handle" class="${classList({ "last-focus": this.lastFocus === 1 }, "start")}" @mousedown="${this.disabled ? null : this._handleMousedownStart}">${htmlSlot("start")}</i>`)} <i part="handle" class="${classList({ "last-focus": this.lastFocus === 2 }, "end")}" @mousedown="${this.disabled ? null : this._handleMousedownEnd}">${htmlSlot("end")}</i></div>`;
+    }
+    _handleMousedownStart(e) {
+        this.lastFocus = 1;
+        this.createMousedownListener(this.setStart)(e);
+    }
+    _handleMousedownEnd(e) {
+        this.lastFocus = 2;
+        this.createMousedownListener(this.setEnd)(e);
+    }
+    setStart(value) {
+        const i = this.value[1];
+        this.value = this.range ? [value, i] : value;
+    }
+    setEnd(value) {
+        const i = this.value[0];
+        this.value = this.range ? [i, value] : value;
+    }
+    _computeValue(e) {
+        const rect = this._root.getBoundingClientRect();
+        const div = this.vertical ? (e.clientY - rect.top) / rect.height : (e.clientX - rect.left) / rect.width;
+        let value = Math.round((div * (this.max - this.min)) / this.step) * this.step;
+        if (value > this.max) {
+            value -= this.step;
+        }
+        else if (value < this.min) {
+            value += this.step;
+        }
+        return value;
+    }
+    _handleMousedownRoot(e) {
+        const value = this._computeValue(e);
+        if (!this.range || Math.abs(value - this.value[0]) > Math.abs(value - this.value[1])) {
+            this.setEnd(value);
+            this._handleMousedownEnd(e);
+        }
+        else {
+            this.setStart(value);
+            this._handleMousedownStart(e);
+        }
+    }
+    createMousedownListener(mouseMoveCallback) {
+        return (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const move = this.createMousemoveListener(mouseMoveCallback);
+            document.addEventListener("mousemove", move);
+            const stop = () => {
+                document.removeEventListener("mousemove", move);
+                document.removeEventListener("mouseup", stop);
+            };
+            document.addEventListener("mouseup", stop);
+        };
+    }
+    createMousemoveListener(callback) {
+        return (e) => {
+            const value = this._computeValue(e);
+            if (value > this.max || value < this.min) {
+                return;
+            }
+            callback?.call(this, value);
+        };
+    }
+    _connectedInit() {
+        const gap = this.max - this.min;
+        this.step ||= gap / 100;
+        if (!isNil(this.default) && isNil(this.value)) {
+            this.value = this.default;
+        }
+        else if (isNil(this.default) && !isNil(this.value)) {
+            this.default = this.value;
+        }
+        else {
+            const mid = Math.round(gap / 2 / this.step) * this.step;
+            this.default = this.range ? [0, mid] : mid;
+            this.value = this.default;
+        }
+    }
+    reset() {
+        this.value = this.default;
+    }
+    swap() {
+        if (this.range) {
+            const [a, b] = this.value;
+            this.value = [b, a];
+        }
+    }
+    sort() {
+        this.value = this.toSorted();
+    }
+    toSorted() {
+        if (this.range) {
+            const [a, b] = this.value;
+            return a > b ? [b, a] : [a, b];
+        }
+        return this.value;
+    }
+};
+__decorate([
+    property({ type: Number })
+], Range.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], Range.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], Range.prototype, "step", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Range.prototype, "vertical", void 0);
+__decorate([
+    property({ type: Array })
+], Range.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], Range.prototype, "default", void 0);
+__decorate([
+    part("root")
+], Range.prototype, "_root", void 0);
+__decorate([
+    state()
+], Range.prototype, "lastFocus", void 0);
+Range = __decorate([
+    godown(protoName),
+    styles(css `:host{${cssScope}-handle-active:var(${cssGlobalVars._colors.blue[7]});${cssScope}-track-width:.5em;background:var(${cssGlobalVars.input}-background);width:var(${cssGlobalVars.input}-width);display:inline-block;margin:.25em 0}:host([vertical]){height:var(${cssGlobalVars.input}-width);width:-moz-fit-content;width:fit-content}:host(:not([disabled])) i:active{${cssScope}-handle-scale:1.05;background:var(${cssScope}-handle-active)}.last-focus{z-index:1}[part=root]{min-height:inherit;position:relative;border-radius:inherit;width:100%;--start:0%;--end:50%;height:var(${cssScope}-track-width)}[part=track]{height:100%;min-height:inherit;display:flex;position:absolute;pointer-events:none;border-radius:inherit;justify-content:space-between;left:min(var(--start),var(--end));background:var(${cssGlobalVars.active});width:max(calc(var(--end) - var(--start)),calc(var(--start) - var(--end)))}[part=handle]{width:1em;height:1em;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:absolute;border:.1em solid;border-radius:50%;transform-origin:0 25%;transform:scale(var(${cssScope}-handle-scale,1)) translate(-50%,-25%);background:var(${cssGlobalVars.active});border-color:var(${cssGlobalVars.input}-control)}`, css `.vertical{height:100%;width:var(${cssScope}-track-width)}.vertical i{transform:translate(-25%,-50%)}.vertical [part=track]{width:100%;height:max(calc(var(--end) - var(--start)),calc(var(--start) - var(--end)));top:min(var(--start),var(--end));left:0}`, css `.start{left:var(--start);top:0}.end{left:var(--end);top:0}.vertical .start{top:var(--start);left:0}.vertical .end{top:var(--end);left:0}`)
+], Range);
+var Range$1 = Range;
+
+export { Range$1 as default };
+//# sourceMappingURL=range.js.map

package/components/range.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range.js","sources":["../src/components/range.ts"],"sourcesContent":null,"names":[],"mappings":"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"}

package/{web-components/wrapper → components}/rotate.d.ts

@@ -1,17 +1,13 @@
-import { GodownElement } from "../../proto/godown-element.js";
+import { GlobalStyle } from "../core/global-style.js";
 /**
  * {@linkcode Rotate} Make child elements rotate.
+ *
+ * @category wrapper
  */
-export declare class Rotate extends GodownElement {
+declare class Rotate extends GlobalStyle {
     _root: HTMLElement;
     protected render(): import("lit").TemplateResult<1>;
-    /**
-     * Cancel the offset.
-     */
     reset(): void;
-    /**
-     * Apply offset.
-     */
     protected _handleRotate(e: MouseEvent): void;
     /**
      * Compute offset.

package/components/rotate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rotate.d.ts","sourceRoot":"","sources":["../src/components/rotate.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAKnE;;;;GAIG;AACH,cAIM,MAAO,SAAQ,WAAW;IAE9B,KAAK,EAAE,WAAW,CAAC;IAEnB,SAAS,CAAC,MAAM;IAIhB,KAAK;IAKL,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,UAAU;IAMrC;;;;;;;OAOG;IACH,cAAc,CAAC,CAAC,EAAE,UAAU;;;;CAU7B;AAED,eAAe,MAAM,CAAC"}

package/components/rotate.js

@@ -0,0 +1,57 @@
+import { __decorate } from 'tslib';
+import { godown } from '@godown/element/decorators/godown.js';
+import { part } from '@godown/element/decorators/part.js';
+import { styles } from '@godown/element/decorators/styles.js';
+import { htmlSlot } from '@godown/element/directives/html-slot.js';
+import { css, html } from 'lit';
+import { scopePrefix, GlobalStyle } from '../core/global-style.js';
+
+const protoName = "rotate";
+const cssScope = scopePrefix(protoName);
+/**
+ * {@linkcode Rotate} Make child elements rotate.
+ *
+ * @category wrapper
+ */
+let Rotate = class Rotate extends GlobalStyle {
+    render() {
+        return html `<div part="root"><div part="slot" @mousemove="${this._handleRotate}">${htmlSlot()}</div><i @mouseleave="${this.reset}"></i></div>`;
+    }
+    reset() {
+        this._root.style.removeProperty("transform");
+        this._root.style.removeProperty("transition");
+    }
+    _handleRotate(e) {
+        const { rotateX, rotateY } = this._computeOffset(e);
+        this._root.style.setProperty("transform", `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`);
+        this._root.style.setProperty("transition", "0s");
+    }
+    /**
+     * Compute offset.
+     * ```
+     * `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`
+     * ```
+     * @param e Mouse move event.
+     * @returns rotateX, rotateY
+     */
+    _computeOffset(e) {
+        const { left, top, width, height } = this._root.getBoundingClientRect();
+        const { clientX, clientY } = e;
+        const offsetX = clientX - left;
+        const offsetY = clientY - top;
+        const rotateX = -(offsetY - height / 2) / height / 2;
+        const rotateY = (offsetX - width / 2) / width / 2;
+        return { rotateX, rotateY };
+    }
+};
+__decorate([
+    part("root")
+], Rotate.prototype, "_root", void 0);
+Rotate = __decorate([
+    godown(protoName),
+    styles(css `:host{display:block;width:-moz-fit-content;width:fit-content;transition:all .5s ease-in-out;${cssScope}--padding:.75em;${cssScope}--offset:.5em}div{position:relative;transition:inherit;transition-property:transform}i{width:100%;height:100%;position:absolute;top:0;box-sizing:content-box;padding:var(${cssScope}--offset);margin:calc(-1 * var(${cssScope}--offset))}[part=slot]{z-index:2}`)
+], Rotate);
+var Rotate$1 = Rotate;
+
+export { Rotate$1 as default };
+//# sourceMappingURL=rotate.js.map

package/components/rotate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rotate.js","sources":["../src/components/rotate.ts"],"sourcesContent":null,"names":[],"mappings":";;;;;;;;AAQA,MAAM,SAAS,GAAG,QAAQ,CAAC;AAC3B,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AAExC;;;;AAIG;AAKH,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,WAAW,CAAA;IAIpB,MAAM,GAAA;AACd,QAAA,OAAO,IAAI,CAAA,CACsB,8CAAA,EAAA,IAAI,CAAC,aAAa,CAAA,EAAA,EAAK,QAAQ,EAAE,CAC9C,sBAAA,EAAA,IAAI,CAAC,KAAK,cACvB,CAAC;KACT;IAED,KAAK,GAAA;QACH,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;QAC7C,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;KAC/C;AAES,IAAA,aAAa,CAAC,CAAa,EAAA;AACnC,QAAA,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;AACpD,QAAA,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,WAAW,OAAO,CAAA,aAAA,EAAgB,OAAO,CAAA,IAAA,CAAM,CAAC,CAAC;QAC3F,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;KAClD;AAED;;;;;;;AAOG;AACH,IAAA,cAAc,CAAC,CAAa,EAAA;AAC1B,QAAA,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC;AACxE,QAAA,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC;AAC/B,QAAA,MAAM,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC;AAC/B,QAAA,MAAM,OAAO,GAAG,OAAO,GAAG,GAAG,CAAC;AAE9B,QAAA,MAAM,OAAO,GAAG,EAAE,OAAO,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC;AACrD,QAAA,MAAM,OAAO,GAAG,CAAC,OAAO,GAAG,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC;AAClD,QAAA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;KAC7B;CACF,CAAA;AAtCC,UAAA,CAAA;IADC,IAAI,CAAC,MAAM,CAAC;AACM,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAFf,MAAM,GAAA,UAAA,CAAA;IAJX,MAAM,CAAC,SAAS,CAAC;AACjB,IAAA,MAAM,CACL,GAAG,CAAA,CAAA,4FAAA,EAAgG,QAAQ,CAAA,gBAAA,EAAmB,QAAQ,CAAA,yKAAA,EAA4K,QAAQ,CAAA,+BAAA,EAAkC,QAAQ,CAAA,iCAAA,CAAqC,CAC1Y;AACK,CAAA,EAAA,MAAM,CAwCX,CAAA;AAED,eAAe,MAAM;;;;"}

package/components/router.d.ts

@@ -0,0 +1,121 @@
+import { type PropertyValueMap, type TemplateResult } from "lit";
+import { GlobalStyle } from "../core/global-style.js";
+/**
+ * {@linkcode Router} has basic routing control.
+ *
+ * To switch routes, use `router-link component`.
+ *
+ * It has two methods to collect routes.
+ *
+ * 1. From field `routes`, an array, each elements require "path" and "component".
+ * 2. From child elements, which have the slot attribute for matching routes.
+ *
+ * If only the method 1 is used, set `type` to `"field"`.
+ *
+ * If only the method 2 is used, set `type` to `"slotted"`.
+ *
+ * `type` defaults to `"united"`, which will try method 1, then method 2.
+ *
+ * If no routes are matched, the default value (no named slot) will be rendered.
+ *
+ * @category navigation
+ */
+declare class Router<C = unknown> extends GlobalStyle {
+    static routerInstances: Set<Router<unknown>>;
+    private __fieldRouteTree;
+    private __slottedRouteTree;
+    private __cacheRecord;
+    private __routes;
+    /**
+     * Render result.
+     */
+    component: C | TemplateResult;
+    /**
+     * Dynamic parameters record.
+     */
+    params: Record<string, string>;
+    /**
+     * Value of matched path in routes.
+     */
+    path: string;
+    /**
+     * Current pathname (equals to location.pathname).
+     */
+    pathname: string;
+    /**
+     * Path prefix.
+     */
+    baseURL: string;
+    /**
+     * Rendered content when there is no match.
+     */
+    default: TemplateResult;
+    /**
+     * The type of routing sources.
+     *
+     * If field, it won't collect the slot attribute of the child elements.
+     *
+     * This property should not be changed after the rendering is complete.
+     */
+    type: "united" | "slotted" | "field";
+    /**
+     * Cache accessed records.
+     *
+     * Emptied at each re-collection.
+     */
+    cache: boolean;
+    set routes(value: (Record<string, any> & {
+        path: string;
+        component?: C;
+    })[]);
+    get routes(): (Record<string, any> & {
+        path: string;
+        component?: C;
+    })[];
+    clear(): void;
+    protected render(): C | TemplateResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    useRouter(): {
+        pathname: string;
+        params: Record<string, string>;
+        path: string;
+        component: C | TemplateResult;
+    };
+    /**
+     * @param params value of useRouter()
+     * @param first whether this path is loaded for the first time.
+     */
+    routeChangeCallback: (params: {
+        pathname: string;
+        params: Record<string, string>;
+        path: string;
+        component: C | TemplateResult;
+    }, first: boolean) => void;
+    protected updated(changedProperties: PropertyValueMap<this>): void;
+    /**
+     * Find components from {@linkcode __fieldRouteTree} matching query.
+     * @param query Query string.
+     * @returns Components or null.
+     */
+    fieldComponent(query?: string): C;
+    /**
+     * Find components from {@linkcode __slottedRouteTree} matching query.
+     * @param query Query string.
+     * @returns Named slot element template result or null.
+     */
+    slottedComponent(usedRouteTemplate?: string): TemplateResult<1>;
+    /**
+     * Reset the route tree, clear cache, collect routes from child elements.
+     */
+    collectSlottedRoutes(): void;
+    /**
+     * Reset the route tree, clear cache, collect routes from value.
+     */
+    collectFieldRoutes(value: typeof this.routes): void;
+    useWhich(path: string): string;
+    parseParams(routeTemplate: string, path: string): Record<string, string>;
+    static updateAll(): void;
+}
+export default Router;
+//# sourceMappingURL=router.d.ts.map

package/components/router.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../src/components/router.ts"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGtE,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAItD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,cAEM,MAAM,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,WAAW;IAC3C,MAAM,CAAC,eAAe,uBAAqB;IAE3C,OAAO,CAAC,gBAAgB,CAA8B;IACtD,OAAO,CAAC,kBAAkB,CAA8B;IACxD,OAAO,CAAC,aAAa,CAAwD;IAC7E,OAAO,CAAC,QAAQ,CAMZ;IAEJ;;OAEG;IAEH,SAAS,EAAE,CAAC,GAAG,cAAc,CAAQ;IACrC;;OAEG;IAEH,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IACpC;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IAEH,QAAQ,SAAM;IACd;;OAEG;IAEH,OAAO,SAAM;IACb;;OAEG;IAEH,OAAO,EAAE,cAAc,CAAc;IACrC;;;;;;OAMG;IAEH,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAY;IAChD;;;;OAIG;IAEH,KAAK,UAAS;IAEd,IACI,MAAM,CAAC,KAAK;;;QAAA,EAGf;IACD,IAAI,MAAM;;;SAET;IAED,KAAK;IAIL,SAAS,CAAC,MAAM;IAsBhB,iBAAiB;IAgBjB,oBAAoB;IAKpB,SAAS;;;;;;IAST;;;OAGG;IACH,mBAAmB,EAAE,CAAC,MAAM,EAAE;QAC5B,QAAQ,EAAE,MAAM,CAAC;QACjB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC/B,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,EAAE,CAAC,GAAG,cAAc,CAAC;KAC/B,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAQ;IAElC,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC;IAa3D;;;;OAIG;IACH,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM;IAgB7B;;;;OAIG;IACH,gBAAgB,CAAC,iBAAiB,CAAC,EAAE,MAAM;IAiB3C;;OAEG;IACH,oBAAoB;IAQpB;;OAEG;IACH,kBAAkB,CAAC,KAAK,EAAE,OAAO,IAAI,CAAC,MAAM;IAQ5C,QAAQ,CAAC,IAAI,EAAE,MAAM;IAIrB,WAAW,CAAC,aAAa,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM;IAI/C,MAAM,CAAC,SAAS;CAKjB;AAED,eAAe,MAAM,CAAC"}

package/components/router.js

@@ -0,0 +1,251 @@
+import { __decorate } from 'tslib';
+import { godown } from '@godown/element/decorators/godown.js';
+import { styles } from '@godown/element/decorators/styles.js';
+import { htmlSlot } from '@godown/element/directives/html-slot.js';
+import { RouteTree } from '@godown/element/tools/route-tree.js';
+import { css } from 'lit';
+import { state, property } from 'lit/decorators.js';
+import { GlobalStyle } from '../core/global-style.js';
+
+var Router_1;
+const protoName = "router";
+/**
+ * {@linkcode Router} has basic routing control.
+ *
+ * To switch routes, use `router-link component`.
+ *
+ * It has two methods to collect routes.
+ *
+ * 1. From field `routes`, an array, each elements require "path" and "component".
+ * 2. From child elements, which have the slot attribute for matching routes.
+ *
+ * If only the method 1 is used, set `type` to `"field"`.
+ *
+ * If only the method 2 is used, set `type` to `"slotted"`.
+ *
+ * `type` defaults to `"united"`, which will try method 1, then method 2.
+ *
+ * If no routes are matched, the default value (no named slot) will be rendered.
+ *
+ * @category navigation
+ */
+let Router = Router_1 = class Router extends GlobalStyle {
+    constructor() {
+        super(...arguments);
+        this.__fieldRouteTree = new RouteTree();
+        this.__slottedRouteTree = new RouteTree();
+        this.__cacheRecord = new Map();
+        /**
+         * Render result.
+         */
+        this.component = null;
+        /**
+         * Dynamic parameters record.
+         */
+        this.params = {};
+        /**
+         * Current pathname (equals to location.pathname).
+         */
+        this.pathname = "";
+        /**
+         * Path prefix.
+         */
+        this.baseURL = "";
+        /**
+         * Rendered content when there is no match.
+         */
+        this.default = htmlSlot();
+        /**
+         * The type of routing sources.
+         *
+         * If field, it won't collect the slot attribute of the child elements.
+         *
+         * This property should not be changed after the rendering is complete.
+         */
+        this.type = "united";
+        /**
+         * Cache accessed records.
+         *
+         * Emptied at each re-collection.
+         */
+        this.cache = false;
+        /**
+         * @param params value of useRouter()
+         * @param first whether this path is loaded for the first time.
+         */
+        this.routeChangeCallback = null;
+    }
+    set routes(value) {
+        this.__routes = value;
+        this.collectFieldRoutes(value);
+    }
+    get routes() {
+        return this.__routes;
+    }
+    clear() {
+        this.__cacheRecord.clear();
+    }
+    render() {
+        this.params = {};
+        if (this.cache) {
+            const cached = this.__cacheRecord.get(this.pathname);
+            if (cached) {
+                Object.assign(this, cached);
+                return this.component;
+            }
+        }
+        switch (this.type) {
+            case "field":
+                this.component = this.fieldComponent();
+                break;
+            case "slotted":
+                this.component = this.slottedComponent();
+                break;
+            default:
+                this.component = this.fieldComponent() ?? this.slottedComponent();
+        }
+        return this.component ?? this.default ?? null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        Router_1.routerInstances.add(this);
+        this.pathname = window.location.pathname;
+        if (this.type !== "field") {
+            const mutationObserver = new MutationObserver(this.collectSlottedRoutes);
+            mutationObserver.observe(this, {
+                attributeFilter: ["slot"],
+                attributes: true,
+                subtree: true,
+            });
+            this.collectSlottedRoutes();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        Router_1.routerInstances.delete(this);
+    }
+    useRouter() {
+        return {
+            pathname: this.pathname,
+            params: this.params,
+            path: this.path,
+            component: this.component,
+        };
+    }
+    updated(changedProperties) {
+        const shouldDispatch = changedProperties.has("pathname") || changedProperties.has("path");
+        if (shouldDispatch) {
+            const ur = this.useRouter();
+            const noRecord = !this.__cacheRecord.has(this.pathname);
+            if (noRecord) {
+                this.__cacheRecord.set(this.pathname, ur);
+            }
+            this.routeChangeCallback?.(ur, noRecord);
+            this.dispatchEvent(new CustomEvent("change", { detail: ur }));
+        }
+    }
+    /**
+     * Find components from {@linkcode __fieldRouteTree} matching query.
+     * @param query Query string.
+     * @returns Components or null.
+     */
+    fieldComponent(query) {
+        query ||= this.useWhich(this.pathname);
+        this.path = query;
+        if (!query) {
+            return null;
+        }
+        this.params = this.parseParams(this.path, this.pathname);
+        const route = this.routes.find((r) => r.path === query);
+        if (!route) {
+            return null;
+        }
+        return route.component;
+    }
+    /**
+     * Find components from {@linkcode __slottedRouteTree} matching query.
+     * @param query Query string.
+     * @returns Named slot element template result or null.
+     */
+    slottedComponent(usedRouteTemplate) {
+        const slottedPaths = this._slottedNames;
+        usedRouteTemplate ||= this.__slottedRouteTree.useWhich(this.pathname);
+        this.path = usedRouteTemplate;
+        if (!usedRouteTemplate) {
+            return null;
+        }
+        this.path = slottedPaths.find((s) => s === usedRouteTemplate);
+        if (!this.path) {
+            return null;
+        }
+        this.params = this.parseParams(usedRouteTemplate, this.pathname);
+        return htmlSlot(this.path);
+    }
+    /**
+     * Reset the route tree, clear cache, collect routes from child elements.
+     */
+    collectSlottedRoutes() {
+        this.__slottedRouteTree = new RouteTree();
+        this.clear();
+        this._slottedNames.forEach(slotName => {
+            this.__slottedRouteTree.insert(slotName);
+        });
+    }
+    /**
+     * Reset the route tree, clear cache, collect routes from value.
+     */
+    collectFieldRoutes(value) {
+        this.__fieldRouteTree = new RouteTree();
+        this.clear();
+        value.forEach(({ path }) => {
+            this.__fieldRouteTree.insert(path);
+        });
+    }
+    useWhich(path) {
+        return this.__fieldRouteTree.useWhich(this.baseURL + path);
+    }
+    parseParams(routeTemplate, path) {
+        return this.__fieldRouteTree.parseParams(path, routeTemplate);
+    }
+    static updateAll() {
+        this.routerInstances.forEach((i) => {
+            i.pathname = window.location.pathname;
+        });
+    }
+};
+Router.routerInstances = new Set();
+__decorate([
+    state()
+], Router.prototype, "component", void 0);
+__decorate([
+    state()
+], Router.prototype, "params", void 0);
+__decorate([
+    state()
+], Router.prototype, "path", void 0);
+__decorate([
+    property()
+], Router.prototype, "pathname", void 0);
+__decorate([
+    property()
+], Router.prototype, "baseURL", void 0);
+__decorate([
+    state()
+], Router.prototype, "default", void 0);
+__decorate([
+    property()
+], Router.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean })
+], Router.prototype, "cache", void 0);
+__decorate([
+    state()
+], Router.prototype, "routes", null);
+Router = Router_1 = __decorate([
+    godown(protoName),
+    styles(css `:host{display:contents}`)
+], Router);
+var Router$1 = Router;
+
+export { Router$1 as default };
+//# sourceMappingURL=router.js.map