godown 2.7.4 → 2.7.6

package/web-components/text/typewriter.js.map

@@ -1 +1 @@
-{"version":3,"file":"typewriter.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/text/typewriter.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, property, type PropertyValueMap, query, state } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { random } from \"../../lib/utils.js\";\nimport { createScope, GodownElement } from \"../../supers/root.js\";\n\nconst defineName = \"typewriter\";\nconst cssvarScope = createScope(defineName);\n\n/**\n * {@linkcode Typewriter} renders a typewriter effect to text.\n */\n@define(defineName)\nexport class Typewriter extends GodownElement {\n  /**\n   * Raw text.\n   */\n  @property() text = \"\";\n  /**\n   * Start immediately after {@linkcode Typewriter.firstUpdated}.\n   */\n  @property({ type: Boolean }) stopped = false;\n  /**\n   * If true, hide the cursor\n   */\n  @property({ type: Boolean }) ended = false;\n  /**\n   * Maximum random time.\n   */\n  @property({ type: Number }) max = 100;\n  /**\n   * Minimum random time.\n   */\n  @property({ type: Number }) min = 50;\n  /**\n   * Fixed time.\n   */\n  @property({ type: Number }) delay = 0;\n  /**\n   * The index at the beginning.\n   */\n  @property({ type: Number }) index = 0;\n  /**\n   * Internal text.\n   */\n  @state() content = \"\";\n\n  timeoutID: number;\n  @query(\"i\") _i: HTMLElement;\n\n  /**\n   * {@linkcode Typewriter.text} length.\n   */\n  get len() {\n    return this.text.length;\n  }\n\n  static styles = [\n    css`\n      :host {\n        ${cssvarScope}--cursor-width: .05em;\n        font-family: monospace;\n        white-space: nowrap;\n      }\n\n      i {\n        border-right: var(${cssvarScope}--cursor-width) solid;\n        margin-left: 0.02em;\n        animation: s 1.5s steps(1) infinite;\n      }\n\n      @keyframes s {\n        0% {\n          border-color: currentColor;\n        }\n        50% {\n          border-color: transparent;\n        }\n      }\n\n      slot {\n        display: none;\n      }\n\n      .hidden {\n        visibility: hidden;\n      }\n    `,\n  ];\n\n  protected render(): HTMLTemplate {\n    return html`${htmlSlot()}${this.content}<i class=\"${(this.ended && \"hidden\") || \"\"}\"></i>`;\n  }\n\n  protected firstUpdated() {\n    if (!this.text) {\n      this.text = this.assignedNodes[0]?.textContent.trim() || \"\";\n    }\n    if (!this.stopped && this.len) {\n      this.write();\n    }\n  }\n\n  protected updated(changedProperties: PropertyValueMap<this>) {\n    if (changedProperties.has(\"index\")) {\n      this.dispatchEvent(new CustomEvent(this.index === this.len ? \"done\" : \"write\", { detail: this.content }));\n    }\n  }\n\n  write(at = this.index) {\n    this.content = this.text.slice(0, at + 1);\n    const timeout = this.delay || random(this.max, this.min);\n    this.timeoutID = setTimeout(() => {\n      const nx = at + 1;\n      if (nx <= this.len) {\n        this.index = nx;\n        this.write();\n      }\n    }, timeout);\n  }\n\n  stop() {\n    clearTimeout(this.timeoutID);\n  }\n\n  end() {\n    this.ended = true;\n  }\n}\n\nexport default Typewriter;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"typewriter-text\": Typewriter;\n    \"g-typewriter\": Typewriter;\n  }\n}\n"]}
+{"version":3,"file":"typewriter.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/text/typewriter.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAyB,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAC1F,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,MAAM,SAAS,GAAG,YAAY,CAAC;AAC/B,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AAExC;;GAEG;AAkCI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,aAAa;IAAtC;;QACL;;WAEG;QACS,SAAI,GAAG,EAAE,CAAC;QACtB;;WAEG;QAC0B,YAAO,GAAG,KAAK,CAAC;QAC7C;;WAEG;QAC0B,UAAK,GAAG,KAAK,CAAC;QAC3C;;WAEG;QACyB,QAAG,GAAG,GAAG,CAAC;QACtC;;WAEG;QACyB,QAAG,GAAG,EAAE,CAAC;QACrC;;WAEG;QACyB,UAAK,GAAG,CAAC,CAAC;QACtC;;WAEG;QACyB,UAAK,GAAG,CAAC,CAAC;QACtC;;WAEG;QACM,YAAO,GAAG,EAAE,CAAC;IAkDxB,CAAC;IA7CC;;OAEG;IACH,IAAI,GAAG;QACL,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;IAC1B,CAAC;IAES,MAAM;QACd,OAAO,IAAI,CAAA,GAAG,QAAQ,EAAE,GAAG,IAAI,CAAC,OAAO,2BAA2B,CAAC,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IAC3G,CAAC;IAES,YAAY;QACpB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC;QAC9D,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YAC9B,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAES,OAAO,CAAC,iBAAyC;QACzD,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QAC5G,CAAC;IACH,CAAC;IAED,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC;QAC1C,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;QACzD,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;YAC/B,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;YAClB,IAAI,EAAE,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;gBACnB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;gBAChB,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,CAAC;QACH,CAAC,EAAE,OAAO,CAAC,CAAC;IACd,CAAC;IAED,IAAI;QACF,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC/B,CAAC;IAED,GAAG;QACD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;IACpB,CAAC;CACF,CAAA;AA9Ea;IAAX,QAAQ,EAAE;wCAAW;AAIO;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAiB;AAIhB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCAAe;AAIf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAW;AAIV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAU;AAIT;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAW;AAIV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAW;AAI7B;IAAR,KAAK,EAAE;2CAAc;AAGV;IAAX,KAAK,CAAC,GAAG,CAAC;sCAAiB;AAnCjB,UAAU;IAjCtB,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CAAC;QACN,GAAG,CAAA;;UAEK,QAAQ;;;;;;4BAMU,QAAQ;;;;;;;;;;;;;;;;;;;;;GAqBjC;KACF,CAAC;GACW,UAAU,CAkFtB;;AAED,eAAe,UAAU,CAAC","sourcesContent":["import { css, html, property, type PropertyValueMap, query, state } from \"../../_deps.js\";\nimport { godown } from \"../../decorators/godown.js\";\nimport { styles } from \"../../decorators/styles.js\";\nimport { htmlSlot } from \"../../lib/directives.js\";\nimport { random } from \"../../lib/utils.js\";\nimport { GodownElement } from \"../../proto/godown-element.js\";\nimport { createScope } from \"../../styles/global.js\";\n\nconst protoName = \"typewriter\";\nconst cssScope = createScope(protoName);\n\n/**\n * {@linkcode Typewriter} renders a typewriter effect to text.\n */\n@godown(protoName)\n@styles([\n  css`\n    :host {\n      --${cssScope}--cursor-width: .05em;\n      font-family: monospace;\n      white-space: nowrap;\n    }\n\n    i {\n      border-right: var(--${cssScope}--cursor-width) solid;\n      margin-left: 0.02em;\n      animation: s 1.5s steps(1) infinite;\n    }\n\n    @keyframes s {\n      0% {\n        border-color: currentColor;\n      }\n      50% {\n        border-color: transparent;\n      }\n    }\n\n    slot {\n      display: none;\n    }\n\n    .hidden {\n      visibility: hidden;\n    }\n  `,\n])\nexport class Typewriter extends GodownElement {\n  /**\n   * Raw text.\n   */\n  @property() text = \"\";\n  /**\n   * Start immediately after {@linkcode Typewriter.firstUpdated}.\n   */\n  @property({ type: Boolean }) stopped = false;\n  /**\n   * If true, hide the cursor\n   */\n  @property({ type: Boolean }) ended = false;\n  /**\n   * Maximum random time.\n   */\n  @property({ type: Number }) max = 100;\n  /**\n   * Minimum random time.\n   */\n  @property({ type: Number }) min = 50;\n  /**\n   * Fixed time.\n   */\n  @property({ type: Number }) delay = 0;\n  /**\n   * The index at the beginning.\n   */\n  @property({ type: Number }) index = 0;\n  /**\n   * Internal text.\n   */\n  @state() content = \"\";\n\n  timeoutID: number;\n  @query(\"i\") _i: HTMLElement;\n\n  /**\n   * {@linkcode Typewriter.text} length.\n   */\n  get len() {\n    return this.text.length;\n  }\n\n  protected render() {\n    return html`${htmlSlot()}${this.content}<i part=\"cursor\" class=\"${(this.ended && \"hidden\") || \"\"}\"></i>`;\n  }\n\n  protected firstUpdated() {\n    if (!this.text) {\n      this.text = this.assignedNodes[0]?.textContent.trim() || \"\";\n    }\n    if (!this.stopped && this.len) {\n      this.write();\n    }\n  }\n\n  protected updated(changedProperties: PropertyValueMap<this>) {\n    if (changedProperties.has(\"index\")) {\n      this.dispatchEvent(new CustomEvent(this.index === this.len ? \"done\" : \"write\", { detail: this.content }));\n    }\n  }\n\n  write(at = this.index) {\n    this.content = this.text.slice(0, at + 1);\n    const timeout = this.delay || random(this.max, this.min);\n    this.timeoutID = setTimeout(() => {\n      const nx = at + 1;\n      if (nx <= this.len) {\n        this.index = nx;\n        this.write();\n      }\n    }, timeout);\n  }\n\n  stop() {\n    clearTimeout(this.timeoutID);\n  }\n\n  end() {\n    this.ended = true;\n  }\n}\n\nexport default Typewriter;\n"]}

package/web-components/tooltip/tooltip.d.ts

@@ -1,26 +1,30 @@
-import { CSSResultGroup } from "../../.deps.js";
-import { type HTMLTemplate } from "../../lib/templates.js";
-import { type Direction8, GodownOpenable } from "../../supers/openable.js";
+import GodownSuperOpenable, { type Direction8 } from "../../proto/super-openable.js";
 /**
- * {@linkcode Tooltip} provide tooltip for slot elements, summary as the tips content.
+ * {@linkcode Tooltip} provide tooltip for slot elements.
  *
  * Content can be opened in 8 directions.
+ *
+ * @slot tooltip - Tooltip element.
+ * @slot - Tooltip trigger.
+ *
  */
-export declare class Tooltip extends GodownOpenable {
-    direction: Direction8 | "";
+export declare class Tooltip extends GodownSuperOpenable {
     /**
-     * Tip content align.
+     * Open direction.
      */
-    align: "center" | "flex-star" | "flex-end" | "";
-    static styles: CSSResultGroup;
-    protected render(): HTMLTemplate;
+    direction: Direction8;
+    /**
+     * Content align.
+     */
+    align: keyof typeof Tooltip.aligns | "inherit";
+    static aligns: {
+        start: string;
+        end: string;
+        center: string;
+        "flex-start": string;
+        "flex-end": string;
+    };
+    protected render(): import("lit").TemplateResult<1>;
 }
 export default Tooltip;
-declare global {
-    interface HTMLElementTagNameMap {
-        "open-tooltip": Tooltip;
-        "tool-tip": Tooltip;
-        "g-tooltip": Tooltip;
-    }
-}
 //# sourceMappingURL=tooltip.d.ts.map

package/web-components/tooltip/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAkB,MAAM,gBAAgB,CAAC;AAErE,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,KAAK,UAAU,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAK3E;;;;GAIG;AACH,qBACa,OAAQ,SAAQ,cAAc;IACzC,SAAS,EAAE,UAAU,GAAG,EAAE,CAAC;IAC3B;;OAEG;IACS,KAAK,EAAE,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,EAAE,CAAM;IAEjE,MAAM,CAAC,MAAM,EAAE,cAAc,CAgD3B;IAEF,SAAS,CAAC,MAAM,IAAI,YAAY;CAMjC;AAED,eAAe,OAAO,CAAC;AAEvB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,OAAO,CAAC;QACxB,UAAU,EAAE,OAAO,CAAC;QACpB,WAAW,EAAE,OAAO,CAAC;KACtB;CACF"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/tooltip/tooltip.ts"],"names":[],"mappings":"AAIA,OAAO,mBAAmB,EAAE,EAAE,KAAK,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAMrF;;;;;;;;GAQG;AACH,qBAkEa,OAAQ,SAAQ,mBAAmB;IAC9C;;OAEG;IACS,SAAS,EAAE,UAAU,CAAS;IAC1C;;OAEG;IACS,KAAK,EAAE,MAAM,OAAO,OAAO,CAAC,MAAM,GAAG,SAAS,CAAY;IAEtE,MAAM,CAAC,MAAM;;;;;;MAMX;IAEF,SAAS,CAAC,MAAM;CAOjB;AAED,eAAe,OAAO,CAAC"}

package/web-components/tooltip/tooltip.js

@@ -1,84 +1,122 @@
+var Tooltip_1;
 import { __decorate } from "tslib";
-import { css, html, property } from "../../.deps.js";
-import { define } from "../../decorators/define.js";
-import { htmlSlot } from "../../lib/templates.js";
-import { GodownOpenable } from "../../supers/openable.js";
-import { cssvarValues } from "../../supers/root.js";
-const defineName = "tooltip";
+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 GodownSuperOpenable from "../../proto/super-openable.js";
+import { createScope } from "../../styles/global.js";
+const protoName = "tooltip";
+const cssScope = createScope(protoName);
 /**
- * {@linkcode Tooltip} provide tooltip for slot elements, summary as the tips content.
+ * {@linkcode Tooltip} provide tooltip for slot elements.
  *
  * Content can be opened in 8 directions.
+ *
+ * @slot tooltip - Tooltip element.
+ * @slot - Tooltip trigger.
+ *
  */
-let Tooltip = class Tooltip extends GodownOpenable {
+let Tooltip = Tooltip_1 = class Tooltip extends GodownSuperOpenable {
     constructor() {
         super(...arguments);
         /**
-         * Tip content align.
+         * Open direction.
+         */
+        this.direction = "top";
+        /**
+         * Content align.
          */
-        this.align = "";
+        this.align = "center";
     }
     render() {
-        return html `<main style="justify-content:${this.align || "inherit"}">
+        const align = Tooltip_1.aligns[this.align] || "inherit";
+        return html `<div part="root" class="root" style="justify-content:${align};align-items:${align}">
       ${htmlSlot()}
-      <aside class="${this.direction || "top"}">${this.summary || htmlSlot("summary")}</aside>
-    </main>`;
+      <div part="tooltip" direction="${this.direction}">${htmlSlot("tooltip")}</div>
+    </div>`;
     }
 };
-Tooltip.styles = [
-    GodownOpenable.styles,
-    css `
-      :host {
-        color: var(${cssvarValues.text});
-        display: inline-flex;
-        transition: 0.3s ease-in-out;
-        justify-content: center;
-      }
+Tooltip.aligns = {
+    start: "flex-start",
+    end: "flex-end",
+    center: "center",
+    "flex-start": "flex-start",
+    "flex-end": "flex-end",
+};
+__decorate([
+    property()
+], Tooltip.prototype, "direction", void 0);
+__decorate([
+    property()
+], Tooltip.prototype, "align", void 0);
+Tooltip = Tooltip_1 = __decorate([
+    godown(protoName),
+    styles([
+        css `
+    :host {
+      --${cssScope}--tooltip-gap: .15em;
+      transition: 0.3s ease-in-out;
+      border-radius: 0.25em;
+      display: block;
+      height: 100%;
+    }
 
-      main {
-        display: inline-flex;
-        align-items: center;
-        position: relative;
-        transition: inherit;
-      }
+    [part="root"] {
+      display: flex;
+      position: relative;
+      transition: inherit;
+      border-radius: inherit;
+    }
 
-      main,
-      aside {
-        transition: inherit;
-        white-space: nowrap;
-      }
+    [part="tooltip"] {
+      z-index: 1;
+      opacity: 0;
+      width: -moz-fit-content;
+      width: fit-content;
+      height: -moz-fit-content;
+      height: fit-content;
+      position: absolute;
+      visibility: hidden;
+      transition: inherit;
+      pointer-events: none;
+      border-radius: inherit;
+      transition-property:opacity;
+    }
 
-      aside {
+    :host(:hover) [part="tooltip"],
+    :host([open]) [part="tooltip"] {
+      visibility: visible;
+      animation: open .8s forwards;
+    }
+    @keyframes open {
+      50% {
         opacity: 0;
-        position: absolute;
-        transition-property: opacity;
       }
-
-      :host(:hover) aside,
-      :host([open]) aside {
+      100% {
         opacity: 1;
       }
-    `,
-    css `
-      aside[class^="top"] {
-        bottom: 100%;
-      }
-      aside[class^="bottom"] {
-        top: 100%;
-      }
-      aside[class$="right"] {
-        left: 100%;
-      }
-      aside[class$="left"] {
-        right: 100%;
-      }
-    `,
-];
-__decorate([
-    property()
-], Tooltip.prototype, "align", void 0);
-Tooltip = __decorate([
-    define(defineName)
+    }
+  `,
+        css `
+    [direction^="top"] {
+      bottom: 100%;
+      padding-bottom: var(--${cssScope}--tooltip-gap);
+    }
+    [direction^="bottom"] {
+      top: 100%;
+      padding-top: var(--${cssScope}--tooltip-gap);
+    }
+    [direction$="right"] {
+      left: 100%;
+      padding-left: var(--${cssScope}--tooltip-gap);
+    }
+    [direction$="left"] {
+      right: 100%;
+      padding-right: var(--${cssScope}--tooltip-gap);
+    }
+  `,
+    ])
 ], Tooltip);
 export { Tooltip };
 export default Tooltip;

package/web-components/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/tooltip/tooltip.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAqB,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAmB,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEpD,MAAM,UAAU,GAAG,SAAS,CAAC;AAE7B;;;;GAIG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,cAAc;IAApC;;QAEL;;WAEG;QACS,UAAK,GAA6C,EAAE,CAAC;IA0DnE,CAAC;IANW,MAAM;QACd,OAAO,IAAI,CAAA,gCAAgC,IAAI,CAAC,KAAK,IAAI,SAAS;QAC9D,QAAQ,EAAE;sBACI,IAAI,CAAC,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC,OAAO,IAAI,QAAQ,CAAC,SAAS,CAAC;YACzE,CAAC;IACX,CAAC;;AAvDM,cAAM,GAAmB;IAC9B,cAAc,CAAC,MAAM;IACrB,GAAG,CAAA;;qBAEc,YAAY,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6BjC;IACD,GAAG,CAAA;;;;;;;;;;;;;KAaF;CACF,AAhDY,CAgDX;AAlDU;IAAX,QAAQ,EAAE;sCAAsD;AALtD,OAAO;IADnB,MAAM,CAAC,UAAU,CAAC;GACN,OAAO,CA+DnB;;AAED,eAAe,OAAO,CAAC","sourcesContent":["import { css, CSSResultGroup, html, property } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { type Direction8, GodownOpenable } from \"../../supers/openable.js\";\nimport { cssvarValues } from \"../../supers/root.js\";\n\nconst defineName = \"tooltip\";\n\n/**\n * {@linkcode Tooltip} provide tooltip for slot elements, summary as the tips content.\n *\n * Content can be opened in 8 directions.\n */\n@define(defineName)\nexport class Tooltip extends GodownOpenable {\n  direction: Direction8 | \"\";\n  /**\n   * Tip content align.\n   */\n  @property() align: \"center\" | \"flex-star\" | \"flex-end\" | \"\" = \"\";\n\n  static styles: CSSResultGroup = [\n    GodownOpenable.styles,\n    css`\n      :host {\n        color: var(${cssvarValues.text});\n        display: inline-flex;\n        transition: 0.3s ease-in-out;\n        justify-content: center;\n      }\n\n      main {\n        display: inline-flex;\n        align-items: center;\n        position: relative;\n        transition: inherit;\n      }\n\n      main,\n      aside {\n        transition: inherit;\n        white-space: nowrap;\n      }\n\n      aside {\n        opacity: 0;\n        position: absolute;\n        transition-property: opacity;\n      }\n\n      :host(:hover) aside,\n      :host([open]) aside {\n        opacity: 1;\n      }\n    `,\n    css`\n      aside[class^=\"top\"] {\n        bottom: 100%;\n      }\n      aside[class^=\"bottom\"] {\n        top: 100%;\n      }\n      aside[class$=\"right\"] {\n        left: 100%;\n      }\n      aside[class$=\"left\"] {\n        right: 100%;\n      }\n    `,\n  ];\n\n  protected render(): HTMLTemplate {\n    return html`<main style=\"justify-content:${this.align || \"inherit\"}\">\n      ${htmlSlot()}\n      <aside class=\"${this.direction || \"top\"}\">${this.summary || htmlSlot(\"summary\")}</aside>\n    </main>`;\n  }\n}\n\nexport default Tooltip;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"open-tooltip\": Tooltip;\n    \"tool-tip\": Tooltip;\n    \"g-tooltip\": Tooltip;\n  }\n}\n"]}
+{"version":3,"file":"tooltip.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/tooltip/tooltip.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,mBAAwC,MAAM,+BAA+B,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,MAAM,SAAS,GAAG,SAAS,CAAC;AAC5B,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AAExC;;;;;;;;GAQG;AAmEI,IAAM,OAAO,eAAb,MAAM,OAAQ,SAAQ,mBAAmB;IAAzC;;QACL;;WAEG;QACS,cAAS,GAAe,KAAK,CAAC;QAC1C;;WAEG;QACS,UAAK,GAA4C,QAAQ,CAAC;IAiBxE,CAAC;IAPW,MAAM;QACd,MAAM,KAAK,GAAG,SAAO,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC;QACtD,OAAO,IAAI,CAAA,wDAAwD,KAAK,gBAAgB,KAAK;QACzF,QAAQ,EAAE;uCACqB,IAAI,CAAC,SAAS,KAAK,QAAQ,CAAC,SAAS,CAAC;WAClE,CAAC;IACV,CAAC;;AAdM,cAAM,GAAG;IACd,KAAK,EAAE,YAAY;IACnB,GAAG,EAAE,UAAU;IACf,MAAM,EAAE,QAAQ;IAChB,YAAY,EAAE,YAAY;IAC1B,UAAU,EAAE,UAAU;CACvB,AANY,CAMX;AAZU;IAAX,QAAQ,EAAE;0CAA+B;AAI9B;IAAX,QAAQ,EAAE;sCAA2D;AAR3D,OAAO;IAlEnB,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CAAC;QACN,GAAG,CAAA;;UAEK,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0Cf;QACD,GAAG,CAAA;;;8BAGyB,QAAQ;;;;2BAIX,QAAQ;;;;4BAIP,QAAQ;;;;6BAIP,QAAQ;;GAElC;KACF,CAAC;GACW,OAAO,CAyBnB;;AAED,eAAe,OAAO,CAAC","sourcesContent":["import { css, html, property } from \"../../_deps.js\";\nimport { godown } from \"../../decorators/godown.js\";\nimport { styles } from \"../../decorators/styles.js\";\nimport { htmlSlot } from \"../../lib/directives.js\";\nimport GodownSuperOpenable, { type Direction8 } from \"../../proto/super-openable.js\";\nimport { createScope } from \"../../styles/global.js\";\n\nconst protoName = \"tooltip\";\nconst cssScope = createScope(protoName);\n\n/**\n * {@linkcode Tooltip} provide tooltip for slot elements.\n *\n * Content can be opened in 8 directions.\n *\n * @slot tooltip - Tooltip element.\n * @slot - Tooltip trigger.\n *\n */\n@godown(protoName)\n@styles([\n  css`\n    :host {\n      --${cssScope}--tooltip-gap: .15em;\n      transition: 0.3s ease-in-out;\n      border-radius: 0.25em;\n      display: block;\n      height: 100%;\n    }\n\n    [part=\"root\"] {\n      display: flex;\n      position: relative;\n      transition: inherit;\n      border-radius: inherit;\n    }\n\n    [part=\"tooltip\"] {\n      z-index: 1;\n      opacity: 0;\n      width: -moz-fit-content;\n      width: fit-content;\n      height: -moz-fit-content;\n      height: fit-content;\n      position: absolute;\n      visibility: hidden;\n      transition: inherit;\n      pointer-events: none;\n      border-radius: inherit;\n      transition-property:opacity;\n    }\n\n    :host(:hover) [part=\"tooltip\"],\n    :host([open]) [part=\"tooltip\"] {\n      visibility: visible;\n      animation: open .8s forwards;\n    }\n    @keyframes open {\n      50% {\n        opacity: 0;\n      }\n      100% {\n        opacity: 1;\n      }\n    }\n  `,\n  css`\n    [direction^=\"top\"] {\n      bottom: 100%;\n      padding-bottom: var(--${cssScope}--tooltip-gap);\n    }\n    [direction^=\"bottom\"] {\n      top: 100%;\n      padding-top: var(--${cssScope}--tooltip-gap);\n    }\n    [direction$=\"right\"] {\n      left: 100%;\n      padding-left: var(--${cssScope}--tooltip-gap);\n    }\n    [direction$=\"left\"] {\n      right: 100%;\n      padding-right: var(--${cssScope}--tooltip-gap);\n    }\n  `,\n])\nexport class Tooltip extends GodownSuperOpenable {\n  /**\n   * Open direction.\n   */\n  @property() direction: Direction8 = \"top\";\n  /**\n   * Content align.\n   */\n  @property() align: keyof typeof Tooltip.aligns | \"inherit\" = \"center\";\n\n  static aligns = {\n    start: \"flex-start\",\n    end: \"flex-end\",\n    center: \"center\",\n    \"flex-start\": \"flex-start\",\n    \"flex-end\": \"flex-end\",\n  };\n\n  protected render() {\n    const align = Tooltip.aligns[this.align] || \"inherit\";\n    return html`<div part=\"root\" class=\"root\" style=\"justify-content:${align};align-items:${align}\">\n      ${htmlSlot()}\n      <div part=\"tooltip\" direction=\"${this.direction}\">${htmlSlot(\"tooltip\")}</div>\n    </div>`;\n  }\n}\n\nexport default Tooltip;\n"]}

package/web-components/wrapper/dragbox.d.ts

@@ -1,5 +1,5 @@
-import { type HTMLTemplate } from "../../lib/templates.js";
-import { GodownElement } from "../../supers/root.js";
+import { ListenerFunc } from "../../lib/event-coll.js";
+import { GodownElement } from "../../proto/godown-element.js";
 /**
  * {@linkcode Dragbox} does not extend beyond the range of {@linkcode Dragbox.offsetsWidth} and {@linkcode Dragbox.offsetsHeight}.
  */
@@ -17,19 +17,14 @@ export declare class Dragbox extends GodownElement {
      * Position y.
      */
     y: string;
-    static styles: import("lit").CSSResult[];
-    protected render(): HTMLTemplate;
+    protected render(): import("lit").TemplateResult<1>;
     protected firstUpdated(): void;
     protected _handleDragStart(e: MouseEvent): void;
+    mouseMoveEvent: ListenerFunc;
+    mouseLeaveEvent: ListenerFunc;
     protected _handleDragEnd(): void;
     protected _handleDrag(e: MouseEvent): void;
     reset(): void;
 }
 export default Dragbox;
-declare global {
-    interface HTMLElementTagNameMap {
-        "drag-box": Dragbox;
-        "g-dragbox": Dragbox;
-    }
-}
 //# sourceMappingURL=dragbox.d.ts.map

package/web-components/wrapper/dragbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dragbox.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/wrapper/dragbox.ts"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAIrD;;GAEG;AACH,qBACa,OAAQ,SAAQ,aAAa;IACxC,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;IACS,CAAC,SAAU;IACvB;;OAEG;IACS,CAAC,SAAU;IAEvB,MAAM,CAAC,MAAM,4BAOX;IAEF,SAAS,CAAC,MAAM,IAAI,YAAY;IAIhC,SAAS,CAAC,YAAY;IAKtB,SAAS,CAAC,gBAAgB,CAAC,CAAC,EAAE,UAAU;IASxC,SAAS,CAAC,cAAc;IAKxB,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,UAAU;IAsBnC,KAAK;CAUN;AAED,eAAe,OAAO,CAAC;AACvB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;QACpB,WAAW,EAAE,OAAO,CAAC;KACtB;CACF"}
+{"version":3,"file":"dragbox.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/wrapper/dragbox.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9D;;GAEG;AACH,qBAca,OAAQ,SAAQ,aAAa;IACxC,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;IACS,CAAC,SAAU;IACvB;;OAEG;IACS,CAAC,SAAU;IAEvB,SAAS,CAAC,MAAM;IAIhB,SAAS,CAAC,YAAY;IAItB,SAAS,CAAC,gBAAgB,CAAC,CAAC,EAAE,UAAU;IAUxC,cAAc,EAAE,YAAY,CAAC;IAC7B,eAAe,EAAE,YAAY,CAAC;IAE9B,SAAS,CAAC,cAAc;IAMxB,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,UAAU;IAuBnC,KAAK;CAWN;AAED,eAAe,OAAO,CAAC"}

package/web-components/wrapper/dragbox.js

@@ -1,9 +1,10 @@
 import { __decorate } from "tslib";
-import { css, html, property } from "../../.deps.js";
-import { define } from "../../decorators/define.js";
-import { htmlSlot } from "../../lib/templates.js";
-import { GodownElement } from "../../supers/root.js";
-const defineName = "dragbox";
+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";
+const protoName = "dragbox";
 /**
  * {@linkcode Dragbox} does not extend beyond the range of {@linkcode Dragbox.offsetsWidth} and {@linkcode Dragbox.offsetsHeight}.
  */
@@ -24,7 +25,6 @@ let Dragbox = class Dragbox extends GodownElement {
     }
     firstUpdated() {
         this.reset();
-        this.addEvent(document, "mouseup", this._handleDragEnd.bind(this));
     }
     _handleDragStart(e) {
         this.cx = e.clientX;
@@ -32,11 +32,13 @@ let Dragbox = class Dragbox extends GodownElement {
         this.t = this.offsetTop;
         this.l = this.offsetLeft;
         this.drag = true;
-        this.addEvent(document, "mousemove", this._handleDrag.bind(this), undefined, "0");
+        this.mouseMoveEvent = this.addEvent(document, "mousemove", this._handleDrag.bind(this));
+        this.mouseLeaveEvent = this.addEvent(document, "mouseleave", this._handleDragEnd.bind(this));
     }
     _handleDragEnd() {
         this.drag = false;
-        this.removeEvent(document, "mousemove", "0");
+        this.removeEvent(document, "mousemove", this.mouseMoveEvent);
+        this.removeEvent(document, "mouseleave", this.mouseLeaveEvent);
     }
     _handleDrag(e) {
         if (!this.drag) {
@@ -44,44 +46,38 @@ let Dragbox = class Dragbox extends GodownElement {
         }
         const nl = e.clientX - (this.cx - this.l);
         const nt = e.clientY - (this.cy - this.t);
+        const { style, offsetsWidth, offsetsHeight, offsetWidth, offsetHeight } = this;
         if (nl < 0) {
-            this.style.left = "0";
+            style.left = "0";
         }
-        else if (nl < this.offsetsWidth - this.offsetWidth) {
-            this.style.left = `${nl}px`;
+        else if (nl < offsetsWidth - offsetWidth) {
+            style.left = `${nl}px`;
         }
         else {
-            this.style.left = `${this.offsetsWidth - this.offsetWidth}"px"`;
+            style.left = `${offsetsWidth - offsetWidth}"px"`;
         }
         if (nt < 0) {
-            this.style.top = "0";
+            style.top = "0";
         }
-        else if (nt < this.offsetsHeight - this.offsetHeight) {
-            this.style.top = `${nt}px`;
+        else if (nt < offsetsHeight - offsetHeight) {
+            style.top = `${nt}px`;
         }
         else {
-            this.style.top = `${this.offsetsHeight - this.offsetHeight}px`;
+            style.top = `${offsetsHeight - offsetHeight}px`;
         }
     }
     reset() {
-        this.style.left = this.x || "0";
-        this.style.top = this.y || "0";
-        if (this.offsetLeft > this.offsetsWidth - this.offsetWidth) {
-            this.style.left = `${this.offsetsWidth - this.offsetWidth}px`;
+        const { x, y, style, offsetsWidth, offsetsHeight, offsetWidth, offsetHeight, offsetLeft, offsetTop } = this;
+        style.left = x || "0";
+        style.top = y || "0";
+        if (offsetLeft > offsetsWidth - offsetWidth) {
+            style.left = `${offsetsWidth - offsetWidth}px`;
         }
-        if (this.offsetTop > this.offsetsHeight - this.offsetHeight) {
-            this.style.top = `${this.offsetsHeight - this.offsetHeight}px`;
+        if (offsetTop > offsetsHeight - offsetHeight) {
+            style.top = `${offsetsHeight - offsetHeight}px`;
         }
     }
 };
-Dragbox.styles = [
-    css `
-      :host {
-        position: relative;
-        display: inline-flex;
-      }
-    `,
-];
 __decorate([
     property()
 ], Dragbox.prototype, "x", void 0);
@@ -89,7 +85,20 @@ __decorate([
     property()
 ], Dragbox.prototype, "y", void 0);
 Dragbox = __decorate([
-    define(defineName)
+    godown(protoName),
+    styles([
+        css `
+    :host {
+      position: absolute;
+      display: block;
+    }
+
+    :host(:active) {
+      -webkit-user-select: none;
+      user-select: none;
+    }
+  `,
+    ])
 ], Dragbox);
 export { Dragbox };
 export default Dragbox;

package/web-components/wrapper/dragbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"dragbox.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/wrapper/dragbox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAqB,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,MAAM,UAAU,GAAG,SAAS,CAAC;AAE7B;;GAEG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,aAAa;IAAnC;;QAOL;;WAEG;QACS,MAAC,GAAG,MAAM,CAAC;QACvB;;WAEG;QACS,MAAC,GAAG,MAAM,CAAC;IAkEzB,CAAC;IAvDW,MAAM;QACd,OAAO,IAAI,CAAA,oBAAoB,IAAI,CAAC,gBAAgB,eAAe,IAAI,CAAC,cAAc,KAAK,QAAQ,EAAE,QAAQ,CAAC;IAChH,CAAC;IAES,YAAY;QACpB,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACrE,CAAC;IAES,gBAAgB,CAAC,CAAa;QACtC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC;QACpB,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC;QACpB,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;QACxB,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC;QACzB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,CAAC,CAAC;IACpF,CAAC;IAES,cAAc;QACtB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,WAAW,EAAE,GAAG,CAAC,CAAC;IAC/C,CAAC;IAES,WAAW,CAAC,CAAa;QACjC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QACD,MAAM,EAAE,GAAG,CAAC,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;QAC1C,MAAM,EAAE,GAAG,CAAC,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;QAC1C,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC;YACX,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC;QACxB,CAAC;aAAM,IAAI,EAAE,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;YACrD,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,EAAE,IAAI,CAAC;QAC9B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,MAAM,CAAC;QAClE,CAAC;QACD,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC;YACX,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;QACvB,CAAC;aAAM,IAAI,EAAE,GAAG,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;YACvD,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,IAAI,CAAC;QAC7B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,YAAY,IAAI,CAAC;QACjE,CAAC;IACH,CAAC;IAED,KAAK;QACH,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC;QAChC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC;QAC/B,IAAI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;YAC3D,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC;QAChE,CAAC;QACD,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;YAC5D,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,YAAY,IAAI,CAAC;QACjE,CAAC;IACH,CAAC;;AA/DM,cAAM,GAAG;IACd,GAAG,CAAA;;;;;KAKF;CACF,AAPY,CAOX;AAbU;IAAX,QAAQ,EAAE;kCAAY;AAIX;IAAX,QAAQ,EAAE;kCAAY;AAdZ,OAAO;IADnB,MAAM,CAAC,UAAU,CAAC;GACN,OAAO,CAgFnB;;AAED,eAAe,OAAO,CAAC","sourcesContent":["import { css, html, property } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { GodownElement } from \"../../supers/root.js\";\n\nconst defineName = \"dragbox\";\n\n/**\n * {@linkcode Dragbox} does not extend beyond the range of {@linkcode Dragbox.offsetsWidth} and {@linkcode Dragbox.offsetsHeight}.\n */\n@define(defineName)\nexport class Dragbox extends GodownElement {\n  drag: boolean;\n  t: number;\n  l: number;\n  cx: number;\n  cy: number;\n\n  /**\n   * Position x.\n   */\n  @property() x = \"auto\";\n  /**\n   * Position y.\n   */\n  @property() y = \"auto\";\n\n  static styles = [\n    css`\n      :host {\n        position: relative;\n        display: inline-flex;\n      }\n    `,\n  ];\n\n  protected render(): HTMLTemplate {\n    return html`<div @mousedown=\"${this._handleDragStart}\" @mouseup=\"${this._handleDragEnd}\">${htmlSlot()}</div>`;\n  }\n\n  protected firstUpdated() {\n    this.reset();\n    this.addEvent(document, \"mouseup\", this._handleDragEnd.bind(this));\n  }\n\n  protected _handleDragStart(e: MouseEvent) {\n    this.cx = e.clientX;\n    this.cy = e.clientY;\n    this.t = this.offsetTop;\n    this.l = this.offsetLeft;\n    this.drag = true;\n    this.addEvent(document, \"mousemove\", this._handleDrag.bind(this), undefined, \"0\");\n  }\n\n  protected _handleDragEnd() {\n    this.drag = false;\n    this.removeEvent(document, \"mousemove\", \"0\");\n  }\n\n  protected _handleDrag(e: MouseEvent) {\n    if (!this.drag) {\n      return;\n    }\n    const nl = e.clientX - (this.cx - this.l);\n    const nt = e.clientY - (this.cy - this.t);\n    if (nl < 0) {\n      this.style.left = \"0\";\n    } else if (nl < this.offsetsWidth - this.offsetWidth) {\n      this.style.left = `${nl}px`;\n    } else {\n      this.style.left = `${this.offsetsWidth - this.offsetWidth}\"px\"`;\n    }\n    if (nt < 0) {\n      this.style.top = \"0\";\n    } else if (nt < this.offsetsHeight - this.offsetHeight) {\n      this.style.top = `${nt}px`;\n    } else {\n      this.style.top = `${this.offsetsHeight - this.offsetHeight}px`;\n    }\n  }\n\n  reset() {\n    this.style.left = this.x || \"0\";\n    this.style.top = this.y || \"0\";\n    if (this.offsetLeft > this.offsetsWidth - this.offsetWidth) {\n      this.style.left = `${this.offsetsWidth - this.offsetWidth}px`;\n    }\n    if (this.offsetTop > this.offsetsHeight - this.offsetHeight) {\n      this.style.top = `${this.offsetsHeight - this.offsetHeight}px`;\n    }\n  }\n}\n\nexport default Dragbox;\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"drag-box\": Dragbox;\n    \"g-dragbox\": Dragbox;\n  }\n}\n"]}
+{"version":3,"file":"dragbox.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/wrapper/dragbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, property } from \"../../_deps.js\";\nimport { godown } from \"../../decorators/godown.js\";\nimport styles from \"../../decorators/styles.js\";\nimport { htmlSlot } from \"../../lib/directives.js\";\nimport { ListenerFunc } from \"../../lib/event-coll.js\";\nimport { GodownElement } from \"../../proto/godown-element.js\";\n\nconst protoName = \"dragbox\";\n\n/**\n * {@linkcode Dragbox} does not extend beyond the range of {@linkcode Dragbox.offsetsWidth} and {@linkcode Dragbox.offsetsHeight}.\n */\n@godown(protoName)\n@styles([\n  css`\n    :host {\n      position: absolute;\n      display: block;\n    }\n\n    :host(:active) {\n      -webkit-user-select: none;\n      user-select: none;\n    }\n  `,\n])\nexport class Dragbox extends GodownElement {\n  drag: boolean;\n  t: number;\n  l: number;\n  cx: number;\n  cy: number;\n\n  /**\n   * Position x.\n   */\n  @property() x = \"auto\";\n  /**\n   * Position y.\n   */\n  @property() y = \"auto\";\n\n  protected render() {\n    return html`<div @mousedown=\"${this._handleDragStart}\" @mouseup=\"${this._handleDragEnd}\">${htmlSlot()}</div>`;\n  }\n\n  protected firstUpdated() {\n    this.reset();\n  }\n\n  protected _handleDragStart(e: MouseEvent) {\n    this.cx = e.clientX;\n    this.cy = e.clientY;\n    this.t = this.offsetTop;\n    this.l = this.offsetLeft;\n    this.drag = true;\n    this.mouseMoveEvent = this.addEvent(document, \"mousemove\", this._handleDrag.bind(this));\n    this.mouseLeaveEvent = this.addEvent(document, \"mouseleave\", this._handleDragEnd.bind(this));\n  }\n\n  mouseMoveEvent: ListenerFunc;\n  mouseLeaveEvent: ListenerFunc;\n\n  protected _handleDragEnd() {\n    this.drag = false;\n    this.removeEvent(document, \"mousemove\", this.mouseMoveEvent);\n    this.removeEvent(document, \"mouseleave\", this.mouseLeaveEvent);\n  }\n\n  protected _handleDrag(e: MouseEvent) {\n    if (!this.drag) {\n      return;\n    }\n    const nl = e.clientX - (this.cx - this.l);\n    const nt = e.clientY - (this.cy - this.t);\n    const { style, offsetsWidth, offsetsHeight, offsetWidth, offsetHeight } = this;\n    if (nl < 0) {\n      style.left = \"0\";\n    } else if (nl < offsetsWidth - offsetWidth) {\n      style.left = `${nl}px`;\n    } else {\n      style.left = `${offsetsWidth - offsetWidth}\"px\"`;\n    }\n    if (nt < 0) {\n      style.top = \"0\";\n    } else if (nt < offsetsHeight - offsetHeight) {\n      style.top = `${nt}px`;\n    } else {\n      style.top = `${offsetsHeight - offsetHeight}px`;\n    }\n  }\n\n  reset() {\n    const { x, y, style, offsetsWidth, offsetsHeight, offsetWidth, offsetHeight, offsetLeft, offsetTop } = this;\n    style.left = x || \"0\";\n    style.top = y || \"0\";\n    if (offsetLeft > offsetsWidth - offsetWidth) {\n      style.left = `${offsetsWidth - offsetWidth}px`;\n    }\n    if (offsetTop > offsetsHeight - offsetHeight) {\n      style.top = `${offsetsHeight - offsetHeight}px`;\n    }\n  }\n}\n\nexport default Dragbox;\n"]}

package/web-components/wrapper/rotate.d.ts

@@ -0,0 +1,30 @@
+import { GodownElement } from "../../proto/godown-element.js";
+/**
+ * {@linkcode Rotate} Make child elements rotate.
+ */
+export declare class Rotate extends GodownElement {
+    _root: HTMLElement;
+    protected render(): import("lit").TemplateResult<1>;
+    /**
+     * Cancel the offset.
+     */
+    reset(): void;
+    /**
+     * Apply offset.
+     */
+    protected _handleRotate(e: MouseEvent): void;
+    /**
+     * Compute offset.
+     * ```
+     * `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`
+     * ```
+     * @param e Mouse move event.
+     * @returns rotateX, rotateY
+     */
+    _computeOffset(e: MouseEvent): {
+        rotateX: number;
+        rotateY: number;
+    };
+}
+export default Rotate;
+//# sourceMappingURL=rotate.d.ts.map

package/web-components/wrapper/rotate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rotate.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/wrapper/rotate.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAM9D;;GAEG;AACH,qBA+Ba,MAAO,SAAQ,aAAa;IACzB,KAAK,EAAE,WAAW,CAAC;IAEjC,SAAS,CAAC,MAAM;IAOhB;;OAEG;IACH,KAAK;IAKL;;OAEG;IACH,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,UAAU;IAMrC;;;;;;;OAOG;IACH,cAAc,CAAC,CAAC,EAAE,UAAU;;;;CAU7B;AAED,eAAe,MAAM,CAAC"}

package/web-components/wrapper/rotate.js

@@ -0,0 +1,92 @@
+import { __decorate } from "tslib";
+import { css, html } from "../../_deps.js";
+import { godown } from "../../decorators/godown.js";
+import { part } from "../../decorators/part.js";
+import { styles } from "../../decorators/styles.js";
+import { htmlSlot } from "../../lib/directives.js";
+import { GodownElement } from "../../proto/godown-element.js";
+import { createScope } from "../../styles/global.js";
+const protoName = "rotate";
+const cssScope = createScope(protoName);
+/**
+ * {@linkcode Rotate} Make child elements rotate.
+ */
+let Rotate = class Rotate extends GodownElement {
+    render() {
+        return html `<div part="root">
+      <div part="slot" @mousemove="${this._handleRotate}">${htmlSlot()}</div>
+      <i @mouseleave="${this.reset}"></i>
+    </div>`;
+    }
+    /**
+     * Cancel the offset.
+     */
+    reset() {
+        this._root.style.removeProperty("transform");
+        this._root.style.removeProperty("transition");
+    }
+    /**
+     * Apply offset.
+     */
+    _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 0.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);
+export { Rotate };
+export default Rotate;
+//# sourceMappingURL=rotate.js.map

package/web-components/wrapper/rotate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rotate.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/wrapper/rotate.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,MAAM,SAAS,GAAG,QAAQ,CAAC;AAC3B,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AAExC;;GAEG;AAgCI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,aAAa;IAG7B,MAAM;QACd,OAAO,IAAI,CAAA;qCACsB,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE;wBAC9C,IAAI,CAAC,KAAK;WACvB,CAAC;IACV,CAAC;IAED;;OAEG;IACH,KAAK;QACH,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;QAC7C,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;IAChD,CAAC;IAED;;OAEG;IACO,aAAa,CAAC,CAAa;QACnC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;QACpD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,WAAW,OAAO,gBAAgB,OAAO,MAAM,CAAC,CAAC;QAC3F,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;IACnD,CAAC;IAED;;;;;;;OAOG;IACH,cAAc,CAAC,CAAa;QAC1B,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC;QACxE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC;QAC/B,MAAM,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC;QAC/B,MAAM,OAAO,GAAG,OAAO,GAAG,GAAG,CAAC;QAE9B,MAAM,OAAO,GAAG,CAAC,CAAC,OAAO,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC;QACrD,MAAM,OAAO,GAAG,CAAC,OAAO,GAAG,KAAK,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;QAClD,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;IAC9B,CAAC;CACF,CAAA;AA5Ce;IAAb,IAAI,CAAC,MAAM,CAAC;qCAAoB;AADtB,MAAM;IA/BlB,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CAAC,GAAG,CAAA;;;;;;QAMH,QAAQ;QACR,QAAQ;;;;;;;;;;;;;;;qBAeK,QAAQ;8BACC,QAAQ;;;;;;CAMrC,CAAC;GACW,MAAM,CA6ClB;;AAED,eAAe,MAAM,CAAC","sourcesContent":["import { css, html } from \"../../_deps.js\";\nimport { godown } from \"../../decorators/godown.js\";\nimport { part } from \"../../decorators/part.js\";\nimport { styles } from \"../../decorators/styles.js\";\nimport { htmlSlot } from \"../../lib/directives.js\";\nimport { GodownElement } from \"../../proto/godown-element.js\";\nimport { createScope } from \"../../styles/global.js\";\n\nconst protoName = \"rotate\";\nconst cssScope = createScope(protoName);\n\n/**\n * {@linkcode Rotate} Make child elements rotate.\n */\n@godown(protoName)\n@styles(css`\n  :host {\n    display: block;\n    width: -moz-fit-content;\n    width: fit-content;\n    transition: all 0.5s ease-in-out;\n    --${cssScope}--padding: .75em;\n    --${cssScope}--offset: .5em;\n  }\n\n  div {\n    position: relative;\n    transition: inherit;\n    transition-property: transform;\n  }\n\n  i {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    box-sizing: content-box;\n    padding: var(--${cssScope}--offset);\n    margin: calc(-1 * var(--${cssScope}--offset));\n  }\n\n  [part=\"slot\"]{\n    z-index: 2;\n  }\n`)\nexport class Rotate extends GodownElement {\n  @part(\"root\") _root: HTMLElement;\n\n  protected render() {\n    return html`<div part=\"root\">\n      <div part=\"slot\" @mousemove=\"${this._handleRotate}\">${htmlSlot()}</div>\n      <i @mouseleave=\"${this.reset}\"></i>\n    </div>`;\n  }\n\n  /**\n   * Cancel the offset.\n   */\n  reset() {\n    this._root.style.removeProperty(\"transform\");\n    this._root.style.removeProperty(\"transition\");\n  }\n\n  /**\n   * Apply offset.\n   */\n  protected _handleRotate(e: MouseEvent) {\n    const { rotateX, rotateY } = this._computeOffset(e);\n    this._root.style.setProperty(\"transform\", `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`);\n    this._root.style.setProperty(\"transition\", \"0s\");\n  }\n\n  /**\n   * Compute offset.\n   * ```\n   * `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`\n   * ```\n   * @param e Mouse move event.\n   * @returns rotateX, rotateY\n   */\n  _computeOffset(e: MouseEvent) {\n    const { left, top, width, height } = this._root.getBoundingClientRect();\n    const { clientX, clientY } = e;\n    const offsetX = clientX - left;\n    const offsetY = clientY - top;\n\n    const rotateX = -(offsetY - height / 2) / height / 2;\n    const rotateY = (offsetX - width / 2) / width / 2;\n    return { rotateX, rotateY };\n  }\n}\n\nexport default Rotate;\n"]}

package/.deps.js.map

@@ -1 +0,0 @@
-{"version":3,"file":".deps.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":[".deps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAuB,OAAO,EAAyB,MAAM,KAAK,CAAC;AACrG,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC","sourcesContent":["export { html, svg, css, unsafeCSS, type CSSResultGroup, nothing, type PropertyValueMap } from \"lit\";\nexport * from \"lit/decorators.js\";\nexport { ifDefined } from \"lit/directives/if-defined.js\";\nexport { classMap } from \"lit/directives/class-map.js\";\n"]}