@oiz/stzh-components 4.12.1 → 4.13.0-beta1

package/dist/collection/components/stzh-upload/stzh-upload.js

@@ -1,5 +1,5 @@
 import { Fragment, h, Host, } from "@stencil/core";
-import { getStzhEnvironment, hasSlot, isStzhElement } from "../../utils/utils";
+import { getStzhEnvironment, hasDefaultSlotContent, hasSlot, isStzhElement, } from "../../utils/utils";
 import { StzhInputDescription } from "../stzh-input/stzh-input-description";
 import "../../libraries/dropzone/dropzone";
 import QRCode from "qrcode";
@@ -221,6 +221,18 @@ export class StzhUpload {
         this.totalFilesState = [];
         this.duplicateFileName = "";
         this.duplicateFileSize = "";
+        /**
+         * Whether the component has meaningful default-slot content.
+         * Becomes obsolete with the implementation of PDESI-1908.
+         */
+        this.hasDefaultSlot = false;
+        /**
+         * Indicates whether default-slot content detection has run at least once.
+         * Used to avoid rendering state-dependent markup before the slot content
+         * has been evaluated.
+         * Becomes obsolete with the implementation of PDESI-1908.
+         */
+        this.hasResolvedDefaultSlot = false;
         this.PHOTOGRAPHING_BASE_URL = "/appl/mobiscan/rs";
         this.PHOTOGRAPHING_ENDPOINTS = {
             PING: "/ping",
@@ -274,6 +286,19 @@ export class StzhUpload {
         this.filePreviewId = function (file) {
             return `${this.uploadId}-${file._id}`;
         };
+        /**
+         * Re-evaluates default-slot content and updates the related render state.
+         * Becomes obsolete with implementation of PDESI-1908.
+         */
+        this.updateDefaultSlotState = () => {
+            const hasDefaultSlot = hasDefaultSlotContent(this.uploadEl, ["stzh-upload"]);
+            if (this.hasDefaultSlot !== hasDefaultSlot) {
+                this.hasDefaultSlot = hasDefaultSlot;
+            }
+            if (!this.hasResolvedDefaultSlot) {
+                this.hasResolvedDefaultSlot = true;
+            }
+        };
     }
     resetListener(event) {
         if (event.target.contains(this.uploadEl)) {
@@ -601,6 +626,9 @@ export class StzhUpload {
             });
         }
     }
+    componentDidLoad() {
+        this.updateDefaultSlotState();
+    }
     componentDidRender() {
         var _a;
         if (this.dropzone) {
@@ -1175,7 +1203,8 @@ export class StzhUpload {
         const errorUsed = hasSlot(this.uploadEl, "error") || ((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0;
         const descriptionUsed = !!this.description;
         const descriptionLongUsed = !!this.descriptionLong || hasSlot(this.uploadEl, "description-long");
-        const labelWrapperUsed = !this.labelHidden && (!!this.label || hasSlot(this.uploadEl) || descriptionLongUsed);
+        const labelUsed = !!this.label || this.hasDefaultSlot;
+        const labelWrapperUsed = !this.hasResolvedDefaultSlot || labelUsed || descriptionLongUsed;
         const classes = {
             "stzh-upload": true,
             "stzh-upload--is-invalid": this.invalid || errorUsed,
@@ -1213,14 +1242,14 @@ export class StzhUpload {
         if (!filesizeText) {
             instructionText = instructionText.replace(/\s*\(\s*\)\s*/, "");
         }
-        return (h(Host, { key: '7d364b7acdaf4825bea973dec2e7cf417a227efa', tabindex: this.disabled ? null : "-1", "is-invalid": this.invalid || errorUsed, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid || errorUsed ? "true" : "false", "aria-describedby": this.invalid || errorUsed ? this.error : undefined, role: "group", "aria-labelledby": labelWrapperUsed && (this.label || hasSlot(this.uploadEl)) ? `${this.uploadId}-label` : undefined }, h("stzh-toastbar", { key: 'c5067d0c91e550be32c63afb2059e02be1d31f87' }), h("div", { key: '91668faf8d374d0b70feda5d89149e242adf9ebf', class: classes, ref: el => (this.dropzoneElement = el) }, h("div", { key: '5fb7738dd2e340daef10f360b09f67b18a891606', ref: el => (this.hiddenInputContainerElement = el) }), labelWrapperUsed && (h("div", { key: '9f197c9258486c99d13dfcb270230dc3c0ef5bd0', class: "stzh-upload__label-wrapper" }, h("label", { key: 'ac3c5c16204458e59db25deb124a19999a312fcf', id: `${this.uploadId}-label`, class: {
+        return (h(Host, { key: '1afee2b3d1316a36eb75803724423c523b3f6fa7', tabindex: this.disabled ? null : "-1", "is-invalid": this.invalid || errorUsed, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid || errorUsed ? "true" : "false", "aria-describedby": this.invalid || errorUsed ? this.error : undefined, role: "group", "aria-labelledby": labelWrapperUsed && (this.label || hasSlot(this.uploadEl)) ? `${this.uploadId}-label` : undefined }, h("stzh-toastbar", { key: 'a3f8871947a0fe1c4c5470d442034d2f09d27a6e' }), h("div", { key: 'c7e597a30084ed37b8eeab1eded31c31fea6c738', class: classes, ref: el => (this.dropzoneElement = el) }, h("div", { key: '029b0357daa4abcf2a9ea0b3a0bb63f075550612', ref: el => (this.hiddenInputContainerElement = el) }), labelWrapperUsed && (h("div", { key: '0d6f8e0731936839341ee4dc704f6801d811074b', class: "stzh-upload__label-wrapper" }, h("label", { key: 'fc7c2092fe42df6e06fc6cc99b9766ec37b54a2e', id: `${this.uploadId}-label`, class: {
                 "stzh-upload__label": true,
                 "no-label-truncate": this.noLabelTruncate,
-            } }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '5752b027c6bedf6a97ef12e01ace35eafc3bf0dd', class: "stzh-upload__marker" }, h("span", { key: 'dbd732ec6926259a2b224cd4bc932dfff285defb', class: "stzh-upload__marker-symbol", "aria-hidden": "true" }, this.required
+            } }, this.label ? this.label : h("slot", { onSlotchange: this.updateDefaultSlotState }), labelUsed && !this.hideOptional && (h("span", { key: '3535faf8633cf520e90a692a2e90722a2d53f477', class: "stzh-upload__marker" }, h("span", { key: '45c458e6348ec2dc7084da4bf8c440a05b00a1d4', class: "stzh-upload__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: '771dafc94e40ed79a0b6aebb987f46b957594017', class: "stzh-upload__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: '0d107480108d6e741decf54d48ab66964c39cea4', class: "stzh-upload__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText)))), (this.descriptionLong || hasSlot(this.uploadEl, "description-long")) && (h(StzhInputDescription, { key: 'c3c2c92d561e379ee932e31f8d694dabff3b107c', classPrefix: "stzh-upload", id: `${this.uploadId}-description-long`, descriptionLong: this.descriptionLong, descriptionLongUsed: true, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel, showError: false, showDescriptionText: false })))), h("div", { key: '2349de6ccdf5063c56bdf10b6956be6c71005ed6', class: "stzh-upload__clickarea", ref: el => (this.clickareaElement = el) }, h("div", { key: '1585940afa26cc6e6b8eb4095d9f6c88b21f4fc1', class: "stzh-upload__heading-wrapper" }, h("div", { key: '3154f287ae4ef01216592887125a0859007db7b6', class: "stzh-upload__heading-inner-wrapper" }, h("div", { key: '40bd2a6696fb43a39ff8d903c872d11d13234a8f', class: "stzh-upload__buttons-wrapper" }, h("stzh-button", { key: 'fb4dbce22bb5968943006be8763f2142f13d32f6', id: `${this.uploadId}-button`, class: "stzh-upload__button", variant: "secondary", size: "tiny", ref: el => (this.chooseFileButtonEl = el), label: this.button ? this.button : this.localization.button, a11yDescribedby: this.a11yDescribedby, a11yControls: `${this.uploadId}-previews`, "aria-invalid": this.invalid || errorUsed ? "true" : "false", disabled: this.disabled }, h("stzh-icon", { key: '8968bb28dac68c912a7815dd2a0e32288c43d102', slot: "icon", name: "upload" })), this.isPhotographingAvailable && (h("stzh-button", { key: '7cd3d33a4eca99ab3ea31b88f88ea335051e13f2', onClick: this.onButtonScanClick, class: "stzh-upload__button-scan", variant: "secondary", size: "tiny", label: this.buttonScan ? this.buttonScan : this.localization.buttonScan, a11yDescribedby: this.a11yDescribedby, "aria-invalid": this.invalid || errorUsed ? "true" : "false", disabled: this.disabled }, h("stzh-icon", { key: 'f329b2c71913d8d3e70abb42519ad23b9b9b9776', slot: "icon", name: "camera" })))))), h("div", { key: '6bcc50fda1ad447fa578219fe21cda8cd38bbf44', class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, h("p", { key: '317048ef496e7af9fa27b1004af45ec5162b3836' }, instructionText))), (this.description || errorUsed) && (h(StzhInputDescription, { key: 'd1eddcdcd1463cd39823c26d79113551d2ee0105', classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error, description: this.description, descriptionLongUsed: false })), h("div", { key: 'e49426d619b235dd7cfe6bf0ba0fd9130116c2e3', id: `${this.uploadId}-previews`, class: "stzh-upload__previews-wrapper" }, h("div", { key: 'e0a8ac5bb3d416888ec333d4a64987822f3e106a', class: "stzh-upload__previews-inner-wrapper" }, h("div", { key: '40820996bb10ca8a61fb074695cc62d320ca413a', class: "stzh-upload__errors", ref: el => (this.errorsElement = el) }), h("div", { key: 'e1bbcde1a08fa5347225e7fb4fe8514f19a71bb9', class: "stzh-upload__previews dropzone-previews", ref: el => (this.previewsElement = el) })))), this.duplicateDetected && (h("div", { key: '9040abf9399b996b16257d72a6e21650aa5b1a74', class: "stzh-upload__previews-message-wrapper" }, h("stzh-message", { key: '9f2548f62b220d1d76c25fe71a46fa3e4a3305d4', type: "error", label: this.localization.duplicateFileUploadHeading, onStzhClose: () => (this.duplicateDetected = false) }, h("stzh-text", { key: 'b4cf16446aafee0660db6af6385107f0e6cb0afd' }, h("p", { key: 'dd2ab5f5bd90cdbea8223afce8c9406c0e4e91fd' }, "\u00AB", this.duplicateFileName, "\u00BB (", this.duplicateFileSize, ")"), h("p", { key: 'a29a6db5974f9ebac3e5bdf0976b576d0a6163c7' }, this.localization.duplicateFileUploadParagraph))))), this.totalTooBig && (h("div", { key: 'bf23c415b0a0ec5d2f96f679f2a99050bdea10e2', class: "stzh-upload__previews-message-wrapper" }, h("stzh-message", { key: '3eee217b42d031521090bdd4e63da8c1ce7840c9', type: "warning", label: this.totalTooBigMessageHeading, onStzhClose: () => (this.totalTooBig = false) }, h("stzh-text", { key: 'cdb158f41f00082241d7f8e47258aa51639ee439' }, h("p", { key: '62b061b8fca307aca313cfac414fe557b4a7befe' }, this.totalTooBigMessageBody, " ", this.totalTooBigMessageBody2))))), h("stzh-dialog", { key: '20f0e6ea658e9447dea35ca43fc66c5c9fd92f4d', ref: el => (this.photographingOverlayElement = el), onStzhClose: this.closePhotographingWebsocketConnection, class: this.isPhotographingAvailable && "stzh-dialog--fit-content", heading: this.localization.photographingTitle1 }, h("stzh-button", { key: 'fb1f84cfa27423e86ba68efebc98bc20b5d6511d', class: "stzh-upload-photographing__back-button", icon: "arrow-left", size: "tiny", variant: "tertiary-plain", "no-padding-left": "true", "no-padding-right": "true", onClick: this.closePhotographingOverlay }, this.localization.back), this.isPhotographingAvailable && (h(Fragment, { key: '2fbd7a1a6cf559dfca51a05c4e24b87aeb87bc99' }, h("div", { key: '1ee42624e419bdfc7730d9fa84e5d6bfa6fb804a', class: "stzh-upload-photographing__info" }, h("div", { key: '1c58bf86b6b8b8c12168477d8555344623db49fd', class: "stzh-upload-photographing__text-qrcode" }, h("div", { key: 'edde5725c7977c8952a1ad9c7f7a04f5f2b517e6', class: "stzh-upload-photographing-qrlink-container" }, h("stzh-text", { key: 'f497cfe077cfc7aefb2323727a1dbadfeb671f1a' }, this.localization.photographingText1)), h("div", { key: '1e896f5e86c39abc127027a1bf650e944f2a45f5', class: "stzh-upload-photographing-qrcode-container" }, h("canvas", { key: 'c7bdc24a9b17b5462a3688d9ba1bb93a139c89d4', class: "stzh-upload-photographing-qrcode", ref: el => (this.photographingQrcodeElement = el) })))), h("div", { key: '858f7f6070ea7a0bbac86f0d8735a7621774d05e', class: "stzh-upload-photographing__info" }, h("stzh-heading", { key: '4c5a4766b4d50eaf1e52dcc018b14e82805eb6b5', level: "3" }, this.localization.photographingTitle2), h("stzh-text", { key: '24dbac13f472465f56fdbabaf1a17c533814c58b' }, this.localization.photographingText2)), h("div", { key: '2495016b06cee36fb9c7e063959562314f7b4653', class: "stzh-upload-photographing__continue" }, !!this.photographingUrlDetails && (h("stzh-link", { key: '00e5defbc0b9ae2846599e9e314b05b38e5c5f58', class: "stzh-upload-photographing-link", href: this.photographingUrlDetails.url + "&label=" + this.cleanLabel(this.label), target: "_blank" }, this.localization.photographingContinue))))))));
+            : this.localization.$globals.optionalFieldText)))), (this.descriptionLong || hasSlot(this.uploadEl, "description-long")) && (h(StzhInputDescription, { key: 'f2e2acbdc24993024797b9f930d3f73583f0f150', classPrefix: "stzh-upload", id: `${this.uploadId}-description-long`, descriptionLong: this.descriptionLong, descriptionLongUsed: true, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel, showError: false, showDescriptionText: false })))), h("div", { key: '5631b7d40b17931dbe0e2ded57767907efc7beff', class: "stzh-upload__clickarea", ref: el => (this.clickareaElement = el) }, h("div", { key: 'e636eb4da691ca668d4e814c3cd031201e6b21e3', class: "stzh-upload__heading-wrapper" }, h("div", { key: 'c2f611456c08a0a995fda1c0891ea5a6bf4af6eb', class: "stzh-upload__heading-inner-wrapper" }, h("div", { key: 'bf4820e4d2f20f41021a2d60625e8204f8ba79d5', class: "stzh-upload__buttons-wrapper" }, h("stzh-button", { key: 'e1501359b5712d41ef279d29e5dda6f5a4c2ae9d', id: `${this.uploadId}-button`, class: "stzh-upload__button", variant: "secondary", size: "tiny", ref: el => (this.chooseFileButtonEl = el), label: this.button ? this.button : this.localization.button, a11yDescribedby: this.a11yDescribedby, a11yControls: `${this.uploadId}-previews`, "aria-invalid": this.invalid || errorUsed ? "true" : "false", disabled: this.disabled }, h("stzh-icon", { key: 'a765dfb24ecf0db37e969e74ef4e492fbed390ae', slot: "icon", name: "upload" })), this.isPhotographingAvailable && (h("stzh-button", { key: 'cbbaa377c07f02a06d82ce309545b5bd861267e2', onClick: this.onButtonScanClick, class: "stzh-upload__button-scan", variant: "secondary", size: "tiny", label: this.buttonScan ? this.buttonScan : this.localization.buttonScan, a11yDescribedby: this.a11yDescribedby, "aria-invalid": this.invalid || errorUsed ? "true" : "false", disabled: this.disabled }, h("stzh-icon", { key: 'bfc85ecf57f9b475ae6db2a31fa5aac5f6957040', slot: "icon", name: "camera" })))))), h("div", { key: '35afff863dd72ffa1c97678a3901e0bfa581545a', class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, h("p", { key: 'a82f7de8b8e029aed5291fbb8f57a9174ed9c5c0' }, instructionText))), (this.description || errorUsed) && (h(StzhInputDescription, { key: '2a59a2aced16877551424191aa2bff3365cfe15e', classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error, description: this.description, descriptionLongUsed: false })), h("div", { key: 'e6a9fa513f01fa07eb8997dafda8d8c1b38f569e', id: `${this.uploadId}-previews`, class: "stzh-upload__previews-wrapper" }, h("div", { key: '4bc89ff5fd68912ae8698079032a7ca625729c08', class: "stzh-upload__previews-inner-wrapper" }, h("div", { key: 'e40902663828f56736707a15347ee3e897cd8984', class: "stzh-upload__errors", ref: el => (this.errorsElement = el) }), h("div", { key: 'b28047732c8ac8fe2a317ac7018808da35aa445b', class: "stzh-upload__previews dropzone-previews", ref: el => (this.previewsElement = el) })))), this.duplicateDetected && (h("div", { key: '210dab81a1b69168a22c178227444aa3657a9b41', class: "stzh-upload__previews-message-wrapper" }, h("stzh-message", { key: 'e94f091622737aa8079ad46099067895afceb7a1', type: "error", label: this.localization.duplicateFileUploadHeading, onStzhClose: () => (this.duplicateDetected = false) }, h("stzh-text", { key: '8e049f3bdb31d75c4a50aa9696393351d4296e49' }, h("p", { key: '6d46520e2d6d329f29d9b83751b9b1253dbf7c31' }, "\u00AB", this.duplicateFileName, "\u00BB (", this.duplicateFileSize, ")"), h("p", { key: '95ec7c341380320c247f1ac5a46413146b74d82b' }, this.localization.duplicateFileUploadParagraph))))), this.totalTooBig && (h("div", { key: 'f3728d7a353af03c4a679bf62a181bbb769929f3', class: "stzh-upload__previews-message-wrapper" }, h("stzh-message", { key: 'cc754c3acfab23220e10152372843641961001cd', type: "warning", label: this.totalTooBigMessageHeading, onStzhClose: () => (this.totalTooBig = false) }, h("stzh-text", { key: '62efb41bcd7bc237e3f47b1c1cebf765d63b2922' }, h("p", { key: '79ff2e7debaf1088c6e32c79c979d97c6462c52d' }, this.totalTooBigMessageBody, " ", this.totalTooBigMessageBody2))))), h("stzh-dialog", { key: '3832ceba493fbdb6a6dfe1b4aa7a634a45ab3985', ref: el => (this.photographingOverlayElement = el), onStzhClose: this.closePhotographingWebsocketConnection, class: this.isPhotographingAvailable && "stzh-dialog--fit-content", heading: this.localization.photographingTitle1 }, h("stzh-button", { key: '1fdf4accf649afdfd7479e7816e1ed80d0c13996', class: "stzh-upload-photographing__back-button", icon: "arrow-left", size: "tiny", variant: "tertiary-plain", "no-padding-left": "true", "no-padding-right": "true", onClick: this.closePhotographingOverlay }, this.localization.back), this.isPhotographingAvailable && (h(Fragment, { key: 'b4d5f8aff34faa71e1c41b6a1f74bafa395f2e80' }, h("div", { key: '9199e5c5d0cbfb61ae73e6b7417d6b2bd3d033eb', class: "stzh-upload-photographing__info" }, h("div", { key: 'a8a99499c28a51edeaf5851c1f967a139a5fc483', class: "stzh-upload-photographing__text-qrcode" }, h("div", { key: '902b89f5dded00c9de7a17c57d4114cc0174a1b0', class: "stzh-upload-photographing-qrlink-container" }, h("stzh-text", { key: 'a0a66c8210b052d5309c10276e1fa00308e897dd' }, this.localization.photographingText1)), h("div", { key: '5be1ab0b8ea3fe0b4dc4bbeceba1b94c4a061b60', class: "stzh-upload-photographing-qrcode-container" }, h("canvas", { key: '3a34faa2635af5be9fd0e2075f0034bc5f4674a5', class: "stzh-upload-photographing-qrcode", ref: el => (this.photographingQrcodeElement = el) })))), h("div", { key: 'dfeae24b511640318cb92f6010a6b5a94569b2e4', class: "stzh-upload-photographing__info" }, h("stzh-heading", { key: 'c54b8f7c07bbf1950fb63df4ccb14d8cebacce59', level: "3" }, this.localization.photographingTitle2), h("stzh-text", { key: 'd4ce18d05e411ce7b086d7c9d64f781f27810bc2' }, this.localization.photographingText2)), h("div", { key: '46f38e62fe7c3e55f341cce561851902a763ce3d', class: "stzh-upload-photographing__continue" }, !!this.photographingUrlDetails && (h("stzh-link", { key: '903865a3b1e54fda5d9ea9ea52d74eb362178cc1', class: "stzh-upload-photographing-link", href: this.photographingUrlDetails.url + "&label=" + this.cleanLabel(this.label), target: "_blank" }, this.localization.photographingContinue))))))));
     }
     static get is() { return "stzh-upload"; }
     static get originalStyleUrls() {
@@ -2215,6 +2244,8 @@ export class StzhUpload {
             "totalFilesState": {},
             "duplicateFileName": {},
             "duplicateFileSize": {},
+            "hasDefaultSlot": {},
+            "hasResolvedDefaultSlot": {},
             "isPhotographingAvailable": {},
             "photographingUrlDetails": {},
             "photographingHost": {},