@getflip/swirl-components 0.0.0-new-shell-20231128124118

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

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

package/dist/collection/components/swirl-file-viewer/swirl-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/swirl-file-viewer/swirl-file-viewer.js

@@ -0,0 +1,325 @@
+import { h, Host, } from "@stencil/core";
+import { saveAs } from "file-saver";
+export class SwirlFileViewer {
+  constructor() {
+    this.onActivate = (event) => {
+      this.activate.emit(event.detail);
+    };
+    this.onVisiblePagesChange = (event) => {
+      this.visiblePagesChange.emit(event.detail);
+    };
+    this.active = true;
+    this.autoplay = undefined;
+    this.description = undefined;
+    this.errorMessage = "File could not be loaded.";
+    this.file = undefined;
+    this.thumbnailUrl = undefined;
+    this.type = undefined;
+    this.typeUnsupportedMessage = "File type is not supported.";
+    this.viewMode = "single";
+    this.zoom = 1;
+  }
+  /**
+   * Download the file.
+   */
+  async download() {
+    const fileName = this.file.split("/").pop();
+    const file = await fetch(this.file);
+    saveAs(await file.blob(), 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 && this.active && (h("div", { class: "file-viewer__file" }, this.type.startsWith("image/") && (h("swirl-file-viewer-image", { description: this.description, errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/plain" && (h("swirl-file-viewer-text", { errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/csv" && (h("swirl-file-viewer-csv", { errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "application/pdf" && (h("swirl-file-viewer-pdf", { errorMessage: this.errorMessage, file: this.file, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, ref: (el) => (this.viewer = el), viewMode: this.viewMode, zoom: this.zoom })), this.type.startsWith("video/") && (h("swirl-file-viewer-video", { autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el), type: this.type })), this.type.startsWith("audio/") && (h("swirl-file-viewer-audio", { autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el), type: this.type })), unsupportedType && (h("swirl-inline-error", { message: this.typeUnsupportedMessage })))))));
+  }
+  static get is() { return "swirl-file-viewer"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-file-viewer.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-file-viewer.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "active": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "autoplay": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "autoplay",
+        "reflect": false
+      },
+      "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
+      },
+      "thumbnailUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "thumbnail-url",
+        "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.\""
+      },
+      "viewMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlFileViewerPdfViewMode",
+          "resolved": "\"side-by-side\" | \"single\"",
+          "references": {
+            "SwirlFileViewerPdfViewMode": {
+              "location": "import",
+              "path": "./viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "view-mode",
+        "reflect": false,
+        "defaultValue": "\"single\""
+      },
+      "zoom": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlFileViewerPdfZoom",
+          "resolved": "\"auto\" | number",
+          "references": {
+            "SwirlFileViewerPdfZoom": {
+              "location": "import",
+              "path": "./viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "zoom",
+        "reflect": false,
+        "defaultValue": "1"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "activate",
+        "name": "activate",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "visiblePagesChange",
+        "name": "visiblePagesChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "number[]",
+          "resolved": "number[]",
+          "references": {}
+        }
+      }];
+  }
+  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"
+            },
+            "HTMLSwirlFileViewerPdfElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Print the file. Applicable to PDFs only.",
+          "tags": []
+        }
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-file-viewer/swirl-file-viewer.spec.js

@@ -0,0 +1,245 @@
+const saveAsMock = jest.fn();
+jest.mock("file-saver", () => ({
+  saveAs: saveAsMock,
+}));
+import { mockFetch, MockHeaders, MockResponse, newSpecPage, } from "@stencil/core/testing";
+import { SwirlFileViewer } from "./swirl-file-viewer";
+import { SwirlFileViewerAudio } from "./viewers/swirl-file-viewer-audio/swirl-file-viewer-audio";
+import { SwirlFileViewerCsv } from "./viewers/swirl-file-viewer-csv/swirl-file-viewer-csv";
+import { SwirlFileViewerImage } from "./viewers/swirl-file-viewer-image/swirl-file-viewer-image";
+import { SwirlFileViewerText } from "./viewers/swirl-file-viewer-text/swirl-file-viewer-text";
+import { SwirlFileViewerVideo } from "./viewers/swirl-file-viewer-video/swirl-file-viewer-video";
+describe("swirl-file-viewer", () => {
+  it("renders images", async () => {
+    const page = await newSpecPage({
+      components: [SwirlFileViewer, SwirlFileViewerImage],
+      html: `
+        <swirl-file-viewer
+          description="Description"
+          file="https://picsum.photos/id/1025/1000/1000"
+          type="image/jpeg"
+        ></swirl-file-viewer>
+      `,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-file-viewer description="Description" file="https://picsum.photos/id/1025/1000/1000" type="image/jpeg">
+        <mock:shadow-root>
+          <div class="file-viewer">
+            <div class="file-viewer__file">
+              <swirl-file-viewer-image class="file-viewer-image">
+                <mock:shadow-root>
+                  <img alt="Description" class="file-viewer-image__image" src="https://picsum.photos/id/1025/1000/1000">
+                  <div class="file-viewer-image__spinner">
+                    <swirl-spinner></swirl-spinner>
+                  </div>
+                </mock:shadow-root>
+              </swirl-file-viewer-image>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </swirl-file-viewer>
+    `);
+  });
+  it("renders video player", async () => {
+    const page = await newSpecPage({
+      components: [SwirlFileViewer, SwirlFileViewerVideo],
+      html: `
+        <swirl-file-viewer
+          file="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+          type="video/mp4"
+        ></swirl-file-viewer>
+      `,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-file-viewer file="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
+        <mock:shadow-root>
+          <div class="file-viewer">
+            <div class="file-viewer__file">
+              <swirl-file-viewer-video class="file-viewer-video">
+                <mock:shadow-root>
+                  <video class="file-viewer-video__video" controls="">
+                    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
+                  </video>
+                </mock:shadow-root>
+              </swirl-file-viewer-video>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </swirl-file-viewer>
+    `);
+  });
+  it("renders audio player", async () => {
+    const page = await newSpecPage({
+      components: [SwirlFileViewer, SwirlFileViewerAudio],
+      html: `
+        <swirl-file-viewer
+          file="https://raw.githubusercontent.com/exaile/exaile-test-files/master/art.mp3"
+          type="audio/mp3"
+        ></swirl-file-viewer>
+      `,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-file-viewer file="https://raw.githubusercontent.com/exaile/exaile-test-files/master/art.mp3" type="audio/mp3">
+        <mock:shadow-root>
+          <div class="file-viewer">
+            <div class="file-viewer__file">
+              <swirl-file-viewer-audio class="file-viewer-audio">
+                <mock:shadow-root>
+                  <audio class="file-viewer-audio__audio" controls="">
+                    <source src="https://raw.githubusercontent.com/exaile/exaile-test-files/master/art.mp3" type="audio/mp3">
+                  </audio>
+                </mock:shadow-root>
+              </swirl-file-viewer-audio>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </swirl-file-viewer>
+    `);
+  });
+  it("renders plain text", async () => {
+    mockFetch.text("TEXT");
+    const page = await newSpecPage({
+      components: [SwirlFileViewer, SwirlFileViewerText],
+      html: `
+        <swirl-file-viewer
+          file="https://www.w3.org/TR/2003/REC-PNG-20031110/iso_8859-1.txt"
+          type="text/plain"
+        ></swirl-file-viewer>
+      `,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-file-viewer file="https://www.w3.org/TR/2003/REC-PNG-20031110/iso_8859-1.txt" type="text/plain">
+        <mock:shadow-root>
+          <div class="file-viewer">
+            <div class="file-viewer__file">
+              <swirl-file-viewer-text class="file-viewer-text" exportparts="file-viewer-text__text">
+                <mock:shadow-root><pre class="file-viewer-text__text" part="file-viewer-text__text" tabindex="0">TEXT</pre>
+                </mock:shadow-root>
+              </swirl-file-viewer-text>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </swirl-file-viewer>
+    `);
+  });
+  it("renders csv", async () => {
+    mockFetch.text("Col1,Col2,Col3\nCell1,Cell2,Cell3");
+    const page = await newSpecPage({
+      components: [SwirlFileViewer, SwirlFileViewerCsv],
+      html: `
+        <swirl-file-viewer
+          file="/sample.csv"
+          type="text/csv"
+        ></swirl-file-viewer>
+      `,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-file-viewer file="/sample.csv" type="text/csv">
+        <mock:shadow-root>
+          <div class="file-viewer">
+            <div class="file-viewer__file">
+              <swirl-file-viewer-csv class="file-viewer-csv" exportparts="file-viewer-csv__table">
+                <mock:shadow-root>
+                  <div class="file-viewer-csv__csv" tabindex="0">
+                    <table class="file-viewer-csv__table" part="file-viewer-csv__table">
+                      <tbody>
+                        <tr class="file-viewer-csv__row">
+                          <td class="file-viewer-csv__cell">
+                            Col1
+                          </td>
+                          <td class="file-viewer-csv__cell">
+                            Col2
+                          </td>
+                          <td class="file-viewer-csv__cell">
+                            Col3
+                          </td>
+                        </tr>
+                        <tr class="file-viewer-csv__row">
+                          <td class="file-viewer-csv__cell">
+                            Cell1
+                          </td>
+                          <td class="file-viewer-csv__cell">
+                            Cell2
+                          </td>
+                          <td class="file-viewer-csv__cell">
+                            Cell3
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </mock:shadow-root>
+              </swirl-file-viewer-csv>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </swirl-file-viewer>
+    `);
+  });
+  it("renders pdf", async () => {
+    const page = await newSpecPage({
+      components: [SwirlFileViewer],
+      html: `
+        <swirl-file-viewer
+          file="/sample.pdf"
+          type="application/pdf"
+        ></swirl-file-viewer>
+      `,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-file-viewer file="/sample.pdf" type="application/pdf">
+        <mock:shadow-root>
+          <div class="file-viewer">
+            <div class="file-viewer__file">
+              <swirl-file-viewer-pdf errormessage="File could not be loaded." file="/sample.pdf" viewmode="single" zoom="1"></swirl-file-viewer-pdf>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </swirl-file-viewer>
+    `);
+  });
+  it("shows error for unsupported type", async () => {
+    const page = await newSpecPage({
+      components: [SwirlFileViewer],
+      html: `
+        <swirl-file-viewer
+          file="/sample.html"
+          type="text/html"
+        ></swirl-file-viewer>
+      `,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-file-viewer file="/sample.html" type="text/html">
+        <mock:shadow-root>
+          <div class="file-viewer">
+            <div class="file-viewer__file">
+              <swirl-inline-error message="File type is not supported."></swirl-inline-error>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </swirl-file-viewer>
+    `);
+  });
+  it("allows to download files", async () => {
+    const res = new MockResponse("", {
+      url: "/sample.pdf",
+      headers: new MockHeaders([
+        ["Content-Type", "application/pdf"],
+        ["Access-Control-Allow-Origin", "*"],
+      ]),
+    });
+    mockFetch.response(Object.assign(res, { blob: () => "Blob" }));
+    const page = await newSpecPage({
+      components: [SwirlFileViewer],
+      html: `
+        <swirl-file-viewer
+          file="/sample.pdf"
+          type="application/pdf"
+        ></swirl-file-viewer>
+      `,
+    });
+    await page.root.download();
+    await page.waitForChanges();
+    expect(saveAsMock).toHaveBeenCalledWith("Blob", "sample.pdf");
+  });
+});

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

@@ -0,0 +1,56 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-file-viewer.mdx";
+export default {
+  argTypes: {
+    autoplay: {
+      description: "Applicable to audio/video only.",
+    },
+    file: {
+      control: { type: "text" },
+    },
+    zoom: {
+      control: { type: "text" },
+      description: "Applicable to PDFs only.",
+    },
+  },
+  component: "swirl-file-viewer",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlFileViewer",
+};
+const Template = (args) => {
+  const container = document.createElement("swirl-stack");
+  container.spacing = "24";
+  const element = generateStoryElement("swirl-file-viewer", args);
+  element.style.height = "clamp(400px, 90vh, 700px)";
+  const tools = document.createElement("swirl-stack");
+  tools.orientation = "horizontal";
+  tools.spacing = "8";
+  const printButton = document.createElement("swirl-button");
+  printButton.setAttribute("label", "Print");
+  printButton.addEventListener("click", () => {
+    element.print();
+  });
+  const downloadButton = document.createElement("swirl-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 SwirlFileViewer = Template.bind({});
+SwirlFileViewer.args = {
+  file: "/sample.pdf",
+  type: "application/pdf",
+};

package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-audio/swirl-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%;
+}