@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/routes/app/offers/scripts/rendering/variations/components/ForegroundImageBanner.js

@@ -0,0 +1,110 @@
+import "../../../constants.js";
+import { BaseComponent } from "../../lib/BaseComponent.js";
+import { _tagged_template_literal_loose } from "../../../../../../../js/4101.js";
+import { ImagePositionTypeEnum, LocationEnum, ImagePlacementTypeEnum } from "../../../../../../../src/graphql-types.js";
+import { buildImageTransformationUrl, buildCropSettings } from "../../../../../../../components/shared/controls/imageCropperHelpers.js";
+
+
+function ForegroundImageBanner_templateObject() {
+    const data = _tagged_template_literal_loose([
+        '\n        <img\n          src="',
+        '"\n          class="',
+        '"\n          alt="',
+        '"\n          onerror="this.style.display=\'none\';"\n        />\n      '
+    ]);
+    ForegroundImageBanner_templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    const data = _tagged_template_literal_loose([
+        ""
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+/* eslint-disable rulesdir/css-units */ 
+
+
+
+class ForegroundImageBanner extends BaseComponent {
+    get style() {
+        if (this.imageUrl) {
+            return /* css */ "\n        ." + this.FOREGROUND_IMAGE_CLASS_NAME + " {\n          position: relative;\n\n          height: " + (/* inlined export .BANNER_HEIGHT */"52px") + ";\n          max-height: " + (/* inlined export .BANNER_HEIGHT */"52px") + ";\n          min-height: " + (/* inlined export .BANNER_HEIGHT */"52px") + ";\n\n          /* z-index ensures image displays over banner */\n          z-index: 1;\n\n          " + (this.isPlacementLeft && this.isPositionFixed ? "position: absolute;" : "") + "\n          " + (this.isPlacementLeft && this.isPositionFixed ? "left: " + this.FOREGROUND_IMAGE_LEFT_PADDING + ";" : "") + "\n          " + (this.isPlacementLeft && this.isPositionHugContent ? "position: relative;" : "") + "\n\n          " + (this.isPlacementRight && this.isPositionFixed ? "position: absolute;" : "") + "\n          " + (this.isPlacementRight && this.isPositionFixed ? "right: " + this.FOREGROUND_IMAGE_RIGHT_PADDING + ";" : "") + "\n          " + (this.isPlacementRight && this.isPositionHugContent ? "position: relative;" : "") + "\n        }\n      ";
+        } else {
+            return /* css */ "";
+        }
+    }
+    get prependedContent() {
+        if (!this.hasImage || this.isPlacementRight) {
+            return null;
+        }
+        return this.content;
+    }
+    get appendedContent() {
+        if (!this.hasImage || this.isPlacementLeft) {
+            return null;
+        }
+        return this.content;
+    }
+    get content() {
+        if (this.imageUrl) {
+            return this.html /* html */ (ForegroundImageBanner_templateObject(), this.imageUrl, this.FOREGROUND_IMAGE_CLASS_NAME, this.altText);
+        } else {
+            return this.html /* html */ (_templateObject1());
+        }
+    }
+    get hasImage() {
+        return !!(this.props.foregroundImageUrl && this.props.foregroundImageConfig && !this.isPlacementNone && !this.isPlacementTop && !this.isMobile);
+    }
+    get isPlacementNone() {
+        return this.props.foregroundImageConfig.placement.type === ImagePlacementTypeEnum.None;
+    }
+    get isPlacementTop() {
+        return this.props.foregroundImageConfig.placement.type === ImagePlacementTypeEnum.Top;
+    }
+    get isPlacementLeft() {
+        if (!this.hasImage) {
+            return false;
+        }
+        return this.props.foregroundImageConfig.placement.type === ImagePlacementTypeEnum.Left;
+    }
+    get isPlacementRight() {
+        if (!this.hasImage) {
+            return false;
+        }
+        return this.props.foregroundImageConfig.placement.type === ImagePlacementTypeEnum.Right;
+    }
+    get isPositionFixed() {
+        return this.props.foregroundImageConfig.position.type === ImagePositionTypeEnum.Fixed;
+    }
+    get isPositionHugContent() {
+        return this.props.foregroundImageConfig.position.type === ImagePositionTypeEnum.HugContent;
+    }
+    get cropSettings() {
+        return buildCropSettings(this.props.foregroundImageConfig.cropPxX, this.props.foregroundImageConfig.cropPxY, this.props.foregroundImageConfig.cropPxWidth, this.props.foregroundImageConfig.cropPxHeight, this.props.foregroundImageConfig.originalPxWidth, this.props.foregroundImageConfig.originalPxHeight);
+    }
+    get imageUrl() {
+        if (this.props.foregroundImageUrl && this.cropSettings) {
+            return buildImageTransformationUrl(this.props.foregroundImageUrl, this.cropSettings);
+        } else {
+            return null;
+        }
+    }
+    get altText() {
+        const location = this.props.location === LocationEnum.Header ? "header" : "footer";
+        const placement = this.isPlacementLeft ? "to the left of" : "to the right of";
+        return "Promotional banner image in page " + location + " and placed " + placement + " promotional content";
+    }
+    constructor(props){
+        super(props, null), this.displayName = "ForegroundImageBanner", this.FOREGROUND_IMAGE_CLASS_NAME = "foreground-image", // Padding ensures image is not flush with the edge of the banner.
+        this.FOREGROUND_IMAGE_LEFT_PADDING = "12px", // There is extra padding on the right to account for the dismiss button. This leaves
+        // roughly the same amount of white space to the left and right of the dismiss button.
+        this.FOREGROUND_IMAGE_RIGHT_PADDING = "35px";
+    }
+}
+
+export { ForegroundImageBanner };

package/routes/app/offers/scripts/rendering/variations/components/ForegroundImageModal.js

@@ -0,0 +1,128 @@
+import { MODAL_IMAGE_MAX_WIDTHS, MODAL_IMAGE_MAX_HEIGHTS } from "../../../constants.js";
+import { BaseComponent } from "../../lib/BaseComponent.js";
+import { _tagged_template_literal_loose } from "../../../../../../../js/4101.js";
+import { LocationEnum, ImagePlacementTypeEnum } from "../../../../../../../src/graphql-types.js";
+import { buildImageTransformationUrl, buildCropSettings } from "../../../../../../../components/shared/controls/imageCropperHelpers.js";
+
+
+function ForegroundImageModal_templateObject() {
+    const data = _tagged_template_literal_loose([
+        '\n        <div class="',
+        '">\n          <img\n            src="',
+        '"\n            class="',
+        '"\n            onerror="this.style.display=\'none\';"\n            alt="',
+        '"\n          />\n        </div>\n      '
+    ]);
+    ForegroundImageModal_templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    const data = _tagged_template_literal_loose([
+        '\n        <div class="',
+        '">\n          <div class="',
+        '">\n            ',
+        "\n          </div>\n        </div>\n      "
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+/* eslint-disable rulesdir/css-units */ 
+
+
+
+class ForegroundImageModal extends BaseComponent {
+    get style() {
+        if (this.imageUrl) {
+            return /* css */ "\n        ." + this.FOREGROUND_IMAGE_CLASS_NAME_WRAPPER + " {\n          height: auto;\n          overflow: hidden;\n          display: flex;\n          align-self: stretch;\n        }\n        ." + this.FOREGROUND_IMAGE_CLASS_NAME + " {\n          max-width: " + this.maxWidth + ";\n          max-height: " + this.maxHeight + ";\n          min-width: 100%;\n          min-height: 100%;\n          object-fit: cover;\n        }\n      ";
+        } else {
+            return /* css */ "\n        ." + this.FOREGROUND_IMAGE_CLASS_NAME_WRAPPER + " {\n          display: flex;\n          align-self: stretch;\n        }\n        ." + this.FOREGROUND_IMAGE_MISSING_CLASS_NAME + " {\n          width: " + (this.isMobile ? this.FOREGROUND_IMAGE_MISSING_MOBILE_SIZE : this.FOREGROUND_IMAGE_MISSING_DEFAULT_SIZE) + ";\n          height: " + (this.isMobile ? this.FOREGROUND_IMAGE_MISSING_MOBILE_SIZE : this.FOREGROUND_IMAGE_MISSING_DEFAULT_SIZE) + ";\n          min-width: 100%;\n          min-height: 100%;\n          background-color: #E6E9EC;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n        }\n      ";
+        }
+    }
+    get isPlacementHorizontal() {
+        return this.isPlacementLeft || this.isPlacementRight;
+    }
+    get isPlacementVertical() {
+        return this.isPlacementTop;
+    }
+    get prependedContent() {
+        if (!this.hasImage || this.isPlacementRight) {
+            return null;
+        }
+        return this.content;
+    }
+    get appendedContent() {
+        if (!this.hasImage || this.isPlacementLeft || this.isPlacementTop) {
+            return null;
+        }
+        return this.content;
+    }
+    get content() {
+        if (this.imageUrl) {
+            return this.html /* html */ (ForegroundImageModal_templateObject(), this.FOREGROUND_IMAGE_CLASS_NAME_WRAPPER, this.imageUrl, this.FOREGROUND_IMAGE_CLASS_NAME, this.defaultAltText);
+        } else {
+            return this.html /* html */ (_templateObject1(), this.FOREGROUND_IMAGE_CLASS_NAME_WRAPPER, this.FOREGROUND_IMAGE_MISSING_CLASS_NAME, IMAGE_MISSING_ICON);
+        }
+    }
+    get hasImage() {
+        return !!(this.props.foregroundImageConfig && !this.isPlacementNone);
+    }
+    get isPlacementNone() {
+        return this.props.foregroundImageConfig.placement.type === ImagePlacementTypeEnum.None;
+    }
+    get isPlacementTop() {
+        if (!this.hasImage) {
+            return false;
+        }
+        return this.isMobile || this.props.foregroundImageConfig.placement.type === ImagePlacementTypeEnum.Top;
+    }
+    get isPlacementLeft() {
+        if (!this.hasImage || this.isMobile) {
+            return false;
+        }
+        return this.props.foregroundImageConfig.placement.type === ImagePlacementTypeEnum.Left;
+    }
+    get isPlacementRight() {
+        if (!this.hasImage || this.isMobile) {
+            return false;
+        }
+        return this.props.foregroundImageConfig.placement.type === ImagePlacementTypeEnum.Right;
+    }
+    get maxHeight() {
+        return MODAL_IMAGE_MAX_HEIGHTS[this.device][this.props.location];
+    }
+    get maxWidth() {
+        return MODAL_IMAGE_MAX_WIDTHS[this.device][this.props.location];
+    }
+    get cropSettings() {
+        return buildCropSettings(this.props.foregroundImageConfig.cropPxX, this.props.foregroundImageConfig.cropPxY, this.props.foregroundImageConfig.cropPxWidth, this.props.foregroundImageConfig.cropPxHeight, this.props.foregroundImageConfig.originalPxWidth, this.props.foregroundImageConfig.originalPxHeight);
+    }
+    get imageUrl() {
+        if (this.props.foregroundImageUrl && this.cropSettings) {
+            return buildImageTransformationUrl(this.props.foregroundImageUrl, this.cropSettings);
+        } else {
+            return null;
+        }
+    }
+    get defaultAltText() {
+        const location = this.props.location === LocationEnum.Popup ? "popup" : "sidebar";
+        let placement;
+        if (this.isPlacementLeft) {
+            placement = "to the left of";
+        } else if (this.isPlacementRight) {
+            placement = "to the right of";
+        } else {
+            placement = "above";
+        }
+        return "Promotional popup image placed " + placement + " promotional content";
+    }
+    constructor(props){
+        super(props, null), this.displayName = "ForegroundImageModal", this.FOREGROUND_IMAGE_CLASS_NAME_WRAPPER = "foreground-image-wrapper", this.FOREGROUND_IMAGE_CLASS_NAME = "foreground-image", this.FOREGROUND_IMAGE_MISSING_CLASS_NAME = "foreground-image-missing", this.FOREGROUND_IMAGE_MISSING_DEFAULT_SIZE = "400px", this.FOREGROUND_IMAGE_MISSING_MOBILE_SIZE = "200px";
+    }
+}
+const IMAGE_MISSING_ICON = /* html */ '\n  <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">\n    <g opacity="0.3">\n    <path fill-rule="evenodd" clip-rule="evenodd" d="M36.666 24.0003C36.666 22.1594 38.1584 20.667 39.9993 20.667C41.8403 20.667 43.3327 22.1594 43.3327 24.0003C43.3327 25.8413 41.8403 27.3337 39.9993 27.3337C38.1584 27.3337 36.666 25.8413 36.666 24.0003ZM39.9993 16.667C35.9493 16.667 32.666 19.9502 32.666 24.0003C32.666 28.0504 35.9493 31.3337 39.9993 31.3337C44.0494 31.3337 47.3327 28.0504 47.3327 24.0003C47.3327 19.9502 44.0494 16.667 39.9993 16.667ZM18.972 42.5262C20.8453 40.6528 22.111 39.3931 23.1807 38.577C24.2042 37.7961 24.81 37.6119 25.3359 37.6119C25.8619 37.6119 26.4676 37.7961 27.4912 38.577C28.5609 39.3931 29.8266 40.6528 31.6999 42.5262L35.9217 46.748L45.2551 56.0813C46.0361 56.8624 47.3024 56.8624 48.0835 56.0813C48.8645 55.3003 48.8645 54.0339 48.0835 53.2529L40.1663 45.3357C41.4137 44.1001 42.3555 43.2066 43.1807 42.577C44.2042 41.7961 44.81 41.6119 45.3359 41.6119C45.8619 41.6119 46.4676 41.7961 47.4912 42.577C48.5609 43.3931 49.8266 44.6528 51.6999 46.5262L53.2551 48.0813C54.0361 48.8624 55.3024 48.8624 56.0835 48.0813C56.8645 47.3003 56.8645 46.0339 56.0835 45.2529L54.5283 43.6977L54.4298 43.5992L54.4298 43.5992C52.6805 41.8498 51.2262 40.3954 49.9175 39.3969C48.5382 38.3445 47.0881 37.6119 45.3359 37.6119C43.5837 37.6119 42.1337 38.3445 40.7544 39.3969C39.7288 40.1794 38.6138 41.2419 37.3375 42.5069L34.5283 39.6977L34.4298 39.5992L34.4298 39.5992C32.6805 37.8498 31.2262 36.3954 29.9175 35.3969C28.5382 34.3445 27.0881 33.6119 25.3359 33.6119C23.5837 33.6119 22.1337 34.3445 20.7544 35.3969C19.4457 36.3954 17.9914 37.8498 16.2421 39.5992L16.1435 39.6977L11.9217 43.9196L7.92172 47.9196C7.14068 48.7006 7.14068 49.9669 7.92172 50.748C8.70277 51.529 9.9691 51.529 10.7502 50.748L14.7502 46.748L18.972 42.5262Z" fill="black"/>\n    <rect x="8" y="8" width="48" height="48" rx="10" stroke="black" stroke-width="4"/>\n    </g>\n  </svg>\n';
+
+export { ForegroundImageModal };

package/routes/app/offers/scripts/rendering/variations/components/Headline.js

@@ -0,0 +1,94 @@
+import "../../../constants.js";
+import { getHeadlineId } from "../../../utils.js";
+import { BaseComponent } from "../../lib/BaseComponent.js";
+import { _tagged_template_literal_loose } from "../../../../../../../js/4101.js";
+
+/* eslint-disable rulesdir/css-units */ 
+function Headline_templateObject() {
+    const data = _tagged_template_literal_loose([
+        '\n      <div class="headline banner">\n        ',
+        "\n      </div>\n    "
+    ]);
+    Headline_templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    const data = _tagged_template_literal_loose([
+        '\n      <div class="headline banner link">\n        ',
+        "\n        ",
+        "\n      </div>\n    "
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    const data = _tagged_template_literal_loose([
+        "\n      <div ",
+        ' class="headline modal" role="heading" aria-level="2">\n        ',
+        "\n      </div>\n    "
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    const data = _tagged_template_literal_loose([
+        "\n      <div ",
+        ' class="headline modal sidebar" role="heading" aria-level="2">\n        ',
+        "\n      </div>\n    "
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+
+
+
+class Headline extends BaseComponent {
+    get style() {
+        const { color, fontFamily } = this.props;
+        return /* css */ "\n      .headline {\n        font-weight: unset;\n        " + (fontFamily ? "font-family: '" + fontFamily + "';" : "") + "\n        margin: 0;\n        padding: 0;\n        overflow-wrap: anywhere;\n      }\n\n      .headline.modal {\n        color: " + (color != null ? color : "#1B1B1B") + ";\n        font-size: 32px;\n        " + (this.shouldSetDefaultFontWeight ? "font-weight: 600;" : "font-weight: unset;") + "\n        line-height: 1.2;\n        text-align: left;\n        flex-shrink: 0;\n      }\n\n      .headline.modal.sidebar {\n        font-size: 24px;\n      }\n\n      .headline.banner {\n        color: " + (color != null ? color : "#FFF") + ";\n        font-size: 16px;\n        " + (this.shouldSetDefaultFontWeight ? "font-weight: 200;" : "font-weight: unset;") + "\n        line-height: 150%;\n        max-width: 100%;\n        max-height: " + (/* inlined export .MAX_BANNER_HEADLINE_HEIGHT */"180px") + ";\n        overflow: hidden;\n      }\n    ";
+    }
+    get content() {
+        switch(this.props.type){
+            case "banner":
+                return this.banner;
+            case "banner-link":
+                return this.bannerLink;
+            case "modal":
+                return this.modal;
+            case "sidebar-modal":
+                return this.sidebarModal;
+        }
+    }
+    get banner() {
+        return this.html /* html */ (Headline_templateObject(), this.props.text);
+    }
+    get bannerLink() {
+        return this.html /* html */ (_templateObject1(), this.props.text, this.props.link);
+    }
+    get modal() {
+        const idAttribute = this.props.offerId ? 'id="' + getHeadlineId(this.props.offerId) + '"' : "";
+        return this.html /* html */ (_templateObject2(), idAttribute, this.props.text);
+    }
+    get sidebarModal() {
+        const idAttribute = this.props.offerId ? 'id="' + getHeadlineId(this.props.offerId) + '"' : "";
+        return this.html /* html */ (_templateObject3(), idAttribute, this.props.text);
+    }
+    constructor(props, hasOffersFontEnhancements){
+        var _this_props_text;
+        super(props, null), this.hasOffersFontEnhancements = hasOffersFontEnhancements, this.displayName = "Headline", this.shouldSetDefaultFontWeight = true;
+        // This handles offers that weren't updated after the font enhancements were added
+        if (((_this_props_text = this.props.text) == null ? void 0 : _this_props_text.includes("<p>")) && this.hasOffersFontEnhancements) {
+            this.shouldSetDefaultFontWeight = false;
+        }
+    }
+}
+
+export { Headline };

package/routes/app/offers/scripts/rendering/variations/components/MultiFieldForm.js

@@ -0,0 +1,302 @@
+import "../../../../../../../widget/qualified_form/qualified_form_api.js";
+import { getFormId } from "../../../utils.js";
+import { BaseComponent } from "../../lib/BaseComponent.js";
+import { _tagged_template_literal_loose, _extends } from "../../../../../../../js/4101.js";
+import { AlertIcon, DownArrowIcon } from "../icons.js";
+import { escapeHtml } from "../../../../../../../src/embedded_forms/utils.js";
+
+
+
+function MultiFieldForm_templateObject() {
+    const data = _tagged_template_literal_loose([
+        '\n      <form id="',
+        '" class="',
+        '">\n        <div class="',
+        '">\n          ',
+        "\n        </div>\n      </form>\n    "
+    ]);
+    MultiFieldForm_templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    const data = _tagged_template_literal_loose([
+        '\n        <div class="',
+        '">\n          <div class="',
+        '">\n            ',
+        "\n            ",
+        '\n          </div>\n          <div class="',
+        '">\n            ',
+        '\n            <div class="',
+        '"></div>\n          </div>\n        </div>\n      '
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    const data = _tagged_template_literal_loose([
+        '\n      <label class="',
+        '" for="',
+        '">\n        ',
+        "\n        ",
+        "\n      </label>\n    "
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    const data = _tagged_template_literal_loose([
+        '\n      <input\n        id="',
+        '"\n        class="',
+        '"\n        type="text"\n        name="',
+        '"\n        placeholder="',
+        '"\n      />\n    '
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject4() {
+    const data = _tagged_template_literal_loose([
+        '\n      <input\n        id="',
+        '"\n        class="',
+        '"\n        type="number"\n        name="',
+        '"\n        placeholder="',
+        '"\n      />\n    '
+    ]);
+    _templateObject4 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject5() {
+    const data = _tagged_template_literal_loose([
+        '\n      <input\n        id="',
+        '"\n        class="',
+        '"\n        type="checkbox"\n        name="',
+        '"\n      />\n    '
+    ]);
+    _templateObject5 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject6() {
+    const data = _tagged_template_literal_loose([
+        '\n      <input\n        id="',
+        '"\n        class="',
+        '"\n        type="tel"\n        name="',
+        '"\n        placeholder="',
+        '"\n      />\n    '
+    ]);
+    _templateObject6 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject7() {
+    const data = _tagged_template_literal_loose([
+        '\n      <textarea\n        id="',
+        '"\n        class="',
+        '"\n        name="',
+        '"\n        placeholder="',
+        '"\n      ></textarea>\n    '
+    ]);
+    _templateObject7 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject8() {
+    const data = _tagged_template_literal_loose([
+        '\n              <option value="',
+        '">\n                ',
+        "\n              </option>\n            "
+    ]);
+    _templateObject8 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject9() {
+    const data = _tagged_template_literal_loose([
+        '\n      <div class="',
+        '">\n        <select\n          id="',
+        '"\n          class="',
+        '"\n          name="',
+        '"\n        >\n          ',
+        "\n          ",
+        "\n        </select>\n        ",
+        "\n      </div>\n    "
+    ]);
+    _templateObject9 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject10() {
+    const data = _tagged_template_literal_loose([
+        '\n      <input\n        id="',
+        '"\n        class="',
+        '"\n        type="email"\n        name="',
+        '"\n        placeholder="',
+        '"\n        value="',
+        '"\n        disabled\n      />\n    '
+    ]);
+    _templateObject10 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+/* eslint-disable rulesdir/css-units */ 
+
+
+
+
+class MultiFieldForm extends BaseComponent {
+    get style() {
+        return /* css */ "\n      ." + this.cx.form + ", ." + this.cx.formContainer + " {\n        display: flex;\n        gap: 24px;\n        flex-direction: column;\n        width: 100%;\n      }\n\n      ." + this.cx.formContainer + " {\n        gap: 16px;\n      }\n\n      ." + this.cx.inputContainer + " {\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n        align-self: stretch;\n      }\n\n      ." + this.cx.inputContainerRow + " {\n        display: contents;\n      }\n\n      ." + this.cx.inputContainerRow + ":has(." + this.cx.input + '[type="checkbox"]) {\n        display: flex;\n        flex-direction: row-reverse;\n        align-items: center;\n        gap: 8px;\n        width: 100%;\n        justify-content: flex-end;\n      }\n\n      .' + this.cx.inputLabel + " {\n        color: #1B1B1B;\n        font-family: inherit;\n        font-size: 14px;\n        font-style: normal;\n        font-weight: 600;\n        line-height: 22px;\n      }\n\n      ." + this.cx.inputLabelOptional + " {\n        color: #6E7879;\n        font-weight: 400;\n      }\n\n      ." + this.cx.input + " {\n        font-family: inherit;\n        font-size: 14px;\n        line-height: 22px;\n        height: 40px;\n        min-height: 40px;\n        width: 100%;\n        box-sizing: border-box;\n        border: 1px solid #C8CED0ED;\n        border-radius: 4px;\n        padding: 8px 16px;\n        color: #1B1B1B;\n        font-weight: 400;\n        background-color: white;\n      }\n\n      ." + this.cx.input + '[type="checkbox"] {\n        height: 20px;\n        width: 20px;\n      }\n\n      textarea.' + this.cx.input + " {\n        resize: vertical;\n        padding-top: 9px;\n        overflow: hidden;\n      }\n\n      ." + this.cx.selectContainer + " {\n        position: relative;\n        width: 100%;\n        height: 100%;\n        cursor: pointer;\n      }\n\n      select." + this.cx.input + " {\n        -webkit-appearance: none;\n        appearance: none;\n      }\n\n      select." + this.cx.input + " + svg {\n        position: absolute;\n        right: 8px;\n        top: calc(50% - 8px);\n        fill: rgb(138, 147, 148);\n        height: 16px;\n        width: 16px;\n        pointer-events: none;\n      }\n\n      ." + this.cx.input + '[aria-invalid="true"] {\n        border-color: #E4251B;\n        outline: 2px solid #E4251B;\n        outline-offset: 2px;\n      }\n\n      .' + this.cx.errorMessageContainer + " {\n        display: none;\n        padding: 0px 4px;\n        align-items: center;\n        gap: 4px;\n        align-self: stretch;\n        border-radius: 4px;\n        background: #FCEDEC;\n\n        & svg {\n          width: 16px;\n          height: 16px;\n          fill: #E4251B;\n        }\n      }\n\n      ." + this.cx.inputContainer + ":has(." + this.cx.input + '[aria-invalid="true"]) .' + this.cx.errorMessageContainer + " {\n        display: flex;\n      }\n\n      ." + this.cx.errorMessage + " {\n        color: #E4251B;\n        font-family: inherit;\n        font-size: 12px;\n        font-style: normal;\n        font-weight: 400;\n        line-height: 18px;\n      }\n\n      " + this.cssOverride("form") + "\n      " + this.cssOverride("formContainer") + "\n      " + this.cssOverride("inputContainer") + "\n      " + this.cssOverride("inputLabel") + "\n      " + this.cssOverride("input") + "\n    ";
+    }
+    get content() {
+        return this.html /* html */ (MultiFieldForm_templateObject(), getFormId(this.props.id), this.cx.form, this.cx.formContainer, this.fields);
+    }
+    get fields() {
+        return this.props.inputFields.map((rawField)=>{
+            const field = this.getField(rawField);
+            return this.html /* html */ (_templateObject1(), this.cx.inputContainer, this.cx.inputContainerRow, this.getHTMLFieldLabel(field), this.getHTMLField(field), this.cx.errorMessageContainer, AlertIcon, this.cx.errorMessage);
+        });
+    }
+    getHTMLFieldLabel(field) {
+        let labelSuffix = "";
+        if (field.type === "boolean" && field.mustCheck) {
+            labelSuffix = '&nbsp;<span class="' + this.cx.inputLabelOptional + '">(required)</span>';
+        } else if (field.optional) {
+            labelSuffix = '&nbsp;<span class="' + this.cx.inputLabelOptional + '">(optional)</span>';
+        }
+        return this.html /* html */ (_templateObject2(), this.cx.inputLabel, this.getFieldId(field), escapeHtml(field.label), labelSuffix);
+    }
+    setErrors(form, errors) {
+        const inputs = this.getAllInputs(form);
+        for (const input of inputs){
+            const error = errors[input.name];
+            const container = input.closest("." + this.cx.inputContainer);
+            const errorMessageNode = container == null ? void 0 : container.querySelector("." + this.cx.errorMessage);
+            if (error) {
+                input.setAttribute("aria-invalid", "true");
+                container == null ? void 0 : container.classList.add(this.cx.hasError);
+                if (errorMessageNode) {
+                    errorMessageNode.textContent = this.getErrorMessage(error);
+                }
+            } else {
+                input.removeAttribute("aria-invalid");
+                container == null ? void 0 : container.classList.remove(this.cx.hasError);
+                if (errorMessageNode) {
+                    errorMessageNode.textContent = "";
+                }
+            }
+        }
+    }
+    getHTMLField(field) {
+        switch(field.type){
+            case "string":
+            case "company":
+            case "name":
+                return this.getTextField(field);
+            case "decimal":
+                return this.getNumberField(field);
+            case "boolean":
+                return this.getCheckboxField(field);
+            case "phone":
+                return this.getPhoneField(field);
+            case "text":
+                return this.getTextareaField(field);
+            case "picklist":
+                return this.getPicklistField(field);
+            case "email":
+                return this.getEmailField(field);
+        }
+    }
+    getField(field) {
+        if (field.type === "email") {
+            return field;
+        }
+        const override = this.inputFieldsOverridesMap.get(field.fieldId);
+        if (!override) return field;
+        const overridenField = _extends({}, field);
+        if (override.placeholder) {
+            overridenField.placeholder = override.placeholder;
+        }
+        if (override.label) {
+            overridenField.label = override.label;
+        }
+        return overridenField;
+    }
+    getTextField(field) {
+        return this.html /* html */ (_templateObject3(), this.getFieldId(field), this.cx.input, escapeHtml(field.name), escapeHtml(field.placeholder));
+    }
+    getNumberField(field) {
+        return this.html /* html */ (_templateObject4(), this.getFieldId(field), this.cx.input, escapeHtml(field.name), escapeHtml(field.placeholder));
+    }
+    getCheckboxField(field) {
+        return this.html /* html */ (_templateObject5(), this.getFieldId(field), this.cx.input, escapeHtml(field.name));
+    }
+    getPhoneField(field) {
+        return this.html /* html */ (_templateObject6(), this.getFieldId(field), this.cx.input, escapeHtml(field.name), escapeHtml(field.placeholder));
+    }
+    getTextareaField(field) {
+        return this.html /* html */ (_templateObject7(), this.getFieldId(field), this.cx.input, escapeHtml(field.name), escapeHtml(field.placeholder));
+    }
+    getPicklistField(field) {
+        var _field_fieldValues;
+        return this.html /* html */ (_templateObject9(), this.cx.selectContainer, this.getFieldId(field), this.cx.input, escapeHtml(field.name), field.placeholder ? '<option value="" disabled selected>' + escapeHtml(field.placeholder) + "</option>" : "", (_field_fieldValues = field.fieldValues) == null ? void 0 : _field_fieldValues.map((option)=>{
+            return this.html /* html */ (_templateObject8(), escapeHtml(option.value), escapeHtml(option.label));
+        }), DownArrowIcon);
+    }
+    getEmailField(field) {
+        var _field_value;
+        return this.html /* html */ (_templateObject10(), this.getFieldId(field), this.cx.input, escapeHtml(field.name), escapeHtml(field.placeholder), escapeHtml((_field_value = field.value) != null ? _field_value : ""));
+    }
+    getAllInputs(form) {
+        return form.querySelectorAll("input, select, textarea");
+    }
+    getErrorMessage(error) {
+        if (error.message) return error.message;
+        switch(error.type){
+            case (/* inlined export .EntryErrorType.EMPTY */"empty"):
+            case (/* inlined export .EntryErrorType.MUST_CHECK */"must_check"):
+                return "This field is required";
+            case (/* inlined export .EntryErrorType.NOT_FULL_NAME */"not_full_name"):
+                return "Please enter your full name";
+            case (/* inlined export .EntryErrorType.INVALID */"invalid"):
+            default:
+                return "This field is invalid";
+        }
+    }
+    getFieldId(field) {
+        if (field.type === "email") {
+            return "qualified-form-" + this.instanceId + "-field-email";
+        }
+        return "qualified-form-" + this.instanceId + "-field-" + field.fieldId;
+    }
+    cssOverride(key) {
+        var _this_props_css;
+        return ((_this_props_css = this.props.css) == null ? void 0 : _this_props_css[key]) ? "." + this.cx[key] + " { " + this.props.css[key] + " }" : "";
+    }
+    constructor(props){
+        var _props_inputFieldsOverrides;
+        super(_extends({}, props), null), this.displayName = "MultiFieldForm", this.instanceId = MultiFieldForm.staticId++;
+        this.inputFieldsOverridesMap = new Map((_props_inputFieldsOverrides = props.inputFieldsOverrides) == null ? void 0 : _props_inputFieldsOverrides.map((override)=>[
+                override.referenceId,
+                override
+            ]));
+    }
+}
+MultiFieldForm.staticId = 0;
+
+export { MultiFieldForm };