@internetarchive/donation-form 1.0.2 → 1.0.3-alpha-webdev7960.0

package/dist/src/form-elements/payment-selector.js

@@ -24,105 +24,105 @@ let PaymentSelector = class PaymentSelector extends LitElement {
     /** @inheritdoc */
     render() {
         const paymentSelectedCss = this.paymentModeSelected ? 'payment-selected' : '';
-        return html `
-      <div
+        return html `
+      <div
         class="payment-container ${this.donationInfoValid
             ? 'donation-info-valid'
-            : 'donation-info-invalid'} ${paymentSelectedCss}"
-      >
-        <div class="payment-provider-container">
-          <button
+            : 'donation-info-invalid'} ${paymentSelectedCss}"
+      >
+        <div class="payment-provider-container">
+          <button
             class="applepay provider-button ${this.applePayMode} ${this.paymentModeSelected ===
             'apple'
             ? 'selected'
-            : ''}"
+            : ''}"
             @click=${(e) => {
             this.paymentModeSelected = 'apple';
             this.applePaySelected(e);
-        }}
-            tabindex="0"
-          >
-            <div class="payment-image">${applePayButtonImage}</div>
-          </button>
-
-          <button
+        }}
+            tabindex="0"
+          >
+            <div class="payment-image">${applePayButtonImage}</div>
+          </button>
+
+          <button
             class="googlepay provider-button ${this.googlePayMode} ${this.paymentModeSelected ===
             'google'
             ? 'selected'
-            : ''}"
+            : ''}"
             @click=${() => {
             this.paymentModeSelected = 'google';
             this.googlePaySelected();
-        }}
-            tabindex="0"
-          >
-            <div class="payment-image">${googlePayButtonImage}</div>
-          </button>
-
-          <button
+        }}
+            tabindex="0"
+          >
+            <div class="payment-image">${googlePayButtonImage}</div>
+          </button>
+
+          <button
             class="venmo provider-button ${this.venmoMode} ${this.paymentModeSelected === 'venmo'
             ? 'selected'
-            : ''}"
+            : ''}"
             @click=${() => {
             this.paymentModeSelected = 'venmo';
             this.venmoSelected();
-        }}
-            tabindex="0"
-          >
-            <div class="payment-image">${venmoButtonImage}</div>
-          </button>
-
-          <div
-            class="paypal-container provider-button ${this.payPalMode}
-              ${this.paymentModeSelected === 'paypal' ? 'selected' : ''}"
-            tabindex="0"
-          >
-            <div class="payment-image">
-              <div
-                class="paypal-local-button"
+        }}
+            tabindex="0"
+          >
+            <div class="payment-image">${venmoButtonImage}</div>
+          </button>
+
+          <div
+            class="paypal-container provider-button ${this.payPalMode}
+              ${this.paymentModeSelected === 'paypal' ? 'selected' : ''}"
+            tabindex="0"
+          >
+            <div class="payment-image">
+              <div
+                class="paypal-local-button"
                 @click=${() => {
             this.paymentModeSelected = 'paypal';
             this.localPaypalButtonClicked();
-        }}
-              >
-                ${paypalButtonImage}
-              </div>
-              <slot name="paypal-button"></slot>
-            </div>
-          </div>
-        </div>
-
-        <div class="credit-card-container">
-          <button
+        }}
+              >
+                ${paypalButtonImage}
+              </div>
+              <slot name="paypal-button"></slot>
+            </div>
+          </div>
+        </div>
+
+        <div class="credit-card-container">
+          <button
             @click=${() => {
             this.paymentModeSelected = 'cc';
             this.creditCardSelected();
-        }}
+        }}
             class="button-style credit-card-button ${this.paymentModeSelected === 'cc'
             ? 'selected'
-            : ''}"
-            tabindex="0"
-          >
-            <div class="cc-title">Credit Card</div>
-            <div class="cc-background"></div>
-          </button>
-        </div>
-      </div>
-
+            : ''}"
+            tabindex="0"
+          >
+            <div class="cc-title">Credit Card</div>
+            <div class="cc-background"></div>
+          </button>
+        </div>
+      </div>
+
       ${this.paymentModeSelected
-            ? html `
-            <button
-              id="change-payment-method"
+            ? html `
+            <button
+              id="change-payment-method"
               @click=${() => {
                 this.paymentModeSelected = undefined;
                 this.dispatchEvent(new Event('resetPaymentMethod'));
                 this.setButtonVisibility();
-            }}
-            >
-              Change payment method
-            </button>
+            }}
+            >
+              Change payment method
+            </button>
           `
-            : nothing}
+            : nothing}
     `;
     }
     /** @inheritdoc */
@@ -226,104 +226,104 @@ let PaymentSelector = class PaymentSelector extends LitElement {
         const paymentButtonWidthCss = css `var(--paymentButtonWidth, 5rem)`;
         const paymentButtonHeightCss = css `var(--paymentButtonHeight, 3.2rem)`;
         const creditCardFontSizeCss = css `var(--creditCardFontSize, 1.8rem)`;
-        return css `
-      button {
-        color: inherit;
-        font-family: inherit;
-      }
-
-      .payment-container {
-        width: 100%;
-      }
-
-      .payment-provider-container {
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr 1fr;
-        grid-gap: 1rem;
-        margin-bottom: 1rem;
-        max-width: 23rem;
-      }
-
-      .provider-button {
-        border: 0;
-        padding: 0;
-        background: none;
-        cursor: pointer;
-        width: ${paymentButtonWidthCss};
-        height: ${paymentButtonHeightCss};
-      }
-
-      .provider-button.unavailable {
-        display: none;
-      }
-
-      .provider-button.loading {
-        border: 1px solid #ddd;
-        border-radius: 2px;
-        /* account for the borders that don't exist once the provider loads, otherwise the layout shifts */
-        margin-bottom: -2px;
-      }
-
-      .provider-button.loading .payment-image {
-        display: none;
-      }
-
-      .paypal-local-button {
-        position: absolute;
-        width: ${paymentButtonWidthCss};
-        height: ${paymentButtonHeightCss};
-      }
-
-      .donation-info-valid .paypal-local-button {
-        z-index: 0;
-      }
-
-      .donation-info-invalid .paypal-local-button {
-        z-index: 250;
-      }
-
-      .credit-card-button {
-        color: var(--ccButtonFontColor, #333);
-        background-color: var(--ccButtonColor, white);
-        border: 1px solid #333;
-        border-radius: 4px;
-        cursor: pointer;
-        margin: 0;
-        padding: 0.7rem 1rem;
-        width: 100%;
-      }
-
-      .credit-card-button .cc-background {
-        height: 2.4rem;
-        width: 100%;
-        background-repeat: no-repeat;
-        background-image: url(https://archive.org/images/cc_logos.png);
-        background-position: 50% 50%;
-        background-size: contain;
-      }
-
-      .credit-card-button .cc-title {
-        font-size: ${creditCardFontSizeCss};
-        font-weight: 700;
-        margin-bottom: 0.5rem;
-      }
-
-      button#change-payment-method {
-        margin-top: 10px;
-        background: white;
-        border: 1px solid;
-        border-radius: 3px;
-        padding: 5px;
-      }
-
-      button#change-payment-method:hover {
-        cursor: pointer;
-      }
-
-      .payment-selected button:not(.selected),
-      .payment-selected .paypal-container:not(.selected) {
-        display: none;
-      }
+        return css `
+      button {
+        color: inherit;
+        font-family: inherit;
+      }
+
+      .payment-container {
+        width: 100%;
+      }
+
+      .payment-provider-container {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-gap: 1rem;
+        margin-bottom: 1rem;
+        max-width: 23rem;
+      }
+
+      .provider-button {
+        border: 0;
+        padding: 0;
+        background: none;
+        cursor: pointer;
+        width: ${paymentButtonWidthCss};
+        height: ${paymentButtonHeightCss};
+      }
+
+      .provider-button.unavailable {
+        display: none;
+      }
+
+      .provider-button.loading {
+        border: 1px solid #ddd;
+        border-radius: 2px;
+        /* account for the borders that don't exist once the provider loads, otherwise the layout shifts */
+        margin-bottom: -2px;
+      }
+
+      .provider-button.loading .payment-image {
+        display: none;
+      }
+
+      .paypal-local-button {
+        position: absolute;
+        width: ${paymentButtonWidthCss};
+        height: ${paymentButtonHeightCss};
+      }
+
+      .donation-info-valid .paypal-local-button {
+        z-index: 0;
+      }
+
+      .donation-info-invalid .paypal-local-button {
+        z-index: 250;
+      }
+
+      .credit-card-button {
+        color: var(--ccButtonFontColor, #333);
+        background-color: var(--ccButtonColor, white);
+        border: 1px solid #333;
+        border-radius: 4px;
+        cursor: pointer;
+        margin: 0;
+        padding: 0.7rem 1rem;
+        width: 100%;
+      }
+
+      .credit-card-button .cc-background {
+        height: 2.4rem;
+        width: 100%;
+        background-repeat: no-repeat;
+        background-image: url(https://archive.org/images/cc_logos.png);
+        background-position: 50% 50%;
+        background-size: contain;
+      }
+
+      .credit-card-button .cc-title {
+        font-size: ${creditCardFontSizeCss};
+        font-weight: 700;
+        margin-bottom: 0.5rem;
+      }
+
+      button#change-payment-method {
+        margin-top: 10px;
+        background: white;
+        border: 1px solid;
+        border-radius: 3px;
+        padding: 5px;
+      }
+
+      button#change-payment-method:hover {
+        cursor: pointer;
+      }
+
+      .payment-selected button:not(.selected),
+      .payment-selected .paypal-container:not(.selected) {
+        display: none;
+      }
     `;
     }
 };

package/dist/src/form-elements/payment-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"payment-selector.js","sourceRoot":"","sources":["../../../src/form-elements/payment-selector.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAA6C,OAAO,EAAE,MAAM,KAAK,CAAC;AAChG,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,mBAAmB,MAAM,yCAAyC,CAAC;AAC1E,OAAO,oBAAoB,MAAM,0CAA0C,CAAC;AAC5E,OAAO,iBAAiB,MAAM,uCAAuC,CAAC;AACtE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAGpE,IAAK,iBAIJ;AAJD,WAAK,iBAAiB;IACpB,wCAAmB,CAAA;IACnB,4CAAuB,CAAA;IACvB,gDAA2B,CAAA;AAC7B,CAAC,EAJI,iBAAiB,KAAjB,iBAAiB,QAIrB;AAGM,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QACwB,sBAAiB,GAAG,IAAI,CAAC;QAIlB,iBAAY,GAAsB,iBAAiB,CAAC,OAAO,CAAC;QAE5D,kBAAa,GAAsB,iBAAiB,CAAC,OAAO,CAAC;QAE7D,cAAS,GAAsB,iBAAiB,CAAC,OAAO,CAAC;QAEzD,eAAU,GAAsB,iBAAiB,CAAC,OAAO,CAAC;QAE1D,wBAAmB,GAMvC,SAAS,CAAC;IAyU5B,CAAC;IAvUC,kBAAkB;IAClB,MAAM;QACJ,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;QAC9E,OAAO,IAAI,CAAA;;mCAEoB,IAAI,CAAC,iBAAiB;YAC/C,CAAC,CAAC,qBAAqB;YACvB,CAAC,CAAC,uBAAuB,IAAI,kBAAkB;;;;8CAIX,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,mBAAmB;YAC/E,OAAO;YACL,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,EAAE;qBACG,CAAC,CAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,mBAAmB,GAAG,OAAO,CAAC;YACnC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;QAC3B,CAAC;;;yCAG4B,mBAAmB;;;;+CAIb,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,mBAAmB;YACjF,QAAQ;YACN,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,EAAE;qBACG,GAAG,EAAE;YACZ,IAAI,CAAC,mBAAmB,GAAG,QAAQ,CAAC;YACpC,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC;;;yCAG4B,oBAAoB;;;;2CAIlB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,mBAAmB,KAAK,OAAO;YACnF,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,EAAE;qBACG,GAAG,EAAE;YACZ,IAAI,CAAC,mBAAmB,GAAG,OAAO,CAAC;YACnC,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;;;yCAG4B,gBAAgB;;;;sDAIH,IAAI,CAAC,UAAU;gBACrD,IAAI,CAAC,mBAAmB,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;;;;yBAM9C,GAAG,EAAE;YACZ,IAAI,CAAC,mBAAmB,GAAG,QAAQ,CAAC;YACpC,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAClC,CAAC;;kBAEC,iBAAiB;;;;;;;;;qBASd,GAAG,EAAE;YACZ,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;YAChC,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC;qDACwC,IAAI,CAAC,mBAAmB,KAAK,IAAI;YACxE,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,EAAE;;;;;;;;;QASV,IAAI,CAAC,mBAAmB;YACxB,CAAC,CAAC,IAAI,CAAA;;;uBAGS,GAAG,EAAE;gBACZ,IAAI,CAAC,mBAAmB,GAAG,SAAS,CAAC;gBACrC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC;gBACpD,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC7B,CAAC;;;;WAIJ;YACH,CAAC,CAAC,OAAO;KACZ,CAAC;IACJ,CAAC;IAED,kBAAkB;IAClB,YAAY;QACV,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;IAChD,CAAC;IAED,kBAAkB;IAClB,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAAE,CAAC;YACpC,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,UAAU,GAAG,iBAAiB,CAAC,SAAS,CAAC;IAChD,CAAC;IAEa,mBAAmB;;;YAC/B,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAChC,GAAG,GACH,IAAI,CAAC,OAAO,CAAC,EAAE;gBACd,IAAI,CAAC,OAAO,EAAE,CAAC;oBACb,IAAI,CAAC,SAAS,GAAG,iBAAiB,CAAC,WAAW,CAAC;oBAC/C,OAAO;gBACT,CAAC;gBAED,OAAO;qBACJ,kBAAkB,EAAE;qBACpB,IAAI,CAAC,SAAS,CAAC,EAAE;oBAChB,IAAI,CAAC,SAAS,GAAG,SAAS;wBACxB,CAAC,CAAC,iBAAiB,CAAC,SAAS;wBAC7B,CAAC,CAAC,iBAAiB,CAAC,WAAW,CAAC;gBACpC,CAAC,CAAC;qBACD,KAAK,CAAC,MAAM,CAAC,EAAE;oBACd,OAAO,CAAC,KAAK,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC;oBAC7C,IAAI,CAAC,SAAS,GAAG,iBAAiB,CAAC,WAAW,CAAC;gBACjD,CAAC,CAAC,CAAC;YACP,CAAC,EACA,KAAK,CAAC,MAAM,CAAC,EAAE;gBACd,OAAO,CAAC,KAAK,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;gBAC3C,IAAI,CAAC,SAAS,GAAG,iBAAiB,CAAC,WAAW,CAAC;YACjD,CAAC,CAAC,CAAC;YAEL,MAAA,IAAI,CAAC,gBAAgB,0CAAE,eAAe,CACnC,GAAG,GACH,IAAI,CAAC,OAAO,CAAC,EAAE;gBACd,IAAI,CAAC,OAAO,EAAE,CAAC;oBACb,OAAO,CAAC,KAAK,CAAC,6BAA6B,CAAC,CAAC;oBAC7C,IAAI,CAAC,YAAY,GAAG,iBAAiB,CAAC,WAAW,CAAC;oBAClD,OAAO;gBACT,CAAC;gBAED,OAAO;qBACJ,WAAW,EAAE;qBACb,IAAI,CAAC,SAAS,CAAC,EAAE;oBAChB,IAAI,CAAC,YAAY,GAAG,SAAS;wBAC3B,CAAC,CAAC,iBAAiB,CAAC,SAAS;wBAC7B,CAAC,CAAC,iBAAiB,CAAC,WAAW,CAAC;gBACpC,CAAC,CAAC;qBACD,KAAK,CAAC,MAAM,CAAC,EAAE;oBACd,OAAO,CAAC,KAAK,CAAC,wBAAwB,EAAE,MAAM,CAAC,CAAC;oBAChD,IAAI,CAAC,YAAY,GAAG,iBAAiB,CAAC,WAAW,CAAC;gBACpD,CAAC,CAAC,CAAC;YACP,CAAC,EACA,KAAK,CAAC,MAAM,CAAC,EAAE;gBACd,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;gBAC/C,IAAI,CAAC,YAAY,GAAG,iBAAiB,CAAC,WAAW,CAAC;YACpD,CAAC,CAAC,CAAC;YAEL,MAAA,IAAI,CAAC,gBAAgB,0CAAE,gBAAgB,CACpC,GAAG,GACH,IAAI,CAAC,OAAO,CAAC,EAAE;gBACd,IAAI,CAAC,OAAO,EAAE,CAAC;oBACb,OAAO,CAAC,KAAK,CAAC,gCAAgC,CAAC,CAAC;oBAChD,IAAI,CAAC,aAAa,GAAG,iBAAiB,CAAC,WAAW,CAAC;oBACnD,OAAO;gBACT,CAAC;gBAED,OAAO;qBACJ,kBAAkB,EAAE;qBACpB,IAAI,CAAC,SAAS,CAAC,EAAE;oBAChB,IAAI,CAAC,aAAa,GAAG,SAAS;wBAC5B,CAAC,CAAC,iBAAiB,CAAC,SAAS;wBAC7B,CAAC,CAAC,iBAAiB,CAAC,WAAW,CAAC;gBACpC,CAAC,CAAC;qBACD,KAAK,CAAC,MAAM,CAAC,EAAE;oBACd,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC;oBACjD,IAAI,CAAC,aAAa,GAAG,iBAAiB,CAAC,WAAW,CAAC;gBACrD,CAAC,CAAC,CAAC;YACP,CAAC,EACA,KAAK,CAAC,MAAM,CAAC,EAAE;gBACd,OAAO,CAAC,KAAK,CAAC,wBAAwB,EAAE,MAAM,CAAC,CAAC;gBAChD,IAAI,CAAC,aAAa,GAAG,iBAAiB,CAAC,WAAW,CAAC;YACrD,CAAC,CAAC,CAAC;QACP,CAAC;KAAA;IAEO,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC;IACrD,CAAC;IAEO,gBAAgB,CAAC,CAAQ;QAC/B,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,kBAAkB,EAAE,EAAE,MAAM,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QACpF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC;IACjD,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC;IACtD,CAAC;IAEO,wBAAwB;QAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,uBAAuB,CAAC,CAAC,CAAC;IACzD,CAAC;IAED,kBAAkB;IAClB,MAAM,KAAK,MAAM;QACf,MAAM,qBAAqB,GAAG,GAAG,CAAA,iCAAiC,CAAC;QACnE,MAAM,sBAAsB,GAAG,GAAG,CAAA,oCAAoC,CAAC;QACvE,MAAM,qBAAqB,GAAG,GAAG,CAAA,mCAAmC,CAAC;QAErE,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;iBAuBG,qBAAqB;kBACpB,sBAAsB;;;;;;;;;;;;;;;;;;;;iBAoBvB,qBAAqB;kBACpB,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAgCnB,qBAAqB;;;;;;;;;;;;;;;;;;;;;KAqBrC,CAAC;IACJ,CAAC;CACF,CAAA;AA3V8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0DAA0B;AAE1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAA8C;AAErC;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAqE;AAE5D;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAsE;AAE7D;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAkE;AAEzD;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAmE;AAE1D;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAMD;AAnBf,eAAe;IAD3B,aAAa,CAAC,kBAAkB,CAAC;GACrB,eAAe,CA4V3B","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, PropertyValues, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport applePayButtonImage from '@internetarchive/icon-applepay/index.js';\nimport googlePayButtonImage from '@internetarchive/icon-googlepay/index.js';\nimport paypalButtonImage from '@internetarchive/icon-paypal/index.js';\nimport venmoButtonImage from '@internetarchive/icon-venmo/index.js';\nimport { PaymentProvidersInterface } from '../braintree-manager/payment-providers-interface';\n\nenum PaymentButtonMode {\n  Loading = 'loading',\n  Available = 'available',\n  Unavailable = 'unavailable',\n}\n\n@customElement('payment-selector')\nexport class PaymentSelector extends LitElement {\n  @property({ type: Boolean }) donationInfoValid = true;\n\n  @property({ type: Object }) paymentProviders?: PaymentProvidersInterface;\n\n  @property({ type: String }) private applePayMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n  @property({ type: String }) private googlePayMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n  @property({ type: String }) private venmoMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n  @property({ type: String }) private payPalMode: PaymentButtonMode = PaymentButtonMode.Loading;\n\n  @property({ type: String }) private paymentModeSelected:\n    | 'apple'\n    | 'google'\n    | 'venmo'\n    | 'cc'\n    | 'paypal'\n    | undefined = undefined;\n\n  /** @inheritdoc */\n  render(): TemplateResult {\n    const paymentSelectedCss = this.paymentModeSelected ? 'payment-selected' : '';\n    return html`\n      <div\n        class=\"payment-container ${this.donationInfoValid\n          ? 'donation-info-valid'\n          : 'donation-info-invalid'} ${paymentSelectedCss}\"\n      >\n        <div class=\"payment-provider-container\">\n          <button\n            class=\"applepay provider-button ${this.applePayMode} ${this.paymentModeSelected ===\n            'apple'\n              ? 'selected'\n              : ''}\"\n            @click=${(e: Event) => {\n              this.paymentModeSelected = 'apple';\n              this.applePaySelected(e);\n            }}\n            tabindex=\"0\"\n          >\n            <div class=\"payment-image\">${applePayButtonImage}</div>\n          </button>\n\n          <button\n            class=\"googlepay provider-button ${this.googlePayMode} ${this.paymentModeSelected ===\n            'google'\n              ? 'selected'\n              : ''}\"\n            @click=${() => {\n              this.paymentModeSelected = 'google';\n              this.googlePaySelected();\n            }}\n            tabindex=\"0\"\n          >\n            <div class=\"payment-image\">${googlePayButtonImage}</div>\n          </button>\n\n          <button\n            class=\"venmo provider-button ${this.venmoMode} ${this.paymentModeSelected === 'venmo'\n              ? 'selected'\n              : ''}\"\n            @click=${() => {\n              this.paymentModeSelected = 'venmo';\n              this.venmoSelected();\n            }}\n            tabindex=\"0\"\n          >\n            <div class=\"payment-image\">${venmoButtonImage}</div>\n          </button>\n\n          <div\n            class=\"paypal-container provider-button ${this.payPalMode}\n              ${this.paymentModeSelected === 'paypal' ? 'selected' : ''}\"\n            tabindex=\"0\"\n          >\n            <div class=\"payment-image\">\n              <div\n                class=\"paypal-local-button\"\n                @click=${() => {\n                  this.paymentModeSelected = 'paypal';\n                  this.localPaypalButtonClicked();\n                }}\n              >\n                ${paypalButtonImage}\n              </div>\n              <slot name=\"paypal-button\"></slot>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"credit-card-container\">\n          <button\n            @click=${() => {\n              this.paymentModeSelected = 'cc';\n              this.creditCardSelected();\n            }}\n            class=\"button-style credit-card-button ${this.paymentModeSelected === 'cc'\n              ? 'selected'\n              : ''}\"\n            tabindex=\"0\"\n          >\n            <div class=\"cc-title\">Credit Card</div>\n            <div class=\"cc-background\"></div>\n          </button>\n        </div>\n      </div>\n\n      ${this.paymentModeSelected\n        ? html`\n            <button\n              id=\"change-payment-method\"\n              @click=${() => {\n                this.paymentModeSelected = undefined;\n                this.dispatchEvent(new Event('resetPaymentMethod'));\n                this.setButtonVisibility();\n              }}\n            >\n              Change payment method\n            </button>\n          `\n        : nothing}\n    `;\n  }\n\n  /** @inheritdoc */\n  firstUpdated(): void {\n    this.dispatchEvent(new Event('firstUpdated'));\n  }\n\n  /** @inheritdoc */\n  updated(changed: PropertyValues): void {\n    if (changed.has('paymentProviders')) {\n      this.setButtonVisibility();\n    }\n  }\n\n  showPaypalButton(): void {\n    this.payPalMode = PaymentButtonMode.Available;\n  }\n\n  private async setButtonVisibility(): Promise<void> {\n    this.paymentProviders?.venmoHandler\n      .get()\n      .then(handler => {\n        if (!handler) {\n          this.venmoMode = PaymentButtonMode.Unavailable;\n          return;\n        }\n\n        handler\n          .isBrowserSupported()\n          .then(supported => {\n            this.venmoMode = supported\n              ? PaymentButtonMode.Available\n              : PaymentButtonMode.Unavailable;\n          })\n          .catch(reason => {\n            console.error('error loading venmo', reason);\n            this.venmoMode = PaymentButtonMode.Unavailable;\n          });\n      })\n      .catch(reason => {\n        console.error('venmo unavailable', reason);\n        this.venmoMode = PaymentButtonMode.Unavailable;\n      });\n\n    this.paymentProviders?.applePayHandler\n      .get()\n      .then(handler => {\n        if (!handler) {\n          console.error('applePayHandler unavailable');\n          this.applePayMode = PaymentButtonMode.Unavailable;\n          return;\n        }\n\n        handler\n          .isAvailable()\n          .then(supported => {\n            this.applePayMode = supported\n              ? PaymentButtonMode.Available\n              : PaymentButtonMode.Unavailable;\n          })\n          .catch(reason => {\n            console.error('error loading applepay', reason);\n            this.applePayMode = PaymentButtonMode.Unavailable;\n          });\n      })\n      .catch(reason => {\n        console.error('apple pay unavailable', reason);\n        this.applePayMode = PaymentButtonMode.Unavailable;\n      });\n\n    this.paymentProviders?.googlePayHandler\n      .get()\n      .then(handler => {\n        if (!handler) {\n          console.error('google pay handler unavailable');\n          this.googlePayMode = PaymentButtonMode.Unavailable;\n          return;\n        }\n\n        handler\n          .isBrowserSupported()\n          .then(supported => {\n            this.googlePayMode = supported\n              ? PaymentButtonMode.Available\n              : PaymentButtonMode.Unavailable;\n          })\n          .catch(reason => {\n            console.error('error loading googlepay', reason);\n            this.googlePayMode = PaymentButtonMode.Unavailable;\n          });\n      })\n      .catch(reason => {\n        console.error('google pay unavailable', reason);\n        this.googlePayMode = PaymentButtonMode.Unavailable;\n      });\n  }\n\n  private googlePaySelected(): void {\n    this.dispatchEvent(new Event('googlePaySelected'));\n  }\n\n  private applePaySelected(e: Event): void {\n    const event = new CustomEvent('applePaySelected', { detail: { originalEvent: e } });\n    this.dispatchEvent(event);\n  }\n\n  private venmoSelected(): void {\n    this.dispatchEvent(new Event('venmoSelected'));\n  }\n\n  private creditCardSelected(): void {\n    this.dispatchEvent(new Event('creditCardSelected'));\n  }\n\n  private localPaypalButtonClicked(): void {\n    this.dispatchEvent(new Event('paypalBlockerSelected'));\n  }\n\n  /** @inheritdoc */\n  static get styles(): CSSResult {\n    const paymentButtonWidthCss = css`var(--paymentButtonWidth, 5rem)`;\n    const paymentButtonHeightCss = css`var(--paymentButtonHeight, 3.2rem)`;\n    const creditCardFontSizeCss = css`var(--creditCardFontSize, 1.8rem)`;\n\n    return css`\n      button {\n        color: inherit;\n        font-family: inherit;\n      }\n\n      .payment-container {\n        width: 100%;\n      }\n\n      .payment-provider-container {\n        display: grid;\n        grid-template-columns: 1fr 1fr 1fr 1fr;\n        grid-gap: 1rem;\n        margin-bottom: 1rem;\n        max-width: 23rem;\n      }\n\n      .provider-button {\n        border: 0;\n        padding: 0;\n        background: none;\n        cursor: pointer;\n        width: ${paymentButtonWidthCss};\n        height: ${paymentButtonHeightCss};\n      }\n\n      .provider-button.unavailable {\n        display: none;\n      }\n\n      .provider-button.loading {\n        border: 1px solid #ddd;\n        border-radius: 2px;\n        /* account for the borders that don't exist once the provider loads, otherwise the layout shifts */\n        margin-bottom: -2px;\n      }\n\n      .provider-button.loading .payment-image {\n        display: none;\n      }\n\n      .paypal-local-button {\n        position: absolute;\n        width: ${paymentButtonWidthCss};\n        height: ${paymentButtonHeightCss};\n      }\n\n      .donation-info-valid .paypal-local-button {\n        z-index: 0;\n      }\n\n      .donation-info-invalid .paypal-local-button {\n        z-index: 250;\n      }\n\n      .credit-card-button {\n        color: var(--ccButtonFontColor, #333);\n        background-color: var(--ccButtonColor, white);\n        border: 1px solid #333;\n        border-radius: 4px;\n        cursor: pointer;\n        margin: 0;\n        padding: 0.7rem 1rem;\n        width: 100%;\n      }\n\n      .credit-card-button .cc-background {\n        height: 2.4rem;\n        width: 100%;\n        background-repeat: no-repeat;\n        background-image: url(https://archive.org/images/cc_logos.png);\n        background-position: 50% 50%;\n        background-size: contain;\n      }\n\n      .credit-card-button .cc-title {\n        font-size: ${creditCardFontSizeCss};\n        font-weight: 700;\n        margin-bottom: 0.5rem;\n      }\n\n      button#change-payment-method {\n        margin-top: 10px;\n        background: white;\n        border: 1px solid;\n        border-radius: 3px;\n        padding: 5px;\n      }\n\n      button#change-payment-method:hover {\n        cursor: pointer;\n      }\n\n      .payment-selected button:not(.selected),\n      .payment-selected .paypal-container:not(.selected) {\n        display: none;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"payment-selector.js","sourceRoot":"","sources":["../../../src/form-elements/payment-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, PropertyValues, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport applePayButtonImage from '@internetarchive/icon-applepay/index.js';\r\nimport googlePayButtonImage from '@internetarchive/icon-googlepay/index.js';\r\nimport paypalButtonImage from '@internetarchive/icon-paypal/index.js';\r\nimport venmoButtonImage from '@internetarchive/icon-venmo/index.js';\r\nimport { PaymentProvidersInterface } from '../braintree-manager/payment-providers-interface';\r\n\r\nenum PaymentButtonMode {\r\n  Loading = 'loading',\r\n  Available = 'available',\r\n  Unavailable = 'unavailable',\r\n}\r\n\r\n@customElement('payment-selector')\r\nexport class PaymentSelector extends LitElement {\r\n  @property({ type: Boolean }) donationInfoValid = true;\r\n\r\n  @property({ type: Object }) paymentProviders?: PaymentProvidersInterface;\r\n\r\n  @property({ type: String }) private applePayMode: PaymentButtonMode = PaymentButtonMode.Loading;\r\n\r\n  @property({ type: String }) private googlePayMode: PaymentButtonMode = PaymentButtonMode.Loading;\r\n\r\n  @property({ type: String }) private venmoMode: PaymentButtonMode = PaymentButtonMode.Loading;\r\n\r\n  @property({ type: String }) private payPalMode: PaymentButtonMode = PaymentButtonMode.Loading;\r\n\r\n  @property({ type: String }) private paymentModeSelected:\r\n    | 'apple'\r\n    | 'google'\r\n    | 'venmo'\r\n    | 'cc'\r\n    | 'paypal'\r\n    | undefined = undefined;\r\n\r\n  /** @inheritdoc */\r\n  render(): TemplateResult {\r\n    const paymentSelectedCss = this.paymentModeSelected ? 'payment-selected' : '';\r\n    return html`\r\n      <div\r\n        class=\"payment-container ${this.donationInfoValid\r\n          ? 'donation-info-valid'\r\n          : 'donation-info-invalid'} ${paymentSelectedCss}\"\r\n      >\r\n        <div class=\"payment-provider-container\">\r\n          <button\r\n            class=\"applepay provider-button ${this.applePayMode} ${this.paymentModeSelected ===\r\n            'apple'\r\n              ? 'selected'\r\n              : ''}\"\r\n            @click=${(e: Event) => {\r\n              this.paymentModeSelected = 'apple';\r\n              this.applePaySelected(e);\r\n            }}\r\n            tabindex=\"0\"\r\n          >\r\n            <div class=\"payment-image\">${applePayButtonImage}</div>\r\n          </button>\r\n\r\n          <button\r\n            class=\"googlepay provider-button ${this.googlePayMode} ${this.paymentModeSelected ===\r\n            'google'\r\n              ? 'selected'\r\n              : ''}\"\r\n            @click=${() => {\r\n              this.paymentModeSelected = 'google';\r\n              this.googlePaySelected();\r\n            }}\r\n            tabindex=\"0\"\r\n          >\r\n            <div class=\"payment-image\">${googlePayButtonImage}</div>\r\n          </button>\r\n\r\n          <button\r\n            class=\"venmo provider-button ${this.venmoMode} ${this.paymentModeSelected === 'venmo'\r\n              ? 'selected'\r\n              : ''}\"\r\n            @click=${() => {\r\n              this.paymentModeSelected = 'venmo';\r\n              this.venmoSelected();\r\n            }}\r\n            tabindex=\"0\"\r\n          >\r\n            <div class=\"payment-image\">${venmoButtonImage}</div>\r\n          </button>\r\n\r\n          <div\r\n            class=\"paypal-container provider-button ${this.payPalMode}\r\n              ${this.paymentModeSelected === 'paypal' ? 'selected' : ''}\"\r\n            tabindex=\"0\"\r\n          >\r\n            <div class=\"payment-image\">\r\n              <div\r\n                class=\"paypal-local-button\"\r\n                @click=${() => {\r\n                  this.paymentModeSelected = 'paypal';\r\n                  this.localPaypalButtonClicked();\r\n                }}\r\n              >\r\n                ${paypalButtonImage}\r\n              </div>\r\n              <slot name=\"paypal-button\"></slot>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"credit-card-container\">\r\n          <button\r\n            @click=${() => {\r\n              this.paymentModeSelected = 'cc';\r\n              this.creditCardSelected();\r\n            }}\r\n            class=\"button-style credit-card-button ${this.paymentModeSelected === 'cc'\r\n              ? 'selected'\r\n              : ''}\"\r\n            tabindex=\"0\"\r\n          >\r\n            <div class=\"cc-title\">Credit Card</div>\r\n            <div class=\"cc-background\"></div>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      ${this.paymentModeSelected\r\n        ? html`\r\n            <button\r\n              id=\"change-payment-method\"\r\n              @click=${() => {\r\n                this.paymentModeSelected = undefined;\r\n                this.dispatchEvent(new Event('resetPaymentMethod'));\r\n                this.setButtonVisibility();\r\n              }}\r\n            >\r\n              Change payment method\r\n            </button>\r\n          `\r\n        : nothing}\r\n    `;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  firstUpdated(): void {\r\n    this.dispatchEvent(new Event('firstUpdated'));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  updated(changed: PropertyValues): void {\r\n    if (changed.has('paymentProviders')) {\r\n      this.setButtonVisibility();\r\n    }\r\n  }\r\n\r\n  showPaypalButton(): void {\r\n    this.payPalMode = PaymentButtonMode.Available;\r\n  }\r\n\r\n  private async setButtonVisibility(): Promise<void> {\r\n    this.paymentProviders?.venmoHandler\r\n      .get()\r\n      .then(handler => {\r\n        if (!handler) {\r\n          this.venmoMode = PaymentButtonMode.Unavailable;\r\n          return;\r\n        }\r\n\r\n        handler\r\n          .isBrowserSupported()\r\n          .then(supported => {\r\n            this.venmoMode = supported\r\n              ? PaymentButtonMode.Available\r\n              : PaymentButtonMode.Unavailable;\r\n          })\r\n          .catch(reason => {\r\n            console.error('error loading venmo', reason);\r\n            this.venmoMode = PaymentButtonMode.Unavailable;\r\n          });\r\n      })\r\n      .catch(reason => {\r\n        console.error('venmo unavailable', reason);\r\n        this.venmoMode = PaymentButtonMode.Unavailable;\r\n      });\r\n\r\n    this.paymentProviders?.applePayHandler\r\n      .get()\r\n      .then(handler => {\r\n        if (!handler) {\r\n          console.error('applePayHandler unavailable');\r\n          this.applePayMode = PaymentButtonMode.Unavailable;\r\n          return;\r\n        }\r\n\r\n        handler\r\n          .isAvailable()\r\n          .then(supported => {\r\n            this.applePayMode = supported\r\n              ? PaymentButtonMode.Available\r\n              : PaymentButtonMode.Unavailable;\r\n          })\r\n          .catch(reason => {\r\n            console.error('error loading applepay', reason);\r\n            this.applePayMode = PaymentButtonMode.Unavailable;\r\n          });\r\n      })\r\n      .catch(reason => {\r\n        console.error('apple pay unavailable', reason);\r\n        this.applePayMode = PaymentButtonMode.Unavailable;\r\n      });\r\n\r\n    this.paymentProviders?.googlePayHandler\r\n      .get()\r\n      .then(handler => {\r\n        if (!handler) {\r\n          console.error('google pay handler unavailable');\r\n          this.googlePayMode = PaymentButtonMode.Unavailable;\r\n          return;\r\n        }\r\n\r\n        handler\r\n          .isBrowserSupported()\r\n          .then(supported => {\r\n            this.googlePayMode = supported\r\n              ? PaymentButtonMode.Available\r\n              : PaymentButtonMode.Unavailable;\r\n          })\r\n          .catch(reason => {\r\n            console.error('error loading googlepay', reason);\r\n            this.googlePayMode = PaymentButtonMode.Unavailable;\r\n          });\r\n      })\r\n      .catch(reason => {\r\n        console.error('google pay unavailable', reason);\r\n        this.googlePayMode = PaymentButtonMode.Unavailable;\r\n      });\r\n  }\r\n\r\n  private googlePaySelected(): void {\r\n    this.dispatchEvent(new Event('googlePaySelected'));\r\n  }\r\n\r\n  private applePaySelected(e: Event): void {\r\n    const event = new CustomEvent('applePaySelected', { detail: { originalEvent: e } });\r\n    this.dispatchEvent(event);\r\n  }\r\n\r\n  private venmoSelected(): void {\r\n    this.dispatchEvent(new Event('venmoSelected'));\r\n  }\r\n\r\n  private creditCardSelected(): void {\r\n    this.dispatchEvent(new Event('creditCardSelected'));\r\n  }\r\n\r\n  private localPaypalButtonClicked(): void {\r\n    this.dispatchEvent(new Event('paypalBlockerSelected'));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  static get styles(): CSSResult {\r\n    const paymentButtonWidthCss = css`var(--paymentButtonWidth, 5rem)`;\r\n    const paymentButtonHeightCss = css`var(--paymentButtonHeight, 3.2rem)`;\r\n    const creditCardFontSizeCss = css`var(--creditCardFontSize, 1.8rem)`;\r\n\r\n    return css`\r\n      button {\r\n        color: inherit;\r\n        font-family: inherit;\r\n      }\r\n\r\n      .payment-container {\r\n        width: 100%;\r\n      }\r\n\r\n      .payment-provider-container {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr 1fr 1fr;\r\n        grid-gap: 1rem;\r\n        margin-bottom: 1rem;\r\n        max-width: 23rem;\r\n      }\r\n\r\n      .provider-button {\r\n        border: 0;\r\n        padding: 0;\r\n        background: none;\r\n        cursor: pointer;\r\n        width: ${paymentButtonWidthCss};\r\n        height: ${paymentButtonHeightCss};\r\n      }\r\n\r\n      .provider-button.unavailable {\r\n        display: none;\r\n      }\r\n\r\n      .provider-button.loading {\r\n        border: 1px solid #ddd;\r\n        border-radius: 2px;\r\n        /* account for the borders that don't exist once the provider loads, otherwise the layout shifts */\r\n        margin-bottom: -2px;\r\n      }\r\n\r\n      .provider-button.loading .payment-image {\r\n        display: none;\r\n      }\r\n\r\n      .paypal-local-button {\r\n        position: absolute;\r\n        width: ${paymentButtonWidthCss};\r\n        height: ${paymentButtonHeightCss};\r\n      }\r\n\r\n      .donation-info-valid .paypal-local-button {\r\n        z-index: 0;\r\n      }\r\n\r\n      .donation-info-invalid .paypal-local-button {\r\n        z-index: 250;\r\n      }\r\n\r\n      .credit-card-button {\r\n        color: var(--ccButtonFontColor, #333);\r\n        background-color: var(--ccButtonColor, white);\r\n        border: 1px solid #333;\r\n        border-radius: 4px;\r\n        cursor: pointer;\r\n        margin: 0;\r\n        padding: 0.7rem 1rem;\r\n        width: 100%;\r\n      }\r\n\r\n      .credit-card-button .cc-background {\r\n        height: 2.4rem;\r\n        width: 100%;\r\n        background-repeat: no-repeat;\r\n        background-image: url(https://archive.org/images/cc_logos.png);\r\n        background-position: 50% 50%;\r\n        background-size: contain;\r\n      }\r\n\r\n      .credit-card-button .cc-title {\r\n        font-size: ${creditCardFontSizeCss};\r\n        font-weight: 700;\r\n        margin-bottom: 0.5rem;\r\n      }\r\n\r\n      button#change-payment-method {\r\n        margin-top: 10px;\r\n        background: white;\r\n        border: 1px solid;\r\n        border-radius: 3px;\r\n        padding: 5px;\r\n      }\r\n\r\n      button#change-payment-method:hover {\r\n        cursor: pointer;\r\n      }\r\n\r\n      .payment-selected button:not(.selected),\r\n      .payment-selected .paypal-container:not(.selected) {\r\n        display: none;\r\n      }\r\n    `;\r\n  }\r\n}\r\n"]}

package/dist/src/form-elements/total-amount.js

@@ -5,9 +5,9 @@ import { customElement, property } from 'lit/decorators.js';
 import currency from 'currency.js';
 let TotalAmount = class TotalAmount extends LitElement {
     render() {
-        return html `
-      <div class="top-line"></div>
-      <div class="total-line">Total: ${this.totalAmount}</div>
+        return html `
+      <div class="top-line"></div>
+      <div class="total-line">Total: ${this.totalAmount}</div>
     `;
     }
     get totalAmount() {
@@ -22,19 +22,19 @@ let TotalAmount = class TotalAmount extends LitElement {
         const lineThickness = css `var(--totalAmountLineThickness, 2px)`;
         const totalAmountVerticalSpacing = css `var(--totalAmountVerticalSpacing, 0.5rem)`;
         const totalAmountFontSize = css `var(--totalAmountFontSize, 2.6rem)`;
-        return css `
-      .top-line {
-        width: 100%;
-        height: ${lineThickness};
-        background-color: ${lineColor};
-      }
-
-      .total-line {
-        font-size: ${totalAmountFontSize};
-        font-weight: bold;
-        text-align: center;
-        margin-top: ${totalAmountVerticalSpacing};
-      }
+        return css `
+      .top-line {
+        width: 100%;
+        height: ${lineThickness};
+        background-color: ${lineColor};
+      }
+
+      .total-line {
+        font-size: ${totalAmountFontSize};
+        font-weight: bold;
+        text-align: center;
+        margin-top: ${totalAmountVerticalSpacing};
+      }
     `;
     }
 };

package/dist/src/form-elements/total-amount.js.map

@@ -1 +1 @@
-{"version":3,"file":"total-amount.js","sourceRoot":"","sources":["../../../src/form-elements/total-amount.ts"],"names":[],"mappings":";AAAA,OAAO,EAAuB,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC/F,OAAO,EAAE,GAAG,EAAa,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,QAAQ,MAAM,aAAa,CAAC;AAG5B,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAIzC,MAAM;QACJ,OAAO,IAAI,CAAA;;uCAEwB,IAAI,CAAC,WAAW;KAClD,CAAC;IACJ,CAAC;IAED,IAAY,WAAW;QACrB,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,OAAO;QAC/B,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC;QAC3E,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,KAAK,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;QACxF,OAAO,GAAG,MAAM,GAAG,OAAO,EAAE,CAAC;IAC/B,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,SAAS,GAAG,GAAG,CAAA,mCAAmC,CAAC;QACzD,MAAM,aAAa,GAAG,GAAG,CAAA,sCAAsC,CAAC;QAChE,MAAM,0BAA0B,GAAG,GAAG,CAAA,2CAA2C,CAAC;QAClF,MAAM,mBAAmB,GAAG,GAAG,CAAA,oCAAoC,CAAC;QAEpE,OAAO,GAAG,CAAA;;;kBAGI,aAAa;4BACH,SAAS;;;;qBAIhB,mBAAmB;;;sBAGlB,0BAA0B;;KAE3C,CAAC;IACJ,CAAC;CACF,CAAA;AArCC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACQ;AAFxB,WAAW;IADvB,aAAa,CAAC,4BAA4B,CAAC;GAC/B,WAAW,CAuCvB","sourcesContent":["import { DonationPaymentInfo, DonationType } from '@internetarchive/donation-form-data-models';\nimport { css, CSSResult, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport currency from 'currency.js';\n\n@customElement('donation-form-total-amount')\nexport class TotalAmount extends LitElement {\n  @property({ type: Object })\n  donationInfo?: DonationPaymentInfo;\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"top-line\"></div>\n      <div class=\"total-line\">Total: ${this.totalAmount}</div>\n    `;\n  }\n\n  private get totalAmount(): string | undefined {\n    if (!this.donationInfo) return;\n    const amount = currency(this.donationInfo.total, { symbol: '$' }).format();\n    const monthly = this.donationInfo.donationType === DonationType.Monthly ? '/month' : '';\n    return `${amount}${monthly}`;\n  }\n\n  static get styles(): CSSResult {\n    const lineColor = css`var(--totalAmountLineColor, #333)`;\n    const lineThickness = css`var(--totalAmountLineThickness, 2px)`;\n    const totalAmountVerticalSpacing = css`var(--totalAmountVerticalSpacing, 0.5rem)`;\n    const totalAmountFontSize = css`var(--totalAmountFontSize, 2.6rem)`;\n\n    return css`\n      .top-line {\n        width: 100%;\n        height: ${lineThickness};\n        background-color: ${lineColor};\n      }\n\n      .total-line {\n        font-size: ${totalAmountFontSize};\n        font-weight: bold;\n        text-align: center;\n        margin-top: ${totalAmountVerticalSpacing};\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"total-amount.js","sourceRoot":"","sources":["../../../src/form-elements/total-amount.ts"],"names":[],"mappings":";AAAA,OAAO,EAAuB,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC/F,OAAO,EAAE,GAAG,EAAa,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,QAAQ,MAAM,aAAa,CAAC;AAG5B,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAIzC,MAAM;QACJ,OAAO,IAAI,CAAA;;uCAEwB,IAAI,CAAC,WAAW;KAClD,CAAC;IACJ,CAAC;IAED,IAAY,WAAW;QACrB,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,OAAO;QAC/B,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC;QAC3E,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,KAAK,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;QACxF,OAAO,GAAG,MAAM,GAAG,OAAO,EAAE,CAAC;IAC/B,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,SAAS,GAAG,GAAG,CAAA,mCAAmC,CAAC;QACzD,MAAM,aAAa,GAAG,GAAG,CAAA,sCAAsC,CAAC;QAChE,MAAM,0BAA0B,GAAG,GAAG,CAAA,2CAA2C,CAAC;QAClF,MAAM,mBAAmB,GAAG,GAAG,CAAA,oCAAoC,CAAC;QAEpE,OAAO,GAAG,CAAA;;;kBAGI,aAAa;4BACH,SAAS;;;;qBAIhB,mBAAmB;;;sBAGlB,0BAA0B;;KAE3C,CAAC;IACJ,CAAC;CACF,CAAA;AArCC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACQ;AAFxB,WAAW;IADvB,aAAa,CAAC,4BAA4B,CAAC;GAC/B,WAAW,CAuCvB","sourcesContent":["import { DonationPaymentInfo, DonationType } from '@internetarchive/donation-form-data-models';\r\nimport { css, CSSResult, html, LitElement, TemplateResult } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport currency from 'currency.js';\r\n\r\n@customElement('donation-form-total-amount')\r\nexport class TotalAmount extends LitElement {\r\n  @property({ type: Object })\r\n  donationInfo?: DonationPaymentInfo;\r\n\r\n  render(): TemplateResult {\r\n    return html`\r\n      <div class=\"top-line\"></div>\r\n      <div class=\"total-line\">Total: ${this.totalAmount}</div>\r\n    `;\r\n  }\r\n\r\n  private get totalAmount(): string | undefined {\r\n    if (!this.donationInfo) return;\r\n    const amount = currency(this.donationInfo.total, { symbol: '$' }).format();\r\n    const monthly = this.donationInfo.donationType === DonationType.Monthly ? '/month' : '';\r\n    return `${amount}${monthly}`;\r\n  }\r\n\r\n  static get styles(): CSSResult {\r\n    const lineColor = css`var(--totalAmountLineColor, #333)`;\r\n    const lineThickness = css`var(--totalAmountLineThickness, 2px)`;\r\n    const totalAmountVerticalSpacing = css`var(--totalAmountVerticalSpacing, 0.5rem)`;\r\n    const totalAmountFontSize = css`var(--totalAmountFontSize, 2.6rem)`;\r\n\r\n    return css`\r\n      .top-line {\r\n        width: 100%;\r\n        height: ${lineThickness};\r\n        background-color: ${lineColor};\r\n      }\r\n\r\n      .total-line {\r\n        font-size: ${totalAmountFontSize};\r\n        font-weight: bold;\r\n        text-align: center;\r\n        margin-top: ${totalAmountVerticalSpacing};\r\n      }\r\n    `;\r\n  }\r\n}\r\n"]}

package/dist/src/modals/confirm-donation-modal-content.js

@@ -24,19 +24,19 @@ let ConfirmDonationContent = class ConfirmDonationContent extends LitElement {
     }
     get confirmationText() {
         const amount = currency(this.amount, { symbol: this.currencySymbol }).format();
-        return html `
-      <p>
-        You are about to make a <b>${this.donationType}</b> donation of
-        <b>${amount} ${this.currencyType}</b> to the Internet Archive.
-      </p>
+        return html `
+      <p>
+        You are about to make a <b>${this.donationType}</b> donation of
+        <b>${amount} ${this.currencyType}</b> to the Internet Archive.
+      </p>
     `;
     }
     get confirmUpsellText() {
         const amount = currency(this.amount, { symbol: this.currencySymbol }).format();
-        return html `<p>
-      You are about to begin making <b>monthly</b> donations of
-      <b>${amount} ${this.currencyType}</b> to the Internet Archive. (Your first recurring
-      contribution will be next month.)
+        return html `<p>
+      You are about to begin making <b>monthly</b> donations of
+      <b>${amount} ${this.currencyType}</b> to the Internet Archive. (Your first recurring
+      contribution will be next month.)
     </p>`;
     }
     confirm() {
@@ -52,53 +52,53 @@ let ConfirmDonationContent = class ConfirmDonationContent extends LitElement {
     }
     /** @inheritdoc */
     render() {
-        return html `
-      ${this.donationType === DonationType.Upsell ? this.confirmUpsellText : this.confirmationText}
-
-      <div class="cta-group">
-        <button id="confirm" @click=${() => this.confirm()}>${this.confirmCTA}</button>
-        <button id="cancel" @click=${() => this.cancel()}>Cancel</button>
-      </div>
+        return html `
+      ${this.donationType === DonationType.Upsell ? this.confirmUpsellText : this.confirmationText}
+
+      <div class="cta-group">
+        <button id="confirm" @click=${() => this.confirm()}>${this.confirmCTA}</button>
+        <button id="cancel" @click=${() => this.cancel()}>Cancel</button>
+      </div>
     `;
     }
     static get styles() {
         const ctaButtonColor = css `var(--upsellCTAButtonColor, #194880)`;
         const ctaButtonDisabledColor = css `var(--upsellCTAButtonDisabledColor, rgba(109,148,201,0.5))`;
-        return css `
-      :host {
-        display: block;
-      }
-
-      button {
-        outline: none;
-        cursor: pointer;
-      }
-
-      button#confirm {
-        font-size: 2rem;
-        display: block;
-        width: 100%;
-        margin-top: 0.5rem;
-        padding: 1rem 2rem;
-        background-color: ${ctaButtonColor};
-        color: #fff;
-        border-radius: 5px;
-        border: 0;
-        font-weight: bold;
-        line-height: normal;
-      }
-
-      button#cancel {
-        margin-top: 1rem;
-        border: 0;
-        text-decoration: underline;
-        background-color: transparent;
-      }
-
-      button:disabled {
-        background-color: ${ctaButtonDisabledColor};
-        cursor: not-allowed;
-      }
+        return css `
+      :host {
+        display: block;
+      }
+
+      button {
+        outline: none;
+        cursor: pointer;
+      }
+
+      button#confirm {
+        font-size: 2rem;
+        display: block;
+        width: 100%;
+        margin-top: 0.5rem;
+        padding: 1rem 2rem;
+        background-color: ${ctaButtonColor};
+        color: #fff;
+        border-radius: 5px;
+        border: 0;
+        font-weight: bold;
+        line-height: normal;
+      }
+
+      button#cancel {
+        margin-top: 1rem;
+        border: 0;
+        text-decoration: underline;
+        background-color: transparent;
+      }
+
+      button:disabled {
+        background-color: ${ctaButtonDisabledColor};
+        cursor: not-allowed;
+      }
     }`;
     }
     /**