@oiz/stzh-components 4.1.1-beta → 4.1.1-beta3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{app-globals-07208237.js → app-globals-6b2bb7e2.js} +2 -2
- package/dist/cjs/{app-globals-07208237.js.map → app-globals-6b2bb7e2.js.map} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/stzh-components.cjs.js +1 -1
- package/dist/cjs/stzh-upload.cjs.entry.js +23 -37
- package/dist/cjs/stzh-upload.cjs.entry.js.map +1 -1
- package/dist/collection/components/stzh-upload/stzh-upload.e2e.js +6 -2
- package/dist/collection/components/stzh-upload/stzh-upload.e2e.js.map +1 -1
- package/dist/collection/components/stzh-upload/stzh-upload.js +24 -38
- package/dist/collection/components/stzh-upload/stzh-upload.js.map +1 -1
- package/dist/collection/components/stzh-upload/stzh-upload.stories.js +524 -28
- package/dist/components/index.js +1 -1
- package/dist/components/stzh-upload.js +23 -37
- package/dist/components/stzh-upload.js.map +1 -1
- package/dist/esm/{app-globals-993885c2.js → app-globals-d150c886.js} +2 -2
- package/dist/esm/{app-globals-993885c2.js.map → app-globals-d150c886.js.map} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/stzh-components.js +1 -1
- package/dist/esm/stzh-upload.entry.js +23 -37
- package/dist/esm/stzh-upload.entry.js.map +1 -1
- package/dist/stzh-components/p-cac56a03.js +2 -0
- package/dist/stzh-components/{p-221194a4.js.map → p-cac56a03.js.map} +1 -1
- package/dist/stzh-components/{p-f91f7483.entry.js → p-e4bf1c8d.entry.js} +2 -2
- package/dist/stzh-components/p-e4bf1c8d.entry.js.map +1 -0
- package/dist/stzh-components/stzh-components.esm.js +1 -1
- package/dist/types/components/stzh-upload/stzh-upload.d.ts +3 -2
- package/dist/types/components.d.ts +2 -2
- package/dist/vscode-data.json +2 -2
- package/package.json +1 -1
- package/dist/stzh-components/p-221194a4.js +0 -2
- package/dist/stzh-components/p-f91f7483.entry.js.map +0 -1
|
@@ -4,8 +4,12 @@ const URL = 'components-upload';
|
|
|
4
4
|
const STORIES = [
|
|
5
5
|
"default",
|
|
6
6
|
"existing-files",
|
|
7
|
-
"photographing",
|
|
8
|
-
"
|
|
7
|
+
"photographing-enabled",
|
|
8
|
+
"limited-file-size",
|
|
9
|
+
"prevent-duplicate-file-names",
|
|
10
|
+
"disabled",
|
|
11
|
+
"inside-native-form-using-post",
|
|
12
|
+
"auto-proces-queue"
|
|
9
13
|
];
|
|
10
14
|
test.describe('upload', () => {
|
|
11
15
|
STORIES.forEach((storyId) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stzh-upload.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-upload/stzh-upload.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,mBAAmB,CAAC;AAEhC,MAAM,OAAO,GAAG;IACd,SAAS;IACT,gBAAgB;IAChB,
|
|
1
|
+
{"version":3,"file":"stzh-upload.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-upload/stzh-upload.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,mBAAmB,CAAC;AAEhC,MAAM,OAAO,GAAG;IACd,SAAS;IACT,gBAAgB;IAChB,uBAAuB;IACvB,mBAAmB;IACnB,8BAA8B;IAC9B,UAAU;IACV,+BAA+B;IAC/B,mBAAmB;CACpB,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IAC3B,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACtD,MAAM,UAAU,CAAC;gBACf,OAAO;gBACP,IAAI;gBACJ,GAAG,EAAE,GAAG;aACT,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { visualDiff } from '../../../.build/test/utils';\n\nconst URL = 'components-upload';\n\nconst STORIES = [\n \"default\",\n \"existing-files\",\n \"photographing-enabled\",\n \"limited-file-size\",\n \"prevent-duplicate-file-names\",\n \"disabled\",\n \"inside-native-form-using-post\",\n \"auto-proces-queue\"\n];\n\ntest.describe('upload', () => {\n STORIES.forEach((storyId) => {\n test(`story ${storyId} visual diff`, async ({ page }) => {\n await visualDiff({\n storyId,\n page,\n url: URL,\n });\n });\n });\n});\n"]}
|
|
@@ -39,7 +39,8 @@ export class StzhUpload {
|
|
|
39
39
|
this.removeAllFiles(true);
|
|
40
40
|
};
|
|
41
41
|
this.closePhotographingWebsocketConnection = () => {
|
|
42
|
-
|
|
42
|
+
var _a;
|
|
43
|
+
(_a = this.photographingWebsocket) === null || _a === void 0 ? void 0 : _a.close();
|
|
43
44
|
};
|
|
44
45
|
this.onButtonScanClick = event => {
|
|
45
46
|
event.preventDefault();
|
|
@@ -388,6 +389,23 @@ export class StzhUpload {
|
|
|
388
389
|
return `${window.location.origin}`;
|
|
389
390
|
}
|
|
390
391
|
}
|
|
392
|
+
removeFileFromState(file) {
|
|
393
|
+
var _a;
|
|
394
|
+
this.totalFilesState = this.totalFilesState.filter(f => f._id !== file._id);
|
|
395
|
+
// remove from hiddenInputFiles, falls relevant
|
|
396
|
+
if (this.preventHiddenInputClear) {
|
|
397
|
+
this.hiddenInputFiles = this.hiddenInputFiles.filter(trackedFile => trackedFile.name !== file.name);
|
|
398
|
+
// Aktualisiere das hidden file input Feld:
|
|
399
|
+
const hiddenFileInput = (_a = this.hiddenInputContainerElement) === null || _a === void 0 ? void 0 : _a.querySelector("input");
|
|
400
|
+
if (hiddenFileInput) {
|
|
401
|
+
const dataTransfer = new DataTransfer();
|
|
402
|
+
this.hiddenInputFiles.forEach(trackedFile => {
|
|
403
|
+
dataTransfer.items.add(trackedFile);
|
|
404
|
+
});
|
|
405
|
+
hiddenFileInput.files = dataTransfer.files;
|
|
406
|
+
}
|
|
407
|
+
}
|
|
408
|
+
}
|
|
391
409
|
async componentWillLoad() {
|
|
392
410
|
this.uploadId = `stzh-upload-${uploadCounter++}`;
|
|
393
411
|
this.existingFilesWatcher(this.existingFiles);
|
|
@@ -519,14 +537,7 @@ export class StzhUpload {
|
|
|
519
537
|
async addedfile(file) {
|
|
520
538
|
var _a;
|
|
521
539
|
file._id = previewCounter++;
|
|
522
|
-
self.totalFilesState.push(file);
|
|
523
|
-
let sessCheck = sessionStorage.getItem("totalFilesState");
|
|
524
|
-
if (!sessCheck) {
|
|
525
|
-
sessionStorage.setItem("totalFilesState", JSON.stringify(file));
|
|
526
|
-
}
|
|
527
|
-
else {
|
|
528
|
-
sessionStorage.setItem("totalFilesState", JSON.stringify(self.totalFilesState));
|
|
529
|
-
}
|
|
540
|
+
self.totalFilesState.push(...self.totalFilesState, file);
|
|
530
541
|
// Preserve files in hidden input when preventHiddenInputClear is true
|
|
531
542
|
if (self.preventHiddenInputClear) {
|
|
532
543
|
const hiddenFileInput = (_a = self.hiddenInputContainerElement) === null || _a === void 0 ? void 0 : _a.querySelector("input");
|
|
@@ -571,10 +582,6 @@ export class StzhUpload {
|
|
|
571
582
|
self.totalTooBigMessageBody = self.localization.fileTooBigTotal.replace("{{totalFilesize}}", `${(self.totalFileSize + fileSizeInMiB).toFixed(1)}`);
|
|
572
583
|
self.totalTooBigMessageBody2 = self.localization.fileTooBigTotal2.replace("{{maxFilesizeTotal}}", `${self.maxFilesizeTotal}`);
|
|
573
584
|
self.totalFilesState = self.totalFilesState.filter(f => f.name !== file.name);
|
|
574
|
-
let sessCheck = sessionStorage.getItem("totalFilesState");
|
|
575
|
-
if (sessCheck) {
|
|
576
|
-
sessionStorage.setItem("totalFilesState", JSON.stringify(self.totalFilesState));
|
|
577
|
-
}
|
|
578
585
|
return;
|
|
579
586
|
}
|
|
580
587
|
else {
|
|
@@ -769,28 +776,7 @@ export class StzhUpload {
|
|
|
769
776
|
files
|
|
770
777
|
}));
|
|
771
778
|
this.dropzone.on("removefile", (file) => {
|
|
772
|
-
|
|
773
|
-
this.totalFilesState = this.totalFilesState.filter(f => f._id !== file._id);
|
|
774
|
-
if (sessionStorage.getItem("totalFilesState")) {
|
|
775
|
-
let oldStorage = JSON.parse(sessionStorage.getItem("totalFilesState"));
|
|
776
|
-
let newStorage = oldStorage.filter((f) => f._id !== file._id);
|
|
777
|
-
sessionStorage.setItem("totalFilesState", JSON.stringify(newStorage));
|
|
778
|
-
}
|
|
779
|
-
else {
|
|
780
|
-
sessionStorage.setItem("totalFilesState", JSON.stringify(this.totalFilesState));
|
|
781
|
-
}
|
|
782
|
-
if (this.preventHiddenInputClear) {
|
|
783
|
-
// Remove the file from our tracked array
|
|
784
|
-
this.hiddenInputFiles = this.hiddenInputFiles.filter(trackedFile => trackedFile.name !== file.name);
|
|
785
|
-
const hiddenFileInput = (_a = this.hiddenInputContainerElement) === null || _a === void 0 ? void 0 : _a.querySelector("input");
|
|
786
|
-
if (hiddenFileInput) {
|
|
787
|
-
const dataTransfer = new DataTransfer();
|
|
788
|
-
this.hiddenInputFiles.forEach(trackedFile => {
|
|
789
|
-
dataTransfer.items.add(trackedFile);
|
|
790
|
-
});
|
|
791
|
-
hiddenFileInput.files = dataTransfer.files;
|
|
792
|
-
}
|
|
793
|
-
}
|
|
779
|
+
this.removeFileFromState(file);
|
|
794
780
|
return (this.stzhFileRemove.emit({
|
|
795
781
|
component: "stzh-upload",
|
|
796
782
|
file
|
|
@@ -929,9 +915,9 @@ export class StzhUpload {
|
|
|
929
915
|
"stzh-upload--has-instructions": !!this.description || !!this.localization.description
|
|
930
916
|
};
|
|
931
917
|
const descriptionTotalFileSizeLimit = this.localization.descriptionTotalFileSizeLimit;
|
|
932
|
-
return (h(Host, { key: '
|
|
918
|
+
return (h(Host, { key: '75aa0dd41df988d305aa84fa234845f381021a4a', "is-invalid": this.invalid || errorUsed }, h("stzh-toastbar", { key: 'e384a88e33c9b231dc95dffcd78e84632574b89a' }), h("div", { key: '96e4f6f5dde87da36298cd8564f5a44b39b849d9', class: classes, ref: el => (this.dropzoneElement = el) }, h("div", { key: 'ed299d4f5849b0401756f2eb0295b799759f44a3', ref: el => (this.hiddenInputContainerElement = el) }), h("div", { key: '08473a500435b33ea41316eb750a5672a18a4fdd', id: `${this.uploadId}-label` }, this.label && h("div", { key: '99745fac88ee1df5b7d789199bc837e672a287c4', class: "stzh-upload__label" }, this.label)), h("div", { key: 'cdac7a72c20872761dd0802c02f0d5c35da7436a', class: "stzh-upload__clickarea", ref: el => (this.clickareaElement = el) }, h("div", { key: '1fd97d997cc0da144060b9d444ccaa087372c813', class: "stzh-upload__heading-wrapper" }, h("div", { key: '7ef945872a7b994b2d12dd3d4823195af631b4d4', class: "stzh-upload__heading-inner-wrapper" }, h("div", { key: '72dffa8c21176e1cc18d8a74e95f6b9120997203', class: "stzh-upload__heading" }, this.heading ? this.heading : this.localization.heading), h("div", { key: 'fc3dc86c665314cb60477daeccf077c75851fb33', class: "stzh-upload__buttons-wrapper" }, h("stzh-button", { key: 'c1930d7252980e78a3a48d612a9367632a53da82', class: "stzh-upload__button", variant: "secondary", size: "small", ref: el => (this.linkElement = el), label: this.button ? this.button : this.localization.button, a11yDescribedby: `${this.uploadId}-label ${this.uploadId}-instruction` + (((_b = this._error) === null || _b === void 0 ? void 0 : _b.length) > 0 ? ` ${this.uploadId}-description` : ""), disabled: this.disabled, a11yControls: `${this.uploadId}-previews` }, h("stzh-icon", { key: '24424022052170398b4cf00a6e254c907a3ee289', slot: "icon", name: "upload" })), this.isPhotographingAvailable && (h("stzh-button", { key: 'ef497accd0d1f7c00e953e8fde2d3ad9627e36dd', class: "stzh-upload__button-scan", variant: "secondary", size: "small", label: this.buttonScan ? this.buttonScan : this.localization.buttonScan, onClick: this.onButtonScanClick }, h("stzh-icon", { key: 'f72fce67cc573f140ebfa1b509e5c60cf65a7250', slot: "icon", name: "camera" })))), h("div", { key: '441fe723c3eda8324f66165024a5ede2f1301a23', class: "stzh-upload__hint-wrapper" }, h("span", { key: '6e6826bebae45786826e72eb8a3ca66af87da846' }, this.localization.buttonIntro)))), h("div", { key: '29c072540722229af02c6dabec8b4c892aa38d9d', class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, h("p", { key: '720297f6757ff03483c13793cc98baa68e7f1545' }, description
|
|
933
919
|
.replace("{{fileformats}}", this.acceptedFiles)
|
|
934
|
-
.replace("{{filesize}}", `${this.maxFilesize}`), h("br", { key: '
|
|
920
|
+
.replace("{{filesize}}", `${this.maxFilesize}`), h("br", { key: 'e839e9a5e392a9122c5768eb6b996a192d907a2e' }), descriptionTotalFileSizeLimit.replace("{{maxFilesizeTotal}}", `${this.maxFilesizeTotal}`)))), ((_c = this._error) === null || _c === void 0 ? void 0 : _c.length) > 0 && (h("div", { key: 'e4b21e7a9951aa0c2516490c59cb9f3cc7bcece7', class: "stzh-upload__description-wrapper" }, h(StzhInputDescription, { key: '34ca4465a38d1fb255546023ffbcce7ca598bdab', classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error }))), h("div", { key: '3147f2d4164a36765abc7757e8d5a0ceb96f82a9', id: `${this.uploadId}-previews`, class: "stzh-upload__previews-wrapper" }, h("div", { key: 'ecf5f962753e7a6de99a860d5ba4b4e4b3c5d948', class: "stzh-upload__previews-inner-wrapper" }, h("div", { key: '1e2021b2790d7642e8eaa5756677c7509d93cc15', class: "stzh-upload__errors", ref: el => (this.errorsElement = el) }), h("div", { key: 'd80dd75e46adeee51a148e7a0d7e9f51e68304b5', class: "stzh-upload__previews dropzone-previews", ref: el => (this.previewsElement = el) })))), this.duplicateDetected && (h("div", { key: 'ea64f656909123b1a617a22c2cb10995b90580de', class: "stzh-upload__previews-message-wrapper" }, h("stzh-message", { key: 'b5860731a53a4a1afbe04bc53fc3fc857ed4db91', type: "error", label: this.localization.duplicateFileUploadHeading, onStzhClose: () => this.duplicateDetected = false }, h("stzh-text", { key: '225b69ebf9295ae128778b2c86d6c9fe12dd3ecd' }, h("p", { key: 'e9985d75d911ef9004b3021a04ee28421c420175' }, "\u00AB", this.duplicateFileName, "\u00BB (", this.duplicateFileSize, ")"), h("p", { key: 'ef5b4644fd017f87a06d7bc576422d0ac74de7bd' }, this.localization.duplicateFileUploadParagraph))))), this.totalTooBig && (h("div", { key: 'c3973a34d351ad81dfb0f97526ad8898a1984c78', class: "stzh-upload__previews-message-wrapper" }, h("stzh-message", { key: '92f91a561a448c603dfe8dbafc1cac78d34a4ddc', type: "warning", label: this.totalTooBigMessageHeading, onStzhClose: () => this.totalTooBig = false }, h("stzh-text", { key: '125d609e70be58db13083ed75deb9dd5b4e0c71f' }, h("p", { key: 'd5464f329509eb35fbf04116de310518ae62fe3c' }, this.totalTooBigMessageBody, " ", this.totalTooBigMessageBody2))))), h("stzh-dialog", { key: '6e3c7fe7ace437241c9dca030e1acc984928b49c', ref: el => (this.photographingOverlayElement = el), onStzhClose: this.closePhotographingWebsocketConnection, class: this.isPhotographingAvailable && "stzh-dialog--fit-content", heading: this.localization.photographingTitle1 }, h("stzh-button", { key: '93851966664342966bf50b382e5d90df384ee6ba', class: "stzh-upload-photographing__back-button", icon: "arrow-left", size: "small", variant: "tertiary-plain", "no-padding-left": "true", "no-padding-right": "true", onClick: this.closePhotographingOverlay }, this.localization.back), this.isPhotographingAvailable && (h(Fragment, { key: '44270227198a852c359191bcd05dec0969ced593' }, h("div", { key: '1ddb6f4288c9cc87b7ab6893d725fa3b64061ffb', class: "stzh-upload-photographing__info" }, h("div", { key: 'a0d23409adbc23d7263683080e114f7a6250312b', class: "stzh-upload-photographing__text-qrcode" }, h("div", { key: 'c5cc76a3dbecec3c2fb1eff8c21a5786dfbaeed2', class: "stzh-upload-photographing-qrlink-container" }, h("stzh-text", { key: '385ff854f52afb9f8b3d3514fa4c62ddb7dc3c21' }, this.localization.photographingText1)), h("div", { key: '50b5b04ecfdfb65a6544c331d4d9f861343ed8dd', class: "stzh-upload-photographing-qrcode-container" }, h("canvas", { key: '3457dea2caa437c2bd39ef06eeb63fbd7312851f', class: "stzh-upload-photographing-qrcode", ref: el => (this.photographingQrcodeElement = el) })))), h("div", { key: '4cf41425eff6101bc2fc042cff7cee93c8b66a84', class: "stzh-upload-photographing__info" }, h("stzh-heading", { key: '23fcc679fca9dd513d85aca9ffa3fd14f5253b92', level: "3" }, this.localization.photographingTitle2), h("stzh-text", { key: '23b67b78bfba0ba200d39c23f700a065a78c17a8' }, this.localization.photographingText2)), h("div", { key: '594fd4602a28892ba149b14b0dbe2cd42cf5a5cd', class: "stzh-upload-photographing__continue" }, !!this.photographingUrlDetails && (h("stzh-link", { key: '789e17cdcab1bbd55b7c7c413f55cdbb945f59fe', class: "stzh-upload-photographing-link", href: this.photographingUrlDetails.url + "&label=" + this.cleanLabel(this.label), target: "_blank" }, this.localization.photographingContinue))))))));
|
|
935
921
|
}
|
|
936
922
|
static get is() { return "stzh-upload"; }
|
|
937
923
|
static get originalStyleUrls() {
|
|
@@ -1704,7 +1690,7 @@ export class StzhUpload {
|
|
|
1704
1690
|
"optional": false,
|
|
1705
1691
|
"docs": {
|
|
1706
1692
|
"tags": [],
|
|
1707
|
-
"text": "Prevent clearing hidden input after adding a new file
|
|
1693
|
+
"text": "Prevent clearing hidden input after adding a new file\n(set true if you use stzh-upload inside a native multipart form with POST method)."
|
|
1708
1694
|
},
|
|
1709
1695
|
"attribute": "prevent-hidden-input-clear",
|
|
1710
1696
|
"reflect": false,
|