{"_id":"@terminus/ui-file-upload","_rev":"54-7c96146e80f3c52f74680ad7505bdd1f","name":"@terminus/ui-file-upload","dist-tags":{"latest":"5.0.1","next":"5.0.1"},"versions":{"0.0.1":{"name":"@terminus/ui-file-upload","version":"0.0.1","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/forms":"^9.1.0","@angular/platform-browser":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/material":"^9.1.0","@terminus/design-tokens":"^1.0.10","@terminus/ngx-tools":"^8.0.5","@terminus/ui-button":"*","@terminus/ui-icon":"*","@terminus/ui-icon-button":"*","@terminus/ui-pipes":"*","@terminus/ui-spacing":"*","@terminus/ui-tooltip":"*","@terminus/ui-utilities":"*","@terminus/ui-validation-messages":"*","rxjs":"^6.5.0"},"main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0"},"description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@0.0.1","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-D+De0TqJncb4s1mnaFuZjdX4RerV6/pfPyBz6+JF9dCE5HMd1xAYZzp1y7vmOb6fpmQWy2+cppI283X+L1fnNw==","shasum":"256d0dc771d90c9ea6cbfc88808dfc547d13ca1d","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-0.0.1.tgz","fileCount":65,"unpackedSize":722517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1eL0CRA9TVsSAnZWagAAev8P/j6dSqUxV3wriDdWjdm1\ny7y9rsRJKQBD40P4/ZW8+pCQEneSKv0z9qOLyJvGj2u2N6nnGrOoOINtI+JL\nybA1lfJ3/tpe8RJi2rTBDLkDL17eZHgLjRBoqR+C9/nYa5hP5it3DCOkSsE5\nnistY7pENkw+kr7f21ArfxY6DBVrKZbqzqWXGqGuerAywVXvc0E2Xc5fXnk6\nmyZ9tH2gaxe3jmJrPeT9zmXCwi11/7d5wHgO0dZpqOXzLATe/X4dxVP+uFYY\nl3qM8XkDbGnppMmgnz+irTUk7LjaEquYVapZg4TIjyXIwTCX+8v2b/5ZydnD\nlNGobuBoha4j7DlS5m1Zu7kczRaFiAE+sZKw5b+phnvy9Hkw3AQZQuEyeAlF\netSloNuI5IkBTfKqhgwmxEKwMUzHBrFXxupMgPnFLOILbuXnEgpInGgQqLAp\naAn+sGZjsxPeg6wpYdLewYS/kvC6tNJCmug8YwjMNhDoMpnb6D15ndF6ntZU\n6ZT48JxfRbcKItc9yTmSaKTvxvJ9wSaU/Z1f48LAdPAbLn4ERGskg/5AF9/I\nYpFPIq/Yv3FpcQ4P16P6d4SiKMOPAEM76kZu51i7lBt5VAGmwmcdQCDSkimb\nRntA1r8S4MVk0jQqfa5YV1ajOxTEnOFaiCXu+Li7t3MwXHMR15EjlifJmF3e\n6JyG\r\n=8q9U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBHNNJmkr4gcdvEpxlyyLdoXEdffo/9a3ugzkufx77YUAiEAkQ/HounxeC94hOAU1tEQznQyk7bxNGVnMKMHTJSX7is="}]},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmUser":{"name":"benjamincharity","email":"ben@benjamincharity.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_0.0.1_1591075571710_0.48980381158667696"},"_hasShrinkwrap":false},"1.0.0":{"name":"@terminus/ui-file-upload","version":"1.0.0","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/forms":"^9.1.0","@angular/platform-browser":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/material":"^9.1.0","@terminus/design-tokens":"^1.0.10","@terminus/ngx-tools":"^8.0.5","@terminus/ui-button":"^0.0.1","@terminus/ui-icon":"^0.0.1","@terminus/ui-icon-button":"^0.0.1","@terminus/ui-pipes":"^0.0.1","@terminus/ui-spacing":"^0.0.1","@terminus/ui-tooltip":"^0.0.1","@terminus/ui-utilities":"^0.0.1","@terminus/ui-validation-messages":"^0.0.1","rxjs":"^6.5.0","tslib":"^1.10.0"},"readme":"<h1>File Upload</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Github release][gh-release-badge]][gh-releases] [![Library size][file-size-badge]][raw-distribution-js]\n\nA drag'n'drop file upload component.\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n**Table of Contents**\n\n- [Usage](#usage)\n  - [`TsSelectedFile`](#tsselectedfile)\n  - [File types](#file-types)\n  - [File size](#file-size)\n  - [Image dimensions](#image-dimensions)\n  - [Image ratio constraints](#image-ratio-constraints)\n  - [Clearing a file](#clearing-a-file)\n  - [Showing upload progress](#showing-upload-progress)\n  - [Enable multiple file selection](#enable-multiple-file-selection)\n  - [Handle multiple files](#handle-multiple-files)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n\n## Usage\n\nCollect the selected file via the `selected` event:\n\n```html\n<ts-file-upload (selected)=\"handleFile($event)\"></ts-file-upload>\n```\n\n```typescript\n@import { TsSelectedFile } from '@terminus/ui-file-upload';\n\n...\n\n  handleFile(e: TsSelectedFile) {\n    // e.fileContents is the selected file\n  }\n```\n\n### `TsSelectedFile`\n\nThe `TsSelectedFile` instance will have several items available:\n\n```\nfile.fileContents // string\nfile.height       // number (will be 0 for CSVs)\nfile.isCSV        // boolean\nfile.isImage      // boolean\nfile.isValid      // boolean\nfile.mimeType     // string\nfile.name         // string\nfile.size         // number\nfile.validations  // TsFileValidations\nfile.width        // number (will be 0 for CSVs)\n```\n\n### File types\n\nAccepted file types can be set by the `accept` input:\n\n```typescript\n@import { TsFileAcceptedMimeTypes } from '@terminus/ui-file-upload';\n\n...\n\n  myMimeTypes: TsFileAcceptedMimeTypes = ['image/png', 'image/jpg'];\n```\n\n```html\n<ts-file-upload [accept]=\"myMimeTypes\"></ts-file-upload>\n```\n\nIf a file is loaded with the incorrect MIME/type, a validation message will appear below the file input.\n\nThe default types can be found by importing `TS_ACCEPTED_MIME_TYPES`;\n\n\n### File size\n\nSet a maximum size for files in kilobytes:\n\n```html\n<ts-file-upload [maximumKilobytesPerFile]=\"{{ 6 * 1024 }}\"></ts-file-upload>\n```\n\nIf a file is loaded that exceeds the size limit, a validation message will appear below the file input.\n\n\n### Image dimensions\n\nImage dimension validation is controlled by an array of constraints passed to the component.\n\nA single constraint has this structure:\n\n```typescript\ninterface TsFileImageDimensionContraint {\n  height: {\n    min: number;\n    max: number;\n  };\n  width: {\n    min: number;\n    max: number;\n  };\n}\n```\n\nFor fixed image dimensions set the min and max to the same number. The component will trim ranges before exposing to the user:\n\n```javascript\n// Example:\n{\n  height: {\n    min: 100;\n    max: 100;\n  };\n  width: {\n    min: 300;\n    max: 300;\n  };\n}\n// Will be displayed as: `300x100`\n\n{\n  height: {\n    min: 50;\n    max: 100;\n  };\n  width: {\n    min: 200;\n    max: 300;\n  };\n}\n// Will be displayed as: `200-300x50-100`\n```\n\nExample:\n\n```typescript\n@import { TsFileImageDimensionConstraints } from '@terminus/ui-file-upload';\n\n...\n\n  myDimensionConstraints: TsFileImageDimensionConstraints = [\n    {\n      height: {\n        min: 72,\n        max: 72,\n      },\n      width: {\n        min: 72,\n        max: 72,\n      },\n    },\n    {\n      height: {\n        min: 400,\n        max: 500,\n      },\n      width: {\n        min: 700,\n        max: 800,\n      },\n    },\n  ];\n```\n\n```html\n<ts-file-upload [dimensionConstraints]=\"myDimensionConstraints\"></ts-file-upload>\n```\n\nIf an image is selected that does not meet the dimension constraints, a validation message will appear below the file input.\n\n### Image ratio constraints\n\nImage ratio validation is controlled by an array of constraints passed to the component.\n\n```html\n<ts-file-upload [ratioConstraints]='[\"1:2\", \"3:4\"]'></ts-file-upload>\n```\n\nIf a file is loaded that do not meet any ratio constraints, a validation message will appear below the file input.\n\n### Clearing a file\n\nThe user can clear the selected file by clicking the `X` button next to the filename. An event will be emitted when this occurs:\n\n```html\n<ts-file-upload (cleared)=\"fileWasCleared()\"></ts-file-upload>\n```\n\n```typescript\n...\n\n  fileWasCleared() {\n    ...\n  }\n```\n\n\n### Showing upload progress\n\nThe progress of an upload can be reflected in the UI by passing a number between 0 and 100 to the `progress` input:\n\n```html\n<ts-file-upload [progress]=\"myProgress\"></ts-file-upload>\n```\n\n```typescript\n...\n  myProgress = 0;\n\n  // For example only. In a real scenario the progress value would be coming from the API.\n  // Start a counter to fake the upload progress value\n  startProgress() {\n    this.myProgress = 0;\n    const counting = setInterval(() => {\n      if (this.myProgress < 100) {\n        this.myProgress++;\n      } else {\n        clearInterval(counting);\n      }\n    }, 14);\n  }\n```\n\n\n### Enable multiple file selection\n\nSet `multiple` to `true`:\n\n```html\n<ts-file-upload [multiple]=\"true\"></ts-file-upload>\n```\n\n\n### Handle multiple files\n\nCurrently this component does not natively handle multiple file uploads (this support is planned for the future). There are ways to 'fake'\nthat functionality in a way.\n\nAn example:\n\n```html\n<!--\n  Here is the original file upload. Initially this is all the user sees.\n  When multiple files are selected, they will be emitted through this event:\n-->\n<ts-file-upload (selectedMultiple)=\"selectedMultiple($event)\"></ts-file-upload>\n\n<!-- Loop over the files that were collected from the selectedMultiple event -->\n<ng-container *ngFor=\"let v of files\">\n  <ts-file-upload\n    <!-- Only show this upload if the file still exists in our files collection: -->\n    *ngIf=\"fileExists(v.id)\"\n    <!-- Seed the file input with the file from our collection: -->\n    [seedFile]=\"v.file\"\n  ></ts-file-upload>\n</ng-container>\n```\n\n```typescript\n...\n\n  // We'll store the selected files here for reference:\n  files: {id: number; file: File}[] = [];\n\n  // Collect the selected files from the event and store them for reference:\n  selectedMultiple(e: File[]) {\n    let index = -1;\n\n    this.files = e.map((f) => {\n      index = index + 1;\n      return {\n        id: index,\n        file: f,\n      };\n    });\n  }\n\n  // Remove the correct file when the user clicks the clear button\n  clearFile(id: number): void {\n    if (!this.files || this.files.length < 1) {\n      return;\n    }\n\n    this.files = this.files.filter((obj) => {\n      return obj.id !== id;\n    });\n  }\n\n  // Helper function to determine when to hide one of the file upload components:\n  public fileExists(id: number): boolean {\n    if (!this.files || this.files.length < 1) {\n      return false;\n    }\n    const found = this.files.find((v) => {\n      return v.id === id;\n    });\n\n    return found ? true : false;\n  }\n```\n\n\n<!-- Links -->\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/master/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/master/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-file-upload.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-file-upload\n[gh-release-badge]:    https://img.shields.io/github/release/GetTerminus/terminus-oss.svg\n[gh-releases]:         https://github.com/GetTerminus/terminus-ui/releases/\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/CI%20Release/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.js\n","readmeFilename":"README.md","description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@1.0.0","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-9Ezsd9yJP3N4NcVL3x5cQPo2Rw+/wDjuOPyLOkX5no5+sxn4itvSDHyjDGPJ07CqjzDN2bV+GHUew9JU90aV3g==","shasum":"ee2e277c0ae64a712040baaf269a4a66a579f70a","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-1.0.0.tgz","fileCount":24,"unpackedSize":92425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2UO8CRA9TVsSAnZWagAAQMgQAJDtqwS4PrFZkKk9TVgk\nay0BfCXTqVcysdl0NpxMF3/zHFPsq0asdmNRT6AfyKB09q8DQBunQNPfvQif\nlJULLSxUSz0QMJPiewlv7FO0cm/9JuG5Lnce8I7Gz8tuPV0ozghSSTUuC2nu\noHjsjHRMHEO9f8NyoXPIJCK/DlpIIdD6wXW+ZmMcbYxKZX/PbYQ9aFT0I4Jo\n4RrVrskJoXHI+UwDBi6E4AfEFPzUAZ+VjV6YbxPP5IID4XWQp6wCztv7nt3J\n9riGlidWguDTT4xzmfW7jLMIamxBmVWLqVpFnrhzcO15VEzyEAYAQVo9CK9u\nKyEQ20JxZxY0eVV3BgxqnsXE1Nz4pgebQCNj/MWSZI6kCFR0bTJcJNBcIca3\nxd0kGq/yK12tqC6U/pzCxOKr9qpcqn85HeXdUHpz4mqFdDKsHxQk/axI7Hmh\ngYSQZdUDlofmns+0Q78uaEmkaSwm2k/yKUnSwbfjx6eVjx5NFNEYn/i3lHli\nix1X1/pHep9PXhwlqD8ZE4fRYJp7X/6yMGb9QeU06n+ij7webRD1fYrrc0Rm\n/M2m/FVNgx2bzS2d3V6z1yAH/scBbkp8ug+NUW6Wm09HpMO41CSf2EOUZuB6\nHHjzuBVvVM/N/8ukQyktJc+SVWeK1YUSQxnZD3wLbgfM4ULpcBta4mJfl2JP\noqgS\r\n=sSwJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG8WOTEO6qygC7B5gRK4b4iWi+Yp43qi+EzcIT7fySBzAiEAuhbszx4vlaX1vjqWMmapSiYvqebHDXSPxF8j+UT17Co="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_1.0.0_1591296955592_0.2459337795294494"},"_hasShrinkwrap":false},"1.0.1":{"name":"@terminus/ui-file-upload","version":"1.0.1","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/forms":"^9.1.0","@angular/platform-browser":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/material":"^9.1.0","@terminus/design-tokens":"^1.0.10","@terminus/ngx-tools":"^8.0.5","@terminus/ui-button":"^0.0.1","@terminus/ui-icon":"^0.0.1","@terminus/ui-icon-button":"^0.0.1","@terminus/ui-pipes":"^0.0.1","@terminus/ui-spacing":"^0.0.1","@terminus/ui-tooltip":"^0.0.1","@terminus/ui-utilities":"^0.0.1","@terminus/ui-validation-messages":"^0.0.1","rxjs":"^6.5.0","tslib":"^1.10.0"},"description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@1.0.1","_nodeVersion":"12.16.3","_npmVersion":"6.14.5","dist":{"integrity":"sha512-7QdK+2CKT8YEeZHfZo81W5fHntd8ZS44CCRTQN6X29sbbmYg89V5261lEqKizdFpwY+z5aTB1hUVc3jFFmTufQ==","shasum":"7557ec9832b35dc196ab4335f35a00b68b6e5075","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-1.0.1.tgz","fileCount":25,"unpackedSize":92479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2a5OCRA9TVsSAnZWagAAixQP/04LCnWidZ9ppiOp97nh\n6e9PjV6pxjhKUc+oi12zXZX2fG1SATCSefPNEM4dEFSxQ1RL7Cx9Q1RHTaKz\nNK80yWciDeSyu7k2sYDOrFplqI9zUQu7x+aRkM7MeLiyMBpT/Btt0zSRJb9H\n0GvtpYztgisgu3m3eAaby3gugqfqA5gYQCQdbZ3bXNP0AtQVs/OlQAJQdqvA\n3iXBX4BYPHdT5zVPxSVDbRJoK5M//+LDvA0RnuBRrK/B2C9Qz1OKFtOj67kS\n/ZIqBQFTGUNlyTBw8pmoAjgAlhG7G2RATdBCeAucG2PH64MWvC4bsXfq8GvA\n9JA4WmR5cwCCxlquvYVRGIBsmXFWqtaGWM7bJ3WGLFugNxz91eJF1qZ67w6H\nD4gh/vmsdR53YmaaiQUjADaX+/JkSWvAr7KeRx6a79N/zsRpxPONLEZvsh7B\noYZg5qbmHFDD9jfwAj589NRUIfMzwyIphS5eLUBox/1hQGwjy7m/P4RfJFUf\nhz0f6fnzyZ7Gs/wMQu3+ujCPwlPtESdJtw4QpeeEAwteZPOg3hlD1uuWT+VA\nuzAKjYAJyrK/kT0bpk0nc1Ay5ycIqwlfYn7JdP7lsE9eeFDQ52OTsojNgvYH\nNfZkAyaUUx2ZLJmD4ItC0OrS4bex+WYIq1zmppbDfSl/WxUBct84Mne1fA8s\n+9XY\r\n=vOCA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDzdWe+/9lup7UiVKrQP2LPZVA+Cy+1kBatphS1PNaiiAiEA6+nZvj60CAgdLjven/qGV+uJkSSeI7PL3VaJ8a2E4Wk="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_1.0.1_1591324238346_0.8250836917738773"},"_hasShrinkwrap":false},"1.0.2":{"name":"@terminus/ui-file-upload","version":"1.0.2","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.0.2","@terminus/ngx-tools":"^8.0.5","@terminus/ui-button":"^1.0.0","@terminus/ui-icon":"^1.0.0","@terminus/ui-icon-button":"^1.0.0","@terminus/ui-pipes":"^1.0.0","@terminus/ui-spacing":"^1.0.0","@terminus/ui-tooltip":"^1.0.0","@terminus/ui-utilities":"^1.0.0","@terminus/ui-validation-messages":"^1.0.0","rxjs":"^6.5.0"},"main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0"},"readme":"<h1>File Upload</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Github release][gh-release-badge]][gh-releases] [![Library size][file-size-badge]][raw-distribution-js]\n\nA drag'n'drop file upload component.\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n**Table of Contents**\n\n- [Usage](#usage)\n  - [`TsSelectedFile`](#tsselectedfile)\n  - [File types](#file-types)\n  - [File size](#file-size)\n  - [Image dimensions](#image-dimensions)\n  - [Image ratio constraints](#image-ratio-constraints)\n  - [Clearing a file](#clearing-a-file)\n  - [Showing upload progress](#showing-upload-progress)\n  - [Enable multiple file selection](#enable-multiple-file-selection)\n  - [Handle multiple files](#handle-multiple-files)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n\n## Usage\n\nCollect the selected file via the `selected` event:\n\n```html\n<ts-file-upload (selected)=\"handleFile($event)\"></ts-file-upload>\n```\n\n```typescript\n@import { TsSelectedFile } from '@terminus/ui-file-upload';\n\n...\n\n  handleFile(e: TsSelectedFile) {\n    // e.fileContents is the selected file\n  }\n```\n\n### `TsSelectedFile`\n\nThe `TsSelectedFile` instance will have several items available:\n\n```\nfile.fileContents // string\nfile.height       // number (will be 0 for CSVs)\nfile.isCSV        // boolean\nfile.isImage      // boolean\nfile.isValid      // boolean\nfile.mimeType     // string\nfile.name         // string\nfile.size         // number\nfile.validations  // TsFileValidations\nfile.width        // number (will be 0 for CSVs)\n```\n\n### File types\n\nAccepted file types can be set by the `accept` input:\n\n```typescript\n@import { TsFileAcceptedMimeTypes } from '@terminus/ui-file-upload';\n\n...\n\n  myMimeTypes: TsFileAcceptedMimeTypes = ['image/png', 'image/jpg'];\n```\n\n```html\n<ts-file-upload [accept]=\"myMimeTypes\"></ts-file-upload>\n```\n\nIf a file is loaded with the incorrect MIME/type, a validation message will appear below the file input.\n\nThe default types can be found by importing `TS_ACCEPTED_MIME_TYPES`;\n\n\n### File size\n\nSet a maximum size for files in kilobytes:\n\n```html\n<ts-file-upload [maximumKilobytesPerFile]=\"{{ 6 * 1024 }}\"></ts-file-upload>\n```\n\nIf a file is loaded that exceeds the size limit, a validation message will appear below the file input.\n\n\n### Image dimensions\n\nImage dimension validation is controlled by an array of constraints passed to the component.\n\nA single constraint has this structure:\n\n```typescript\ninterface TsFileImageDimensionContraint {\n  height: {\n    min: number;\n    max: number;\n  };\n  width: {\n    min: number;\n    max: number;\n  };\n}\n```\n\nFor fixed image dimensions set the min and max to the same number. The component will trim ranges before exposing to the user:\n\n```javascript\n// Example:\n{\n  height: {\n    min: 100;\n    max: 100;\n  };\n  width: {\n    min: 300;\n    max: 300;\n  };\n}\n// Will be displayed as: `300x100`\n\n{\n  height: {\n    min: 50;\n    max: 100;\n  };\n  width: {\n    min: 200;\n    max: 300;\n  };\n}\n// Will be displayed as: `200-300x50-100`\n```\n\nExample:\n\n```typescript\n@import { TsFileImageDimensionConstraints } from '@terminus/ui-file-upload';\n\n...\n\n  myDimensionConstraints: TsFileImageDimensionConstraints = [\n    {\n      height: {\n        min: 72,\n        max: 72,\n      },\n      width: {\n        min: 72,\n        max: 72,\n      },\n    },\n    {\n      height: {\n        min: 400,\n        max: 500,\n      },\n      width: {\n        min: 700,\n        max: 800,\n      },\n    },\n  ];\n```\n\n```html\n<ts-file-upload [dimensionConstraints]=\"myDimensionConstraints\"></ts-file-upload>\n```\n\nIf an image is selected that does not meet the dimension constraints, a validation message will appear below the file input.\n\n### Image ratio constraints\n\nImage ratio validation is controlled by an array of constraints passed to the component.\n\n```html\n<ts-file-upload [ratioConstraints]='[\"1:2\", \"3:4\"]'></ts-file-upload>\n```\n\nIf a file is loaded that do not meet any ratio constraints, a validation message will appear below the file input.\n\n### Clearing a file\n\nThe user can clear the selected file by clicking the `X` button next to the filename. An event will be emitted when this occurs:\n\n```html\n<ts-file-upload (cleared)=\"fileWasCleared()\"></ts-file-upload>\n```\n\n```typescript\n...\n\n  fileWasCleared() {\n    ...\n  }\n```\n\n\n### Showing upload progress\n\nThe progress of an upload can be reflected in the UI by passing a number between 0 and 100 to the `progress` input:\n\n```html\n<ts-file-upload [progress]=\"myProgress\"></ts-file-upload>\n```\n\n```typescript\n...\n  myProgress = 0;\n\n  // For example only. In a real scenario the progress value would be coming from the API.\n  // Start a counter to fake the upload progress value\n  startProgress() {\n    this.myProgress = 0;\n    const counting = setInterval(() => {\n      if (this.myProgress < 100) {\n        this.myProgress++;\n      } else {\n        clearInterval(counting);\n      }\n    }, 14);\n  }\n```\n\n\n### Enable multiple file selection\n\nSet `multiple` to `true`:\n\n```html\n<ts-file-upload [multiple]=\"true\"></ts-file-upload>\n```\n\n\n### Handle multiple files\n\nCurrently this component does not natively handle multiple file uploads (this support is planned for the future). There are ways to 'fake'\nthat functionality in a way.\n\nAn example:\n\n```html\n<!--\n  Here is the original file upload. Initially this is all the user sees.\n  When multiple files are selected, they will be emitted through this event:\n-->\n<ts-file-upload (selectedMultiple)=\"selectedMultiple($event)\"></ts-file-upload>\n\n<!-- Loop over the files that were collected from the selectedMultiple event -->\n<ng-container *ngFor=\"let v of files\">\n  <ts-file-upload\n    <!-- Only show this upload if the file still exists in our files collection: -->\n    *ngIf=\"fileExists(v.id)\"\n    <!-- Seed the file input with the file from our collection: -->\n    [seedFile]=\"v.file\"\n  ></ts-file-upload>\n</ng-container>\n```\n\n```typescript\n...\n\n  // We'll store the selected files here for reference:\n  files: {id: number; file: File}[] = [];\n\n  // Collect the selected files from the event and store them for reference:\n  selectedMultiple(e: File[]) {\n    let index = -1;\n\n    this.files = e.map((f) => {\n      index = index + 1;\n      return {\n        id: index,\n        file: f,\n      };\n    });\n  }\n\n  // Remove the correct file when the user clicks the clear button\n  clearFile(id: number): void {\n    if (!this.files || this.files.length < 1) {\n      return;\n    }\n\n    this.files = this.files.filter((obj) => {\n      return obj.id !== id;\n    });\n  }\n\n  // Helper function to determine when to hide one of the file upload components:\n  public fileExists(id: number): boolean {\n    if (!this.files || this.files.length < 1) {\n      return false;\n    }\n    const found = this.files.find((v) => {\n      return v.id === id;\n    });\n\n    return found ? true : false;\n  }\n```\n\n\n<!-- Links -->\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/master/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/master/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-file-upload.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-file-upload\n[gh-release-badge]:    https://img.shields.io/github/release/GetTerminus/terminus-oss.svg\n[gh-releases]:         https://github.com/GetTerminus/terminus-ui/releases/\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.js\n","readmeFilename":"README.md","description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@1.0.2","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-A70BWgTiIuUUba386UgEz6Zmek7xpuU7Poua7+cXVbsXvyqh+CBOzDriO3RtT/gIZw8wU8Wij7PpyKHxkny49Q==","shasum":"011733e61e5818223bdb4f78d1b4a27a31af5e76","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-1.0.2.tgz","fileCount":66,"unpackedSize":723010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4S1xCRA9TVsSAnZWagAAsgsQAIZknZTAO1a3dBByR5e0\nsn9GK8YPXS1a71fN9gvwcoZXnhBAP1oyHqSUga3JXEyMt9td+uxOXECHqs0m\nO7lABrMU/zTiNpgwuIwgvAE6bFd4qkOkVkmmJrcFRtKjXLSUr9yVcLeeITqE\nF55+4OCd+gWJ1WXcNvRjZZYDwYwSF0T1RVTAfIS8O7PRVCOry2tdFkuOUs4U\nUthr4nVIFU3o92FKUHHp7OEHuzqzWxYmbuKx2SA6E6Mnz4aL6na6ihBUYLLK\nV1Oygb7ZjM6w66k0OH17NU0TOR8qGOAd15pGTb+cjttZkaGXzRBLYCf+h2aV\noNSmaNJooQdG2FBU5oKsp8ds7YAbjz9zpbG2GUHxBAQc6cm1xek7qhIPnO5j\n5b3qY/5OCEXOj/GObJV3d8Ea3pQRuLp8FCEZ2iFNLbv60Sc0onKd47lTGgh/\n5fQCKaDoGDn81+u9pqz/hgFmGdWl7aZ8uKxgvP11gTwEImQffumrOIeKIoZX\ngRcCBgZ26HaiFgc54viEEVS788Ad1truXrBqUhjY+BLZ+SETsELAHELR+c08\nQL5f42X4BlkvJXqm3X35GL2HSYm4J+gJekWoeU0eTVEvoFWcgb7q0WI+L5Ij\n1FY15xIJUpd/FxfrB4SM3+l9RSRuLIm5W3RIuFCfhEga+yPTL73pGXLGLUWh\np68G\r\n=1Blq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIET6jAPCaO8X8QYiOl3+y3SPTEtpdf+5eENcXllHRvB7AiEAhu7XPLTC+Ovyt/xChDCq6e63C/hfJMRY8Q3vhAffnb4="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"benjamincharity","email":"ben@benjamincharity.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_1.0.2_1591815536777_0.49570003781646954"},"_hasShrinkwrap":false},"1.0.3":{"name":"@terminus/ui-file-upload","version":"1.0.3","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.0.2","@terminus/ngx-tools":"^8.0.5","@terminus/ui-button":"^1.0.0","@terminus/ui-icon":"^1.0.0","@terminus/ui-icon-button":"^1.0.0","@terminus/ui-pipes":"^1.0.0","@terminus/ui-spacing":"^1.0.0","@terminus/ui-tooltip":"^1.0.0","@terminus/ui-utilities":"^1.0.0","@terminus/ui-validation-messages":"^1.0.0","rxjs":"^6.5.0"},"main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","date-fns":"2.14.0"},"description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@1.0.3","_nodeVersion":"12.18.0","_npmVersion":"lerna/3.22.1/node@v12.18.0+x64 (linux)","dist":{"integrity":"sha512-i2i/9IpKEnzLp4iTz37uNhl3FmFCUKs4ki3zh5XEn5U/i3wiOsnccn0Hio9IDPGvE2IPxZ7i420ILnw/62kZ7w==","shasum":"84c526ad1fd548847dbc7b002213e5b66015abb0","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-1.0.3.tgz","fileCount":67,"unpackedSize":724302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4j0tCRA9TVsSAnZWagAAoPYQAI26yjpL7bWqqfU3yoeL\n9UG2yy3QHVmX4pjo0NvQ0SnaUMDdgPdizenEYZLYFjSyMPUd3ZNDDdi6mit5\n0EywHEw78ECFsQjwyWcHDv+PIMiFKZOf69ahGeQBB4KqiNYp4v0NVmebJUMX\nr0qosWHcTOr9XMlmP+jPWMSO8U5ICdHDzJpVrHRLG4i6GIOOq0oSnyWddxSz\nMkLX0x++EdKMsJm/QI4xxVyWW/W/aFsTdWbzVgAa70GhpOWCsQEuM1jPvojr\nQRx8kv2VjEq2u+4YPiAN69n+kJnn3VUX0ISy6qOOPVFYn11DcpUV+5jaoxUP\nLmuAvTUSxXo4uLaVbxQ+M0hGq5uWFVbcxwMNj+zqZoQKvW9QTFlIgYBbtOeh\nvoblDalckpoWU+BIaGWN/mjZPdoNE7yRAlQjGUvTfcb2LGc+OhrZbEMV3LFB\n6HS4tm58l0Cxj8Heyknm/44VEmY1h5IcogFsM3Ewbjd/HflAoMxStWrFKxpO\nT9Owl0gVhQn9FjAQaHQGIDJGu6ZUktqTm+NjBIPH66HmkyrZJtPz2nqOHmNd\nDISnaqvm+9i/EJ3WKRHMd3aiNL6UbWt1Fk9zwqEz8bJMJZa8XEGL2DqHPEGC\nPM5ZzXSdNPLHKdDvVYsib444r5Cg5SZdWu9ULWadoe6a7YyPHFcUj+EBA78a\nHa7i\r\n=JhoB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBBvB9SIKIfdLmNTY3nKY0JDOmUv2I8FLpNMwd5RFtKVAiEAiEEeTX46oN+sdMVm7Lf0YikE7mKMshvJgpM+6ERc4yA="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_1.0.3_1591885101119_0.17196315917607619"},"_hasShrinkwrap":false},"1.0.4":{"name":"@terminus/ui-file-upload","version":"1.0.4","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.0.2","@terminus/ngx-tools":"^8.0.5","@terminus/ui-button":"^1.0.0","@terminus/ui-icon":"^1.0.0","@terminus/ui-icon-button":"^1.0.0","@terminus/ui-pipes":"^1.0.0","@terminus/ui-spacing":"^1.0.0","@terminus/ui-tooltip":"^1.0.0","@terminus/ui-utilities":"^1.0.0","@terminus/ui-validation-messages":"^1.0.0","rxjs":"^6.5.0"},"main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0"},"description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@1.0.4","_nodeVersion":"12.18.0","_npmVersion":"lerna/3.22.1/node@v12.18.0+x64 (linux)","dist":{"integrity":"sha512-LKGGw3Q1kHJOY7Q0FkZwCCo/xF/BfiT4Z7+VDkAMFRFoOAqCphlKuo7/f9C/IRzLqignZXePQlJTBqIlySgNNw==","shasum":"f586725c607cb63f0192a8ebef601b48f2511c1c","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-1.0.4.tgz","fileCount":67,"unpackedSize":724369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8iEmCRA9TVsSAnZWagAA39kQAKLbSE1nXb1akOblu3ZP\np0Yrh5HmmU5fvKVfVw+m7uRfvKkg4V3lgIaqwjouc5XIbLryp1wlJ7pnnSiG\nQPU2yAmy5Uk5Vrl4sXAPnxpE1MyxXSTYrcj3KP6woDzZREkCSicHb4w81qxP\no6LxzKqyTjVO9+i1ytg6pXEV0ajaGS/7TVSBHUO7O2agZIHeq2SZq6C5WCgE\nGZ7EvWHuHU4TaNqRNxmrPLggiaEcn11EKN3vmp/xcC5yULNdDVo0ODo8obSm\nEq0NKpaW+uaigOzyoj8Bj/gSb8Zu/glaAe2P4uvJHj0U4WwjsRiU+8qd+H0a\n2O+vbLQT2H6OnEPQKPmdsXjnoMvpCnO9DwvrnuQl1LE82fovOEw3IEpcXUBV\nJmmudkKr0Y94A1y8xWiQf8gD2PKJXaFnj3DMFqG80rMniLxgPL3VU+lwA+OF\nd3HPwmEz/Ux4rZIz6T3/YOtM84PnygtiGpT2xYonIdP0dfKVWNSzc5n+vD+D\nYf0h29mCAGV23ykCZfhZTklpN38TeB+ngic2z1Qn4OagEKYAdW7ebJNI1hfg\nVLwwGZQU/RCu9U0vRCLlHoO4SmkS03kq24NNoB2XS01PJ0QvG0tunVNnbMlr\nFfZwJ1SzDECpBaPytsa4AlZXxfZu1/MCvWa9Jo72SNVwuD4Bp6hghbulYndH\nZe3B\r\n=ahqJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIWWTKpY3+G3FesEPrBP1cGn2nz0qDraClAnCujKpcJgIhAM0jm/c0KK+6Qrjad976xa6Z+ju0O6TPzL6ul3c0JBLm"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_1.0.4_1592926501912_0.19294419703846022"},"_hasShrinkwrap":false},"1.0.5":{"name":"@terminus/ui-file-upload","version":"1.0.5","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.0.2","@terminus/ngx-tools":"^8.0.5","@terminus/ui-button":"^1.0.0","@terminus/ui-icon":"^1.0.0","@terminus/ui-icon-button":"^1.0.0","@terminus/ui-pipes":"^1.0.0","@terminus/ui-spacing":"^1.0.0","@terminus/ui-tooltip":"^1.0.0","@terminus/ui-utilities":"^1.0.0","@terminus/ui-validation-messages":"^1.0.0","rxjs":"^6.5.0"},"main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0"},"description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@1.0.5","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-eERss0NuvYU/UMHA/e+PaK3p3uH+SLXB3GOrjK0M5vaYjvu5RCj/k5CFNqLSaUxSp8URy1gg5EYsPitg7FmTUw==","shasum":"ff83850d57c4ed1baa0ffc31a01ceb504dda645f","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-1.0.5.tgz","fileCount":67,"unpackedSize":724583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBJcQCRA9TVsSAnZWagAAZtAQAJM6FbkvDu/u88C3kwRZ\n762YkbPLz5WX973MLAMiQ2Jkfzn/WZGWg7GVVa1YGfKpgN9GVPD3Cf+9f9/m\nUoPQGoklabWzOkV/9SYB0tBlsPx6bBN8t8Pi40ylU37+ZwIx3qNaD1HBmt/l\nvNsmrbl3hbU7tYNxxtLKyL41dnRLoNa0LFImfCMB3JwY4IO+vosSkDjBnVjE\nHdFU5CsWhWOlAXGRcCmnnERYv+LG7bvPSJle9r9tHMRHVlxhMBP9lOg4Mxuo\nOnG4IbHbJXuPwwN0t8vTx/5fosIwdLxylRnGqB8DKrQbI+iOhTOzUY3sPAdN\nQM8gWQwSY5YfDEbUZKFnAYLmyHXbpvICxvvqXjCcvIsAz+5aD10FlKCEZnFP\nTZPy8P7ybZg/Xi2chhEt3JF4YXL2sOxtyUJZt+ZiiFqvrBMD60xajo5/FqEr\nPBXMPih7Dak//pGfthPscZ4TnPZiql9A5bjfYjS5rOFweOnT24JTp/jjj9Vc\nBNK47J32Jdm3r7LZRIN0ixBZHhgHdmfV8N2Jo+fxTp8jmkLh6799FdI07k7n\nuaSWhUh+egrCxqANvri+4Vu07zbbr3hT37jCL6K86VaA109+JQY34JmujOwq\nfN8zfM65QZ09TK30XfnFFZRPrcHpdIIyxiA8OuZU8qG2BBkRcXAzW8RESUb0\ngq6w\r\n=DQK3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBv1WO1c6BFNG2c3JH6FLSejMoXYHC3Vjak+F+gvx0VWAiBClPRV+RS9V6XactxvPY/VWIWB8u82u0b9x9Y2E3l5LQ=="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_1.0.5_1594136335754_0.5654046869146012"},"_hasShrinkwrap":false},"1.0.6":{"name":"@terminus/ui-file-upload","version":"1.0.6","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.0.2","@terminus/ngx-tools":"^8.0.5","@terminus/ui-button":"^1.0.0","@terminus/ui-icon":"^1.0.0","@terminus/ui-icon-button":"^1.0.0","@terminus/ui-pipes":"^1.0.0","@terminus/ui-spacing":"^1.0.0","@terminus/ui-tooltip":"^1.0.0","@terminus/ui-utilities":"^1.0.0","@terminus/ui-validation-messages":"^1.0.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"10.0.0","date-fns":"2.14.0"},"readme":"<h1>File Upload</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Github release][gh-release-badge]][gh-releases] [![Library size][file-size-badge]][raw-distribution-js]\n\nA drag'n'drop file upload component.\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n**Table of Contents**\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [Links to be added](#links-to-be-added)\n- [Usage](#usage)\n  - [`TsSelectedFile`](#tsselectedfile)\n  - [File types](#file-types)\n  - [File size](#file-size)\n  - [Image dimensions](#image-dimensions)\n  - [Image ratio constraints](#image-ratio-constraints)\n  - [Clearing a file](#clearing-a-file)\n  - [Showing upload progress](#showing-upload-progress)\n  - [Enable multiple file selection](#enable-multiple-file-selection)\n  - [Handle multiple files](#handle-multiple-files)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n  *  @angular/cdk\n  *  @angular/common\n  *  @angular/core\n  *  @angular/flex-layout\n  *  @angular/forms\n  *  @angular/material\n  *  @angular/platform-browser\n  *  @terminus/design-tokens\n  *  @terminus/ngx-tools\n  *  @terminus/ui-button\n  *  @terminus/ui-file-upload\n  *  @terminus/ui-icon\n  *  @terminus/ui-icon-button\n  *  @terminus/ui-pipes\n  *  @terminus/ui-spacing\n  *  @terminus/ui-tooltip\n  *  @terminus/ui-utilities\n  *  @terminus/ui-validation-messages\n  *  date-fns\n  \nUsing `ng add` command can help getting all the dependencies installed:\n\n```bash\n    ng add @terminus/ui-file-upload\n```\n\n### Modules that need to be in NgModule\n\n  * TsFileUploadModule\n\n### Links to be added\n\nIn order to have material icons shown up correctly, add this to the top level html\n\n```html\n<link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\n```\n\n\n## Usage\n\nCollect the selected file via the `selected` event:\n\n```html\n<ts-file-upload (selected)=\"handleFile($event)\"></ts-file-upload>\n```\n\n```typescript\n@import { TsSelectedFile } from '@terminus/ui-file-upload';\n\n...\n\n  handleFile(e: TsSelectedFile) {\n    // e.fileContents is the selected file\n  }\n```\n\n### `TsSelectedFile`\n\nThe `TsSelectedFile` instance will have several items available:\n\n```\nfile.fileContents // string\nfile.height       // number (will be 0 for CSVs)\nfile.isCSV        // boolean\nfile.isImage      // boolean\nfile.isValid      // boolean\nfile.mimeType     // string\nfile.name         // string\nfile.size         // number\nfile.validations  // TsFileValidations\nfile.width        // number (will be 0 for CSVs)\n```\n\n### File types\n\nAccepted file types can be set by the `accept` input:\n\n```typescript\n@import { TsFileAcceptedMimeTypes } from '@terminus/ui-file-upload';\n\n...\n\n  myMimeTypes: TsFileAcceptedMimeTypes = ['image/png', 'image/jpg'];\n```\n\n```html\n<ts-file-upload [accept]=\"myMimeTypes\"></ts-file-upload>\n```\n\nIf a file is loaded with the incorrect MIME/type, a validation message will appear below the file input.\n\nThe default types can be found by importing `TS_ACCEPTED_MIME_TYPES`;\n\n\n### File size\n\nSet a maximum size for files in kilobytes:\n\n```html\n<ts-file-upload [maximumKilobytesPerFile]=\"{{ 6 * 1024 }}\"></ts-file-upload>\n```\n\nIf a file is loaded that exceeds the size limit, a validation message will appear below the file input.\n\n\n### Image dimensions\n\nImage dimension validation is controlled by an array of constraints passed to the component.\n\nA single constraint has this structure:\n\n```typescript\ninterface TsFileImageDimensionContraint {\n  height: {\n    min: number;\n    max: number;\n  };\n  width: {\n    min: number;\n    max: number;\n  };\n}\n```\n\nFor fixed image dimensions set the min and max to the same number. The component will trim ranges before exposing to the user:\n\n```javascript\n// Example:\n{\n  height: {\n    min: 100;\n    max: 100;\n  };\n  width: {\n    min: 300;\n    max: 300;\n  };\n}\n// Will be displayed as: `300x100`\n\n{\n  height: {\n    min: 50;\n    max: 100;\n  };\n  width: {\n    min: 200;\n    max: 300;\n  };\n}\n// Will be displayed as: `200-300x50-100`\n```\n\nExample:\n\n```typescript\n@import { TsFileImageDimensionConstraints } from '@terminus/ui-file-upload';\n\n...\n\n  myDimensionConstraints: TsFileImageDimensionConstraints = [\n    {\n      height: {\n        min: 72,\n        max: 72,\n      },\n      width: {\n        min: 72,\n        max: 72,\n      },\n    },\n    {\n      height: {\n        min: 400,\n        max: 500,\n      },\n      width: {\n        min: 700,\n        max: 800,\n      },\n    },\n  ];\n```\n\n```html\n<ts-file-upload [dimensionConstraints]=\"myDimensionConstraints\"></ts-file-upload>\n```\n\nIf an image is selected that does not meet the dimension constraints, a validation message will appear below the file input.\n\n### Image ratio constraints\n\nImage ratio validation is controlled by an array of constraints passed to the component.\n\n```html\n<ts-file-upload [ratioConstraints]='[\"1:2\", \"3:4\"]'></ts-file-upload>\n```\n\nIf a file is loaded that do not meet any ratio constraints, a validation message will appear below the file input.\n\n### Clearing a file\n\nThe user can clear the selected file by clicking the `X` button next to the filename. An event will be emitted when this occurs:\n\n```html\n<ts-file-upload (cleared)=\"fileWasCleared()\"></ts-file-upload>\n```\n\n```typescript\n...\n\n  fileWasCleared() {\n    ...\n  }\n```\n\n\n### Showing upload progress\n\nThe progress of an upload can be reflected in the UI by passing a number between 0 and 100 to the `progress` input:\n\n```html\n<ts-file-upload [progress]=\"myProgress\"></ts-file-upload>\n```\n\n```typescript\n...\n  myProgress = 0;\n\n  // For example only. In a real scenario the progress value would be coming from the API.\n  // Start a counter to fake the upload progress value\n  startProgress() {\n    this.myProgress = 0;\n    const counting = setInterval(() => {\n      if (this.myProgress < 100) {\n        this.myProgress++;\n      } else {\n        clearInterval(counting);\n      }\n    }, 14);\n  }\n```\n\n\n### Enable multiple file selection\n\nSet `multiple` to `true`:\n\n```html\n<ts-file-upload [multiple]=\"true\"></ts-file-upload>\n```\n\n\n### Handle multiple files\n\nCurrently this component does not natively handle multiple file uploads (this support is planned for the future). There are ways to 'fake'\nthat functionality in a way.\n\nAn example:\n\n```html\n<!--\n  Here is the original file upload. Initially this is all the user sees.\n  When multiple files are selected, they will be emitted through this event:\n-->\n<ts-file-upload (selectedMultiple)=\"selectedMultiple($event)\"></ts-file-upload>\n\n<!-- Loop over the files that were collected from the selectedMultiple event -->\n<ng-container *ngFor=\"let v of files\">\n  <ts-file-upload\n    <!-- Only show this upload if the file still exists in our files collection: -->\n    *ngIf=\"fileExists(v.id)\"\n    <!-- Seed the file input with the file from our collection: -->\n    [seedFile]=\"v.file\"\n  ></ts-file-upload>\n</ng-container>\n```\n\n```typescript\n...\n\n  // We'll store the selected files here for reference:\n  files: {id: number; file: File}[] = [];\n\n  // Collect the selected files from the event and store them for reference:\n  selectedMultiple(e: File[]) {\n    let index = -1;\n\n    this.files = e.map((f) => {\n      index = index + 1;\n      return {\n        id: index,\n        file: f,\n      };\n    });\n  }\n\n  // Remove the correct file when the user clicks the clear button\n  clearFile(id: number): void {\n    if (!this.files || this.files.length < 1) {\n      return;\n    }\n\n    this.files = this.files.filter((obj) => {\n      return obj.id !== id;\n    });\n  }\n\n  // Helper function to determine when to hide one of the file upload components:\n  public fileExists(id: number): boolean {\n    if (!this.files || this.files.length < 1) {\n      return false;\n    }\n    const found = this.files.find((v) => {\n      return v.id === id;\n    });\n\n    return found ? true : false;\n  }\n```\n\n\n<!-- Links -->\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-file-upload.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-file-upload\n[gh-release-badge]:    https://img.shields.io/github/release/GetTerminus/terminus-oss.svg\n[gh-releases]:         https://github.com/GetTerminus/terminus-ui/releases/\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.js\n","readmeFilename":"README.md","description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@1.0.6","_nodeVersion":"12.18.1","_npmVersion":"lerna/3.22.1/node@v12.18.1+x64 (linux)","dist":{"integrity":"sha512-q4ad050HyQtCZhKiqeM0rsfXAJjHW92BCgLz3WWRI8A7/ekkLIDHakxnDirQeXjsFZk9Lq+PAufGKO/a77gfTg==","shasum":"3af210f5679bd561718ecdb402c2ea302c21de1f","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-1.0.6.tgz","fileCount":67,"unpackedSize":725994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDLTVCRA9TVsSAnZWagAAAOgQAITgaJLZMBaCZSPM2YOQ\nsQVtHdXAeJf/OAh8QTP78XRENeQeIfjkkjV+S8J0ynf8d4RofAd3fXdZv+xq\naZGr1mna51lUUJ8YTWN3nobS44ieQtvcS7RZmq4nfSZWEmFWAor3MOHmRoMh\nfG7o43cV+FGt+R1HaaRFQ8MHLKqnX17UDY9m+J8u9kExIo4l4Sm565+0MdMy\n7mdOi05BCsU4LX0fwEjRB0rv1GVFhCKqdbfydvUK+gBDSACTNz87c0n6h2L6\nHY6DiujR1AE17sB2PkTIBl0SqMXWGqwNLLyPggIkXjJChSIanjZuM0a+88vT\n+C2YZ/F9n79xAATXhTVeYae8AVJfTCdOQ2WtGFz/Pjm0RaugneMf9TFQ/crf\nR9x8xEXmM0eBCHsqNNoVUkOv9vc1x/YrzZKz6HHtJFcBkhd1NW5/hdTRZlzt\nEzdiPDbsbotZv4LgeIMF68b7nRvdFLBioEK2Nog2cvzlQmFLGYcfKf5+NJ/V\nS6zQOHB1gpQ8aTQB7yzJnHFCdqE8NvTVR0+hepquart1BSTVf2cKOM0M2Td4\ne0mY3tLYzyEOqVAmGTq77OTfU7I19KMj1vGPitZhyX6MwZNPdo9JnLK40W7H\nAzACRUxXLhkV5E7VAC4D+Va2b2XEpbM1mQ1DDR6fZGJ1osxXVOXglbd735nb\nQEQb\r\n=93KN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHweGzcoNhEF0rpVo0xEV7A4O4I7Vpfp6tj9e2FLwD3BAiEAj5sp2dmTHkxkL/MLJH/mF2OMswyg0CslI/IHKgbJyAc="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_1.0.6_1594668244872_0.9662656818386501"},"_hasShrinkwrap":false},"1.0.7":{"name":"@terminus/ui-file-upload","version":"1.0.7","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^2.0.2","@terminus/ngx-tools":"^8.0.5","@terminus/ui-button":"^1.0.0","@terminus/ui-icon":"^1.0.0","@terminus/ui-icon-button":"^1.0.0","@terminus/ui-pipes":"^1.0.0","@terminus/ui-spacing":"^1.0.0","@terminus/ui-tooltip":"^1.0.0","@terminus/ui-utilities":"^1.0.0","@terminus/ui-validation-messages":"^1.0.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"10.0.0","date-fns":"2.14.0"},"description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@1.0.7","_nodeVersion":"12.18.2","_npmVersion":"lerna/3.22.1/node@v12.18.2+x64 (linux)","dist":{"integrity":"sha512-gZRWCgSoNpGDdVjT68RkMSKgCp2Slwd2P9g07zXJlb/K2HuF/LTIgghwmyNu+xISNIYaZu5xPVmVM2PNuGTDmQ==","shasum":"fb92ec549a98a2389c37a2a6927729abafba4493","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-1.0.7.tgz","fileCount":71,"unpackedSize":733923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDf8aCRA9TVsSAnZWagAAlwMP/0eUF3NlYudbGzMOwbay\nB4e+ILNRhV5EjZ//UcqKmTkR2UMGlknSFpkhvha6lFwJbs0mWF8uPvJTJtfO\n1dcJTBxoOtX2w8LbBu2xItWIyNL1FyqAOjkP+Vpjm+CQ+A31li3Mq6hU76Jo\n+A0jyhLh7I/eZPw2zTesfH73Gvo9mpq+FTwIypZYWo1IoiL1hdr482mWZ11I\ngW03vBXhS/lEX/54PNgHqGeoGCSoGMPu8epPknF3IcxhA+oDs2+ZAYd11U0B\nEF2ClgZ3FXuyj9JOVqrlEwqoJfLl/32JMAuayiMSzVSH27SxSlge/v1Wf512\nDzioMy5hY9hesXMRlQKuTVBH3h7bPDg0uhAjbmHcasnrVt9ZN6WbcUnlSVVj\nejcgIXDSYjEWNwVFkYJSrYTS2eVwoL3nCQyF92J44ayzjSliDnr2+xvOyOnl\nKUGa987huQsBrFq7+StORqcfZ0iMVRT6rCAoylYb6LiGl68iHIJaTs0mA6m7\nxjm3nzGhPxp+eLQTWMs80+goP0IeXCjvde1xolpLfvgF+dYuc4KNJuE9eV0p\nT0BuyTkpUd1SIOeKqPfBoaLoH7y76R4ND02j+OkcP2LqPOIJ342YosSmNHjs\nV8bnV/uMjp+C8Gx1NYcWYDD48m7fUbEeCiHhoFxMqAl/nLuaANt5b/0wjr4X\nqXA8\r\n=zKVw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEmhWzfSdQJzphaNJPFVQRtmUdlLzU0LWtUIFZI+YnhwAiAmipijoMCNeqlHzeRKKuNIwUWM9rBQe7ezXslMr4yWmg=="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_1.0.7_1594752793649_0.5152661809309536"},"_hasShrinkwrap":false},"2.0.0":{"name":"@terminus/ui-file-upload","version":"2.0.0","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/ngx-tools":"^8.0.5","@terminus/ui-button":"^1.0.0","@terminus/ui-icon":"^1.0.0","@terminus/ui-icon-button":"^1.0.0","@terminus/ui-pipes":"^1.0.0","@terminus/ui-spacing":"^1.0.0","@terminus/ui-tooltip":"^1.0.0","@terminus/ui-utilities":"^1.0.0","@terminus/ui-validation-messages":"^1.0.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"10.0.0","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-regular-svg-icons":"5.14.0","date-fns":"2.14.0"},"readme":"<h1>File Upload</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nA drag'n'drop file upload component.\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n**Table of Contents**\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [`TsSelectedFile`](#tsselectedfile)\n  - [File types](#file-types)\n  - [File size](#file-size)\n  - [Image dimensions](#image-dimensions)\n  - [Image ratio constraints](#image-ratio-constraints)\n  - [Clearing a file](#clearing-a-file)\n  - [Showing upload progress](#showing-upload-progress)\n  - [Enable multiple file selection](#enable-multiple-file-selection)\n  - [Handle multiple files](#handle-multiple-files)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/ngx-tools`\n- `@terminus/ui-button`\n- `@terminus/ui-file-upload`\n- `@terminus/ui-icon`\n- `@terminus/ui-icon-button`\n- `@terminus/ui-pipes`\n- `@terminus/ui-spacing`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-file-upload\n```\n\n### Modules that need to be in NgModule\n\n- `TsFileUploadModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nCollect the selected file via the `selected` event:\n\n```html\n<ts-file-upload (selected)=\"handleFile($event)\"></ts-file-upload>\n```\n\n```typescript\n@import { TsSelectedFile } from '@terminus/ui-file-upload';\n\n...\n\n  handleFile(e: TsSelectedFile) {\n    // e.fileContents is the selected file\n  }\n```\n\n### `TsSelectedFile`\n\nThe `TsSelectedFile` instance will have several items available:\n\n```\nfile.fileContents // string\nfile.height       // number (will be 0 for CSVs)\nfile.isCSV        // boolean\nfile.isImage      // boolean\nfile.isValid      // boolean\nfile.mimeType     // string\nfile.name         // string\nfile.size         // number\nfile.validations  // TsFileValidations\nfile.width        // number (will be 0 for CSVs)\n```\n\n### File types\n\nAccepted file types can be set by the `accept` input:\n\n```typescript\n@import { TsFileAcceptedMimeTypes } from '@terminus/ui-file-upload';\n\n...\n\n  myMimeTypes: TsFileAcceptedMimeTypes = ['image/png', 'image/jpg'];\n```\n\n```html\n<ts-file-upload [accept]=\"myMimeTypes\"></ts-file-upload>\n```\n\nIf a file is loaded with the incorrect MIME/type, a validation message will appear below the file input.\n\nThe default types can be found by importing `TS_ACCEPTED_MIME_TYPES`;\n\n### File size\n\nSet a maximum size for files in kilobytes:\n\n```html\n<ts-file-upload [maximumKilobytesPerFile]=\"{{ 6 * 1024 }}\"></ts-file-upload>\n```\n\nIf a file is loaded that exceeds the size limit, a validation message will appear below the file input.\n\n### Image dimensions\n\nImage dimension validation is controlled by an array of constraints passed to the component.\n\nA single constraint has this structure:\n\n```typescript\ninterface TsFileImageDimensionContraint {\n  height: {\n    min: number;\n    max: number;\n  };\n  width: {\n    min: number;\n    max: number;\n  };\n}\n```\n\nFor fixed image dimensions set the min and max to the same number. The component will trim ranges before exposing to the user:\n\n```javascript\n// Example:\n{\n  height: {\n    min: 100;\n    max: 100;\n  };\n  width: {\n    min: 300;\n    max: 300;\n  };\n}\n// Will be displayed as: `300x100`\n\n{\n  height: {\n    min: 50;\n    max: 100;\n  };\n  width: {\n    min: 200;\n    max: 300;\n  };\n}\n// Will be displayed as: `200-300x50-100`\n```\n\nExample:\n\n```typescript\n@import { TsFileImageDimensionConstraints } from '@terminus/ui-file-upload';\n\n...\n\n  myDimensionConstraints: TsFileImageDimensionConstraints = [\n    {\n      height: {\n        min: 72,\n        max: 72,\n      },\n      width: {\n        min: 72,\n        max: 72,\n      },\n    },\n    {\n      height: {\n        min: 400,\n        max: 500,\n      },\n      width: {\n        min: 700,\n        max: 800,\n      },\n    },\n  ];\n```\n\n```html\n<ts-file-upload [dimensionConstraints]=\"myDimensionConstraints\"></ts-file-upload>\n```\n\nIf an image is selected that does not meet the dimension constraints, a validation message will appear below the file input.\n\n### Image ratio constraints\n\nImage ratio validation is controlled by an array of constraints passed to the component.\n\n```html\n<ts-file-upload [ratioConstraints]='[\"1:2\", \"3:4\"]'></ts-file-upload>\n```\n\nIf a file is loaded that do not meet any ratio constraints, a validation message will appear below the file input.\n\n### Clearing a file\n\nThe user can clear the selected file by clicking the `X` button next to the filename. An event will be emitted when this occurs:\n\n```html\n<ts-file-upload (cleared)=\"fileWasCleared()\"></ts-file-upload>\n```\n\n```typescript\n...\n\n  fileWasCleared() {\n    ...\n  }\n```\n\n### Showing upload progress\n\nThe progress of an upload can be reflected in the UI by passing a number between 0 and 100 to the `progress` input:\n\n```html\n<ts-file-upload [progress]=\"myProgress\"></ts-file-upload>\n```\n\n```typescript\n...\n  myProgress = 0;\n\n  // For example only. In a real scenario the progress value would be coming from the API.\n  // Start a counter to fake the upload progress value\n  startProgress() {\n    this.myProgress = 0;\n    const counting = setInterval(() => {\n      if (this.myProgress < 100) {\n        this.myProgress++;\n      } else {\n        clearInterval(counting);\n      }\n    }, 14);\n  }\n```\n\n### Enable multiple file selection\n\nSet `multiple` to `true`:\n\n```html\n<ts-file-upload [multiple]=\"true\"></ts-file-upload>\n```\n\n### Handle multiple files\n\nCurrently this component does not natively handle multiple file uploads (this support is planned for the future). There are ways to 'fake'\nthat functionality in a way.\n\nAn example:\n\n```html\n<!--\n  Here is the original file upload. Initially this is all the user sees.\n  When multiple files are selected, they will be emitted through this event:\n-->\n<ts-file-upload (selectedMultiple)=\"selectedMultiple($event)\"></ts-file-upload>\n\n<!-- Loop over the files that were collected from the selectedMultiple event -->\n<ng-container *ngFor=\"let v of files\">\n  <ts-file-upload\n    <!-- Only show this upload if the file still exists in our files collection: -->\n    *ngIf=\"fileExists(v.id)\"\n    <!-- Seed the file input with the file from our collection: -->\n    [seedFile]=\"v.file\"\n  ></ts-file-upload>\n</ng-container>\n```\n\n```typescript\n...\n\n  // We'll store the selected files here for reference:\n  files: {id: number; file: File}[] = [];\n\n  // Collect the selected files from the event and store them for reference:\n  selectedMultiple(e: File[]) {\n    let index = -1;\n\n    this.files = e.map((f) => {\n      index = index + 1;\n      return {\n        id: index,\n        file: f,\n      };\n    });\n  }\n\n  // Remove the correct file when the user clicks the clear button\n  clearFile(id: number): void {\n    if (!this.files || this.files.length < 1) {\n      return;\n    }\n\n    this.files = this.files.filter((obj) => {\n      return obj.id !== id;\n    });\n  }\n\n  // Helper function to determine when to hide one of the file upload components:\n  public fileExists(id: number): boolean {\n    if (!this.files || this.files.length < 1) {\n      return false;\n    }\n    const found = this.files.find((v) => {\n      return v.id === id;\n    });\n\n    return found ? true : false;\n  }\n```\n\n\n<!-- Links -->\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-file-upload.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-file-upload\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.js\n","readmeFilename":"README.md","description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@2.0.0","_nodeVersion":"12.18.2","_npmVersion":"lerna/3.22.1/node@v12.18.2+x64 (linux)","dist":{"integrity":"sha512-zcmgghGS9Tx5x4MMRIQREf4oYFLQzIOlFZ6ADQpHKaYENYQdUOYSRk5Vnd9wa07s15zPnxnxpL9+FmdDthrLLA==","shasum":"e23c6423143d430cc67f9f4acb95c7fbca7fa905","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-2.0.0.tgz","fileCount":71,"unpackedSize":738088,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHy2OCRA9TVsSAnZWagAAF8QQAJRYD1IBx7fm7Us632Is\nu8Jc/SQr57GQzXDPrL6Ja+oiE/52OOmp9zXsZJlcgG2rayv/V0uO/B//Mfnd\nJtCijLm4JE0Sc1KpPGT/emfUuSInqkKWJsPXCQQwnhPzNGADe44rlXsMwKAb\n96rP3sOUrzsrZyNSyVcdYfsIDlhXbkym5KrUVEAVjPmpMC991WBk7EmoZBjI\np4WqByHNcr5bEACu4mK91hETXkKq7U2xHvo+DsUiQGDRCOq1+RKXdH318grY\nPN1xnXEtOva3NWWv7e0bltnoYofl1n5UxptKkySmI5QPqBwyPz50noQaa0oe\n0L+4EWAt63l0AUlXVjeVhvRpGTfxREYXaTZJsfc2eNiVl5IIIW3QMOVfMPhG\nEnInmf0WnVzbsRMndbc+L59z5tvPTAlMT4gF1XU1nO6v0KX8NLnFK4gk7qRI\nRKIPjWOjl3gsWGQoaEax5Lolga2JJTEchFvNUaYRft4rEsJjodmqqfej+y1J\nxGs5QCNVG/4AayEpLt8xllAXCL8aFxLjuME52rFih7I0kHO/QOVJY5LgiA4P\nOJTznx2xANbaecrwG/nN3STGBFuv6jG2Oc6uGKzriAIzKVm8hw1NwUdN5EtP\no7bKLEBFbucpSnQhW6dUd4do3C/JHp8pNG+BEjz5NC+KOgTcXmq1TGzIL/B8\ndaeA\r\n=FaW5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE4G7iNXJJ3DTI4tf9hnTYK9RWySNgzKkk2i67/Uexh3AiAEiXyBMrI/4XfgxG/EFjxFstJattTk61np63OltXdJ1w=="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_2.0.0_1595878797563_0.8176241611656403"},"_hasShrinkwrap":false},"2.0.1":{"name":"@terminus/ui-file-upload","version":"2.0.1","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/ngx-tools":"^8.0.5","@terminus/ui-button":"^2.0.0","@terminus/ui-icon":"^2.0.0","@terminus/ui-icon-button":"^2.0.0","@terminus/ui-pipes":"^1.0.7","@terminus/ui-spacing":"^1.0.9","@terminus/ui-tooltip":"^1.0.9","@terminus/ui-utilities":"^1.0.7","@terminus/ui-validation-messages":"^1.0.11","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"10.0.0","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-regular-svg-icons":"5.14.0","date-fns":"2.14.0"},"description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@2.0.1","_nodeVersion":"12.18.2","_npmVersion":"lerna/3.22.1/node@v12.18.2+x64 (linux)","dist":{"integrity":"sha512-zeTIPXaR+izjbMdgjKYGcxriP2L8CWZreqylFjhDOinI9t6nrmnP0VHt5c3/gvBhXufbildRPjmTkKQi8Hmkfg==","shasum":"f740d8f14189f3221e14c516f685fb08d0158c4c","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-2.0.1.tgz","fileCount":71,"unpackedSize":738386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIERGCRA9TVsSAnZWagAAgtcP/0RhQSc9geltpxnJCp2Q\n9MbZdh8aykJIrc9ksPqPavzBQQtNEe/QLLj5u18p8omQTpEH8J9qsCAKMPen\nsprdh3ujeVVxhVQm5sevXoldgyWcI6P8GcMrLJJIFoZuDcM4VdX8AUBF2h2p\nSPCssAu8y55bUoXDma/ykqaaaqBoQEPjtqwz0WI5HDxH8WCj8qignOg0Hixq\n+e4kYrE2+tKCS5/F1TcMKEhZaFbPE8xXJ+XJ8NkSwkSAGgcc/8iv33aWotCj\n8/37cxnyDVtQ7oUW1d1yIJ/cGEAJwTwCba+Av1NKBQrchT+pljytr9uBlddj\ntt4Kxk0Bm85EI8g2aGamUksfWCIMFbuVUsykolqa6fX/pxckacX6gjtvFiag\nAA7nJYQkdn7dyJk4xpLA1Ldg5Nh8++yFTBU4hjj45oefzeLJfw3EfIiq3lul\njcMXLDoYLFB8M/qVqQXvmDBM/BsWWhuB18/1OGzX3o6VwrUo3Kb2+JufnsVs\nxh/Az8ohrRUPinbK+j/DURedc8bLcy7u/CO3E2dJqNzoxskDsOivxvZ8nB+T\nCCBDrd0lt/QxFUaNPhVkF1dZGc/+c3x57Ofe4EVQ/b2LZ/nLmamuQzBKYaRk\nbr/SvriZuSyyORqFCOGoROURYo3lOewBvqJHUKH37L01h+ylLN3zOOQ/Johs\nc87m\r\n=rYcz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFWu8MEVMnCphyHp/yUwS6aKTVFzlgklQa0JHVSRJeGgIgHV1bWJMnkA9RrlrzJvzCeLByaDDjogi6mJQGS9dofls="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_2.0.1_1595950149772_0.42777682901979897"},"_hasShrinkwrap":false},"2.0.2":{"name":"@terminus/ui-file-upload","version":"2.0.2","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/ngx-tools":"^8.0.5","@terminus/ui-button":"^2.0.0","@terminus/ui-icon":"^2.0.0","@terminus/ui-icon-button":"^2.0.0","@terminus/ui-pipes":"^1.0.7","@terminus/ui-spacing":"^1.0.9","@terminus/ui-tooltip":"^1.0.9","@terminus/ui-utilities":"^1.0.7","@terminus/ui-validation-messages":"^1.0.11","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"10.0.0","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-regular-svg-icons":"5.14.0","date-fns":"2.14.0"},"readme":"<h1>File Upload</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nA drag'n'drop file upload component.\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n**Table of Contents**\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [`TsSelectedFile`](#tsselectedfile)\n  - [File types](#file-types)\n  - [File size](#file-size)\n  - [Image dimensions](#image-dimensions)\n  - [Image ratio constraints](#image-ratio-constraints)\n  - [Clearing a file](#clearing-a-file)\n  - [Showing upload progress](#showing-upload-progress)\n  - [Enable multiple file selection](#enable-multiple-file-selection)\n  - [Handle multiple files](#handle-multiple-files)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/ngx-tools`\n- `@terminus/ui-button`\n- `@terminus/ui-file-upload`\n- `@terminus/ui-icon`\n- `@terminus/ui-icon-button`\n- `@terminus/ui-pipes`\n- `@terminus/ui-spacing`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-file-upload\n```\n\n### Modules that need to be in NgModule\n\n- `TsFileUploadModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nCollect the selected file via the `selected` event:\n\n```html\n<ts-file-upload (selected)=\"handleFile($event)\"></ts-file-upload>\n```\n\n```typescript\n@import { TsSelectedFile } from '@terminus/ui-file-upload';\n\n...\n\n  handleFile(e: TsSelectedFile) {\n    // e.fileContents is the selected file\n  }\n```\n\n### `TsSelectedFile`\n\nThe `TsSelectedFile` instance will have several items available:\n\n```\nfile.fileContents // string\nfile.height       // number (will be 0 for CSVs)\nfile.isCSV        // boolean\nfile.isImage      // boolean\nfile.isValid      // boolean\nfile.mimeType     // string\nfile.name         // string\nfile.size         // number\nfile.validations  // TsFileValidations\nfile.width        // number (will be 0 for CSVs)\n```\n\n### File types\n\nAccepted file types can be set by the `accept` input:\n\n```typescript\n@import { TsFileAcceptedMimeTypes } from '@terminus/ui-file-upload';\n\n...\n\n  myMimeTypes: TsFileAcceptedMimeTypes = ['image/png', 'image/jpg'];\n```\n\n```html\n<ts-file-upload [accept]=\"myMimeTypes\"></ts-file-upload>\n```\n\nIf a file is loaded with the incorrect MIME/type, a validation message will appear below the file input.\n\nThe default types can be found by importing `TS_ACCEPTED_MIME_TYPES`;\n\n### File size\n\nSet a maximum size for files in kilobytes:\n\n```html\n<ts-file-upload [maximumKilobytesPerFile]=\"{{ 6 * 1024 }}\"></ts-file-upload>\n```\n\nIf a file is loaded that exceeds the size limit, a validation message will appear below the file input.\n\n### Image dimensions\n\nImage dimension validation is controlled by an array of constraints passed to the component.\n\nA single constraint has this structure:\n\n```typescript\ninterface TsFileImageDimensionContraint {\n  height: {\n    min: number;\n    max: number;\n  };\n  width: {\n    min: number;\n    max: number;\n  };\n}\n```\n\nFor fixed image dimensions set the min and max to the same number. The component will trim ranges before exposing to the user:\n\n```javascript\n// Example:\n{\n  height: {\n    min: 100;\n    max: 100;\n  };\n  width: {\n    min: 300;\n    max: 300;\n  };\n}\n// Will be displayed as: `300x100`\n\n{\n  height: {\n    min: 50;\n    max: 100;\n  };\n  width: {\n    min: 200;\n    max: 300;\n  };\n}\n// Will be displayed as: `200-300x50-100`\n```\n\nExample:\n\n```typescript\n@import { TsFileImageDimensionConstraints } from '@terminus/ui-file-upload';\n\n...\n\n  myDimensionConstraints: TsFileImageDimensionConstraints = [\n    {\n      height: {\n        min: 72,\n        max: 72,\n      },\n      width: {\n        min: 72,\n        max: 72,\n      },\n    },\n    {\n      height: {\n        min: 400,\n        max: 500,\n      },\n      width: {\n        min: 700,\n        max: 800,\n      },\n    },\n  ];\n```\n\n```html\n<ts-file-upload [dimensionConstraints]=\"myDimensionConstraints\"></ts-file-upload>\n```\n\nIf an image is selected that does not meet the dimension constraints, a validation message will appear below the file input.\n\n### Image ratio constraints\n\nImage ratio validation is controlled by an array of constraints passed to the component.\n\n```html\n<ts-file-upload [ratioConstraints]='[\"1:2\", \"3:4\"]'></ts-file-upload>\n```\n\nIf a file is loaded that do not meet any ratio constraints, a validation message will appear below the file input.\n\n### Clearing a file\n\nThe user can clear the selected file by clicking the `X` button next to the filename. An event will be emitted when this occurs:\n\n```html\n<ts-file-upload (cleared)=\"fileWasCleared()\"></ts-file-upload>\n```\n\n```typescript\n...\n\n  fileWasCleared() {\n    ...\n  }\n```\n\n### Showing upload progress\n\nThe progress of an upload can be reflected in the UI by passing a number between 0 and 100 to the `progress` input:\n\n```html\n<ts-file-upload [progress]=\"myProgress\"></ts-file-upload>\n```\n\n```typescript\n...\n  myProgress = 0;\n\n  // For example only. In a real scenario the progress value would be coming from the API.\n  // Start a counter to fake the upload progress value\n  startProgress() {\n    this.myProgress = 0;\n    const counting = setInterval(() => {\n      if (this.myProgress < 100) {\n        this.myProgress++;\n      } else {\n        clearInterval(counting);\n      }\n    }, 14);\n  }\n```\n\n### Enable multiple file selection\n\nSet `multiple` to `true`:\n\n```html\n<ts-file-upload [multiple]=\"true\"></ts-file-upload>\n```\n\n### Handle multiple files\n\nCurrently this component does not natively handle multiple file uploads (this support is planned for the future). There are ways to 'fake'\nthat functionality in a way.\n\nAn example:\n\n```html\n<!--\n  Here is the original file upload. Initially this is all the user sees.\n  When multiple files are selected, they will be emitted through this event:\n-->\n<ts-file-upload (selectedMultiple)=\"selectedMultiple($event)\"></ts-file-upload>\n\n<!-- Loop over the files that were collected from the selectedMultiple event -->\n<ng-container *ngFor=\"let v of files\">\n  <ts-file-upload\n    <!-- Only show this upload if the file still exists in our files collection: -->\n    *ngIf=\"fileExists(v.id)\"\n    <!-- Seed the file input with the file from our collection: -->\n    [seedFile]=\"v.file\"\n  ></ts-file-upload>\n</ng-container>\n```\n\n```typescript\n...\n\n  // We'll store the selected files here for reference:\n  files: {id: number; file: File}[] = [];\n\n  // Collect the selected files from the event and store them for reference:\n  selectedMultiple(e: File[]) {\n    let index = -1;\n\n    this.files = e.map((f) => {\n      index = index + 1;\n      return {\n        id: index,\n        file: f,\n      };\n    });\n  }\n\n  // Remove the correct file when the user clicks the clear button\n  clearFile(id: number): void {\n    if (!this.files || this.files.length < 1) {\n      return;\n    }\n\n    this.files = this.files.filter((obj) => {\n      return obj.id !== id;\n    });\n  }\n\n  // Helper function to determine when to hide one of the file upload components:\n  public fileExists(id: number): boolean {\n    if (!this.files || this.files.length < 1) {\n      return false;\n    }\n    const found = this.files.find((v) => {\n      return v.id === id;\n    });\n\n    return found ? true : false;\n  }\n```\n\n\n<!-- Links -->\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-file-upload.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-file-upload\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.js\n","readmeFilename":"README.md","description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@2.0.2","_nodeVersion":"12.18.2","_npmVersion":"lerna/3.22.1/node@v12.18.2+x64 (linux)","dist":{"integrity":"sha512-AgQdKVmbo5l/32w2y21KRURjZAxd5x7KPPJ3ExDrNE0K0V6qQTqC+Ms1YyRhm90r6DBBNP76JL4X1iwp96O4TQ==","shasum":"607b225338b8f30ec63a09e62adbb9b51c172df7","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-2.0.2.tgz","fileCount":71,"unpackedSize":739283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIG5RCRA9TVsSAnZWagAAavEQAI9C5yXR+FHkcFHPJ1fT\nwIhOthcYeLckqklNalVSurtKIZGKvP9u16lT9kDvPvDgICFE+ygeTcI80Elq\nbhKALfvxR9dXV3itM7oGcbPMJQ2uIOhNhi5u7/E/4zt/Mq4Er3Lbzv1Y1ysc\n4sDcBGiJWPCaqNNFAYm6rWzRPn/Lvpi0yaTbnpJiDmTAD/XAOrYB6W5UdBGB\nm4ZtTJno+GHvRwldbPwuYpCCLfBSYHSEnmzxyon3/B7JXxaQIQKd22aG+gj8\nXfMb54FGalN1LawurFNPGwRO0+xLJqTa5nFwPE75wfDvkKNwIVYK0LJiJcnl\nV1S8ddB64cLKQqfDf2kJIs8jYOUG4iQzGqNJvcJ3m1tMBQxo3j8SehBJnJhl\nGC36qn53PwgXXizr0TDQe0AM9nekf6BJKmBo4o7reZywc1qQbYyQl24ghTTL\nptB9mJ7AV0wNcjhFzdpXrS4op7hl9e6HcBcu1Lkc0kKXTpnn4qxSi1pmsaB6\n3VgJOkI9Bh7zXfrJaaJKxuQNLNrsZqtzQNmZ+R7qQcIoeBT3nK2ZAmkB+aWy\nMRFB/uZxFrDeCG7J+Gc1kKRhNdGbqrdSruBSUHe/EQbJY85OBLYh3O+bVjZH\nJUI4t/w/RUvJFbKCqoXSlzePRUqVnCLJyVIG2O1BaKm9QwLDAHJrchC4+ILU\ni6Ga\r\n=zK7g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgqGpfPVtUKoPg50ywGlDznPuM9aq4hd0gAL++V5QckwIgIgYPsF6kqW1K1Xpp+eE89074rnuxZHORGFfBOt7f2FE="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_2.0.2_1595960913318_0.29209531400223354"},"_hasShrinkwrap":false},"2.0.3":{"name":"@terminus/ui-file-upload","version":"2.0.3","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/ngx-tools":"^8.0.5","@terminus/ui-button":"^2.0.0","@terminus/ui-icon":"^2.0.0","@terminus/ui-icon-button":"^2.0.0","@terminus/ui-pipes":"^1.0.7","@terminus/ui-spacing":"^1.0.9","@terminus/ui-tooltip":"^1.0.9","@terminus/ui-utilities":"^1.0.7","@terminus/ui-validation-messages":"^1.0.11","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"10.0.0","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-regular-svg-icons":"5.14.0","date-fns":"2.14.0","@fortawesome/pro-solid-svg-icons":"5.14.0"},"description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@2.0.3","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-RwQ731Du5sUqcXodBFzVV8nqB+QIzXiNB+/4Mxd6ExDxFoaBDpfUD/rXgov8D/HZTyMhIMHSrxdV8Nz26qh0tA==","shasum":"ce36577eee03f5cd87a897bc7c9017306fcc1d55","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-2.0.3.tgz","fileCount":71,"unpackedSize":739547,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIXQXCRA9TVsSAnZWagAANGUP/idmqAdr932ouHYI4ms1\n6jUz6Vog77bWcqjTqZH0IvoqiN0I8Nd0/EVKAJK/poPyNZDYiwxQc0ewuAPm\nz8jwmeZkBRrbjXz9oMm0jxKAyzzWQ6/DaY7bVU5O1gtqHIbRgy4FZnilgK0D\nVpVsDC8dUR7+GWOg+CXy/LkKwureQ1xvNWuR6ol5ikofc6LFKLpEonaoOb1l\ncEHSvnsViURkAq/AhbaiboXGkLp33HB6GLQwe7bJV6FTWq/a37ETjJzLFX81\nG39yq8BE/D8+Z9Qv/MVtFctjLIAVqXu6lHIkAHTxLqXnDpFj79sikTQf/Vbo\n6yQ11J8l3x9B6jkmWark1CEcQcxQhNn82TyKCMDT9I7iDDjdL5pQPdf/fe/L\nhnoFelcktxliOwKLDv5GGqmj+MR1x1wZBjLywyj+nd4dtNo47Mc2fmeV72AE\nuLgR+jr0aajsuw0IsPlDyajgJ8Yf4+yaKTIQgMlCFnEOpdDHrhZFszm7VSYP\n1HdDDosNiuz8BwFRZoz3e7ygR4Df1c34urub3UBRZI5wBTNhBogeGWn3OGN6\nnbN6LY6nk1O3+bgbnfuFmXNyrsAa4uuTj3+6pdQEjw3W+kjMXX5eHfe7eAUx\ne477SctZq8VynQe7RDqLNYLsi8hNTiJk+2JZwctmDeKrhzEcU1IrzgkC1d36\nxl5k\r\n=fqN8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9C88S4kPV5WcJYW6Yd9Hl8DCzBM2KvT7JEb1h1Y8xFgIhAN3H+O+qwfoPtSC6n06hBZd2bnQiAqfrBnJ7k+UuQTKU"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_2.0.3_1596027927091_0.591180541197101"},"_hasShrinkwrap":false},"2.0.4":{"name":"@terminus/ui-file-upload","version":"2.0.4","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/ngx-tools":"^8.0.5","@terminus/ui-button":"^2.0.0","@terminus/ui-icon":"^2.0.0","@terminus/ui-icon-button":"^2.0.0","@terminus/ui-pipes":"^1.0.7","@terminus/ui-spacing":"^1.0.9","@terminus/ui-tooltip":"^1.0.9","@terminus/ui-utilities":"^1.0.7","@terminus/ui-validation-messages":"^1.0.11","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"10.0.0","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-regular-svg-icons":"5.14.0","date-fns":"2.14.0","@fortawesome/pro-solid-svg-icons":"5.14.0"},"description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@2.0.4","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-5+oFqS07rxHJDFoIuBvs+cG4szVhM70s4ZxCxlBP/PaDpZev1gUTdANepT9h+BlloLTaOQ/9mm4A7lAy5xxaZw==","shasum":"1cf363fe4d538a029d258828ac8480f6355d51c0","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-2.0.4.tgz","fileCount":71,"unpackedSize":739768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIZblCRA9TVsSAnZWagAArEoP/RnI/2zEyoKzbV7+tts8\nMcRHZNTp76ty3CcI9luBr2oRH/g5sIMfJXyI7j7ZEcoqXlw492HUCn1E9+2d\n8lTtmDGObJmouWchn9npWz8lIwd+qaPkohCLyYc2cj8ge6XXWm6dIsf/0AmZ\nQfr7KabUVUZYkiZdoCIKdLJGn1V3wYxh7q9qXEnNOc1hcVubHDdrOh3qM5Oh\nnYUCdfhgODHj2rD7OXGdBiI1y2k6eA26v7lEUccDGCJmW8GJlk0lTQheJUM9\n7r8E1qy55wtgsprI/k4HBvhPiBSIMG0tc5Oxxc6iXXB6WuxHKcVwOdQ612i+\npRSvPvK7E4R+QsyipFbUIwFycOk7BVYe+kiHkJE5dSdploiLO2kQywJQmHDH\nQlqfwNQqXlsEZ6XV8Ds+6R+uz08CDjcNz3N0irxUkIwVy500KLIzDGj3hsQF\nyl3uQFCSJTKdLxW8+zgUy0l1wyijx2+s+eweIjFeqdeJ/gHcKeOaNXdfl+hg\nscJJIekg/L6tpBjcgk7zrDIaU4m1TOYXV6WXquVkqz//9IrKHAJEU2ldeSY3\n5jmjQ+PYPR4hvLwJ+R/5W37t1Jq13jCbJJwIw5OM14tl9Kq3Hte9ls4i4PPP\n/BKPiuynqFIHCfiyCrKkZKRxWg1Xhfkvh+ZvmsJ069STup+HORNl8VxUZsIs\n0YUJ\r\n=9Vwk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9QXCleia0iC9hHkXa6VNbHpS1hycyf21iubT6z7eyWgIhAOys4foNRGJ98Cqh/R5+Uw/I4JUtYN/NA4zu9Vrsj1lT"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_2.0.4_1596036836528_0.8913228348539863"},"_hasShrinkwrap":false},"2.0.5":{"name":"@terminus/ui-file-upload","version":"2.0.5","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/ngx-tools":"^8.0.5","@terminus/ui-button":"^2.0.0","@terminus/ui-icon":"^2.0.0","@terminus/ui-icon-button":"^2.0.0","@terminus/ui-pipes":"^1.0.7","@terminus/ui-spacing":"^1.0.9","@terminus/ui-tooltip":"^1.0.9","@terminus/ui-utilities":"^1.0.7","@terminus/ui-validation-messages":"^1.0.11","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-regular-svg-icons":"5.14.0","date-fns":"2.14.0","@fortawesome/pro-solid-svg-icons":"5.14.0"},"description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@2.0.5","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-S+ZEFIKpyH4byKq0gIiVZmGY/LLr3BhY19IN2LpR9mUl5VKnm9eVt2cuU9YB+LiXfzYfB23Hg7++APUcnXBdJA==","shasum":"718b6ca2843ba41d90c793c0592d1e96e67e3c29","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-2.0.5.tgz","fileCount":71,"unpackedSize":741822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIy7dCRA9TVsSAnZWagAAc8IP/3nbdFFFEeVxVMMegVoF\nMfr6zj+up6X7IPQyhrMwTjGub+TP30+lj2HDi5ST+K/p6DOjYMF0C8dk6n6K\nnJRAEPtE7A3tFTLdsWyJDT5+wJiRRlqyXbf0GMtQiSkn/tP+qC487jkY04xT\nH2mVEcXLGe+vpXwtyMzEpBBj4XJqhWPZLp1DFvq+I3RtfjhqGyD+JU4xwJ+9\nY/4XfcOBOo3pdMzEmep/IkNaEgzTJxTfbdpHnhBZGgLTDY2l1MMr7Yt716KR\nJYtloKh16kNRgV2JHA0NUj3yLCzee03YAcYPEPB5lbvzaFhdWz+fqB0WP6MK\nx1kwzDjyWv6D4Nb7dGWvGWvbkMqc7bQlY+PUkiYe9+zkyBmR7THGpy8qYFC6\nnDpbLVbLK6jhvyvpea2pvnwPk0ud4E8jLEDHXUdKXLociL3SpR/5uEp32+eX\nXS168pHZ4If3gFpHfyP4trMRR0HjRYvrnoDlaRx1+sfaGt9ldrgQCoH+Lndy\nS1+oz0zuDYEeL+/Oql8HRogLoUHcE2b/nwWIWrNTNFajJtIKwCMTw3R7hgYy\nIK4DCftMM0ICz8voKyz20oCZIVwXHW+zV5i8OKQVECz/VXBA3h60FuQAOPp8\nrfTuzjGfSWsoai48S6oaNbJQBMpqC4K/2m3UAYjUjl1rkZIDR8jiD4OgVrOm\nds+d\r\n=s4at\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+D1BNilegn5tOhlyym7fYY8CZ68uIwAOgc7t6ZQpy1AIgUWl0QTVnnd3wsLtr6T3cvAhVQpn5yuj4OoaN2usNbP4="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_2.0.5_1596141276688_0.3943462385816425"},"_hasShrinkwrap":false},"2.0.6":{"name":"@terminus/ui-file-upload","version":"2.0.6","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-button":"^2.0.0","@terminus/ui-icon":"^2.0.0","@terminus/ui-icon-button":"^2.0.0","@terminus/ui-pipes":"^1.0.7","@terminus/ui-spacing":"^1.0.9","@terminus/ui-tooltip":"^1.0.9","@terminus/ui-utilities":"^1.0.7","@terminus/ui-validation-messages":"^1.0.11","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","date-fns":"2.14.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-regular-svg-icons":"5.14.0","@fortawesome/pro-solid-svg-icons":"5.14.0"},"readme":"<h1>File Upload</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nA drag'n'drop file upload component.\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n**Table of Contents**\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [`TsSelectedFile`](#tsselectedfile)\n  - [File types](#file-types)\n  - [File size](#file-size)\n  - [Image dimensions](#image-dimensions)\n  - [Image ratio constraints](#image-ratio-constraints)\n  - [Clearing a file](#clearing-a-file)\n  - [Showing upload progress](#showing-upload-progress)\n  - [Enable multiple file selection](#enable-multiple-file-selection)\n  - [Handle multiple files](#handle-multiple-files)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-file-upload`\n- `@terminus/ui-icon`\n- `@terminus/ui-icon-button`\n- `@terminus/ui-pipes`\n- `@terminus/ui-spacing`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-file-upload\n```\n\n### Modules that need to be in NgModule\n\n- `TsFileUploadModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nCollect the selected file via the `selected` event:\n\n```html\n<ts-file-upload (selected)=\"handleFile($event)\"></ts-file-upload>\n```\n\n```typescript\n@import { TsSelectedFile } from '@terminus/ui-file-upload';\n\n...\n\n  handleFile(e: TsSelectedFile) {\n    // e.fileContents is the selected file\n  }\n```\n\n### `TsSelectedFile`\n\nThe `TsSelectedFile` instance will have several items available:\n\n```\nfile.fileContents // string\nfile.height       // number (will be 0 for CSVs)\nfile.isCSV        // boolean\nfile.isImage      // boolean\nfile.isValid      // boolean\nfile.mimeType     // string\nfile.name         // string\nfile.size         // number\nfile.validations  // TsFileValidations\nfile.width        // number (will be 0 for CSVs)\n```\n\n### File types\n\nAccepted file types can be set by the `accept` input:\n\n```typescript\n@import { TsFileAcceptedMimeTypes } from '@terminus/ui-file-upload';\n\n...\n\n  myMimeTypes: TsFileAcceptedMimeTypes = ['image/png', 'image/jpg'];\n```\n\n```html\n<ts-file-upload [accept]=\"myMimeTypes\"></ts-file-upload>\n```\n\nIf a file is loaded with the incorrect MIME/type, a validation message will appear below the file input.\n\nThe default types can be found by importing `TS_ACCEPTED_MIME_TYPES`;\n\n### File size\n\nSet a maximum size for files in kilobytes:\n\n```html\n<ts-file-upload [maximumKilobytesPerFile]=\"{{ 6 * 1024 }}\"></ts-file-upload>\n```\n\nIf a file is loaded that exceeds the size limit, a validation message will appear below the file input.\n\n### Image dimensions\n\nImage dimension validation is controlled by an array of constraints passed to the component.\n\nA single constraint has this structure:\n\n```typescript\ninterface TsFileImageDimensionContraint {\n  height: {\n    min: number;\n    max: number;\n  };\n  width: {\n    min: number;\n    max: number;\n  };\n}\n```\n\nFor fixed image dimensions set the min and max to the same number. The component will trim ranges before exposing to the user:\n\n```javascript\n// Example:\n{\n  height: {\n    min: 100;\n    max: 100;\n  };\n  width: {\n    min: 300;\n    max: 300;\n  };\n}\n// Will be displayed as: `300x100`\n\n{\n  height: {\n    min: 50;\n    max: 100;\n  };\n  width: {\n    min: 200;\n    max: 300;\n  };\n}\n// Will be displayed as: `200-300x50-100`\n```\n\nExample:\n\n```typescript\n@import { TsFileImageDimensionConstraints } from '@terminus/ui-file-upload';\n\n...\n\n  myDimensionConstraints: TsFileImageDimensionConstraints = [\n    {\n      height: {\n        min: 72,\n        max: 72,\n      },\n      width: {\n        min: 72,\n        max: 72,\n      },\n    },\n    {\n      height: {\n        min: 400,\n        max: 500,\n      },\n      width: {\n        min: 700,\n        max: 800,\n      },\n    },\n  ];\n```\n\n```html\n<ts-file-upload [dimensionConstraints]=\"myDimensionConstraints\"></ts-file-upload>\n```\n\nIf an image is selected that does not meet the dimension constraints, a validation message will appear below the file input.\n\n### Image ratio constraints\n\nImage ratio validation is controlled by an array of constraints passed to the component.\n\n```html\n<ts-file-upload [ratioConstraints]='[\"1:2\", \"3:4\"]'></ts-file-upload>\n```\n\nIf a file is loaded that do not meet any ratio constraints, a validation message will appear below the file input.\n\n### Clearing a file\n\nThe user can clear the selected file by clicking the `X` button next to the filename. An event will be emitted when this occurs:\n\n```html\n<ts-file-upload (cleared)=\"fileWasCleared()\"></ts-file-upload>\n```\n\n```typescript\n...\n\n  fileWasCleared() {\n    ...\n  }\n```\n\n### Showing upload progress\n\nThe progress of an upload can be reflected in the UI by passing a number between 0 and 100 to the `progress` input:\n\n```html\n<ts-file-upload [progress]=\"myProgress\"></ts-file-upload>\n```\n\n```typescript\n...\n  myProgress = 0;\n\n  // For example only. In a real scenario the progress value would be coming from the API.\n  // Start a counter to fake the upload progress value\n  startProgress() {\n    this.myProgress = 0;\n    const counting = setInterval(() => {\n      if (this.myProgress < 100) {\n        this.myProgress++;\n      } else {\n        clearInterval(counting);\n      }\n    }, 14);\n  }\n```\n\n### Enable multiple file selection\n\nSet `multiple` to `true`:\n\n```html\n<ts-file-upload [multiple]=\"true\"></ts-file-upload>\n```\n\n### Handle multiple files\n\nCurrently this component does not natively handle multiple file uploads (this support is planned for the future). There are ways to 'fake'\nthat functionality in a way.\n\nAn example:\n\n```html\n<!--\n  Here is the original file upload. Initially this is all the user sees.\n  When multiple files are selected, they will be emitted through this event:\n-->\n<ts-file-upload (selectedMultiple)=\"selectedMultiple($event)\"></ts-file-upload>\n\n<!-- Loop over the files that were collected from the selectedMultiple event -->\n<ng-container *ngFor=\"let v of files\">\n  <ts-file-upload\n    <!-- Only show this upload if the file still exists in our files collection: -->\n    *ngIf=\"fileExists(v.id)\"\n    <!-- Seed the file input with the file from our collection: -->\n    [seedFile]=\"v.file\"\n  ></ts-file-upload>\n</ng-container>\n```\n\n```typescript\n...\n\n  // We'll store the selected files here for reference:\n  files: {id: number; file: File}[] = [];\n\n  // Collect the selected files from the event and store them for reference:\n  selectedMultiple(e: File[]) {\n    let index = -1;\n\n    this.files = e.map((f) => {\n      index = index + 1;\n      return {\n        id: index,\n        file: f,\n      };\n    });\n  }\n\n  // Remove the correct file when the user clicks the clear button\n  clearFile(id: number): void {\n    if (!this.files || this.files.length < 1) {\n      return;\n    }\n\n    this.files = this.files.filter((obj) => {\n      return obj.id !== id;\n    });\n  }\n\n  // Helper function to determine when to hide one of the file upload components:\n  public fileExists(id: number): boolean {\n    if (!this.files || this.files.length < 1) {\n      return false;\n    }\n    const found = this.files.find((v) => {\n      return v.id === id;\n    });\n\n    return found ? true : false;\n  }\n```\n\n\n<!-- Links -->\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-file-upload.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-file-upload\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.js\n","readmeFilename":"README.md","description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@2.0.6","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-ahOPwSeSC8EKKpyzSqn6evDHMFjIXn7bhSO/gJmGf9rXyWjEdFrY/Zj9ktU9NaLD/2MoRhZ3Ebb3bnD0/X78Eg==","shasum":"49b4d2fff51a9270a93c9688afd6b4e9eeb8435c","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-2.0.6.tgz","fileCount":71,"unpackedSize":738710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJCQECRA9TVsSAnZWagAAWUYP/2FjipVP4QITrzObJ/vL\nGckaOlYR/dNTc8pkHgTCkKNVog366Y4NqBB92o8T6w3CJSR3qqik31wdBubF\nv0Sv0x7y9pxRkGyj1dWb/bJ/6Xzs3OodaXZYadyWmUcMmhOMXakilr2PPpVZ\nG/3qrceZZWOEUBjnq5Ag3US62GK+3ZQ3ACv/5ChRL/vS67zol351TDpheAm7\ndzz/Nb1q3S7lY6VqBsD7oBb2zGL5ioIO9lIesfdesJ8gPunz/8mVTucFYzYw\nYrt9UauOMytxHaXKF4tGXNnzwrTcGKN6V1Ix51e8jZYqhnu860/Lhv3jY9b2\nw+RvUh8kpNT1avf9l8SzIPsntAvJNz6Om7i/exnzlchx/R5EMnYSYWUMp1rF\nobWGuuJOuEDi9lKTfsuY6XWrNYLjhw1l5djtalNi95Zq3AbQFX3XBH3RO1ik\nMMMxXLEdH4z+TZIF+IKpuaV6KGLRfBBjxsXBcFsXB+SN+oH0Z39XD7f7kO6P\nGkmoIEIJoYDLfH94ktBTGx7yM079YSaAa6rIgKqKjYvexZj1EcHM0WLRT37P\nuEoYczWJwXRQuF3jO6lkbQ0cnof7jXkHjn+kPJJ+4350O2Bestcvl0zKG4SO\nUkKshlVfwUJelDI9Tf9Bn2xijhRKH33rr4OPVNlP3rBmp/QyUrq/XItEpwQg\ncRsN\r\n=zZVU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF1zjj9xfg2lBl/Z5ThHxMYLFKAPPN1ubnZGX8gsXs6EAiEAzRfO1yyyiXJHk8oNlKZKxqcN6EvFDtsJKkBvonlIa4Q="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_2.0.6_1596204035872_0.6150286001030638"},"_hasShrinkwrap":false},"2.0.7":{"name":"@terminus/ui-file-upload","version":"2.0.7","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-button":"^2.0.0","@terminus/ui-icon":"^2.0.0","@terminus/ui-icon-button":"^2.0.0","@terminus/ui-pipes":"^1.0.7","@terminus/ui-spacing":"^1.0.9","@terminus/ui-tooltip":"^1.0.9","@terminus/ui-utilities":"^1.0.7","@terminus/ui-validation-messages":"^1.0.11","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","date-fns":"2.15.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-regular-svg-icons":"5.14.0","@fortawesome/pro-solid-svg-icons":"5.14.0"},"readme":"<h1>File Upload</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nA drag'n'drop file upload component.\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n**Table of Contents**\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [`TsSelectedFile`](#tsselectedfile)\n  - [File types](#file-types)\n  - [File size](#file-size)\n  - [Image dimensions](#image-dimensions)\n  - [Image ratio constraints](#image-ratio-constraints)\n  - [Clearing a file](#clearing-a-file)\n  - [Showing upload progress](#showing-upload-progress)\n  - [Enable multiple file selection](#enable-multiple-file-selection)\n  - [Handle multiple files](#handle-multiple-files)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-file-upload`\n- `@terminus/ui-icon`\n- `@terminus/ui-icon-button`\n- `@terminus/ui-pipes`\n- `@terminus/ui-spacing`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-file-upload\n```\n\n### Modules that need to be in NgModule\n\n- `TsFileUploadModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nCollect the selected file via the `selected` event:\n\n```html\n<ts-file-upload (selected)=\"handleFile($event)\"></ts-file-upload>\n```\n\n```typescript\n@import { TsSelectedFile } from '@terminus/ui-file-upload';\n\n...\n\n  handleFile(e: TsSelectedFile) {\n    // e.fileContents is the selected file\n  }\n```\n\n### `TsSelectedFile`\n\nThe `TsSelectedFile` instance will have several items available:\n\n```\nfile.fileContents // string\nfile.height       // number (will be 0 for CSVs)\nfile.isCSV        // boolean\nfile.isImage      // boolean\nfile.isValid      // boolean\nfile.mimeType     // string\nfile.name         // string\nfile.size         // number\nfile.validations  // TsFileValidations\nfile.width        // number (will be 0 for CSVs)\n```\n\n### File types\n\nAccepted file types can be set by the `accept` input:\n\n```typescript\n@import { TsFileAcceptedMimeTypes } from '@terminus/ui-file-upload';\n\n...\n\n  myMimeTypes: TsFileAcceptedMimeTypes = ['image/png', 'image/jpg'];\n```\n\n```html\n<ts-file-upload [accept]=\"myMimeTypes\"></ts-file-upload>\n```\n\nIf a file is loaded with the incorrect MIME/type, a validation message will appear below the file input.\n\nThe default types can be found by importing `TS_ACCEPTED_MIME_TYPES`;\n\n### File size\n\nSet a maximum size for files in kilobytes:\n\n```html\n<ts-file-upload [maximumKilobytesPerFile]=\"{{ 6 * 1024 }}\"></ts-file-upload>\n```\n\nIf a file is loaded that exceeds the size limit, a validation message will appear below the file input.\n\n### Image dimensions\n\nImage dimension validation is controlled by an array of constraints passed to the component.\n\nA single constraint has this structure:\n\n```typescript\ninterface TsFileImageDimensionContraint {\n  height: {\n    min: number;\n    max: number;\n  };\n  width: {\n    min: number;\n    max: number;\n  };\n}\n```\n\nFor fixed image dimensions set the min and max to the same number. The component will trim ranges before exposing to the user:\n\n```javascript\n// Example:\n{\n  height: {\n    min: 100;\n    max: 100;\n  };\n  width: {\n    min: 300;\n    max: 300;\n  };\n}\n// Will be displayed as: `300x100`\n\n{\n  height: {\n    min: 50;\n    max: 100;\n  };\n  width: {\n    min: 200;\n    max: 300;\n  };\n}\n// Will be displayed as: `200-300x50-100`\n```\n\nExample:\n\n```typescript\n@import { TsFileImageDimensionConstraints } from '@terminus/ui-file-upload';\n\n...\n\n  myDimensionConstraints: TsFileImageDimensionConstraints = [\n    {\n      height: {\n        min: 72,\n        max: 72,\n      },\n      width: {\n        min: 72,\n        max: 72,\n      },\n    },\n    {\n      height: {\n        min: 400,\n        max: 500,\n      },\n      width: {\n        min: 700,\n        max: 800,\n      },\n    },\n  ];\n```\n\n```html\n<ts-file-upload [dimensionConstraints]=\"myDimensionConstraints\"></ts-file-upload>\n```\n\nIf an image is selected that does not meet the dimension constraints, a validation message will appear below the file input.\n\n### Image ratio constraints\n\nImage ratio validation is controlled by an array of constraints passed to the component.\n\n```html\n<ts-file-upload [ratioConstraints]='[\"1:2\", \"3:4\"]'></ts-file-upload>\n```\n\nIf a file is loaded that do not meet any ratio constraints, a validation message will appear below the file input.\n\n### Clearing a file\n\nThe user can clear the selected file by clicking the `X` button next to the filename. An event will be emitted when this occurs:\n\n```html\n<ts-file-upload (cleared)=\"fileWasCleared()\"></ts-file-upload>\n```\n\n```typescript\n...\n\n  fileWasCleared() {\n    ...\n  }\n```\n\n### Showing upload progress\n\nThe progress of an upload can be reflected in the UI by passing a number between 0 and 100 to the `progress` input:\n\n```html\n<ts-file-upload [progress]=\"myProgress\"></ts-file-upload>\n```\n\n```typescript\n...\n  myProgress = 0;\n\n  // For example only. In a real scenario the progress value would be coming from the API.\n  // Start a counter to fake the upload progress value\n  startProgress() {\n    this.myProgress = 0;\n    const counting = setInterval(() => {\n      if (this.myProgress < 100) {\n        this.myProgress++;\n      } else {\n        clearInterval(counting);\n      }\n    }, 14);\n  }\n```\n\n### Enable multiple file selection\n\nSet `multiple` to `true`:\n\n```html\n<ts-file-upload [multiple]=\"true\"></ts-file-upload>\n```\n\n### Handle multiple files\n\nCurrently this component does not natively handle multiple file uploads (this support is planned for the future). There are ways to 'fake'\nthat functionality in a way.\n\nAn example:\n\n```html\n<!--\n  Here is the original file upload. Initially this is all the user sees.\n  When multiple files are selected, they will be emitted through this event:\n-->\n<ts-file-upload (selectedMultiple)=\"selectedMultiple($event)\"></ts-file-upload>\n\n<!-- Loop over the files that were collected from the selectedMultiple event -->\n<ng-container *ngFor=\"let v of files\">\n  <ts-file-upload\n    <!-- Only show this upload if the file still exists in our files collection: -->\n    *ngIf=\"fileExists(v.id)\"\n    <!-- Seed the file input with the file from our collection: -->\n    [seedFile]=\"v.file\"\n  ></ts-file-upload>\n</ng-container>\n```\n\n```typescript\n...\n\n  // We'll store the selected files here for reference:\n  files: {id: number; file: File}[] = [];\n\n  // Collect the selected files from the event and store them for reference:\n  selectedMultiple(e: File[]) {\n    let index = -1;\n\n    this.files = e.map((f) => {\n      index = index + 1;\n      return {\n        id: index,\n        file: f,\n      };\n    });\n  }\n\n  // Remove the correct file when the user clicks the clear button\n  clearFile(id: number): void {\n    if (!this.files || this.files.length < 1) {\n      return;\n    }\n\n    this.files = this.files.filter((obj) => {\n      return obj.id !== id;\n    });\n  }\n\n  // Helper function to determine when to hide one of the file upload components:\n  public fileExists(id: number): boolean {\n    if (!this.files || this.files.length < 1) {\n      return false;\n    }\n    const found = this.files.find((v) => {\n      return v.id === id;\n    });\n\n    return found ? true : false;\n  }\n```\n\n\n<!-- Links -->\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-file-upload.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-file-upload\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.js\n","readmeFilename":"README.md","description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@2.0.7","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-y9Vhx2W1ZD2qpDkKK+0YOBn1B9o4P7EQlXnvsRGeVX2dBzmYYTHWUAO+ceE4pJjvsW+FHJ3uCjQjvlqN5qJh9g==","shasum":"895a7bfddfd280cde75c41632395ab5146fd1db3","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-2.0.7.tgz","fileCount":71,"unpackedSize":739460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKwSDCRA9TVsSAnZWagAAWEAP/273okMzNqjIHnSprbLF\nPd0I8O7G6ZHxsIHJYjixM24aAJwtd3jj3tkfyo9XdWayFv7ECdGIc12vAX1F\nrHq8j3scKhrZaE4Zsmb//6QobxuNxE02brgt5ML81FqFZ+UuGH80jKsl8JSc\nMLkGK7Rffs/2h+MExJ1JF7QCya7+aK1K7zZ3IT4YdOIgLy/I0g7SFdKHymxK\nsZHU9HdkvkgTaP0mjPWnkLqoFpzcg6EhkmC6byuv2JQ2AtKd633YtBTXBY0j\nVKsKNiDaBAFWJ4u7a3M2U6JfG3iqRlJmGA1LgPKuFoHEQWJf+dZfHugEiLDq\nbBgEJI2MzdAPejfyuijDpwhcIvbKiKvUcinVKPIEvAiI4tg6C9uEBXYRTsoJ\nxhes4hZZG2i2mj5Ywv4ONnucmJCv5JdThRnd7sB+11xrAw7StRAl8yeeUbjC\n0nfFFdGaSObenyDt+lsmhOwBsyOoT0B09VLJPVAtdj9+ClhGx0S9d1DwKil2\nOi2XbNcO+8LEKGM5nc2igHnCvSYJnGLzAJ2JA/fBquV1iLfr46D7RbkcKYEx\nnDsTR5cDvi1jhuEb91EXOiGPeycK5GjX4zmEL/d4bpDI0+2O0O+X3Setchqs\nnZaJoh5OX2W7ARTYmmacPm2F0KxDJ4HgZ5EcTZOs6ACx998MdBDSncCpKYLm\nO7F5\r\n=/cXY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+r5+HKrZwsJtsmaLkx6Ukyrn7BtoWrgag1gRhzosMCwIgOTu1JrXwcflrYH80RR+ZH41gU3O5g1VkrXcauzDLrE0="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_2.0.7_1596654723195_0.9416385756464898"},"_hasShrinkwrap":false},"2.0.8":{"name":"@terminus/ui-file-upload","version":"2.0.8","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-button":"^2.0.0","@terminus/ui-icon":"^2.0.0","@terminus/ui-icon-button":"^2.0.0","@terminus/ui-pipes":"^1.0.7","@terminus/ui-spacing":"^1.0.9","@terminus/ui-tooltip":"^1.0.9","@terminus/ui-utilities":"^1.0.7","@terminus/ui-validation-messages":"^1.0.11","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","date-fns":"2.15.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-regular-svg-icons":"5.14.0","@fortawesome/pro-solid-svg-icons":"5.14.0"},"description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@2.0.8","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-gYJdvzdyI7r6xwkjevE2r2A78dUd0WvWQw3ChqpgsAf4dmYBUBfrBeazG7BOCb4Ip5emc6d5LFY019eV+AcgLg==","shasum":"86d2e4e2ff323d87b174d0a9c08c5fc7072b88c8","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-2.0.8.tgz","fileCount":71,"unpackedSize":739762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLAzJCRA9TVsSAnZWagAAFccP/283TocnDNQL8x+RKlu0\nsJkEQ+X6GMsilPllqr0RYNfEmoQvIomx40gat1gvjyW+rCkdgObjgVvnwhPv\nLaNFYhcnRUvQc/4B9mexnBTOg6Q5IHSJg7QU8OmW3XZAXr+VQjktMPzR/c/r\nfWJe3jKD+5zi4b9X5wXOQG4URA+HDTG9UBkzwj0XW7/U5itMcQ6YQiWAm1OV\nkQXjBaHtGAK45pxOwclhUQRyQt7zBy+VBx4mgNWBQc3yDGGdQ443mwNyLs+k\nsFl/wGFxAIC+o9FwYw+msLt465w71cDgKoCEnr50rtdFWFNUDWKJ1cV11v5B\nNGJS2ITQpam+XOx6cJZN9zB+8QCic1D1x3cCONLsG4988zjT24DTWzuv/e2A\nfqL1urAFlABUPcV4ZVNSB7Y1G1vQFQIa9OYQf7h2bmCtH3AekBTxiYnxiTjM\ncJuINdjr7p5aK5z6sglGVL3XPUv7nEr3+wnj9Jqncy49p6k5/BkwKUN5RuWU\ngsUPqcHdWmCs3/ouUchDlHigRM3+nZp+RqdWbyckyxff7YZ8OeqCc91IaJQ5\nFs7ZuMTvXkYtWpE/5yYYu7OtnlAt3Ua+10j54agdHVT9JpoJfaL9uXd9vcnq\n9UxSyJzo1aKQJI4azWFiAa1a2kz0arcrbfZPDMpGQkvhXG9oHgCng1ZmFzIQ\n5OmD\r\n=Nql+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJHDBz5cK7xSxzwg2RzicAmp255ptepq1+sjz0r85YDAIgW55A0g/Qmi/dnTRLsTEYs9bGDvV0Xg/tX7uhhllcqWI="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_2.0.8_1596722377152_0.42270505453561213"},"_hasShrinkwrap":false},"2.0.9":{"name":"@terminus/ui-file-upload","version":"2.0.9","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-button":"^2.0.7","@terminus/ui-icon":"^2.0.5","@terminus/ui-icon-button":"^2.0.5","@terminus/ui-pipes":"^1.0.9","@terminus/ui-spacing":"^1.0.11","@terminus/ui-tooltip":"^1.0.13","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","date-fns":"2.15.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-regular-svg-icons":"5.14.0","@fortawesome/pro-solid-svg-icons":"5.14.0"},"description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@2.0.9","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-NZHI5x26SlG2hXCkEADwR5rs691ol+mfHAqrhpQuRRgweSWXxTI31ZnNUh5azBaS1n3MquItS/BR6GVbRhaJOA==","shasum":"9e1b4625d92086ec9cb09156899676f24a373fee","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-2.0.9.tgz","fileCount":71,"unpackedSize":739978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMXPKCRA9TVsSAnZWagAAKLUQAI7YW0eVxwaLCVnQw3mb\nkW+cJufXHkW3uNEbT6AXVE+OBNQo3eK/y3+ulXIkSckBGjnraZ1YXJ+gwBs4\nMftbCC/QoLWG/pshw9WIVmwlqB9tn2nwYBEKikF3deM1XEwvEgioYQ2KSO5C\ngHLKABwzRWt+kuyEubtg2/FDNHuSJwDbkey7GURBzAqr04ePgo6R1z+AbFeJ\neMrCR9XxWgrGeKmx7TVy80DvIOnLOyuCod339oMDnNVChcn1qcXpiwxybb4v\nipHLZDBGIw+LNbE9WlfoQQ75QUUokuhuoHjJYRbbzF9ugqSsGfClSpQEP4Uf\nh98NmulGJDJn2S7zq3Df2pHAgDPaD/UBA0x+amLX0X/KLGYq2b97YCUzG7L/\n1KwV3olXz6gTIwrCFlFBN2qlhksMq45AnjH4UATGicifuADLzf0Hu7uleR/I\niC9Mt3E9enbivWvmr9mymB7KFe4fSPdAcugrwaVgJygthP/NBTTxHofr/Iq0\n5OeFGGaj4AXb4yDw75mjhOHrxtb9U9v7n+GUsX3cgWbHuiE3ATG+9xSIcEl+\nJdWnIDfmKuWcSHdVj12C+8LtAO+B1IGLVmdDzqIF+TD+a+fOS2YuPnS7suXi\n7hCkObHBbLC/0/kKkJvLw1V9Iqja8+KObjg1QsbQXUkRZHqbTuVpa5u5tqnA\nllBs\r\n=eERc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFcjkW6219BoqSjA+j9PrA/vHsi2q4LLGxFNjEQkGWWfAiEA8+Myzv1o8eIWxTMwlrAdkjvxKdanc1p20OHI0d3tAxc="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_2.0.9_1597076426217_0.24416625470962505"},"_hasShrinkwrap":false},"2.0.10":{"name":"@terminus/ui-file-upload","version":"2.0.10","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-button":"^2.0.7","@terminus/ui-icon":"^2.0.5","@terminus/ui-icon-button":"^2.0.5","@terminus/ui-pipes":"^1.0.9","@terminus/ui-spacing":"^1.0.11","@terminus/ui-tooltip":"^1.0.13","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","date-fns":"2.15.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-regular-svg-icons":"5.14.0","@fortawesome/pro-solid-svg-icons":"5.14.0"},"readme":"<h1>File Upload</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nA drag'n'drop file upload component.\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [`TsSelectedFile`](#tsselectedfile)\n  - [File types](#file-types)\n  - [File size](#file-size)\n  - [Image dimensions](#image-dimensions)\n  - [Image ratio constraints](#image-ratio-constraints)\n  - [Clearing a file](#clearing-a-file)\n  - [Showing upload progress](#showing-upload-progress)\n  - [Enable multiple file selection](#enable-multiple-file-selection)\n  - [Handle multiple files](#handle-multiple-files)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-file-upload`\n- `@terminus/ui-icon`\n- `@terminus/ui-icon-button`\n- `@terminus/ui-pipes`\n- `@terminus/ui-spacing`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-file-upload\n```\n\n### Modules that need to be in NgModule\n\n- `TsFileUploadModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nCollect the selected file via the `selected` event:\n\n```html\n<ts-file-upload (selected)=\"handleFile($event)\"></ts-file-upload>\n```\n\n```typescript\n@import { TsSelectedFile } from '@terminus/ui-file-upload';\n\n...\n\n  handleFile(e: TsSelectedFile) {\n    // e.fileContents is the selected file\n  }\n```\n\n### `TsSelectedFile`\n\nThe `TsSelectedFile` instance will have several items available:\n\n```typescript\nfile.fileContents // string\nfile.height       // number (will be 0 for CSVs)\nfile.isCSV        // boolean\nfile.isImage      // boolean\nfile.isValid      // boolean\nfile.mimeType     // string\nfile.name         // string\nfile.size         // number\nfile.validations  // TsFileValidations\nfile.width        // number (will be 0 for CSVs)\n```\n\n### File types\n\nAccepted file types can be set by the `accept` input:\n\n```typescript\n@import { TsFileAcceptedMimeTypes } from '@terminus/ui-file-upload';\n\n...\n\n  myMimeTypes: TsFileAcceptedMimeTypes = ['image/png', 'image/jpg'];\n```\n\n```html\n<ts-file-upload [accept]=\"myMimeTypes\"></ts-file-upload>\n```\n\nIf a file is loaded with the incorrect MIME/type, a validation message will appear below the file input.\n\nThe default types can be found by importing `TS_ACCEPTED_MIME_TYPES`;\n\n### File size\n\nSet a maximum size for files in kilobytes:\n\n```html\n<ts-file-upload [maximumKilobytesPerFile]=\"{{ 6 * 1024 }}\"></ts-file-upload>\n```\n\nIf a file is loaded that exceeds the size limit, a validation message will appear below the file input.\n\n### Image dimensions\n\nImage dimension validation is controlled by an array of constraints passed to the component.\n\nA single constraint has this structure:\n\n```typescript\ninterface TsFileImageDimensionContraint {\n  height: {\n    min: number;\n    max: number;\n  };\n  width: {\n    min: number;\n    max: number;\n  };\n}\n```\n\nFor fixed image dimensions set the min and max to the same number. The component will trim ranges before exposing to the user:\n\n```javascript\n// Example:\n{\n  height: {\n    min: 100;\n    max: 100;\n  };\n  width: {\n    min: 300;\n    max: 300;\n  };\n}\n// Will be displayed as: `300x100`\n\n{\n  height: {\n    min: 50;\n    max: 100;\n  };\n  width: {\n    min: 200;\n    max: 300;\n  };\n}\n// Will be displayed as: `200-300x50-100`\n```\n\nExample:\n\n```typescript\n@import { TsFileImageDimensionConstraints } from '@terminus/ui-file-upload';\n\n...\n\n  myDimensionConstraints: TsFileImageDimensionConstraints = [\n    {\n      height: {\n        min: 72,\n        max: 72,\n      },\n      width: {\n        min: 72,\n        max: 72,\n      },\n    },\n    {\n      height: {\n        min: 400,\n        max: 500,\n      },\n      width: {\n        min: 700,\n        max: 800,\n      },\n    },\n  ];\n```\n\n```html\n<ts-file-upload [dimensionConstraints]=\"myDimensionConstraints\"></ts-file-upload>\n```\n\nIf an image is selected that does not meet the dimension constraints, a validation message will appear below the file input.\n\n### Image ratio constraints\n\nImage ratio validation is controlled by an array of constraints passed to the component.\n\n```html\n<ts-file-upload [ratioConstraints]='[\"1:2\", \"3:4\"]'></ts-file-upload>\n```\n\nIf a file is loaded that do not meet any ratio constraints, a validation message will appear below the file input.\n\n### Clearing a file\n\nThe user can clear the selected file by clicking the `X` button next to the filename. An event will be emitted when this occurs:\n\n```html\n<ts-file-upload (cleared)=\"fileWasCleared()\"></ts-file-upload>\n```\n\n```typescript\n...\n\n  fileWasCleared() {\n    ...\n  }\n```\n\n### Showing upload progress\n\nThe progress of an upload can be reflected in the UI by passing a number between 0 and 100 to the `progress` input:\n\n```html\n<ts-file-upload [progress]=\"myProgress\"></ts-file-upload>\n```\n\n```typescript\n...\n  myProgress = 0;\n\n  // For example only. In a real scenario the progress value would be coming from the API.\n  // Start a counter to fake the upload progress value\n  startProgress() {\n    this.myProgress = 0;\n    const counting = setInterval(() => {\n      if (this.myProgress < 100) {\n        this.myProgress++;\n      } else {\n        clearInterval(counting);\n      }\n    }, 14);\n  }\n```\n\n### Enable multiple file selection\n\nSet `multiple` to `true`:\n\n```html\n<ts-file-upload [multiple]=\"true\"></ts-file-upload>\n```\n\n### Handle multiple files\n\nCurrently this component does not natively handle multiple file uploads (this support is planned for the future). There are ways to 'fake'\nthat functionality in a way.\n\nAn example:\n\n```html\n<!--\n  Here is the original file upload. Initially this is all the user sees.\n  When multiple files are selected, they will be emitted through this event:\n-->\n<ts-file-upload (selectedMultiple)=\"selectedMultiple($event)\"></ts-file-upload>\n\n<!-- Loop over the files that were collected from the selectedMultiple event -->\n<ng-container *ngFor=\"let v of files\">\n  <ts-file-upload\n    <!-- Only show this upload if the file still exists in our files collection: -->\n    *ngIf=\"fileExists(v.id)\"\n    <!-- Seed the file input with the file from our collection: -->\n    [seedFile]=\"v.file\"\n  ></ts-file-upload>\n</ng-container>\n```\n\n```typescript\n...\n\n  // We'll store the selected files here for reference:\n  files: {id: number; file: File}[] = [];\n\n  // Collect the selected files from the event and store them for reference:\n  selectedMultiple(e: File[]) {\n    let index = -1;\n\n    this.files = e.map((f) => {\n      index = index + 1;\n      return {\n        id: index,\n        file: f,\n      };\n    });\n  }\n\n  // Remove the correct file when the user clicks the clear button\n  clearFile(id: number): void {\n    if (!this.files || this.files.length < 1) {\n      return;\n    }\n\n    this.files = this.files.filter((obj) => {\n      return obj.id !== id;\n    });\n  }\n\n  // Helper function to determine when to hide one of the file upload components:\n  public fileExists(id: number): boolean {\n    if (!this.files || this.files.length < 1) {\n      return false;\n    }\n    const found = this.files.find((v) => {\n      return v.id === id;\n    });\n\n    return found ? true : false;\n  }\n```\n\n<!-- Links -->\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-file-upload.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-file-upload\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.js\n","readmeFilename":"README.md","description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@2.0.10","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-TkVJh6S82+nV5PpYeIOqOsCqOv/Kmwh8/rt5+2/rdvHcHcrKzQsg/RBkj0zkDOpE7SsCw990ySyk3M6D1gCsKA==","shasum":"0203a62b7d8c32d339250425a44d07705d2af70c","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-2.0.10.tgz","fileCount":71,"unpackedSize":740132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNq4SCRA9TVsSAnZWagAAoAAQAKLfmhIQ1vztCVEKcUbQ\nWJKPg0Sv5aSxRqUfeAijZBAHi6Xmw9/GYMe6b3UZdzSae3tXtAdkg9bRYNnY\nqs9GJA5VN8/qUZQ8vZYyyCwihLDcVohS7vwkPHjWcQd0OuQbUT9+go5tkJeT\n9E50gkzkref/7eCJ4MZIH6IL14PI8v6EouVdjo24F+sO2svK1Jx4OlKP7Iu1\nItRhAjfPrsfzgTXeYUimiKN7MglfSxPRKdepwy19TqEf3p0xX0EyheT8hkjM\npKxf8pSmUDBgZBs3TMqkKEOSN79yMlk+crhks2bdSxqHQ9H8BU0J5vwsKGCA\nA/i/zfd2MBpiQkMXVQQPeufdRq2o3bJU6PxzLylgCj0vyl02Lz91+Qzwc/VG\nZjtoEvKsgfkFvzO4jEgWUI0VxjxxF/72yIXtKuA0GI8LUIgZd3Gs9W56hDWd\nppVBtncRi3NilF5C1Ohohg8bdUKiXruGS6upmjbbU95JgCR54pYdbO/399wV\ntYeZmufobc8ab/OCLwl2FbWSpJAnEsvldZ0n6lQaQYyzGPO14wlyoXvwXUvN\nN9b3iG1aXTH1NZjjgK5sJV9wmZ4beGpEoyKd5rmzQ946jqMVOIvoIx/3vxq/\nhfYlXf+H2/dF6vG9hdE8joAJNa8VtO1XRnhzYevRakU1cJBrbfjp7LfSuSo/\nfxxm\r\n=XUD8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICVfsoxAH2kSavmFARnBFxMSsapyR/O8OHK8j9+DqIXYAiAHBlhNzKt/7zhAhMLiRZTRYuBWZY9QmPV3yH7IWsyMBQ=="}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_2.0.10_1597419026306_0.18987859358492054"},"_hasShrinkwrap":false},"2.0.11":{"name":"@terminus/ui-file-upload","version":"2.0.11","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.1.0","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-button":"^2.0.7","@terminus/ui-icon":"^2.0.5","@terminus/ui-icon-button":"^2.0.5","@terminus/ui-pipes":"^1.0.9","@terminus/ui-spacing":"^1.0.11","@terminus/ui-tooltip":"^1.0.13","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","date-fns":"2.15.0","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0"},"readme":"<h1>File Upload</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nA drag'n'drop file upload component.\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [`TsSelectedFile`](#tsselectedfile)\n  - [File types](#file-types)\n  - [File size](#file-size)\n  - [Image dimensions](#image-dimensions)\n  - [Image ratio constraints](#image-ratio-constraints)\n  - [Clearing a file](#clearing-a-file)\n  - [Showing upload progress](#showing-upload-progress)\n  - [Enable multiple file selection](#enable-multiple-file-selection)\n  - [Handle multiple files](#handle-multiple-files)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-file-upload`\n- `@terminus/ui-icon`\n- `@terminus/ui-icon-button`\n- `@terminus/ui-pipes`\n- `@terminus/ui-spacing`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-file-upload\n```\n\n### Modules that need to be in NgModule\n\n- `TsFileUploadModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nCollect the selected file via the `selected` event:\n\n```html\n<ts-file-upload (selected)=\"handleFile($event)\"></ts-file-upload>\n```\n\n```typescript\n@import { TsSelectedFile } from '@terminus/ui-file-upload';\n\n...\n\n  handleFile(e: TsSelectedFile) {\n    // e.fileContents is the selected file\n  }\n```\n\n### `TsSelectedFile`\n\nThe `TsSelectedFile` instance will have several items available:\n\n```typescript\nfile.fileContents // string\nfile.height       // number (will be 0 for CSVs)\nfile.isCSV        // boolean\nfile.isImage      // boolean\nfile.isValid      // boolean\nfile.mimeType     // string\nfile.name         // string\nfile.size         // number\nfile.validations  // TsFileValidations\nfile.width        // number (will be 0 for CSVs)\n```\n\n### File types\n\nAccepted file types can be set by the `accept` input:\n\n```typescript\n@import { TsFileAcceptedMimeTypes } from '@terminus/ui-file-upload';\n\n...\n\n  myMimeTypes: TsFileAcceptedMimeTypes = ['image/png', 'image/jpg'];\n```\n\n```html\n<ts-file-upload [accept]=\"myMimeTypes\"></ts-file-upload>\n```\n\nIf a file is loaded with the incorrect MIME/type, a validation message will appear below the file input.\n\nThe default types can be found by importing `TS_ACCEPTED_MIME_TYPES`;\n\n### File size\n\nSet a maximum size for files in kilobytes:\n\n```html\n<ts-file-upload [maximumKilobytesPerFile]=\"{{ 6 * 1024 }}\"></ts-file-upload>\n```\n\nIf a file is loaded that exceeds the size limit, a validation message will appear below the file input.\n\n### Image dimensions\n\nImage dimension validation is controlled by an array of constraints passed to the component.\n\nA single constraint has this structure:\n\n```typescript\ninterface TsFileImageDimensionContraint {\n  height: {\n    min: number;\n    max: number;\n  };\n  width: {\n    min: number;\n    max: number;\n  };\n}\n```\n\nFor fixed image dimensions set the min and max to the same number. The component will trim ranges before exposing to the user:\n\n```javascript\n// Example:\n{\n  height: {\n    min: 100;\n    max: 100;\n  };\n  width: {\n    min: 300;\n    max: 300;\n  };\n}\n// Will be displayed as: `300x100`\n\n{\n  height: {\n    min: 50;\n    max: 100;\n  };\n  width: {\n    min: 200;\n    max: 300;\n  };\n}\n// Will be displayed as: `200-300x50-100`\n```\n\nExample:\n\n```typescript\n@import { TsFileImageDimensionConstraints } from '@terminus/ui-file-upload';\n\n...\n\n  myDimensionConstraints: TsFileImageDimensionConstraints = [\n    {\n      height: {\n        min: 72,\n        max: 72,\n      },\n      width: {\n        min: 72,\n        max: 72,\n      },\n    },\n    {\n      height: {\n        min: 400,\n        max: 500,\n      },\n      width: {\n        min: 700,\n        max: 800,\n      },\n    },\n  ];\n```\n\n```html\n<ts-file-upload [dimensionConstraints]=\"myDimensionConstraints\"></ts-file-upload>\n```\n\nIf an image is selected that does not meet the dimension constraints, a validation message will appear below the file input.\n\n### Image ratio constraints\n\nImage ratio validation is controlled by an array of constraints passed to the component.\n\n```html\n<ts-file-upload [ratioConstraints]='[\"1:2\", \"3:4\"]'></ts-file-upload>\n```\n\nIf a file is loaded that do not meet any ratio constraints, a validation message will appear below the file input.\n\n### Clearing a file\n\nThe user can clear the selected file by clicking the `X` button next to the filename. An event will be emitted when this occurs:\n\n```html\n<ts-file-upload (cleared)=\"fileWasCleared()\"></ts-file-upload>\n```\n\n```typescript\n...\n\n  fileWasCleared() {\n    ...\n  }\n```\n\n### Showing upload progress\n\nThe progress of an upload can be reflected in the UI by passing a number between 0 and 100 to the `progress` input:\n\n```html\n<ts-file-upload [progress]=\"myProgress\"></ts-file-upload>\n```\n\n```typescript\n...\n  myProgress = 0;\n\n  // For example only. In a real scenario the progress value would be coming from the API.\n  // Start a counter to fake the upload progress value\n  startProgress() {\n    this.myProgress = 0;\n    const counting = setInterval(() => {\n      if (this.myProgress < 100) {\n        this.myProgress++;\n      } else {\n        clearInterval(counting);\n      }\n    }, 14);\n  }\n```\n\n### Enable multiple file selection\n\nSet `multiple` to `true`:\n\n```html\n<ts-file-upload [multiple]=\"true\"></ts-file-upload>\n```\n\n### Handle multiple files\n\nCurrently this component does not natively handle multiple file uploads (this support is planned for the future). There are ways to 'fake'\nthat functionality in a way.\n\nAn example:\n\n```html\n<!--\n  Here is the original file upload. Initially this is all the user sees.\n  When multiple files are selected, they will be emitted through this event:\n-->\n<ts-file-upload (selectedMultiple)=\"selectedMultiple($event)\"></ts-file-upload>\n\n<!-- Loop over the files that were collected from the selectedMultiple event -->\n<ng-container *ngFor=\"let v of files\">\n  <ts-file-upload\n    <!-- Only show this upload if the file still exists in our files collection: -->\n    *ngIf=\"fileExists(v.id)\"\n    <!-- Seed the file input with the file from our collection: -->\n    [seedFile]=\"v.file\"\n  ></ts-file-upload>\n</ng-container>\n```\n\n```typescript\n...\n\n  // We'll store the selected files here for reference:\n  files: {id: number; file: File}[] = [];\n\n  // Collect the selected files from the event and store them for reference:\n  selectedMultiple(e: File[]) {\n    let index = -1;\n\n    this.files = e.map((f) => {\n      index = index + 1;\n      return {\n        id: index,\n        file: f,\n      };\n    });\n  }\n\n  // Remove the correct file when the user clicks the clear button\n  clearFile(id: number): void {\n    if (!this.files || this.files.length < 1) {\n      return;\n    }\n\n    this.files = this.files.filter((obj) => {\n      return obj.id !== id;\n    });\n  }\n\n  // Helper function to determine when to hide one of the file upload components:\n  public fileExists(id: number): boolean {\n    if (!this.files || this.files.length < 1) {\n      return false;\n    }\n    const found = this.files.find((v) => {\n      return v.id === id;\n    });\n\n    return found ? true : false;\n  }\n```\n\n<!-- Links -->\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-file-upload.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-file-upload\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.js\n","readmeFilename":"README.md","description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@2.0.11","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-OS3bf859dvQAEvZp4+L1b6FlQceYjqQZPpweWwtLDB7KY4gDtepw/IoQcFy8GvBA0FL9RS+DsH9Y1eFKvpM7Ag==","shasum":"962a4f536da7b6a79f2b55a2b3923a387e74e52b","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-2.0.11.tgz","fileCount":71,"unpackedSize":740299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUlbsCRA9TVsSAnZWagAANHwP/0ZUeJaf/C/wuMGGUT33\n82gNb1EAxms5vtesMKsXv7RIFeG6RaVDTQETbQwMTThfXDYvwWFc0imoN+c4\nYA9/VHVfp6xhVkHyS6yGx606zQvxGMn2H1Q7m9VAsITMf1vZfsShVVQ2heP/\nWh/GgZK+s9Hf++1kwYvl5dAbzVyueyNBHuPympV/JF3KT9+C1cHCDB4BLHM8\nTqwP2/N0KSHqMhVRFIeWO7V3ETzs8CbL3KWyR/W4X4ZbajLFFTjoXyWxoo3H\nE8x1shVFRaprPMn+JCe7KKgPF/bGvxoQmdVDAuJletjk4VYywfDw9anCH+To\ndnKCjDAsq3Er68fGlVuRzhFK+4LxahL18xr2RdnHO8jMo0artrrRb0M1T/BG\nNnsxPzbTxKVvk7eWE4w5PArw8cHpkLIXTtoArzb3V8B7XG6XWFJKeQhTe7ax\n3Q5jb3dpnPN529rwi987ZvsKd+HX9LWpYS0wEWEjFym/ydcNmgk91u4flW4L\n9osklpF6pZPF2Ge44nvW6VFEH9kkhb+mDxozzTloEt5mySa18gIb7Sp4tLK3\n/ytKQhLI4afQSiL4NnAWHDxBlWikgzP3bMhZ7b9hsADLexajTTyQfKAtuBGm\ncl1lLRAH7hk404ow7dwgoypu/nFvqb2CQqGYYXkIW9cwtg4ChvVWq2/Et7cH\nQDaR\r\n=xViq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTpViXiXSEShtwJjRIa+oc49q8iXteM2c53ZUfQcmOwAIhAMsfDoyDqa+QRlN1xvF83SrOk7oRlQnQ2r/f5tmpZD4Y"}]},"maintainers":[{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_2.0.11_1599231724253_0.11728597969133903"},"_hasShrinkwrap":false},"2.1.0":{"name":"@terminus/ui-file-upload","version":"2.1.0","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.2.4","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-button":"^2.0.7","@terminus/ui-icon":"^2.0.5","@terminus/ui-icon-button":"^2.0.5","@terminus/ui-pipes":"^1.0.9","@terminus/ui-spacing":"^1.0.11","@terminus/ui-tooltip":"^1.0.13","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","date-fns":"2.15.0","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0"},"readme":"<h1>File Upload</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nA drag'n'drop file upload component.\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [`TsSelectedFile`](#tsselectedfile)\n  - [File types](#file-types)\n  - [File size](#file-size)\n  - [Image dimensions](#image-dimensions)\n  - [Image ratio constraints](#image-ratio-constraints)\n  - [Clearing a file](#clearing-a-file)\n  - [Showing upload progress](#showing-upload-progress)\n  - [Enable multiple file selection](#enable-multiple-file-selection)\n  - [Handle multiple files](#handle-multiple-files)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-file-upload`\n- `@terminus/ui-icon`\n- `@terminus/ui-icon-button`\n- `@terminus/ui-pipes`\n- `@terminus/ui-spacing`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-file-upload\n```\n\n### Modules that need to be in NgModule\n\n- `TsFileUploadModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nCollect the selected file via the `selected` event:\n\n```html\n<ts-file-upload (selected)=\"handleFile($event)\"></ts-file-upload>\n```\n\n```typescript\n@import { TsSelectedFile } from '@terminus/ui-file-upload';\n\n...\n\n  handleFile(e: TsSelectedFile) {\n    // e.fileContents is the selected file\n  }\n```\n\n### `TsSelectedFile`\n\nThe `TsSelectedFile` instance will have several items available:\n\n```typescript\nfile.fileContents // string\nfile.height       // number (will be 0 for CSVs)\nfile.isCSV        // boolean\nfile.isImage      // boolean\nfile.isValid      // boolean\nfile.mimeType     // string\nfile.name         // string\nfile.size         // number\nfile.validations  // TsFileValidations\nfile.width        // number (will be 0 for CSVs)\n```\n\n### File types\n\nAccepted file types can be set by the `accept` input:\n\n```typescript\n@import { TsFileAcceptedMimeTypes } from '@terminus/ui-file-upload';\n\n...\n\n  myMimeTypes: TsFileAcceptedMimeTypes = ['image/png', 'image/jpg'];\n```\n\n```html\n<ts-file-upload [accept]=\"myMimeTypes\"></ts-file-upload>\n```\n\nIf a file is loaded with the incorrect MIME/type, a validation message will appear below the file input.\n\nThe default types can be found by importing `TS_ACCEPTED_MIME_TYPES`;\n\n### File size\n\nSet a maximum size for files in kilobytes:\n\n```html\n<ts-file-upload [maximumKilobytesPerFile]=\"{{ 6 * 1024 }}\"></ts-file-upload>\n```\n\nIf a file is loaded that exceeds the size limit, a validation message will appear below the file input.\n\n### Image dimensions\n\nImage dimension validation is controlled by an array of constraints passed to the component.\n\nA single constraint has this structure:\n\n```typescript\ninterface TsFileImageDimensionContraint {\n  height: {\n    min: number;\n    max: number;\n  };\n  width: {\n    min: number;\n    max: number;\n  };\n}\n```\n\nFor fixed image dimensions set the min and max to the same number. The component will trim ranges before exposing to the user:\n\n```javascript\n// Example:\n{\n  height: {\n    min: 100;\n    max: 100;\n  };\n  width: {\n    min: 300;\n    max: 300;\n  };\n}\n// Will be displayed as: `300x100`\n\n{\n  height: {\n    min: 50;\n    max: 100;\n  };\n  width: {\n    min: 200;\n    max: 300;\n  };\n}\n// Will be displayed as: `200-300x50-100`\n```\n\nExample:\n\n```typescript\n@import { TsFileImageDimensionConstraints } from '@terminus/ui-file-upload';\n\n...\n\n  myDimensionConstraints: TsFileImageDimensionConstraints = [\n    {\n      height: {\n        min: 72,\n        max: 72,\n      },\n      width: {\n        min: 72,\n        max: 72,\n      },\n    },\n    {\n      height: {\n        min: 400,\n        max: 500,\n      },\n      width: {\n        min: 700,\n        max: 800,\n      },\n    },\n  ];\n```\n\n```html\n<ts-file-upload [dimensionConstraints]=\"myDimensionConstraints\"></ts-file-upload>\n```\n\nIf an image is selected that does not meet the dimension constraints, a validation message will appear below the file input.\n\n### Image ratio constraints\n\nImage ratio validation is controlled by an array of constraints passed to the component.\n\n```html\n<ts-file-upload [ratioConstraints]='[\"1:2\", \"3:4\"]'></ts-file-upload>\n```\n\nIf a file is loaded that do not meet any ratio constraints, a validation message will appear below the file input.\n\n### Clearing a file\n\nThe user can clear the selected file by clicking the `X` button next to the filename. An event will be emitted when this occurs:\n\n```html\n<ts-file-upload (cleared)=\"fileWasCleared()\"></ts-file-upload>\n```\n\n```typescript\n...\n\n  fileWasCleared() {\n    ...\n  }\n```\n\n### Showing upload progress\n\nThe progress of an upload can be reflected in the UI by passing a number between 0 and 100 to the `progress` input:\n\n```html\n<ts-file-upload [progress]=\"myProgress\"></ts-file-upload>\n```\n\n```typescript\n...\n  myProgress = 0;\n\n  // For example only. In a real scenario the progress value would be coming from the API.\n  // Start a counter to fake the upload progress value\n  startProgress() {\n    this.myProgress = 0;\n    const counting = setInterval(() => {\n      if (this.myProgress < 100) {\n        this.myProgress++;\n      } else {\n        clearInterval(counting);\n      }\n    }, 14);\n  }\n```\n\n### Enable multiple file selection\n\nSet `multiple` to `true`:\n\n```html\n<ts-file-upload [multiple]=\"true\"></ts-file-upload>\n```\n\n### Handle multiple files\n\nCurrently this component does not natively handle multiple file uploads (this support is planned for the future). There are ways to 'fake'\nthat functionality in a way.\n\nAn example:\n\n```html\n<!--\n  Here is the original file upload. Initially this is all the user sees.\n  When multiple files are selected, they will be emitted through this event:\n-->\n<ts-file-upload (selectedMultiple)=\"selectedMultiple($event)\"></ts-file-upload>\n\n<!-- Loop over the files that were collected from the selectedMultiple event -->\n<ng-container *ngFor=\"let v of files\">\n  <ts-file-upload\n    <!-- Only show this upload if the file still exists in our files collection: -->\n    *ngIf=\"fileExists(v.id)\"\n    <!-- Seed the file input with the file from our collection: -->\n    [seedFile]=\"v.file\"\n  ></ts-file-upload>\n</ng-container>\n```\n\n```typescript\n...\n\n  // We'll store the selected files here for reference:\n  files: {id: number; file: File}[] = [];\n\n  // Collect the selected files from the event and store them for reference:\n  selectedMultiple(e: File[]) {\n    let index = -1;\n\n    this.files = e.map((f) => {\n      index = index + 1;\n      return {\n        id: index,\n        file: f,\n      };\n    });\n  }\n\n  // Remove the correct file when the user clicks the clear button\n  clearFile(id: number): void {\n    if (!this.files || this.files.length < 1) {\n      return;\n    }\n\n    this.files = this.files.filter((obj) => {\n      return obj.id !== id;\n    });\n  }\n\n  // Helper function to determine when to hide one of the file upload components:\n  public fileExists(id: number): boolean {\n    if (!this.files || this.files.length < 1) {\n      return false;\n    }\n    const found = this.files.find((v) => {\n      return v.id === id;\n    });\n\n    return found ? true : false;\n  }\n```\n\n<!-- Links -->\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-file-upload.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-file-upload\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.js\n","readmeFilename":"README.md","description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@2.1.0","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-HTsen/IViAy1+rvWowo8lC4ma3dbCY/Sa3heZzYsNQrYCo+uIkz8R2MSyOxkO+8LmUtB2bQ9NphgT5NY2JiwyA==","shasum":"5690dbfa0f4684ecb743f857bda8417c11f5f670","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-2.1.0.tgz","fileCount":71,"unpackedSize":740819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9LmCRA9TVsSAnZWagAADT0P/2IHEijkVTipiqdRgwi2\n4IdQDeWcXnB2d10jmRqbetXfuZkHUUejK/dJBdupCS9hupZIvOfTTejsY5ed\nJqjkKCY7BTsj3ySaS5bDIz5JuVRDFjQNIqLulz5UctzhCs8xtzx/gyg6kj8r\nxXbwyTZt1th9a/lE3vxhVJd2E14peW2pCCAGby8F12oAC51wy/pUv9eogpwA\n5Ubqx0Ep0iyoi2B7aXualXkO0muYQMnRVPjFhS20M0zg5bSTKLpmNAS7Nt1e\nhivTSM3TmcoRohWbIsKq3pRMe5dqrOZ9XZwWEc4IT8Q9R0RBo1p6nKHaHssX\n5kXRealRcZ78bZTVIozow1aMSz5S9g21I7u9IYDpOgUlHpSiGORoqHxP3lOh\nt/gUUkcUr2Vky36MqiNnflS0VUSg9VCu+VdBY8MW3NjMj8SPFzRWT1TJN2B7\nOYq04kRiJeM8cLumNMjJLWXuEic/yPBa+Qq9Pd8mlYDNrf3QkGMiKNjIbM4m\nmUqzEm8/BxRLmgY9MHezsLZ30cyfJlocZqzTZgrbCF1o+alpG/p2vX35C9cr\n3KguLT2bymagowzyEvjL1G1HD6OkS21xpdqCWdX4xPCj73BRFSSLrD/KuTcE\naRD5FYHugedQIJvdLj91fzKDLHGXcbE/SLiQfJtBS4gNpM7pTxn8D678Pi3E\n9vxC\r\n=TMLc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC6ZGedfczjpziOz6mLan7XgNU08jt4PW0kcShtncyQvAiAzUsiNYP/bFfl1AWzhSuhoyTOW6DnXX2rsN1VO+XwjgQ=="}]},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_2.1.0_1599591142026_0.8099359467077918"},"_hasShrinkwrap":false},"2.1.1":{"name":"@terminus/ui-file-upload","version":"2.1.1","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.2.4","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-button":"^2.0.7","@terminus/ui-icon":"^2.0.5","@terminus/ui-icon-button":"^2.0.5","@terminus/ui-pipes":"^1.0.9","@terminus/ui-spacing":"^1.0.11","@terminus/ui-tooltip":"^1.0.13","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","date-fns":"2.15.0","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0"},"readme":"<h1>File Upload</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nA drag'n'drop file upload component.\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [`TsSelectedFile`](#tsselectedfile)\n  - [File types](#file-types)\n  - [File size](#file-size)\n  - [Image dimensions](#image-dimensions)\n  - [Image ratio constraints](#image-ratio-constraints)\n  - [Clearing a file](#clearing-a-file)\n  - [Showing upload progress](#showing-upload-progress)\n  - [Enable multiple file selection](#enable-multiple-file-selection)\n  - [Handle multiple files](#handle-multiple-files)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-file-upload`\n- `@terminus/ui-icon`\n- `@terminus/ui-icon-button`\n- `@terminus/ui-pipes`\n- `@terminus/ui-spacing`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-file-upload\n```\n\n### Modules that need to be in NgModule\n\n- `TsFileUploadModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nCollect the selected file via the `selected` event:\n\n```html\n<ts-file-upload (selected)=\"handleFile($event)\"></ts-file-upload>\n```\n\n```typescript\n@import { TsSelectedFile } from '@terminus/ui-file-upload';\n\n...\n\n  handleFile(e: TsSelectedFile) {\n    // e.fileContents is the selected file\n  }\n```\n\n### `TsSelectedFile`\n\nThe `TsSelectedFile` instance will have several items available:\n\n```typescript\nfile.fileContents // string\nfile.height       // number (will be 0 for CSVs)\nfile.isCSV        // boolean\nfile.isImage      // boolean\nfile.isValid      // boolean\nfile.mimeType     // string\nfile.name         // string\nfile.size         // number\nfile.validations  // TsFileValidations\nfile.width        // number (will be 0 for CSVs)\n```\n\n### File types\n\nAccepted file types can be set by the `accept` input:\n\n```typescript\n@import { TsFileAcceptedMimeTypes } from '@terminus/ui-file-upload';\n\n...\n\n  myMimeTypes: TsFileAcceptedMimeTypes = ['image/png', 'image/jpg'];\n```\n\n```html\n<ts-file-upload [accept]=\"myMimeTypes\"></ts-file-upload>\n```\n\nIf a file is loaded with the incorrect MIME/type, a validation message will appear below the file input.\n\nThe default types can be found by importing `TS_ACCEPTED_MIME_TYPES`;\n\n### File size\n\nSet a maximum size for files in kilobytes:\n\n```html\n<ts-file-upload [maximumKilobytesPerFile]=\"{{ 6 * 1024 }}\"></ts-file-upload>\n```\n\nIf a file is loaded that exceeds the size limit, a validation message will appear below the file input.\n\n### Image dimensions\n\nImage dimension validation is controlled by an array of constraints passed to the component.\n\nA single constraint has this structure:\n\n```typescript\ninterface TsFileImageDimensionContraint {\n  height: {\n    min: number;\n    max: number;\n  };\n  width: {\n    min: number;\n    max: number;\n  };\n}\n```\n\nFor fixed image dimensions set the min and max to the same number. The component will trim ranges before exposing to the user:\n\n```javascript\n// Example:\n{\n  height: {\n    min: 100;\n    max: 100;\n  };\n  width: {\n    min: 300;\n    max: 300;\n  };\n}\n// Will be displayed as: `300x100`\n\n{\n  height: {\n    min: 50;\n    max: 100;\n  };\n  width: {\n    min: 200;\n    max: 300;\n  };\n}\n// Will be displayed as: `200-300x50-100`\n```\n\nExample:\n\n```typescript\n@import { TsFileImageDimensionConstraints } from '@terminus/ui-file-upload';\n\n...\n\n  myDimensionConstraints: TsFileImageDimensionConstraints = [\n    {\n      height: {\n        min: 72,\n        max: 72,\n      },\n      width: {\n        min: 72,\n        max: 72,\n      },\n    },\n    {\n      height: {\n        min: 400,\n        max: 500,\n      },\n      width: {\n        min: 700,\n        max: 800,\n      },\n    },\n  ];\n```\n\n```html\n<ts-file-upload [dimensionConstraints]=\"myDimensionConstraints\"></ts-file-upload>\n```\n\nIf an image is selected that does not meet the dimension constraints, a validation message will appear below the file input.\n\n### Image ratio constraints\n\nImage ratio validation is controlled by an array of constraints passed to the component.\n\n```html\n<ts-file-upload [ratioConstraints]='[\"1:2\", \"3:4\"]'></ts-file-upload>\n```\n\nIf a file is loaded that do not meet any ratio constraints, a validation message will appear below the file input.\n\n### Clearing a file\n\nThe user can clear the selected file by clicking the `X` button next to the filename. An event will be emitted when this occurs:\n\n```html\n<ts-file-upload (cleared)=\"fileWasCleared()\"></ts-file-upload>\n```\n\n```typescript\n...\n\n  fileWasCleared() {\n    ...\n  }\n```\n\n### Showing upload progress\n\nThe progress of an upload can be reflected in the UI by passing a number between 0 and 100 to the `progress` input:\n\n```html\n<ts-file-upload [progress]=\"myProgress\"></ts-file-upload>\n```\n\n```typescript\n...\n  myProgress = 0;\n\n  // For example only. In a real scenario the progress value would be coming from the API.\n  // Start a counter to fake the upload progress value\n  startProgress() {\n    this.myProgress = 0;\n    const counting = setInterval(() => {\n      if (this.myProgress < 100) {\n        this.myProgress++;\n      } else {\n        clearInterval(counting);\n      }\n    }, 14);\n  }\n```\n\n### Enable multiple file selection\n\nSet `multiple` to `true`:\n\n```html\n<ts-file-upload [multiple]=\"true\"></ts-file-upload>\n```\n\n### Handle multiple files\n\nCurrently this component does not natively handle multiple file uploads (this support is planned for the future). There are ways to 'fake'\nthat functionality in a way.\n\nAn example:\n\n```html\n<!--\n  Here is the original file upload. Initially this is all the user sees.\n  When multiple files are selected, they will be emitted through this event:\n-->\n<ts-file-upload (selectedMultiple)=\"selectedMultiple($event)\"></ts-file-upload>\n\n<!-- Loop over the files that were collected from the selectedMultiple event -->\n<ng-container *ngFor=\"let v of files\">\n  <ts-file-upload\n    <!-- Only show this upload if the file still exists in our files collection: -->\n    *ngIf=\"fileExists(v.id)\"\n    <!-- Seed the file input with the file from our collection: -->\n    [seedFile]=\"v.file\"\n  ></ts-file-upload>\n</ng-container>\n```\n\n```typescript\n...\n\n  // We'll store the selected files here for reference:\n  files: {id: number; file: File}[] = [];\n\n  // Collect the selected files from the event and store them for reference:\n  selectedMultiple(e: File[]) {\n    let index = -1;\n\n    this.files = e.map((f) => {\n      index = index + 1;\n      return {\n        id: index,\n        file: f,\n      };\n    });\n  }\n\n  // Remove the correct file when the user clicks the clear button\n  clearFile(id: number): void {\n    if (!this.files || this.files.length < 1) {\n      return;\n    }\n\n    this.files = this.files.filter((obj) => {\n      return obj.id !== id;\n    });\n  }\n\n  // Helper function to determine when to hide one of the file upload components:\n  public fileExists(id: number): boolean {\n    if (!this.files || this.files.length < 1) {\n      return false;\n    }\n    const found = this.files.find((v) => {\n      return v.id === id;\n    });\n\n    return found ? true : false;\n  }\n```\n\n<!-- Links -->\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-file-upload.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-file-upload\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.js\n","readmeFilename":"README.md","description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@2.1.1","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-1Bn58yMXyqANzlm7j2S3sGm1Lvq+3Lfi5AU/0ewusZO9f2p2ttz3vCBgRFhzCrZdLa2H7wppxp0SuMUHI/8B3g==","shasum":"a56e4044c7c4421a951289ba6c3ca3272489bd3c","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-2.1.1.tgz","fileCount":71,"unpackedSize":741547,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW5o6CRA9TVsSAnZWagAANI4QAKUWB3r8hADkf8i8umYN\nYGCq/oy9TMz/ITDG5wMPuBjoQuUxZ482qjJ/VBf82dg8RrpuAtxKxiA4IJuQ\n50fhEE+nkzqw1w4Cu1SCLl/ToNIjybEJzpLRMEjkSr7YYSBYwAgA7dbqZwGM\nzu2l19VJP/nBckcJNIDmbGgMrLYk2MNRJ/tNBwMZqUqyHzEhZZBKuE41zKMz\n34gc8RgNJIR4ANhLvRHtEfMe0Ijw+bidzeXjt1CxP8drw5mVmFNlJ5Wpl08u\n6lkWxWLHxa1AFsolowcp0QpkemjBerh8kUD2RhC8TChfcG1WFsT6o7k2mFMQ\nv+UBCcgWqcmvqcjwYIpwyJVGwj1QxtYKa6G00pBInwWYb+yoyg/G6ryallzB\nfXqKtuH6qLOE0/IRXLS139g+nO2ifkfTXlFLghqRNQTPUtFHEwEcH3dPcBSX\n3DTBaTdrtrgAQSr1Iw+YBl9u7W9JeaSnvGYBlkoE4YO6gGIossckEKi9PVFH\nv/MEAu83/1Hdp7N5OIUTwlP7xAKxhBAS4IX649tCkYp3UYdk5ke8lGPJdgIf\nxZdfP7Tuzb8YsVvIYZ4Ondmm5IxpgGAsqni5u+Xjm/e5fKWOVjCGCCG37as6\nhJgCCkK8XgCMxnWj+PNWYyDzWi6qY3sncCPWBNtWHTQpcWjVfV48AC99Kl2q\nF0cZ\r\n=Qh0v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC7Uvwvk8qNvCm+HiVG2cmJ3WdBmO3jhgn9nd6hk4qkoAiB7AtyMv5U6IFn5uTPPZbnnPZtTTmOzb45eUw1CpQa57w=="}]},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_2.1.1_1599838778271_0.07237482246920446"},"_hasShrinkwrap":false},"2.1.2":{"name":"@terminus/ui-file-upload","version":"2.1.2","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.2.4","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-button":"^2.0.7","@terminus/ui-icon":"^2.0.5","@terminus/ui-icon-button":"^2.0.5","@terminus/ui-pipes":"^1.0.9","@terminus/ui-spacing":"^1.0.11","@terminus/ui-tooltip":"^1.0.13","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","date-fns":"2.15.0","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0"},"description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@2.1.2","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-5nSxAELNgY7mLan5kUgrN6eA2rLrEckKwUNE4adtDmh9OgL+nQjrlj2WdrfS6jyUChVQhy2dAIVFCsS+T134TA==","shasum":"12bc2029552a74174151fa277e200c4dfff07675","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-2.1.2.tgz","fileCount":71,"unpackedSize":741759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7VQCRA9TVsSAnZWagAADzYQAJygtyg6VFnmksm2bARq\nrxFsJ/thOxghnqciF+hWOr0cBx48uAbpzMF/07d7f4AIc7AYOwX3gvlVhkWu\nD/KOvA9lclhfUyfS5Bq73qDxHk/6ezXFRvttHaKTGBQTpjKEgfffIiOew/Ue\nBLdGgpxYN6bfFXPMiGQijXxZq39ukUylVNrlXQThITEV6YECN6QYVPE0ZaV6\nqIAoNNcjkatB3r4RDieOy6gHkljetYQbq/OK0pO4UTeXncmh8Qkl6rHwu2Hh\n1AobSobdnzR6Ki2r/p6l66EnaSWcB1qG4u9DxKAl/5BOMShI7Ts8cnH7cCsC\nZhE/+yCxGVQDWWX3l0r0fk11Sej1zkKBS7vE3PLgi0KhBrc2+Awx5G02UkNx\nILH1fCbvGCU48WH6j9z4R1GZEXkbb70KHa9paP0w9v1Zw9JKjhamiB7jyjgZ\n/adN13rDuuyghFtMWD13E6ovbZvE53OeOsJTIE7VOPhzXStaeryxWfGDv1Fo\n48ORVn54MXpjEO4ojQiTmzFgPUcsnnrugTlyWUNZ5QBjpszMF3ZpvUAY3YiK\nQdQ7NQg1QVVq6MfvwN6Yc1evTSCmFFchYIcgB7xjyxwCKDxPFbKFp2GFO4HU\nbsw7XeT7UvNnLRFA+IwsubbqB8f/PQ6mamDpuwPMmqWliTXkdoALOK8cx35O\nGHOx\r\n=c6MJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG288nUI/Gly1BUmIz9Le7HYMQXKDuKwbWC8v4BZiuA3AiAexEmP3puyLHNRHhAjTWXL6OyAURfTuQVKHNKmxysdmg=="}]},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_2.1.2_1599845711760_0.6532153628156232"},"_hasShrinkwrap":false},"2.1.3":{"name":"@terminus/ui-file-upload","version":"2.1.3","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.2.4","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-button":"^2.0.7","@terminus/ui-icon":"^2.0.5","@terminus/ui-icon-button":"^2.0.5","@terminus/ui-pipes":"^1.0.9","@terminus/ui-spacing":"^1.0.11","@terminus/ui-tooltip":"^1.0.13","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","date-fns":"2.15.0","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0"},"readme":"<h1>File Upload</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nA drag'n'drop file upload component.\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [Installation](#installation)\n  - [Packages that need to be installed](#packages-that-need-to-be-installed)\n  - [Modules that need to be in NgModule](#modules-that-need-to-be-in-ngmodule)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [`TsSelectedFile`](#tsselectedfile)\n  - [File types](#file-types)\n  - [File size](#file-size)\n  - [Image dimensions](#image-dimensions)\n  - [Image ratio constraints](#image-ratio-constraints)\n  - [Clearing a file](#clearing-a-file)\n  - [Showing upload progress](#showing-upload-progress)\n  - [Enable multiple file selection](#enable-multiple-file-selection)\n  - [Handle multiple files](#handle-multiple-files)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\n### Packages that need to be installed\n\n- `@angular/cdk`\n- `@angular/common`\n- `@angular/core`\n- `@angular/flex-layout`\n- `@angular/forms`\n- `@angular/material`\n- `@angular/platform-browser`\n- `@terminus/design-tokens`\n- `@terminus/fe-utilities`\n- `@terminus/ui-button`\n- `@terminus/ui-file-upload`\n- `@terminus/ui-icon`\n- `@terminus/ui-icon-button`\n- `@terminus/ui-pipes`\n- `@terminus/ui-spacing`\n- `@terminus/ui-tooltip`\n- `@terminus/ui-utilities`\n- `@terminus/ui-validation-messages`\n- `date-fns`\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-file-upload\n```\n\n### Modules that need to be in NgModule\n\n- `TsFileUploadModule`\n\n### CSS imports\n\nIn your top level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nCollect the selected file via the `selected` event:\n\n```html\n<ts-file-upload (selected)=\"handleFile($event)\"></ts-file-upload>\n```\n\n```typescript\n@import { TsSelectedFile } from '@terminus/ui-file-upload';\n\n...\n\n  handleFile(e: TsSelectedFile) {\n    // e.fileContents is the selected file\n  }\n```\n\n### `TsSelectedFile`\n\nThe `TsSelectedFile` instance will have several items available:\n\n```typescript\nfile.fileContents // string\nfile.height       // number (will be 0 for CSVs)\nfile.isCSV        // boolean\nfile.isImage      // boolean\nfile.isValid      // boolean\nfile.mimeType     // string\nfile.name         // string\nfile.size         // number\nfile.validations  // TsFileValidations\nfile.width        // number (will be 0 for CSVs)\n```\n\n### File types\n\nAccepted file types can be set by the `accept` input:\n\n```typescript\n@import { TsFileAcceptedMimeTypes } from '@terminus/ui-file-upload';\n\n...\n\n  myMimeTypes: TsFileAcceptedMimeTypes = ['image/png', 'image/jpg'];\n```\n\n```html\n<ts-file-upload [accept]=\"myMimeTypes\"></ts-file-upload>\n```\n\nIf a file is loaded with the incorrect MIME/type, a validation message will appear below the file input.\n\nThe default types can be found by importing `TS_ACCEPTED_MIME_TYPES`;\n\n### File size\n\nSet a maximum size for files in kilobytes:\n\n```html\n<ts-file-upload [maximumKilobytesPerFile]=\"{{ 6 * 1024 }}\"></ts-file-upload>\n```\n\nIf a file is loaded that exceeds the size limit, a validation message will appear below the file input.\n\n### Image dimensions\n\nImage dimension validation is controlled by an array of constraints passed to the component.\n\nA single constraint has this structure:\n\n```typescript\ninterface TsFileImageDimensionContraint {\n  height: {\n    min: number;\n    max: number;\n  };\n  width: {\n    min: number;\n    max: number;\n  };\n}\n```\n\nFor fixed image dimensions set the min and max to the same number. The component will trim ranges before exposing to the user:\n\n```javascript\n// Example:\n{\n  height: {\n    min: 100;\n    max: 100;\n  };\n  width: {\n    min: 300;\n    max: 300;\n  };\n}\n// Will be displayed as: `300x100`\n\n{\n  height: {\n    min: 50;\n    max: 100;\n  };\n  width: {\n    min: 200;\n    max: 300;\n  };\n}\n// Will be displayed as: `200-300x50-100`\n```\n\nExample:\n\n```typescript\n@import { TsFileImageDimensionConstraints } from '@terminus/ui-file-upload';\n\n...\n\n  myDimensionConstraints: TsFileImageDimensionConstraints = [\n    {\n      height: {\n        min: 72,\n        max: 72,\n      },\n      width: {\n        min: 72,\n        max: 72,\n      },\n    },\n    {\n      height: {\n        min: 400,\n        max: 500,\n      },\n      width: {\n        min: 700,\n        max: 800,\n      },\n    },\n  ];\n```\n\n```html\n<ts-file-upload [dimensionConstraints]=\"myDimensionConstraints\"></ts-file-upload>\n```\n\nIf an image is selected that does not meet the dimension constraints, a validation message will appear below the file input.\n\n### Image ratio constraints\n\nImage ratio validation is controlled by an array of constraints passed to the component.\n\n```html\n<ts-file-upload [ratioConstraints]='[\"1:2\", \"3:4\"]'></ts-file-upload>\n```\n\nIf a file is loaded that do not meet any ratio constraints, a validation message will appear below the file input.\n\n### Clearing a file\n\nThe user can clear the selected file by clicking the `X` button next to the filename. An event will be emitted when this occurs:\n\n```html\n<ts-file-upload (cleared)=\"fileWasCleared()\"></ts-file-upload>\n```\n\n```typescript\n...\n\n  fileWasCleared() {\n    ...\n  }\n```\n\n### Showing upload progress\n\nThe progress of an upload can be reflected in the UI by passing a number between 0 and 100 to the `progress` input:\n\n```html\n<ts-file-upload [progress]=\"myProgress\"></ts-file-upload>\n```\n\n```typescript\n...\n  myProgress = 0;\n\n  // For example only. In a real scenario the progress value would be coming from the API.\n  // Start a counter to fake the upload progress value\n  startProgress() {\n    this.myProgress = 0;\n    const counting = setInterval(() => {\n      if (this.myProgress < 100) {\n        this.myProgress++;\n      } else {\n        clearInterval(counting);\n      }\n    }, 14);\n  }\n```\n\n### Enable multiple file selection\n\nSet `multiple` to `true`:\n\n```html\n<ts-file-upload [multiple]=\"true\"></ts-file-upload>\n```\n\n### Handle multiple files\n\nCurrently this component does not natively handle multiple file uploads (this support is planned for the future). There are ways to 'fake'\nthat functionality in a way.\n\nAn example:\n\n```html\n<!--\n  Here is the original file upload. Initially this is all the user sees.\n  When multiple files are selected, they will be emitted through this event:\n-->\n<ts-file-upload (selectedMultiple)=\"selectedMultiple($event)\"></ts-file-upload>\n\n<!-- Loop over the files that were collected from the selectedMultiple event -->\n<ng-container *ngFor=\"let v of files\">\n  <ts-file-upload\n    <!-- Only show this upload if the file still exists in our files collection: -->\n    *ngIf=\"fileExists(v.id)\"\n    <!-- Seed the file input with the file from our collection: -->\n    [seedFile]=\"v.file\"\n  ></ts-file-upload>\n</ng-container>\n```\n\n```typescript\n...\n\n  // We'll store the selected files here for reference:\n  files: {id: number; file: File}[] = [];\n\n  // Collect the selected files from the event and store them for reference:\n  selectedMultiple(e: File[]) {\n    let index = -1;\n\n    this.files = e.map((f) => {\n      index = index + 1;\n      return {\n        id: index,\n        file: f,\n      };\n    });\n  }\n\n  // Remove the correct file when the user clicks the clear button\n  clearFile(id: number): void {\n    if (!this.files || this.files.length < 1) {\n      return;\n    }\n\n    this.files = this.files.filter((obj) => {\n      return obj.id !== id;\n    });\n  }\n\n  // Helper function to determine when to hide one of the file upload components:\n  public fileExists(id: number): boolean {\n    if (!this.files || this.files.length < 1) {\n      return false;\n    }\n    const found = this.files.find((v) => {\n      return v.id === id;\n    });\n\n    return found ? true : false;\n  }\n```\n\n<!-- Links -->\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-file-upload.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-file-upload\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.js\n","readmeFilename":"README.md","description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@2.1.3","_nodeVersion":"12.18.3","_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","dist":{"integrity":"sha512-+frmoUv49WtMUArUVWSj0vWuvAlcqWGSoy0MNaYBVTon+Ervg/JT9KI5V1bZoIDiNH/fp8OBC0s4yDNiTTz7NQ==","shasum":"c254231dca23ea707d352764ac556a9a7cf67113","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-2.1.3.tgz","fileCount":71,"unpackedSize":742367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX6qkCRA9TVsSAnZWagAA0CAP/2/vec9N0bpn4XrVwTzY\nU79+vJu/4fsGBhn3nIrNHHIOA90sasDMaeOdJUQFW+xhKlVTx8rPO6HDUpKj\nYsi8hTOH5SiS5O3TfRNZbQZlifdfa3X9e+bkiVkISIu2zyezIpoWQ8rbiyrk\nc5uLo2+aYpRz0ZwYkfhXkv62UunQajKacyOis4Aj28Epx2b7CIFtjwu7csgI\nIbzsJnsu8n9NGEk2zAkFFb5/MFDJrSl3X5u/1Bvu/BP035fWNZMaQkFd1H/o\nBHmMtN7qYrg+iTlpejkEg9Aq+pFJINreogNGho9hF6fb4UJVhoNIFr7i8yHZ\nzp2BgW+6X+aLCFTtjbnGCIXvI8evVb4Wh43D9SsKzVfp5YG4bdMgq7rF7mvN\nGyThqkofF51e5S+AhEt5BaDOdzULIwZkuksx7239qJGL0GQLUCEaEemAPP3k\nB6UJzoi2eOaRz/Syr2D09fz8v0YqQFCufIu8aJhP4Ka2Zkv6A8Kj1AKffu3x\nmM4FTN+40jV37oHAgztqtPL4QXEMpLpBKt/cnUQsslPve5f8toR+8fzlXOJo\nt6eWIy33pfPxqgb/2AlLKq/0rKwY1JIXkfltm9LKvsSyGjMMc4RWK/pfSw21\ndwzKs2Ax2ukpYuXk8DaT5daJWv16dLJ3+Pk54yg++Nc6L3OAi7Um4v9W2On/\nZlxr\r\n=FxhY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID7vhH0aMtkhzIzmv6ZJ8K4pjQuLJyHI2sK9J5lxRm5KAiB68o9m6noTZV/79oWxlhDw8SVRi2imjn8ySrj1HYqOJg=="}]},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_2.1.3_1600105123523_0.9825580358184116"},"_hasShrinkwrap":false},"3.0.0":{"name":"@terminus/ui-file-upload","version":"3.0.0","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.2.4","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-button":"^2.0.7","@terminus/ui-icon":"^2.0.5","@terminus/ui-icon-button":"^2.0.5","@terminus/ui-pipes":"^1.0.9","@terminus/ui-spacing":"^1.0.11","@terminus/ui-tooltip":"^1.0.13","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","date-fns":"2.16.1","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0"},"description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@3.0.0","_nodeVersion":"12.18.4","_npmVersion":"lerna/3.22.1/node@v12.18.4+x64 (linux)","dist":{"integrity":"sha512-8QfivfGnF6K2gi1/5ZBckHXcTb4WtV4e+r4fPCuaI6ylHSkT+yQpz1/yR6VGTJf13ThRDWtGLhk4LO8Pp0CLAA==","shasum":"bc0021cab918676d728b656b3a3a4323cd348c23","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-3.0.0.tgz","fileCount":71,"unpackedSize":749471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfden1CRA9TVsSAnZWagAA6OwP/RhiK6g5tVy5MzmzOV88\nhW7WqmwIECDkB0+wxHSDsMMDVPN/S69ycEMzNTPbW7gH40xgbDJMi8vUGs0v\nDAA1CRpi7hhv6dvi4Z7rx4Fp9QzHJXqWoOyf0oO/ljA6Tojn3DTCadB/H05W\nl4BP59wf7Yp5IYz4U5CYZZ8PWs15h1NXyhMAsroxvJRcWOsJJbkVAInBxXNg\nUlsdHejhWUsKdeKVspTHXmuZqB+sAf1oYm8AcmbjRnYSahcjcJU/UupnEdyl\nqbDDE1qrTQ1UuYDwJ5+FwrfqzB/HdTOuqgKVUUG3N25kKNyQJlqj2eSXXF8f\noAHnzfC2gP3ovHuNWo8DwamFzw58AQ+VdSEand6hFKbx5C5TdenHSIs8WepS\nxl/9I1Bcnr9qgtt8dcQKvY49O6FaWNYzxPQthPR7BwOTn82/88Ipdx0h9rb6\n2O13lLx2KO+JzTr7g/ymalPI3Y3pxJZOVtk2VPMAjgTeVC3gciCZt+rcJ3QT\nTc597ebEYcGEEvnWRof0drJPeQ8pOi60/rFP8NFxpKoWo+iwGLtPflw3D+MR\nH698WviEfjVUtgNAwSrh6VKyZfqI05humiKqAP3zikvSXfzNr0UGQOKSgCOZ\nDdZNChQxpI3ebKjQfwsPTkigNovrbkGFooTrJS7vtLW3aCwTnddl9y3dOpyZ\n/Jwf\r\n=LANy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrcRefryc0HBJ3ySwDFM7Ta6VCBk1ck7GUBweTLAlpBQIhAOYsze0sbF7w3Eya8GJ4Jofk/CZAigsXMprLMJlgrPYe"}]},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_3.0.0_1601563125280_0.2731174088467696"},"_hasShrinkwrap":false},"3.0.1":{"name":"@terminus/ui-file-upload","version":"3.0.1","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.2.4","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-button":"^2.0.7","@terminus/ui-icon":"^2.0.5","@terminus/ui-icon-button":"^2.0.5","@terminus/ui-pipes":"^1.0.9","@terminus/ui-spacing":"^1.0.11","@terminus/ui-tooltip":"^1.0.13","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","date-fns":"2.16.1","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0"},"description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@3.0.1","_nodeVersion":"12.18.4","_npmVersion":"lerna/3.22.1/node@v12.18.4+x64 (linux)","dist":{"integrity":"sha512-855p3II61hP/7rqiwg6PszNdEMGSrfpqVGqGH06yJl9chryGOJ3Y/5Et6SuZ83VFk2Tp7ZDyF9P0tX8YqxEh0A==","shasum":"b51de01f9d8707f4ea9fb317345030e3dae245ec","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-3.0.1.tgz","fileCount":71,"unpackedSize":752043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdzciCRA9TVsSAnZWagAAprUP/0+TRq1XevLK7SppsifY\nI/y6jOzJDVlUQYluAaVgDPleoeGHnQSPXbhjGl9Bhz7pKkiO3vxKQSfRYU5C\neztgmYkY25P3FvpOguD2r5XD3CgStsac3jbrsulIAY/DfqPTA7Dbp1/KbeaH\n9Z/czOPNgQjM2v0+JKaRGNV6oyoIflFAowQGv1IxwkYqz93Pk4yQoL5jeilC\n7tRBlO9Td3uSn3m8NwWMkHgjpRBQB34jtjd/BLBfJ6dTQwGYH5aXsRzibPvQ\n7HA7CX5bprwPFnF7ZM1BIKtS9ijbQbbwx8yEYO+M+4oTfQzg2Q7lPLRqZOHN\nitCMo6sGF/G6tyN7AxELPu7PWkcvZjeQ/y1SQdkaxvJkOfAceFVbrTkyhKxJ\n1Ha6QWJHb0lGQ0EgbIuhB25maYJAVAR5jXq6OBFlGWhVucTLzu0Ro4st6ssy\nFGMmDpbdlEdh0qc3a9uFZhyZBUSbaEFfMZvgTXGoK7czv7GxwRocYcnnQ98z\n+CaOIuUUyOAhT2ROIVRQCy4R3efHpTr5IcWmti5ON+FJaCBDWpWT6nQeTvqv\nX7VrweROdCWxaZemdJ3mjsiRWwSidW9DTH7SBSAoeN6uqcxjnaXpd4bwjlqy\n0xrNOW9toP9ZLzkiVUm5fvYj/WAEDFVpl492tl/9VnKKpuB5CrBztz1iteKd\nxnUa\r\n=IpXI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDm9CJVHEL0QsbxNreO9f5yO/UaeFSMCdWJ3B2b0yCzQIhAIkY8MKZU6NlCEg1/z7rZ2aB+fOy/h/jalnecutgd2JG"}]},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_3.0.1_1601648417770_0.6424587430530553"},"_hasShrinkwrap":false},"3.0.2":{"name":"@terminus/ui-file-upload","version":"3.0.2","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.2.4","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-button":"^2.0.7","@terminus/ui-icon":"^2.1.4","@terminus/ui-icon-button":"^2.0.5","@terminus/ui-pipes":"^1.0.9","@terminus/ui-spacing":"^1.0.11","@terminus/ui-tooltip":"^1.0.13","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","date-fns":"2.16.1","@angular/router":"9.1.11","ngx-webstorage-service":"4.1.0","ngx-clipboard":"13.0.1","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12","@fortawesome/fontawesome-svg-core":"1.2.30","@fortawesome/angular-fontawesome":"0.6.0","@fortawesome/pro-solid-svg-icons":"5.14.0"},"description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@3.0.2","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-m5Bk6aISWYIwiVIoAqwYarJ1mtYGYZlkduaFUWx1zKVX+9HGmffb5Xt1pKzj8njRoh7Yrd3tqfWQpEojmWZT/Q==","shasum":"a7e145e690f8d03ce42ee1c69a881de002904282","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-3.0.2.tgz","fileCount":71,"unpackedSize":752347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpYClCRA9TVsSAnZWagAAxhkP/RuOg9bFWGNs1EHM8geR\nG9XP2jXatQLWBkofRKrD0YL1XaPohuJqvkmlViJuN2aREmCpLKoviiWWc97I\nIeGPbMnyZML5v9yF7bBrk5Hjvmvcg4lVtE0BctfMI9x4oY4yjed0Z+gWlRSt\nzZ8HEPGTxY1+cdtHYGfOQwT828yfh84mQSDhkgxx6lLGX51te3E3hmMBozZ0\nnnh757m4hnh85R70wZJCyYpsvKxPUg0wYvul5TsoOkGhfDYiuKnPI+dviI8U\nFxOH1V9LNW1CkdYmT+KsN91Y0Jl8coiWo6LWBoRtpafTKcIgg8aVNCcj/3bm\nxsgW+GWk6fp4VwoeTD7UQZHywYfycu2VjOqSbsBjRawGO0PQ//P2n0Gpm7yq\nZgWGreKB1WFGzfJ1jwL71VCgEIome+tzv21/zVQmYhpg0sSf4V5BgRoiyTBM\nuu50FVyFHTYttfGUzD7qjhyiyVyJ8TDI/v1y5WQ/vrJRKTh8n8XV/t1HiyrO\nIFqIvqG+UrhN9+x81yFD2Su3jeoG0EDCZsYdiE3L9MBuizIDiDyhMKUfFcGg\n0k4NjI9Zq0aeaxGrmhDSsbqsFKi/DpZ8bsPqvSU5lj8WxpXFkk7urCEM/Exf\nZM6UZl8EIg0uBxIqG0tixfpddenSWFgAco3+Acy3tjvogFKI15JBeNl1ZR5W\ns/cO\r\n=0u25\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDI3hEgE7PrWyTZjMhdZJDqMGY124TmIelKgzJUidKbqwIhANbF4AijyjoJ3rmmxjyJhpJwkp8FTi5lOD8/a5pyXSO8"}]},"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_3.0.2_1604681892495_0.1403466035583747"},"_hasShrinkwrap":false},"3.0.3":{"name":"@terminus/ui-file-upload","version":"3.0.3","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.2.4","@angular/platform-browser":"^9.1.0","@fortawesome/angular-fontawesome":"^0.6.0","@fortawesome/fontawesome-svg-core":"^1.2.30","@fortawesome/pro-solid-svg-icons":"^5.14.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-button":"^2.0.7","@terminus/ui-icon":"^2.1.5","@terminus/ui-icon-button":"^2.0.5","@terminus/ui-pipes":"^1.0.9","@terminus/ui-spacing":"^1.0.11","@terminus/ui-tooltip":"^1.0.13","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14","date-fns":"^2.13.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12"},"description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@3.0.3","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-DtqmLPmBpNt2KEWIah9hv0BMkSCCUW604hCgxRNXPpHsgK9b85SBcpbtBbZPtGwu7Q/zVSUT/tqIgn8zX1VR/A==","shasum":"897105e0f7df8456e1702293d1e2c4f3cd1fc57c","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-3.0.3.tgz","fileCount":71,"unpackedSize":751184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfq9MLCRA9TVsSAnZWagAAaaMP/0Odilt9yxtw6guUHBUx\nXtpjYOwOrL89dPW0sXvgIVgwxRpe5HKj5tg70grYWJxmRN2tZkJuBUs9NEM5\nHrCC01Xt+/dHS5D3Fy0NS2kYlUFtP2cBZgAtIxZ5YHs3oMAwEXEyCa+S3MKG\na9dzPnIXtaSAInlf2ltjvGGUGEJ9KWtG9n3PPYcpbaXlt6xs0jjt18ilUkO1\n+bQS6S9sFtsMQ4UiSWD+dK20dwKo1QLx2t4UTRMF/NoB31MUo9NCS84JHPS3\nddcGxXR7J+khGz+TrOMRykfIm40P6tUOwEbqgEYH5+7xBSBLNvfLNzPDSl83\n2IxwfV/Uws5Hk9Z2L67MR1vhrd/5VkfMlqxt8uG5KeSS+CcWS1hdl6WklUPa\nQ1NRcXTCFYTNUIsnhpFa3oI/UvDH0fxWIz8fWptymIfiJym0N9sYTBy7pAvz\noSqJaR+hHbtcx5c5xb27PpmYvmtKHtjX8t+ETgDGla9x3xPZWK/cEDUJ9zCJ\nq4Bkbf6aiUkm4fpLUyVo/MzctspEJUm0drETf1pZNX7Ksi3Buzjor696dNGX\nld5F0NpDQs0lb9Nkkq7tWypmnC7ayDbi24cG6f9FJvFIct/Ut/1/TJEMqoYE\npd68W9Nohu43BpoT4Zzf9o1QiJB3+WApXhYS/FssM9W7m3Ww5XqhW2mcn4fW\nttOa\r\n=u5Ar\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHrhhQ6XTREX79ihNdqyAok+eH9ytqtvGIMnqscbcCkwIhAKYBItabRm7gRN6CCm1GMQEen4Gh2+wgCLOwquiQ69cQ"}]},"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_3.0.3_1605096202590_0.27159792576334385"},"_hasShrinkwrap":false},"3.0.4":{"name":"@terminus/ui-file-upload","version":"3.0.4","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.2.4","@angular/platform-browser":"^9.1.0","@fortawesome/angular-fontawesome":"^0.6.0","@fortawesome/fontawesome-svg-core":"^1.2.30","@fortawesome/pro-solid-svg-icons":"^5.14.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-button":"^2.0.7","@terminus/ui-icon":"^2.1.5","@terminus/ui-icon-button":"^2.0.5","@terminus/ui-pipes":"^1.0.9","@terminus/ui-spacing":"^1.0.11","@terminus/ui-styles":"^1.1.0","@terminus/ui-tooltip":"^1.0.13","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14","date-fns":"^2.13.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12"},"description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@3.0.4","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-6AiFMT9fVEW7gcLEaUVZ5TIGlcAxlodAoUcdOpUSq4Ru5od5G4VkBMzuLW7gkID9KQhy4LFy2A6mHsjhiXPXug==","shasum":"33e68aa5de63e9b03bed483807d00cf124d4f8ba","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-3.0.4.tgz","fileCount":71,"unpackedSize":751586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrB2nCRA9TVsSAnZWagAANFkP/1hQJO4z5OaN4kL9IdZH\nJsYAfuEjrt5We6x2k07s7ZKs5L0wwx9KwYCHMVdVXb06DCEIq9jirgaJY0iY\ns9k+aiJCcMv2dxX2EbJlY+bDsYfT6UvvF4npKh4UGb5fHEdMBHdrZA8vN8pg\nKMoruocrdXQ3ODwgpNCG6vfO4GmqtGU72C1jGjRgax9vXZ+pT3JBWl3qi1Oy\n6vu3RRTIGhYhjhl4njKNGM6auWrwfb2Axy2FF7SvnIgSSQkv4Xzo/83kMyvx\nizxpyKUWhn1oSRYPz5JKphDfNKFNrnC0b27a1OYfETepUJ3s/wfLc0v+yXpj\nNcMX122sq2Yn+oql1iJYN4SB0YPwfEff6vD3Utq+LMuH+/lAgjNS0Xq3f+hI\n85G72dVEQwsSvxDJ0UUTLOcIbK2mzRcNt8zXE9jRPfukudo4TebVDDbykNiY\nHW3mw2JEvKVAEA1jcIqSBkRaUSkzm1d/SrbUPl39wkGduRuR3DOyl245dOei\nzWzydoG96qBIYaXLmBo29YU5/Mbu6uB7FqoMkIu4SFYCZ1gbs+yLW4pVDDWx\nRaY6fos4mRx2R+6NESrN5Myo026uOZP1lTDmIiEWDpcFyxo7s0rLwBbwnQWs\n2i6XKCtLPMu73ERYjFdbRp0EkfE2i+o87+NzDk+Le6DfFHYM0wSvJQDrVbGV\naATB\r\n=3y0d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCHxbLg4ZlK1kU11ECp6ErEUxZ84XfeXTw7U+ZJRQpnRICIHioOc1MamLxuAVbWZmGtLtIhte3wON2PRQ3RZOdYtp8"}]},"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_3.0.4_1605115303043_0.4090452791630952"},"_hasShrinkwrap":false},"4.0.0":{"name":"@terminus/ui-file-upload","version":"4.0.0","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"dependencies":{"tslib":"^1.10.0","@angular-devkit/schematics":"9.1.9","@schematics/angular":"9.1.12"},"peerDependencies":{"@angular/common":"^9.1.0","@angular/core":"^9.1.0","@angular/flex-layout":"~9.0.0-beta.29","@angular/forms":"^9.1.0","@angular/material":"^9.2.4","@angular/platform-browser":"^9.1.0","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^1.0.0","@terminus/ui-button":"^3.0.0","@terminus/ui-pipes":"^1.0.9","@terminus/ui-spacing":"^1.0.11","@terminus/ui-styles":"^1.1.0","@terminus/ui-tooltip":"^1.0.13","@terminus/ui-utilities":"^1.0.9","@terminus/ui-validation-messages":"^1.0.14","date-fns":"^2.13.0","rxjs":"^6.5.0"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm5/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm5":"esm5/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm5":"fesm5/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@4.0.0","_nodeVersion":"12.19.0","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","dist":{"integrity":"sha512-UkNpEnlPuKrSPmUO5iEKZFPfD1Mjseshn2M3jdFcniH1UaBGGzAJO/AHLwE4iS3jz4gOgXNTaoCFJF8jrow4YA==","shasum":"d147e8bbd4b4f0fc92a2b0944227297691c8d8ee","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-4.0.0.tgz","fileCount":71,"unpackedSize":775496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftDSZCRA9TVsSAnZWagAAcTEP/1rkIjkIvhd4loKQWcBS\nveiB+TRl9+gDaPH5PG6HygB/PaX5mVbKp/VMMbrhN/dRcrzKYVjIucmtts/X\niTvSdmaxVv5tT1qHeGg8UV0EqqqWgxzqOxWMrECiZTEeDc0JSv5NliB/+TFg\nl191tRkosCgno3F7Ix7aZYalokKbdMa9FoNX0NjYXQJNJXOFbxdKuBzBoqAh\nYxxOo0LN95jYVvBl+4nJNOEugNABMkl3AfGswvN24KFFzQuN5esC/gL43Zrj\nRQ7wHkwlbE+w/vdU8qNMwaqQDzO1YBQch0yDHgpKItOxLVj1LBpwTh/VbKa4\nrzpGk3FYwz4eNPrijc5LbDysJeBDe2UOeMgX9yMn6L9ESujw58R77j8x6Kla\nifCU76fXjMhImNYJ2isARjmTEUcAo+2cx/6VYJ69lec1kqcwpQnOMxbUzJ5X\nQb/Yc04gZlgjJQXoFwIo9Tqg4dSSECsHlPCOResXVzidY+Oy7Wr6FJy6VMfZ\nG1wRQUQJLOGsbZTN5SejGjMpaP+E3ufFtGYtptQ34yMuxWo5YxL8+Bz0ep28\nLpYAGPpYz/mfBXVsj92haZTW6/OVHbqo+YjF9ckR55K4oowECQEu8gX1+58K\nSSf2GnZaJ02K8xaRwIxkLWOFqmlLpK/2blwUMACwkH9vn0gi1xwEjqth2Dz0\nX6m9\r\n=ecNj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEXHrim2QusNUXc9SzHruuelqhCPDbM0Hp+BejVZgBAAAiBhylSkuxl8mGRhFI4GlIbHFMDNCQ9BgCIjEtnG8342tg=="}]},"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"maintainers":[{"name":"terminus_devops","email":"devops@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"benjamincharity","email":"ben@benjamincharity.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_4.0.0_1605645464582_0.08329554884237833"},"_hasShrinkwrap":false},"5.0.0":{"name":"@terminus/ui-file-upload","version":"5.0.0","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"dependencies":{"tslib":"^2.0.3","@angular-devkit/schematics":"11.0.4","@schematics/angular":"11.0.4"},"peerDependencies":{"@angular/common":"^11.0.4","@angular/core":"^11.0.4","@angular/flex-layout":"~11.0.0-beta.33","@angular/forms":"^11.0.4","@angular/material":"^11.0.3","@angular/platform-browser":"^11.0.4","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^2.0.0","@terminus/ui-button":"^4.0.0","@terminus/ui-pipes":"^2.0.0","@terminus/ui-spacing":"^2.0.0","@terminus/ui-styles":"^2.0.0","@terminus/ui-tooltip":"^2.0.0","@terminus/ui-utilities":"^2.0.0","@terminus/ui-validation-messages":"^2.0.0","date-fns":"^2.16.1","rxjs":"^6.6.3"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm2015/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@5.0.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.22.1/node@v12.20.0+x64 (linux)","dist":{"integrity":"sha512-4akwldSrkmnLtqMewDD94sxlAiaJ/ClOIoCtW7lpDpyg1ouDkiADQ9gZ90fQ9qMfxNibQhf/3zcQk7JmthbKqA==","shasum":"db028639764288e4fbe7646cd9c4e71c10cee429","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-5.0.0.tgz","fileCount":51,"unpackedSize":532894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2hfGCRA9TVsSAnZWagAAXsUP/1zgP+L5yTQ2JiBGyVvY\nyUSuTqZtSuT+kxaXwSCREskM2ySrhnqovqhcA1Ypnm39e6TVkKz9t7aHAkG1\n2gJJiVleJyZbNeuSs95QzpAFiUVkOivdPRblMPwqXAtOigsc635rARiiW6+v\nfnJBPquNWqt/RK2wASmVAh/rL9ED9/+cCH1N537ZbrJaW1/UAd4LRfZ/nq8L\n7Ws2w1j7cTlVSYOQ7uCVVpNDXuhoYCCY9wsTmP37iH2B+4veBkqUYE1efG19\nt0Zo8WFYwdZway2tdgyJT9KFXAp2TVNTB7j185y3e4puRLYNqsUpaUxy+KwD\npaEbfrCtm3fbSlmuaNFrljG4Xa6wjg2Xai3ps4Vwhxxd0SOwS8H/FCJ1BH5d\nEuFsFwJvGZGh/JswSj8YD+MhPy5cAtl93Fv+TGrPE34532TxcWmDTydfpzGn\nZYnXpo3qIvstRzn+xo0iIvaqmIGWz0G23+GqZBxdvNVmczO72ny5EdX9dbfc\nnp/nMcyN5aoxmztOlqJFI8bKuzKRNRorAxqIB0aJOK7K2ZPXbkhuChaB7ElA\niibNcUbambU/nlM44hC9D2TX/HBt4MBQ3f2mCk6Jiq791cn1GsCFmMCvQBJk\njsW5PI9zqoQ8czIjcRSmEU/+YiYj6QVd5QRJ3Z14xyt9OhsmN/6nZxr8yjRN\nPxAr\r\n=tn8I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBRTrde4JvHqp0JsPMlFG4yaPfcWA1beQegdtxny20QXAiAr1lpkVijr2fnxLquAxYEPi6p3+GKvLVD/FWkObuJiRQ=="}]},"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"maintainers":[{"name":"benjamincharity","email":"ben@benjamincharity.com"},{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_5.0.0_1608128454134_0.2524581188751436"},"_hasShrinkwrap":false},"5.0.1":{"name":"@terminus/ui-file-upload","version":"5.0.1","license":"MIT","author":{"name":"@terminus"},"private":false,"homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"publishConfig":{"access":"public","tag":"next","directory":"../../../dist/libs/ui/file-upload"},"dependencies":{"tslib":"^2.0.3","@angular-devkit/schematics":"11.0.4","@schematics/angular":"11.0.4"},"peerDependencies":{"@angular/common":"^11.0.4","@angular/core":"^11.0.4","@angular/flex-layout":"~11.0.0-beta.33","@angular/forms":"^11.0.4","@angular/material":"^11.0.3","@angular/platform-browser":"^11.0.4","@terminus/design-tokens":"^3.1.0","@terminus/fe-utilities":"^2.0.0","@terminus/ui-button":"^4.0.0","@terminus/ui-pipes":"^2.0.0","@terminus/ui-spacing":"^2.0.0","@terminus/ui-styles":"^2.0.0","@terminus/ui-tooltip":"^2.0.0","@terminus/ui-utilities":"^2.0.0","@terminus/ui-validation-messages":"^2.0.0","date-fns":"^2.16.1","rxjs":"^6.6.3"},"schematics":"./schematics/collection.json","main":"bundles/terminus-ui-file-upload.umd.js","module":"fesm2015/terminus-ui-file-upload.js","es2015":"fesm2015/terminus-ui-file-upload.js","esm2015":"esm2015/terminus-ui-file-upload.js","fesm2015":"fesm2015/terminus-ui-file-upload.js","typings":"terminus-ui-file-upload.d.ts","metadata":"terminus-ui-file-upload.metadata.json","sideEffects":false,"readme":"<h1>File Upload</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nA drag'n'drop file upload component.\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [Installation](#installation)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [`TsSelectedFile`](#tsselectedfile)\n  - [File types](#file-types)\n  - [File size](#file-size)\n  - [Image dimensions](#image-dimensions)\n  - [Image ratio constraints](#image-ratio-constraints)\n  - [Clearing a file](#clearing-a-file)\n  - [Showing upload progress](#showing-upload-progress)\n  - [Enable multiple file selection](#enable-multiple-file-selection)\n  - [Handle multiple files](#handle-multiple-files)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-file-upload\n```\n\n### CSS imports\n\nIn your top-level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nCollect the selected file via the `selected` event:\n\n```html\n<ts-file-upload (selected)=\"handleFile($event)\"></ts-file-upload>\n```\n\n```typescript\n@import { TsSelectedFile } from '@terminus/ui-file-upload';\n\n...\n\n  handleFile(e: TsSelectedFile) {\n    // e.fileContents is the selected file\n  }\n```\n\n### `TsSelectedFile`\n\nThe `TsSelectedFile` instance will have several items available:\n\n```typescript\nfile.fileContents // string\nfile.height       // number (will be 0 for CSVs)\nfile.isCSV        // boolean\nfile.isImage      // boolean\nfile.isValid      // boolean\nfile.mimeType     // string\nfile.name         // string\nfile.size         // number\nfile.validations  // TsFileValidations\nfile.width        // number (will be 0 for CSVs)\n```\n\n### File types\n\nAccepted file types can be set by the `accept` input:\n\n```typescript\n@import { TsFileAcceptedMimeTypes } from '@terminus/ui-file-upload';\n\n...\n\n  myMimeTypes: TsFileAcceptedMimeTypes = ['image/png', 'image/jpg'];\n```\n\n```html\n<ts-file-upload [accept]=\"myMimeTypes\"></ts-file-upload>\n```\n\nIf a file is loaded with the incorrect MIME/type, a validation message will appear below the file input.\n\nThe default types can be found by importing `TS_ACCEPTED_MIME_TYPES`;\n\n### File size\n\nSet a maximum size for files in kilobytes:\n\n```html\n<ts-file-upload [maximumKilobytesPerFile]=\"{{ 6 * 1024 }}\"></ts-file-upload>\n```\n\nIf a file is loaded that exceeds the size limit, a validation message will appear below the file input.\n\n### Image dimensions\n\nImage dimension validation is controlled by an array of constraints passed to the component.\n\nA single constraint has this structure:\n\n```typescript\ninterface TsFileImageDimensionConstraint {\n  height: {\n    min: number;\n    max: number;\n  };\n  width: {\n    min: number;\n    max: number;\n  };\n}\n```\n\nFor fixed image dimensions set the min and max to the same number. The component will trim ranges before exposing to the user:\n\n```javascript\n// Example:\n{\n  height: {\n    min: 100;\n    max: 100;\n  };\n  width: {\n    min: 300;\n    max: 300;\n  };\n}\n// Will be displayed as: `300x100`\n\n{\n  height: {\n    min: 50;\n    max: 100;\n  };\n  width: {\n    min: 200;\n    max: 300;\n  };\n}\n// Will be displayed as: `200-300x50-100`\n```\n\nExample:\n\n```typescript\n@import { TsFileImageDimensionConstraints } from '@terminus/ui-file-upload';\n\n...\n\n  myDimensionConstraints: TsFileImageDimensionConstraints = [\n    {\n      height: {\n        min: 72,\n        max: 72,\n      },\n      width: {\n        min: 72,\n        max: 72,\n      },\n    },\n    {\n      height: {\n        min: 400,\n        max: 500,\n      },\n      width: {\n        min: 700,\n        max: 800,\n      },\n    },\n  ];\n```\n\n```html\n<ts-file-upload [dimensionConstraints]=\"myDimensionConstraints\"></ts-file-upload>\n```\n\nIf an image is selected that does not meet the dimension constraints, a validation message will appear below the file input.\n\n### Image ratio constraints\n\nImage ratio validation is controlled by an array of constraints passed to the component.\n\n```html\n<ts-file-upload [ratioConstraints]='[\"1:2\", \"3:4\"]'></ts-file-upload>\n```\n\nIf a file is loaded that do not meet any ratio constraints, a validation message will appear below the file input.\n\n### Clearing a file\n\nThe user can clear the selected file by clicking the `X` button next to the filename. An event will be emitted when this occurs:\n\n```html\n<ts-file-upload (cleared)=\"fileWasCleared()\"></ts-file-upload>\n```\n\n```typescript\n...\n\n  fileWasCleared() {\n    ...\n  }\n```\n\n### Showing upload progress\n\nThe progress of an upload can be reflected in the UI by passing a number between 0 and 100 to the `progress` input:\n\n```html\n<ts-file-upload [progress]=\"myProgress\"></ts-file-upload>\n```\n\n```typescript\n...\n  myProgress = 0;\n\n  // For example only. In a real scenario the progress value would be coming from the API.\n  // Start a counter to fake the upload progress value\n  startProgress() {\n    this.myProgress = 0;\n    const counting = setInterval(() => {\n      if (this.myProgress < 100) {\n        this.myProgress++;\n      } else {\n        clearInterval(counting);\n      }\n    }, 14);\n  }\n```\n\n### Enable multiple file selection\n\nSet `multiple` to `true`:\n\n```html\n<ts-file-upload [multiple]=\"true\"></ts-file-upload>\n```\n\n### Handle multiple files\n\nCurrently this component does not natively handle multiple file uploads (this support is planned for the future). There are ways to 'fake'\nthat functionality in a way.\n\nAn example:\n\n```html\n<!--\n  Here is the original file upload. Initially this is all the user sees.\n  When multiple files are selected, they will be emitted through this event:\n-->\n<ts-file-upload (selectedMultiple)=\"selectedMultiple($event)\"></ts-file-upload>\n\n<!-- Loop over the files that were collected from the selectedMultiple event -->\n<ng-container *ngFor=\"let v of files\">\n  <ts-file-upload\n    <!-- Only show this upload if the file still exists in our files collection: -->\n    *ngIf=\"fileExists(v.id)\"\n    <!-- Seed the file input with the file from our collection: -->\n    [seedFile]=\"v.file\"\n  ></ts-file-upload>\n</ng-container>\n```\n\n```typescript\n...\n\n  // We'll store the selected files here for reference:\n  files: {id: number; file: File}[] = [];\n\n  // Collect the selected files from the event and store them for reference:\n  selectedMultiple(e: File[]) {\n    let index = -1;\n\n    this.files = e.map((f) => {\n      index = index + 1;\n      return {\n        id: index,\n        file: f,\n      };\n    });\n  }\n\n  // Remove the correct file when the user clicks the clear button\n  clearFile(id: number): void {\n    if (!this.files || this.files.length < 1) {\n      return;\n    }\n\n    this.files = this.files.filter((obj) => {\n      return obj.id !== id;\n    });\n  }\n\n  // Helper function to determine when to hide one of the file upload components:\n  public fileExists(id: number): boolean {\n    if (!this.files || this.files.length < 1) {\n      return false;\n    }\n    const found = this.files.find((v) => {\n      return v.id === id;\n    });\n\n    return found ? true : false;\n  }\n```\n\n<!-- Links -->\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-file-upload.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-file-upload\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.js\n","readmeFilename":"README.md","description":"<h1>File Upload</h1>","_id":"@terminus/ui-file-upload@5.0.1","_nodeVersion":"12.20.1","_npmVersion":"lerna/3.22.1/node@v12.20.1+x64 (linux)","dist":{"integrity":"sha512-gje0/vajvBI7iXJib2aV7tLCqPmy61pMzkRiX5qiZkGME6iOm5k+PQaZqfsLepxvzZ52vhodZ0ehF7JeZve4zg==","shasum":"4a61bedc9239db215148018c0a245295045a6e3a","tarball":"https://registry.npmjs.org/@terminus/ui-file-upload/-/ui-file-upload-5.0.1.tgz","fileCount":51,"unpackedSize":534429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJUqRCRA9TVsSAnZWagAAVqUP/0qb3BkhUb2YkiAQaaLP\nrxRN6PxLxGntTnv+HdPPc0N7s2Ys7vEiPlIxuSuSVPm+Y7tSAEcREzNmOlCS\nfJuNaeGR+OmxWizhyIJA8oVECumzpW6P6ZUiono+hvnT34ctYnqTCjhWNsf2\nbaPD5Qh8IO2T+Jg8bsk6zLKcofWfDqNoWxOyxZjyFxM3Gi6iFSC6ZR0IMV/O\nCieAOZmxwDH/mKopffHIsueD2Ox0vr1QoJUGc4DNk1ffMkqXuglkNv68nBKr\nAw1McuJPPRZ6heWMnOGFHRDNLO3UBDJG3u769uYyGpbhr95/GsiXO/fYalG+\nU09rtK8ckAapTMqH8ot5Ey933Q323CdRW+2taPvf075x5aQY2EfDj3Jf9YKt\nxMrlwTJE3f0plExOlQgCneL70f/sfPsGunalZvs/KKqwTpuqmLOyKr6Ed12O\nNPO3zhI9g1Y8oWhhtP/c0GXsmwfvKPQ+bzvu19MNzaTz2KNR4ckAIhqxTsnk\nHddnQ0+6BSVKK6bq50yodth4T/XsGXvmvOzAY5J3IAd4XjVdwoScAlTEyH5L\ntgsFw9BX7pCHzp6IorOEtSzw0QBV1Hb3m+nZR/9i/Fqtz/yF2NyhcpiN8abo\nQBeX41oFb1MfHkwMqTPMHfkYWlOYYJyzCZVvUNJS7WZ8xbvE+VSheJxypMsG\nvhjG\r\n=1hIG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAkoNdv8z+fjgarWfRaGBPcZbohm/wJdi0Uk8rzIV+PaAiEAjNhklS+HRZfM0wboogPJSBrdinCDUU5pdvkYIGGQNC4="}]},"_npmUser":{"name":"terminus_devops","email":"devops@terminus.com"},"directories":{},"maintainers":[{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-file-upload_5.0.1_1613056656987_0.6502046522035085"},"_hasShrinkwrap":false}},"time":{"created":"2020-06-02T05:26:11.561Z","0.0.1":"2020-06-02T05:26:11.950Z","modified":"2022-04-07T05:16:12.407Z","1.0.0":"2020-06-04T18:55:55.688Z","1.0.1":"2020-06-05T02:30:38.473Z","1.0.2":"2020-06-10T18:58:56.953Z","1.0.3":"2020-06-11T14:18:21.272Z","1.0.4":"2020-06-23T15:35:02.067Z","1.0.5":"2020-07-07T15:38:55.896Z","1.0.6":"2020-07-13T19:24:05.076Z","1.0.7":"2020-07-14T18:53:13.945Z","2.0.0":"2020-07-27T19:39:57.753Z","2.0.1":"2020-07-28T15:29:09.889Z","2.0.2":"2020-07-28T18:28:33.570Z","2.0.3":"2020-07-29T13:05:27.251Z","2.0.4":"2020-07-29T15:33:56.867Z","2.0.5":"2020-07-30T20:34:36.814Z","2.0.6":"2020-07-31T14:00:36.054Z","2.0.7":"2020-08-05T19:12:03.424Z","2.0.8":"2020-08-06T13:59:37.300Z","2.0.9":"2020-08-10T16:20:26.503Z","2.0.10":"2020-08-14T15:30:26.517Z","2.0.11":"2020-09-04T15:02:04.586Z","2.1.0":"2020-09-08T18:52:22.215Z","2.1.1":"2020-09-11T15:39:38.364Z","2.1.2":"2020-09-11T17:35:11.912Z","2.1.3":"2020-09-14T17:38:43.723Z","3.0.0":"2020-10-01T14:38:45.469Z","3.0.1":"2020-10-02T14:20:17.947Z","3.0.2":"2020-11-06T16:58:12.714Z","3.0.3":"2020-11-11T12:03:22.786Z","3.0.4":"2020-11-11T17:21:43.274Z","4.0.0":"2020-11-17T20:37:44.742Z","5.0.0":"2020-12-16T14:20:54.248Z","5.0.1":"2021-02-11T15:17:37.316Z"},"maintainers":[{"name":"bmalinconico-terminus","email":"brian.malinconico@terminus.com"},{"name":"atlwendy","email":"atlwendy@gmail.com"},{"name":"terminus_devops","email":"devops@terminus.com"}],"description":"<h1>File Upload</h1>","homepage":"https://github.com/GetTerminus/terminus-oss","repository":{"type":"git","url":"git+https://github.com/GetTerminus/terminus-oss.git"},"author":{"name":"@terminus"},"bugs":{"url":"https://github.com/GetTerminus/terminus-oss/issues"},"license":"MIT","readme":"<h1>File Upload</h1>\n\n[![CI/CD Status][github-action-badge]][github-action-link] [![Codecov][codecov-badge]][codecov-project] [![MIT License][license-image]][license-url]  \n[![NPM version][npm-version-image]][npm-package] [![Library size][file-size-badge]][raw-distribution-js]\n\nA drag'n'drop file upload component.\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n## Table of Contents\n\n- [Installation](#installation)\n  - [CSS imports](#css-imports)\n  - [CSS resources](#css-resources)\n- [Usage](#usage)\n  - [`TsSelectedFile`](#tsselectedfile)\n  - [File types](#file-types)\n  - [File size](#file-size)\n  - [Image dimensions](#image-dimensions)\n  - [Image ratio constraints](#image-ratio-constraints)\n  - [Clearing a file](#clearing-a-file)\n  - [Showing upload progress](#showing-upload-progress)\n  - [Enable multiple file selection](#enable-multiple-file-selection)\n  - [Handle multiple files](#handle-multiple-files)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Installation\n\nUse the `ng add` command to quickly install all the needed dependencies:\n\n```bash\nng add @terminus/ui-file-upload\n```\n\n### CSS imports\n\nIn your top-level stylesheet, add these imports:\n\n```css\n@import '~@terminus/design-tokens/css/library-design-tokens.css';\n@import '~@terminus/ui-styles/terminus-ui.css';\n```  \n\n### CSS resources\n\nLoad the needed font families by adding this link to the `<head>` of your application:\n\n```css\n<link href=\"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\n```\n\n## Usage\n\nCollect the selected file via the `selected` event:\n\n```html\n<ts-file-upload (selected)=\"handleFile($event)\"></ts-file-upload>\n```\n\n```typescript\n@import { TsSelectedFile } from '@terminus/ui-file-upload';\n\n...\n\n  handleFile(e: TsSelectedFile) {\n    // e.fileContents is the selected file\n  }\n```\n\n### `TsSelectedFile`\n\nThe `TsSelectedFile` instance will have several items available:\n\n```typescript\nfile.fileContents // string\nfile.height       // number (will be 0 for CSVs)\nfile.isCSV        // boolean\nfile.isImage      // boolean\nfile.isValid      // boolean\nfile.mimeType     // string\nfile.name         // string\nfile.size         // number\nfile.validations  // TsFileValidations\nfile.width        // number (will be 0 for CSVs)\n```\n\n### File types\n\nAccepted file types can be set by the `accept` input:\n\n```typescript\n@import { TsFileAcceptedMimeTypes } from '@terminus/ui-file-upload';\n\n...\n\n  myMimeTypes: TsFileAcceptedMimeTypes = ['image/png', 'image/jpg'];\n```\n\n```html\n<ts-file-upload [accept]=\"myMimeTypes\"></ts-file-upload>\n```\n\nIf a file is loaded with the incorrect MIME/type, a validation message will appear below the file input.\n\nThe default types can be found by importing `TS_ACCEPTED_MIME_TYPES`;\n\n### File size\n\nSet a maximum size for files in kilobytes:\n\n```html\n<ts-file-upload [maximumKilobytesPerFile]=\"{{ 6 * 1024 }}\"></ts-file-upload>\n```\n\nIf a file is loaded that exceeds the size limit, a validation message will appear below the file input.\n\n### Image dimensions\n\nImage dimension validation is controlled by an array of constraints passed to the component.\n\nA single constraint has this structure:\n\n```typescript\ninterface TsFileImageDimensionConstraint {\n  height: {\n    min: number;\n    max: number;\n  };\n  width: {\n    min: number;\n    max: number;\n  };\n}\n```\n\nFor fixed image dimensions set the min and max to the same number. The component will trim ranges before exposing to the user:\n\n```javascript\n// Example:\n{\n  height: {\n    min: 100;\n    max: 100;\n  };\n  width: {\n    min: 300;\n    max: 300;\n  };\n}\n// Will be displayed as: `300x100`\n\n{\n  height: {\n    min: 50;\n    max: 100;\n  };\n  width: {\n    min: 200;\n    max: 300;\n  };\n}\n// Will be displayed as: `200-300x50-100`\n```\n\nExample:\n\n```typescript\n@import { TsFileImageDimensionConstraints } from '@terminus/ui-file-upload';\n\n...\n\n  myDimensionConstraints: TsFileImageDimensionConstraints = [\n    {\n      height: {\n        min: 72,\n        max: 72,\n      },\n      width: {\n        min: 72,\n        max: 72,\n      },\n    },\n    {\n      height: {\n        min: 400,\n        max: 500,\n      },\n      width: {\n        min: 700,\n        max: 800,\n      },\n    },\n  ];\n```\n\n```html\n<ts-file-upload [dimensionConstraints]=\"myDimensionConstraints\"></ts-file-upload>\n```\n\nIf an image is selected that does not meet the dimension constraints, a validation message will appear below the file input.\n\n### Image ratio constraints\n\nImage ratio validation is controlled by an array of constraints passed to the component.\n\n```html\n<ts-file-upload [ratioConstraints]='[\"1:2\", \"3:4\"]'></ts-file-upload>\n```\n\nIf a file is loaded that do not meet any ratio constraints, a validation message will appear below the file input.\n\n### Clearing a file\n\nThe user can clear the selected file by clicking the `X` button next to the filename. An event will be emitted when this occurs:\n\n```html\n<ts-file-upload (cleared)=\"fileWasCleared()\"></ts-file-upload>\n```\n\n```typescript\n...\n\n  fileWasCleared() {\n    ...\n  }\n```\n\n### Showing upload progress\n\nThe progress of an upload can be reflected in the UI by passing a number between 0 and 100 to the `progress` input:\n\n```html\n<ts-file-upload [progress]=\"myProgress\"></ts-file-upload>\n```\n\n```typescript\n...\n  myProgress = 0;\n\n  // For example only. In a real scenario the progress value would be coming from the API.\n  // Start a counter to fake the upload progress value\n  startProgress() {\n    this.myProgress = 0;\n    const counting = setInterval(() => {\n      if (this.myProgress < 100) {\n        this.myProgress++;\n      } else {\n        clearInterval(counting);\n      }\n    }, 14);\n  }\n```\n\n### Enable multiple file selection\n\nSet `multiple` to `true`:\n\n```html\n<ts-file-upload [multiple]=\"true\"></ts-file-upload>\n```\n\n### Handle multiple files\n\nCurrently this component does not natively handle multiple file uploads (this support is planned for the future). There are ways to 'fake'\nthat functionality in a way.\n\nAn example:\n\n```html\n<!--\n  Here is the original file upload. Initially this is all the user sees.\n  When multiple files are selected, they will be emitted through this event:\n-->\n<ts-file-upload (selectedMultiple)=\"selectedMultiple($event)\"></ts-file-upload>\n\n<!-- Loop over the files that were collected from the selectedMultiple event -->\n<ng-container *ngFor=\"let v of files\">\n  <ts-file-upload\n    <!-- Only show this upload if the file still exists in our files collection: -->\n    *ngIf=\"fileExists(v.id)\"\n    <!-- Seed the file input with the file from our collection: -->\n    [seedFile]=\"v.file\"\n  ></ts-file-upload>\n</ng-container>\n```\n\n```typescript\n...\n\n  // We'll store the selected files here for reference:\n  files: {id: number; file: File}[] = [];\n\n  // Collect the selected files from the event and store them for reference:\n  selectedMultiple(e: File[]) {\n    let index = -1;\n\n    this.files = e.map((f) => {\n      index = index + 1;\n      return {\n        id: index,\n        file: f,\n      };\n    });\n  }\n\n  // Remove the correct file when the user clicks the clear button\n  clearFile(id: number): void {\n    if (!this.files || this.files.length < 1) {\n      return;\n    }\n\n    this.files = this.files.filter((obj) => {\n      return obj.id !== id;\n    });\n  }\n\n  // Helper function to determine when to hide one of the file upload components:\n  public fileExists(id: number): boolean {\n    if (!this.files || this.files.length < 1) {\n      return false;\n    }\n    const found = this.files.find((v) => {\n      return v.id === id;\n    });\n\n    return found ? true : false;\n  }\n```\n\n<!-- Links -->\n[license-url]:         https://github.com/GetTerminus/terminus-oss/blob/release/LICENSE\n[license-image]:       http://img.shields.io/badge/license-MIT-blue.svg\n[codecov-project]:     https://codecov.io/gh/GetTerminus/terminus-oss\n[codecov-badge]:       https://codecov.io/gh/GetTerminus/terminus-oss/branch/release/graph/badge.svg\n[npm-version-image]:   http://img.shields.io/npm/v/@terminus/ui-file-upload.svg\n[npm-package]:         https://www.npmjs.com/package/@terminus/ui-file-upload\n[github-action-badge]: https://github.com/GetTerminus/terminus-oss/workflows/Release%20CI/badge.svg\n[github-action-link]:  https://github.com/GetTerminus/terminus-oss/actions?query=workflow%3A%22CI+Release%22\n[file-size-badge]:     http://img.badgesize.io/https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.min.js?compression=gzip\n[raw-distribution-js]: https://unpkg.com/@terminus/ui-file-upload/bundles/terminus-ui-file-upload.umd.js\n","readmeFilename":"README.md"}