@getflip/swirl-components 0.1.0 → 0.3.0

package/dist/collection/components/flip-empty-state/flip-empty-state.stories.js

@@ -0,0 +1,26 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-empty-state.mdx";
+export default {
+  component: "flip-empty-state",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipEmptyState",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-empty-state", args);
+  element.innerHTML = `
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua.
+  `;
+  return element;
+};
+export const FlipEmptyState = Template.bind({});
+FlipEmptyState.args = {
+  heading: "Nothing to see here.",
+  illustration: "/images/empty-state-1.svg",
+};
+//# sourceMappingURL=flip-empty-state.stories.js.map

package/dist/collection/components/flip-empty-state/flip-empty-state.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-empty-state.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-empty-state/flip-empty-state.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAE1C,eAAe;EACb,SAAS,EAAE,kBAAkB;EAC7B,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,2BAA2B;CACnC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;EAE/D,OAAO,CAAC,SAAS,GAAG;;;;GAInB,CAAC;EAEF,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,cAAc,CAAC,IAAI,GAAG;EACpB,OAAO,EAAE,sBAAsB;EAC/B,YAAY,EAAE,2BAA2B;CAC1C,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-empty-state.mdx\";\n\nexport default {\n  component: \"flip-empty-state\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipEmptyState\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-empty-state\", args);\n\n  element.innerHTML = `\n    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy\n    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n    voluptua.\n  `;\n\n  return element;\n};\n\nexport const FlipEmptyState = Template.bind({});\n\nFlipEmptyState.args = {\n  heading: \"Nothing to see here.\",\n  illustration: \"/images/empty-state-1.svg\",\n};\n"]}

package/dist/collection/components/flip-file-uploader/flip-file-uploader.css

@@ -0,0 +1,86 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.file-uploader {
+  width: 100%;
+}
+
+.file-uploader--show-dropzone .file-uploader__dropzone {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 10rem;
+    margin-top: var(--s-space-16);
+    justify-content: center;
+    align-items: center;
+    border: var(--s-border-width-default) dashed var(--s-border-strong);
+    border-radius: var(--s-border-radius-s);
+    flex-direction: column;
+  }
+
+.file-uploader--show-dropzone .file-uploader__dropzone:focus-within {
+      border-color: var(--s-focus-default);
+      border-width: 0.125rem;
+    }
+
+.file-uploader--show-dropzone .file-uploader__input {
+    position: absolute;
+    display: block;
+    cursor: pointer;
+    opacity: 0;
+    inset: 0;
+  }
+
+.file-uploader--disabled .file-uploader__input {
+    cursor: default;
+  }
+
+.file-uploader--disabled .file-uploader__dropzone-cta,
+  .file-uploader--disabled .file-uploader__drag-drop-label {
+    color: var(--s-text-disabled);
+  }
+
+.file-uploader--disabled .file-uploader__dropzone-icon {
+    color: var(--s-text-disabled);
+  }
+
+.file-uploader__label {
+  display: block;
+  font-weight: var(--s-font-weight-semibold);
+  line-height: var(--s-line-height-base);
+}
+
+.file-uploader__description {
+  display: block;
+  margin-top: var(--s-space-4);
+  font-size: var(--s-font-size-sm);
+  line-height: var(--s-line-height-sm);
+}
+
+.file-uploader__dropzone-icon {
+  color: var(--s-icon-highlight);
+}
+
+.file-uploader__dropzone-label {
+  margin-top: var(--s-space-16);
+  line-height: var(--s-line-height-base);
+}
+
+.file-uploader__dropzone-cta {
+  color: var(--s-interactive-primary-default);
+  font-weight: var(--s-font-weight-medium);
+}
+
+.file-uploader__upload-button {
+  margin-top: var(--s-space-16);
+}
+
+.file-uploader__input {
+  display: none;
+}

package/dist/collection/components/flip-file-uploader/flip-file-uploader.js

@@ -0,0 +1,286 @@
+import { Component, Event, h, Host, Method, Prop, } from "@stencil/core";
+import classnames from "classnames";
+export class FlipFileUploader {
+  constructor() {
+    this.ctaLabel = "Click to upload";
+    this.dragDropLabel = "or drag and drop.";
+    this.showDropzone = true;
+    this.uploadButtonLabel = "Select file";
+    this.onChange = (event) => {
+      const fileList = event.target.files;
+      this.valueChange.emit(fileList);
+    };
+    this.onUploadButtonClick = () => {
+      this.inputEl.click();
+    };
+  }
+  /**
+   * Reset the file input.
+   */
+  async reset() {
+    this.inputEl.value = "";
+  }
+  render() {
+    const ariaDescribedby = Boolean(this.description)
+      ? `${this.inputId}-description ${this.inputId}-additional-label`
+      : `${this.inputId}-additional-label`;
+    const tabIndex = this.showDropzone ? 0 : -1;
+    const className = classnames("file-uploader", {
+      "file-uploader--disabled": this.disabled,
+      "file-uploader--show-dropzone": this.showDropzone,
+    });
+    return (h(Host, null,
+      h("div", { class: className },
+        h("label", { class: "file-uploader__label", htmlFor: this.inputId, id: `${this.inputEl}-label` }, this.label),
+        this.description && (h("span", { class: "file-uploader__description", id: `${this.inputId}-description` }, this.description)),
+        h("div", { class: "file-uploader__dropzone" },
+          this.showDropzone ? ([
+            h("flip-icon-cloud-upload", { class: "file-uploader__dropzone-icon" }),
+            h("div", { class: "file-uploader__dropzone-label", id: `${this.inputId}-additional-label` },
+              h("span", { class: "file-uploader__dropzone-cta" }, this.ctaLabel),
+              " ",
+              h("span", { class: "file-uploader__drag-drop-label" }, this.dragDropLabel)),
+          ]) : (h("flip-button", { class: "file-uploader__upload-button", disabled: this.disabled, flipAriaDescribedby: ariaDescribedby, intent: "primary", label: this.uploadButtonLabel, onClick: this.onUploadButtonClick, variant: "flat" })),
+          h("input", { accept: this.accept, "aria-describedby": ariaDescribedby, "aria-disabled": this.disabled, autoComplete: "off", class: "file-uploader__input", disabled: this.disabled, id: this.inputId, multiple: this.multiple, name: this.inputName, onChange: this.onChange, ref: (el) => (this.inputEl = el), tabIndex: tabIndex, type: "file" })))));
+  }
+  static get is() { return "flip-file-uploader"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-file-uploader.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-file-uploader.css"]
+  }; }
+  static get properties() { return {
+    "accept": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "accept",
+      "reflect": false
+    },
+    "ctaLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "cta-label",
+      "reflect": false,
+      "defaultValue": "\"Click to upload\""
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false
+    },
+    "dragDropLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "drag-drop-label",
+      "reflect": false,
+      "defaultValue": "\"or drag and drop.\""
+    },
+    "inputId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "input-id",
+      "reflect": false
+    },
+    "inputName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "input-name",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "multiple": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "multiple",
+      "reflect": false
+    },
+    "showDropzone": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-dropzone",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "uploadButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "upload-button-label",
+      "reflect": false,
+      "defaultValue": "\"Select file\""
+    }
+  }; }
+  static get events() { return [{
+      "method": "valueChange",
+      "name": "valueChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "FileList",
+        "resolved": "FileList",
+        "references": {
+          "FileList": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "reset": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Reset the file input.",
+        "tags": []
+      }
+    }
+  }; }
+}
+//# sourceMappingURL=flip-file-uploader.js.map

package/dist/collection/components/flip-file-uploader/flip-file-uploader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-file-uploader.js","sourceRoot":"","sources":["../../../../src/components/flip-file-uploader/flip-file-uploader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\nimport { FlipFormInput } from \"../../utils\";\n\n@Component({\n  /**\n   * Form controls in shadow dom can still not be associated with labels in the\n   * light dom, cross browser. So for now we disable shadow dom for form\n   * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n   * https://caniuse.com/?search=attachInternals\n   */\n  scoped: true,\n  shadow: false,\n  styleUrl: \"flip-file-uploader.css\",\n  tag: \"flip-file-uploader\",\n})\nexport class FlipFileUploader implements FlipFormInput<FileList> {\n  @Prop() accept?: string;\n  @Prop() ctaLabel?: string = \"Click to upload\";\n  @Prop() description?: string;\n  @Prop() disabled?: boolean;\n  @Prop() dragDropLabel?: string = \"or drag and drop.\";\n  @Prop() inputId!: string;\n  @Prop() inputName!: string;\n  @Prop() label!: string;\n  @Prop() multiple?: boolean;\n  @Prop() showDropzone?: boolean = true;\n  @Prop() uploadButtonLabel?: string = \"Select file\";\n\n  @Event() valueChange: EventEmitter<FileList>;\n\n  private inputEl: HTMLInputElement;\n\n  /**\n   * Reset the file input.\n   */\n  @Method()\n  public async reset() {\n    this.inputEl.value = \"\";\n  }\n\n  private onChange = (event: Event) => {\n    const fileList = (event.target as HTMLInputElement).files;\n\n    this.valueChange.emit(fileList);\n  };\n\n  private onUploadButtonClick = () => {\n    this.inputEl.click();\n  };\n\n  render() {\n    const ariaDescribedby = Boolean(this.description)\n      ? `${this.inputId}-description ${this.inputId}-additional-label`\n      : `${this.inputId}-additional-label`;\n\n    const tabIndex = this.showDropzone ? 0 : -1;\n\n    const className = classnames(\"file-uploader\", {\n      \"file-uploader--disabled\": this.disabled,\n      \"file-uploader--show-dropzone\": this.showDropzone,\n    });\n\n    return (\n      <Host>\n        <div class={className}>\n          <label\n            class=\"file-uploader__label\"\n            htmlFor={this.inputId}\n            id={`${this.inputEl}-label`}\n          >\n            {this.label}\n          </label>\n\n          {this.description && (\n            <span\n              class=\"file-uploader__description\"\n              id={`${this.inputId}-description`}\n            >\n              {this.description}\n            </span>\n          )}\n\n          <div class=\"file-uploader__dropzone\">\n            {this.showDropzone ? (\n              [\n                <flip-icon-cloud-upload class=\"file-uploader__dropzone-icon\"></flip-icon-cloud-upload>,\n                <div\n                  class=\"file-uploader__dropzone-label\"\n                  id={`${this.inputId}-additional-label`}\n                >\n                  <span class=\"file-uploader__dropzone-cta\">\n                    {this.ctaLabel}\n                  </span>{\" \"}\n                  <span class=\"file-uploader__drag-drop-label\">\n                    {this.dragDropLabel}\n                  </span>\n                </div>,\n              ]\n            ) : (\n              <flip-button\n                class=\"file-uploader__upload-button\"\n                disabled={this.disabled}\n                flipAriaDescribedby={ariaDescribedby}\n                intent=\"primary\"\n                label={this.uploadButtonLabel}\n                onClick={this.onUploadButtonClick}\n                variant=\"flat\"\n              ></flip-button>\n            )}\n\n            <input\n              accept={this.accept}\n              aria-describedby={ariaDescribedby}\n              aria-disabled={this.disabled}\n              autoComplete=\"off\"\n              class=\"file-uploader__input\"\n              disabled={this.disabled}\n              id={this.inputId}\n              multiple={this.multiple}\n              name={this.inputName}\n              onChange={this.onChange}\n              ref={(el) => (this.inputEl = el)}\n              tabIndex={tabIndex}\n              type=\"file\"\n            />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-file-uploader/flip-file-uploader.stories.js

@@ -0,0 +1,24 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-file-uploader.mdx";
+export default {
+  component: "flip-file-uploader",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipFileUploader",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-file-uploader", args);
+  return element;
+};
+export const FlipFileUploader = Template.bind({});
+FlipFileUploader.args = {
+  accept: "image/*",
+  description: "Only image files are allowed.",
+  inputId: "file-upload",
+  inputName: "file-upload",
+  label: "Label",
+};
+//# sourceMappingURL=flip-file-uploader.stories.js.map

package/dist/collection/components/flip-file-uploader/flip-file-uploader.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-file-uploader.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-file-uploader/flip-file-uploader.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,0BAA0B,CAAC;AAE5C,eAAe;EACb,SAAS,EAAE,oBAAoB;EAC/B,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,6BAA6B;CACrC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAAC;EAEjE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAElD,gBAAgB,CAAC,IAAI,GAAG;EACtB,MAAM,EAAE,SAAS;EACjB,WAAW,EAAE,+BAA+B;EAC5C,OAAO,EAAE,aAAa;EACtB,SAAS,EAAE,aAAa;EACxB,KAAK,EAAE,OAAO;CACf,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-file-uploader.mdx\";\n\nexport default {\n  component: \"flip-file-uploader\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipFileUploader\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-file-uploader\", args);\n\n  return element;\n};\n\nexport const FlipFileUploader = Template.bind({});\n\nFlipFileUploader.args = {\n  accept: \"image/*\",\n  description: \"Only image files are allowed.\",\n  inputId: \"file-upload\",\n  inputName: \"file-upload\",\n  label: \"Label\",\n};\n"]}

package/dist/collection/components/flip-file-viewer/flip-file-viewer.css

@@ -0,0 +1,25 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.file-viewer {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}
+
+.file-viewer__file {
+  display: inline-flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}

package/dist/collection/components/flip-file-viewer/flip-file-viewer.js

@@ -0,0 +1,200 @@
+import { Component, h, Host, Method, Prop } from "@stencil/core";
+import { saveAs } from "file-saver";
+export class FlipFileViewer {
+  constructor() {
+    this.errorMessage = "File could not be loaded.";
+    this.typeUnsupportedMessage = "File type is not supported.";
+    this.zoom = 1;
+  }
+  /**
+   * Download the file.
+   */
+  async download() {
+    const fileName = this.file.split("/").pop();
+    saveAs(this.file, fileName);
+  }
+  /**
+   * Print the file. Applicable to PDFs only.
+   */
+  async print() {
+    if (this.type === "application/pdf") {
+      this.viewer.print();
+    }
+  }
+  render() {
+    const unsupportedType = !Boolean(this.type) ||
+      (!this.type.startsWith("image/") &&
+        !this.type.startsWith("video/") &&
+        !this.type.startsWith("audio/") &&
+        this.type !== "text/plain" &&
+        this.type !== "text/csv" &&
+        this.type !== "application/pdf");
+    return (h(Host, null,
+      h("div", { class: "file-viewer" }, this.type && (h("div", { class: "file-viewer__file" },
+        this.type.startsWith("image/") && (h("flip-file-viewer-image", { description: this.description, errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })),
+        this.type === "text/plain" && (h("flip-file-viewer-text", { errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })),
+        this.type === "text/csv" && (h("flip-file-viewer-csv", { errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })),
+        this.type === "application/pdf" && (h("flip-file-viewer-pdf", { errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el), zoom: this.zoom })),
+        this.type.startsWith("video/") && (h("flip-file-viewer-video", { file: this.file, ref: (el) => (this.viewer = el), type: this.type })),
+        this.type.startsWith("audio/") && (h("flip-file-viewer-audio", { file: this.file, ref: (el) => (this.viewer = el), type: this.type })),
+        unsupportedType && (h("flip-inline-error", { message: this.typeUnsupportedMessage })))))));
+  }
+  static get is() { return "flip-file-viewer"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-file-viewer.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-file-viewer.css"]
+  }; }
+  static get properties() { return {
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": false
+    },
+    "errorMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "error-message",
+      "reflect": false,
+      "defaultValue": "\"File could not be loaded.\""
+    },
+    "file": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "file",
+      "reflect": false
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false
+    },
+    "typeUnsupportedMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type-unsupported-message",
+      "reflect": false,
+      "defaultValue": "\"File type is not supported.\""
+    },
+    "zoom": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipFileViewerPdfZoom",
+        "resolved": "\"auto\" | number",
+        "references": {
+          "FlipFileViewerPdfZoom": {
+            "location": "import",
+            "path": "./viewers/flip-file-viewer-pdf/flip-file-viewer-pdf"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "zoom",
+      "reflect": false,
+      "defaultValue": "1"
+    }
+  }; }
+  static get methods() { return {
+    "download": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Download the file.",
+        "tags": []
+      }
+    },
+    "print": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLFlipFileViewerPdfElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Print the file. Applicable to PDFs only.",
+        "tags": []
+      }
+    }
+  }; }
+}
+//# sourceMappingURL=flip-file-viewer.js.map