godown 1.1.5 → 1.2.0

package/react/items.js

@@ -1,39 +1,39 @@
-"use client";
-import * as React from "react";
-import * as X from "../items/index.js";
-import { createComponent } from "@lit-labs/react";
-export const AvatarAnchor = createComponent({
-    tagName: "avatar-anchor",
-    elementClass: X.AvatarAnchor,
-    react: React,
-});
-export const BaseButton = createComponent({
-    tagName: "base-button",
-    elementClass: X.BaseButton,
-    react: React,
-});
-export const AlertItem = createComponent({
-    tagName: "alert-item",
-    elementClass: X.AlertItem,
-    react: React,
-});
-export const DialogItem = createComponent({
-    tagName: "dialog-item",
-    elementClass: X.DialogItem,
-    react: React,
-});
-export const LinkAnchor = createComponent({
-    tagName: "link-a",
-    elementClass: X.LinkAnchor,
-    react: React,
-});
-export const LoadTrack = createComponent({
-    tagName: "load-track",
-    elementClass: X.LoadTrack,
-    react: React,
-});
-export const SuperAnchor = createComponent({
-    tagName: "super-a",
-    elementClass: X.SuperAnchor,
-    react: React,
-});
+"use client";
+import * as React from "react";
+import * as X from "../items/index.js";
+import { createComponent } from "@lit/react";
+export const AvatarAnchor = createComponent({
+    tagName: "avatar-anchor",
+    elementClass: X.AvatarAnchor,
+    react: React,
+});
+export const BaseButton = createComponent({
+    tagName: "base-button",
+    elementClass: X.BaseButton,
+    react: React,
+});
+export const AlertItem = createComponent({
+    tagName: "alert-item",
+    elementClass: X.AlertItem,
+    react: React,
+});
+export const DialogItem = createComponent({
+    tagName: "dialog-item",
+    elementClass: X.DialogItem,
+    react: React,
+});
+export const LinkAnchor = createComponent({
+    tagName: "link-a",
+    elementClass: X.LinkAnchor,
+    react: React,
+});
+export const LoadTrack = createComponent({
+    tagName: "load-track",
+    elementClass: X.LoadTrack,
+    react: React,
+});
+export const SuperAnchor = createComponent({
+    tagName: "super-a",
+    elementClass: X.SuperAnchor,
+    react: React,
+});

package/react/layout.d.ts

@@ -1,7 +1,7 @@
-import * as X from "../layout/index.js";
-export declare const NavLayout: import("@lit-labs/react").ReactWebComponent<X.NavLayout, {}>;
-export declare const AsideNav: import("@lit-labs/react").ReactWebComponent<X.NavAside, {}>;
-export declare const DivLine: import("@lit-labs/react").ReactWebComponent<X.DivLine, {}>;
-export declare const FlexFlow: import("@lit-labs/react").ReactWebComponent<X.FlexFlow, {}>;
-export declare const DragBox: import("@lit-labs/react").ReactWebComponent<X.DragBox, {}>;
+import * as X from "../layout/index.js";
+export declare const NavLayout: import("@lit/react").ReactWebComponent<X.NavLayout, {}>;
+export declare const AsideNav: import("@lit/react").ReactWebComponent<X.NavAside, {}>;
+export declare const DivLine: import("@lit/react").ReactWebComponent<X.DivLine, {}>;
+export declare const FlexFlow: import("@lit/react").ReactWebComponent<X.FlexFlow, {}>;
+export declare const DragBox: import("@lit/react").ReactWebComponent<X.DragBox, {}>;
 //# sourceMappingURL=layout.d.ts.map

package/react/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/react/layout.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,CAAC,MAAM,oBAAoB,CAAC;AAExC,eAAO,MAAM,SAAS,8DAIpB,CAAC;AACH,eAAO,MAAM,QAAQ,6DAInB,CAAC;AACH,eAAO,MAAM,OAAO,4DAIlB,CAAC;AACH,eAAO,MAAM,QAAQ,6DAInB,CAAC;AACH,eAAO,MAAM,OAAO,4DAIlB,CAAC"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/react/layout.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,CAAC,MAAM,oBAAoB,CAAC;AAExC,eAAO,MAAM,SAAS,yDAIpB,CAAC;AACH,eAAO,MAAM,QAAQ,wDAInB,CAAC;AACH,eAAO,MAAM,OAAO,uDAIlB,CAAC;AACH,eAAO,MAAM,QAAQ,wDAInB,CAAC;AACH,eAAO,MAAM,OAAO,uDAIlB,CAAC"}

package/react/layout.js

@@ -1,29 +1,29 @@
-"use client";
-import * as React from "react";
-import * as X from "../layout/index.js";
-import { createComponent } from "@lit-labs/react";
-export const NavLayout = createComponent({
-    tagName: "nav-layout",
-    elementClass: X.NavLayout,
-    react: React,
-});
-export const AsideNav = createComponent({
-    tagName: "nav-aside",
-    elementClass: X.NavAside,
-    react: React,
-});
-export const DivLine = createComponent({
-    tagName: "div-line",
-    elementClass: X.DivLine,
-    react: React,
-});
-export const FlexFlow = createComponent({
-    tagName: "flex-flow",
-    elementClass: X.FlexFlow,
-    react: React,
-});
-export const DragBox = createComponent({
-    tagName: "drag-box",
-    elementClass: X.DragBox,
-    react: React,
-});
+"use client";
+import * as React from "react";
+import * as X from "../layout/index.js";
+import { createComponent } from "@lit/react";
+export const NavLayout = createComponent({
+    tagName: "nav-layout",
+    elementClass: X.NavLayout,
+    react: React,
+});
+export const AsideNav = createComponent({
+    tagName: "nav-aside",
+    elementClass: X.NavAside,
+    react: React,
+});
+export const DivLine = createComponent({
+    tagName: "div-line",
+    elementClass: X.DivLine,
+    react: React,
+});
+export const FlexFlow = createComponent({
+    tagName: "flex-flow",
+    elementClass: X.FlexFlow,
+    react: React,
+});
+export const DragBox = createComponent({
+    tagName: "drag-box",
+    elementClass: X.DragBox,
+    react: React,
+});

package/react/view.d.ts

@@ -1,7 +1,7 @@
-import * as X from "../view/index.js";
-export declare const DetailsExpand: import("@lit-labs/react").ReactWebComponent<X.DetailsExpand, {}>;
-export declare const DownDrop: import("@lit-labs/react").ReactWebComponent<X.DownDrop, {}>;
-export declare const MenuList: import("@lit-labs/react").ReactWebComponent<X.MenuList, {}>;
-export declare const RouteView: import("@lit-labs/react").ReactWebComponent<X.RouteView, {}>;
-export declare const ScrollX: import("@lit-labs/react").ReactWebComponent<X.ScrollX, {}>;
+import * as X from "../view/index.js";
+export declare const DetailsExpand: import("@lit/react").ReactWebComponent<X.DetailsExpand, {}>;
+export declare const DownDrop: import("@lit/react").ReactWebComponent<X.DownDrop, {}>;
+export declare const MenuList: import("@lit/react").ReactWebComponent<X.MenuList, {}>;
+export declare const RouteView: import("@lit/react").ReactWebComponent<X.RouteView, {}>;
+export declare const ScrollX: import("@lit/react").ReactWebComponent<X.ScrollX, {}>;
 //# sourceMappingURL=view.d.ts.map

package/react/view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../src/react/view.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,CAAC,MAAM,kBAAkB,CAAC;AAEtC,eAAO,MAAM,aAAa,kEAIxB,CAAC;AACH,eAAO,MAAM,QAAQ,6DAInB,CAAC;AACH,eAAO,MAAM,QAAQ,6DAInB,CAAC;AACH,eAAO,MAAM,SAAS,8DAIpB,CAAC;AACH,eAAO,MAAM,OAAO,4DAIlB,CAAC"}
+{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../src/react/view.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,CAAC,MAAM,kBAAkB,CAAC;AAEtC,eAAO,MAAM,aAAa,6DAIxB,CAAC;AACH,eAAO,MAAM,QAAQ,wDAInB,CAAC;AACH,eAAO,MAAM,QAAQ,wDAInB,CAAC;AACH,eAAO,MAAM,SAAS,yDAIpB,CAAC;AACH,eAAO,MAAM,OAAO,uDAIlB,CAAC"}

package/react/view.js

@@ -1,29 +1,29 @@
-"use client";
-import * as React from "react";
-import * as X from "../view/index.js";
-import { createComponent } from "@lit-labs/react";
-export const DetailsExpand = createComponent({
-    tagName: "details-expand",
-    elementClass: X.DetailsExpand,
-    react: React,
-});
-export const DownDrop = createComponent({
-    tagName: "down-drop",
-    elementClass: X.DownDrop,
-    react: React,
-});
-export const MenuList = createComponent({
-    tagName: "menu-list",
-    elementClass: X.MenuList,
-    react: React,
-});
-export const RouteView = createComponent({
-    tagName: "route-view",
-    elementClass: X.RouteView,
-    react: React,
-});
-export const ScrollX = createComponent({
-    tagName: "scroll-x",
-    elementClass: X.ScrollX,
-    react: React,
-});
+"use client";
+import * as React from "react";
+import * as X from "../view/index.js";
+import { createComponent } from "@lit/react";
+export const DetailsExpand = createComponent({
+    tagName: "details-expand",
+    elementClass: X.DetailsExpand,
+    react: React,
+});
+export const DownDrop = createComponent({
+    tagName: "down-drop",
+    elementClass: X.DownDrop,
+    react: React,
+});
+export const MenuList = createComponent({
+    tagName: "menu-list",
+    elementClass: X.MenuList,
+    react: React,
+});
+export const RouteView = createComponent({
+    tagName: "route-view",
+    elementClass: X.RouteView,
+    react: React,
+});
+export const ScrollX = createComponent({
+    tagName: "scroll-x",
+    elementClass: X.ScrollX,
+    react: React,
+});

package/view/details-expand.d.ts

@@ -1,19 +1,20 @@
-import STD from "./std.js";
-export declare class DetailsExpand extends STD {
-    summary: string;
-    reverse: boolean;
-    open: boolean;
-    fill: boolean;
-    float: boolean;
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResultGroup[];
-    render(): import("lit-html").TemplateResult<1>;
-    firstUpdated(): void;
-    toggle(to?: boolean): void;
-}
-export default DetailsExpand;
-declare global {
-    interface HTMLElementTagNameMap {
-        "details-expand": DetailsExpand;
-    }
-}
+import { CSSResultGroup } from "../deps.js";
+import STD from "./std.js";
+export declare class DetailsExpand extends STD {
+    summary: string;
+    reverse: boolean;
+    open: boolean;
+    fill: boolean;
+    float: boolean;
+    static styles: CSSResultGroup[];
+    render(): import("lit").TemplateResult<1>;
+    firstUpdated(): void;
+    toggle(to?: boolean): void;
+}
+export default DetailsExpand;
+declare global {
+    interface HTMLElementTagNameMap {
+        "details-expand": DetailsExpand;
+    }
+}
 //# sourceMappingURL=details-expand.d.ts.map

package/view/details-expand.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"details-expand.d.ts","sourceRoot":"","sources":["../../src/view/details-expand.ts"],"names":[],"mappings":"AACA,OAAO,GAAmB,MAAM,UAAU,CAAC;AAC3C,qBACa,aAAc,SAAQ,GAAG;IACxB,OAAO,EAAE,MAAM,CAAC;IACC,OAAO,UAAS;IACD,IAAI,UAAS;IAC5B,IAAI,UAAS;IACb,KAAK,UAAS;IAC3C,MAAM,CAAC,MAAM,8DA4BX;IACF,MAAM;IAWN,YAAY;IAGZ,MAAM,CAAC,EAAE,UAAa;CAIvB;AACD,eAAe,aAAa,CAAC;AAC7B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}
+{"version":3,"file":"details-expand.d.ts","sourceRoot":"","sources":["../../src/view/details-expand.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,cAAc,EAAE,MAAM,YAAY,CAAC;AACzE,OAAO,GAAmB,MAAM,UAAU,CAAC;AAC3C,qBACa,aAAc,SAAQ,GAAG;IACxB,OAAO,EAAE,MAAM,CAAC;IACC,OAAO,UAAS;IACD,IAAI,UAAS;IAC5B,IAAI,UAAS;IACb,KAAK,UAAS;IAC3C,MAAM,CAAC,MAAM,mBA4BS;IACtB,MAAM;IAWN,YAAY;IAGZ,MAAM,CAAC,EAAE,UAAa;CAIvB;AACD,eAAe,aAAa,CAAC;AAC7B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

package/view/details-expand.js

@@ -1,20 +1,20 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, css, property, define } from "../deps.js";
-import STD, { DLsharecss } from "./std.js";
-let DetailsExpand = class DetailsExpand extends STD {
-    constructor() {
-        super(...arguments);
-        this.reverse = false;
-        this.open = false;
-        this.fill = false;
-        this.float = false;
-    }
-    render() {
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, css, property, define } from "../deps.js";
+import STD, { DLsharecss } from "./std.js";
+let DetailsExpand = class DetailsExpand extends STD {
+    constructor() {
+        super(...arguments);
+        this.reverse = false;
+        this.open = false;
+        this.fill = false;
+        this.float = false;
+    }
+    render() {
         return html `<dl>
       <dt ?open=${this.open} @click=${() => this.toggle()} style="flex-direction:row${this.reverse ? "-reverse" : ""}">
         <span>${this.summary}<slot name="summary"></slot></span>
@@ -23,20 +23,20 @@ let DetailsExpand = class DetailsExpand extends STD {
       <dd ?open=${this.open} ?float=${this.float}>
         <section><slot></slot></section>
       </dd>
-    </dl>`;
-    }
-    firstUpdated() {
-        if (this.fill)
-            this.shadowRoot.querySelector("dd").addEventListener("click", () => this.toggle());
-    }
-    toggle(to = !this.open) {
-        this.open = to;
-        this.dispatchEvent(new CustomEvent("change", { detail: this.open }));
-    }
-};
-DetailsExpand.styles = [
-    STD.styles,
-    DLsharecss,
+    </dl>`;
+    }
+    firstUpdated() {
+        if (this.fill)
+            this.shadowRoot.querySelector("dd").addEventListener("click", () => this.toggle());
+    }
+    toggle(to = !this.open) {
+        this.open = to;
+        this.dispatchEvent(new CustomEvent("change", { detail: this.open }));
+    }
+};
+DetailsExpand.styles = [
+    STD.styles,
+    DLsharecss,
     css `
       dl {
         height: 100%;
@@ -61,25 +61,25 @@ DetailsExpand.styles = [
         top: 100%;
         position: absolute;
       }
-    `,
-];
-__decorate([
-    property()
-], DetailsExpand.prototype, "summary", void 0);
-__decorate([
-    property({ type: Boolean })
-], DetailsExpand.prototype, "reverse", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], DetailsExpand.prototype, "open", void 0);
-__decorate([
-    property({ type: Boolean })
-], DetailsExpand.prototype, "fill", void 0);
-__decorate([
-    property({ type: Boolean })
-], DetailsExpand.prototype, "float", void 0);
-DetailsExpand = __decorate([
-    define("details-expand")
-], DetailsExpand);
-export { DetailsExpand };
-export default DetailsExpand;
+    `,
+];
+__decorate([
+    property()
+], DetailsExpand.prototype, "summary", void 0);
+__decorate([
+    property({ type: Boolean })
+], DetailsExpand.prototype, "reverse", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DetailsExpand.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean })
+], DetailsExpand.prototype, "fill", void 0);
+__decorate([
+    property({ type: Boolean })
+], DetailsExpand.prototype, "float", void 0);
+DetailsExpand = __decorate([
+    define("details-expand")
+], DetailsExpand);
+export { DetailsExpand };
+export default DetailsExpand;

package/view/down-drop.d.ts

@@ -1,19 +1,20 @@
-import STD from "../layout/std.js";
-export declare class DownDrop extends STD {
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResultGroup[];
-    _div: HTMLDivElement;
-    _timer: any;
-    render(): import("lit-html").TemplateResult<1>;
-    firstUpdated(): Promise<void>;
-    resize(): void;
-    close(): void;
-    open(): void;
-    toggle(): void;
-}
-export default DownDrop;
-declare global {
-    interface HTMLElementTagNameMap {
-        "down-drop": DownDrop;
-    }
-}
+import { CSSResultGroup } from "../deps.js";
+import STD from "../layout/std.js";
+export declare class DownDrop extends STD {
+    static styles: CSSResultGroup[];
+    _div: HTMLDivElement;
+    _timer: any;
+    render(): import("lit").TemplateResult<1>;
+    firstUpdated(): Promise<void>;
+    resize(): void;
+    close(): void;
+    open(): void;
+    toggle(): void;
+}
+export default DownDrop;
+declare global {
+    interface HTMLElementTagNameMap {
+        "down-drop": DownDrop;
+    }
+}
 //# sourceMappingURL=down-drop.d.ts.map

package/view/down-drop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"down-drop.d.ts","sourceRoot":"","sources":["../../src/view/down-drop.ts"],"names":[],"mappings":"AACA,OAAO,GAAG,MAAM,kBAAkB,CAAC;AACnC,qBACa,QAAS,SAAQ,GAAG;IAC/B,MAAM,CAAC,MAAM,8DA0BX;IACY,IAAI,EAAE,cAAc,CAAC;IACnC,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM;IAOA,YAAY;IAkBlB,MAAM;IAcN,KAAK;IAIL,IAAI;IAIJ,MAAM;CAGP;AACD,eAAe,QAAQ,CAAC;AACxB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"down-drop.d.ts","sourceRoot":"","sources":["../../src/view/down-drop.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,cAAc,EAAE,MAAM,YAAY,CAAC;AACtE,OAAO,GAAG,MAAM,kBAAkB,CAAC;AACnC,qBACa,QAAS,SAAQ,GAAG;IAC/B,MAAM,CAAC,MAAM,mBA0BS;IACR,IAAI,EAAE,cAAc,CAAC;IACnC,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM;IAOA,YAAY;IAkBlB,MAAM;IAcN,KAAK;IAIL,IAAI;IAIJ,MAAM;CAGP;AACD,eAAe,QAAQ,CAAC;AACxB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/view/down-drop.js

@@ -1,68 +1,68 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, css, query, define } from "../deps.js";
-import STD from "../layout/std.js";
-let DownDrop = class DownDrop extends STD {
-    render() {
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, css, query, define } from "../deps.js";
+import STD from "../layout/std.js";
+let DownDrop = class DownDrop extends STD {
+    render() {
         return html `<main>
       <slot name="hover"></slot>
       <slot name="focus" @click=${this.toggle}></slot>
       <div style="transform:translateX(0)"><slot></slot></div>
-    </main>`;
-    }
-    async firstUpdated() {
-        if (this.querySelector(`[slot="focus"]`)) {
-            document.addEventListener("click", (e) => {
-                if (!this.contains(e.target)) {
-                    this.close();
-                }
-            });
-        }
-        await this.updateComplete;
-        this.resize();
-        window.addEventListener("resize", () => {
-            clearTimeout(this._timer);
-            this._timer = setTimeout(() => {
-                this._div.style.transform = "translateX(0)";
-                this.resize();
-            }, 250);
-        });
-    }
-    resize() {
-        var _a;
-        const offsets = ((_a = this.offsetParent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || document.body.getBoundingClientRect();
-        const divLeft = this._div.getBoundingClientRect().left;
-        const divRight = this._div.getBoundingClientRect().right;
-        const RightWidth = offsets.width - (divRight - offsets.x);
-        const LeftWidth = offsets.width - (offsets.right - divLeft);
-        if (divLeft < 0) {
-            this._div.style.transform = `translateX(${-LeftWidth}px)`;
-        }
-        else if (divRight > offsets.right) {
-            this._div.style.transform = `translateX(${RightWidth}px)`;
-        }
-        else {
-            this._div.style.transform = "translateX(0)";
-        }
-    }
-    close() {
-        this._div.style.visibility = "hidden";
-        this.dispatchEvent(new CustomEvent("change", { detail: false }));
-    }
-    open() {
-        this._div.style.visibility = "visible";
-        this.dispatchEvent(new CustomEvent("change", { detail: true }));
-    }
-    toggle() {
-        this._div.style.visibility === "visible" ? this.close() : this.open();
-    }
-};
-DownDrop.styles = [
-    STD.styles,
+    </main>`;
+    }
+    async firstUpdated() {
+        if (this.querySelector(`[slot="focus"]`)) {
+            document.addEventListener("click", (e) => {
+                if (!this.contains(e.target)) {
+                    this.close();
+                }
+            });
+        }
+        await this.updateComplete;
+        this.resize();
+        window.addEventListener("resize", () => {
+            clearTimeout(this._timer);
+            this._timer = setTimeout(() => {
+                this._div.style.transform = "translateX(0)";
+                this.resize();
+            }, 250);
+        });
+    }
+    resize() {
+        var _a;
+        const offsets = ((_a = this.offsetParent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || document.body.getBoundingClientRect();
+        const divLeft = this._div.getBoundingClientRect().left;
+        const divRight = this._div.getBoundingClientRect().right;
+        const RightWidth = offsets.width - (divRight - offsets.x);
+        const LeftWidth = offsets.width - (offsets.right - divLeft);
+        if (divLeft < 0) {
+            this._div.style.transform = `translateX(${-LeftWidth}px)`;
+        }
+        else if (divRight > offsets.right) {
+            this._div.style.transform = `translateX(${RightWidth}px)`;
+        }
+        else {
+            this._div.style.transform = "translateX(0)";
+        }
+    }
+    close() {
+        this._div.style.visibility = "hidden";
+        this.dispatchEvent(new CustomEvent("change", { detail: false }));
+    }
+    open() {
+        this._div.style.visibility = "visible";
+        this.dispatchEvent(new CustomEvent("change", { detail: true }));
+    }
+    toggle() {
+        this._div.style.visibility === "visible" ? this.close() : this.open();
+    }
+};
+DownDrop.styles = [
+    STD.styles,
     css `
       :host {
         height: 100%;
@@ -86,13 +86,13 @@ DownDrop.styles = [
       div:hover {
         visibility: visible;
       }
-    `,
-];
-__decorate([
-    query("div")
-], DownDrop.prototype, "_div", void 0);
-DownDrop = __decorate([
-    define("down-drop")
-], DownDrop);
-export { DownDrop };
-export default DownDrop;
+    `,
+];
+__decorate([
+    query("div")
+], DownDrop.prototype, "_div", void 0);
+DownDrop = __decorate([
+    define("down-drop")
+], DownDrop);
+export { DownDrop };
+export default DownDrop;

package/view/index.d.ts

@@ -1,6 +1,6 @@
-export * from "./details-expand.js";
-export * from "./down-drop.js";
-export * from "./menu-list.js";
-export * from "./route-view.js";
-export * from "./scroll-x.js";
+export * from "./details-expand.js";
+export * from "./down-drop.js";
+export * from "./menu-list.js";
+export * from "./route-view.js";
+export * from "./scroll-x.js";
 //# sourceMappingURL=index.d.ts.map

package/view/index.js

@@ -1,5 +1,5 @@
-export * from "./details-expand.js";
-export * from "./down-drop.js";
-export * from "./menu-list.js";
-export * from "./route-view.js";
-export * from "./scroll-x.js";
+export * from "./details-expand.js";
+export * from "./down-drop.js";
+export * from "./menu-list.js";
+export * from "./route-view.js";
+export * from "./scroll-x.js";