godown 2.6.0 → 2.6.1

package/web-components/loading/loading-progress.js

@@ -21,9 +21,33 @@ let LoadingProgress = class LoadingProgress extends GodownElement {
          */
         this.value = null;
     }
-    static { this.styles = [
-        GodownElement.styles,
-        css `
+    render() {
+        let width = 20;
+        let className;
+        if (this.value !== null) {
+            width = this.parsePercent(this.value);
+            className = "v";
+        }
+        return html `<div class="${className}">
+      <i style="width:${width}%;"></i>
+    </div>`;
+    }
+    /**
+     * Convert s to a percentage without a percent sign.
+     *
+     * @param s String or number to convert.
+     * @returns Percentage without a percent sign.
+     */
+    parsePercent(s = "0") {
+        if (String(s).includes("%")) {
+            return parseFloat(String(s));
+        }
+        return (parseFloat(String(s)) / (this.max - this.min)) * 100;
+    }
+};
+LoadingProgress.styles = [
+    GodownElement.styles,
+    css `
       :host,
       div {
         display: inline-flex;
@@ -60,31 +84,7 @@ let LoadingProgress = class LoadingProgress extends GodownElement {
         animation: none;
       }
     `,
-    ]; }
-    render() {
-        let width = 20;
-        let className;
-        if (this.value !== null) {
-            width = this.parsePercent(this.value);
-            className = "v";
-        }
-        return html `<div class="${className}">
-      <i style="width:${width}%;"></i>
-    </div>`;
-    }
-    /**
-     * Convert s to a percentage without a percent sign.
-     *
-     * @param s String or number to convert.
-     * @returns Percentage without a percent sign.
-     */
-    parsePercent(s = "0") {
-        if (String(s).includes("%")) {
-            return parseFloat(String(s));
-        }
-        return (parseFloat(String(s)) / (this.max - this.min)) * 100;
-    }
-};
+];
 __decorate([
     property({ type: Number })
 ], LoadingProgress.prototype, "max", void 0);

package/web-components/loading/loading-progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading-progress.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/loading/loading-progress.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAuB,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEpE,MAAM,UAAU,GAAG,kBAAkB,CAAC;AAEtC;;GAEG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,aAAa;IAA3C;;QACL;;WAEG;QACyB,QAAG,GAAG,CAAC,CAAC;QACpC;;WAEG;QACyB,QAAG,GAAG,CAAC,CAAC;QACpC;;WAEG;QACwC,UAAK,GAAG,IAAI,CAAC;IAmE1D,CAAC;aAjEQ,WAAM,GAAG;QACd,aAAa,CAAC,MAAM;QACpB,GAAG,CAAA;;;;;;;;0BAQmB,YAAY,CAAC,KAAK;;;;;;;;;;0BAUlB,YAAY,CAAC,MAAM;;;;;;;;;;;;;;;;;;KAkBxC;KACgB,AAvCN,CAuCO;IAEV,MAAM;QACd,IAAI,KAAK,GAAG,EAAE,CAAC;QACf,IAAI,SAAiB,CAAC;QACtB,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE,CAAC;YACxB,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACtC,SAAS,GAAG,GAAG,CAAC;QAClB,CAAC;QACD,OAAO,IAAI,CAAA,eAAe,SAAS;wBACf,KAAK;WAClB,CAAC;IACV,CAAC;IAED;;;;;OAKG;IACH,YAAY,CAAC,IAAqB,GAAG;QACnC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC5B,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/B,CAAC;QACD,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;IAC/D,CAAC;;AA1E2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAS;AAIR;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAS;AAIO;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAc;AAZ7C,eAAe;IAD3B,MAAM,CAAC,UAAU,CAAC;GACN,eAAe,CA+E3B;;AAED,eAAe,eAAe,CAAC","sourcesContent":["import { css, type CSSResultGroup, html, property } from \"../../deps.js\";\nimport { type HTMLTemplate } from \"../../lib/templates.js\";\nimport { cssvarValues, define, GodownElement } from \"../../root.js\";\n\nconst defineName = \"loading-progress\";\n\n/**\n * LoadProgress similar to  progress.\n */\n@define(defineName)\nexport class LoadingProgress extends GodownElement {\n  /**\n   * Maximum.\n   */\n  @property({ type: Number }) max = 1;\n  /**\n   * Minimum.\n   */\n  @property({ type: Number }) min = 0;\n  /**\n   * Input value.\n   */\n  @property({ type: Number, reflect: true }) value = null;\n\n  static styles = [\n    GodownElement.styles,\n    css`\n      :host,\n      div {\n        display: inline-flex;\n        position: relative;\n        width: 10em;\n        height: 0.5em;\n        border-radius: 0.25em;\n        background: var(${cssvarValues.input}--false);\n        z-index: 1;\n      }\n\n      div i {\n        position: absolute;\n        border-radius: inherit;\n        top: 0;\n        left: 0;\n        height: 100%;\n        background: var(${cssvarValues.cssvar}--accept);\n        z-index: 2;\n        transition: all 0.3s;\n        animation: progress 1.5s ease-in-out infinite alternate;\n      }\n\n      @keyframes progress {\n        from {\n          left: 0;\n        }\n        to {\n          left: 80%;\n        }\n      }\n\n      div.v i {\n        animation: none;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    let width = 20;\n    let className: string;\n    if (this.value !== null) {\n      width = this.parsePercent(this.value);\n      className = \"v\";\n    }\n    return html`<div class=\"${className}\">\n      <i style=\"width:${width}%;\"></i>\n    </div>`;\n  }\n\n  /**\n   * Convert s to a percentage without a percent sign.\n   *\n   * @param s String or number to convert.\n   * @returns Percentage without a percent sign.\n   */\n  parsePercent(s: string | number = \"0\"): number {\n    if (String(s).includes(\"%\")) {\n      return parseFloat(String(s));\n    }\n    return (parseFloat(String(s)) / (this.max - this.min)) * 100;\n  }\n}\n\nexport default LoadingProgress;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"load-track\": LoadingProgress;\n  }\n}\n"]}
+{"version":3,"file":"loading-progress.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/loading/loading-progress.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAuB,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEpE,MAAM,UAAU,GAAG,kBAAkB,CAAC;AAEtC;;GAEG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,aAAa;IAA3C;;QACL;;WAEG;QACyB,QAAG,GAAG,CAAC,CAAC;QACpC;;WAEG;QACyB,QAAG,GAAG,CAAC,CAAC;QACpC;;WAEG;QACwC,UAAK,GAAG,IAAI,CAAC;IAmE1D,CAAC;IAxBW,MAAM;QACd,IAAI,KAAK,GAAG,EAAE,CAAC;QACf,IAAI,SAAiB,CAAC;QACtB,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE,CAAC;YACxB,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACtC,SAAS,GAAG,GAAG,CAAC;QAClB,CAAC;QACD,OAAO,IAAI,CAAA,eAAe,SAAS;wBACf,KAAK;WAClB,CAAC;IACV,CAAC;IAED;;;;;OAKG;IACH,YAAY,CAAC,IAAqB,GAAG;QACnC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC5B,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/B,CAAC;QACD,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;IAC/D,CAAC;;AAhEM,sBAAM,GAAG;IACd,aAAa,CAAC,MAAM;IACpB,GAAG,CAAA;;;;;;;;0BAQmB,YAAY,CAAC,KAAK;;;;;;;;;;0BAUlB,YAAY,CAAC,MAAM;;;;;;;;;;;;;;;;;;KAkBxC;CACgB,AAvCN,CAuCO;AAjDQ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAS;AAIR;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAS;AAIO;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAc;AAZ7C,eAAe;IAD3B,MAAM,CAAC,UAAU,CAAC;GACN,eAAe,CA+E3B;;AAED,eAAe,eAAe,CAAC","sourcesContent":["import { css, type CSSResultGroup, html, property } from \"../../deps.js\";\nimport { type HTMLTemplate } from \"../../lib/templates.js\";\nimport { cssvarValues, define, GodownElement } from \"../../root.js\";\n\nconst defineName = \"loading-progress\";\n\n/**\n * LoadProgress similar to  progress.\n */\n@define(defineName)\nexport class LoadingProgress extends GodownElement {\n  /**\n   * Maximum.\n   */\n  @property({ type: Number }) max = 1;\n  /**\n   * Minimum.\n   */\n  @property({ type: Number }) min = 0;\n  /**\n   * Input value.\n   */\n  @property({ type: Number, reflect: true }) value = null;\n\n  static styles = [\n    GodownElement.styles,\n    css`\n      :host,\n      div {\n        display: inline-flex;\n        position: relative;\n        width: 10em;\n        height: 0.5em;\n        border-radius: 0.25em;\n        background: var(${cssvarValues.input}--false);\n        z-index: 1;\n      }\n\n      div i {\n        position: absolute;\n        border-radius: inherit;\n        top: 0;\n        left: 0;\n        height: 100%;\n        background: var(${cssvarValues.cssvar}--accept);\n        z-index: 2;\n        transition: all 0.3s;\n        animation: progress 1.5s ease-in-out infinite alternate;\n      }\n\n      @keyframes progress {\n        from {\n          left: 0;\n        }\n        to {\n          left: 80%;\n        }\n      }\n\n      div.v i {\n        animation: none;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    let width = 20;\n    let className: string;\n    if (this.value !== null) {\n      width = this.parsePercent(this.value);\n      className = \"v\";\n    }\n    return html`<div class=\"${className}\">\n      <i style=\"width:${width}%;\"></i>\n    </div>`;\n  }\n\n  /**\n   * Convert s to a percentage without a percent sign.\n   *\n   * @param s String or number to convert.\n   * @returns Percentage without a percent sign.\n   */\n  parsePercent(s: string | number = \"0\"): number {\n    if (String(s).includes(\"%\")) {\n      return parseFloat(String(s));\n    }\n    return (parseFloat(String(s)) / (this.max - this.min)) * 100;\n  }\n}\n\nexport default LoadingProgress;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"loading-progress\": LoadingProgress;\n  }\n}\n"]}

package/web-components/loading/skeleton-screen.js

@@ -25,9 +25,24 @@ let SkeletonScreen = class SkeletonScreen extends GodownElement {
          */
         this.loading = true;
     }
-    static { this.styles = [
-        GodownElement.styles,
-        css `
+    render() {
+        if (this.loading) {
+            return html `<p class="${this.animation}">${this.renderIcon()}</p>`;
+        }
+        return htmlSlot();
+    }
+    renderIcon() {
+        switch (this.type) {
+            case "text":
+                return htmlSlot("icon");
+            case "image":
+                return svgImage();
+        }
+    }
+};
+SkeletonScreen.styles = [
+    GodownElement.styles,
+    css `
       :host {
         display: block;
         min-height: 1.5em;
@@ -104,22 +119,7 @@ let SkeletonScreen = class SkeletonScreen extends GodownElement {
         justify-content: center;
       }
     `,
-    ]; }
-    render() {
-        if (this.loading) {
-            return html `<p class="${this.animation}">${this.renderIcon()}</p>`;
-        }
-        return htmlSlot();
-    }
-    renderIcon() {
-        switch (this.type) {
-            case "text":
-                return htmlSlot("icon");
-            case "image":
-                return svgImage();
-        }
-    }
-};
+];
 __decorate([
     property()
 ], SkeletonScreen.prototype, "type", void 0);

package/web-components/loading/skeleton-screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-screen.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/loading/skeleton-screen.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAuB,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAqB,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEjF,MAAM,UAAU,GAAG,iBAAiB,CAAC;AACrC,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAE5C;;;;GAIG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,aAAa;IAA1C;;QACL;;WAEG;QACS,SAAI,GAAqB,MAAM,CAAC;QAC5C;;WAEG;QACS,cAAS,GAA2B,UAAU,CAAC;QAC3D;;WAEG;QACM,YAAO,GAAG,IAAI,CAAC;IAkG1B,CAAC;aAhGQ,WAAM,GAAG;QACd,aAAa,CAAC,MAAM;QACpB,GAAG,CAAA;;;;;;UAMG,WAAW,mBAAmB,YAAY,CAAC,OAAO;UAClD,WAAW,iBAAiB,YAAY,CAAC,OAAO;UAChD,WAAW;UACX,WAAW,oBAAoB,YAAY,CAAC,OAAO;UACnD,WAAW,qBAAqB,YAAY,CAAC,IAAI;UACjD,WAAW;UACX,WAAW;UACX,WAAW;UACX,WAAW;qBACA,WAAW;0BACN,WAAW;;;;;;yBAMZ,WAAW;;;;gDAIY,WAAW,eAAe,WAAW,oBAAoB,WAAW,kBAAkB,WAAW;;;;;;;;;;;;;;;;0BAgBvH,WAAW;;;;;;;;;;;;;;;oBAejB,WAAW;;;;;qBAKV,WAAW;sBACV,WAAW;;;;sBAIX,WAAW;;;;;;;;;KAS5B;KACgB,AA/EN,CA+EO;IAEV,MAAM;QACd,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,IAAI,CAAA,aAAa,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC;QACrE,CAAC;QACD,OAAO,QAAQ,EAAE,CAAC;IACpB,CAAC;IAEO,UAAU;QAChB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,MAAM;gBACT,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC;YAC1B,KAAK,OAAO;gBACV,OAAO,QAAQ,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;;AAzGW;IAAX,QAAQ,EAAE;4CAAiC;AAIhC;IAAX,QAAQ,EAAE;iDAAgD;AAIlD;IAAR,KAAK,EAAE;+CAAgB;AAZb,cAAc;IAD1B,MAAM,CAAC,UAAU,CAAC;GACN,cAAc,CA8G1B;;AAED,eAAe,cAAc,CAAC","sourcesContent":["import { css, type CSSResultGroup, html, property, state } from \"../../deps.js\";\nimport { htmlSlot, type HTMLTemplate, svgImage } from \"../../lib/templates.js\";\nimport { createScope, cssvarValues, define, GodownElement } from \"../../root.js\";\n\nconst defineName = \"skeleton-screen\";\nconst cssvarScope = createScope(defineName);\n\n/**\n * SkeletonScreen renders a skeleton screen.\n *\n * Inspired by Ant-design.\n */\n@define(defineName)\nexport class SkeletonScreen extends GodownElement {\n  /**\n   * Skeleton type.\n   */\n  @property() type: \"text\" | \"image\" = \"text\";\n  /**\n   * Animation type.\n   */\n  @property() animation: \"position\" | \"opacity\" = \"position\";\n  /**\n   * If false, hidden.\n   */\n  @state() loading = true;\n\n  static styles = [\n    GodownElement.styles,\n    css`\n      :host {\n        display: block;\n        min-height: 1.5em;\n        width: 100%;\n        overflow: hidden;\n        ${cssvarScope}--from: rgb(var(${cssvarValues.textRGB}) / 7.5%);\n        ${cssvarScope}--to: rgb(var(${cssvarValues.textRGB}) / 20%);\n        ${cssvarScope}--deg: 94deg;\n        ${cssvarScope}--color: rgb(var(${cssvarValues.textRGB}) / 50%);\n        ${cssvarScope}--background: var(${cssvarValues.main});\n        ${cssvarScope}--duration: 1.5s;\n        ${cssvarScope}--icon-width: 5em;\n        ${cssvarScope}--icon-height: 5em;\n        ${cssvarScope}--icon-margin: .75em;\n        color: var(${cssvarScope}--color);\n        background: var(${cssvarScope}--background);\n      }\n\n      p {\n        height: 100%;\n        min-height: inherit;\n        animation: var(${cssvarScope}--duration) ease-in-out 0s infinite none running;\n      }\n\n      p.position {\n        background-image: linear-gradient(var(${cssvarScope}--deg), var(${cssvarScope}--from) 36%, var(${cssvarScope}--to) 50%, var(${cssvarScope}--from) 64%);\n        background-color: transparent;\n        background-size: 200% 100%;\n        animation-name: po;\n      }\n\n      @keyframes po {\n        from {\n          background-position: 150% center;\n        }\n        to {\n          background-position: -50% center;\n        }\n      }\n\n      p.opacity {\n        background: var(${cssvarScope}--from);\n        animation-name: op;\n        animation-direction: alternate;\n      }\n\n      @keyframes op {\n        50% {\n          opacity: 0.2;\n        }\n        to {\n          opacity: 1;\n        }\n      }\n\n      path {\n        fill: var(${cssvarScope}--color);\n      }\n\n      svg,\n      slot {\n        width: var(${cssvarScope}--icon-width);\n        height: var(${cssvarScope}--icon-height);\n      }\n\n      svg {\n        margin: var(${cssvarScope}--icon-margin);\n      }\n\n      p,\n      svg {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    if (this.loading) {\n      return html`<p class=\"${this.animation}\">${this.renderIcon()}</p>`;\n    }\n    return htmlSlot();\n  }\n\n  private renderIcon(): HTMLTemplate {\n    switch (this.type) {\n      case \"text\":\n        return htmlSlot(\"icon\");\n      case \"image\":\n        return svgImage();\n    }\n  }\n}\n\nexport default SkeletonScreen;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"skeleton-screen\": SkeletonScreen;\n  }\n}\n"]}
+{"version":3,"file":"skeleton-screen.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/loading/skeleton-screen.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAuB,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAqB,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEjF,MAAM,UAAU,GAAG,iBAAiB,CAAC;AACrC,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAE5C;;;;GAIG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,aAAa;IAA1C;;QACL;;WAEG;QACS,SAAI,GAAqB,MAAM,CAAC;QAC5C;;WAEG;QACS,cAAS,GAA2B,UAAU,CAAC;QAC3D;;WAEG;QACM,YAAO,GAAG,IAAI,CAAC;IAkG1B,CAAC;IAfW,MAAM;QACd,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,IAAI,CAAA,aAAa,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC;QACrE,CAAC;QACD,OAAO,QAAQ,EAAE,CAAC;IACpB,CAAC;IAEO,UAAU;QAChB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,MAAM;gBACT,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC;YAC1B,KAAK,OAAO;gBACV,OAAO,QAAQ,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;;AA/FM,qBAAM,GAAG;IACd,aAAa,CAAC,MAAM;IACpB,GAAG,CAAA;;;;;;UAMG,WAAW,mBAAmB,YAAY,CAAC,OAAO;UAClD,WAAW,iBAAiB,YAAY,CAAC,OAAO;UAChD,WAAW;UACX,WAAW,oBAAoB,YAAY,CAAC,OAAO;UACnD,WAAW,qBAAqB,YAAY,CAAC,IAAI;UACjD,WAAW;UACX,WAAW;UACX,WAAW;UACX,WAAW;qBACA,WAAW;0BACN,WAAW;;;;;;yBAMZ,WAAW;;;;gDAIY,WAAW,eAAe,WAAW,oBAAoB,WAAW,kBAAkB,WAAW;;;;;;;;;;;;;;;;0BAgBvH,WAAW;;;;;;;;;;;;;;;oBAejB,WAAW;;;;;qBAKV,WAAW;sBACV,WAAW;;;;sBAIX,WAAW;;;;;;;;;KAS5B;CACgB,AA/EN,CA+EO;AAzFR;IAAX,QAAQ,EAAE;4CAAiC;AAIhC;IAAX,QAAQ,EAAE;iDAAgD;AAIlD;IAAR,KAAK,EAAE;+CAAgB;AAZb,cAAc;IAD1B,MAAM,CAAC,UAAU,CAAC;GACN,cAAc,CA8G1B;;AAED,eAAe,cAAc,CAAC","sourcesContent":["import { css, type CSSResultGroup, html, property, state } from \"../../deps.js\";\nimport { htmlSlot, type HTMLTemplate, svgImage } from \"../../lib/templates.js\";\nimport { createScope, cssvarValues, define, GodownElement } from \"../../root.js\";\n\nconst defineName = \"skeleton-screen\";\nconst cssvarScope = createScope(defineName);\n\n/**\n * SkeletonScreen renders a skeleton screen.\n *\n * Inspired by Ant-design.\n */\n@define(defineName)\nexport class SkeletonScreen extends GodownElement {\n  /**\n   * Skeleton type.\n   */\n  @property() type: \"text\" | \"image\" = \"text\";\n  /**\n   * Animation type.\n   */\n  @property() animation: \"position\" | \"opacity\" = \"position\";\n  /**\n   * If false, hidden.\n   */\n  @state() loading = true;\n\n  static styles = [\n    GodownElement.styles,\n    css`\n      :host {\n        display: block;\n        min-height: 1.5em;\n        width: 100%;\n        overflow: hidden;\n        ${cssvarScope}--from: rgb(var(${cssvarValues.textRGB}) / 7.5%);\n        ${cssvarScope}--to: rgb(var(${cssvarValues.textRGB}) / 20%);\n        ${cssvarScope}--deg: 94deg;\n        ${cssvarScope}--color: rgb(var(${cssvarValues.textRGB}) / 50%);\n        ${cssvarScope}--background: var(${cssvarValues.main});\n        ${cssvarScope}--duration: 1.5s;\n        ${cssvarScope}--icon-width: 5em;\n        ${cssvarScope}--icon-height: 5em;\n        ${cssvarScope}--icon-margin: .75em;\n        color: var(${cssvarScope}--color);\n        background: var(${cssvarScope}--background);\n      }\n\n      p {\n        height: 100%;\n        min-height: inherit;\n        animation: var(${cssvarScope}--duration) ease-in-out 0s infinite none running;\n      }\n\n      p.position {\n        background-image: linear-gradient(var(${cssvarScope}--deg), var(${cssvarScope}--from) 36%, var(${cssvarScope}--to) 50%, var(${cssvarScope}--from) 64%);\n        background-color: transparent;\n        background-size: 200% 100%;\n        animation-name: po;\n      }\n\n      @keyframes po {\n        from {\n          background-position: 150% center;\n        }\n        to {\n          background-position: -50% center;\n        }\n      }\n\n      p.opacity {\n        background: var(${cssvarScope}--from);\n        animation-name: op;\n        animation-direction: alternate;\n      }\n\n      @keyframes op {\n        50% {\n          opacity: 0.2;\n        }\n        to {\n          opacity: 1;\n        }\n      }\n\n      path {\n        fill: var(${cssvarScope}--color);\n      }\n\n      svg,\n      slot {\n        width: var(${cssvarScope}--icon-width);\n        height: var(${cssvarScope}--icon-height);\n      }\n\n      svg {\n        margin: var(${cssvarScope}--icon-margin);\n      }\n\n      p,\n      svg {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    if (this.loading) {\n      return html`<p class=\"${this.animation}\">${this.renderIcon()}</p>`;\n    }\n    return htmlSlot();\n  }\n\n  private renderIcon(): HTMLTemplate {\n    switch (this.type) {\n      case \"text\":\n        return htmlSlot(\"icon\");\n      case \"image\":\n        return svgImage();\n    }\n  }\n}\n\nexport default SkeletonScreen;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"skeleton-screen\": SkeletonScreen;\n  }\n}\n"]}

package/web-components/open/open-details.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"open-details.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/open/open-details.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAyB,MAAM,eAAe,CAAC;AAEhF,OAAO,EAAY,KAAK,YAAY,EAAkB,MAAM,wBAAwB,CAAC;AAErF,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAI5C;;GAEG;AACH,qBACa,WAAY,SAAQ,eAAe;IAC9C;;OAEG;IAC0B,IAAI,UAAS;IAC1C;;OAEG;IAC0B,OAAO,UAAS;IAEhC,GAAG,EAAE,mBAAmB,CAAC;IAEtC,MAAM,CAAC,MAAM,iBAiBO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;IAYhC,OAAO,CAAC,UAAU;IAOlB,SAAS,CAAC,YAAY;CAKvB;AAED,eAAe,WAAW,CAAC;AAE3B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
+{"version":3,"file":"open-details.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/open/open-details.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAyB,MAAM,eAAe,CAAC;AAChF,OAAO,EAAY,KAAK,YAAY,EAAkB,MAAM,wBAAwB,CAAC;AAErF,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAM5C;;GAEG;AACH,qBACa,WAAY,SAAQ,eAAe;IAC9C;;OAEG;IAC0B,IAAI,UAAS;IAC1C;;OAEG;IAC0B,OAAO,UAAS;IAEhC,GAAG,EAAE,mBAAmB,CAAC;IAEtC,MAAM,CAAC,MAAM,iBAoEO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;IAYhC,OAAO,CAAC,UAAU;IAOlB,SAAS,CAAC,YAAY;CAKvB;AAED,eAAe,WAAW,CAAC;AAE3B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/web-components/open/open-details.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { css, html, property, query } from "../../deps.js";
-import { ifValue } from "../../lib/directives.js";
 import { htmlSlot, svgDeltaSmooth } from "../../lib/templates.js";
-import { define } from "../../root.js";
+import { createScope, cssvarValues, define } from "../../root.js";
 import { OpenableElement } from "./open.js";
 const defineName = "open-details";
+const cssvarScope = createScope(defineName);
 /**
  * OpenDetails similar to details.
  */
@@ -20,29 +20,11 @@ let OpenDetails = class OpenDetails extends OpenableElement {
          */
         this.reverse = false;
     }
-    static { this.styles = [
-        OpenableElement.styles,
-        css `
-      i {
-        height: 1.2em;
-        min-width: 1.2em;
-        aspect-ratio: 1/1;
-        display: flex;
-        margin-left: auto;
-        -webkit-backface-visibility: hidden;
-        backface-visibility: hidden;
-      }
-
-      :host([open]) i {
-        transform: rotate(-90deg) !important;
-      }
-    `,
-    ]; }
     render() {
         return html `<dl>
-      <dt @click="${this._handelClick}" style="flex-direction:row${ifValue(this.reverse, "-reverse")}">
+      <dt @click="${this._handelClick}">
         <span> ${this.summary || htmlSlot("summary")} </span>
-        <i style="transform: rotate(${ifValue(this.reverse, "-18")}0deg);"> ${this.renderIcon()} </i>
+        <i>${this.renderIcon()}</i>
       </dt>
       <dd>
         <section>${htmlSlot()}</section>
@@ -61,6 +43,75 @@ let OpenDetails = class OpenDetails extends OpenableElement {
         }
     }
 };
+OpenDetails.styles = [
+    OpenableElement.styles,
+    css `
+      :host {
+        color: var(${cssvarValues.text});
+        ${cssvarScope}--icon-deg-open: -90deg;
+        ${cssvarScope}--icon-deg: 0deg;
+        ${cssvarScope}--summary-direction: row;
+      }
+      span {
+        display: inline-flex;
+        align-items: center;
+        white-space: nowrap;
+      }
+
+      dl {
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+      }
+
+      dt {
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        background: inherit;
+        align-items: center;
+        height: 100%;
+        flex-direction: var(${cssvarScope}--summary-direction);
+      }
+
+      dd {
+        overflow: hidden;
+        display: grid;
+        grid-template-rows: 0fr;
+      }
+
+      * {
+        transition: inherit;
+      }
+
+      section {
+        min-height: 0;
+        overflow: hidden;
+      }
+
+      i {
+        height: 1em;
+        wdith: 1em;
+        display: flex;
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+        transform: rotate(var(${cssvarScope}--icon-deg));
+      }
+
+      :host([open]) dd {
+        grid-template-rows: 1fr;
+      }
+
+      :host([float]) dd {
+        top: 100%;
+        position: absolute;
+      }
+
+      :host([open]) i {
+        transform: rotate(var(${cssvarScope}--icon-deg-open));
+      }
+    `,
+];
 __decorate([
     property({ type: Boolean })
 ], OpenDetails.prototype, "fill", void 0);

package/web-components/open/open-details.js.map

@@ -1 +1 @@
-{"version":3,"file":"open-details.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/open/open-details.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAuB,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAqB,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACrF,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,MAAM,UAAU,GAAG,cAAc,CAAC;AAElC;;GAEG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,eAAe;IAAzC;;QACL;;WAEG;QAC0B,SAAI,GAAG,KAAK,CAAC;QAC1C;;WAEG;QAC0B,YAAO,GAAG,KAAK,CAAC;IA+C/C,CAAC;aA3CQ,WAAM,GAAG;QACd,eAAe,CAAC,MAAM;QACtB,GAAG,CAAA;;;;;;;;;;;;;;KAcF;KACgB,AAjBN,CAiBO;IAEV,MAAM;QACd,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,YAAY,8BAA8B,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC;iBACnF,IAAI,CAAC,OAAO,IAAI,QAAQ,CAAC,SAAS,CAAC;sCACd,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,YAAY,IAAI,CAAC,UAAU,EAAE;;;mBAG5E,QAAQ,EAAE;;UAEnB,CAAC;IACT,CAAC;IAEO,UAAU;QAChB,IAAI,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,EAAE,CAAC;YAC1C,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC1B,CAAC;QACD,OAAO,cAAc,EAAE,CAAC;IAC1B,CAAC;IAES,YAAY;QACpB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QACxD,CAAC;IACH,CAAC;;AAlD4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCAAc;AAIb;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAiB;AAEhC;IAAZ,KAAK,CAAC,IAAI,CAAC;wCAA0B;AAV3B,WAAW;IADvB,MAAM,CAAC,UAAU,CAAC;GACN,WAAW,CAuDvB;;AAED,eAAe,WAAW,CAAC","sourcesContent":["import { css, type CSSResultGroup, html, property, query } from \"../../deps.js\";\nimport { ifValue } from \"../../lib/directives.js\";\nimport { htmlSlot, type HTMLTemplate, svgDeltaSmooth } from \"../../lib/templates.js\";\nimport { define } from \"../../root.js\";\nimport { OpenableElement } from \"./open.js\";\n\nconst defineName = \"open-details\";\n\n/**\n * OpenDetails similar to details.\n */\n@define(defineName)\nexport class OpenDetails extends OpenableElement {\n  /**\n   * If it is true, the summary event scope will fill the element.\n   */\n  @property({ type: Boolean }) fill = false;\n  /**\n   * Reverse summary.\n   */\n  @property({ type: Boolean }) reverse = false;\n\n  @query(\"dd\") _dd: HTMLDataListElement;\n\n  static styles = [\n    OpenableElement.styles,\n    css`\n      i {\n        height: 1.2em;\n        min-width: 1.2em;\n        aspect-ratio: 1/1;\n        display: flex;\n        margin-left: auto;\n        -webkit-backface-visibility: hidden;\n        backface-visibility: hidden;\n      }\n\n      :host([open]) i {\n        transform: rotate(-90deg) !important;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    return html`<dl>\n      <dt @click=\"${this._handelClick}\" style=\"flex-direction:row${ifValue(this.reverse, \"-reverse\")}\">\n        <span> ${this.summary || htmlSlot(\"summary\")} </span>\n        <i style=\"transform: rotate(${ifValue(this.reverse, \"-18\")}0deg);\"> ${this.renderIcon()} </i>\n      </dt>\n      <dd>\n        <section>${htmlSlot()}</section>\n      </dd>\n    </dl>`;\n  }\n\n  private renderIcon(): HTMLTemplate {\n    if (this.querySelector(\"slot[name=icon]\")) {\n      return htmlSlot(\"icon\");\n    }\n    return svgDeltaSmooth();\n  }\n\n  protected firstUpdated() {\n    if (this.fill) {\n      this.addEvent(this._dd, \"click\", () => this.toggle());\n    }\n  }\n}\n\nexport default OpenDetails;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"open-details\": OpenDetails;\n  }\n}\n"]}
+{"version":3,"file":"open-details.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/open/open-details.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAuB,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAqB,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,MAAM,UAAU,GAAG,cAAc,CAAC;AAElC,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAE5C;;GAEG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,eAAe;IAAzC;;QACL;;WAEG;QAC0B,SAAI,GAAG,KAAK,CAAC;QAC1C;;WAEG;QAC0B,YAAO,GAAG,KAAK,CAAC;IAkG/C,CAAC;IAxBW,MAAM;QACd,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,YAAY;iBACpB,IAAI,CAAC,OAAO,IAAI,QAAQ,CAAC,SAAS,CAAC;aACvC,IAAI,CAAC,UAAU,EAAE;;;mBAGX,QAAQ,EAAE;;UAEnB,CAAC;IACT,CAAC;IAEO,UAAU;QAChB,IAAI,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,EAAE,CAAC;YAC1C,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC;QAC1B,CAAC;QACD,OAAO,cAAc,EAAE,CAAC;IAC1B,CAAC;IAES,YAAY;QACpB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QACxD,CAAC;IACH,CAAC;;AA7FM,kBAAM,GAAG;IACd,eAAe,CAAC,MAAM;IACtB,GAAG,CAAA;;qBAEc,YAAY,CAAC,IAAI;UAC5B,WAAW;UACX,WAAW;UACX,WAAW;;;;;;;;;;;;;;;;;;;;;8BAqBS,WAAW;;;;;;;;;;;;;;;;;;;;;;;;gCAwBT,WAAW;;;;;;;;;;;;;gCAaX,WAAW;;KAEtC;CACgB,AApEN,CAoEO;AA5ES;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCAAc;AAIb;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAiB;AAEhC;IAAZ,KAAK,CAAC,IAAI,CAAC;wCAA0B;AAV3B,WAAW;IADvB,MAAM,CAAC,UAAU,CAAC;GACN,WAAW,CA0GvB;;AAED,eAAe,WAAW,CAAC","sourcesContent":["import { css, type CSSResultGroup, html, property, query } from \"../../deps.js\";\nimport { htmlSlot, type HTMLTemplate, svgDeltaSmooth } from \"../../lib/templates.js\";\nimport { createScope, cssvarValues, define } from \"../../root.js\";\nimport { OpenableElement } from \"./open.js\";\n\nconst defineName = \"open-details\";\n\nconst cssvarScope = createScope(defineName);\n\n/**\n * OpenDetails similar to details.\n */\n@define(defineName)\nexport class OpenDetails extends OpenableElement {\n  /**\n   * If it is true, the summary event scope will fill the element.\n   */\n  @property({ type: Boolean }) fill = false;\n  /**\n   * Reverse summary.\n   */\n  @property({ type: Boolean }) reverse = false;\n\n  @query(\"dd\") _dd: HTMLDataListElement;\n\n  static styles = [\n    OpenableElement.styles,\n    css`\n      :host {\n        color: var(${cssvarValues.text});\n        ${cssvarScope}--icon-deg-open: -90deg;\n        ${cssvarScope}--icon-deg: 0deg;\n        ${cssvarScope}--summary-direction: row;\n      }\n      span {\n        display: inline-flex;\n        align-items: center;\n        white-space: nowrap;\n      }\n\n      dl {\n        height: 100%;\n        position: relative;\n        overflow: hidden;\n      }\n\n      dt {\n        display: flex;\n        flex-wrap: nowrap;\n        justify-content: space-between;\n        background: inherit;\n        align-items: center;\n        height: 100%;\n        flex-direction: var(${cssvarScope}--summary-direction);\n      }\n\n      dd {\n        overflow: hidden;\n        display: grid;\n        grid-template-rows: 0fr;\n      }\n\n      * {\n        transition: inherit;\n      }\n\n      section {\n        min-height: 0;\n        overflow: hidden;\n      }\n\n      i {\n        height: 1em;\n        wdith: 1em;\n        display: flex;\n        -webkit-backface-visibility: hidden;\n        backface-visibility: hidden;\n        transform: rotate(var(${cssvarScope}--icon-deg));\n      }\n\n      :host([open]) dd {\n        grid-template-rows: 1fr;\n      }\n\n      :host([float]) dd {\n        top: 100%;\n        position: absolute;\n      }\n\n      :host([open]) i {\n        transform: rotate(var(${cssvarScope}--icon-deg-open));\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    return html`<dl>\n      <dt @click=\"${this._handelClick}\">\n        <span> ${this.summary || htmlSlot(\"summary\")} </span>\n        <i>${this.renderIcon()}</i>\n      </dt>\n      <dd>\n        <section>${htmlSlot()}</section>\n      </dd>\n    </dl>`;\n  }\n\n  private renderIcon(): HTMLTemplate {\n    if (this.querySelector(\"slot[name=icon]\")) {\n      return htmlSlot(\"icon\");\n    }\n    return svgDeltaSmooth();\n  }\n\n  protected firstUpdated() {\n    if (this.fill) {\n      this.addEvent(this._dd, \"click\", () => this.toggle());\n    }\n  }\n}\n\nexport default OpenDetails;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"open-details\": OpenDetails;\n  }\n}\n"]}

package/web-components/open/open-dialog.d.ts

@@ -1,19 +1,15 @@
-import { type PropertyValueMap } from "../../deps.js";
+import { CSSResultGroup } from "../../deps.js";
 import { type HTMLTemplate } from "../../lib/templates.js";
-import { GodownElement } from "../../root.js";
-type Direction5 = "left" | "center" | "right" | "top" | "bottom";
+import OpenableElement, { Direction9 } from "./open.js";
 /**
  * OpenDialog similar to dialog.
  */
-export declare class OpenDialog extends GodownElement {
+export declare class OpenDialog extends OpenableElement {
+    direction: Direction9;
     /**
      * Enable modal.
      */
     modal: boolean;
-    /**
-     * Whether this element is activated.
-     */
-    open: boolean;
     /**
      * Enable scale.
      */
@@ -26,18 +22,11 @@ export declare class OpenDialog extends GodownElement {
      * Exit key, which can be multiple.
      */
     key: string;
-    /**
-     * The direction in which it appears.
-     */
-    direction: Direction5;
     _div: HTMLDivElement;
-    static styles: import("lit").CSSResult[];
+    static styles: CSSResultGroup;
     protected render(): HTMLTemplate;
     connectedCallback(): void;
-    show(): void;
     showModal(): void;
-    close(): void;
-    protected updated(changedProperties: PropertyValueMap<this>): void;
     protected _handleWheel(e: any): void;
     protected _handleKeydown(e: KeyboardEvent): void;
     protected _handelSubmit(e: SubmitEvent): void;

package/web-components/open/open-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"open-dialog.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/open/open-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,gBAAgB,EAAS,MAAM,eAAe,CAAC;AAClF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAwB,aAAa,EAAE,MAAM,eAAe,CAAC;AAEpE,KAAK,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAIjE;;GAEG;AACH,qBACa,UAAW,SAAQ,aAAa;IAC3C;;OAEG;IACyC,KAAK,UAAS;IAC1D;;OAEG;IACyC,IAAI,UAAS;IACzD;;OAEG;IAC0B,KAAK,UAAS;IAC3C;;OAEG;IACyB,GAAG,SAAO;IACtC;;OAEG;IACyB,GAAG,SAAY;IAC3C;;OAEG;IACyB,SAAS,EAAE,UAAU,CAAY;IAE/C,IAAI,EAAE,cAAc,CAAC;IAEnC,MAAM,CAAC,MAAM,4BA6EX;IAEF,SAAS,CAAC,MAAM,IAAI,YAAY;IAMhC,iBAAiB;IAcjB,IAAI;IAIJ,SAAS;IAKT,KAAK;IAIL,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC;IAO3D,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,GAAG;IAgB7B,SAAS,CAAC,cAAc,CAAC,CAAC,EAAE,aAAa;IAOzC,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,WAAW;CAKvC;AAED,eAAe,UAAU,CAAC;AAE1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"open-dialog.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/open/open-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAyB,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAErE,OAAO,eAAe,EAAE,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAIxD;;GAEG;AACH,qBACa,UAAW,SAAQ,eAAe;IAC7C,SAAS,EAAE,UAAU,CAAY;IACjC;;OAEG;IACyC,KAAK,UAAS;IAC1D;;OAEG;IAC0B,KAAK,UAAS;IAC3C;;OAEG;IACyB,GAAG,SAAO;IACtC;;OAEG;IACyB,GAAG,SAAY;IAE7B,IAAI,EAAE,cAAc,CAAC;IAEnC,MAAM,CAAC,MAAM,EAAE,cAAc,CAkG3B;IAEF,SAAS,CAAC,MAAM,IAAI,YAAY;IAIhC,iBAAiB;IAcjB,SAAS;IAKT,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,GAAG;IAU7B,SAAS,CAAC,cAAc,CAAC,CAAC,EAAE,aAAa;IAOzC,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,WAAW;CAKvC;AAED,eAAe,UAAU,CAAC;AAE1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/web-components/open/open-dialog.js

@@ -1,21 +1,20 @@
 import { __decorate } from "tslib";
 import { css, html, property, query } from "../../deps.js";
-import { cssvarValues, define, GodownElement } from "../../root.js";
+import { htmlSlot } from "../../lib/templates.js";
+import { cssvar, cssvarValues, define } from "../../root.js";
+import OpenableElement from "./open.js";
 const defineName = "open-dialog";
 /**
  * OpenDialog similar to dialog.
  */
-let OpenDialog = class OpenDialog extends GodownElement {
+let OpenDialog = class OpenDialog extends OpenableElement {
     constructor() {
         super(...arguments);
+        this.direction = "center";
         /**
          * Enable modal.
          */
         this.modal = false;
-        /**
-         * Whether this element is activated.
-         */
-        this.open = false;
         /**
          * Enable scale.
          */
@@ -23,19 +22,70 @@ let OpenDialog = class OpenDialog extends GodownElement {
         /**
          * Scale gap.
          */
-        this.gap = 0.1;
+        this.gap = 0.2;
         /**
          * Exit key, which can be multiple.
          */
         this.key = "Escape";
-        /**
-         * The direction in which it appears.
-         */
-        this.direction = "center";
     }
-    static { this.styles = [
-        css `
+    render() {
+        return html `<div style="--s:1" class="${this.direction}">${htmlSlot()}</div>`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEvent(this, "submit", this._handelSubmit);
+        if (this.scale && this.direction === "center") {
+            this.addEvent(this, "wheel", this._handleWheel);
+        }
+        if (this.key) {
+            this.addEvent(document, "keydown", this._handleKeydown.bind(this));
+        }
+        if (this.open) {
+            this.show();
+        }
+    }
+    showModal() {
+        this.modal = true;
+        this.show();
+    }
+    _handleWheel(e) {
+        let scale = Number(this._div.style.getPropertyValue("--s"));
+        if (e.deltaY > 0) {
+            scale -= this.gap;
+        }
+        else {
+            scale += this.gap;
+        }
+        this._div.style.setProperty("--s", `${scale}`);
+    }
+    _handleKeydown(e) {
+        const keys = this.key.split(/[^a-zA-Z0-9]/).filter((s) => s);
+        if (keys.includes(e.key) || keys.includes(e.code)) {
+            this.close();
+        }
+    }
+    _handelSubmit(e) {
+        if (e.target.method === "dialog") {
+            this.close();
+        }
+    }
+};
+OpenDialog.styles = [
+    OpenableElement.styles,
+    css `
+      :host {
+        display: block;
+        transition:
+          all 0.3s ease-in-out,
+          color 0s,
+          background 0s;
+        height: fit-content;
+      }
+    `,
+    css `
       :host {
+        ${cssvar}--background: rgb(var(${cssvarValues.mainRGB}) / 0%);
+        ${cssvar}--background-modal: rgb(var(${cssvarValues.mainRGB}) / 15%);
         position: fixed;
         height: 100%;
         width: 100%;
@@ -46,7 +96,7 @@ let OpenDialog = class OpenDialog extends GodownElement {
         transition: all 0.3s;
         display: flex;
         visibility: hidden;
-        background: rgb(${cssvarValues.mainRGB} / 0%);
+        background: var(${cssvar}--background);
         pointer-events: none;
       }
 
@@ -57,7 +107,7 @@ let OpenDialog = class OpenDialog extends GodownElement {
       :host([open][modal]) {
         pointer-events: all;
         backdrop-filter: blur(0.25px);
-        background: rgb(${cssvarValues.mainRGB} / 20%);
+        background: var(${cssvar}--background-modal);
       }
 
       :host([open]) slot {
@@ -70,6 +120,7 @@ let OpenDialog = class OpenDialog extends GodownElement {
         width: 100%;
         display: flex;
         transition: inherit;
+        transform: scale(var(--s));
       }
 
       slot {
@@ -82,103 +133,45 @@ let OpenDialog = class OpenDialog extends GodownElement {
         pointer-events: all;
       }
 
-      .center {
-        transform: translateY(-15%);
+      div {
+        position: relative;
       }
 
-      .top {
-        width: 100%;
-        margin-top: 0;
-        transform: translateY(-15%);
+      slot {
+        position: absolute;
       }
 
-      .right {
-        height: 100%;
-        margin-right: 0;
-        transform: translateX(15%);
+      [class^="top"] slot {
+        top: 0;
       }
 
-      .bottom {
-        width: 100%;
-        margin-bottom: 0;
-        transform: translateY(15%);
+      [class^="bottom"] slot {
+        bottom: 0;
       }
 
-      .left {
-        height: 100%;
-        margin-left: 0;
-        transform: translateX(-15%);
+      [class$="right"] slot {
+        right: 0%;
+      }
+
+      [class$="left"] slot {
+        left: 0%;
+      }
+
+      div[class$="center"],
+      .top,
+      .left,
+      .right,
+      .bottom {
+        align-items: center;
+        justify-content: center;
+        align-items: center;
+        justify-content: center;
       }
     `,
-    ]; }
-    render() {
-        return html `<div>
-      <slot class="${this.direction}"></slot>
-    </div>`;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEvent(this, "submit", this._handelSubmit);
-        if (this.scale) {
-            this.addEvent(this, "wheel", this._handleWheel);
-        }
-        if (this.key) {
-            this.addEvent(document, "keydown", this._handleKeydown.bind(this));
-        }
-        if (this.open) {
-            this.show();
-        }
-    }
-    show() {
-        this.open = true;
-    }
-    showModal() {
-        this.modal = true;
-        this.show();
-    }
-    close() {
-        this.open = false;
-    }
-    updated(changedProperties) {
-        const hasOpen = changedProperties.has("open");
-        if (hasOpen) {
-            this.dispatchEvent(new CustomEvent(this.open ? "open" : "close"));
-        }
-    }
-    _handleWheel(e) {
-        if (this.scale) {
-            const s = this._div.style.transform.match(/scale\((.*)\)/);
-            let scale = 1;
-            if (s) {
-                scale = Number(s[1]);
-            }
-            if (e.deltaY > 0) {
-                scale -= this.gap;
-            }
-            else {
-                scale += this.gap;
-            }
-            this._div.style.transform = `scale(${scale})`;
-        }
-    }
-    _handleKeydown(e) {
-        const keys = this.key.split(/[^a-zA-Z0-9]/).filter((s) => s);
-        if (keys.includes(e.key) || keys.includes(e.code)) {
-            this.close();
-        }
-    }
-    _handelSubmit(e) {
-        if (e.target.method === "dialog") {
-            this.close();
-        }
-    }
-};
+];
 __decorate([
     property({ type: Boolean, reflect: true })
 ], OpenDialog.prototype, "modal", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], OpenDialog.prototype, "open", void 0);
 __decorate([
     property({ type: Boolean })
 ], OpenDialog.prototype, "scale", void 0);
@@ -188,9 +181,6 @@ __decorate([
 __decorate([
     property({ type: String })
 ], OpenDialog.prototype, "key", void 0);
-__decorate([
-    property({ type: String })
-], OpenDialog.prototype, "direction", void 0);
 __decorate([
     query("div")
 ], OpenDialog.prototype, "_div", void 0);