godown 2.7.6 → 3.0.0-canary.0

package/components/carousel.js

@@ -0,0 +1,113 @@
+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 { htmlStyle } from '@godown/element/directives/html-style.js';
+import iconChevronLeft from '@godown/f7-icon/icons/chevron-left.js';
+import iconChevronRight from '@godown/f7-icon/icons/chevron-right.js';
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { GlobalStyle } from '../core/global-style.js';
+
+const protoName = "carousel";
+/**
+ * {@linkcode Carousel} make the content display as a carousel.
+ *
+ * When this component is `firstUpdated`,
+ * clone the first and last element and make the matching element visible when switching index.
+ *
+ * Child elements should maintain the same size.
+ *
+ * If no width, it will be the width of the first element.
+ *
+ * @category display
+ */
+let Carousel = class Carousel extends GlobalStyle {
+    constructor() {
+        super(...arguments);
+        /**
+         * The index of the element is displayed for the first time.
+         */
+        this.index = 0;
+        /**
+         * If autoChange > 0, the rotation will be automated.
+         */
+        this.autoChange = 0;
+    }
+    render() {
+        return [
+            html `<div part="root"><i part="prev" @click="${this.prev}">${iconChevronLeft()}</i><div part="move-root" style="transform:${`translateX(-${this.index + 1}00%)`}">${htmlSlot()}</div><i part="next" @click="${this.next}">${iconChevronRight()}</i></div>`,
+            htmlStyle(`:host{width:${this.width};}`),
+        ];
+    }
+    async firstUpdated() {
+        await this.updateComplete;
+        if (this.children.length) {
+            this.width ||= `${this.firstElementChild.offsetWidth}px`;
+            this._cloneFirst?.remove();
+            this._cloneLast?.remove();
+            this._cloneLast = this.firstElementChild.cloneNode(true);
+            this._cloneFirst = this.lastElementChild.cloneNode(true);
+            this.appendChild(this._cloneLast);
+            this.insertBefore(this._cloneFirst, this.firstElementChild);
+            this.show(this.index);
+        }
+        if (this.autoChange) {
+            this.intervalID = window.setInterval(() => {
+                this.next();
+            }, this.autoChange);
+        }
+    }
+    disconnectedCallback() {
+        clearInterval(this.intervalID);
+    }
+    show(i) {
+        this.index = i;
+    }
+    next() {
+        if (this.index === this.childElementCount - 3) {
+            this._doTranslateX("0", true);
+            this.show(0);
+        }
+        else {
+            this.show(this.index + 1);
+        }
+    }
+    prev() {
+        if (this.index === 0) {
+            this._doTranslateX(`-${this.childElementCount - 1}00%`, true);
+            this.show(this.children.length - 3);
+        }
+        else {
+            this.show(this.index - 1);
+        }
+    }
+    _doTranslateX(xValue, noTransition) {
+        this._moveRoot.style.transform = `translateX(${xValue})`;
+        if (noTransition) {
+            this._moveRoot.style.transition = `none`;
+        }
+        this._moveRoot.getBoundingClientRect();
+    }
+};
+__decorate([
+    property({ type: Number })
+], Carousel.prototype, "index", void 0);
+__decorate([
+    property({ type: Number })
+], Carousel.prototype, "autoChange", void 0);
+__decorate([
+    property()
+], Carousel.prototype, "width", void 0);
+__decorate([
+    part("move-root")
+], Carousel.prototype, "_moveRoot", void 0);
+Carousel = __decorate([
+    godown(protoName),
+    styles(css `:host{display:block;transition:.3s}[part=root]{overflow:hidden}[part=move-root],[part=root]{width:100%;display:flex;position:relative;transition:inherit}[part=next],[part=prev]{height:100%;width:1.5em;z-index:1;position:absolute;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}[part=prev]{left:0}[part=next]{right:0}slot::slotted(*){flex-shrink:0!important}`)
+], Carousel);
+var Carousel$1 = Carousel;
+
+export { Carousel$1 as default };
+//# sourceMappingURL=carousel.js.map

package/components/carousel.js.map

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

package/{web-components/details → components}/details.d.ts

@@ -1,8 +1,10 @@
-import GodownOpenable from "../../proto/super-openable.js";
+import SuperOpenable from "../core/super-openable.js";
 /**
- * {@linkcode Details} similar to details.
+ * {@linkcode Details} similar to <details>.
+ *
+ * @category display
  */
-export declare class Details extends GodownOpenable {
+declare class Details extends SuperOpenable {
     /**
      * If it is true, the summary event scope will fill the element.
      */

package/components/details.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"details.d.ts","sourceRoot":"","sources":["../src/components/details.ts"],"names":[],"mappings":"AAQA,OAAO,aAAa,MAAM,2BAA2B,CAAC;AAMtD;;;;GAIG;AACH,cAIM,OAAQ,SAAQ,aAAa;IACjC;;OAEG;IAEH,IAAI,UAAS;IACb;;OAEG;IAEH,OAAO,SAAM;IAGb,GAAG,EAAE,mBAAmB,CAAC;IAEzB,SAAS,CAAC,MAAM;CAGjB;AAED,eAAe,OAAO,CAAC"}

package/components/details.js

@@ -0,0 +1,50 @@
+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 svgCaretDown from '@godown/f7-icon/icons/chevron-down.js';
+import { css, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { scopePrefix } from '../core/global-style.js';
+import SuperOpenable from '../core/super-openable.js';
+
+const protoName = "details";
+const cssScope = scopePrefix(protoName);
+/**
+ * {@linkcode Details} similar to <details>.
+ *
+ * @category display
+ */
+let Details = class Details extends SuperOpenable {
+    constructor() {
+        super(...arguments);
+        /**
+         * If it is true, the summary event scope will fill the element.
+         */
+        this.fill = false;
+        /**
+         * Summary text.
+         */
+        this.summary = "";
+    }
+    render() {
+        return html `<dl part="root"><dt part="title" @click="${this._handelClick}"><span part="summary">${this.summary || htmlSlot("summary")} </span><span><i part="icon">${svgCaretDown()}</i></span></dt><dd part="details" @click="${this.fill ? () => this.toggle() : null}"><div style="min-height:0">${htmlSlot()}</div></dd></dl>`;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], Details.prototype, "fill", void 0);
+__decorate([
+    property()
+], Details.prototype, "summary", void 0);
+__decorate([
+    query("dd")
+], Details.prototype, "_dd", void 0);
+Details = __decorate([
+    godown(protoName),
+    styles(css `:host{${cssScope}--icon-deg-open:0deg;${cssScope}--icon-deg-close:90deg;${cssScope}--icon-deg:0deg;${cssScope}--icon-space:0.3em;${cssScope}--summary-direction:row;${cssScope}--transition:.3s;height:-moz-fit-content;height:fit-content;display:block;transition:var(${cssScope}--transition)}dl{height:100%;position:relative;overflow:hidden}dt{height:100%;display:flex;flex-wrap:nowrap;justify-content:space-between;background:inherit;align-items:center;flex-direction:var(${cssScope}--summary-direction)}dd{display:grid;overflow:hidden;grid-template-rows:0fr;transition:var(${cssScope}--transition);transition-property:grid-template-rows}i{display:flex;-webkit-backface-visibility:hidden;backface-visibility:hidden;padding:var(${cssScope}--icon-space);transition:var(${cssScope}--transition);transform:rotate(var(${cssScope}--icon-deg))}:host([open]) dd{grid-template-rows:1fr}:host([float]) dd{top:100%;position:absolute}i{transform:rotate(var(${cssScope}--icon-deg-close))}:host([open]) i{transform:rotate(var(${cssScope}--icon-deg-open))}`)
+], Details);
+var Details$1 = Details;
+
+export { Details$1 as default };
+//# sourceMappingURL=details.js.map

package/components/details.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"details.js","sources":["../src/components/details.ts"],"sourcesContent":null,"names":[],"mappings":";;;;;;;;;;AAUA,MAAM,SAAS,GAAG,SAAS,CAAC;AAE5B,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AAExC;;;;AAIG;AAKH,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,aAAa,CAAA;AAAnC,IAAA,WAAA,GAAA;;AACE;;AAEG;QAEH,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;AACb;;AAEG;QAEH,IAAO,CAAA,OAAA,GAAG,EAAE,CAAC;KAgBd;IAXW,MAAM,GAAA;AACd,QAAA,OAAO,IAAI,CAAA,CAAA,yCAAA,EACkB,IAAI,CAAC,YAAY,0BACnB,IAAI,CAAC,OAAO,IAAI,QAAQ,CAAC,SAAS,CAAC,CACnC,6BAAA,EAAA,YAAY,EAAE,CAEX,2CAAA,EAAA,IAAI,CAAC,IAAI,GAAG,MAAM,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,+BAClC,QAAQ,EAAE,kBAEtC,CAAC;KACR;CACF,CAAA;AArBC,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACf,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAKb,UAAA,CAAA;AADC,IAAA,QAAQ,EAAE;AACE,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGb,UAAA,CAAA;IADC,KAAK,CAAC,IAAI,CAAC;AACa,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAbrB,OAAO,GAAA,UAAA,CAAA;IAJZ,MAAM,CAAC,SAAS,CAAC;AACjB,IAAA,MAAM,CACL,GAAG,CAAA,CAAA,MAAA,EAAS,QAAQ,CAAwB,qBAAA,EAAA,QAAQ,CAA0B,uBAAA,EAAA,QAAQ,CAAmB,gBAAA,EAAA,QAAQ,CAAsB,mBAAA,EAAA,QAAQ,2BAA2B,QAAQ,CAAA,yFAAA,EAA4F,QAAQ,CAAA,mMAAA,EAAsM,QAAQ,CAAA,2FAAA,EAA8F,QAAQ,CAAA,8IAAA,EAAiJ,QAAQ,CAAgC,6BAAA,EAAA,QAAQ,CAAsC,mCAAA,EAAA,QAAQ,CAA4H,yHAAA,EAAA,QAAQ,CAA2D,wDAAA,EAAA,QAAQ,oBAAoB,CACrhC;AACK,CAAA,EAAA,OAAO,CA0BZ,CAAA;AAED,gBAAe,OAAO;;;;"}

package/components/dialog.d.ts

@@ -0,0 +1,33 @@
+import { HandlerEvent } from "@godown/element";
+import SuperOpenable, { type Direction9 } from "../core/super-openable.js";
+/**
+ * {@linkcode Dialog} similar to <dialog>.
+ *
+ * Like dialog, it listens for submit events and closes itself when the target method is "dialog".
+ *
+ * It listens for the keydown event and also closes itself when the {@linkcode key} contained in the key is pressed
+ *
+ * @category feedback
+ */
+declare class Dialog extends SuperOpenable {
+    direction: Direction9;
+    /**
+     * Enable modal, blocking event penetration.
+     */
+    modal: boolean;
+    /**
+     * Close key.
+     */
+    key: string;
+    private _modalInvoke;
+    protected render(): import("lit").TemplateResult<1>;
+    showModal(): void;
+    private _submitEvent;
+    private _keydownEvent;
+    protected updated(): void;
+    protected _handleKeydown(e: KeyboardEvent): void;
+    protected _handelSubmit(e: HandlerEvent<HTMLFormElement>): void;
+    close(): void;
+}
+export default Dialog;
+//# sourceMappingURL=dialog.d.ts.map

package/components/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../src/components/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAQ/C,OAAO,aAAa,EAAE,EAAE,KAAK,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAK3E;;;;;;;;GAQG;AACH,cAIM,MAAO,SAAQ,aAAa;IAEhC,SAAS,EAAE,UAAU,CAAY;IACjC;;OAEG;IAEH,KAAK,UAAS;IACd;;OAEG;IAEH,GAAG,SAAY;IAEf,OAAO,CAAC,YAAY,CAAU;IAE9B,SAAS,CAAC,MAAM;IAIhB,SAAS;IAQT,OAAO,CAAC,YAAY,CAAiD;IACrE,OAAO,CAAC,aAAa,CAAiD;IAEtE,SAAS,CAAC,OAAO;IAYjB,SAAS,CAAC,cAAc,CAAC,CAAC,EAAE,aAAa;IAQzC,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,YAAY,CAAC,eAAe,CAAC;IAMxD,KAAK;CAON;AAED,eAAe,MAAM,CAAC"}

package/components/dialog.js

@@ -0,0 +1,92 @@
+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 { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { scopePrefix, cssGlobalVars } from '../core/global-style.js';
+import SuperOpenable from '../core/super-openable.js';
+
+const protoName = "dialog";
+const cssScope = scopePrefix(protoName);
+/**
+ * {@linkcode Dialog} similar to <dialog>.
+ *
+ * Like dialog, it listens for submit events and closes itself when the target method is "dialog".
+ *
+ * It listens for the keydown event and also closes itself when the {@linkcode key} contained in the key is pressed
+ *
+ * @category feedback
+ */
+let Dialog = class Dialog extends SuperOpenable {
+    constructor() {
+        super(...arguments);
+        this.direction = "center";
+        /**
+         * Enable modal, blocking event penetration.
+         */
+        this.modal = false;
+        /**
+         * Close key.
+         */
+        this.key = "Escape";
+    }
+    render() {
+        return html `<div part="root"><div part="modal"></div><div part="container" direction="${this.direction}">${htmlSlot()}</div></div>`;
+    }
+    showModal() {
+        if (!this.modal) {
+            this.modal = true;
+            this._modalInvoke = true;
+        }
+        this.show();
+    }
+    updated() {
+        if (this.open) {
+            this._submitEvent = this.events.add(this, "submit", this._handelSubmit);
+            if (this.key) {
+                this._keydownEvent = this.events.add(document, "keydown", this._handleKeydown.bind(this));
+            }
+        }
+        else {
+            this._submitEvent = this.events.remove(this, "submit", this._submitEvent);
+            this._keydownEvent = this.events.remove(document, "keydown", this._keydownEvent);
+        }
+    }
+    _handleKeydown(e) {
+        e.preventDefault();
+        const keys = this.key.split(/[\s,]/);
+        if (keys.includes(e.key) || keys.includes(e.code)) {
+            this.close();
+        }
+    }
+    _handelSubmit(e) {
+        if (e.target.method === "dialog") {
+            this.close();
+        }
+    }
+    close() {
+        if (this._modalInvoke) {
+            this.modal = false;
+            this._modalInvoke = false;
+        }
+        this.open = false;
+    }
+};
+__decorate([
+    property()
+], Dialog.prototype, "direction", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Dialog.prototype, "modal", void 0);
+__decorate([
+    property()
+], Dialog.prototype, "key", void 0);
+Dialog = __decorate([
+    godown(protoName),
+    styles(css `:host{${cssScope}--background:none;${cssScope}--background-modal:var(${cssGlobalVars.background});${cssScope}--opacity-modal:0.2;background:var(${cssScope}--background);pointer-events:none;visibility:hidden;position:fixed;z-index:1;inset:0}:host([open]){visibility:visible}:host([open][modal]) [part=modal]{pointer-events:all;visibility:visible;opacity:var(${cssScope}--opacity-modal)}[part=modal]{visibility:hidden;opacity:0;width:100%;height:100%;position:absolute;background:var(${cssScope}--background-modal)}[part=root]{width:100%;height:100%;display:flex;position:relative;align-items:center;justify-content:center}[direction]{pointer-events:all;position:absolute}[direction^=top]{top:0}[direction^=bottom]{bottom:0}[direction$=right]{right:0}[direction$=left]{left:0}`)
+], Dialog);
+var Dialog$1 = Dialog;
+
+export { Dialog$1 as default };
+//# sourceMappingURL=dialog.js.map

package/components/dialog.js.map

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

package/components/divider.d.ts

@@ -0,0 +1,17 @@
+import { GlobalStyle } from "../core/global-style.js";
+/**
+ * {@linkcode Divider} similar to <hr>.
+ *
+ * This component does not render content.
+ *
+ * @category layout
+ */
+declare class Divider extends GlobalStyle {
+    /**
+     * Vertical display.
+     */
+    vertical: boolean;
+    connectedCallback(): void;
+}
+export default Divider;
+//# sourceMappingURL=divider.d.ts.map

package/components/divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../src/components/divider.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAItD;;;;;;GAMG;AACH,cAIM,OAAQ,SAAQ,WAAW;IAC/B;;OAEG;IAEH,QAAQ,UAAS;IAEjB,iBAAiB;CAGlB;AAED,eAAe,OAAO,CAAC"}

package/components/divider.js

@@ -0,0 +1,37 @@
+import { __decorate } from 'tslib';
+import { godown, styles } from '@godown/element/decorators/index.js';
+import { css } from 'lit';
+import { property } from 'lit/decorators.js';
+import { GlobalStyle } from '../core/global-style.js';
+
+const protoName = "divider";
+/**
+ * {@linkcode Divider} similar to <hr>.
+ *
+ * This component does not render content.
+ *
+ * @category layout
+ */
+let Divider = class Divider extends GlobalStyle {
+    constructor() {
+        super(...arguments);
+        /**
+         * Vertical display.
+         */
+        this.vertical = false;
+    }
+    connectedCallback() {
+        this.createRenderRoot();
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Divider.prototype, "vertical", void 0);
+Divider = __decorate([
+    godown(protoName),
+    styles(css `:host{width:100%;height:.05em;margin:auto;display:block;background:currentColor}:host([vertical]){width:.05em;height:max(1em,100%)}`)
+], Divider);
+var Divider$1 = Divider;
+
+export { Divider$1 as default };
+//# sourceMappingURL=divider.js.map

package/components/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sources":["../src/components/divider.ts"],"sourcesContent":null,"names":[],"mappings":";;;;;;AAMA,MAAM,SAAS,GAAG,SAAS,CAAC;AAE5B;;;;;;AAMG;AAKH,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,WAAW,CAAA;AAAjC,IAAA,WAAA,GAAA;;AACE;;AAEG;QAEH,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;KAKlB;IAHC,iBAAiB,GAAA;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;CACF,CAAA;AALC,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AALb,OAAO,GAAA,UAAA,CAAA;IAJZ,MAAM,CAAC,SAAS,CAAC;AACjB,IAAA,MAAM,CACL,GAAG,CAAA,CAAA,mIAAA,CAAqI,CACzI;AACK,CAAA,EAAA,OAAO,CAUZ,CAAA;AAED,gBAAe,OAAO;;;;"}

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

@@ -1,9 +1,19 @@
-import { ListenerFunc } from "../../lib/event-coll.js";
-import { GodownElement } from "../../proto/godown-element.js";
+import { EventListenerFunc } from "@godown/element/tools/events.js";
+import { GlobalStyle } from "../core/global-style.js";
 /**
  * {@linkcode Dragbox} does not extend beyond the range of {@linkcode Dragbox.offsetsWidth} and {@linkcode Dragbox.offsetsHeight}.
+ *
+ * @category wrapper
  */
-export declare class Dragbox extends GodownElement {
+declare class Dragbox extends GlobalStyle {
+    /**
+     * Width of (`this.offsetParent` or `document.body`).
+     */
+    get offsetsWidth(): number;
+    /**
+     * Height of (`this.offsetParent` or `document.body`).
+     */
+    get offsetsHeight(): number;
     drag: boolean;
     t: number;
     l: number;
@@ -20,8 +30,8 @@ export declare class Dragbox extends GodownElement {
     protected render(): import("lit").TemplateResult<1>;
     protected firstUpdated(): void;
     protected _handleDragStart(e: MouseEvent): void;
-    mouseMoveEvent: ListenerFunc;
-    mouseLeaveEvent: ListenerFunc;
+    _handleMouseMove: EventListenerFunc;
+    _handleMouseLeave: EventListenerFunc;
     protected _handleDragEnd(): void;
     protected _handleDrag(e: MouseEvent): void;
     reset(): void;

package/components/dragbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dragbox.d.ts","sourceRoot":"","sources":["../src/components/dragbox.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAIpE,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAItD;;;;GAIG;AACH,cAIM,OAAQ,SAAQ,WAAW;IAC/B;;OAEG;IACH,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED;;OAEG;IACH,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,IAAI,EAAE,OAAO,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IAEH,CAAC,SAAU;IACX;;OAEG;IAEH,CAAC,SAAU;IAEX,SAAS,CAAC,MAAM;IAIhB,SAAS,CAAC,YAAY;IAItB,SAAS,CAAC,gBAAgB,CAAC,CAAC,EAAE,UAAU;IAUxC,gBAAgB,EAAE,iBAAiB,CAAC;IACpC,iBAAiB,EAAE,iBAAiB,CAAC;IAErC,SAAS,CAAC,cAAc;IAMxB,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,UAAU;IAuBnC,KAAK;CAWN;AAED,eAAe,OAAO,CAAC"}

package/{web-components/wrapper → components}/dragbox.js

@@ -1,14 +1,18 @@
-import { __decorate } from "tslib";
-import { css, html, property } from "../../_deps.js";
-import { godown } from "../../decorators/godown.js";
-import styles from "../../decorators/styles.js";
-import { htmlSlot } from "../../lib/directives.js";
-import { GodownElement } from "../../proto/godown-element.js";
+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 { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { GlobalStyle } from '../core/global-style.js';
+
 const protoName = "dragbox";
 /**
  * {@linkcode Dragbox} does not extend beyond the range of {@linkcode Dragbox.offsetsWidth} and {@linkcode Dragbox.offsetsHeight}.
+ *
+ * @category wrapper
  */
-let Dragbox = class Dragbox extends GodownElement {
+let Dragbox = class Dragbox extends GlobalStyle {
     constructor() {
         super(...arguments);
         /**
@@ -20,6 +24,18 @@ let Dragbox = class Dragbox extends GodownElement {
          */
         this.y = "auto";
     }
+    /**
+     * Width of (`this.offsetParent` or `document.body`).
+     */
+    get offsetsWidth() {
+        return this.offsetParent?.clientWidth ?? document.body.offsetWidth;
+    }
+    /**
+     * Height of (`this.offsetParent` or `document.body`).
+     */
+    get offsetsHeight() {
+        return this.offsetParent?.clientHeight ?? document.body.offsetHeight;
+    }
     render() {
         return html `<div @mousedown="${this._handleDragStart}" @mouseup="${this._handleDragEnd}">${htmlSlot()}</div>`;
     }
@@ -32,13 +48,13 @@ let Dragbox = class Dragbox extends GodownElement {
         this.t = this.offsetTop;
         this.l = this.offsetLeft;
         this.drag = true;
-        this.mouseMoveEvent = this.addEvent(document, "mousemove", this._handleDrag.bind(this));
-        this.mouseLeaveEvent = this.addEvent(document, "mouseleave", this._handleDragEnd.bind(this));
+        this._handleMouseMove = this.events.add(document, "mousemove", this._handleDrag.bind(this));
+        this._handleMouseLeave = this.events.add(document, "mouseleave", this._handleDragEnd.bind(this));
     }
     _handleDragEnd() {
         this.drag = false;
-        this.removeEvent(document, "mousemove", this.mouseMoveEvent);
-        this.removeEvent(document, "mouseleave", this.mouseLeaveEvent);
+        this.events.remove(document, "mousemove", this._handleMouseMove);
+        this.events.remove(document, "mouseleave", this._handleMouseLeave);
     }
     _handleDrag(e) {
         if (!this.drag) {
@@ -86,20 +102,9 @@ __decorate([
 ], Dragbox.prototype, "y", void 0);
 Dragbox = __decorate([
     godown(protoName),
-    styles([
-        css `
-    :host {
-      position: absolute;
-      display: block;
-    }
-
-    :host(:active) {
-      -webkit-user-select: none;
-      user-select: none;
-    }
-  `,
-    ])
+    styles(css `:host{position:absolute;display:block}:host(:active){-webkit-user-select:none;user-select:none}`)
 ], Dragbox);
-export { Dragbox };
-export default Dragbox;
-//# sourceMappingURL=dragbox.js.map
+var Dragbox$1 = Dragbox;
+
+export { Dragbox$1 as default };
+//# sourceMappingURL=dragbox.js.map

package/components/dragbox.js.map

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

package/components/flex.d.ts

@@ -0,0 +1,31 @@
+import { GlobalStyle } from "../core/global-style.js";
+/**
+ * {@linkcode Flex} provides flex layout.
+ *
+ * @category layout
+ */
+declare class Flex extends GlobalStyle {
+    /**
+     * CSS property `flex-flow` (`flex-direction flex-wrap`).
+     */
+    flexFlow: string;
+    /**
+     * CSS property `gap`.
+     */
+    gap: string;
+    /**
+     * CSS property `justify-content`.
+     */
+    content: string;
+    /**
+     * CSS property `align-items`.
+     */
+    items: string;
+    /**
+     * If true, set flex-direction to "column".
+     */
+    vertical: boolean;
+    protected render(): import("lit").TemplateResult<1>[];
+}
+export default Flex;
+//# sourceMappingURL=flex.d.ts.map

package/components/flex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex.d.ts","sourceRoot":"","sources":["../src/components/flex.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAItD;;;;GAIG;AACH,cAEM,IAAK,SAAQ,WAAW;IAC5B;;OAEG;IAEH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IAEH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IAEH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IAEH,QAAQ,EAAE,OAAO,CAAC;IAElB,SAAS,CAAC,MAAM;CAgBjB;AAED,eAAe,IAAI,CAAC"}

package/components/flex.js

@@ -0,0 +1,55 @@
+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 { htmlStyle } from '@godown/element/directives/html-style.js';
+import { joinRules } from '@godown/element/tools/css.js';
+import { css } from 'lit';
+import { property } from 'lit/decorators.js';
+import { GlobalStyle } from '../core/global-style.js';
+
+const protoName = "flex";
+/**
+ * {@linkcode Flex} provides flex layout.
+ *
+ * @category layout
+ */
+let Flex = class Flex extends GlobalStyle {
+    render() {
+        return [
+            htmlSlot(),
+            htmlStyle(joinRules({
+                ":host": {
+                    gap: this.gap,
+                    "flex-flow": this.flexFlow,
+                    "flex-direction": this.vertical && "column",
+                    "align-items": this.items,
+                    "justify-content": this.content,
+                },
+            })),
+        ];
+    }
+};
+__decorate([
+    property({ attribute: "flex-flow" })
+], Flex.prototype, "flexFlow", void 0);
+__decorate([
+    property()
+], Flex.prototype, "gap", void 0);
+__decorate([
+    property()
+], Flex.prototype, "content", void 0);
+__decorate([
+    property()
+], Flex.prototype, "items", void 0);
+__decorate([
+    property({ type: Boolean })
+], Flex.prototype, "vertical", void 0);
+Flex = __decorate([
+    godown(protoName),
+    styles(css `:host{display:flex}`)
+], Flex);
+var Flex$1 = Flex;
+
+export { Flex$1 as default };
+//# sourceMappingURL=flex.js.map

package/components/flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex.js","sources":["../src/components/flex.ts"],"sourcesContent":null,"names":[],"mappings":";;;;;;;;;;AAUA,MAAM,SAAS,GAAG,MAAM,CAAC;AAEzB;;;;AAIG;AAGH,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,WAAW,CAAA;IA2BlB,MAAM,GAAA;QACd,OAAO;AACL,YAAA,QAAQ,EAAE;YACV,SAAS,CACP,SAAS,CAAC;AACR,gBAAA,OAAO,EAAE;oBACP,GAAG,EAAE,IAAI,CAAC,GAAG;oBACb,WAAW,EAAE,IAAI,CAAC,QAAQ;AAC1B,oBAAA,gBAAgB,EAAE,IAAI,CAAC,QAAQ,IAAI,QAAQ;oBAC3C,aAAa,EAAE,IAAI,CAAC,KAAK;oBACzB,iBAAiB,EAAE,IAAI,CAAC,OAAO;AAChC,iBAAA;AACF,aAAA,CAAC,CACH;SACF,CAAC;KACH;CACF,CAAA;AAtCC,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;AACpB,CAAA,EAAA,IAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAKjB,UAAA,CAAA;AADC,IAAA,QAAQ,EAAE;AACC,CAAA,EAAA,IAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAKZ,UAAA,CAAA;AADC,IAAA,QAAQ,EAAE;AACK,CAAA,EAAA,IAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAKhB,UAAA,CAAA;AADC,IAAA,QAAQ,EAAE;AACG,CAAA,EAAA,IAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAKd,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACV,CAAA,EAAA,IAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAzBd,IAAI,GAAA,UAAA,CAAA;IAFT,MAAM,CAAC,SAAS,CAAC;AACjB,IAAA,MAAM,CAAC,GAAG,CAAA,CAAA,mBAAA,CAAqB,CAAC;AAC3B,CAAA,EAAA,IAAI,CA2CT,CAAA;AAED,aAAe,IAAI;;;;"}

package/{web-components/form → components}/form.d.ts

@@ -1,11 +1,13 @@
-import { GodownElement } from "../../proto/godown-element.js";
+import { GlobalStyle } from "../core/global-style.js";
 /**
  * {@linkcode Form} Gets child element key-value object,
  * which will be nested if the child element is the same as this element.
  *
  * @slot - Child elements.
+ *
+ * @category form
  */
-export declare class Form<T = object> extends GodownElement {
+declare class Form<T = object> extends GlobalStyle {
     name: string;
     get value(): T;
     nameValue: () => [string, T];

package/components/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../src/components/form.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAItD;;;;;;;GAOG;AACH,cAIM,IAAI,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,WAAW;IAExC,IAAI,SAAM;IACV,IAAI,KAAK,IAAI,CAAC,CAEb;IAED,SAAS,QAiBI,CAAC,MAAM,EAAE,CAAC,CAAC,CAjBG;IAE3B,SAAS,CAAC,MAAM;IAIhB,KAAK;IAWL,SAAS,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAIxB,MAAM,CAAC,UAAU,CACf,QAAQ,EAAE,CAAC,OAAO,GAAG;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KACrC,CAAC,EAAE,GACH,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;CAoBvB;AAED,eAAe,IAAI,CAAC"}