@spscommerce/ds-web-components 4.30.1 → 4.31.0-ie

package/dist/components/file-upload/file-upload.d.ts

@@ -0,0 +1,116 @@
+import { ClassBindings, Dispatcher } from "../../decorators/index";
+export declare class SpsFileUploadComponent extends HTMLElement {
+    static readonly displayName = "sps-file-upload";
+    static readonly props: {
+        description: string;
+        multiple: string;
+        dismissable: string;
+        processing: string;
+        mini: string;
+        downloadLabel: string;
+        acceptExtensions: string;
+        maxSize: string;
+        selection: {
+            event: boolean;
+            type: string;
+        };
+        dismissal: {
+            event: boolean;
+            type: string;
+        };
+        download: {
+            event: boolean;
+            type: string;
+        };
+    };
+    /**
+     * The "term" for what the user should upload. Defaults to "File" or "Files",
+     * but if you set the `acceptExtensions` prop you might set this to something
+     * more specific, such as "Spreadsheet" or "Images".
+     */
+    description: any;
+    /**
+     * If true, the component will accept multiple files at once. By default, you can
+     * only select one file at a time.
+     */
+    multiple: boolean;
+    /** Controls whether the component is visible. */
+    shown: boolean;
+    /** Controls whether the user can hide the component from view. */
+    dismissable: boolean;
+    /**
+     * Puts the component in "processing" state, where it displays a spinner and
+     * does not allow any files to be selected.
+     */
+    processing: boolean;
+    /** Specifies that the component should be displayed in the "mini" style. */
+    mini: boolean;
+    /** If provided, the content area width will be set to 50% of the overall width. */
+    constrainContentWidth: boolean;
+    /** If provided, a button will be rendered with this text as its label. */
+    downloadLabel: string;
+    /**
+     * A list of extensions, provided either as an array of strings or a
+     * string containing comma-separates extensions. Only files with the MIME types
+     * associated with those extensions will be able to be selected. The case of
+     * the extensions does not matter; neither does whether you prefix them with a
+     * dot. That is, ".doc", "DOCX", and "jpg" are all valid extensions for this prop.
+     */
+    acceptExtensions: string[] | string;
+    /** The maximum allowable size in bytes for files selected by the component. */
+    maxSize: string;
+    /**
+     * Event which emits when a file or files have been selected by the user. The
+     * event detail will be an array of Files.
+     */
+    selection: Dispatcher<File[]>;
+    /**
+     * If the `dismissable` prop has been set, this event will fire when the user
+     * opts to hide the component.
+     */
+    dismissal: Dispatcher<void>;
+    /**
+     * If the `downloadLabel` prop has been provided, this event will fire when the
+     * user clicks the download button that is rendered.
+     */
+    download: Dispatcher<void>;
+    /** The HTML file input element within the component. */
+    fileInput: HTMLInputElement;
+    /**
+     * The list of selected files. If the `multiple` prop has not been provided,
+     * it is still an array; it will simply be an array of one when the user selects
+     * a file.
+     */
+    files: File[];
+    private accept;
+    private acceptMIMETypes;
+    private acceptExtensionsDescription;
+    private maxSizeBytes;
+    private active;
+    private error;
+    private namesOfUnsupportedFiles;
+    get [ClassBindings](): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    /**
+     * If the `dismissable` prop has been set, this will programmatically
+     * dismiss the component and fire the "dismissal" event.
+     */
+    dismiss(): void;
+    /** If the `dismissable` prop has been set, this will programmatically show the component. */
+    show(): void;
+    render({ t }: {
+        t: any;
+    }): JSX.Element;
+    private parseAndValidateMaxSize;
+    private processAcceptExtensions;
+    private selectFiles;
+    private handleDragOver;
+    private handleDragEnter;
+    private handleDragLeave;
+    private handleDrop;
+    private handleBrowseLinkClick;
+    private handleDownloadButtonClick;
+    private handleFileInputChange;
+}

package/dist/components/file-upload/file-upload.examples.d.ts

@@ -0,0 +1,2 @@
+import type { DSReactExamples } from "@spscommerce/ds-shared";
+export declare const SpsFileUploadExamples: DSReactExamples;

package/dist/components/file-upload/file-upload.examples.js

@@ -0,0 +1,77 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { code } from "@spscommerce/utils";
+export var SpsFileUploadExamples = {
+    basic: {
+        label: "Basic File Upload",
+        description: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            <p>Simply allow the user to drag-and-drop or select either a single file or multiple files at once.</p>\n        "], ["\n            <p>Simply allow the user to drag-and-drop or select either a single file or multiple files at once.</p>\n        "]))),
+        examples: {
+            single: {
+                description: "<p>Single file upload</p>",
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload ref={ref}/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload ref={ref}/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
+            },
+            multiple: {
+                description: "<p>Multiple file upload</p>",
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload ref={ref} multiple/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload ref={ref} multiple/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    restrictions: {
+        label: "Restrictions",
+        description: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            <p>You can place restrictions on what files will be accepted with an extension whitelist and/or a maximum size.</p>\n        "], ["\n            <p>You can place restrictions on what files will be accepted with an extension whitelist and/or a maximum size.</p>\n        "]))),
+        examples: {
+            size: {
+                description: "<p>Maximum size</p>",
+                react: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload ref={ref} maxSize=\"100KB\"/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload ref={ref} maxSize=\"100KB\"/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
+            },
+            type: {
+                description: "<p>File type whitelist</p>",
+                react: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload\n                                        ref={ref}\n                                        description=\"Spreadsheets\"\n                                        multiple\n                                        acceptExtensions=\"XLS, xlsx, .csv\"\n                                    />\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload\n                                        ref={ref}\n                                        description=\"Spreadsheets\"\n                                        multiple\n                                        acceptExtensions=\"XLS, xlsx, .csv\"\n                                    />\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
+            },
+            both: {
+                description: "<p>Both restrictions</p>",
+                react: code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload\n                                        ref={ref}\n                                        description=\"Spreadsheets\"\n                                        multiple\n                                        acceptExtensions=\"XLS, xlsx, .csv\"\n                                        maxSize=\"25MB\"\n                                    />\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload\n                                        ref={ref}\n                                        description=\"Spreadsheets\"\n                                        multiple\n                                        acceptExtensions=\"XLS, xlsx, .csv\"\n                                        maxSize=\"25MB\"\n                                    />\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    dismissable: {
+        label: "Dismissable",
+        description: code(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n            <p>With this option, the file upload component can be dismissed by the user. If the user does dismiss it, you can\n            show it again programmatically if you need to.</p>\n        "], ["\n            <p>With this option, the file upload component can be dismissed by the user. If the user does dismiss it, you can\n            show it again programmatically if you need to.</p>\n        "]))),
+        examples: {
+            dismissable: {
+                react: code(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n                    function Component() {\n                        const [showFileUpload, setShowFileUpload] = React.useState(true)\n                        const ref = React.useRef()\n\n                        function handleDismissal() {\n                            setShowFileUpload(false)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"dismissal\", handleDismissal)\n                            return () => {\n                                ref.current.removeEventListener(\"dismissal\", handleDismissal)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload\n                                        ref={ref}\n                                        dismissable\n                                        shown={showFileUpload}\n                                    />\n                                    {!showFileUpload && (\n                                    <SpsButton onClick={() => setShowFileUpload(true)}>\n                                        Reset\n                                    </SpsButton>\n                                    )}\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const [showFileUpload, setShowFileUpload] = React.useState(true)\n                        const ref = React.useRef()\n\n                        function handleDismissal() {\n                            setShowFileUpload(false)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"dismissal\", handleDismissal)\n                            return () => {\n                                ref.current.removeEventListener(\"dismissal\", handleDismissal)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload\n                                        ref={ref}\n                                        dismissable\n                                        shown={showFileUpload}\n                                    />\n                                    {!showFileUpload && (\n                                    <SpsButton onClick={() => setShowFileUpload(true)}>\n                                        Reset\n                                    </SpsButton>\n                                    )}\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    downloadButton: {
+        label: "Download Button",
+        description: code(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n            <p>You can optionally provide a button to download a file. Typically this will be a template for\n            whatever the user is expected to upload. They can then fill out the template, save it, and upload it.</p>\n        "], ["\n            <p>You can optionally provide a button to download a file. Typically this will be a template for\n            whatever the user is expected to upload. They can then fill out the template, save it, and upload it.</p>\n        "]))),
+        examples: {
+            downloadButton: {
+                react: code(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleDownload() {\n                            console.log(\"Download triggered.\")\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"download\", handleDownload)\n                            return () => {\n                                ref.current.removeEventListener(\"download\", handleDownload)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload\n                                        ref={ref}\n                                        description=\"Spreadsheet\"\n                                        acceptExtensions=\"xlsx\"\n                                        downloadLabel=\"Download Excel Template\"\n                                    />\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleDownload() {\n                            console.log(\"Download triggered.\")\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"download\", handleDownload)\n                            return () => {\n                                ref.current.removeEventListener(\"download\", handleDownload)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload\n                                        ref={ref}\n                                        description=\"Spreadsheet\"\n                                        acceptExtensions=\"xlsx\"\n                                        downloadLabel=\"Download Excel Template\"\n                                    />\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    mini: {
+        label: "Mini File Upload",
+        description: code(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n            <p>When the file upload component is to be placed in a small container,\n            it should be marked as a mini file upload so that everything fits.</p>\n        "], ["\n            <p>When the file upload component is to be placed in a small container,\n            it should be marked as a mini file upload so that everything fits.</p>\n        "]))),
+        examples: {
+            single: {
+                react: code(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-4\">\n                                    <sps-file-upload ref={ref} mini/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-4\">\n                                    <sps-file-upload ref={ref} mini/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    constrainContentWidth: {
+        label: "Constrain Content Width",
+        description: code(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n            <p>If this prop is provided, the content will be restricted to 50% of\n            the overall width of the component. Consult your product designer if\n            you're not sure whether to use this variant.</p>\n        "], ["\n            <p>If this prop is provided, the content will be restricted to 50% of\n            the overall width of the component. Consult your product designer if\n            you're not sure whether to use this variant.</p>\n        "]))),
+        examples: {
+            constrainContentWidth: {
+                react: code(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event: CustomEvent<Array<File>>) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-4\">\n                                    <sps-file-upload ref={ref} constrainContentWidth/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event: CustomEvent<Array<File>>) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-4\">\n                                    <sps-file-upload ref={ref} constrainContentWidth/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
+//# sourceMappingURL=file-upload.examples.js.map

package/dist/components/file-upload/file-upload.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.examples.js","sourceRoot":"","sources":["../../../src/components/file-upload/file-upload.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,qBAAqB,GAAoB;IACpD,KAAK,EAAE;QACL,KAAK,EAAE,mBAAmB;QAC1B,WAAW,EAAE,IAAI,oMAAA,iIAEZ,IAAA;QACL,QAAQ,EAAE;YACR,MAAM,EAAE;gBACN,WAAW,EAAE,2BAA2B;gBACxC,KAAK,EAAE,IAAI,2+BAAA,w6BAuBF,IAAA;aACV;YACD,QAAQ,EAAE;gBACR,WAAW,EAAE,6BAA6B;gBAC1C,KAAK,EAAE,IAAI,o/BAAA,i7BAuBF,IAAA;aACV;SACF;KACF;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,cAAc;QACrB,WAAW,EAAE,IAAI,gNAAA,6IAEZ,IAAA;QACL,QAAQ,EAAE;YACR,IAAI,EAAE;gBACJ,WAAW,EAAE,qBAAqB;gBAClC,KAAK,EAAE,IAAI,6/BAAA,07BAuBF,IAAA;aACV;YACD,IAAI,EAAE;gBACJ,WAAW,EAAE,4BAA4B;gBACzC,KAAK,EAAE,IAAI,gwCAAA,6rCA4BF,IAAA;aACV;YACD,IAAI,EAAE;gBACJ,WAAW,EAAE,0BAA0B;gBACvC,KAAK,EAAE,IAAI,0zCAAA,uvCA6BF,IAAA;aACV;SACF;KACF;IACD,WAAW,EAAE;QACX,KAAK,EAAE,aAAa;QACpB,WAAW,EAAE,IAAI,8QAAA,2MAGZ,IAAA;QACL,QAAQ,EAAE;YACR,WAAW,EAAE;gBACX,KAAK,EAAE,IAAI,yiDAAA,s+CAiCF,IAAA;aACV;SACF;KACF;IACD,cAAc,EAAE;QACd,KAAK,EAAE,iBAAiB;QACxB,WAAW,EAAE,IAAI,sTAAA,iPAGZ,IAAA;QACL,QAAQ,EAAE;YACR,cAAc,EAAE;gBACd,KAAK,EAAE,IAAI,iyCAAA,4tCA4BF,IAAA;aACV;SACF;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,kBAAkB;QACzB,WAAW,EAAE,IAAI,0PAAA,qLAGZ,IAAA;QACL,QAAQ,EAAE;YACR,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,i/BAAA,46BAuBF,IAAA;aACV;SACF;KACF;IACD,qBAAqB,EAAE;QACrB,KAAK,EAAE,yBAAyB;QAChC,WAAW,EAAE,IAAI,oTAAA,+OAIZ,IAAA;QACL,QAAQ,EAAE;YACR,qBAAqB,EAAE;gBACrB,KAAK,EAAE,IAAI,4hCAAA,u9BAuBF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/components/file-upload/file-upload.js

@@ -0,0 +1,403 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+/** @jsx h */
+/* eslint-disable new-cap */
+import { SpsIcon } from "@spscommerce/ds-shared";
+import { parseFileSize } from "@spscommerce/utils";
+import { ClassBindings, Component, EventDispatcher, 
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+EventListener, Prop, QuerySelector, } from "../../decorators/index";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h } from "../../utils/pragma";
+import { MIMEType } from "./mime-type.enum";
+var CPT_NAME = "sps-file-upload";
+var SpsFileUploadComponent = /** @class */ (function (_super) {
+    __extends(SpsFileUploadComponent, _super);
+    function SpsFileUploadComponent() {
+        var _this = _super.call(this) || this;
+        /** Controls whether the component is visible. */
+        _this.shown = true;
+        /**
+         * The list of selected files. If the `multiple` prop has not been provided,
+         * it is still an array; it will simply be an array of one when the user selects
+         * a file.
+         */
+        _this.files = [];
+        _this.acceptMIMETypes = new Set();
+        _this.active = false;
+        _this.error = false;
+        _this.namesOfUnsupportedFiles = [];
+        _this.handleBrowseLinkClick = _this.handleBrowseLinkClick.bind(_this);
+        _this.handleDownloadButtonClick = _this.handleDownloadButtonClick.bind(_this);
+        _this.handleFileInputChange = _this.handleFileInputChange.bind(_this);
+        _this.dismiss = _this.dismiss.bind(_this);
+        return _this;
+    }
+    Object.defineProperty(SpsFileUploadComponent.prototype, ClassBindings, {
+        get: function () {
+            return [
+                CPT_NAME,
+                this.active && CPT_NAME + "--active",
+                this.error && CPT_NAME + "--error",
+                !this.shown && CPT_NAME + "--hidden",
+                this.mini && CPT_NAME + "--mini",
+                this.constrainContentWidth && CPT_NAME + "--constrained-content-width",
+            ];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SpsFileUploadComponent.prototype.connectedCallback = function () {
+        this.description = this.description || (this.multiple ? "Files" : "File");
+        if (this.acceptExtensions) {
+            this.processAcceptExtensions(this.acceptExtensions);
+        }
+        if (this.maxSize) {
+            this.parseAndValidateMaxSize(this.maxSize);
+        }
+    };
+    SpsFileUploadComponent.prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
+        if (attrName === "acceptExtensions") {
+            this.processAcceptExtensions(newValue);
+        }
+        if (attrName === "maxSize") {
+            this.parseAndValidateMaxSize(newValue);
+        }
+    };
+    /**
+     * If the `dismissable` prop has been set, this will programmatically
+     * dismiss the component and fire the "dismissal" event.
+     */
+    SpsFileUploadComponent.prototype.dismiss = function () {
+        if (this.dismissable) {
+            this.shown = false;
+            this.update();
+            this.dismissal.dispatch();
+        }
+    };
+    /** If the `dismissable` prop has been set, this will programmatically show the component. */
+    SpsFileUploadComponent.prototype.show = function () {
+        if (this.dismissable) {
+            this.shown = true;
+            this.update();
+        }
+    };
+    SpsFileUploadComponent.prototype.render = function (_a) {
+        var _this = this;
+        var t = _a.t;
+        var icon = this.error ? SpsIcon.EXCLAMATION_CIRCLE : SpsIcon.UPLOAD_CLOUD;
+        var instructions = (this.multiple
+            ? t("design-system:fileUpload.instructions_plural")
+            : t("design-system:fileUpload.instructions")).split("|");
+        return (h("div", { "data-fragment": true },
+            h("div", { className: CPT_NAME + "__content" }, this.processing
+                ? (h("div", { "data-fragment": true },
+                    h("i", { className: "sps-spinner sps-spinner--medium", "aria-hidden": "true" }),
+                    h("div", { className: CPT_NAME + "__instructions" }, t("design-system:fileUpload.processing"))))
+                : (h("div", { "data-fragment": true },
+                    h("i", { className: "sps-icon sps-icon-" + icon + " " + CPT_NAME + "__icon-primary", "aria-hidden": "true" }),
+                    h("div", { className: CPT_NAME + "__title" }, this.error
+                        ? (h("div", { "data-fragment": true }, t(this.namesOfUnsupportedFiles.length > 1
+                            ? "design-system:fileUpload.cancelled_plural"
+                            : "design-system:fileUpload.cancelled")))
+                        : h("div", { "data-fragment": true }, t("design-system:fileUpload.title", { description: this.description }))),
+                    this.error
+                        ? (h("div", { className: CPT_NAME + "__errored-files" }, new Set(this.namesOfUnsupportedFiles.map(function (name, i) {
+                            var breakpoint = Math.floor(name.length / 2);
+                            return (h("div", { className: CPT_NAME + "__errored-filename", key: name },
+                                h("span", { className: CPT_NAME + "__errored-filename-segment" }, name.substr(0, breakpoint)),
+                                h("div", { className: CPT_NAME + "__errored-filename-segment" },
+                                    h("span", null, name.substr(breakpoint))),
+                                i < _this.namesOfUnsupportedFiles.length - 1 ? "," : ""));
+                        }))))
+                        : h("span", null),
+                    h("div", { className: CPT_NAME + "__instructions" },
+                        h("div", { "data-fragment": true },
+                            h("span", null, instructions[0]),
+                            h("a", { href: "", onClick: this.handleBrowseLinkClick }, instructions[1]),
+                            h("span", null, instructions[2]))),
+                    h("div", { className: CPT_NAME + "__requirements" },
+                        this.acceptExtensions
+                            ? (h("div", { "data-fragment": true },
+                                "(",
+                                " ",
+                                t("design-system:fileUpload.acceptedTypes", { fileTypes: this.acceptExtensionsDescription }),
+                                " ",
+                                ")"))
+                            : "",
+                        this.maxSize
+                            ? (h("div", { "data-fragment": true },
+                                "(",
+                                t("design-system:fileUpload.maximumSize", { size: this.maxSize }),
+                                " ",
+                                ")"))
+                            : ""),
+                    this.downloadLabel
+                        && (h("div", { className: "sps-button sps-button--link " + CPT_NAME + "__download-button", onClick: this.handleDownloadButtonClick },
+                            h("button", { type: "button" },
+                                h("i", { className: "sps-icon sps-icon-download-cloud", "aria-hidden": "true" }),
+                                " ",
+                                this.downloadLabel)))))),
+            this.dismissable && !this.processing
+                && (h("div", { className: "sps-button sps-button--icon " + CPT_NAME + "__close-button", onClick: this.dismiss },
+                    h("button", { type: "button", title: t("design-system:fileUpload.close") },
+                        h("i", { className: "sps-icon sps-icon-x", "aria-hidden": "true" })))),
+            h("form", null,
+                h("input", { type: "file", accept: this.accept || "*/*", multiple: this.multiple || null, onChange: this.handleFileInputChange }))));
+    };
+    SpsFileUploadComponent.prototype.parseAndValidateMaxSize = function (maxSize) {
+        try {
+            this.maxSizeBytes = parseFileSize(maxSize);
+        }
+        catch (error) {
+            throw new Error("Could not parse \"" + maxSize + "\" as a file size.");
+        }
+    };
+    SpsFileUploadComponent.prototype.processAcceptExtensions = function (acceptExtensions) {
+        var e_1, _a, e_2, _b;
+        var splitExtensions = Array.isArray(acceptExtensions)
+            ? acceptExtensions
+            : acceptExtensions.trim().split(/\s?,\s?/);
+        var trimmedExtensions = splitExtensions.map(function (ext) { return ext.replace(/^\./, ""); });
+        var extList = trimmedExtensions.map(function (ext) { return ("." + ext).toLowerCase(); });
+        this.acceptExtensionsDescription = extList
+            .map(function (ext, i) { return (i > 0 && i === extList.length - 1 ? "or " + ext : ext); })
+            .join(extList.length > 2 ? ", " : " ");
+        this.acceptMIMETypes.clear();
+        try {
+            for (var trimmedExtensions_1 = __values(trimmedExtensions), trimmedExtensions_1_1 = trimmedExtensions_1.next(); !trimmedExtensions_1_1.done; trimmedExtensions_1_1 = trimmedExtensions_1.next()) {
+                var ext = trimmedExtensions_1_1.value;
+                try {
+                    for (var _c = (e_2 = void 0, __values(MIMEType[ext.toUpperCase()].split(","))), _d = _c.next(); !_d.done; _d = _c.next()) {
+                        var type = _d.value;
+                        this.acceptMIMETypes.add(type);
+                    }
+                }
+                catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                finally {
+                    try {
+                        if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                    }
+                    finally { if (e_2) throw e_2.error; }
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (trimmedExtensions_1_1 && !trimmedExtensions_1_1.done && (_a = trimmedExtensions_1.return)) _a.call(trimmedExtensions_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        this.accept = extList.concat(Array.from(this.acceptMIMETypes)).join(",");
+    };
+    SpsFileUploadComponent.prototype.selectFiles = function (files) {
+        var e_3, _a;
+        this.namesOfUnsupportedFiles = [];
+        var fileArray = Array.from(files);
+        try {
+            for (var fileArray_1 = __values(fileArray), fileArray_1_1 = fileArray_1.next(); !fileArray_1_1.done; fileArray_1_1 = fileArray_1.next()) {
+                var file = fileArray_1_1.value;
+                if (this.acceptExtensions && !this.acceptMIMETypes.has(file.type)) {
+                    this.namesOfUnsupportedFiles.push(file.name);
+                }
+                if (this.maxSize && file.size > this.maxSizeBytes) {
+                    this.namesOfUnsupportedFiles.push(file.name);
+                }
+            }
+        }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        finally {
+            try {
+                if (fileArray_1_1 && !fileArray_1_1.done && (_a = fileArray_1.return)) _a.call(fileArray_1);
+            }
+            finally { if (e_3) throw e_3.error; }
+        }
+        if (this.namesOfUnsupportedFiles.length) {
+            this.error = true;
+            this.fileInput.value = null;
+            this.update();
+        }
+        else {
+            this.files = fileArray;
+            this.selection.dispatch(fileArray);
+        }
+    };
+    /* eslint-disable class-methods-use-this, @typescript-eslint/member-ordering */
+    SpsFileUploadComponent.prototype.handleDragOver = function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    /* eslint-enable class-methods-use-this */
+    SpsFileUploadComponent.prototype.handleDragEnter = function (event) {
+        event.preventDefault();
+        this.active = true;
+        this.error = false;
+        this.update();
+    };
+    SpsFileUploadComponent.prototype.handleDragLeave = function (event) {
+        event.preventDefault();
+        this.active = false;
+        this.update();
+    };
+    SpsFileUploadComponent.prototype.handleDrop = function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.active = false;
+        if (event.dataTransfer.items) {
+            this.selectFiles(Array.from(event.dataTransfer.items).map(function (item) { return item.getAsFile(); }));
+        }
+        else {
+            this.selectFiles(event.dataTransfer.files);
+        }
+        this.update();
+    };
+    /* eslint-enable @typescript-eslint/member-ordering */
+    SpsFileUploadComponent.prototype.handleBrowseLinkClick = function (event) {
+        event.preventDefault();
+        this.error = false;
+        this.update();
+        this.fileInput.click();
+    };
+    SpsFileUploadComponent.prototype.handleDownloadButtonClick = function () {
+        this.download.dispatch();
+    };
+    SpsFileUploadComponent.prototype.handleFileInputChange = function (event) {
+        event.stopPropagation();
+        this.selectFiles(event.target.files);
+    };
+    SpsFileUploadComponent.displayName = CPT_NAME;
+    SpsFileUploadComponent.props = {
+        description: "string",
+        multiple: "boolean",
+        dismissable: "boolean",
+        processing: "boolean",
+        mini: "boolean",
+        downloadLabel: "string",
+        acceptExtensions: "Array<string> | string",
+        maxSize: "string",
+        selection: { event: true, type: "CustomEvent<Array<File>>" },
+        dismissal: { event: true, type: "CustomEvent<void>" },
+        download: { event: true, type: "CustomEvent<void>" },
+    };
+    __decorate([
+        Prop(),
+        __metadata("design:type", Object)
+    ], SpsFileUploadComponent.prototype, "description", void 0);
+    __decorate([
+        Prop(Boolean),
+        __metadata("design:type", Boolean)
+    ], SpsFileUploadComponent.prototype, "multiple", void 0);
+    __decorate([
+        Prop(Boolean),
+        __metadata("design:type", Object)
+    ], SpsFileUploadComponent.prototype, "shown", void 0);
+    __decorate([
+        Prop(Boolean),
+        __metadata("design:type", Boolean)
+    ], SpsFileUploadComponent.prototype, "dismissable", void 0);
+    __decorate([
+        Prop(Boolean),
+        __metadata("design:type", Boolean)
+    ], SpsFileUploadComponent.prototype, "processing", void 0);
+    __decorate([
+        Prop(Boolean),
+        __metadata("design:type", Boolean)
+    ], SpsFileUploadComponent.prototype, "mini", void 0);
+    __decorate([
+        Prop(Boolean),
+        __metadata("design:type", Boolean)
+    ], SpsFileUploadComponent.prototype, "constrainContentWidth", void 0);
+    __decorate([
+        Prop(),
+        __metadata("design:type", String)
+    ], SpsFileUploadComponent.prototype, "downloadLabel", void 0);
+    __decorate([
+        Prop(),
+        __metadata("design:type", Object)
+    ], SpsFileUploadComponent.prototype, "acceptExtensions", void 0);
+    __decorate([
+        Prop(),
+        __metadata("design:type", String)
+    ], SpsFileUploadComponent.prototype, "maxSize", void 0);
+    __decorate([
+        EventDispatcher(),
+        __metadata("design:type", Object)
+    ], SpsFileUploadComponent.prototype, "selection", void 0);
+    __decorate([
+        EventDispatcher(),
+        __metadata("design:type", Object)
+    ], SpsFileUploadComponent.prototype, "dismissal", void 0);
+    __decorate([
+        EventDispatcher(),
+        __metadata("design:type", Object)
+    ], SpsFileUploadComponent.prototype, "download", void 0);
+    __decorate([
+        QuerySelector("input[type='file']"),
+        __metadata("design:type", HTMLInputElement)
+    ], SpsFileUploadComponent.prototype, "fileInput", void 0);
+    __decorate([
+        EventListener("dragover"),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Event]),
+        __metadata("design:returntype", void 0)
+    ], SpsFileUploadComponent.prototype, "handleDragOver", null);
+    __decorate([
+        EventListener("dragenter"),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Event]),
+        __metadata("design:returntype", void 0)
+    ], SpsFileUploadComponent.prototype, "handleDragEnter", null);
+    __decorate([
+        EventListener("dragleave"),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Event]),
+        __metadata("design:returntype", void 0)
+    ], SpsFileUploadComponent.prototype, "handleDragLeave", null);
+    __decorate([
+        EventListener("drop"),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], SpsFileUploadComponent.prototype, "handleDrop", null);
+    SpsFileUploadComponent = __decorate([
+        Component({ tag: CPT_NAME }),
+        __metadata("design:paramtypes", [])
+    ], SpsFileUploadComponent);
+    return SpsFileUploadComponent;
+}(HTMLElement));
+export { SpsFileUploadComponent };
+//# sourceMappingURL=file-upload.js.map