wabtec-internal-volt-basic-components 1.0.0

package/dist/collection/components/upload-drag/vds-upload-drag.js

@@ -0,0 +1,193 @@
+import { Host, h } from "@stencil/core";
+export class VdsUploadDrag {
+    constructor() {
+        /** The title of the upload area */
+        this.title = 'Click or drag file to this area to upload';
+        /** The description of the upload area */
+        this.description = 'Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files';
+        /** Specifies the multiple prop in the input[type="file"] */
+        this.multiple = true;
+        this.isDragging = false;
+        this.handleDragOver = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            event.dataTransfer.dropEffect = 'copy';
+            this.isDragging = true;
+        };
+        this.handleDragLeave = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.isDragging = false;
+        };
+        this.handleDrop = (event) => {
+            var _a;
+            event.preventDefault();
+            event.stopPropagation();
+            this.isDragging = false;
+            const files = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files;
+            if (files && files.length > 0) {
+                this.handleFiles(Array.from(files));
+            }
+        };
+        this.handleClick = () => {
+            var _a;
+            (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.click();
+        };
+        this.handleFileInputChange = () => {
+            var _a;
+            const files = (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files;
+            if (files && files.length > 0) {
+                this.handleFiles(Array.from(files));
+            }
+        };
+    }
+    handleFiles(files) {
+        this.fileSelected.emit(files);
+    }
+    render() {
+        return (h(Host, { key: 'ccf2f981a3a06e500504d48827230868aec6da99', onClick: this.handleClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: '8b94929477a6757adeb4e12173adc7330e4e48fe', type: "file", ref: el => (this.fileInput = el), onChange: this.handleFileInputChange, multiple: this.multiple, accept: this.accept, capture: this.capture, hidden: true }), h("vds-card", { key: 'd4d7614b842814d099f6e81f3dfbc6fde3b53d12', padding: "spacing-09", shadowBox: "elevation-shadow-0", class: { 'vds-card--drag-active': this.isDragging } }, h("div", { key: 'ecba860696469fa5fd1efe3fad5252142485d4a1', class: "vds-upload__content" }, h("slot", { key: 'dc64bb83a9244ddbb9b174822b5f8c531ab0d134', name: "icon" }), h("div", { key: '45735c2361c82c2326b19799138efa216bc796bf', class: "vds-upload__body" }, h("span", { key: 'c7332b825a8a4a17009e67b234a1770a1893cf29', class: "vds-upload__title" }, this.title), h("span", { key: '2c4100068ed459378ecea65d31e77c75c673f9af', class: "vds-upload__description" }, this.description))))));
+    }
+    static get is() { return "vds-upload-drag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-upload-drag.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-upload-drag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "title": {
+                "type": "string",
+                "attribute": "title",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title of the upload area"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Click or drag file to this area to upload'"
+            },
+            "description": {
+                "type": "string",
+                "attribute": "description",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The description of the upload area"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files'"
+            },
+            "multiple": {
+                "type": "boolean",
+                "attribute": "multiple",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the multiple prop in the input[type=\"file\"]"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "accept": {
+                "type": "string",
+                "attribute": "accept",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the accept prop in the input[type=\"file\"]"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "capture": {
+                "type": "string",
+                "attribute": "capture",
+                "mutable": false,
+                "complexType": {
+                    "original": "'user' | 'environment'",
+                    "resolved": "\"environment\" | \"user\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the capture prop in the input[type=\"file\"]"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDragging": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "fileSelected",
+                "name": "fileSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the value of the selected files"
+                },
+                "complexType": {
+                    "original": "File[]",
+                    "resolved": "File[]",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=vds-upload-drag.js.map

package/dist/collection/components/upload-drag/vds-upload-drag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-upload-drag.js","sourceRoot":"","sources":["../../../src/components/upload-drag/vds-upload-drag.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, State } from '@stencil/core';\nimport { EventEmitter } from '@stencil/core/internal';\n\n@Component({\n  tag: 'vds-upload-drag',\n  styleUrl: 'vds-upload-drag.scss',\n  shadow: true,\n})\nexport class VdsUploadDrag {\n  /** The title of the upload area */\n  @Prop() title: string = 'Click or drag file to this area to upload';\n  /** The description of the upload area */\n  @Prop() description: string =\n    'Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files';\n\n  /** Specifies the multiple prop in the input[type=\"file\"] */\n  @Prop() multiple: boolean = true;\n  /** Specifies the accept prop in the input[type=\"file\"] */\n  @Prop() accept?: string;\n  /** Specifies the capture prop in the input[type=\"file\"] */\n  @Prop() capture?: 'user' | 'environment';\n\n  /** Emits the value of the selected files */\n  @Event() fileSelected: EventEmitter<File[]>;\n\n  @State() isDragging: boolean = false;\n\n  private fileInput?: HTMLInputElement;\n\n  private handleDragOver = (event: DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    event.dataTransfer.dropEffect = 'copy';\n    this.isDragging = true;\n  };\n\n  private handleDragLeave = (event: DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.isDragging = false;\n  };\n\n  private handleDrop = (event: DragEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.isDragging = false;\n    const files = event.dataTransfer?.files;\n    if (files && files.length > 0) {\n      this.handleFiles(Array.from(files));\n    }\n  };\n\n  private handleClick = () => {\n    this.fileInput?.click();\n  };\n\n  private handleFileInputChange = () => {\n    const files = this.fileInput?.files;\n    if (files && files.length > 0) {\n      this.handleFiles(Array.from(files));\n    }\n  };\n\n  private handleFiles(files: File[]) {\n    this.fileSelected.emit(files);\n  }\n\n  render() {\n    return (\n      <Host\n        onClick={this.handleClick}\n        onDragOver={this.handleDragOver}\n        onDragLeave={this.handleDragLeave}\n        onDrop={this.handleDrop}\n      >\n        <input\n          type=\"file\"\n          ref={el => (this.fileInput = el as HTMLInputElement)}\n          onChange={this.handleFileInputChange}\n          multiple={this.multiple}\n          accept={this.accept}\n          capture={this.capture}\n          hidden\n        />\n        <vds-card\n          padding=\"spacing-09\"\n          shadowBox=\"elevation-shadow-0\"\n          class={{ 'vds-card--drag-active': this.isDragging }}\n        >\n          <div class=\"vds-upload__content\">\n            <slot name=\"icon\"></slot>\n            <div class=\"vds-upload__body\">\n              <span class=\"vds-upload__title\">{this.title}</span>\n              <span class=\"vds-upload__description\">{this.description}</span>\n            </div>\n          </div>\n        </vds-card>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/upload-drag/vds-upload-drag.stories.js

@@ -0,0 +1,86 @@
+export default {
+    title: 'VDS/Components/Upload/Drag',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?node-id=20457-8321&m=dev&focus-id=30062-18181',
+        },
+    },
+    argTypes: {
+        capture: {
+            options: ['user', 'environment'],
+            control: { type: 'select' },
+        },
+    },
+};
+let styles = `
+.content {
+    margin: 10px;
+    width: 500px;
+}
+`;
+const codeTemplate = args => {
+    return `
+<style>${styles}</style>
+<div class="content">
+    <vds-upload-drag
+        title="${args.title}"
+        description="${args.description}"
+        multiple="${args.multiple}"
+        accept="${args.accept}"
+        capture="${args.capture}"
+    >
+        <vds-icon svg-icon="asset" size="3rem" slot="icon"></vds-icon>
+    </vds-upload-drag>
+</div>
+`;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    title: 'Click or drag file to this area to upload',
+    description: 'Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files',
+    multiple: true,
+    accept: '',
+    capture: undefined,
+};
+let stylesCustom = `
+    .content {
+        margin: 10px;
+        width: 500px;
+    }
+    .custom_vds-upload-drag {
+        --vds-upload-drag-border-color: var(--color-background-healthy-lowest-press);
+        --vds-upload-drag-background-color: var(--color-background-healthy-lowest-default);
+        --vds-upload-drag-border-drag-color: var(--color-border-healthy);
+        --vds-upload-drag-background-drag-color: var(--color-background-healthy-lowest-hover);
+    }
+`;
+const customCodeTemplate = args => {
+    return `
+<style>${stylesCustom}</style>
+<div class="content">
+    <vds-upload-drag
+        class="custom_vds-upload-drag"
+        title="${args.title}"
+        description="${args.description}"
+        multiple="${args.multiple}"
+        accept="${args.accept}"
+        capture="${args.capture}"
+    >
+        <vds-icon svg-icon="asset" size="3rem" slot="icon"></vds-icon>
+    </vds-upload-drag>
+</div>
+`;
+};
+export const CustomUsage = customCodeTemplate.bind({});
+CustomUsage.args = {
+    title: 'Click or drag file to this area to upload',
+    description: 'Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files',
+    multiple: true,
+    accept: '',
+    capture: undefined,
+};
+//# sourceMappingURL=vds-upload-drag.stories.js.map

package/dist/collection/components/upload-drag/vds-upload-drag.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-upload-drag.stories.js","sourceRoot":"","sources":["../../../src/components/upload-drag/vds-upload-drag.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,4BAA4B;IACnC,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;QACD,MAAM,EAAE;YACN,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,0GAA0G;SAChH;KACF;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC;YAChC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC;AAEF,IAAI,MAAM,GAAG;;;;;CAKZ,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;SACA,MAAM;;;iBAGE,IAAI,CAAC,KAAK;uBACJ,IAAI,CAAC,WAAW;oBACnB,IAAI,CAAC,QAAQ;kBACf,IAAI,CAAC,MAAM;mBACV,IAAI,CAAC,OAAO;;;;;CAK9B,CAAC;AACF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IAChB,KAAK,EAAE,2CAA2C;IAClD,WAAW,EAAE,wGAAwG;IACrH,QAAQ,EAAE,IAAI;IACd,MAAM,EAAE,EAAE;IACV,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,IAAI,YAAY,GAAG;;;;;;;;;;;CAWlB,CAAC;AAEF,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE;IAChC,OAAO;SACA,YAAY;;;;iBAIJ,IAAI,CAAC,KAAK;uBACJ,IAAI,CAAC,WAAW;oBACnB,IAAI,CAAC,QAAQ;kBACf,IAAI,CAAC,MAAM;mBACV,IAAI,CAAC,OAAO;;;;;CAK9B,CAAC;AACF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEvD,WAAW,CAAC,IAAI,GAAG;IACjB,KAAK,EAAE,2CAA2C;IAClD,WAAW,EAAE,wGAAwG;IACrH,QAAQ,EAAE,IAAI;IACd,MAAM,EAAE,EAAE;IACV,OAAO,EAAE,SAAS;CACnB,CAAC","sourcesContent":["export default {\n  title: 'VDS/Components/Upload/Drag',\n  parameters: {\n    docs: {\n      toc: true,\n    },\n    design: {\n      type: 'figma',\n      url: 'https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?node-id=20457-8321&m=dev&focus-id=30062-18181',\n    },\n  },\n  argTypes: {\n    capture: {\n      options: ['user', 'environment'],\n      control: { type: 'select' },\n    },\n  },\n};\n\nlet styles = `\n.content {\n    margin: 10px;\n    width: 500px;\n}\n`;\n\nconst codeTemplate = args => {\n  return `\n<style>${styles}</style>\n<div class=\"content\">\n    <vds-upload-drag\n        title=\"${args.title}\"\n        description=\"${args.description}\"\n        multiple=\"${args.multiple}\"\n        accept=\"${args.accept}\"\n        capture=\"${args.capture}\"\n    >\n        <vds-icon svg-icon=\"asset\" size=\"3rem\" slot=\"icon\"></vds-icon>\n    </vds-upload-drag>\n</div>\n`;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n  title: 'Click or drag file to this area to upload',\n  description: 'Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files',\n  multiple: true,\n  accept: '',\n  capture: undefined,\n};\n\nlet stylesCustom = `\n    .content {\n        margin: 10px;\n        width: 500px;\n    }\n    .custom_vds-upload-drag {\n        --vds-upload-drag-border-color: var(--color-background-healthy-lowest-press);\n        --vds-upload-drag-background-color: var(--color-background-healthy-lowest-default);\n        --vds-upload-drag-border-drag-color: var(--color-border-healthy);\n        --vds-upload-drag-background-drag-color: var(--color-background-healthy-lowest-hover);\n    }\n`;\n\nconst customCodeTemplate = args => {\n  return `\n<style>${stylesCustom}</style>\n<div class=\"content\">\n    <vds-upload-drag\n        class=\"custom_vds-upload-drag\"\n        title=\"${args.title}\"\n        description=\"${args.description}\"\n        multiple=\"${args.multiple}\"\n        accept=\"${args.accept}\"\n        capture=\"${args.capture}\"\n    >\n        <vds-icon svg-icon=\"asset\" size=\"3rem\" slot=\"icon\"></vds-icon>\n    </vds-upload-drag>\n</div>\n`;\n};\n\nexport const CustomUsage = customCodeTemplate.bind({});\n\nCustomUsage.args = {\n  title: 'Click or drag file to this area to upload',\n  description: 'Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files',\n  multiple: true,\n  accept: '',\n  capture: undefined,\n};\n"]}