{"code":"import * as tslib_1 from \"tslib\";\r\nimport { LitElement, html } from '@polymer/lit-element';\r\nimport CSS from './input-file-css';\r\nimport { component, property } from 'util/decorators';\r\nlet InputFile = class InputFile extends LitElement {\r\n    constructor() {\r\n        super();\r\n        this.files = [];\r\n        this._reader = new FileReader();\r\n        this._icon = 'upload';\r\n        this._handleChange = this._handleChange.bind(this);\r\n        this._reader.addEventListener('load', e => {\r\n            // @ts-ignore\r\n            this._img = e.target.result;\r\n        });\r\n    }\r\n    _render({ placeholder, _img, _icon }) {\r\n        let img = _img;\r\n        if (!img && placeholder)\r\n            img = placeholder;\r\n        return html `\n            ${CSS}\n            ${img\r\n            ? html `<img src=${img} />`\r\n            : html `<zen-icon type=${_icon} color=\"grey-200\"></zen-icon>`}\n\n            <input type=\"file\" on-change=${this._handleChange}>\n        `;\r\n    }\r\n    _handleChange(e) {\r\n        const input = e.target;\r\n        if (input.files && input.files[0]) {\r\n            // @ts-ignore\r\n            this.files = input.files;\r\n            this.dispatchEvent(new CustomEvent('change'));\r\n            const f = input.files[0];\r\n            // If file is an image, read it into the preview\r\n            if (f.type.startsWith('image/')) {\r\n                return this._reader.readAsDataURL(input.files[0]);\r\n            }\r\n            switch (f.type) {\r\n                case 'application/zip':\r\n                    this._icon = 'file-zip';\r\n                    break;\r\n                case 'text':\r\n                    this._icon = 'file-text';\r\n                case 'html':\r\n                case 'xml':\r\n                    this._icon = 'file-code-xml';\r\n                case 'js':\r\n                case 'json':\r\n                    this._icon = 'file-code';\r\n                default:\r\n                    this._icon = 'file';\r\n            }\r\n        }\r\n    }\r\n};\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", String)\r\n], InputFile.prototype, \"placeholder\", void 0);\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", Object)\r\n], InputFile.prototype, \"_img\", void 0);\r\ntslib_1.__decorate([\r\n    property,\r\n    tslib_1.__metadata(\"design:type\", String)\r\n], InputFile.prototype, \"_icon\", void 0);\r\nInputFile = tslib_1.__decorate([\r\n    component('zen-input-file'),\r\n    tslib_1.__metadata(\"design:paramtypes\", [])\r\n], InputFile);\r\nexport default InputFile;\r\n","dts":{"name":"/Users/tristanmatthias/projects/origami/zen/packages/components/InputFile/InputFile.d.ts","text":"import { LitElement } from '@polymer/lit-element';\r\nimport { TemplateResult } from 'lit-html';\r\nexport interface props {\r\n    placeholder?: string;\r\n    _img?: any;\r\n    _icon: string;\r\n}\r\nexport default class InputFile extends LitElement implements props {\r\n    placeholder?: string;\r\n    files: File[];\r\n    private _reader;\r\n    _img?: any;\r\n    _icon: string;\r\n    constructor();\r\n    _render({placeholder, _img, _icon}: props): TemplateResult;\r\n    private _handleChange(e);\r\n}\r\n"}}