@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/routes/app/offers/scripts/rendering/locations/header/StyleSelectorObserver/constants.js

@@ -0,0 +1,21 @@
+const PROPERTIES = [
+    [
+        "position",
+        "fixed"
+    ],
+    [
+        "position",
+        "sticky"
+    ],
+    [
+        "top",
+        "*"
+    ]
+];
+const OBSERVED_PROPERTIES = [
+    "position:fixed",
+    "position:sticky",
+    "top:*"
+];
+
+export { OBSERVED_PROPERTIES, PROPERTIES };

package/routes/app/offers/scripts/rendering/locations/header/WindowResizeObserver.js

@@ -0,0 +1,43 @@
+import { __webpack_require__ } from "../../../../../../../js/runtime.js";
+import { throttle } from "./utils.js";
+import "../../../../../../../widget/utils/native_globals.js";
+
+/* provided dependency */ var __nativeWindowAddEventListener = __webpack_require__(68034).zh;
+/* provided dependency */ var __nativeWindowRemoveEventListener = __webpack_require__(68034).kZ;
+
+/**
+ * Window resize observer used to observe the resize events of the window with a throttle mecanism to avoid over computing
+ */ class WindowResizeObserver {
+    init() {
+        this.isDisposed = false;
+        __nativeWindowAddEventListener("resize", this.onResize);
+    }
+    dispose() {
+        __nativeWindowRemoveEventListener("resize", this.onResize);
+        this.isDisposed = true;
+    }
+    _callback() {
+        if (this.isDisposed) return;
+        this.callback();
+    }
+    constructor(callback, watch = "both", throttleLimit = 0){
+        this.callback = callback;
+        this.watch = watch;
+        this.lastWidth = window.innerWidth;
+        this.lastHeight = window.innerHeight;
+        this.isDisposed = true;
+        this._onResize = ()=>{
+            const widthChanged = window.innerWidth !== this.lastWidth;
+            if (this.watch === "width" && !widthChanged) return;
+            const heightChanged = window.innerHeight !== this.lastHeight;
+            if (this.watch === "height" && !heightChanged) return;
+            if (!widthChanged && !heightChanged) return;
+            this.lastWidth = window.innerWidth;
+            this.lastHeight = window.innerHeight;
+            this._callback();
+        };
+        this.onResize = throttleLimit > 0 ? throttle(this._onResize, throttleLimit) : this._onResize;
+    }
+}
+
+export { WindowResizeObserver };

package/routes/app/offers/scripts/rendering/locations/header/utils.js

@@ -0,0 +1,25 @@
+import { __webpack_require__ } from "../../../../../../../js/runtime.js";
+import "../../../../../../../widget/utils/native_globals.js";
+
+/* provided dependency */ var utils_setTimeout = __webpack_require__(68034).pS;
+// Throttle a function to run at most once per limit milliseconds
+function throttle(fn, limit) {
+    let waiting = false;
+    let pendingArgs = null;
+    return function() {
+        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+            args[_key] = arguments[_key];
+        }
+        pendingArgs = args;
+        if (!waiting) {
+            utils_setTimeout(()=>{
+                fn.apply(this, pendingArgs);
+                waiting = false;
+                pendingArgs = null;
+            }, limit);
+            waiting = true;
+        }
+    };
+}
+
+export { throttle };

package/routes/app/offers/scripts/rendering/locations/popup.js

@@ -0,0 +1,66 @@
+import { ScrollDisabler } from "../../../../../../widget/scroll_disabler.js";
+import { POPUP_OFFERS_Z_INDEX } from "../../constants.js";
+import { getHostId, getHeadlineId, toHTMLElement } from "../../utils.js";
+
+/* eslint-disable rulesdir/enforce-comment */ /* eslint-disable rulesdir/css-units */ 
+
+
+const BODY_OVERFLOW_STYLE_DATA_ATTRIBUTE = "data-qualified-offer-body-overflow-style";
+const BODY_HEIGHT_STYLE_DATA_ATTRIBUTE = "data-qualified-offer-body-height-style";
+class Popup {
+    createHost(id) {
+        // Style is inline because the host is directly inserted into the DOM. (no shadow root)
+        const hostId = getHostId(id);
+        const html = /* html */ '\n      <dialog\n        id="' + hostId + '"\n        aria-labelledby="' + getHeadlineId(id) + '"\n        style="\n          display:flex;\n          justify-content:center;\n          align-items:center;\n          position:fixed;\n          left:0;\n          bottom:0;\n          width:100%;\n          height:100dvh;\n          z-index:' + POPUP_OFFERS_Z_INDEX + ';\n          background: rgba(0, 0, 0, 0.70);\n          max-width: 100%;\n          max-height: 100vh;\n          border: none;\n          padding: 0;\n        "\n      >\n      </dialog>\n    ';
+        return toHTMLElement(html);
+    }
+    insertHost(host) {
+        // New behavior behind feature flag
+        if (this.flags.hasOffersPopupWithScrollDisabler) {
+            this.insertHostNext(host);
+            return;
+        }
+        document.body.appendChild(host);
+        document.body.setAttribute(BODY_OVERFLOW_STYLE_DATA_ATTRIBUTE, document.body.style.overflow);
+        document.body.setAttribute(BODY_HEIGHT_STYLE_DATA_ATTRIBUTE, document.body.style.height);
+        document.body.style.overflow = "hidden";
+        document.body.style.height = "100dvh";
+        if (host instanceof HTMLDialogElement) {
+            host.showModal();
+        }
+    }
+    removeHost(host) {
+        var _document_body_getAttribute, _document_body_getAttribute1;
+        // New behavior behind feature flag
+        if (this.flags.hasOffersPopupWithScrollDisabler) {
+            this.removeHostNext(host);
+            return;
+        }
+        host.remove();
+        const overflow = (_document_body_getAttribute = document.body.getAttribute(BODY_OVERFLOW_STYLE_DATA_ATTRIBUTE)) != null ? _document_body_getAttribute : "";
+        document.body.style.overflow = overflow;
+        const height = (_document_body_getAttribute1 = document.body.getAttribute(BODY_HEIGHT_STYLE_DATA_ATTRIBUTE)) != null ? _document_body_getAttribute1 : "";
+        document.body.style.height = height;
+        document.body.removeAttribute(BODY_OVERFLOW_STYLE_DATA_ATTRIBUTE);
+        document.body.removeAttribute(BODY_HEIGHT_STYLE_DATA_ATTRIBUTE);
+    }
+    insertHostNext(host) {
+        document.body.appendChild(host);
+        ScrollDisabler.disableScroll("offers", {
+            overlayElement: host
+        });
+        if (host instanceof HTMLDialogElement) {
+            host.showModal();
+        }
+    }
+    removeHostNext(host) {
+        host.remove();
+        ScrollDisabler.restoreScroll("offers");
+    }
+    // eslint-disable-next-line no-useless-constructor
+    constructor(flags = {}){
+        this.flags = flags;
+    }
+}
+
+export { Popup };

package/routes/app/offers/scripts/rendering/locations/sidebar.js

@@ -0,0 +1,21 @@
+import { FOOTER_HEIGHT_CSS_VARIABLE, DEFAULT_OFFERS_Z_INDEX } from "../../constants.js";
+import { getHostId, getHeadlineId, toHTMLElement } from "../../utils.js";
+
+/* eslint-disable rulesdir/enforce-comment */ /* eslint-disable rulesdir/css-units */ 
+
+class Sidebar {
+    createHost(id) {
+        // Style is inline because the host is directly inserted into the DOM. (no shadow root)
+        const hostId = getHostId(id);
+        const html = /* html */ '\n      <div\n        id="' + hostId + '"\n        aria-labelledby="' + getHeadlineId(id) + '"\n        style="\n          position:fixed;\n          left:15px;\n          bottom:calc(15px + var(' + FOOTER_HEIGHT_CSS_VARIABLE + ", 0px));\n          width:fit-content;\n          height:fit-content;\n          z-index:" + DEFAULT_OFFERS_Z_INDEX + ';\n        "\n      ></div>\n    ';
+        return toHTMLElement(html);
+    }
+    insertHost(host) {
+        document.body.appendChild(host);
+    }
+    removeHost(host) {
+        host.remove();
+    }
+}
+
+export { Sidebar };

package/routes/app/offers/scripts/rendering/variations/ButtonBanner.js

@@ -0,0 +1,105 @@
+import "../../constants.js";
+import { OfferComponent } from "../lib/OfferComponent.js";
+import { Button } from "./components/Button.js";
+import { DismissButton } from "./components/DismissButton.js";
+import { ForegroundImageBanner } from "./components/ForegroundImageBanner.js";
+import { Headline } from "./components/Headline.js";
+import { __metadata, _tagged_template_literal_loose, _extends, __decorate } from "../../../../../../js/4101.js";
+import { CtaTypeEnum, ContentVariationTypeEnum } from "../../../../../../src/graphql-types.js";
+import { autoRender } from "../lib/decorators.js";
+
+/* eslint-disable rulesdir/css-units */ 
+
+
+
+function ButtonBanner_templateObject() {
+    const data = _tagged_template_literal_loose([
+        '\n      <div class="container ',
+        '">\n        <div class="headline-cta">\n          ',
+        "\n          ",
+        "\n          ",
+        "\n          ",
+        "\n        </div>\n        ",
+        "\n      </div>\n    "
+    ]);
+    ButtonBanner_templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+
+
+
+
+
+
+
+
+class ButtonBanner extends OfferComponent {
+    get style() {
+        var _variation_headlineStyle_backgroundColor;
+        const { variation } = this.props;
+        let mobileStyle = "";
+        if (this.isMobile) {
+            mobileStyle = /* css */ "\n        .container {\n          padding: 15px 32px;\n\n          .headline-cta {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 12px;\n            justify-content: space-between;\n            text-align: left;\n            width: auto;\n\n            .banner {\n              margin-right: 4px;\n              max-width: 100%;\n            }\n\n            .headline {\n              padding: 0;\n            }\n          }\n        }\n      ";
+        }
+        return /* css */ "\n      .container {\n        display: flex;\n        position: relative;\n        justify-content: center;\n        gap: 32px;\n        align-items: center;\n        background: " + ((_variation_headlineStyle_backgroundColor = variation.headlineStyle.backgroundColor) != null ? _variation_headlineStyle_backgroundColor : "#000") + ";\n        box-shadow: 0px -1px 28px 0px rgba(0, 0, 0, 0.00);\n        margin: 0;\n        padding: 0 36px;\n        height: auto;\n        max-height: " + (/* inlined export .MAX_BANNER_HEIGHT */"200px") + ";\n\n        .headline-cta {\n          display: flex;\n          gap: 32px;\n          align-items: center;\n          justify-content: center;\n          text-align: left;\n          width: 100%;\n\n          .headline {\n            padding: 14px 0;\n          }\n        }\n\n        p {\n          margin: 0;\n        }\n      }\n\n      .background-image-wrapper {\n        " + (this.backgroundImageUrl ? "\n              background-image: url(" + this.backgroundImageUrl + ");\n              background-position: center;\n              background-size: cover;\n            " : "") + "\n      }\n\n      " + mobileStyle + "\n    ";
+    }
+    get content() {
+        return this.html /* html */ (ButtonBanner_templateObject(), this.backgroundImageUrl ? "background-image-wrapper" : "", this.foregroundImage.prependedContent, this.headline, this.cta, this.foregroundImage.appendedContent, this.dismissButton);
+    }
+    get cta() {
+        const { buttonStyle, buttonText, buttonUrl, assetDeliveryType, headlineStyle } = this.props.variation;
+        return new Button(_extends({}, buttonStyle, {
+            id: this.id,
+            text: buttonText,
+            href: buttonUrl,
+            deliveryType: assetDeliveryType,
+            type: "banner-button",
+            focusRingColor: headlineStyle.color
+        }), this.hasOffersFontEnhancements);
+    }
+    get headline() {
+        const { headlineStyle, headlineText } = this.props.variation;
+        return new Headline(_extends({}, headlineStyle, {
+            text: headlineText,
+            type: "banner"
+        }), this.hasOffersFontEnhancements);
+    }
+    get dismissButton() {
+        var _ref, _ref1;
+        if (!this.props.allowDismiss) {
+            return null;
+        }
+        const { headlineStyle, buttonStyle } = this.props.variation;
+        return new DismissButton({
+            id: this.id,
+            color: this.props.variation.headlineStyle.color,
+            focusRingColor: (_ref = headlineStyle == null ? void 0 : headlineStyle.color) != null ? _ref : null,
+            borderRadius: (_ref1 = buttonStyle == null ? void 0 : buttonStyle.borderRadius) != null ? _ref1 : "0px",
+            hasDismissButtonAccessibilityEnabled: this.hasDismissButtonAccessibilityEnabled
+        });
+    }
+    get location() {
+        return this.props.location;
+    }
+    constructor(props, host, hasOffersFontEnhancements, hasDismissButtonAccessibilityEnabled){
+        super(props, null, host, hasOffersFontEnhancements, hasDismissButtonAccessibilityEnabled), this.displayName = "ButtonBanner", this.type = ContentVariationTypeEnum.HeadlineButton, this.ctaType = CtaTypeEnum.Button, this.foregroundImage = new ForegroundImageBanner({
+            location: this.location,
+            foregroundImageConfig: this.props.foregroundImageConfig,
+            foregroundImageUrl: this.props.foregroundImageUrl
+        });
+    }
+}
+ButtonBanner = __decorate([
+    autoRender,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [
+        typeof ButtonBannerProps === "undefined" ? Object : ButtonBannerProps,
+        typeof HTMLElement === "undefined" ? Object : HTMLElement,
+        Boolean,
+        Boolean
+    ])
+], ButtonBanner);
+
+export { ButtonBanner };

package/routes/app/offers/scripts/rendering/variations/ButtonModal.js

@@ -0,0 +1,114 @@
+import { MODAL_PADDING, MODAL_WIDTHS } from "../../constants.js";
+import { OfferComponent } from "../lib/OfferComponent.js";
+import { Body } from "./components/Body.js";
+import { Button } from "./components/Button.js";
+import { DismissButton } from "./components/DismissButton.js";
+import { ForegroundImageModal } from "./components/ForegroundImageModal.js";
+import { Headline } from "./components/Headline.js";
+import { __metadata, _tagged_template_literal_loose, _extends, __decorate } from "../../../../../../js/4101.js";
+import { CtaTypeEnum, LocationEnum, ContentVariationTypeEnum } from "../../../../../../src/graphql-types.js";
+import { autoRender } from "../lib/decorators.js";
+
+
+
+
+
+function ButtonModal_templateObject() {
+    const data = _tagged_template_literal_loose([
+        '\n      <div\n        class="container"\n        role="dialog"\n        aria-modal="true"\n      >\n        <div class="image-container">\n        ',
+        "\n          ",
+        '\n            <div class="content-container">\n              ',
+        "\n              ",
+        "\n              ",
+        "\n            </div>\n            ",
+        "\n          ",
+        "\n        </div>\n        ",
+        "\n      </div>\n    "
+    ]);
+    ButtonModal_templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+/* eslint-disable rulesdir/css-units */ 
+
+
+
+
+
+
+
+
+class ButtonModal extends OfferComponent {
+    get style() {
+        var _variation_headlineStyle_backgroundColor;
+        const { variation } = this.props;
+        return /* css */ "\n      .container {\n        display: flex;\n        position: relative;\n        justify-content: center;\n        align-items: center;\n        border-radius: 8px;\n        background: " + ((_variation_headlineStyle_backgroundColor = variation.headlineStyle.backgroundColor) != null ? _variation_headlineStyle_backgroundColor : "#FFF") + ";\n        margin: 0;\n        overflow: hidden;\n        box-shadow: 0px 2px 8px 1px #00000033;\n        p {\n          margin: 0;\n        }\n        max-width: 90vw;\n        max-height: 90dvh;\n      }\n\n      .content-container {\n        display: flex;\n        width: " + MODAL_WIDTHS[this.device][this.location] + "px;\n        flex-direction: column;\n        align-items: flex-start;\n        justify-content: center;\n        padding: " + MODAL_PADDING[this.device][this.location] + ";\n        gap: 24px;\n        box-sizing: border-box;\n        align-self: center;\n      }\n\n      .image-container {\n        width: 100%;\n        height: 100%;\n        max-height: 90dvh;\n        max-width: 90vw;\n        display: flex;\n        flex-direction: " + (this.foregroundImage.isPlacementHorizontal ? "row" : "column") + ";\n        align-items: stretch;\n      }\n\n      .background-image-wrapper {\n        " + (this.backgroundImageUrl ? "\n              background-image: url(" + this.backgroundImageUrl + ");\n              background-size: cover;\n              background-position: center;\n              display: flex;\n              align-items: center;\n            " : "") + "\n      }\n    ";
+    }
+    get content() {
+        return this.html /* html */ (ButtonModal_templateObject(), this.foregroundImage.prependedContent, this.backgroundImageUrl ? '<div class="background-image-wrapper">' : "", this.headline, this.body, this.cta, this.backgroundImageUrl ? "</div>" : "", this.foregroundImage.appendedContent, this.dismissButton);
+    }
+    get headline() {
+        const { headlineStyle, headlineText } = this.props.variation;
+        const type = this.props.location === LocationEnum.Sidebar ? "sidebar-modal" : "modal";
+        return new Headline(_extends({}, headlineStyle, {
+            text: headlineText,
+            type,
+            offerId: this.id
+        }), this.hasOffersFontEnhancements);
+    }
+    get body() {
+        const { bodyStyle, bodyText } = this.props.variation;
+        return new Body(_extends({}, bodyStyle, {
+            text: bodyText
+        }));
+    }
+    get cta() {
+        const { buttonStyle, buttonText, buttonUrl, assetDeliveryType, headlineStyle } = this.props.variation;
+        return new Button(_extends({}, buttonStyle, {
+            type: "modal-button",
+            id: this.id,
+            text: buttonText,
+            href: buttonUrl,
+            deliveryType: assetDeliveryType,
+            focusRingColor: headlineStyle.color
+        }), this.hasOffersFontEnhancements);
+    }
+    get dismissButton() {
+        var _this_props_variation_headlineStyle_color, _ref, _ref1;
+        if (!this.props.allowDismiss) {
+            return null;
+        }
+        const { buttonStyle, headlineStyle } = this.props.variation;
+        return new DismissButton({
+            id: this.id,
+            isModal: true,
+            color: (_this_props_variation_headlineStyle_color = this.props.variation.headlineStyle.color) != null ? _this_props_variation_headlineStyle_color : "#1B1B1B",
+            focusRingColor: (_ref = headlineStyle == null ? void 0 : headlineStyle.color) != null ? _ref : null,
+            borderRadius: (_ref1 = buttonStyle == null ? void 0 : buttonStyle.borderRadius) != null ? _ref1 : "0px",
+            hasDismissButtonAccessibilityEnabled: this.hasDismissButtonAccessibilityEnabled
+        });
+    }
+    get location() {
+        return this.props.location;
+    }
+    constructor(props, host, hasOffersFontEnhancements, hasDismissButtonAccessibilityEnabled){
+        super(props, null, host, hasOffersFontEnhancements, hasDismissButtonAccessibilityEnabled), this.displayName = "ButtonModal", this.type = ContentVariationTypeEnum.HeadlineBodyButton, this.ctaType = CtaTypeEnum.Button, this.foregroundImage = new ForegroundImageModal({
+            location: this.location,
+            foregroundImageConfig: this.props.foregroundImageConfig,
+            foregroundImageUrl: this.props.foregroundImageUrl
+        });
+    }
+}
+ButtonModal = __decorate([
+    autoRender,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [
+        typeof ButtonModalProps === "undefined" ? Object : ButtonModalProps,
+        typeof HTMLElement === "undefined" ? Object : HTMLElement,
+        Boolean,
+        Boolean
+    ])
+], ButtonModal);
+
+export { ButtonModal };

package/routes/app/offers/scripts/rendering/variations/FormBanner.js

@@ -0,0 +1,214 @@
+import "../../constants.js";
+import { getPrivacyDisclosureTooltipId, getFormId, getPrivacyDisclosureTooltipTargetId } from "../../utils.js";
+import { FormComponent } from "../lib/FormComponent.js";
+import { Button } from "./components/Button.js";
+import { DismissButton } from "./components/DismissButton.js";
+import { ForegroundImageBanner } from "./components/ForegroundImageBanner.js";
+import { Headline } from "./components/Headline.js";
+import { Tooltip } from "./components/Tooltip.js";
+import { _tagged_template_literal_loose, _extends, __decorate } from "../../../../../../js/4101.js";
+import { LOADING_SVG_STRING_SPINNER } from "../../../../../../src/personalizations/utils.js";
+import { AlertIcon, CHECKBOX_SVG_STRING } from "./icons.js";
+import { escapeHtml } from "../../../../../../src/embedded_forms/utils.js";
+import { LocationEnum, ContentVariationTypeEnum } from "../../../../../../src/graphql-types.js";
+import { autoRender } from "../lib/decorators.js";
+
+
+
+
+function FormBanner_templateObject() {
+    const data = _tagged_template_literal_loose([
+        '\n      <div class="container ',
+        '">\n        <div class="headline-cta">\n          ',
+        "\n          ",
+        '\n          <form id="',
+        '" class="form">\n            ',
+        "\n            ",
+        "\n          </form>\n          ",
+        "\n        </div>\n        ",
+        "\n      </div>\n    "
+    ]);
+    FormBanner_templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    const data = _tagged_template_literal_loose([
+        "",
+        ""
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    const data = _tagged_template_literal_loose([
+        '\n        <div class="',
+        '">\n          <input\n            class="',
+        '"\n            type="email"\n            name="email"\n            placeholder="',
+        '"\n            value="',
+        '"\n            aria-invalid="true"\n          />\n          <div class="',
+        '">\n            ',
+        "\n          </div>\n        </div>\n      "
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    const data = _tagged_template_literal_loose([
+        '\n      <input\n        class="',
+        '"\n        name="email"\n        type="email"\n        placeholder="',
+        '"\n        required\n        ',
+        "\n        ",
+        "\n      />\n    "
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject4() {
+    const data = _tagged_template_literal_loose([
+        "",
+        ""
+    ]);
+    _templateObject4 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+/* eslint-disable rulesdir/css-units */ 
+
+
+
+
+
+
+
+
+
+
+
+
+const MAX_INPUT_RADIUS = 4;
+// Prevent password managers from covering privacy disclosure tooltip
+const IGNORE_1_PASSWORD_AUTOFILL = 'data-1p-ignore="true"';
+const IGNORE_LAST_PASS_AUTOFILL = 'data-lpignore="true"';
+class FormBanner extends FormComponent {
+    get style() {
+        var _buttonStyle_borderRadius, _headlineStyle_backgroundColor, _headlineStyle_fontFamily, _headlineStyle_fontFamily1;
+        const { headlineStyle, buttonStyle } = this.props.variation;
+        const inputRadius = Math.min(parseInt((_buttonStyle_borderRadius = buttonStyle.borderRadius) != null ? _buttonStyle_borderRadius : "0", 10), MAX_INPUT_RADIUS);
+        let mobileStyle = "";
+        if (this.isMobile) {
+            if (this.hasOffersFormBannerMobileImprovements) {
+                mobileStyle = /* css */ "\n        .container {\n          padding: 16px 32px;\n\n          .headline-cta {\n            display: flex;\n            flex-direction: column;\n            gap: 12px;\n            justify-content: space-between;\n            text-align: left;\n\n            .banner {\n              margin-right: 4px;\n              max-width: 100%;\n            }\n\n            .form {\n              flex-wrap: wrap;\n              width: 100%;\n            }\n\n            ." + this.cx.input + " {\n              flex-grow: 1;\n              width: auto;\n            }\n\n            .cta.banner-button.submit{\n              padding-top: 4.5px;\n              padding-bottom: 4.5px;\n              line-height: 1.5;\n              flex-grow: 1;\n              min-width: 0;\n              height: unset;\n              max-width: unset;\n            }\n\n            .cta.banner-button.submit div:first-child {\n                min-width: 0;\n                word-wrap: break-word;\n            }\n\n            .headline {\n              padding: 0;\n            }\n\n            #" + getPrivacyDisclosureTooltipId(this.props.id) + " {\n              word-break: break-word;\n              overflow-wrap: break-word;\n            }\n          }\n        }\n      ";
+            } else {
+                mobileStyle = /* css */ "\n        .container {\n          padding: 16px 32px;\n\n          .headline-cta {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 12px;\n            justify-content: space-between;\n            text-align: left;\n            width: auto;\n\n            .banner {\n              margin-right: 4px;\n              max-width: 100%;\n            }\n\n            .headline {\n              padding: 0;\n            }\n          }\n        }\n      ";
+            }
+        }
+        return /* css */ "\n      .container {\n        display: flex;\n        position: relative;\n        justify-content: center;\n        gap: 32px;\n        align-items: center;\n        background: " + ((_headlineStyle_backgroundColor = headlineStyle.backgroundColor) != null ? _headlineStyle_backgroundColor : "#000") + ";\n        box-shadow: 0px -1px 28px 0px rgba(0, 0, 0, 0.00);\n        margin: 0;\n        padding: 0 36px;\n        max-height: " + (/* inlined export .MAX_BANNER_HEIGHT */"200px") + ";\n\n        p {\n          margin: 0;\n        }\n\n        .headline-cta {\n          display: flex;\n          gap: 32px;\n          align-items: center;\n          justify-content: center;\n          text-align: left;\n          width: 100%;\n\n          .headline {\n            padding: 14px 0;\n          }\n        }\n      }\n\n      .background-image-wrapper {\n        " + (this.backgroundImageUrl ? "\n              background-image: url(" + this.backgroundImageUrl + ");\n              background-position: center;\n              background-size: cover;\n            " : "") + "\n      }\n\n      .form {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n      }\n\n      ." + this.cx.input + " {\n        font-family: " + ((_headlineStyle_fontFamily = headlineStyle.fontFamily) != null ? _headlineStyle_fontFamily : "inherit") + ";\n        font-size: 14px;\n        height: 32px;\n        width: 230px;\n        box-sizing: border-box;\n        border: 1px solid rgba(200, 206, 208, 0.93);\n        border-radius: " + inputRadius + 'px;\n        padding: 8px 16px;\n        color: #1B1B1B;\n        outline: none;\n        background-color: white;\n        &:is(:focus, :focus-visible):not(&[readonly]):not(&[aria-invalid="true"]) {\n          border-color: ' + (buttonStyle.backgroundColor || headlineStyle.color) + ";\n          outline: 2px solid " + (buttonStyle.backgroundColor || headlineStyle.color) + ";\n          outline-offset: 2px;\n        }\n        &::placeholder {\n          color: #6E7879;\n        }\n      }\n\n      ." + this.cx.input + '[aria-invalid="true"] {\n        border-color: #E4251B;\n        outline: 2px solid #E4251B;\n        padding-right: 32px;\n      }\n\n      .' + this.cx.inputErrorContainer + " {\n        position: relative;\n      }\n\n      ." + this.cx.inputErrorIcon + " {\n        position: absolute;\n        right: 8px;\n        top: 50%;\n        transform: translateY(-50%);\n\n        & svg {\n          fill: #E4251B;\n        }\n      }\n\n      #" + getPrivacyDisclosureTooltipId(this.props.id) + " {\n        font-family: " + ((_headlineStyle_fontFamily1 = headlineStyle.fontFamily) != null ? _headlineStyle_fontFamily1 : "inherit") + ";\n        justify-content: center;\n        min-width: 100%;\n        text-align: left;\n        white-space: normal;\n      }\n\n      " + mobileStyle + "\n    ";
+    }
+    get content() {
+        return this.html /* html */ (FormBanner_templateObject(), this.backgroundImageUrl ? "background-image-wrapper" : "", this.foregroundImage.prependedContent, this.headline, getFormId(this.id), this.input, this.button, this.foregroundImage.appendedContent, this.dismissButton);
+    }
+    get headline() {
+        const { headlineStyle, headlineText } = this.props.variation;
+        return new Headline(_extends({}, headlineStyle, {
+            text: headlineText,
+            type: "banner"
+        }), this.hasOffersFontEnhancements);
+    }
+    get buttonText() {
+        if (this.state.loading || this.state.current === (/* inlined export .FormState.FollowupQuestions */"followupQuestions")) {
+            var _this_props_variation_buttonStyle_color;
+            return LOADING_SVG_STRING_SPINNER((_this_props_variation_buttonStyle_color = this.props.variation.buttonStyle.color) != null ? _this_props_variation_buttonStyle_color : "#FFF", 11);
+        }
+        switch(this.state.current){
+            case (/* inlined export .FormState.EmailCapture */"emailCapture"):
+                var _this_props_variation_buttonText;
+                return (_this_props_variation_buttonText = this.props.variation.buttonText) != null ? _this_props_variation_buttonText : "Submit";
+            case (/* inlined export .FormState.End */"end"):
+                var _this_props_variation_buttonStyle_color1;
+                return CHECKBOX_SVG_STRING((_this_props_variation_buttonStyle_color1 = this.props.variation.buttonStyle.color) != null ? _this_props_variation_buttonStyle_color1 : "#FFF");
+        }
+    }
+    get button() {
+        const { buttonStyle, headlineStyle } = this.props.variation;
+        return new Button(_extends({}, buttonStyle, {
+            id: this.id,
+            text: this.buttonText,
+            type: "banner-submit",
+            focusRingColor: headlineStyle.color
+        }), this.hasOffersFontEnhancements);
+    }
+    get dismissButton() {
+        var _ref, _ref1;
+        if (!this.props.allowDismiss) {
+            return null;
+        }
+        const { headlineStyle, buttonStyle } = this.props.variation;
+        return new DismissButton({
+            id: this.id,
+            color: this.props.variation.headlineStyle.color,
+            focusRingColor: (_ref = headlineStyle == null ? void 0 : headlineStyle.color) != null ? _ref : null,
+            borderRadius: (_ref1 = buttonStyle == null ? void 0 : buttonStyle.borderRadius) != null ? _ref1 : "0px",
+            hasDismissButtonAccessibilityEnabled: this.hasDismissButtonAccessibilityEnabled
+        });
+    }
+    get location() {
+        return this.props.location;
+    }
+    get input() {
+        var _this_props_variation_emailField;
+        if (this.state.current === (/* inlined export .FormState.EmailCapture */"emailCapture") && this.state.error) {
+            var _this_props_variation_emailField1;
+            return this.html /* html */ (_templateObject2(), this.cx.inputErrorContainer, this.cx.input, escapeHtml(((_this_props_variation_emailField1 = this.props.variation.emailField) == null ? void 0 : _this_props_variation_emailField1.placeholder) || "name@business.com"), this.state.email, this.cx.inputErrorIcon, this.errorTooltip(_templateObject1(), AlertIcon));
+        }
+        const input = this.html /* html */ (_templateObject3(), this.cx.input, escapeHtml(((_this_props_variation_emailField = this.props.variation.emailField) == null ? void 0 : _this_props_variation_emailField.placeholder) || "name@business.com"), this.state.email && "value=" + this.state.email, this.privacyDisclosureTooltip && ' id="' + getPrivacyDisclosureTooltipTargetId(this.props.id) + '"\n            aria-describedby="' + getPrivacyDisclosureTooltipId(this.props.id) + '"\n            ' + IGNORE_1_PASSWORD_AUTOFILL + "\n            " + IGNORE_LAST_PASS_AUTOFILL + "\n          ");
+        return this.privacyDisclosureTooltip ? this.privacyDisclosureTooltip(_templateObject4(), input) : input;
+    }
+    get errorTooltip() {
+        return new Tooltip({
+            text: this.state.current === (/* inlined export .FormState.EmailCapture */"emailCapture") && this.state.error || "",
+            placement: this.location === LocationEnum.Header ? "bottom" : "top",
+            target: {
+                event: "always"
+            },
+            fontFamily: this.props.variation.headlineStyle.fontFamily,
+            offsetY: 9
+        }).wrapper;
+    }
+    get privacyDisclosureTooltip() {
+        if (!this.props.privacyDisclosureText || this.state.current !== (/* inlined export .FormState.EmailCapture */"emailCapture")) {
+            return null;
+        }
+        return new Tooltip({
+            text: this.props.privacyDisclosureText,
+            placement: this.props.location === LocationEnum.Footer ? "top" : "bottom",
+            target: {
+                selector: "." + this.cx.input,
+                event: "focus"
+            },
+            tooltipId: getPrivacyDisclosureTooltipId(this.props.id),
+            ariaLabel: "" + FormBanner.privacyDisclosureAriaLabel(this.props.privacyDisclosureText),
+            hasOffersFormBannerMobileImprovements: this.hasOffersFontEnhancements && this.isMobile
+        }).wrapper;
+    }
+    constructor(...args){
+        super(...args), this.displayName = "FormBanner", this.type = ContentVariationTypeEnum.HeadlineForm, this.foregroundImage = new ForegroundImageBanner({
+            location: this.location,
+            foregroundImageConfig: this.props.foregroundImageConfig,
+            foregroundImageUrl: this.props.foregroundImageUrl
+        });
+    }
+}
+FormBanner = __decorate([
+    autoRender
+], FormBanner);
+
+export { FormBanner };