@getflip/swirl-components 0.2.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.js

@@ -283,3 +283,4 @@ export class FlipFileUploader {
     }
   }; }
 }
+//# 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

@@ -21,3 +21,4 @@ FlipFileUploader.args = {
   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

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-file-viewer.js","sourceRoot":"","sources":["../../../../src/components/flip-file-viewer/flip-file-viewer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Method, Prop } from \"@stencil/core\";\nimport { saveAs } from \"file-saver\";\nimport { FlipFileViewerPdfZoom } from \"./viewers/flip-file-viewer-pdf/flip-file-viewer-pdf\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-file-viewer.css\",\n  tag: \"flip-file-viewer\",\n})\nexport class FlipFileViewer {\n  @Prop() description?: string;\n  @Prop() errorMessage?: string = \"File could not be loaded.\";\n  @Prop() file!: string;\n  @Prop() type!: string;\n  @Prop() typeUnsupportedMessage?: string = \"File type is not supported.\";\n  @Prop() zoom?: FlipFileViewerPdfZoom = 1;\n\n  private viewer: HTMLElement;\n\n  /**\n   * Download the file.\n   */\n  @Method()\n  async download() {\n    const fileName = this.file.split(\"/\").pop();\n\n    saveAs(this.file, fileName);\n  }\n\n  /**\n   * Print the file. Applicable to PDFs only.\n   */\n  @Method()\n  async print() {\n    if (this.type === \"application/pdf\") {\n      (this.viewer as HTMLFlipFileViewerPdfElement).print();\n    }\n  }\n\n  render() {\n    const unsupportedType =\n      !Boolean(this.type) ||\n      (!this.type.startsWith(\"image/\") &&\n        !this.type.startsWith(\"video/\") &&\n        !this.type.startsWith(\"audio/\") &&\n        this.type !== \"text/plain\" &&\n        this.type !== \"text/csv\" &&\n        this.type !== \"application/pdf\");\n\n    return (\n      <Host>\n        <div class=\"file-viewer\">\n          {this.type && (\n            <div class=\"file-viewer__file\">\n              {/* images */}\n              {this.type.startsWith(\"image/\") && (\n                <flip-file-viewer-image\n                  description={this.description}\n                  errorMessage={this.errorMessage}\n                  file={this.file}\n                  ref={(el) => (this.viewer = el)}\n                ></flip-file-viewer-image>\n              )}\n\n              {/* text files */}\n              {this.type === \"text/plain\" && (\n                <flip-file-viewer-text\n                  errorMessage={this.errorMessage}\n                  file={this.file}\n                  ref={(el) => (this.viewer = el)}\n                ></flip-file-viewer-text>\n              )}\n\n              {/* csv files */}\n              {this.type === \"text/csv\" && (\n                <flip-file-viewer-csv\n                  errorMessage={this.errorMessage}\n                  file={this.file}\n                  ref={(el) => (this.viewer = el)}\n                ></flip-file-viewer-csv>\n              )}\n\n              {/* pdf files */}\n              {this.type === \"application/pdf\" && (\n                <flip-file-viewer-pdf\n                  errorMessage={this.errorMessage}\n                  file={this.file}\n                  ref={(el) => (this.viewer = el)}\n                  zoom={this.zoom}\n                ></flip-file-viewer-pdf>\n              )}\n\n              {/* video files */}\n              {this.type.startsWith(\"video/\") && (\n                <flip-file-viewer-video\n                  file={this.file}\n                  ref={(el) => (this.viewer = el)}\n                  type={this.type}\n                ></flip-file-viewer-video>\n              )}\n\n              {/* audio files */}\n              {this.type.startsWith(\"audio/\") && (\n                <flip-file-viewer-audio\n                  file={this.file}\n                  ref={(el) => (this.viewer = el)}\n                  type={this.type}\n                ></flip-file-viewer-audio>\n              )}\n\n              {unsupportedType && (\n                <flip-inline-error\n                  message={this.typeUnsupportedMessage}\n                ></flip-inline-error>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,53 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-file-viewer.mdx";
+export default {
+  argTypes: {
+    file: {
+      control: { type: "text" },
+    },
+    zoom: {
+      control: { type: "text" },
+      description: "Applicable to PDFs only.",
+    },
+  },
+  component: "flip-file-viewer",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipFileViewer",
+};
+const Template = (args) => {
+  const container = document.createElement("flip-stack");
+  container.spacing = "24";
+  const element = generateStoryElement("flip-file-viewer", args);
+  element.style.height = "clamp(400px, 90vh, 700px)";
+  const tools = document.createElement("flip-stack");
+  tools.orientation = "horizontal";
+  tools.spacing = "8";
+  const printButton = document.createElement("flip-button");
+  printButton.setAttribute("label", "Print");
+  printButton.addEventListener("click", () => {
+    element.print();
+  });
+  const downloadButton = document.createElement("flip-button");
+  downloadButton.setAttribute("label", "Download");
+  downloadButton.addEventListener("click", () => {
+    element.download();
+  });
+  if (args.type === "application/pdf") {
+    tools.append("\n    ", printButton, "\n    ", downloadButton, "\n  ");
+  }
+  else {
+    tools.append("\n    ", downloadButton, "\n  ");
+  }
+  container.append("\n  ", element, "\n  ", tools, "\n");
+  return container;
+};
+export const FlipFileViewer = Template.bind({});
+FlipFileViewer.args = {
+  file: "/sample.pdf",
+  type: "application/pdf",
+};
+//# sourceMappingURL=flip-file-viewer.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-file-viewer.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-file-viewer/flip-file-viewer.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAE1C,eAAe;EACb,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;KAC1B;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;MACzB,WAAW,EAAE,0BAA0B;KACxC;GACF;EACD,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,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;EACvD,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;EAEzB,MAAM,OAAO,GAAG,oBAAoB,CAClC,kBAAkB,EAClB,IAAI,CACwB,CAAC;EAE/B,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,2BAA2B,CAAC;EAEnD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;EACnD,KAAK,CAAC,WAAW,GAAG,YAAY,CAAC;EACjC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;EAEpB,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;EAC1D,WAAW,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;EAC3C,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;IACzC,OAAO,CAAC,KAAK,EAAE,CAAC;EAClB,CAAC,CAAC,CAAC;EAEH,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;EAC7D,cAAc,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;EACjD,cAAc,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;IAC5C,OAAO,CAAC,QAAQ,EAAE,CAAC;EACrB,CAAC,CAAC,CAAC;EAEH,IAAI,IAAI,CAAC,IAAI,KAAK,iBAAiB,EAAE;IACnC,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,CAAC,CAAC;GACvE;OAAM;IACL,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE,cAAc,EAAE,MAAM,CAAC,CAAC;GAChD;EAED,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;EAEvD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,cAAc,CAAC,IAAI,GAAG;EACpB,IAAI,EAAE,aAAa;EACnB,IAAI,EAAE,iBAAiB;CACxB,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-file-viewer.mdx\";\n\nexport default {\n  argTypes: {\n    file: {\n      control: { type: \"text\" },\n    },\n    zoom: {\n      control: { type: \"text\" },\n      description: \"Applicable to PDFs only.\",\n    },\n  },\n  component: \"flip-file-viewer\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipFileViewer\",\n};\n\nconst Template = (args) => {\n  const container = document.createElement(\"flip-stack\");\n  container.spacing = \"24\";\n\n  const element = generateStoryElement(\n    \"flip-file-viewer\",\n    args\n  ) as HTMLFlipFileViewerElement;\n\n  element.style.height = \"clamp(400px, 90vh, 700px)\";\n\n  const tools = document.createElement(\"flip-stack\");\n  tools.orientation = \"horizontal\";\n  tools.spacing = \"8\";\n\n  const printButton = document.createElement(\"flip-button\");\n  printButton.setAttribute(\"label\", \"Print\");\n  printButton.addEventListener(\"click\", () => {\n    element.print();\n  });\n\n  const downloadButton = document.createElement(\"flip-button\");\n  downloadButton.setAttribute(\"label\", \"Download\");\n  downloadButton.addEventListener(\"click\", () => {\n    element.download();\n  });\n\n  if (args.type === \"application/pdf\") {\n    tools.append(\"\\n    \", printButton, \"\\n    \", downloadButton, \"\\n  \");\n  } else {\n    tools.append(\"\\n    \", downloadButton, \"\\n  \");\n  }\n\n  container.append(\"\\n  \", element, \"\\n  \", tools, \"\\n\");\n\n  return container;\n};\n\nexport const FlipFileViewer = Template.bind({});\n\nFlipFileViewer.args = {\n  file: \"/sample.pdf\",\n  type: \"application/pdf\",\n};\n"]}

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

@@ -0,0 +1,14 @@
+:host {
+  display: inline-flex;
+  width: 100%;
+  height: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.file-viewer-audio__audio {
+  width: 100%;
+  height: 100%;
+}

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

@@ -0,0 +1,53 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+export class FlipFileViewerAudio {
+  render() {
+    return (h(Host, { class: "file-viewer-audio" },
+      h("audio", { class: "file-viewer-audio__audio", controls: true },
+        h("source", { src: this.file, type: this.type }))));
+  }
+  static get is() { return "flip-file-viewer-audio"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-file-viewer-audio.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-file-viewer-audio.css"]
+  }; }
+  static get properties() { return {
+    "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
+    }
+  }; }
+}
+//# sourceMappingURL=flip-file-viewer-audio.js.map

package/dist/collection/components/flip-file-viewer/viewers/flip-file-viewer-audio/flip-file-viewer-audio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-file-viewer-audio.js","sourceRoot":"","sources":["../../../../../../src/components/flip-file-viewer/viewers/flip-file-viewer-audio/flip-file-viewer-audio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,mBAAmB;EAI9B,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,mBAAmB;MAC7B,aAAO,KAAK,EAAC,0BAA0B,EAAC,QAAQ;QAC9C,cAAQ,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAW,CAC5C,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-file-viewer-audio.css\",\n  tag: \"flip-file-viewer-audio\",\n})\nexport class FlipFileViewerAudio {\n  @Prop() file!: string;\n  @Prop() type!: string;\n\n  render() {\n    return (\n      <Host class=\"file-viewer-audio\">\n        <audio class=\"file-viewer-audio__audio\" controls>\n          <source src={this.file} type={this.type}></source>\n        </audio>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,43 @@
+:host {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+  max-height: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.file-viewer-csv__csv {
+  overflow: auto;
+  width: 100%;
+  max-height: 100%;
+}
+
+.file-viewer-csv__table {
+  margin-right: auto;
+  margin-left: auto;
+  border-collapse: collapse;
+}
+
+.file-viewer-csv__cell {
+  padding: var(--s-space-8);
+  border: var(--s-border-width-default) solid var(--s-border-default);
+}
+
+.file-viewer-csv__spinner {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.2);
+  inset: 0;
+}
+
+.file-viewer-csv__error {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+}

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

@@ -0,0 +1,99 @@
+import { Component, h, Host, Prop, State, Watch } from "@stencil/core";
+import { parse } from "papaparse";
+export class FlipFileViewerCsv {
+  constructor() {
+    this.errorMessage = "File could not be loaded.";
+  }
+  componentWillLoad() {
+    this.updateTable();
+  }
+  async updateTable() {
+    var _a;
+    this.error = false;
+    this.loading = true;
+    try {
+      const response = await fetch(this.file);
+      const parsed = parse(await response.text(), {
+        dynamicTyping: true,
+        fastMode: false,
+        skipEmptyLines: true,
+      });
+      if (((_a = parsed.errors) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+        this.error = true;
+        this.loading = false;
+        return;
+      }
+      this.data = parsed.data;
+      this.loading = false;
+    }
+    catch (e) {
+      this.loading = false;
+      this.error = true;
+    }
+  }
+  render() {
+    var _a;
+    return (h(Host, { class: "file-viewer-csv" },
+      this.error && (h("flip-inline-error", { class: "file-viewer-csv__error", message: this.errorMessage })),
+      h("div", { class: "file-viewer-csv__csv", tabIndex: 0 },
+        h("table", { class: "file-viewer-csv__table" },
+          h("tbody", null, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map((row, index) => (h("tr", { class: "file-viewer-csv__row", key: `row-${index}` }, row.map((cell, i) => (h("td", { class: "file-viewer-csv__cell", key: `cell-${index}-${i}` }, cell))))))))),
+      this.loading && (h("div", { class: "file-viewer-csv__spinner" },
+        h("flip-spinner", null)))));
+  }
+  static get is() { return "flip-file-viewer-csv"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-file-viewer-csv.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-file-viewer-csv.css"]
+  }; }
+  static get properties() { return {
+    "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
+    }
+  }; }
+  static get states() { return {
+    "data": {},
+    "error": {},
+    "loading": {}
+  }; }
+  static get watchers() { return [{
+      "propName": "file",
+      "methodName": "updateTable"
+    }]; }
+}
+//# sourceMappingURL=flip-file-viewer-csv.js.map

package/dist/collection/components/flip-file-viewer/viewers/flip-file-viewer-csv/flip-file-viewer-csv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-file-viewer-csv.js","sourceRoot":"","sources":["../../../../../../src/components/flip-file-viewer/viewers/flip-file-viewer-csv/flip-file-viewer-csv.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAOlC,MAAM,OAAO,iBAAiB;EAL9B;IAMU,iBAAY,GAAY,2BAA2B,CAAC;GA2E7D;EApEC,iBAAiB;IACf,IAAI,CAAC,WAAW,EAAE,CAAC;EACrB,CAAC;EAGD,KAAK,CAAC,WAAW;;IACf,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IAEpB,IAAI;MACF,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MAExC,MAAM,MAAM,GAAG,KAAK,CAAW,MAAM,QAAQ,CAAC,IAAI,EAAE,EAAE;QACpD,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,KAAK;QACf,cAAc,EAAE,IAAI;OACrB,CAAC,CAAC;MAEH,IAAI,CAAA,MAAA,MAAM,CAAC,MAAM,0CAAE,MAAM,IAAG,CAAC,EAAE;QAC7B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,OAAO;OACR;MAED,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;MAExB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB;IAAC,OAAO,CAAC,EAAE;MACV,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;MACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;KACnB;EACH,CAAC;EAED,MAAM;;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB;MAC1B,IAAI,CAAC,KAAK,IAAI,CACb,yBACE,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,IAAI,CAAC,YAAY,GACP,CACtB;MACD,WAAK,KAAK,EAAC,sBAAsB,EAAC,QAAQ,EAAE,CAAC;QAC3C,aAAO,KAAK,EAAC,wBAAwB;UACnC,iBACG,MAAA,IAAI,CAAC,IAAI,0CAAE,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,UAAI,KAAK,EAAC,sBAAsB,EAAC,GAAG,EAAE,OAAO,KAAK,EAAE,IACjD,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACpB,UACE,KAAK,EAAC,uBAAuB,EAC7B,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC,EAAE,IAExB,IAAI,CACF,CACN,CAAC,CACC,CACN,CAAC,CACI,CACF,CACJ;MACL,IAAI,CAAC,OAAO,IAAI,CACf,WAAK,KAAK,EAAC,0BAA0B;QACnC,uBAA6B,CACzB,CACP,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport { parse } from \"papaparse\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-file-viewer-csv.css\",\n  tag: \"flip-file-viewer-csv\",\n})\nexport class FlipFileViewerCsv {\n  @Prop() errorMessage?: string = \"File could not be loaded.\";\n  @Prop() file!: string;\n\n  @State() data: (boolean | number | string)[][];\n  @State() error: boolean;\n  @State() loading: boolean;\n\n  componentWillLoad() {\n    this.updateTable();\n  }\n\n  @Watch(\"file\")\n  async updateTable() {\n    this.error = false;\n    this.loading = true;\n\n    try {\n      const response = await fetch(this.file);\n\n      const parsed = parse<string[]>(await response.text(), {\n        dynamicTyping: true,\n        fastMode: false,\n        skipEmptyLines: true,\n      });\n\n      if (parsed.errors?.length > 0) {\n        this.error = true;\n        this.loading = false;\n        return;\n      }\n\n      this.data = parsed.data;\n\n      this.loading = false;\n    } catch (e) {\n      this.loading = false;\n      this.error = true;\n    }\n  }\n\n  render() {\n    return (\n      <Host class=\"file-viewer-csv\">\n        {this.error && (\n          <flip-inline-error\n            class=\"file-viewer-csv__error\"\n            message={this.errorMessage}\n          ></flip-inline-error>\n        )}\n        <div class=\"file-viewer-csv__csv\" tabIndex={0}>\n          <table class=\"file-viewer-csv__table\">\n            <tbody>\n              {this.data?.map((row, index) => (\n                <tr class=\"file-viewer-csv__row\" key={`row-${index}`}>\n                  {row.map((cell, i) => (\n                    <td\n                      class=\"file-viewer-csv__cell\"\n                      key={`cell-${index}-${i}`}\n                    >\n                      {cell}\n                    </td>\n                  ))}\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </div>\n        {this.loading && (\n          <div class=\"file-viewer-csv__spinner\">\n            <flip-spinner></flip-spinner>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,31 @@
+:host {
+  position: relative;
+  display: inline-flex;
+  max-height: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.file-viewer-image__image {
+  max-width: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+.file-viewer-image__spinner {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.2);
+  inset: 0;
+}
+
+.file-viewer-image__error {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+}