@w0s/input-file-preview 3.0.4 → 3.0.6

package/README.md

@@ -25,12 +25,12 @@
   inputFilePreview(document.querySelectorAll('.js-input-file-preview')); // `getElementById()` or `getElementsByClassName()` or `getElementsByTagName()` or `querySelector()` or `querySelectorAll()`
 </script>
 
-<input type="file" class="js-input-file-preview"
+<input type="file" id="input-file" class="js-input-file-preview"
   data-preview="preview"
   data-max-size="1048576"
 />
 <template id="preview">
-  <output><code>${name}</code> (<data value="${size}">${size} byte</data>) cannot be previewed.</output>
+  <output for="input-file"><code>${name}</code> (<data value="${size}">${size} byte</data>) cannot be previewed.</output>
 </template>
 ```
 
@@ -49,7 +49,9 @@
 
 - `<template>` element must have one `<output>` element.
   - 🆗 `<template> <output>Message</output> </template>`
+  - 🆗 `<template> <output>Message</output> <!-- comment --> </template>`
   - 🆗 `<ul> <template> <li> <output>Message</output> </li> </template> </ul>`
+  - 🆖 `<template> <output>Message</output> text </template>` (Text node other than empty string are not permitted as child nodes)
   - 🆖 `<template> <p>Message</p> </template>`
 - Include the error message in the `<output>` element.
 - `${name}` in the `<output>` element is converted to the file name, and `${size}` is converted to the file size (in bytes).

package/dist/attribute/Preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Preview.d.ts","sourceRoot":"","sources":["../../src/attribute/Preview.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,OAAO;;IAKb;;OAEG;gBACS,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS;IAqB5C,IAAI,QAAQ,IAAI,mBAAmB,CAElC;IAED,IAAI,UAAU,IAAI,MAAM,CAEvB;CACD"}
+{"version":3,"file":"Preview.d.ts","sourceRoot":"","sources":["../../src/attribute/Preview.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,OAAO;;IAKb;;OAEG;gBACS,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS;IAyC5C,IAAI,QAAQ,IAAI,mBAAmB,CAElC;IAED,IAAI,UAAU,IAAI,MAAM,CAKvB;CACD"}

package/dist/attribute/Preview.js

@@ -19,17 +19,33 @@ export default class {
             throw new Error(`Element \`#${value}\` must be a \`<template>\` element.`);
         }
         this.#template = template;
-        const output = template.content.querySelector('output');
-        if (output === null) {
+        const templateContent = template.content;
+        if (Array.from(templateContent.childNodes).some((node) => {
+            const { nodeType, nodeValue } = node;
+            if ([Node.ELEMENT_NODE, Node.COMMENT_NODE].includes(nodeType)) {
+                return false;
+            }
+            if (nodeType === Node.TEXT_NODE && nodeValue?.trim() === '') {
+                return false;
+            }
+            return true;
+        })) {
+            throw new Error('There must be only Element node, comment node, or empty text node within the `<template>` element.');
+        }
+        const outputElement = templateContent.querySelector('output');
+        if (outputElement === null) {
             throw new Error('There must be one `<output>` element within the `<template>` element.');
         }
-        this.#output = output;
+        this.#output = outputElement;
     }
     get template() {
         return this.#template;
     }
     get outputHtml() {
-        return 'getHTML' in this.#output ? this.#output.getHTML() : this.#output.innerHTML;
+        if ('getHTML' in HTMLOutputElement) {
+            return this.#output.getHTML();
+        }
+        return this.#output.innerHTML;
     }
 }
 //# sourceMappingURL=Preview.js.map

package/dist/attribute/Preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"Preview.js","sourceRoot":"","sources":["../../src/attribute/Preview.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,OAAO;IACJ,SAAS,CAAsB;IAE/B,OAAO,CAAoB;IAEpC;;OAEG;IACH,YAAY,KAAgC;QAC3C,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YAC3C,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;QACjE,CAAC;QAED,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;QAChD,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;YACvB,MAAM,IAAI,KAAK,CAAC,cAAc,KAAK,eAAe,CAAC,CAAC;QACrD,CAAC;QACD,IAAI,CAAC,CAAC,QAAQ,YAAY,mBAAmB,CAAC,EAAE,CAAC;YAChD,MAAM,IAAI,KAAK,CAAC,cAAc,KAAK,sCAAsC,CAAC,CAAC;QAC5E,CAAC;QACD,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAE1B,MAAM,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACxD,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;YACrB,MAAM,IAAI,KAAK,CAAC,uEAAuE,CAAC,CAAC;QAC1F,CAAC;QACD,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IAED,IAAI,UAAU;QACb,OAAO,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC,CAAE,IAAI,CAAC,OAA6B,CAAC,SAAS,CAAC;IAC3G,CAAC;CACD"}
+{"version":3,"file":"Preview.js","sourceRoot":"","sources":["../../src/attribute/Preview.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,OAAO;IACJ,SAAS,CAAsB;IAE/B,OAAO,CAAoB;IAEpC;;OAEG;IACH,YAAY,KAAgC;QAC3C,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YAC3C,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;QACjE,CAAC;QAED,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;QAChD,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;YACvB,MAAM,IAAI,KAAK,CAAC,cAAc,KAAK,eAAe,CAAC,CAAC;QACrD,CAAC;QACD,IAAI,CAAC,CAAC,QAAQ,YAAY,mBAAmB,CAAC,EAAE,CAAC;YAChD,MAAM,IAAI,KAAK,CAAC,cAAc,KAAK,sCAAsC,CAAC,CAAC;QAC5E,CAAC;QACD,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAE1B,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC;QACzC,IACC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;YACpD,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;YAErC,IAAK,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAc,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAC7E,OAAO,KAAK,CAAC;YACd,CAAC;YAED,IAAI,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;gBAC7D,OAAO,KAAK,CAAC;YACd,CAAC;YAED,OAAO,IAAI,CAAC;QACb,CAAC,CAAC,EACD,CAAC;YACF,MAAM,IAAI,KAAK,CAAC,oGAAoG,CAAC,CAAC;QACvH,CAAC;QAED,MAAM,aAAa,GAAG,eAAe,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC9D,IAAI,aAAa,KAAK,IAAI,EAAE,CAAC;YAC5B,MAAM,IAAI,KAAK,CAAC,uEAAuE,CAAC,CAAC;QAC1F,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC;IAC9B,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IAED,IAAI,UAAU;QACb,IAAI,SAAS,IAAI,iBAAiB,EAAE,CAAC;YACpC,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;QAC/B,CAAC;QACD,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC;IAC/B,CAAC;CACD"}

package/dist/event/change.d.ts

@@ -0,0 +1,15 @@
+import type MaxSize from '../attribute/MaxSize.ts';
+import type Preview from '../attribute/Preview.ts';
+/**
+ * `submit` event
+ *
+ * @param ev - Event
+ * @param data - Elements, attributes and others
+ * @param data.previewElements -
+ */
+declare const _default: (ev: Event, data: Readonly<{
+    preview: Preview;
+    maxSize: MaxSize;
+}>) => void;
+export default _default;
+//# sourceMappingURL=change.d.ts.map

package/dist/event/change.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"change.d.ts","sourceRoot":"","sources":["../../src/event/change.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,OAAO,MAAM,yBAAyB,CAAC;AACnD,OAAO,KAAK,OAAO,MAAM,yBAAyB,CAAC;AAEnD;;;;;;GAMG;yBAEF,IAAI,KAAK,EACT,MAAM,QAAQ,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CACjB,CAAC,KACA,IAAI;AANP,wBAoFE"}

package/dist/event/change.js

@@ -0,0 +1,76 @@
+import MIMEType from 'whatwg-mimetype';
+import { convert } from "../util/errorMessage.js";
+/**
+ * `submit` event
+ *
+ * @param ev - Event
+ * @param data - Elements, attributes and others
+ * @param data.previewElements -
+ */
+export default (ev, data) => {
+    const inputFileElement = ev.currentTarget;
+    const { files } = inputFileElement;
+    const { parentNode: templateParentNode } = data.preview.template;
+    if (templateParentNode === null) {
+        throw new Error('The parent element of the `<template>` element does not exist.'); // `<template>` 要素がルート要素ないし `DocumentFragment` であることはあり得ないのでここには到達しない
+    }
+    /* 既存のプレビューをクリア */
+    Array.from(templateParentNode.querySelectorAll(':scope > [data-cloned="template"]')).forEach((element) => {
+        element.remove();
+    });
+    const fragment = document.createDocumentFragment();
+    [...files].forEach((file) => {
+        const templateElementClone = data.preview.template.content.cloneNode(true);
+        /* 次の change イベント発生時に子要素を削除するために目印を付ける */
+        Array.from(templateElementClone.children).forEach((element) => {
+            element.dataset['cloned'] = 'template';
+        });
+        const outputElement = templateElementClone.querySelector('output');
+        outputElement?.replaceChildren();
+        fragment.appendChild(templateElementClone);
+        const { name: fileName, size: fileSize, type: fileType } = file;
+        const type = fileType !== '' ? new MIMEType(fileType).type : undefined;
+        /* ファイルが読み込み対象であるかどうかのチェック */
+        if ((data.maxSize.value !== undefined && fileSize > data.maxSize.value) || type === undefined || !['image', 'audio', 'video'].includes(type)) {
+            outputElement?.insertAdjacentHTML('beforeend', convert(data.preview.outputHtml, file));
+            return;
+        }
+        const fileReader = new FileReader();
+        fileReader.readAsDataURL(file);
+        fileReader.addEventListener('load', () => {
+            const fileReaderResult = fileReader.result;
+            if (fileReaderResult === null) {
+                throw new Error('File load failed.');
+            }
+            let mediaElement;
+            switch (type) {
+                case 'image': {
+                    mediaElement = document.createElement('img');
+                    mediaElement.src = fileReaderResult;
+                    mediaElement.alt = fileName;
+                    break;
+                }
+                case 'audio': {
+                    mediaElement = document.createElement('audio');
+                    mediaElement.src = fileReaderResult;
+                    mediaElement.controls = true;
+                    mediaElement.textContent = fileName;
+                    break;
+                }
+                case 'video': {
+                    mediaElement = document.createElement('video');
+                    mediaElement.src = fileReaderResult;
+                    mediaElement.controls = true;
+                    mediaElement.textContent = fileName;
+                    break;
+                }
+                default:
+                    /* 文字列チェックを行っているのでここには来ない */
+                    throw new Error();
+            }
+            outputElement?.appendChild(mediaElement);
+        });
+    });
+    templateParentNode.insertBefore(fragment, data.preview.template);
+};
+//# sourceMappingURL=change.js.map

package/dist/event/change.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"change.js","sourceRoot":"","sources":["../../src/event/change.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"yBAUgB,mBAAmB,UAAU,CAAC,OAAO,CAAC,GAAG,gBAAgB,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,KAAG,IAAI;AAA1G,wBAYE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"yBAcgB,mBAAmB,UAAU,CAAC,OAAO,CAAC,GAAG,gBAAgB,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,KAAG,IAAI;AAA1G,wBAYE"}

package/dist/index.js

@@ -1,8 +1,11 @@
-import InputFilePreview from "./InputFilePreview.js";
+import inputFilePreview from "./inputFilePreview.js";
 const validate = (element) => {
     if (!(element instanceof HTMLInputElement)) {
         throw new Error('Element must be a `HTMLInputElement`');
     }
+    if (element.type !== 'file') {
+        throw new Error('Element must be a `<input type=file>`');
+    }
     return element;
 };
 export default (elementOrElements) => {
@@ -10,11 +13,11 @@ export default (elementOrElements) => {
         return;
     }
     if (elementOrElements instanceof Element) {
-        new InputFilePreview(validate(elementOrElements));
+        inputFilePreview(validate(elementOrElements));
     }
     else {
         Array.from(elementOrElements).forEach((element) => {
-            new InputFilePreview(validate(element));
+            inputFilePreview(validate(element));
         });
     }
 };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AAErD,MAAM,QAAQ,GAAG,CAAC,OAAgB,EAAoB,EAAE;IACvD,IAAI,CAAC,CAAC,OAAO,YAAY,gBAAgB,CAAC,EAAE,CAAC;QAC5C,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;IACzD,CAAC;IAED,OAAO,OAAO,CAAC;AAChB,CAAC,CAAC;AAEF,eAAe,CAAC,iBAAmF,EAAQ,EAAE;IAC5G,IAAI,iBAAiB,KAAK,IAAI,EAAE,CAAC;QAChC,OAAO;IACR,CAAC;IAED,IAAI,iBAAiB,YAAY,OAAO,EAAE,CAAC;QAC1C,IAAI,gBAAgB,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC;IACnD,CAAC;SAAM,CAAC;QACP,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YACjD,IAAI,gBAAgB,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;QACzC,CAAC,CAAC,CAAC;IACJ,CAAC;AACF,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AAErD,MAAM,QAAQ,GAAG,CAAC,OAAgB,EAAwB,EAAE;IAC3D,IAAI,CAAC,CAAC,OAAO,YAAY,gBAAgB,CAAC,EAAE,CAAC;QAC5C,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;IACzD,CAAC;IACD,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;QAC7B,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;IAC1D,CAAC;IAED,OAAO,OAA+B,CAAC;AACxC,CAAC,CAAC;AAEF,eAAe,CAAC,iBAAmF,EAAQ,EAAE;IAC5G,IAAI,iBAAiB,KAAK,IAAI,EAAE,CAAC;QAChC,OAAO;IACR,CAAC;IAED,IAAI,iBAAiB,YAAY,OAAO,EAAE,CAAC;QAC1C,gBAAgB,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAC/C,CAAC;SAAM,CAAC;QACP,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YACjD,gBAAgB,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;QACrC,CAAC,CAAC,CAAC;IACJ,CAAC;AACF,CAAC,CAAC"}

package/dist/inputFilePreview.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLInputFileElement } from '../@types/lib.dom.ts';
+/**
+ * Show preview with `<input type=file>`
+ *
+ * @param thisElement - Target element
+ */
+declare const _default: (thisElement: HTMLInputFileElement) => void;
+export default _default;
+//# sourceMappingURL=inputFilePreview.d.ts.map

package/dist/inputFilePreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputFilePreview.d.ts","sourceRoot":"","sources":["../src/inputFilePreview.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAKjE;;;;GAIG;yBACa,aAAa,oBAAoB,KAAG,IAAI;AAAxD,wBAiBE"}

package/dist/inputFilePreview.js

@@ -0,0 +1,20 @@
+import Preview from "./attribute/Preview.js";
+import MaxSize from "./attribute/MaxSize.js";
+import changeEvent from "./event/change.js";
+/**
+ * Show preview with `<input type=file>`
+ *
+ * @param thisElement - Target element
+ */
+export default (thisElement) => {
+    const { preview: previewAttribute, maxSize: maxSizeAttribute } = thisElement.dataset;
+    const preview = new Preview(previewAttribute);
+    const maxSize = new MaxSize(maxSizeAttribute ?? '10485760');
+    thisElement.addEventListener('change', (ev) => {
+        changeEvent(ev, {
+            preview: preview,
+            maxSize: maxSize,
+        });
+    }, { passive: true });
+};
+//# sourceMappingURL=inputFilePreview.js.map

package/dist/inputFilePreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputFilePreview.js","sourceRoot":"","sources":["../src/inputFilePreview.ts"],"names":[],"mappings":"AACA,OAAO,OAAO,MAAM,wBAAwB,CAAC;AAC7C,OAAO,OAAO,MAAM,wBAAwB,CAAC;AAC7C,OAAO,WAAW,MAAM,mBAAmB,CAAC;AAE5C;;;;GAIG;AACH,eAAe,CAAC,WAAiC,EAAQ,EAAE;IAC1D,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,gBAAgB,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC;IAErF,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAE9C,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC,gBAAgB,IAAI,UAAU,CAAC,CAAC;IAE5D,WAAW,CAAC,gBAAgB,CAC3B,QAAQ,EACR,CAAC,EAAS,EAAE,EAAE;QACb,WAAW,CAAC,EAAE,EAAE;YACf,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,OAAO;SAChB,CAAC,CAAC;IACJ,CAAC,EACD,EAAE,OAAO,EAAE,IAAI,EAAE,CACjB,CAAC;AACH,CAAC,CAAC"}

package/package.json

@@ -1,51 +1,50 @@
-{
-	"name": "@w0s/input-file-preview",
-	"version": "3.0.4",
-	"description": "Show preview with `<input type=file>`",
-	"keywords": [
-		"file"
-	],
-	"homepage": "https://github.com/SaekiTominaga/js-library-browser#readme",
-	"bugs": {
-		"url": "https://github.com/SaekiTominaga/js-library-browser/issues"
-	},
-	"license": "MIT",
-	"author": "Saeki Tominaga",
-	"files": [
-		"dist/**/*.d.ts",
-		"!dist/**/*.test.d.ts",
-		"dist/**/*.d.ts.map",
-		"!dist/**/*.test.d.ts.map",
-		"dist/**/*.js",
-		"!dist/**/*.test.js",
-		"dist/**/*.js.map",
-		"!dist/**/*.test.js.map"
-	],
-	"type": "module",
-	"main": "dist/index.js",
-	"module": "dist/index.js",
-	"types": "dist/index.d.ts",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/SaekiTominaga/js-library-browser.git"
-	},
-	"scripts": {
-		"server": "http-server -o demo -c-1",
-		"prebuild": "rimraf dist/* -g",
-		"build": "tsc",
-		"watch": "tsc -w",
-		"lint": "eslint src/**/*.ts",
-		"pretest": "npm run build",
-		"test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest dist/.+\\.test\\.js  -c ../../jest.config.mjs --roots packages/input-file-preview"
-	},
-	"dependencies": {
-		"@w0s/html-escape": "^4.0.1",
-		"whatwg-mimetype": "^4.0.0"
-	},
-	"devDependencies": {
-		"@types/whatwg-mimetype": "^3.0.2"
-	},
-	"publishConfig": {
-		"access": "public"
-	}
-}
+{
+	"name": "@w0s/input-file-preview",
+	"version": "3.0.6",
+	"description": "Show preview with `<input type=file>`",
+	"keywords": [
+		"file"
+	],
+	"homepage": "https://github.com/SaekiTominaga/js-library-browser#readme",
+	"bugs": {
+		"url": "https://github.com/SaekiTominaga/js-library-browser/issues"
+	},
+	"license": "MIT",
+	"author": "Saeki Tominaga",
+	"files": [
+		"dist/**/*.d.ts",
+		"!dist/**/*.test.d.ts",
+		"dist/**/*.d.ts.map",
+		"!dist/**/*.test.d.ts.map",
+		"dist/**/*.js",
+		"!dist/**/*.test.js",
+		"dist/**/*.js.map",
+		"!dist/**/*.test.js.map"
+	],
+	"type": "module",
+	"main": "dist/index.js",
+	"module": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/SaekiTominaga/js-library-browser.git"
+	},
+	"scripts": {
+		"dev": "conc \"http-server -o demo -c-1\" \"tsc -w\"",
+		"prebuild": "rimraf dist/* -g",
+		"build": "tsc",
+		"lint": "eslint src/**/*.ts",
+		"pretest": "npm run build",
+		"test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest dist/.+\\.test\\.js  -c ../../jest.config.mjs --roots packages/input-file-preview"
+	},
+	"dependencies": {
+		"@w0s/html-escape": "^4.0.2",
+		"whatwg-mimetype": "^4.0.0"
+	},
+	"devDependencies": {
+		"@types/whatwg-mimetype": "^3.0.2"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

package/dist/InputFilePreview.d.ts

@@ -1,11 +0,0 @@
-/**
- * Show preview with `<input type=file>`
- */
-export default class {
-    #private;
-    /**
-     * @param thisElement - Target element
-     */
-    constructor(thisElement: HTMLInputElement);
-}
-//# sourceMappingURL=InputFilePreview.d.ts.map

package/dist/InputFilePreview.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InputFilePreview.d.ts","sourceRoot":"","sources":["../src/InputFilePreview.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,MAAM,CAAC,OAAO;;IASb;;OAEG;gBACS,WAAW,EAAE,gBAAgB;CAkGzC"}

package/dist/InputFilePreview.js

@@ -1,94 +0,0 @@
-import MIMEType from 'whatwg-mimetype';
-import { convert } from "./util/errorMessage.js";
-import Preview from "./attribute/Preview.js";
-import MaxSize from "./attribute/MaxSize.js";
-/**
- * Show preview with `<input type=file>`
- */
-export default class {
-    #inputFileElement;
-    #preview; // プレビューを表示するテンプレート
-    #maxSize; // プレビューを行う最大サイズ
-    #previewElements = new Set(); // プレビューを表示する要素
-    /**
-     * @param thisElement - Target element
-     */
-    constructor(thisElement) {
-        this.#inputFileElement = thisElement;
-        const { files } = thisElement;
-        if (files === null) {
-            throw new Error('Not a `<input type=file>`.');
-        }
-        const { preview: previewAttribute, maxSize: maxSizeAttribute } = thisElement.dataset;
-        this.#preview = new Preview(previewAttribute);
-        this.#maxSize = new MaxSize(maxSizeAttribute ?? '10485760');
-        thisElement.addEventListener('change', this.#changeEvent, { passive: true });
-    }
-    /**
-     * ファイル選択時の処理
-     */
-    #changeEvent = () => {
-        const { files } = this.#inputFileElement;
-        /* 既存のプレビューをリセット */
-        this.#previewElements.forEach((element) => {
-            element.remove();
-        });
-        const fragment = document.createDocumentFragment();
-        [...files].forEach((file) => {
-            const templateElementClone = this.#preview.template.content.cloneNode(true);
-            const outputElement = templateElementClone.querySelector('output');
-            outputElement.replaceChildren();
-            fragment.appendChild(templateElementClone);
-            const { name: fileName, size: fileSize, type: fileType } = file;
-            const { type } = new MIMEType(fileType);
-            /* ファイルが読み込み対象であるかどうかのチェック */
-            if ((this.#maxSize.value !== undefined && fileSize > this.#maxSize.value) || !['image', 'audio', 'video'].includes(type)) {
-                outputElement.insertAdjacentHTML('beforeend', convert(this.#preview.outputHtml, file));
-                return;
-            }
-            const fileReader = new FileReader();
-            fileReader.readAsDataURL(file);
-            fileReader.addEventListener('load', () => {
-                const fileReaderResult = fileReader.result;
-                if (fileReaderResult === null) {
-                    throw new Error('File load failed.');
-                }
-                let mediaElement;
-                switch (type) {
-                    case 'image': {
-                        mediaElement = document.createElement('img');
-                        mediaElement.src = fileReaderResult;
-                        mediaElement.alt = fileName;
-                        break;
-                    }
-                    case 'audio': {
-                        mediaElement = document.createElement('audio');
-                        mediaElement.src = fileReaderResult;
-                        mediaElement.controls = true;
-                        mediaElement.textContent = fileName;
-                        break;
-                    }
-                    case 'video': {
-                        mediaElement = document.createElement('video');
-                        mediaElement.src = fileReaderResult;
-                        mediaElement.controls = true;
-                        mediaElement.textContent = fileName;
-                        break;
-                    }
-                    default:
-                }
-                outputElement.appendChild(mediaElement);
-            });
-        });
-        let count = fragment.childElementCount;
-        this.#preview.template.parentNode?.insertBefore(fragment, this.#preview.template);
-        let previousElement = this.#preview.template.previousElementSibling;
-        // eslint-disable-next-line functional/no-loop-statements
-        while (count > 0) {
-            this.#previewElements.add(previousElement);
-            count -= 1;
-            previousElement = previousElement.previousElementSibling;
-        }
-    };
-}
-//# sourceMappingURL=InputFilePreview.js.map

package/dist/InputFilePreview.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"InputFilePreview.js","sourceRoot":"","sources":["../src/InputFilePreview.ts"],"names":[],"mappings":"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"}