@internetarchive/elements 1.1.7-webdev-9378.0 → 1.1.7-webdev-9054.1

package/dist/src/elements/ia-donation-form/modals/ia-donation-error-modal-content.js

@@ -0,0 +1,63 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, } from 'lit';
+import { customElement } from '../../../util/custom-element.js';
+import { msg } from '@lit/localize';
+import themeStyles from '../../../themes/theme-styles.js';
+/** The footer of the error modal: a link to the help article on failed donations. */
+let IADonationErrorModalContent = class IADonationErrorModalContent extends LitElement {
+    render() {
+        return html `
+      <div class="container">
+        <a
+          href="https://help.archive.org/help/why-is-there-a-problem-processing-my-donation/"
+          rel="noopener"
+          target="_blank"
+        >
+          ${msg('Questions?')}
+        </a>
+      </div>
+    `;
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        :host {
+          --donation-error-modal-base-font-size--: var(
+            --ia-donation-form-base-font-size,
+            10px
+          );
+          --donation-error-modal-link-top-margin--: var(
+            --ia-donation-error-modal-link-top-margin,
+            var(--donation-error-modal-base-font-size--)
+          );
+          --donation-error-modal-link-color--: var(
+            --ia-donation-error-modal-link-color,
+            var(--mid-gray)
+          );
+          --donation-error-modal-link-font-size--: var(
+            --ia-donation-error-modal-link-font-size,
+            calc(var(--donation-error-modal-base-font-size--) * 1.4)
+          );
+        }
+
+        .container {
+          margin-top: var(--donation-error-modal-link-top-margin--);
+          text-align: center;
+        }
+
+        a,
+        a:link,
+        a:visited {
+          color: var(--donation-error-modal-link-color--);
+          font-size: var(--donation-error-modal-link-font-size--);
+        }
+      `,
+        ];
+    }
+};
+IADonationErrorModalContent = __decorate([
+    customElement('ia-donation-error-modal-content')
+], IADonationErrorModalContent);
+export { IADonationErrorModalContent };
+//# sourceMappingURL=ia-donation-error-modal-content.js.map

package/dist/src/elements/ia-donation-form/modals/ia-donation-error-modal-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-error-modal-content.js","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/modals/ia-donation-error-modal-content.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,GAGX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEpC,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD,qFAAqF;AAE9E,IAAM,2BAA2B,GAAjC,MAAM,2BAA4B,SAAQ,UAAU;IACzD,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;YAOH,GAAG,CAAC,YAAY,CAAC;;;KAGxB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA+BF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AApDY,2BAA2B;IADvC,aAAa,CAAC,iCAAiC,CAAC;GACpC,2BAA2B,CAoDvC","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  type CSSResultGroup,\n  type TemplateResult,\n} from 'lit';\nimport { customElement } from '@src/util/custom-element';\nimport { msg } from '@lit/localize';\n\nimport themeStyles from '@src/themes/theme-styles';\n\n/** The footer of the error modal: a link to the help article on failed donations. */\n@customElement('ia-donation-error-modal-content')\nexport class IADonationErrorModalContent extends LitElement {\n  render(): TemplateResult {\n    return html`\n      <div class=\"container\">\n        <a\n          href=\"https://help.archive.org/help/why-is-there-a-problem-processing-my-donation/\"\n          rel=\"noopener\"\n          target=\"_blank\"\n        >\n          ${msg('Questions?')}\n        </a>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --donation-error-modal-base-font-size--: var(\n            --ia-donation-form-base-font-size,\n            10px\n          );\n          --donation-error-modal-link-top-margin--: var(\n            --ia-donation-error-modal-link-top-margin,\n            var(--donation-error-modal-base-font-size--)\n          );\n          --donation-error-modal-link-color--: var(\n            --ia-donation-error-modal-link-color,\n            var(--mid-gray)\n          );\n          --donation-error-modal-link-font-size--: var(\n            --ia-donation-error-modal-link-font-size,\n            calc(var(--donation-error-modal-base-font-size--) * 1.4)\n          );\n        }\n\n        .container {\n          margin-top: var(--donation-error-modal-link-top-margin--);\n          text-align: center;\n        }\n\n        a,\n        a:link,\n        a:visited {\n          color: var(--donation-error-modal-link-color--);\n          font-size: var(--donation-error-modal-link-font-size--);\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/elements/ia-donation-form/modals/ia-donation-upsell-modal-content.d.ts

@@ -0,0 +1,28 @@
+import { LitElement, type CSSResultGroup, type TemplateResult } from 'lit';
+/** How the "yes" side of the upsell is offered: our own button, or a slot for the PayPal button. */
+export declare const UpsellModalCTAMode: {
+    readonly YesButton: "YesButton";
+    readonly PayPalUpsellSlot: "PayPalUpsellSlot";
+};
+export type UpsellModalCTAMode = (typeof UpsellModalCTAMode)[keyof typeof UpsellModalCTAMode];
+/**
+ * The content of the upsell modal shown after a one-time donation: a thank
+ * you, a monthly amount field, and a yes button (or the PayPal button, when
+ * the donation came through PayPal).
+ */
+export declare class IADonationUpsellModalContent extends LitElement {
+    yesButtonMode: UpsellModalCTAMode;
+    amount: number;
+    error?: TemplateResult;
+    amountInput: HTMLInputElement;
+    private currencyValidator;
+    render(): TemplateResult;
+    private get yesButton();
+    private amountChanged;
+    private handleCustomAmountInput;
+    private processAmount;
+    private yesSelected;
+    private noThanksSelected;
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-donation-upsell-modal-content.d.ts.map

package/dist/src/elements/ia-donation-form/modals/ia-donation-upsell-modal-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-upsell-modal-content.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/modals/ia-donation-upsell-modal-content.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAQb,oGAAoG;AACpG,eAAO,MAAM,kBAAkB;;;CAGrB,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAC5B,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,OAAO,kBAAkB,CAAC,CAAC;AAE/D;;;;GAIG;AACH,qBACa,4BAA6B,SAAQ,UAAU;IAC9B,aAAa,EAAE,kBAAkB,CAC9B;IAEH,MAAM,SAAK;IAEX,KAAK,CAAC,EAAE,cAAc,CAAC;IAE3B,WAAW,EAAG,gBAAgB,CAAC;IAEvD,OAAO,CAAC,iBAAiB,CAA8C;IAEvE,MAAM,IAAI,cAAc;IAgCxB,OAAO,KAAK,SAAS,GA6BpB;IAED,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,uBAAuB;IAS/B,OAAO,CAAC,aAAa;IA2BrB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,gBAAgB;IAIxB,MAAM,KAAK,MAAM,IAAI,cAAc,CAiKlC;CACF"}

package/dist/src/elements/ia-donation-form/modals/ia-donation-upsell-modal-content.js

@@ -0,0 +1,313 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { customElement } from '../../../util/custom-element.js';
+import { msg } from '@lit/localize';
+import themeStyles from '../../../themes/theme-styles.js';
+import { CurrencyValidator } from '../currency-validator.js';
+/** How the "yes" side of the upsell is offered: our own button, or a slot for the PayPal button. */
+export const UpsellModalCTAMode = {
+    YesButton: 'YesButton',
+    PayPalUpsellSlot: 'PayPalUpsellSlot',
+};
+/**
+ * The content of the upsell modal shown after a one-time donation: a thank
+ * you, a monthly amount field, and a yes button (or the PayPal button, when
+ * the donation came through PayPal).
+ */
+let IADonationUpsellModalContent = class IADonationUpsellModalContent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.yesButtonMode = UpsellModalCTAMode.YesButton;
+        this.amount = 5;
+        this.currencyValidator = new CurrencyValidator();
+    }
+    render() {
+        return html `
+      <h3>${msg('Thank you for donating!')}</h3>
+      <button @click=${this.noThanksSelected} class="cta-button" id="no-button">
+        ${msg('Continue')}
+      </button>
+      <p class="or_separator"><span>${msg('or')}</span></p>
+      <h3>${msg('Join our Monthly Giving Circle')}</h3>
+      <p class="appeal">
+        ${msg('Monthly support helps us reliably plan for the future.')}
+      </p>
+      <div class="monthly-amount">
+        <h1>${msg('Enter your monthly amount')}</h1>
+        <div class="amount-input">
+          <span class="dollar-symbol">$</span>
+          <input
+            id="amount-input"
+            type="text"
+            tabindex="0"
+            aria-label=${msg('Monthly amount in dollars')}
+            value=${this.amount}
+            @input=${this.amountChanged}
+            @keydown=${this.currencyValidator.keydown}
+          />
+        </div>
+        <div class="error ${this.error ? '' : 'hidden'}">${this.error}</div>
+      </div>
+
+      ${this.yesButton}
+    `;
+    }
+    get yesButton() {
+        switch (this.yesButtonMode) {
+            case UpsellModalCTAMode.YesButton:
+                return html `
+          <button
+            class="cta-button"
+            tabindex="0"
+            id="yes-button"
+            @click=${this.yesSelected}
+            .disabled=${this.error !== undefined}
+          >
+            ${msg("YES, I'll donate monthly")}
+          </button>
+        `;
+            case UpsellModalCTAMode.PayPalUpsellSlot:
+                return html `
+          <div class="paypal-upsell-slot-container">
+            <div
+              class="paypal-upsell-slot-blocker ${this.error ? '' : 'hidden'}"
+            ></div>
+            <button class="cta-button" id="paypal-cover-button">
+              ${msg("YES, I'll donate monthly")}
+            </button>
+            <slot class="paypal-upsell-slot"></slot>
+          </div>
+        `;
+            default:
+                return nothing;
+        }
+    }
+    amountChanged(e) {
+        const target = e.target;
+        const amount = target.value;
+        if (amount.length === 0) {
+            return;
+        }
+        this.handleCustomAmountInput(amount);
+    }
+    handleCustomAmountInput(value) {
+        const amount = parseFloat(value);
+        if (isNaN(amount)) {
+            this.error = html `${msg('Please enter a valid amount.')}`;
+        }
+        else {
+            this.processAmount(amount);
+        }
+    }
+    processAmount(amount) {
+        if (amount >= 10000) {
+            this.error = msg(html `
+        To make a donation of $10,000 or more, please contact our philanthropy
+        department at
+        <a href="mailto:donations@archive.org">donations@archive.org</a>
+      `);
+            return;
+        }
+        if (amount < 1) {
+            if (this.amountInput && this.amountInput.value.length > 0) {
+                this.error = html `${msg('The minimum donation amount is $1.')}`;
+            }
+            return;
+        }
+        this.error = undefined;
+        this.amount = amount;
+        const event = new CustomEvent('amountChanged', {
+            detail: { amount: this.amount },
+        });
+        this.dispatchEvent(event);
+    }
+    yesSelected() {
+        const event = new CustomEvent('yesSelected', {
+            detail: { amount: this.amount },
+        });
+        this.dispatchEvent(event);
+    }
+    noThanksSelected() {
+        this.dispatchEvent(new Event('noThanksSelected'));
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        :host {
+          --donation-upsell-base-font-size--: var(
+            --ia-donation-form-base-font-size,
+            10px
+          );
+          --donation-upsell-cta-color--: var(
+            --ia-donation-upsell-cta-button-color,
+            var(--navy-blue)
+          );
+          --donation-upsell-cta-disabled-color--: var(
+            --ia-donation-upsell-cta-button-disabled-color,
+            rgba(109, 148, 201, 0.5)
+          );
+          /* Shifts the amount field left a little so the dollar sign and field read as centred */
+          --donation-upsell-amount-input-offset--: var(
+            --ia-donation-upsell-amount-input-offset,
+            calc(var(--donation-upsell-base-font-size--) * -1)
+          );
+          --donation-upsell-error-color--: var(--color-danger);
+        }
+
+        .monthly-amount {
+          background-color: var(--true-white);
+          padding: var(--padding-sm) 0.625rem;
+          border-radius: 5px;
+          text-align: center;
+          margin-bottom: var(--padding-sm);
+          margin-top: 0;
+        }
+
+        .monthly-amount h1 {
+          font-size: calc(var(--donation-upsell-base-font-size--) * 1.8);
+          font-weight: bold;
+          text-align: center;
+          line-height: 1.2em;
+          margin: 0;
+          padding: var(--padding-sm) 0 0 0;
+        }
+
+        .hidden {
+          display: none;
+        }
+
+        h3 {
+          text-align: center;
+          font-size: calc(var(--donation-upsell-base-font-size--) * 1.8);
+          margin: 0 var(--donation-upsell-base-font-size--) var(--padding-sm)
+            var(--donation-upsell-base-font-size--);
+        }
+
+        .appeal {
+          text-align: center;
+          font-size: calc(var(--donation-upsell-base-font-size--) * 1.6);
+          margin: var(--padding-sm) var(--donation-upsell-base-font-size--);
+        }
+
+        .amount-input {
+          transform: translate(var(--donation-upsell-amount-input-offset--), 0);
+        }
+
+        .amount-input .dollar-symbol {
+          font-size: calc(var(--donation-upsell-base-font-size--) * 1.8);
+          font-weight: bold;
+        }
+
+        .amount-input input {
+          width: 100px;
+          text-align: center;
+          border: none;
+          border-bottom: 1px solid gray;
+          font-weight: bold;
+          font-size: calc(var(--donation-upsell-base-font-size--) * 3.4);
+        }
+
+        .cta-button {
+          font-size: calc(var(--donation-upsell-base-font-size--) * 2);
+          display: block;
+          width: 100%;
+          margin-top: var(--padding-sm);
+          padding: var(--donation-upsell-base-font-size--)
+            calc(var(--donation-upsell-base-font-size--) * 2);
+          background-color: var(--donation-upsell-cta-color--);
+          color: var(--true-white);
+          border-radius: 5px;
+          border: 0;
+          font-weight: bold;
+          line-height: normal;
+          outline: none;
+          cursor: pointer;
+        }
+
+        .cta-button:disabled {
+          background-color: var(--donation-upsell-cta-disabled-color--);
+          cursor: not-allowed;
+        }
+
+        .paypal-upsell-slot {
+          text-align: center;
+        }
+
+        .paypal-upsell-slot-blocker {
+          position: absolute;
+          width: 100%;
+          height: calc(var(--donation-upsell-base-font-size--) * 4.5);
+          bottom: 0;
+          z-index: 250;
+          cursor: not-allowed;
+          background-color: rgba(255, 255, 255, 0.5);
+        }
+
+        .paypal-upsell-slot-blocker.hidden {
+          display: none;
+        }
+
+        #paypal-cover-button {
+          position: absolute;
+          width: 100%;
+          bottom: 0;
+        }
+
+        .paypal-upsell-slot-container {
+          position: relative;
+        }
+
+        .error {
+          font-size: calc(var(--donation-upsell-base-font-size--) * 1.4);
+          margin: var(--padding-sm) 0;
+          color: var(--donation-upsell-error-color--);
+        }
+
+        .or_separator {
+          position: relative;
+          margin: 0 calc(var(--donation-upsell-base-font-size--) * 2);
+          font-size: calc(var(--donation-upsell-base-font-size--) * 2.6);
+          font-weight: bold;
+          text-transform: uppercase;
+          text-align: center;
+        }
+
+        .or_separator:before {
+          position: absolute;
+          top: calc(50% - 1px);
+          right: 0;
+          left: 0;
+          height: 2px;
+          content: '';
+          background: var(--mid-gray);
+        }
+
+        .or_separator span {
+          display: inline-block;
+          position: relative;
+          padding: 0 var(--donation-upsell-base-font-size--);
+          background: #f5f5f7;
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: String })
+], IADonationUpsellModalContent.prototype, "yesButtonMode", void 0);
+__decorate([
+    property({ type: Number })
+], IADonationUpsellModalContent.prototype, "amount", void 0);
+__decorate([
+    property({ type: Object })
+], IADonationUpsellModalContent.prototype, "error", void 0);
+__decorate([
+    query('#amount-input')
+], IADonationUpsellModalContent.prototype, "amountInput", void 0);
+IADonationUpsellModalContent = __decorate([
+    customElement('ia-donation-upsell-modal-content')
+], IADonationUpsellModalContent);
+export { IADonationUpsellModalContent };
+//# sourceMappingURL=ia-donation-upsell-modal-content.js.map

package/dist/src/elements/ia-donation-form/modals/ia-donation-upsell-modal-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-upsell-modal-content.js","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/modals/ia-donation-upsell-modal-content.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  nothing,\n  type CSSResultGroup,\n  type TemplateResult,\n} from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { msg } from '@lit/localize';\n\nimport themeStyles from '@src/themes/theme-styles';\nimport { CurrencyValidator } from '../currency-validator';\n\n/** How the \"yes\" side of the upsell is offered: our own button, or a slot for the PayPal button. */\nexport const UpsellModalCTAMode = {\n  YesButton: 'YesButton',\n  PayPalUpsellSlot: 'PayPalUpsellSlot',\n} as const;\n\nexport type UpsellModalCTAMode =\n  (typeof UpsellModalCTAMode)[keyof typeof UpsellModalCTAMode];\n\n/**\n * The content of the upsell modal shown after a one-time donation: a thank\n * you, a monthly amount field, and a yes button (or the PayPal button, when\n * the donation came through PayPal).\n */\n@customElement('ia-donation-upsell-modal-content')\nexport class IADonationUpsellModalContent extends LitElement {\n  @property({ type: String }) yesButtonMode: UpsellModalCTAMode =\n    UpsellModalCTAMode.YesButton;\n\n  @property({ type: Number }) amount = 5;\n\n  @property({ type: Object }) error?: TemplateResult;\n\n  @query('#amount-input') amountInput!: HTMLInputElement;\n\n  private currencyValidator: CurrencyValidator = new CurrencyValidator();\n\n  render(): TemplateResult {\n    return html`\n      <h3>${msg('Thank you for donating!')}</h3>\n      <button @click=${this.noThanksSelected} class=\"cta-button\" id=\"no-button\">\n        ${msg('Continue')}\n      </button>\n      <p class=\"or_separator\"><span>${msg('or')}</span></p>\n      <h3>${msg('Join our Monthly Giving Circle')}</h3>\n      <p class=\"appeal\">\n        ${msg('Monthly support helps us reliably plan for the future.')}\n      </p>\n      <div class=\"monthly-amount\">\n        <h1>${msg('Enter your monthly amount')}</h1>\n        <div class=\"amount-input\">\n          <span class=\"dollar-symbol\">$</span>\n          <input\n            id=\"amount-input\"\n            type=\"text\"\n            tabindex=\"0\"\n            aria-label=${msg('Monthly amount in dollars')}\n            value=${this.amount}\n            @input=${this.amountChanged}\n            @keydown=${this.currencyValidator.keydown}\n          />\n        </div>\n        <div class=\"error ${this.error ? '' : 'hidden'}\">${this.error}</div>\n      </div>\n\n      ${this.yesButton}\n    `;\n  }\n\n  private get yesButton(): TemplateResult | typeof nothing {\n    switch (this.yesButtonMode) {\n      case UpsellModalCTAMode.YesButton:\n        return html`\n          <button\n            class=\"cta-button\"\n            tabindex=\"0\"\n            id=\"yes-button\"\n            @click=${this.yesSelected}\n            .disabled=${this.error !== undefined}\n          >\n            ${msg(\"YES, I'll donate monthly\")}\n          </button>\n        `;\n      case UpsellModalCTAMode.PayPalUpsellSlot:\n        return html`\n          <div class=\"paypal-upsell-slot-container\">\n            <div\n              class=\"paypal-upsell-slot-blocker ${this.error ? '' : 'hidden'}\"\n            ></div>\n            <button class=\"cta-button\" id=\"paypal-cover-button\">\n              ${msg(\"YES, I'll donate monthly\")}\n            </button>\n            <slot class=\"paypal-upsell-slot\"></slot>\n          </div>\n        `;\n      default:\n        return nothing;\n    }\n  }\n\n  private amountChanged(e: Event): void {\n    const target = e.target as HTMLInputElement;\n    const amount = target.value;\n    if (amount.length === 0) {\n      return;\n    }\n    this.handleCustomAmountInput(amount);\n  }\n\n  private handleCustomAmountInput(value: string): void {\n    const amount = parseFloat(value);\n    if (isNaN(amount)) {\n      this.error = html`${msg('Please enter a valid amount.')}`;\n    } else {\n      this.processAmount(amount);\n    }\n  }\n\n  private processAmount(amount: number): void {\n    if (amount >= 10000) {\n      this.error = msg(html`\n        To make a donation of $10,000 or more, please contact our philanthropy\n        department at\n        <a href=\"mailto:donations@archive.org\">donations@archive.org</a>\n      `);\n      return;\n    }\n\n    if (amount < 1) {\n      if (this.amountInput && this.amountInput.value.length > 0) {\n        this.error = html`${msg('The minimum donation amount is $1.')}`;\n      }\n      return;\n    }\n\n    this.error = undefined;\n\n    this.amount = amount;\n\n    const event = new CustomEvent('amountChanged', {\n      detail: { amount: this.amount },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private yesSelected(): void {\n    const event = new CustomEvent('yesSelected', {\n      detail: { amount: this.amount },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private noThanksSelected(): void {\n    this.dispatchEvent(new Event('noThanksSelected'));\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --donation-upsell-base-font-size--: var(\n            --ia-donation-form-base-font-size,\n            10px\n          );\n          --donation-upsell-cta-color--: var(\n            --ia-donation-upsell-cta-button-color,\n            var(--navy-blue)\n          );\n          --donation-upsell-cta-disabled-color--: var(\n            --ia-donation-upsell-cta-button-disabled-color,\n            rgba(109, 148, 201, 0.5)\n          );\n          /* Shifts the amount field left a little so the dollar sign and field read as centred */\n          --donation-upsell-amount-input-offset--: var(\n            --ia-donation-upsell-amount-input-offset,\n            calc(var(--donation-upsell-base-font-size--) * -1)\n          );\n          --donation-upsell-error-color--: var(--color-danger);\n        }\n\n        .monthly-amount {\n          background-color: var(--true-white);\n          padding: var(--padding-sm) 0.625rem;\n          border-radius: 5px;\n          text-align: center;\n          margin-bottom: var(--padding-sm);\n          margin-top: 0;\n        }\n\n        .monthly-amount h1 {\n          font-size: calc(var(--donation-upsell-base-font-size--) * 1.8);\n          font-weight: bold;\n          text-align: center;\n          line-height: 1.2em;\n          margin: 0;\n          padding: var(--padding-sm) 0 0 0;\n        }\n\n        .hidden {\n          display: none;\n        }\n\n        h3 {\n          text-align: center;\n          font-size: calc(var(--donation-upsell-base-font-size--) * 1.8);\n          margin: 0 var(--donation-upsell-base-font-size--) var(--padding-sm)\n            var(--donation-upsell-base-font-size--);\n        }\n\n        .appeal {\n          text-align: center;\n          font-size: calc(var(--donation-upsell-base-font-size--) * 1.6);\n          margin: var(--padding-sm) var(--donation-upsell-base-font-size--);\n        }\n\n        .amount-input {\n          transform: translate(var(--donation-upsell-amount-input-offset--), 0);\n        }\n\n        .amount-input .dollar-symbol {\n          font-size: calc(var(--donation-upsell-base-font-size--) * 1.8);\n          font-weight: bold;\n        }\n\n        .amount-input input {\n          width: 100px;\n          text-align: center;\n          border: none;\n          border-bottom: 1px solid gray;\n          font-weight: bold;\n          font-size: calc(var(--donation-upsell-base-font-size--) * 3.4);\n        }\n\n        .cta-button {\n          font-size: calc(var(--donation-upsell-base-font-size--) * 2);\n          display: block;\n          width: 100%;\n          margin-top: var(--padding-sm);\n          padding: var(--donation-upsell-base-font-size--)\n            calc(var(--donation-upsell-base-font-size--) * 2);\n          background-color: var(--donation-upsell-cta-color--);\n          color: var(--true-white);\n          border-radius: 5px;\n          border: 0;\n          font-weight: bold;\n          line-height: normal;\n          outline: none;\n          cursor: pointer;\n        }\n\n        .cta-button:disabled {\n          background-color: var(--donation-upsell-cta-disabled-color--);\n          cursor: not-allowed;\n        }\n\n        .paypal-upsell-slot {\n          text-align: center;\n        }\n\n        .paypal-upsell-slot-blocker {\n          position: absolute;\n          width: 100%;\n          height: calc(var(--donation-upsell-base-font-size--) * 4.5);\n          bottom: 0;\n          z-index: 250;\n          cursor: not-allowed;\n          background-color: rgba(255, 255, 255, 0.5);\n        }\n\n        .paypal-upsell-slot-blocker.hidden {\n          display: none;\n        }\n\n        #paypal-cover-button {\n          position: absolute;\n          width: 100%;\n          bottom: 0;\n        }\n\n        .paypal-upsell-slot-container {\n          position: relative;\n        }\n\n        .error {\n          font-size: calc(var(--donation-upsell-base-font-size--) * 1.4);\n          margin: var(--padding-sm) 0;\n          color: var(--donation-upsell-error-color--);\n        }\n\n        .or_separator {\n          position: relative;\n          margin: 0 calc(var(--donation-upsell-base-font-size--) * 2);\n          font-size: calc(var(--donation-upsell-base-font-size--) * 2.6);\n          font-weight: bold;\n          text-transform: uppercase;\n          text-align: center;\n        }\n\n        .or_separator:before {\n          position: absolute;\n          top: calc(50% - 1px);\n          right: 0;\n          left: 0;\n          height: 2px;\n          content: '';\n          background: var(--mid-gray);\n        }\n\n        .or_separator span {\n          display: inline-block;\n          position: relative;\n          padding: 0 var(--donation-upsell-base-font-size--);\n          background: #f5f5f7;\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/elements/ia-donation-form/recaptcha-manager.d.ts

@@ -0,0 +1,36 @@
+export interface RecaptchaManagerInterface {
+    execute(): Promise<string>;
+    setup(container: HTMLElement, tabIndex: number, theme: ReCaptchaV2.Theme, type: ReCaptchaV2.Type): void;
+}
+/**
+ * Wraps an invisible reCAPTCHA so it can be run like a promise.
+ *
+ * `execute()` kicks off the challenge, but the result arrives through the
+ * response and expiration handlers bound during `setup()`. So `execute()`
+ * stashes resolve and reject callbacks and the handlers call them.
+ *
+ *     try {
+ *       const token = await recaptchaManager.execute();
+ *     } catch {
+ *       // 'expired' or 'error'
+ *     }
+ */
+export declare class RecaptchaManager implements RecaptchaManagerInterface {
+    private grecaptchaLibrary;
+    private siteKey;
+    constructor(options: {
+        grecaptchaLibrary: ReCaptchaV2.ReCaptcha;
+        siteKey: string;
+    });
+    private executionSuccessBlock?;
+    private executionExpiredBlock?;
+    private executionErrorBlock?;
+    private isExecuting;
+    execute(): Promise<string>;
+    private finishExecution;
+    setup(container: HTMLElement, tabIndex: number, theme: ReCaptchaV2.Theme, type: ReCaptchaV2.Type): void;
+    private responseHandler;
+    private expiredHandler;
+    private errorHandler;
+}
+//# sourceMappingURL=recaptcha-manager.d.ts.map

package/dist/src/elements/ia-donation-form/recaptcha-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"recaptcha-manager.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-donation-form/recaptcha-manager.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,yBAAyB;IACxC,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC;IAC3B,KAAK,CACH,SAAS,EAAE,WAAW,EACtB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,WAAW,CAAC,KAAK,EACxB,IAAI,EAAE,WAAW,CAAC,IAAI,GACrB,IAAI,CAAC;CACT;AAED;;;;;;;;;;;;GAYG;AACH,qBAAa,gBAAiB,YAAW,yBAAyB;IAChE,OAAO,CAAC,iBAAiB,CAAwB;IAEjD,OAAO,CAAC,OAAO,CAAS;gBAEZ,OAAO,EAAE;QACnB,iBAAiB,EAAE,WAAW,CAAC,SAAS,CAAC;QACzC,OAAO,EAAE,MAAM,CAAC;KACjB;IAKD,OAAO,CAAC,qBAAqB,CAAC,CAA0B;IAExD,OAAO,CAAC,qBAAqB,CAAC,CAAa;IAE3C,OAAO,CAAC,mBAAmB,CAAC,CAAa;IAEzC,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC;IAyB1B,OAAO,CAAC,eAAe;IAKvB,KAAK,CACH,SAAS,EAAE,WAAW,EACtB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,WAAW,CAAC,KAAK,EACxB,IAAI,EAAE,WAAW,CAAC,IAAI,GACrB,IAAI;IAaP,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,YAAY;CAMrB"}

package/dist/src/elements/ia-donation-form/recaptcha-manager.js

@@ -0,0 +1,76 @@
+/**
+ * Wraps an invisible reCAPTCHA so it can be run like a promise.
+ *
+ * `execute()` kicks off the challenge, but the result arrives through the
+ * response and expiration handlers bound during `setup()`. So `execute()`
+ * stashes resolve and reject callbacks and the handlers call them.
+ *
+ *     try {
+ *       const token = await recaptchaManager.execute();
+ *     } catch {
+ *       // 'expired' or 'error'
+ *     }
+ */
+export class RecaptchaManager {
+    constructor(options) {
+        this.isExecuting = false;
+        this.grecaptchaLibrary = options.grecaptchaLibrary;
+        this.siteKey = options.siteKey;
+    }
+    execute() {
+        if (this.isExecuting) {
+            this.finishExecution();
+        }
+        this.isExecuting = true;
+        return new Promise((resolve, reject) => {
+            this.executionSuccessBlock = (token) => {
+                this.finishExecution();
+                resolve(token);
+            };
+            this.executionExpiredBlock = () => {
+                this.finishExecution();
+                reject('expired');
+            };
+            this.executionErrorBlock = () => {
+                this.finishExecution();
+                reject('error');
+            };
+            this.grecaptchaLibrary.execute();
+        });
+    }
+    finishExecution() {
+        this.isExecuting = false;
+        this.grecaptchaLibrary.reset();
+    }
+    setup(container, tabIndex, theme, type) {
+        this.grecaptchaLibrary.render(container, {
+            callback: this.responseHandler.bind(this),
+            'expired-callback': this.expiredHandler.bind(this),
+            'error-callback': this.errorHandler.bind(this),
+            sitekey: this.siteKey,
+            tabindex: tabIndex,
+            theme,
+            type,
+            size: 'invisible',
+        });
+    }
+    responseHandler(response) {
+        if (this.executionSuccessBlock) {
+            this.executionSuccessBlock(response);
+            this.executionSuccessBlock = undefined;
+        }
+    }
+    expiredHandler() {
+        if (this.executionExpiredBlock) {
+            this.executionExpiredBlock();
+            this.executionExpiredBlock = undefined;
+        }
+    }
+    errorHandler() {
+        if (this.executionErrorBlock) {
+            this.executionErrorBlock();
+            this.executionErrorBlock = undefined;
+        }
+    }
+}
+//# sourceMappingURL=recaptcha-manager.js.map

package/dist/src/elements/ia-donation-form/recaptcha-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recaptcha-manager.js","sourceRoot":"","sources":["../../../../src/elements/ia-donation-form/recaptcha-manager.ts"],"names":[],"mappings":"AAUA;;;;;;;;;;;;GAYG;AACH,MAAM,OAAO,gBAAgB;IAK3B,YAAY,OAGX;QAWO,gBAAW,GAAG,KAAK,CAAC;QAV1B,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,iBAAiB,CAAC;QACnD,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;IACjC,CAAC;IAUD,OAAO;QACL,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;QACD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;YACrC,IAAI,CAAC,qBAAqB,GAAG,CAAC,KAAa,EAAQ,EAAE;gBACnD,IAAI,CAAC,eAAe,EAAE,CAAC;gBACvB,OAAO,CAAC,KAAK,CAAC,CAAC;YACjB,CAAC,CAAC;YAEF,IAAI,CAAC,qBAAqB,GAAG,GAAS,EAAE;gBACtC,IAAI,CAAC,eAAe,EAAE,CAAC;gBACvB,MAAM,CAAC,SAAS,CAAC,CAAC;YACpB,CAAC,CAAC;YAEF,IAAI,CAAC,mBAAmB,GAAG,GAAS,EAAE;gBACpC,IAAI,CAAC,eAAe,EAAE,CAAC;gBACvB,MAAM,CAAC,OAAO,CAAC,CAAC;YAClB,CAAC,CAAC;YAEF,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,CAAC;QACnC,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;IACjC,CAAC;IAED,KAAK,CACH,SAAsB,EACtB,QAAgB,EAChB,KAAwB,EACxB,IAAsB;QAEtB,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,SAAS,EAAE;YACvC,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;YACzC,kBAAkB,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;YAClD,gBAAgB,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;YAC9C,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,QAAQ,EAAE,QAAQ;YAClB,KAAK;YACL,IAAI;YACJ,IAAI,EAAE,WAAW;SAClB,CAAC,CAAC;IACL,CAAC;IAEO,eAAe,CAAC,QAAgB;QACtC,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC/B,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,CAAC;YACrC,IAAI,CAAC,qBAAqB,GAAG,SAAS,CAAC;QACzC,CAAC;IACH,CAAC;IAEO,cAAc;QACpB,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC/B,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC7B,IAAI,CAAC,qBAAqB,GAAG,SAAS,CAAC;QACzC,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC7B,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC3B,IAAI,CAAC,mBAAmB,GAAG,SAAS,CAAC;QACvC,CAAC;IACH,CAAC;CACF","sourcesContent":["export interface RecaptchaManagerInterface {\n  execute(): Promise<string>;\n  setup(\n    container: HTMLElement,\n    tabIndex: number,\n    theme: ReCaptchaV2.Theme,\n    type: ReCaptchaV2.Type,\n  ): void;\n}\n\n/**\n * Wraps an invisible reCAPTCHA so it can be run like a promise.\n *\n * `execute()` kicks off the challenge, but the result arrives through the\n * response and expiration handlers bound during `setup()`. So `execute()`\n * stashes resolve and reject callbacks and the handlers call them.\n *\n *     try {\n *       const token = await recaptchaManager.execute();\n *     } catch {\n *       // 'expired' or 'error'\n *     }\n */\nexport class RecaptchaManager implements RecaptchaManagerInterface {\n  private grecaptchaLibrary: ReCaptchaV2.ReCaptcha;\n\n  private siteKey: string;\n\n  constructor(options: {\n    grecaptchaLibrary: ReCaptchaV2.ReCaptcha;\n    siteKey: string;\n  }) {\n    this.grecaptchaLibrary = options.grecaptchaLibrary;\n    this.siteKey = options.siteKey;\n  }\n\n  private executionSuccessBlock?: (token: string) => void;\n\n  private executionExpiredBlock?: () => void;\n\n  private executionErrorBlock?: () => void;\n\n  private isExecuting = false;\n\n  execute(): Promise<string> {\n    if (this.isExecuting) {\n      this.finishExecution();\n    }\n    this.isExecuting = true;\n    return new Promise((resolve, reject) => {\n      this.executionSuccessBlock = (token: string): void => {\n        this.finishExecution();\n        resolve(token);\n      };\n\n      this.executionExpiredBlock = (): void => {\n        this.finishExecution();\n        reject('expired');\n      };\n\n      this.executionErrorBlock = (): void => {\n        this.finishExecution();\n        reject('error');\n      };\n\n      this.grecaptchaLibrary.execute();\n    });\n  }\n\n  private finishExecution(): void {\n    this.isExecuting = false;\n    this.grecaptchaLibrary.reset();\n  }\n\n  setup(\n    container: HTMLElement,\n    tabIndex: number,\n    theme: ReCaptchaV2.Theme,\n    type: ReCaptchaV2.Type,\n  ): void {\n    this.grecaptchaLibrary.render(container, {\n      callback: this.responseHandler.bind(this),\n      'expired-callback': this.expiredHandler.bind(this),\n      'error-callback': this.errorHandler.bind(this),\n      sitekey: this.siteKey,\n      tabindex: tabIndex,\n      theme,\n      type,\n      size: 'invisible',\n    });\n  }\n\n  private responseHandler(response: string): void {\n    if (this.executionSuccessBlock) {\n      this.executionSuccessBlock(response);\n      this.executionSuccessBlock = undefined;\n    }\n  }\n\n  private expiredHandler(): void {\n    if (this.executionExpiredBlock) {\n      this.executionExpiredBlock();\n      this.executionExpiredBlock = undefined;\n    }\n  }\n\n  private errorHandler(): void {\n    if (this.executionErrorBlock) {\n      this.executionErrorBlock();\n      this.executionErrorBlock = undefined;\n    }\n  }\n}\n"]}

package/dist/src/elements/ia-image-viewer/image-viewer-gestures.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image-viewer-gestures.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/image-viewer-gestures.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAGtE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,mEAAmE;AACnE,MAAM,MAAM,sBAAsB,GAAG,sBAAsB,GAAG;IAC5D,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAE5B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAE9B,sEAAsE;IACtE,QAAQ,CAAC,SAAS,CAAC,EAAE,WAAW,CAAC;IAEjC,qCAAqC;IACrC,QAAQ,CAAC,UAAU,CAAC,EAAE,WAAW,CAAC;IAElC,0EAA0E;IAC1E,iBAAiB,IAAI,IAAI,CAAC;IAE1B,QAAQ,IAAI,IAAI,CAAC;IAEjB,YAAY,IAAI,IAAI,CAAC;IAErB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAExC,kEAAkE;IAClE,gBAAgB,IAAI,IAAI,CAAC;IAEzB,gBAAgB,IAAI,IAAI,CAAC;IAEzB,qEAAqE;IACrE,UAAU,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAC;CAC7C,CAAC;AA0BF;;;;;;;GAOG;AACH,qBAAa,mBAAoB,YAAW,kBAAkB;IAC5D,4EAA4E;IAC5E,QAAQ,UAAS;IAEjB,OAAO,CAAC,IAAI,CAAyB;IAErC;;;;;OAKG;IACH,OAAO,CAAC,WAAW,CAA4B;IAE/C,OAAO,CAAC,WAAW,CAAuB;IAE1C,OAAO,CAAC,WAAW,CAAuB;IAE1C,OAAO,CAAC,cAAc,CAAK;IAE3B,sEAAsE;IACtE,OAAO,CAAC,OAAO,CAAS;IAExB,+EAA+E;IAC/E,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,qBAAqB,CAAK;gBAEtB,IAAI,EAAE,sBAAsB;IAKxC,aAAa,IAAI,IAAI;IAOrB,WAAW,IAAI,IAAI;IAInB,gBAAgB,IAAI,IAAI;IAKxB;;;OAGG;IACH,eAAe,IAAI,OAAO;IAM1B,wEAAwE;IACxE,gBAAgB,IAAI,IAAI;IAMxB;;;;;OAKG;IACH,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,YAAY,CASlB;IAEF,OAAO,CAAC,WAAW,CAmBjB;IAEF,OAAO,CAAC,UAAU,CAmFhB;IAEF,kEAAkE;IAClE,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,OAAO,CAyBb;IAEF,OAAO,CAAC,SAAS,CASf;CACH"}
+{"version":3,"file":"image-viewer-gestures.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/image-viewer-gestures.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAGtE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,mEAAmE;AACnE,MAAM,MAAM,sBAAsB,GAAG,sBAAsB,GAAG;IAC5D,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAE5B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAE9B,sEAAsE;IACtE,QAAQ,CAAC,SAAS,CAAC,EAAE,WAAW,CAAC;IAEjC,qCAAqC;IACrC,QAAQ,CAAC,UAAU,CAAC,EAAE,WAAW,CAAC;IAElC,0EAA0E;IAC1E,iBAAiB,IAAI,IAAI,CAAC;IAE1B,QAAQ,IAAI,IAAI,CAAC;IAEjB,YAAY,IAAI,IAAI,CAAC;IAErB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAExC,kEAAkE;IAClE,gBAAgB,IAAI,IAAI,CAAC;IAEzB,gBAAgB,IAAI,IAAI,CAAC;IAEzB,qEAAqE;IACrE,UAAU,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAC;CAC7C,CAAC;AA0BF;;;;;;;GAOG;AACH,qBAAa,mBAAoB,YAAW,kBAAkB;IAC5D,4EAA4E;IAC5E,QAAQ,UAAS;IAEjB,OAAO,CAAC,IAAI,CAAyB;IAErC;;;;;OAKG;IACH,OAAO,CAAC,WAAW,CAA4B;IAE/C,OAAO,CAAC,WAAW,CAAuB;IAE1C,OAAO,CAAC,WAAW,CAAuB;IAE1C,OAAO,CAAC,cAAc,CAAK;IAE3B,sEAAsE;IACtE,OAAO,CAAC,OAAO,CAAS;IAExB,+EAA+E;IAC/E,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,qBAAqB,CAAK;gBAEtB,IAAI,EAAE,sBAAsB;IAKxC,aAAa,IAAI,IAAI;IAOrB,WAAW,IAAI,IAAI;IAInB,gBAAgB,IAAI,IAAI;IAKxB;;;OAGG;IACH,eAAe,IAAI,OAAO;IAM1B,wEAAwE;IACxE,gBAAgB,IAAI,IAAI;IAMxB;;;;;OAKG;IACH,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,YAAY,CASlB;IAEF,OAAO,CAAC,WAAW,CAmBjB;IAEF,OAAO,CAAC,UAAU,CAmFhB;IAEF,kEAAkE;IAClE,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,OAAO,CAyBb;IAEF,OAAO,CAAC,SAAS,CAOf;CACH"}

package/dist/src/elements/ia-image-viewer/image-viewer-gestures.js

@@ -172,10 +172,8 @@ export class ImageViewerGestures {
         this.onKeydown = (e) => {
             if (this.host.imageCount <= 1)
                 return;
-            // A listener on `document` sees a shadow-DOM event retargeted to its
-            // outermost host, so the focused field is the first entry in the path.
-            const target = (e.composedPath()[0] ?? e.target);
-            if (['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName))
+            const target = e.target;
+            if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')
                 return;
             if (target.isContentEditable)
                 return;