godown 2.6.0 → 2.6.2

package/web-components/items/time-bar.js

@@ -6,7 +6,7 @@ const defineName = "time-bar";
 /**
  * TimeBar renders a formatting time.
  */
-let TimeBar = class TimeBar extends GodownElement {
+let TimeBar = TimeBar_1 = class TimeBar extends GodownElement {
     constructor() {
         super(...arguments);
         /**
@@ -31,14 +31,6 @@ let TimeBar = class TimeBar extends GodownElement {
          */
         this.gap = 0;
     }
-    static { TimeBar_1 = this; }
-    static { this.styles = [
-        css `
-      :host {
-        text-align: center;
-      }
-    `,
-    ]; }
     render() {
         return this.value || TimeBar_1.fmt(this.format, this.time);
     }
@@ -102,6 +94,13 @@ let TimeBar = class TimeBar extends GodownElement {
         });
     }
 };
+TimeBar.styles = [
+    css `
+      :host {
+        text-align: center;
+      }
+    `,
+];
 __decorate([
     property()
 ], TimeBar.prototype, "format", void 0);

package/web-components/items/time-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-bar.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/items/time-bar.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,GAAG,EAAuB,QAAQ,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEtD,MAAM,UAAU,GAAG,UAAU,CAAC;AAE9B;;GAEG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,aAAa;IAAnC;;QACL;;;WAGG;QACS,WAAM,GAAG,0BAA0B,CAAC;QAChD;;WAEG;QACS,UAAK,GAAG,EAAE,CAAC;QACvB;;WAEG;QACyB,SAAI,GAAG,IAAI,IAAI,EAAE,CAAC;QAC9C;;WAEG;QACyB,YAAO,GAAG,CAAC,CAAC;QACxC;;WAEG;QACyB,QAAG,GAAG,CAAC,CAAC;IA4EtC,CAAC;;aAxEQ,WAAM,GAAmB;QAC9B,GAAG,CAAA;;;;KAIF;KACF,AANY,CAMX;IAEQ,MAAM;QACd,OAAO,IAAI,CAAC,KAAK,IAAI,SAAO,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3D,CAAC;IAES,YAAY;QACpB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;gBACjC,IAAI,CAAC,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;YACzE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACjC,CAAC;IAED;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,GAAG,CAAC,EAAU,EAAE,EAAQ;QAC7B,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;YACd,OAAO,EAAE,CAAC;QACZ,CAAC;QACD,MAAM,IAAI,GAAG,EAAE,CAAC;QAChB,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,gBAAgB,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE;YAC1C,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACd,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;QACH,MAAM,YAAY,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QAClF,MAAM,CAAC,GAAG,EAAE,CAAC,iBAAiB,EAAE,GAAG,CAAC,EAAE,CAAC;QACvC,MAAM,QAAQ,GAA6B;YACzC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;YAC/C,CAAC,EAAE,EAAE,CAAC,WAAW,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;YACxC,CAAC,EAAE,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;YAClC,CAAC,EAAE,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC;YAC7B,CAAC,EAAE,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC;YAC9B,CAAC,EAAE,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;YAChC,CAAC,EAAE,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;SACjC,CAAC;QACF,MAAM,MAAM,GAAa,EAAE,CAAC;QAC5B,KAAK,MAAM,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC;YACvC,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;gBAChB,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;YAClC,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YACjB,CAAC;QACH,CAAC;QACD,OAAO,MAAM;aACV,OAAO,EAAE;aACT,IAAI,CAAC,EAAE,CAAC;aACR,OAAO,CAAC,KAAK,EAAE,GAAG,EAAE;YACnB,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC;QACtB,CAAC,CAAC,CAAC;IACP,CAAC;;AA3FW;IAAX,QAAQ,EAAE;uCAAqC;AAIpC;IAAX,QAAQ,EAAE;sCAAY;AAIK;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCAAmB;AAIlB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAa;AAIZ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAAS;AArBzB,OAAO;IADnB,MAAM,CAAC,UAAU,CAAC;GACN,OAAO,CAiGnB;;AAED,eAAe,OAAO,CAAC","sourcesContent":["import { css, type CSSResultGroup, property } from \"../../deps.js\";\nimport { define, GodownElement } from \"../../root.js\";\n\nconst defineName = \"time-bar\";\n\n/**\n * TimeBar renders a formatting time.\n */\n@define(defineName)\nexport class TimeBar extends GodownElement {\n  /**\n   * Format strings.\n   * {@linkcode TimeBar.fmt}\n   */\n  @property() format = \"YYYY-MM-DD hh:mm:ss UTFZ\";\n  /**\n   * Display content.\n   */\n  @property() value = \"\";\n  /**\n   * Time.\n   */\n  @property({ type: Object }) time = new Date();\n  /**\n   * If there is a value, update every gap or timeout.\n   */\n  @property({ type: Number }) timeout = 0;\n  /**\n   * The number of milliseconds that change with each update.\n   */\n  @property({ type: Number }) gap = 0;\n\n  intervalID: number;\n\n  static styles: CSSResultGroup = [\n    css`\n      :host {\n        text-align: center;\n      }\n    `,\n  ];\n\n  protected render(): string {\n    return this.value || TimeBar.fmt(this.format, this.time);\n  }\n\n  protected firstUpdated() {\n    if (this.timeout) {\n      this.intervalID = setInterval(() => {\n        this.time = new Date(this.time.getTime() + (this.gap || this.timeout));\n      }, Math.abs(this.timeout));\n    }\n  }\n\n  disconnectedCallback() {\n    clearInterval(this.intervalID);\n  }\n\n  /**\n   * @param fm Format string.\n   * @param tm Time.\n   * @returns F.ormat result\\\n   *\n   * Y for years\\\n   * M for months\\\n   * D for days\\\n   * h for hours\\\n   * m for minutes\\\n   * s for seconds\\\n   * Z for time zones.\n   */\n  static fmt(fm: string, tm: Date): string {\n    if (fm === \"\") {\n      return fm;\n    }\n    const rest = [];\n    fm = fm.replace(/%([ZYMDhms%])/g, (_, p1) => {\n      rest.push(p1);\n      return \"%%\";\n    });\n    const formatNumber = (date: number) => date.toString().padStart(2, \"0\").split(\"\");\n    const z = tm.getTimezoneOffset() / -60;\n    const switcher: Record<string, string[]> = {\n      Z: [z >= 0 ? \"+\" + z.toString() : z.toString()],\n      Y: tm.getFullYear().toString().split(\"\"),\n      M: formatNumber(tm.getMonth() + 1),\n      D: formatNumber(tm.getDate()),\n      h: formatNumber(tm.getHours()),\n      m: formatNumber(tm.getMinutes()),\n      s: formatNumber(tm.getSeconds()),\n    };\n    const result: string[] = [];\n    for (const f of fm.split(\"\").reverse()) {\n      if (switcher[f]) {\n        result.push(switcher[f]?.pop());\n      } else {\n        result.push(f);\n      }\n    }\n    return result\n      .reverse()\n      .join(\"\")\n      .replace(/%%/g, () => {\n        return rest.shift();\n      });\n  }\n}\n\nexport default TimeBar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"time-bar\": TimeBar;\n  }\n}\n"]}
+{"version":3,"file":"time-bar.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/items/time-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, type CSSResultGroup, property } from \"../../deps.js\";\nimport { define, GodownElement } from \"../../root.js\";\n\nconst defineName = \"time-bar\";\n\n/**\n * TimeBar renders a formatting time.\n */\n@define(defineName)\nexport class TimeBar extends GodownElement {\n  /**\n   * Format strings.\n   * {@linkcode TimeBar.fmt}\n   */\n  @property() format = \"YYYY-MM-DD hh:mm:ss UTFZ\";\n  /**\n   * Display content.\n   */\n  @property() value = \"\";\n  /**\n   * Time.\n   */\n  @property({ type: Object }) time = new Date();\n  /**\n   * If there is a value, update every gap or timeout.\n   */\n  @property({ type: Number }) timeout = 0;\n  /**\n   * The number of milliseconds that change with each update.\n   */\n  @property({ type: Number }) gap = 0;\n\n  intervalID: number;\n\n  static styles: CSSResultGroup = [\n    css`\n      :host {\n        text-align: center;\n      }\n    `,\n  ];\n\n  protected render(): string {\n    return this.value || TimeBar.fmt(this.format, this.time);\n  }\n\n  protected firstUpdated() {\n    if (this.timeout) {\n      this.intervalID = setInterval(() => {\n        this.time = new Date(this.time.getTime() + (this.gap || this.timeout));\n      }, Math.abs(this.timeout));\n    }\n  }\n\n  disconnectedCallback() {\n    clearInterval(this.intervalID);\n  }\n\n  /**\n   * @param fm Format string.\n   * @param tm Time.\n   * @returns F.ormat result\\\n   *\n   * Y for years\\\n   * M for months\\\n   * D for days\\\n   * h for hours\\\n   * m for minutes\\\n   * s for seconds\\\n   * Z for time zones.\n   */\n  static fmt(fm: string, tm: Date): string {\n    if (fm === \"\") {\n      return fm;\n    }\n    const rest = [];\n    fm = fm.replace(/%([ZYMDhms%])/g, (_, p1) => {\n      rest.push(p1);\n      return \"%%\";\n    });\n    const formatNumber = (date: number) => date.toString().padStart(2, \"0\").split(\"\");\n    const z = tm.getTimezoneOffset() / -60;\n    const switcher: Record<string, string[]> = {\n      Z: [z >= 0 ? \"+\" + z.toString() : z.toString()],\n      Y: tm.getFullYear().toString().split(\"\"),\n      M: formatNumber(tm.getMonth() + 1),\n      D: formatNumber(tm.getDate()),\n      h: formatNumber(tm.getHours()),\n      m: formatNumber(tm.getMinutes()),\n      s: formatNumber(tm.getSeconds()),\n    };\n    const result: string[] = [];\n    for (const f of fm.split(\"\").reverse()) {\n      if (switcher[f]) {\n        result.push(switcher[f]?.pop());\n      } else {\n        result.push(f);\n      }\n    }\n    return result\n      .reverse()\n      .join(\"\")\n      .replace(/%%/g, () => {\n        return rest.shift();\n      });\n  }\n}\n\nexport default TimeBar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"time-bar\": TimeBar;\n  }\n}\n"]}

package/web-components/layout/divider-line.js

@@ -15,8 +15,16 @@ let DividerLine = class DividerLine extends GodownElement {
          */
         this.v = false;
     }
-    static { this.styles = [
-        css `
+    render() {
+        return html `<div class="${this.v ? "v" : ""}">
+      <hr class="before" />
+      ${htmlSlot()}
+      <hr class="after" />
+    </div>`;
+    }
+};
+DividerLine.styles = [
+    css `
       :host {
         ${cssvarScope}--before-length: auto;
         ${cssvarScope}--after-length: auto;
@@ -64,15 +72,7 @@ let DividerLine = class DividerLine extends GodownElement {
         max-height: var(${cssvarScope}--after-length);
       }
     `,
-    ]; }
-    render() {
-        return html `<div class="${this.v ? "v" : ""}">
-      <hr class="before" />
-      ${htmlSlot()}
-      <hr class="after" />
-    </div>`;
-    }
-};
+];
 __decorate([
     property({ type: Boolean })
 ], DividerLine.prototype, "v", void 0);

package/web-components/layout/divider-line.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider-line.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/layout/divider-line.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAqB,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnE,MAAM,UAAU,GAAG,cAAc,CAAC;AAClC,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAE5C;;GAEG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,aAAa;IAAvC;;QACL;;WAEG;QAC0B,MAAC,GAAG,KAAK,CAAC;IA4DzC,CAAC;aA1DQ,WAAM,GAAG;QACd,GAAG,CAAA;;UAEG,WAAW;UACX,WAAW;UACX,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA4BC,WAAW;yBACR,WAAW;;;sBAGd,WAAW;yBACR,WAAW;;;qBAGf,WAAW;0BACN,WAAW;;;qBAGhB,WAAW;0BACN,WAAW;;KAEhC;KACF,AAjDY,CAiDX;IAEQ,MAAM;QACd,OAAO,IAAI,CAAA,eAAe,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;;QAEvC,QAAQ,EAAE;;WAEP,CAAC;IACV,CAAC;;AA3D4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCAAW;AAJ5B,WAAW;IADvB,MAAM,CAAC,UAAU,CAAC;GACN,WAAW,CAgEvB;;AAED,eAAe,WAAW,CAAC","sourcesContent":["import { css, html, property } from \"../../deps.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { createScope, define, GodownElement } from \"../../root.js\";\n\nconst defineName = \"divider-line\";\nconst cssvarScope = createScope(defineName);\n\n/**\n * DividerLine similar to hr.\n */\n@define(defineName)\nexport class DividerLine extends GodownElement {\n  /**\n   * Enable vertical.\n   */\n  @property({ type: Boolean }) v = false;\n\n  static styles = [\n    css`\n      :host {\n        ${cssvarScope}--before-length: auto;\n        ${cssvarScope}--after-length: auto;\n        ${cssvarScope}--breadth: .125em;\n        display: block;\n        color: currentColor;\n        background: none;\n      }\n\n      div {\n        display: flex;\n        align-items: center;\n        border-radius: inherit;\n        width: 100%;\n      }\n\n      hr {\n        border-radius: inherit;\n        margin: 0;\n        border: 0;\n        flex: 1;\n        background: currentColor;\n      }\n\n      .v {\n        height: 100%;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .before {\n        height: var(${cssvarScope}--breadth);\n        max-width: var(${cssvarScope}--before-length);\n      }\n      .after {\n        height: var(${cssvarScope}--breadth);\n        max-width: var(${cssvarScope}--after-length);\n      }\n      .v .before {\n        width: var(${cssvarScope}--breadth);\n        max-height: var(${cssvarScope}--before-length);\n      }\n      .v .after {\n        width: var(${cssvarScope}--breadth);\n        max-height: var(${cssvarScope}--after-length);\n      }\n    `,\n  ];\n\n  protected render(): HTMLTemplate {\n    return html`<div class=\"${this.v ? \"v\" : \"\"}\">\n      <hr class=\"before\" />\n      ${htmlSlot()}\n      <hr class=\"after\" />\n    </div>`;\n  }\n}\n\nexport default DividerLine;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"divider-line\": DividerLine;\n  }\n}\n"]}
+{"version":3,"file":"divider-line.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/layout/divider-line.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAqB,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnE,MAAM,UAAU,GAAG,cAAc,CAAC;AAClC,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAE5C;;GAEG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,aAAa;IAAvC;;QACL;;WAEG;QAC0B,MAAC,GAAG,KAAK,CAAC;IA4DzC,CAAC;IAPW,MAAM;QACd,OAAO,IAAI,CAAA,eAAe,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;;QAEvC,QAAQ,EAAE;;WAEP,CAAC;IACV,CAAC;;AAzDM,kBAAM,GAAG;IACd,GAAG,CAAA;;UAEG,WAAW;UACX,WAAW;UACX,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA4BC,WAAW;yBACR,WAAW;;;sBAGd,WAAW;yBACR,WAAW;;;qBAGf,WAAW;0BACN,WAAW;;;qBAGhB,WAAW;0BACN,WAAW;;KAEhC;CACF,AAjDY,CAiDX;AAnD2B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCAAW;AAJ5B,WAAW;IADvB,MAAM,CAAC,UAAU,CAAC;GACN,WAAW,CAgEvB;;AAED,eAAe,WAAW,CAAC","sourcesContent":["import { css, html, property } from \"../../deps.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { createScope, define, GodownElement } from \"../../root.js\";\n\nconst defineName = \"divider-line\";\nconst cssvarScope = createScope(defineName);\n\n/**\n * DividerLine similar to hr.\n */\n@define(defineName)\nexport class DividerLine extends GodownElement {\n  /**\n   * Enable vertical.\n   */\n  @property({ type: Boolean }) v = false;\n\n  static styles = [\n    css`\n      :host {\n        ${cssvarScope}--before-length: auto;\n        ${cssvarScope}--after-length: auto;\n        ${cssvarScope}--breadth: .125em;\n        display: block;\n        color: currentColor;\n        background: none;\n      }\n\n      div {\n        display: flex;\n        align-items: center;\n        border-radius: inherit;\n        width: 100%;\n      }\n\n      hr {\n        border-radius: inherit;\n        margin: 0;\n        border: 0;\n        flex: 1;\n        background: currentColor;\n      }\n\n      .v {\n        height: 100%;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .before {\n        height: var(${cssvarScope}--breadth);\n        max-width: var(${cssvarScope}--before-length);\n      }\n      .after {\n        height: var(${cssvarScope}--breadth);\n        max-width: var(${cssvarScope}--after-length);\n      }\n      .v .before {\n        width: var(${cssvarScope}--breadth);\n        max-height: var(${cssvarScope}--before-length);\n      }\n      .v .after {\n        width: var(${cssvarScope}--breadth);\n        max-height: var(${cssvarScope}--after-length);\n      }\n    `,\n  ];\n\n  protected render(): HTMLTemplate {\n    return html`<div class=\"${this.v ? \"v\" : \"\"}\">\n      <hr class=\"before\" />\n      ${htmlSlot()}\n      <hr class=\"after\" />\n    </div>`;\n  }\n}\n\nexport default DividerLine;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"divider-line\": DividerLine;\n  }\n}\n"]}

package/web-components/layout/flex-flow.js

@@ -18,13 +18,6 @@ let FlexFlow = class FlexFlow extends GodownElement {
          */
         this.mobile = "720px";
     }
-    static { this.styles = [
-        css `
-      :host {
-        display: flex !important;
-      }
-    `,
-    ]; }
     render() {
         const flexflow = this.flexflow.split(/\s+/);
         const flexDirection = flexflow[0] || "row";
@@ -36,6 +29,13 @@ let FlexFlow = class FlexFlow extends GodownElement {
         return html `${htmlSlot()} ${htmlStyle(style)}`;
     }
 };
+FlexFlow.styles = [
+    css `
+      :host {
+        display: flex !important;
+      }
+    `,
+];
 __decorate([
     property()
 ], FlexFlow.prototype, "flexflow", void 0);

package/web-components/layout/flex-flow.js.map

@@ -1 +1 @@
-{"version":3,"file":"flex-flow.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/layout/flex-flow.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAqB,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEtD,MAAM,UAAU,GAAG,WAAW,CAAC;AAE/B;;GAEG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,aAAa;IAApC;;QACL;;WAEG;QACS,aAAQ,GAAG,0BAA0B,CAAC;QAClD;;WAEG;QACS,WAAM,GAAG,OAAO,CAAC;IAoB/B,CAAC;aAlBQ,WAAM,GAAG;QACd,GAAG,CAAA;;;;KAIF;KACF,AANY,CAMX;IAEQ,MAAM;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC5C,MAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC;QAC3C,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC;QACzC,MAAM,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,aAAa,IAAI,QAAQ,CAAC;QAChE,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,IAAI,QAAQ,CAAC;QACtD,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,IAAI,OAAO,CAAC;QACjC,MAAM,KAAK,GAAG,wBAAwB,aAAa,cAAc,QAAQ,uBAAuB,CAAC,0BAA0B,cAAc,cAAc,SAAS,GAAG,CAAC;QACpK,OAAO,IAAI,CAAA,GAAG,QAAQ,EAAE,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;IACjD,CAAC;;AAvBW;IAAX,QAAQ,EAAE;0CAAuC;AAItC;IAAX,QAAQ,EAAE;wCAAkB;AARlB,QAAQ;IADpB,MAAM,CAAC,UAAU,CAAC;GACN,QAAQ,CA4BpB;;AAED,eAAe,QAAQ,CAAC","sourcesContent":["import { css, html, property } from \"../../deps.js\";\nimport { htmlSlot, htmlStyle, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { define, GodownElement } from \"../../root.js\";\n\nconst defineName = \"flex-flow\";\n\n/**\n * FlexFlow controls the flex layout based on the width of the screen.\n */\n@define(defineName)\nexport class FlexFlow extends GodownElement {\n  /**\n   * The flex-flow behavior.\n   */\n  @property() flexflow = \"row nowrap column nowrap\";\n  /**\n   * The width of the screen for the position change.\n   */\n  @property() mobile = \"720px\";\n\n  static styles = [\n    css`\n      :host {\n        display: flex !important;\n      }\n    `,\n  ];\n\n  protected render(): HTMLTemplate {\n    const flexflow = this.flexflow.split(/\\s+/);\n    const flexDirection = flexflow[0] || \"row\";\n    const flexWrap = flexflow[1] || \"nowrap\";\n    const flexDirectionM = flexflow[2] || flexDirection || \"column\";\n    const flexWrapM = flexflow[3] || flexWrap || \"nowrap\";\n    const m = this.mobile || \"720px\";\n    const style = `:host{flex-direction:${flexDirection};flex-wrap:${flexWrap};}@media(max-width: ${m}){:host{flex-direction:${flexDirectionM};flex-wrap:${flexWrapM}}`;\n    return html`${htmlSlot()} ${htmlStyle(style)}`;\n  }\n}\n\nexport default FlexFlow;\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"flex-flow\": FlexFlow;\n  }\n}\n"]}
+{"version":3,"file":"flex-flow.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/layout/flex-flow.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAqB,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEtD,MAAM,UAAU,GAAG,WAAW,CAAC;AAE/B;;GAEG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,aAAa;IAApC;;QACL;;WAEG;QACS,aAAQ,GAAG,0BAA0B,CAAC;QAClD;;WAEG;QACS,WAAM,GAAG,OAAO,CAAC;IAoB/B,CAAC;IAVW,MAAM;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC5C,MAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC;QAC3C,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC;QACzC,MAAM,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,aAAa,IAAI,QAAQ,CAAC;QAChE,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,IAAI,QAAQ,CAAC;QACtD,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,IAAI,OAAO,CAAC;QACjC,MAAM,KAAK,GAAG,wBAAwB,aAAa,cAAc,QAAQ,uBAAuB,CAAC,0BAA0B,cAAc,cAAc,SAAS,GAAG,CAAC;QACpK,OAAO,IAAI,CAAA,GAAG,QAAQ,EAAE,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;IACjD,CAAC;;AAjBM,eAAM,GAAG;IACd,GAAG,CAAA;;;;KAIF;CACF,AANY,CAMX;AAZU;IAAX,QAAQ,EAAE;0CAAuC;AAItC;IAAX,QAAQ,EAAE;wCAAkB;AARlB,QAAQ;IADpB,MAAM,CAAC,UAAU,CAAC;GACN,QAAQ,CA4BpB;;AAED,eAAe,QAAQ,CAAC","sourcesContent":["import { css, html, property } from \"../../deps.js\";\nimport { htmlSlot, htmlStyle, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { define, GodownElement } from \"../../root.js\";\n\nconst defineName = \"flex-flow\";\n\n/**\n * FlexFlow controls the flex layout based on the width of the screen.\n */\n@define(defineName)\nexport class FlexFlow extends GodownElement {\n  /**\n   * The flex-flow behavior.\n   */\n  @property() flexflow = \"row nowrap column nowrap\";\n  /**\n   * The width of the screen for the position change.\n   */\n  @property() mobile = \"720px\";\n\n  static styles = [\n    css`\n      :host {\n        display: flex !important;\n      }\n    `,\n  ];\n\n  protected render(): HTMLTemplate {\n    const flexflow = this.flexflow.split(/\\s+/);\n    const flexDirection = flexflow[0] || \"row\";\n    const flexWrap = flexflow[1] || \"nowrap\";\n    const flexDirectionM = flexflow[2] || flexDirection || \"column\";\n    const flexWrapM = flexflow[3] || flexWrap || \"nowrap\";\n    const m = this.mobile || \"720px\";\n    const style = `:host{flex-direction:${flexDirection};flex-wrap:${flexWrap};}@media(max-width: ${m}){:host{flex-direction:${flexDirectionM};flex-wrap:${flexWrapM}}`;\n    return html`${htmlSlot()} ${htmlStyle(style)}`;\n  }\n}\n\nexport default FlexFlow;\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"flex-flow\": FlexFlow;\n  }\n}\n"]}

package/web-components/layout/nav-layout.d.ts

@@ -3,14 +3,22 @@ import { type HTMLTemplate } from "../../lib/templates.js";
 import { GodownElement } from "../../root.js";
 /**
  * NavLayout renders a navigation, an optional top header, an optional bottom footer.
+ *
+ * @slot - The main content of the layout.
+ *
+ * @slot nav - The navigation of the layout.
+ *
+ * @slot header - The header of the layout.
+ *
+ * @slot footer - The footer of the layout.
  */
 export declare class NavLayout extends GodownElement {
     /**
-     * Main heading.
+     * @deprecated
      */
     host: string;
     /**
-     * Subheading.
+     * @deprecated
      */
     subhead: string;
     /**
@@ -19,7 +27,6 @@ export declare class NavLayout extends GodownElement {
     set: 0 | 1 | 2;
     static styles: CSSResultGroup;
     protected render(): HTMLTemplate;
-    private renderNav;
 }
 export default NavLayout;
 declare global {

package/web-components/layout/nav-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nav-layout.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/layout/nav-layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAkB,MAAM,eAAe,CAAC;AACzE,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAqC,aAAa,EAAE,MAAM,eAAe,CAAC;AAKjF;;GAEG;AACH,qBACa,SAAU,SAAQ,aAAa;IAC1C;;OAEG;IACS,IAAI,SAAM;IACtB;;OAEG;IACS,OAAO,SAAM;IAEzB;;OAEG;IACH,GAAG,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAEf,MAAM,CAAC,MAAM,iBAkFO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;IAMhC,OAAO,CAAC,SAAS;CAgBlB;AAED,eAAe,SAAS,CAAC;AACzB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"nav-layout.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/layout/nav-layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAQ,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAqC,aAAa,EAAE,MAAM,eAAe,CAAC;AAKjF;;;;;;;;;;GAUG;AACH,qBACa,SAAU,SAAQ,aAAa;IAC1C;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAEf,MAAM,CAAC,MAAM,iBAoCO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;CAMjC;AAED,eAAe,SAAS,CAAC;AAEzB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/web-components/layout/nav-layout.js

@@ -1,135 +1,65 @@
 import { __decorate } from "tslib";
-import { css, html, property } from "../../deps.js";
+import { css, html } from "../../deps.js";
 import { htmlSlot } from "../../lib/templates.js";
 import { createScope, cssvarValues, define, GodownElement } from "../../root.js";
 const defineName = "nav-layout";
 const cssvarScope = createScope(defineName);
 /**
  * NavLayout renders a navigation, an optional top header, an optional bottom footer.
+ *
+ * @slot - The main content of the layout.
+ *
+ * @slot nav - The navigation of the layout.
+ *
+ * @slot header - The header of the layout.
+ *
+ * @slot footer - The footer of the layout.
  */
 let NavLayout = class NavLayout extends GodownElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Main heading.
-         */
-        this.host = "";
-        /**
-         * Subheading.
-         */
-        this.subhead = "";
+    render() {
+        return html `${htmlSlot("header")}
+      <nav>${htmlSlot("nav")}</nav>
+      <main>${htmlSlot()}</main>
+      ${htmlSlot("footer")}`;
     }
-    static { this.styles = [
-        GodownElement.styles,
-        css `
+};
+NavLayout.styles = [
+    GodownElement.styles,
+    css `
       :host {
         ${cssvarScope}--text: var(${cssvarValues.text});
         ${cssvarScope}--background: var(${cssvarValues.main});
-        ${cssvarScope}--super-background:var(${cssvarValues.input}--true);
-        ${cssvarScope}--height: 2.4em;
-        ${cssvarScope}--h1-size: calc(var(${cssvarScope}--height) / 2);
+        ${cssvarScope}--nav-height: 2.4em;
+        ${cssvarScope}--title-font-size: 1.4em;
+        ${cssvarScope}--nav-padding: 0 2.5%;
+        ${cssvarScope}--main-flex: 1;
+        ${cssvarScope}--main-padding: 0;
         width: 100%;
         height: 100%;
-        display: flex;
-        flex-flow: column nowrap;
+        display: flex !important;
+        flex-direction: column;
         justify-content: space-between;
         align-items: center;
         min-height: 100%;
+        color: var(${cssvarScope}--text);
       }
 
       nav {
         color: var(${cssvarScope}--text);
         background: var(${cssvarScope}--background);
-      }
-
-      nav {
-        height: var(${cssvarScope}--height);
-        min-height: var(${cssvarScope}--height);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+        padding: var(${cssvarScope}--nav-padding);
+        height: var(${cssvarScope}--nav-height);
         width: 100%;
-        padding: 0 2.5%;
-        box-sizing: border-box;
-        margin: auto;
         position: relative;
-        z-index: 2;
-      }
-
-      a {
-        text-decoration: none;
-        color: currentColor;
-      }
-
-      h1 {
-        font-weight: normal;
-        font-size: var(${cssvarScope}--h1-size);
-        margin: 0;
-        display: flex;
-        align-items: center;
-      }
-
-      h1 span {
-        height: 1em;
-        width: 0.1em;
-        background: currentColor;
-        margin: 0.24em;
-      }
-
-      h1 > * {
-        white-space: nowrap;
       }
 
       main {
-        flex: 1;
-        width: inherit;
-        display: flex;
-        flex-direction: column;
-        z-index: 1;
         position: relative;
-      }
-
-      nav > div {
-        height: 100%;
-        display: flex;
-        flex-direction: row;
-      }
-
-      @media screen and (max-width: 540px) {
-        h1 a ~ * {
-          display: none;
-        }
+        flex: 1;
+        width: 100%;
       }
     `,
-    ]; }
-    render() {
-        return html ` ${htmlSlot("header")} ${this.renderNav()}
-      <main>${htmlSlot()}</main>
-      ${htmlSlot("footer")}`;
-    }
-    renderNav() {
-        if (this.querySelector("[slot=nav]")) {
-            return htmlSlot("nav");
-        }
-        return html `<nav>
-      <h1>
-        <slot name="host"></slot>
-        <a href="/">${this.host}</a>${this.subhead &&
-            html `<span></span>
-          <div>${this.subhead}</div>`}
-      </h1>
-      <div>
-        <slot name="opt"></slot>
-      </div>
-    </nav>`;
-    }
-};
-__decorate([
-    property()
-], NavLayout.prototype, "host", void 0);
-__decorate([
-    property()
-], NavLayout.prototype, "subhead", void 0);
+];
 NavLayout = __decorate([
     define(defineName)
 ], NavLayout);

package/web-components/layout/nav-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-layout.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/layout/nav-layout.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAuB,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAqB,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEjF,MAAM,UAAU,GAAG,YAAY,CAAC;AAChC,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAE5C;;GAEG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,aAAa;IAArC;;QACL;;WAEG;QACS,SAAI,GAAG,EAAE,CAAC;QACtB;;WAEG;QACS,YAAO,GAAG,EAAE,CAAC;IAiH3B,CAAC;aA1GQ,WAAM,GAAG;QACd,aAAa,CAAC,MAAM;QACpB,GAAG,CAAA;;UAEG,WAAW,eAAe,YAAY,CAAC,IAAI;UAC3C,WAAW,qBAAqB,YAAY,CAAC,IAAI;UACjD,WAAW,0BAA0B,YAAY,CAAC,KAAK;UACvD,WAAW;UACX,WAAW,uBAAuB,WAAW;;;;;;;;;;;qBAWlC,WAAW;0BACN,WAAW;;;;sBAIf,WAAW;0BACP,WAAW;;;;;;;;;;;;;;;;;;;yBAmBZ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqC/B;KACgB,AAlFN,CAkFO;IAEV,MAAM;QACd,OAAO,IAAI,CAAA,IAAI,QAAQ,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,SAAS,EAAE;cAC3C,QAAQ,EAAE;QAChB,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;IAC3B,CAAC;IAEO,SAAS;QACf,IAAI,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,EAAE,CAAC;YACrC,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;QACD,OAAO,IAAI,CAAA;;;sBAGO,IAAI,CAAC,IAAI,OAAO,IAAI,CAAC,OAAO;YAC1C,IAAI,CAAA;iBACK,IAAI,CAAC,OAAO,QAAQ;;;;;WAK1B,CAAC;IACV,CAAC;;AApHW;IAAX,QAAQ,EAAE;uCAAW;AAIV;IAAX,QAAQ,EAAE;0CAAc;AARd,SAAS;IADrB,MAAM,CAAC,UAAU,CAAC;GACN,SAAS,CAyHrB;;AAED,eAAe,SAAS,CAAC","sourcesContent":["import { css, type CSSResultGroup, html, property } from \"../../deps.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { createScope, cssvarValues, define, GodownElement } from \"../../root.js\";\n\nconst defineName = \"nav-layout\";\nconst cssvarScope = createScope(defineName);\n\n/**\n * NavLayout renders a navigation, an optional top header, an optional bottom footer.\n */\n@define(defineName)\nexport class NavLayout extends GodownElement {\n  /**\n   * Main heading.\n   */\n  @property() host = \"\";\n  /**\n   * Subheading.\n   */\n  @property() subhead = \"\";\n\n  /**\n   * @deprecated\n   */\n  set: 0 | 1 | 2;\n\n  static styles = [\n    GodownElement.styles,\n    css`\n      :host {\n        ${cssvarScope}--text: var(${cssvarValues.text});\n        ${cssvarScope}--background: var(${cssvarValues.main});\n        ${cssvarScope}--super-background:var(${cssvarValues.input}--true);\n        ${cssvarScope}--height: 2.4em;\n        ${cssvarScope}--h1-size: calc(var(${cssvarScope}--height) / 2);\n        width: 100%;\n        height: 100%;\n        display: flex;\n        flex-flow: column nowrap;\n        justify-content: space-between;\n        align-items: center;\n        min-height: 100%;\n      }\n\n      nav {\n        color: var(${cssvarScope}--text);\n        background: var(${cssvarScope}--background);\n      }\n\n      nav {\n        height: var(${cssvarScope}--height);\n        min-height: var(${cssvarScope}--height);\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        width: 100%;\n        padding: 0 2.5%;\n        box-sizing: border-box;\n        margin: auto;\n        position: relative;\n        z-index: 2;\n      }\n\n      a {\n        text-decoration: none;\n        color: currentColor;\n      }\n\n      h1 {\n        font-weight: normal;\n        font-size: var(${cssvarScope}--h1-size);\n        margin: 0;\n        display: flex;\n        align-items: center;\n      }\n\n      h1 span {\n        height: 1em;\n        width: 0.1em;\n        background: currentColor;\n        margin: 0.24em;\n      }\n\n      h1 > * {\n        white-space: nowrap;\n      }\n\n      main {\n        flex: 1;\n        width: inherit;\n        display: flex;\n        flex-direction: column;\n        z-index: 1;\n        position: relative;\n      }\n\n      nav > div {\n        height: 100%;\n        display: flex;\n        flex-direction: row;\n      }\n\n      @media screen and (max-width: 540px) {\n        h1 a ~ * {\n          display: none;\n        }\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    return html` ${htmlSlot(\"header\")} ${this.renderNav()}\n      <main>${htmlSlot()}</main>\n      ${htmlSlot(\"footer\")}`;\n  }\n\n  private renderNav(): HTMLTemplate {\n    if (this.querySelector(\"[slot=nav]\")) {\n      return htmlSlot(\"nav\");\n    }\n    return html`<nav>\n      <h1>\n        <slot name=\"host\"></slot>\n        <a href=\"/\">${this.host}</a>${this.subhead &&\n        html`<span></span>\n          <div>${this.subhead}</div>`}\n      </h1>\n      <div>\n        <slot name=\"opt\"></slot>\n      </div>\n    </nav>`;\n  }\n}\n\nexport default NavLayout;\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nav-layout\": NavLayout;\n  }\n}\n"]}
+{"version":3,"file":"nav-layout.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/layout/nav-layout.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAuB,IAAI,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAqB,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEjF,MAAM,UAAU,GAAG,YAAY,CAAC;AAChC,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAE5C;;;;;;;;;;GAUG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,aAAa;IAoDhC,MAAM;QACd,OAAO,IAAI,CAAA,GAAG,QAAQ,CAAC,QAAQ,CAAC;aACvB,QAAQ,CAAC,KAAK,CAAC;cACd,QAAQ,EAAE;QAChB,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;IAC3B,CAAC;;AA3CM,gBAAM,GAAG;IACd,aAAa,CAAC,MAAM;IACpB,GAAG,CAAA;;UAEG,WAAW,eAAe,YAAY,CAAC,IAAI;UAC3C,WAAW,qBAAqB,YAAY,CAAC,IAAI;UACjD,WAAW;UACX,WAAW;UACX,WAAW;UACX,WAAW;UACX,WAAW;;;;;;;;qBAQA,WAAW;;;;qBAIX,WAAW;0BACN,WAAW;uBACd,WAAW;sBACZ,WAAW;;;;;;;;;;KAU5B;CACgB,AApCN,CAoCO;AAlDT,SAAS;IADrB,MAAM,CAAC,UAAU,CAAC;GACN,SAAS,CA0DrB;;AAED,eAAe,SAAS,CAAC","sourcesContent":["import { css, type CSSResultGroup, html } from \"../../deps.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { createScope, cssvarValues, define, GodownElement } from \"../../root.js\";\n\nconst defineName = \"nav-layout\";\nconst cssvarScope = createScope(defineName);\n\n/**\n * NavLayout renders a navigation, an optional top header, an optional bottom footer.\n *\n * @slot - The main content of the layout.\n *\n * @slot nav - The navigation of the layout.\n *\n * @slot header - The header of the layout.\n *\n * @slot footer - The footer of the layout.\n */\n@define(defineName)\nexport class NavLayout extends GodownElement {\n  /**\n   * @deprecated\n   */\n  host: string;\n  /**\n   * @deprecated\n   */\n  subhead: string;\n  /**\n   * @deprecated\n   */\n  set: 0 | 1 | 2;\n\n  static styles = [\n    GodownElement.styles,\n    css`\n      :host {\n        ${cssvarScope}--text: var(${cssvarValues.text});\n        ${cssvarScope}--background: var(${cssvarValues.main});\n        ${cssvarScope}--nav-height: 2.4em;\n        ${cssvarScope}--title-font-size: 1.4em;\n        ${cssvarScope}--nav-padding: 0 2.5%;\n        ${cssvarScope}--main-flex: 1;\n        ${cssvarScope}--main-padding: 0;\n        width: 100%;\n        height: 100%;\n        display: flex !important;\n        flex-direction: column;\n        justify-content: space-between;\n        align-items: center;\n        min-height: 100%;\n        color: var(${cssvarScope}--text);\n      }\n\n      nav {\n        color: var(${cssvarScope}--text);\n        background: var(${cssvarScope}--background);\n        padding: var(${cssvarScope}--nav-padding);\n        height: var(${cssvarScope}--nav-height);\n        width: 100%;\n        position: relative;\n      }\n\n      main {\n        position: relative;\n        flex: 1;\n        width: 100%;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    return html`${htmlSlot(\"header\")}\n      <nav>${htmlSlot(\"nav\")}</nav>\n      <main>${htmlSlot()}</main>\n      ${htmlSlot(\"footer\")}`;\n  }\n}\n\nexport default NavLayout;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nav-layout\": NavLayout;\n  }\n}\n"]}

package/web-components/loading/loading-progress.d.ts

@@ -30,7 +30,7 @@ export declare class LoadingProgress extends GodownElement {
 export default LoadingProgress;
 declare global {
     interface HTMLElementTagNameMap {
-        "load-track": LoadingProgress;
+        "loading-progress": LoadingProgress;
     }
 }
 //# sourceMappingURL=loading-progress.d.ts.map

package/web-components/loading/loading-progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loading-progress.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/loading/loading-progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAkB,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAwB,aAAa,EAAE,MAAM,eAAe,CAAC;AAIpE;;GAEG;AACH,qBACa,eAAgB,SAAQ,aAAa;IAChD;;OAEG;IACyB,GAAG,SAAK;IACpC;;OAEG;IACyB,GAAG,SAAK;IACpC;;OAEG;IACwC,KAAK,MAAQ;IAExD,MAAM,CAAC,MAAM,iBAuCO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;IAYhC;;;;;OAKG;IACH,YAAY,CAAC,CAAC,GAAE,MAAM,GAAG,MAAY,GAAG,MAAM;CAM/C;AAED,eAAe,eAAe,CAAC;AAE/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,eAAe,CAAC;KAC/B;CACF"}
+{"version":3,"file":"loading-progress.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/loading/loading-progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAkB,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAwB,aAAa,EAAE,MAAM,eAAe,CAAC;AAIpE;;GAEG;AACH,qBACa,eAAgB,SAAQ,aAAa;IAChD;;OAEG;IACyB,GAAG,SAAK;IACpC;;OAEG;IACyB,GAAG,SAAK;IACpC;;OAEG;IACwC,KAAK,MAAQ;IAExD,MAAM,CAAC,MAAM,iBAuCO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;IAYhC;;;;;OAKG;IACH,YAAY,CAAC,CAAC,GAAE,MAAM,GAAG,MAAY,GAAG,MAAM;CAM/C;AAED,eAAe,eAAe,CAAC;AAE/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,eAAe,CAAC;KACrC;CACF"}

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"}