@holochain-open-dev/file-storage 0.1.4 → 0.2.1

package/dist/elements/file-storage-context.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from "lit";
-import { FileStorageClient } from "../file-storage-client";
+import { FileStorageClient } from "../file-storage-client.js";
 export declare class FileStorageContext extends LitElement {
     client: FileStorageClient;
     render(): import("lit-html").TemplateResult<1>;

package/dist/elements/file-storage-context.js

@@ -1,13 +1,13 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement } from "lit";
 import { provide } from "@lit-labs/context";
-import { property } from "lit/decorators.js";
-import { fileStorageClientContext } from "../context";
-export class FileStorageContext extends LitElement {
+import { property, customElement } from "lit/decorators.js";
+import { fileStorageClientContext } from "../context.js";
+let FileStorageContext = class FileStorageContext extends LitElement {
     render() {
         return html `<slot></slot>`;
     }
-}
+};
 FileStorageContext.styles = css `
     :host {
       display: contents;
@@ -17,4 +17,8 @@ __decorate([
     provide({ context: fileStorageClientContext }),
     property({ type: Object })
 ], FileStorageContext.prototype, "client", void 0);
+FileStorageContext = __decorate([
+    customElement("file-storage-context")
+], FileStorageContext);
+export { FileStorageContext };
 //# sourceMappingURL=file-storage-context.js.map

package/dist/elements/file-storage-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-storage-context.js","sourceRoot":"","sources":["../../src/elements/file-storage-context.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AAGtD,MAAM,OAAO,kBAAmB,SAAQ,UAAU;IAKhD,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAEM,yBAAM,GAAG,GAAG,CAAA;;;;GAIlB,CAAC;AAVF;IAFC,OAAO,CAAC,EAAE,OAAO,EAAE,wBAAwB,EAAE,CAAC;IAC9C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACA","sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { provide } from \"@lit-labs/context\";\nimport { property } from \"lit/decorators.js\";\n\nimport { fileStorageClientContext } from \"../context\";\nimport { FileStorageClient } from \"../file-storage-client\";\n\nexport class FileStorageContext extends LitElement {\n  @provide({ context: fileStorageClientContext })\n  @property({ type: Object })\n  client!: FileStorageClient;\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static styles = css`\n    :host {\n      display: contents;\n    }\n  `;\n}\n"]}
+{"version":3,"file":"file-storage-context.js","sourceRoot":"","sources":["../../src/elements/file-storage-context.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AAIlD,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAKhD,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAEM,yBAAM,GAAG,GAAG,CAAA;;;;GAIlB,CAAC;AAVF;IAFC,OAAO,CAAC,EAAE,OAAO,EAAE,wBAAwB,EAAE,CAAC;IAC9C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACA;AAHhB,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAc9B;SAdY,kBAAkB","sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { provide } from \"@lit-labs/context\";\nimport { property, customElement } from \"lit/decorators.js\";\n\nimport { fileStorageClientContext } from \"../context.js\";\nimport { FileStorageClient } from \"../file-storage-client.js\";\n\n@customElement(\"file-storage-context\")\nexport class FileStorageContext extends LitElement {\n  @provide({ context: fileStorageClientContext })\n  @property({ type: Object })\n  client!: FileStorageClient;\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static styles = css`\n    :host {\n      display: contents;\n    }\n  `;\n}\n"]}

package/dist/elements/show-image.d.ts

@@ -1,15 +1,14 @@
 import { LitElement } from "lit";
-import { DisplayError } from "@holochain-open-dev/elements";
+import "@shoelace-style/shoelace/dist/components/spinner/spinner.js";
+import "@holochain-open-dev/elements/elements/display-error.js";
 import { EntryHash } from "@holochain/client";
 import { Task } from "@lit-labs/task";
-import { CircularProgress } from "@scoped-elements/material-web";
 import { FileStorageClient } from "../file-storage-client";
-declare const ShowImage_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
 /**
  * @fires file-uploaded - Fired after having uploaded the file
  * @csspart dropzone - Style the dropzone itself
  */
-export declare class ShowImage extends ShowImage_base {
+export declare class ShowImage extends LitElement {
     /** Public attributes */
     /**
      * REQUIRED. The hash of the image to be rendered
@@ -25,13 +24,5 @@ export declare class ShowImage extends ShowImage_base {
     _renderImage: Task<Uint8Array[], [File, Uint8Array]>;
     renderImage(file: File, data: Uint8Array): import("lit-html").TemplateResult<1>;
     render(): unknown;
-    static get styles(): import("lit").CSSResult[];
-    /**
-     * @internal
-     */
-    static get scopedElements(): {
-        "mwc-circular-progress": typeof CircularProgress;
-        "display-error": typeof DisplayError;
-    };
+    static get styles(): (import("lit").CSSResult | import("lit").CSSResult[])[];
 }
-export {};

package/dist/elements/show-image.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement } from "lit";
-import { property } from "lit/decorators.js";
-import { DisplayError, hashProperty, sharedStyles, } from "@holochain-open-dev/elements";
-import { ScopedElementsMixin } from "@open-wc/scoped-elements";
+import { property, customElement } from "lit/decorators.js";
+import { hashProperty, sharedStyles } from "@holochain-open-dev/elements";
 import { consume } from "@lit-labs/context";
+import "@shoelace-style/shoelace/dist/components/spinner/spinner.js";
+import "@holochain-open-dev/elements/elements/display-error.js";
 import { Task } from "@lit-labs/task";
-import { CircularProgress } from "@scoped-elements/material-web";
 import { fromUint8Array } from "js-base64";
 import { localized, msg } from "@lit/localize";
 import { fileStorageClientContext } from "../context";
@@ -13,7 +13,7 @@ import { fileStorageClientContext } from "../context";
  * @fires file-uploaded - Fired after having uploaded the file
  * @csspart dropzone - Style the dropzone itself
  */
-let ShowImage = class ShowImage extends ScopedElementsMixin(LitElement) {
+let ShowImage = class ShowImage extends LitElement {
     constructor() {
         /** Public attributes */
         super(...arguments);
@@ -33,7 +33,7 @@ let ShowImage = class ShowImage extends ScopedElementsMixin(LitElement) {
         return this._renderImage.render({
             complete: ([f, d]) => this.renderImage(f, d),
             pending: () => html `<div class="row center-content" style="flex: 1">
-          <mwc-circular-progress></mwc-circular-progress>
+          <sl-spinner style="font-size: 2rem"></sl-spinner>
         </div>`,
             error: (e) => html `<display-error
           .headline=${msg("Error fetching the image")}
@@ -51,15 +51,6 @@ let ShowImage = class ShowImage extends ScopedElementsMixin(LitElement) {
       `,
         ];
     }
-    /**
-     * @internal
-     */
-    static get scopedElements() {
-        return {
-            "mwc-circular-progress": CircularProgress,
-            "display-error": DisplayError,
-        };
-    }
 };
 __decorate([
     property(hashProperty("image-hash"))
@@ -68,7 +59,8 @@ __decorate([
     consume({ context: fileStorageClientContext })
 ], ShowImage.prototype, "client", void 0);
 ShowImage = __decorate([
-    localized()
+    localized(),
+    customElement("show-image")
 ], ShowImage);
 export { ShowImage };
 //# sourceMappingURL=show-image.js.map

package/dist/elements/show-image.js.map

@@ -1 +1 @@
-{"version":3,"file":"show-image.js","sourceRoot":"","sources":["../../src/elements/show-image.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,YAAY,GACb,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAG5C,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAG/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AAEtD;;;GAGG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAAvD;QACL,wBAAwB;;QAaxB;;WAEG;QACH,iBAAY,GAAG,IAAI,IAAI,CACrB,IAAI,EACJ,KAAK,EAAE,CAAC,QAAQ,CAAC,EAAE,EAAE;YACnB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;YACtD,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;YAEtC,OAAO,CAAC,IAAI,EAAE,IAAI,UAAU,CAAC,IAAI,CAAC,CAAuB,CAAC;QAC5D,CAAC,EACD,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CACvB,CAAC;IA2CJ,CAAC;IAzCC,WAAW,CAAC,IAAU,EAAE,IAAgB;QACtC,OAAO,IAAI,CAAA,kBAAkB,IAAI,CAAC,IAAI,WAAW,cAAc,CAC7D,IAAI,CACL,6CAA6C,CAAC;IACjD,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;YAC9B,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC;YAC5C,OAAO,EAAE,GAAG,EAAE,CACZ,IAAI,CAAA;;eAEG;YACT,KAAK,EAAE,CAAC,CAAM,EAAE,EAAE,CAChB,IAAI,CAAA;sBACU,GAAG,CAAC,0BAA0B,CAAC;0BAC3B;SACrB,CAAC,CAAC;IACL,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,YAAY;YACZ,GAAG,CAAA;;;;;OAKF;SACF,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,MAAM,KAAK,cAAc;QACvB,OAAO;YACL,uBAAuB,EAAE,gBAAgB;YACzC,eAAe,EAAE,YAAY;SAC9B,CAAC;IACJ,CAAC;CACF,CAAA;AA/DuC;IAArC,QAAQ,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;4CAAuB;AAM5D;IADC,OAAO,CAAC,EAAE,OAAO,EAAE,wBAAwB,EAAE,CAAC;yCACpB;AAZhB,SAAS;IADrB,SAAS,EAAE;GACC,SAAS,CAqErB;SArEY,SAAS","sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport {\n  DisplayError,\n  hashProperty,\n  sharedStyles,\n} from \"@holochain-open-dev/elements\";\nimport { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { consume } from \"@lit-labs/context\";\n\nimport { EntryHash } from \"@holochain/client\";\nimport { Task } from \"@lit-labs/task\";\nimport { CircularProgress } from \"@scoped-elements/material-web\";\nimport { fromUint8Array } from \"js-base64\";\nimport { localized, msg } from \"@lit/localize\";\n\nimport { FileStorageClient } from \"../file-storage-client\";\nimport { fileStorageClientContext } from \"../context\";\n\n/**\n * @fires file-uploaded - Fired after having uploaded the file\n * @csspart dropzone - Style the dropzone itself\n */\n@localized()\nexport class ShowImage extends ScopedElementsMixin(LitElement) {\n  /** Public attributes */\n\n  /**\n   * REQUIRED. The hash of the image to be rendered\n   */\n  @property(hashProperty(\"image-hash\")) imageHash!: EntryHash;\n\n  /**\n   * @internal\n   */\n  @consume({ context: fileStorageClientContext })\n  client!: FileStorageClient;\n\n  /**\n   * @internal\n   */\n  _renderImage = new Task(\n    this,\n    async ([fileHash]) => {\n      const file = await this.client.downloadFile(fileHash);\n      const data = await file.arrayBuffer();\n\n      return [file, new Uint8Array(data)] as [File, Uint8Array];\n    },\n    () => [this.imageHash]\n  );\n\n  renderImage(file: File, data: Uint8Array) {\n    return html`<img src=\"data:${file.type};base64,${fromUint8Array(\n      data\n    )}\" style=\"flex: 1; object-fit: cover\"></img>`;\n  }\n\n  render() {\n    return this._renderImage.render({\n      complete: ([f, d]) => this.renderImage(f, d),\n      pending: () =>\n        html`<div class=\"row center-content\" style=\"flex: 1\">\n          <mwc-circular-progress></mwc-circular-progress>\n        </div>`,\n      error: (e: any) =>\n        html`<display-error\n          .headline=${msg(\"Error fetching the image\")}\n        ></display-error>`,\n    });\n  }\n\n  static get styles() {\n    return [\n      sharedStyles,\n      css`\n        :host {\n          display: flex;\n          flex: 1;\n        }\n      `,\n    ];\n  }\n\n  /**\n   * @internal\n   */\n  static get scopedElements() {\n    return {\n      \"mwc-circular-progress\": CircularProgress,\n      \"display-error\": DisplayError,\n    };\n  }\n}\n"]}
+{"version":3,"file":"show-image.js","sourceRoot":"","sources":["../../src/elements/show-image.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C,OAAO,6DAA6D,CAAC;AACrE,OAAO,wDAAwD,CAAC;AAGhE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAG/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AAEtD;;;GAGG;AAGI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;QACL,wBAAwB;;QAaxB;;WAEG;QACH,iBAAY,GAAG,IAAI,IAAI,CACrB,IAAI,EACJ,KAAK,EAAE,CAAC,QAAQ,CAAC,EAAE,EAAE;YACnB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;YACtD,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;YAEtC,OAAO,CAAC,IAAI,EAAE,IAAI,UAAU,CAAC,IAAI,CAAC,CAAuB,CAAC;QAC5D,CAAC,EACD,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CACvB,CAAC;IAiCJ,CAAC;IA/BC,WAAW,CAAC,IAAU,EAAE,IAAgB;QACtC,OAAO,IAAI,CAAA,kBAAkB,IAAI,CAAC,IAAI,WAAW,cAAc,CAC7D,IAAI,CACL,6CAA6C,CAAC;IACjD,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;YAC9B,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC;YAC5C,OAAO,EAAE,GAAG,EAAE,CACZ,IAAI,CAAA;;eAEG;YACT,KAAK,EAAE,CAAC,CAAM,EAAE,EAAE,CAChB,IAAI,CAAA;sBACU,GAAG,CAAC,0BAA0B,CAAC;0BAC3B;SACrB,CAAC,CAAC;IACL,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,YAAY;YACZ,GAAG,CAAA;;;;;OAKF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AArDuC;IAArC,QAAQ,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;4CAAuB;AAM5D;IADC,OAAO,CAAC,EAAE,OAAO,EAAE,wBAAwB,EAAE,CAAC;yCACpB;AAZhB,SAAS;IAFrB,SAAS,EAAE;IACX,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA2DrB;SA3DY,SAAS","sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { property, customElement } from \"lit/decorators.js\";\nimport { hashProperty, sharedStyles } from \"@holochain-open-dev/elements\";\nimport { consume } from \"@lit-labs/context\";\n\nimport \"@shoelace-style/shoelace/dist/components/spinner/spinner.js\";\nimport \"@holochain-open-dev/elements/elements/display-error.js\";\n\nimport { EntryHash } from \"@holochain/client\";\nimport { Task } from \"@lit-labs/task\";\nimport { fromUint8Array } from \"js-base64\";\nimport { localized, msg } from \"@lit/localize\";\n\nimport { FileStorageClient } from \"../file-storage-client\";\nimport { fileStorageClientContext } from \"../context\";\n\n/**\n * @fires file-uploaded - Fired after having uploaded the file\n * @csspart dropzone - Style the dropzone itself\n */\n@localized()\n@customElement(\"show-image\")\nexport class ShowImage extends LitElement {\n  /** Public attributes */\n\n  /**\n   * REQUIRED. The hash of the image to be rendered\n   */\n  @property(hashProperty(\"image-hash\")) imageHash!: EntryHash;\n\n  /**\n   * @internal\n   */\n  @consume({ context: fileStorageClientContext })\n  client!: FileStorageClient;\n\n  /**\n   * @internal\n   */\n  _renderImage = new Task(\n    this,\n    async ([fileHash]) => {\n      const file = await this.client.downloadFile(fileHash);\n      const data = await file.arrayBuffer();\n\n      return [file, new Uint8Array(data)] as [File, Uint8Array];\n    },\n    () => [this.imageHash]\n  );\n\n  renderImage(file: File, data: Uint8Array) {\n    return html`<img src=\"data:${file.type};base64,${fromUint8Array(\n      data\n    )}\" style=\"flex: 1; object-fit: cover\"></img>`;\n  }\n\n  render() {\n    return this._renderImage.render({\n      complete: ([f, d]) => this.renderImage(f, d),\n      pending: () =>\n        html`<div class=\"row center-content\" style=\"flex: 1\">\n          <sl-spinner style=\"font-size: 2rem\"></sl-spinner>\n        </div>`,\n      error: (e: any) =>\n        html`<display-error\n          .headline=${msg(\"Error fetching the image\")}\n        ></display-error>`,\n    });\n  }\n\n  static get styles() {\n    return [\n      sharedStyles,\n      css`\n        :host {\n          display: flex;\n          flex: 1;\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/elements/upload-files.d.ts

@@ -1,11 +1,30 @@
-import { LitElement } from "lit";
-import { FileStorageClient } from "../file-storage-client";
-declare const UploadFiles_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
+/// <reference types="dropzone" />
+import { DropzoneElement, DropzoneOptions } from "@scoped-elements/dropzone";
+import { FormField, FormFieldController } from "@holochain-open-dev/elements";
+import { FileStorageClient } from "../file-storage-client.js";
+import { EntryHash } from "@holochain/client";
 /**
  * @fires file-uploaded - Fired after having uploaded the file
  * @csspart dropzone - Style the dropzone itself
  */
-export declare class UploadFiles extends UploadFiles_base {
+export declare class UploadFiles extends DropzoneElement implements FormField {
+    /**
+     * The name of the field if this element is used inside a form
+     * Required only if the element is used inside a form
+     */
+    name: string;
+    /**
+     * Whether this field is required if this element is used inside a form
+     */
+    required: boolean;
+    /**
+     * Whether this field is disabled if this element is used inside a form
+     */
+    disabled: boolean;
+    /**
+     * The default value that this element will take if it is resetted in a form
+     */
+    defaultValue: EntryHash | Array<EntryHash>;
     /** Public attributes */
     /**
      * Whether this element should allow only file to be uploaded
@@ -20,9 +39,21 @@ export declare class UploadFiles extends UploadFiles_base {
      * @internal
      */
     _client: FileStorageClient;
-    clear(): void;
-    firstUpdated(): void;
+    /**
+     * @internal
+     */
+    _controller: FormFieldController;
+    firstUpdated(): Promise<void>;
+    reset(): void;
+    /**
+     * @internal
+     */
+    get value(): any;
+    /**
+     * @internal
+     */
+    private _input;
+    reportValidity(): boolean;
+    buildDropzone(dropzoneElement: HTMLElement, options: DropzoneOptions): import("dropzone");
     render(): import("lit-html").TemplateResult<1>;
-    static get styles(): import("lit").CSSResult[];
 }
-export {};

package/dist/elements/upload-files.js

@@ -1,20 +1,28 @@
 import { __decorate } from "tslib";
-import { css, html, LitElement } from "lit";
-import { property } from "lit/decorators.js";
-import { ScopedElementsMixin } from "@open-wc/scoped-elements";
+import { html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
 import { DropzoneElement } from "@scoped-elements/dropzone";
 import { consume } from "@lit-labs/context";
-import { sharedStyles } from "@holochain-open-dev/elements";
-import { HolochainDropzone } from "../holochain-dropzone";
-import { fileStorageClientContext } from "../context";
+import { FormFieldController } from "@holochain-open-dev/elements";
+import { localized } from "@lit/localize";
+import { fileStorageClientContext } from "../context.js";
+import { HolochainDropzone } from "../holochain-dropzone.js";
 /**
  * @fires file-uploaded - Fired after having uploaded the file
  * @csspart dropzone - Style the dropzone itself
  */
-export class UploadFiles extends ScopedElementsMixin(LitElement) {
+let UploadFiles = class UploadFiles extends DropzoneElement {
     constructor() {
-        /** Public attributes */
         super(...arguments);
+        /**
+         * Whether this field is required if this element is used inside a form
+         */
+        this.required = false;
+        /**
+         * Whether this field is disabled if this element is used inside a form
+         */
+        this.disabled = false;
+        /** Public attributes */
         /**
          * Whether this element should allow only file to be uploaded
          */
@@ -24,40 +32,74 @@ export class UploadFiles extends ScopedElementsMixin(LitElement) {
          * Learn how to use this here: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
          */
         this.acceptedFiles = undefined;
+        /**
+         * @internal
+         */
+        this._controller = new FormFieldController(this);
     }
-    clear() {
-        var _a;
-        ((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById("dropzone")).clear();
-    }
-    firstUpdated() {
-        const client = this._client;
-        this.defineScopedElement("drop-zone", class extends DropzoneElement {
-            buildDropzone(dropzoneElement, options) {
-                return new HolochainDropzone(dropzoneElement, client, options);
+    async firstUpdated() {
+        super.firstUpdated();
+        if (this.defaultValue !== undefined) {
+            if (Array.isArray(this.defaultValue)) {
+                for (const fileHash of this.defaultValue) {
+                    const image = await this._client.downloadFile(fileHash);
+                    this.dropzone.addFile(image);
+                }
             }
-        });
+            else {
+                const image = await this._client.downloadFile(this.defaultValue);
+                this.dropzone.addFile(image);
+            }
+        }
+    }
+    reset() {
+        this.clear();
+    }
+    /**
+     * @internal
+     */
+    get value() {
+        if (this.oneFile)
+            return this.dropzone.files[0]
+                ? this.dropzone.files[0].hash
+                : undefined;
+        return this.dropzone.files.map((file) => file.hash);
+    }
+    reportValidity() {
+        const invalid = this.required !== false && this.value === undefined;
+        if (invalid) {
+            this._input.setCustomValidity(`Uploading a file is required`);
+            this._input.reportValidity();
+        }
+        return !invalid;
+    }
+    buildDropzone(dropzoneElement, options) {
+        return new HolochainDropzone(dropzoneElement, this._client, options);
     }
     render() {
         return html `
-      <drop-zone
-        id="dropzone"
-        .oneFile=${this.oneFile}
-        .acceptedFiles=${this.acceptedFiles}
-        @file-uploaded=${(e) => (e.detail.hash = e.detail.file.hash)}
-      ></drop-zone>
+      <div style="position:relative">
+        <input
+          id="hidden-input"
+          style="width:0; height: 0; position: absolute; z-index: -1; left: 50%; top: 20%"
+        />
+        ${super.render()}
+      </div>
     `;
     }
-    static get styles() {
-        return [
-            sharedStyles,
-            css `
-        :host {
-          display: contents;
-        }
-      `,
-        ];
-    }
-}
+};
+__decorate([
+    property()
+], UploadFiles.prototype, "name", void 0);
+__decorate([
+    property()
+], UploadFiles.prototype, "required", void 0);
+__decorate([
+    property()
+], UploadFiles.prototype, "disabled", void 0);
+__decorate([
+    property()
+], UploadFiles.prototype, "defaultValue", void 0);
 __decorate([
     property({ type: Boolean, attribute: "one-file" })
 ], UploadFiles.prototype, "oneFile", void 0);
@@ -67,4 +109,12 @@ __decorate([
 __decorate([
     consume({ context: fileStorageClientContext })
 ], UploadFiles.prototype, "_client", void 0);
+__decorate([
+    query("#hidden-input")
+], UploadFiles.prototype, "_input", void 0);
+UploadFiles = __decorate([
+    localized(),
+    customElement("upload-files")
+], UploadFiles);
+export { UploadFiles };
 //# sourceMappingURL=upload-files.js.map

package/dist/elements/upload-files.js.map

@@ -1 +1 @@
-{"version":3,"file":"upload-files.js","sourceRoot":"","sources":["../../src/elements/upload-files.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAmB,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAG5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AAEtD;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAAhE;QACE,wBAAwB;;QAExB;;WAEG;QACiD,YAAO,GAAG,KAAK,CAAC;QAEpE;;;WAGG;QACsD,kBAAa,GAEtD,SAAS,CAAC;IAmD5B,CAAC;IA3CC,KAAK;;QACH,CAAC,MAAA,IAAI,CAAC,UAAU,0CAAE,cAAc,CAAC,UAAU,CAAqB,CAAA,CAAC,KAAK,EAAE,CAAC;IAC3E,CAAC;IAED,YAAY;QACV,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;QAE5B,IAAI,CAAC,mBAAmB,CACtB,WAAW,EACX,KAAM,SAAQ,eAAe;YAC3B,aAAa,CAAC,eAA4B,EAAE,OAAwB;gBAClE,OAAO,IAAI,iBAAiB,CAC1B,eAAe,EACf,MAAM,EACN,OAAO,CACW,CAAC;YACvB,CAAC;SACF,CACF,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;mBAGI,IAAI,CAAC,OAAO;yBACN,IAAI,CAAC,aAAa;yBAClB,CAAC,CAAc,EAAE,EAAE,CAClC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;;KAEzC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,YAAY;YACZ,GAAG,CAAA;;;;OAIF;SACF,CAAC;IACJ,CAAC;CACF;AA3DqD;IAAnD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;4CAAiB;AAMX;IAAxD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;kDAE9B;AAM1B;IADC,OAAO,CAAC,EAAE,OAAO,EAAE,wBAAwB,EAAE,CAAC;4CACnB","sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { property } from \"lit/decorators.js\";\n\nimport { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { DropzoneOptions, DropzoneElement } from \"@scoped-elements/dropzone\";\nimport { consume } from \"@lit-labs/context\";\nimport { sharedStyles } from \"@holochain-open-dev/elements\";\n\nimport { FileStorageClient } from \"../file-storage-client\";\nimport { HolochainDropzone } from \"../holochain-dropzone\";\nimport { fileStorageClientContext } from \"../context\";\n\n/**\n * @fires file-uploaded - Fired after having uploaded the file\n * @csspart dropzone - Style the dropzone itself\n */\nexport class UploadFiles extends ScopedElementsMixin(LitElement) {\n  /** Public attributes */\n\n  /**\n   * Whether this element should allow only file to be uploaded\n   */\n  @property({ type: Boolean, attribute: \"one-file\" }) oneFile = false;\n\n  /**\n   * The type of files accepted by this element\n   * Learn how to use this here: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept\n   */\n  @property({ type: String, attribute: \"accepted-files\" }) acceptedFiles:\n    | string\n    | undefined = undefined;\n\n  /**\n   * @internal\n   */\n  @consume({ context: fileStorageClientContext })\n  _client!: FileStorageClient;\n\n  clear() {\n    (this.shadowRoot?.getElementById(\"dropzone\") as DropzoneElement).clear();\n  }\n\n  firstUpdated() {\n    const client = this._client;\n\n    this.defineScopedElement(\n      \"drop-zone\",\n      class extends DropzoneElement {\n        buildDropzone(dropzoneElement: HTMLElement, options: DropzoneOptions) {\n          return new HolochainDropzone(\n            dropzoneElement,\n            client,\n            options\n          ) as any as Dropzone;\n        }\n      }\n    );\n  }\n\n  render() {\n    return html`\n      <drop-zone\n        id=\"dropzone\"\n        .oneFile=${this.oneFile}\n        .acceptedFiles=${this.acceptedFiles}\n        @file-uploaded=${(e: CustomEvent) =>\n          (e.detail.hash = e.detail.file.hash)}\n      ></drop-zone>\n    `;\n  }\n\n  static get styles() {\n    return [\n      sharedStyles,\n      css`\n        :host {\n          display: contents;\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"upload-files.js","sourceRoot":"","sources":["../../src/elements/upload-files.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from \"lit\";\nimport { customElement, property, query } from \"lit/decorators.js\";\n\nimport { DropzoneElement, DropzoneOptions } from \"@scoped-elements/dropzone\";\nimport { consume } from \"@lit-labs/context\";\nimport { FormField, FormFieldController } from \"@holochain-open-dev/elements\";\nimport { localized } from \"@lit/localize\";\n\nimport { FileStorageClient } from \"../file-storage-client.js\";\nimport { fileStorageClientContext } from \"../context.js\";\nimport { HolochainDropzone } from \"../holochain-dropzone.js\";\nimport { EntryHash } from \"@holochain/client\";\n\n/**\n * @fires file-uploaded - Fired after having uploaded the file\n * @csspart dropzone - Style the dropzone itself\n */\n@localized()\n@customElement(\"upload-files\")\nexport class UploadFiles extends DropzoneElement implements FormField {\n  /**\n   * The name of the field if this element is used inside a form\n   * Required only if the element is used inside a form\n   */\n  @property()\n  name!: string;\n\n  /**\n   * Whether this field is required if this element is used inside a form\n   */\n  @property()\n  required = false;\n\n  /**\n   * Whether this field is disabled if this element is used inside a form\n   */\n  @property()\n  disabled = false;\n\n  /**\n   * The default value that this element will take if it is resetted in a form\n   */\n  @property()\n  defaultValue!: EntryHash | Array<EntryHash>;\n\n  /** Public attributes */\n\n  /**\n   * Whether this element should allow only file to be uploaded\n   */\n  @property({ type: Boolean, attribute: \"one-file\" }) oneFile = false;\n\n  /**\n   * The type of files accepted by this element\n   * Learn how to use this here: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept\n   */\n  @property({ type: String, attribute: \"accepted-files\" }) acceptedFiles:\n    | string\n    | undefined = undefined;\n\n  /**\n   * @internal\n   */\n  @consume({ context: fileStorageClientContext })\n  _client!: FileStorageClient;\n\n  /**\n   * @internal\n   */\n  _controller = new FormFieldController(this);\n\n  async firstUpdated() {\n    super.firstUpdated();\n    if (this.defaultValue !== undefined) {\n      if (Array.isArray(this.defaultValue)) {\n        for (const fileHash of this.defaultValue) {\n          const image = await this._client.downloadFile(fileHash);\n          this.dropzone.addFile(image as any);\n        }\n      } else {\n        const image = await this._client.downloadFile(this.defaultValue);\n        this.dropzone.addFile(image as any);\n      }\n    }\n  }\n\n  reset() {\n    this.clear();\n  }\n\n  /**\n   * @internal\n   */\n  get value() {\n    if (this.oneFile)\n      return this.dropzone.files[0]\n        ? (this.dropzone.files[0] as any).hash\n        : undefined;\n    return this.dropzone.files.map((file) => (file as any).hash);\n  }\n\n  /**\n   * @internal\n   */\n  @query(\"#hidden-input\")\n  private _input!: HTMLInputElement;\n\n  reportValidity() {\n    const invalid = this.required !== false && this.value === undefined;\n    if (invalid) {\n      this._input.setCustomValidity(`Uploading a file is required`);\n      this._input.reportValidity();\n    }\n\n    return !invalid;\n  }\n\n  buildDropzone(dropzoneElement: HTMLElement, options: DropzoneOptions) {\n    return new HolochainDropzone(\n      dropzoneElement,\n      this._client,\n      options\n    ) as any as Dropzone;\n  }\n\n  render() {\n    return html`\n      <div style=\"position:relative\">\n        <input\n          id=\"hidden-input\"\n          style=\"width:0; height: 0; position: absolute; z-index: -1; left: 50%; top: 20%\"\n        />\n        ${super.render()}\n      </div>\n    `;\n  }\n}\n"]}

package/dist/index.d.ts

@@ -1,7 +1,4 @@
-export * from "./elements/upload-files";
-export * from "./elements/show-image";
-export * from "./elements/file-storage-context";
-export * from "./file-storage-client";
-export * from "./holochain-dropzone";
-export * from "./types";
-export * from "./context";
+export * from "./file-storage-client.js";
+export * from "./holochain-dropzone.js";
+export * from "./types.js";
+export * from "./context.js";

package/dist/index.js

@@ -1,8 +1,5 @@
-export * from "./elements/upload-files";
-export * from "./elements/show-image";
-export * from "./elements/file-storage-context";
-export * from "./file-storage-client";
-export * from "./holochain-dropzone";
-export * from "./types";
-export * from "./context";
+export * from "./file-storage-client.js";
+export * from "./holochain-dropzone.js";
+export * from "./types.js";
+export * from "./context.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC","sourcesContent":["export * from \"./elements/upload-files\";\nexport * from \"./elements/show-image\";\nexport * from \"./elements/file-storage-context\";\nexport * from \"./file-storage-client\";\nexport * from \"./holochain-dropzone\";\nexport * from \"./types\";\nexport * from \"./context\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC","sourcesContent":["export * from \"./file-storage-client.js\";\nexport * from \"./holochain-dropzone.js\";\nexport * from \"./types.js\";\nexport * from \"./context.js\";\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@holochain-open-dev/file-storage",
-  "version": "0.1.4",
+  "version": "0.2.1",
   "description": "File storage utilities to store and retrieve files in a holochain DHT",
   "author": "guillem.cordoba@gmail.com",
   "license": "MIT",
@@ -8,10 +8,8 @@
   "module": "dist/index.js",
   "exports": {
     ".": "./dist/index.js",
-    "./file-storage-context": "./dist/definitions/file-storage-context.js",
-    "./upload-files": "./dist/definitions/upload-files.js",
     "./mocks": "./dist/mocks.js",
-    "./show-image": "./dist/definitions/show-image.js"
+    "./elements/*": "./dist/elements/*"
   },
   "files": ["dist"],
   "scripts": {
@@ -22,16 +20,14 @@
     "format": "eslint --ext .ts,.html src --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "@holochain-open-dev/elements": "^0.2.3",
+    "@holochain-open-dev/elements": "^0.3.0",
     "@holochain-open-dev/utils": "^0.12.0",
     "@holochain/client": "^0.12.0",
     "@lit-labs/context": "^0.2.0",
     "@lit-labs/task": "^2.0.0",
     "@lit/localize": "^0.11.4",
-    "@open-wc/scoped-elements": "^2.1.0",
-    "@scoped-elements/dropzone": "^0.1.2",
-    "@scoped-elements/material-web": "^0.1.7",
-    "@scoped-elements/shoelace": "^0.1.0",
+    "@scoped-elements/dropzone": "^0.1.3",
+    "@shoelace-style/shoelace": "^2.3.0",
     "lit": "^2.6.0"
   },
   "devDependencies": {