@internetarchive/modal-manager 2.0.4-alpha-webdev7960.0 → 2.0.4

package/dist/src/modal-template.js

@@ -19,52 +19,52 @@ let ModalTemplate = class ModalTemplate extends LitElement {
     }
     /** @inheritdoc */
     render() {
-        return html `
-      <div class="modal-wrapper">
-        <div class="modal-container">
-          <header style="background-color: ${this.config.headerColor}">
+        return html `
+      <div class="modal-wrapper">
+        <div class="modal-container">
+          <header style="background-color: ${this.config.headerColor}">
             ${this.config.showLeftNavButton
             ? this.leftNavButtonTemplate
-            : nothing}
-            ${this.config.showCloseButton ? this.closeButtonTemplate : ''}
+            : nothing}
+            ${this.config.showCloseButton ? this.closeButtonTemplate : ''}
             ${this.config.showHeaderLogo
             ? html `<div class="logo-icon">${IALogoIcon}</div>`
-            : nothing}
+            : nothing}
             ${this.config.title
             ? html `<h1 class="title">${this.config.title}</h1>`
-            : ''}
+            : ''}
             ${this.config.subtitle
             ? html `<h2 class="subtitle">${this.config.subtitle}</h2>`
-            : ''}
-          </header>
-          <section
-            class="modal-body"
-            style="background-color: ${this.config.bodyColor}"
-          >
-            <div class="content">
-              <div
+            : ''}
+          </header>
+          <section
+            class="modal-body"
+            style="background-color: ${this.config.bodyColor}"
+          >
+            <div class="content">
+              <div
                 class="processing-logo ${this.config.showProcessingIndicator
             ? ''
-            : 'hidden'}"
-              >
-                <ia-activity-indicator
-                  .mode=${this.config.processingImageMode}
-                ></ia-activity-indicator>
-              </div>
+            : 'hidden'}"
+              >
+                <ia-activity-indicator
+                  .mode=${this.config.processingImageMode}
+                ></ia-activity-indicator>
+              </div>
               ${this.config.headline
             ? html ` <h1 class="headline">${this.config.headline}</h1> `
-            : ''}
+            : ''}
               ${this.config.message
             ? html ` <p class="message">${this.config.message}</p> `
-            : ''}
-
-              <div class="slot-container">
-                <slot> </slot>
-              </div>
-            </div>
-          </section>
-        </div>
-      </div>
+            : ''}
+
+              <div class="slot-container">
+                <slot> </slot>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
     `;
     }
     /**
@@ -108,26 +108,26 @@ let ModalTemplate = class ModalTemplate extends LitElement {
      * @memberof ModalTemplate
      */
     get closeButtonTemplate() {
-        return html `
-      <button
-        type="button"
-        class="close-button"
-        @click=${this.handleCloseButton}
-        @keydown=${this.handleCloseButton}
-      >
-        <ia-icon-close></ia-icon-close>
-      </button>
+        return html `
+      <button
+        type="button"
+        class="close-button"
+        @click=${this.handleCloseButton}
+        @keydown=${this.handleCloseButton}
+      >
+        <ia-icon-close></ia-icon-close>
+      </button>
     `;
     }
     get leftNavButtonTemplate() {
         var _a;
-        return html `<button
-      type="button"
-      class="back-button"
-      @click=${this.handleLeftNavButtonPressed}
-      @keydown=${this.handleLeftNavButtonPressed}
-    >
-      ${arrowLeftIcon} ${(_a = this.config.leftNavButtonText) !== null && _a !== void 0 ? _a : ''}
+        return html `<button
+      type="button"
+      class="back-button"
+      @click=${this.handleLeftNavButtonPressed}
+      @keydown=${this.handleLeftNavButtonPressed}
+    >
+      ${arrowLeftIcon} ${(_a = this.config.leftNavButtonText) !== null && _a !== void 0 ? _a : ''}
     </button> `;
     }
     /** @inheritdoc */
@@ -151,178 +151,178 @@ let ModalTemplate = class ModalTemplate extends LitElement {
         const subtitleLineHeight = css `var(--modalSubtitleLineHeight, normal)`;
         const headlineLineHeight = css `var(--modalHeadlineLineHeight, normal)`;
         const messageLineHeight = css `var(--modalMessageLineHeight, normal)`;
-        return css `
-      .processing-logo {
-        margin: auto;
-        width: ${processingImageSize};
-        height: ${processingImageSize};
-      }
-
-      .processing-logo.hidden {
-        height: 1rem;
-      }
-
-      .processing-logo.hidden ia-activity-indicator {
-        display: none;
-      }
-
-      .modal-wrapper {
-        outline: none;
-      }
-
-      .modal-container {
-        border-radius: ${modalCornerRadius};
-        width: 100%;
-        margin-top: ${modalTopMarginCss};
-      }
-
-      header {
-        position: relative;
-        background-color: #36a483;
-        color: white;
-        border-radius: calc(${modalCornerRadius}) calc(${modalCornerRadius}) 0 0;
-        border: ${modalBorder};
-        border-bottom: 0;
-        text-align: center;
-        padding-bottom: ${modalHeaderBottomPaddingCss};
-      }
-
-      .title {
-        margin: 0;
-        padding: 0;
-        font-size: ${titleFontSize};
-        font-weight: bold;
-        line-height: ${titleLineHeight};
-      }
-
-      .subtitle {
-        margin: 0;
-        padding: 0;
-        font-weight: normal;
-        padding-top: 0;
-        font-size: ${subtitleFontSize};
-        line-height: ${subtitleLineHeight};
-      }
-
-      .modal-body {
-        background-color: #fbfbfd;
-        border-radius: 0 0 calc(${modalCornerRadius}) calc(${modalCornerRadius});
-        border: ${modalBorder};
-        border-top: 0;
-        padding: 0 1rem calc(${modalBottomPadding} - ${scrollOffset}) 1rem;
-        color: #333;
-        margin-bottom: 2.5rem;
-        min-height: 5rem;
-      }
-
-      .content {
-        overflow-y: auto;
-        max-height: calc(100vh - (16.5rem + ${modalBottomMarginCss}));
-        min-height: 5rem;
-        padding: 0 0 calc(${scrollOffset}) 0;
-      }
-
-      .headline {
-        font-size: ${headlineFontSize};
-        font-weight: bold;
-        text-align: center;
-        line-height: ${headlineLineHeight};
-        margin: 0;
-        padding: 0;
-      }
-
-      .message {
-        margin: 1rem 0 0 0;
-        text-align: center;
-        font-size: ${messageFontSize};
-        line-height: ${messageLineHeight};
-      }
-
-      .logo-icon {
-        border-radius: 100%;
-        border: 3px solid #fff;
-        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),
-          0 2px 2px 0 rgba(0, 0, 0, 0.08);
-        width: ${modalLogoSize};
-        height: ${modalLogoSize};
-        margin: -2.9rem auto 0.5rem auto;
-        background-color: black;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      .logo-icon svg {
-        width: calc(${modalLogoSize} * 0.65);
-        height: calc(${modalLogoSize} * 0.65);
-      }
-
-      .logo-icon svg .fill-color {
-        fill: white;
-      }
-
-      .logo-icon svg .stroke-color {
-        stroke: red;
-      }
-
-      .close-button {
-        position: absolute;
-        right: 1.2rem;
-        top: 1.2rem;
-        width: 2rem;
-        height: 2rem;
-        border-radius: 100%;
-        border: 0;
-        padding: 0;
-        cursor: pointer;
-        background-color: white;
-        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),
-          0 4px 4px 0 rgba(0, 0, 0, 0.08);
-      }
-
-      .back-button {
-        position: absolute;
-        left: 1.2rem;
-        top: 1.2rem;
-        height: 2rem;
-        background-color: transparent;
-        outline: none;
-        border: none;
-        padding: 0;
-        cursor: pointer;
-        color: white;
-        font-family: inherit;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 0.5rem;
-      }
-
-      .back-button svg {
-        height: 1.5rem;
-      }
-
-      .sr-only {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        border: 0;
-      }
-
-      slot::slotted(.sr-only) {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        border: 0;
-      }
+        return css `
+      .processing-logo {
+        margin: auto;
+        width: ${processingImageSize};
+        height: ${processingImageSize};
+      }
+
+      .processing-logo.hidden {
+        height: 1rem;
+      }
+
+      .processing-logo.hidden ia-activity-indicator {
+        display: none;
+      }
+
+      .modal-wrapper {
+        outline: none;
+      }
+
+      .modal-container {
+        border-radius: ${modalCornerRadius};
+        width: 100%;
+        margin-top: ${modalTopMarginCss};
+      }
+
+      header {
+        position: relative;
+        background-color: #36a483;
+        color: white;
+        border-radius: calc(${modalCornerRadius}) calc(${modalCornerRadius}) 0 0;
+        border: ${modalBorder};
+        border-bottom: 0;
+        text-align: center;
+        padding-bottom: ${modalHeaderBottomPaddingCss};
+      }
+
+      .title {
+        margin: 0;
+        padding: 0;
+        font-size: ${titleFontSize};
+        font-weight: bold;
+        line-height: ${titleLineHeight};
+      }
+
+      .subtitle {
+        margin: 0;
+        padding: 0;
+        font-weight: normal;
+        padding-top: 0;
+        font-size: ${subtitleFontSize};
+        line-height: ${subtitleLineHeight};
+      }
+
+      .modal-body {
+        background-color: #fbfbfd;
+        border-radius: 0 0 calc(${modalCornerRadius}) calc(${modalCornerRadius});
+        border: ${modalBorder};
+        border-top: 0;
+        padding: 0 1rem calc(${modalBottomPadding} - ${scrollOffset}) 1rem;
+        color: #333;
+        margin-bottom: 2.5rem;
+        min-height: 5rem;
+      }
+
+      .content {
+        overflow-y: auto;
+        max-height: calc(100vh - (16.5rem + ${modalBottomMarginCss}));
+        min-height: 5rem;
+        padding: 0 0 calc(${scrollOffset}) 0;
+      }
+
+      .headline {
+        font-size: ${headlineFontSize};
+        font-weight: bold;
+        text-align: center;
+        line-height: ${headlineLineHeight};
+        margin: 0;
+        padding: 0;
+      }
+
+      .message {
+        margin: 1rem 0 0 0;
+        text-align: center;
+        font-size: ${messageFontSize};
+        line-height: ${messageLineHeight};
+      }
+
+      .logo-icon {
+        border-radius: 100%;
+        border: 3px solid #fff;
+        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),
+          0 2px 2px 0 rgba(0, 0, 0, 0.08);
+        width: ${modalLogoSize};
+        height: ${modalLogoSize};
+        margin: -2.9rem auto 0.5rem auto;
+        background-color: black;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .logo-icon svg {
+        width: calc(${modalLogoSize} * 0.65);
+        height: calc(${modalLogoSize} * 0.65);
+      }
+
+      .logo-icon svg .fill-color {
+        fill: white;
+      }
+
+      .logo-icon svg .stroke-color {
+        stroke: red;
+      }
+
+      .close-button {
+        position: absolute;
+        right: 1.2rem;
+        top: 1.2rem;
+        width: 2rem;
+        height: 2rem;
+        border-radius: 100%;
+        border: 0;
+        padding: 0;
+        cursor: pointer;
+        background-color: white;
+        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),
+          0 4px 4px 0 rgba(0, 0, 0, 0.08);
+      }
+
+      .back-button {
+        position: absolute;
+        left: 1.2rem;
+        top: 1.2rem;
+        height: 2rem;
+        background-color: transparent;
+        outline: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        color: white;
+        font-family: inherit;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .back-button svg {
+        height: 1.5rem;
+      }
+
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+      }
+
+      slot::slotted(.sr-only) {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+      }
     `;
     }
 };

package/dist/src/modal-template.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-template.js","sourceRoot":"","sources":["../../src/modal-template.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, nothing } from 'lit';\r\nimport { property, customElement } from 'lit/decorators.js';\r\n\r\nimport '@internetarchive/ia-activity-indicator';\r\nimport '@internetarchive/icon-close';\r\n\r\nimport { ModalConfig } from './modal-config';\r\nimport IALogoIcon from './assets/ia-logo-icon';\r\nimport arrowLeftIcon from './assets/arrow-left-icon';\r\n\r\n@customElement('modal-template')\r\nexport class ModalTemplate extends LitElement {\r\n  /**\r\n   * The ModalConfig that displayed the template\r\n   *\r\n   * @type {ModalConfig}\r\n   * @memberof ModalTemplate\r\n   */\r\n  @property({ type: Object }) config: ModalConfig = new ModalConfig();\r\n\r\n  /** @inheritdoc */\r\n  render(): TemplateResult {\r\n    return html`\r\n      <div class=\"modal-wrapper\">\r\n        <div class=\"modal-container\">\r\n          <header style=\"background-color: ${this.config.headerColor}\">\r\n            ${this.config.showLeftNavButton\r\n              ? this.leftNavButtonTemplate\r\n              : nothing}\r\n            ${this.config.showCloseButton ? this.closeButtonTemplate : ''}\r\n            ${this.config.showHeaderLogo\r\n              ? html`<div class=\"logo-icon\">${IALogoIcon}</div>`\r\n              : nothing}\r\n            ${this.config.title\r\n              ? html`<h1 class=\"title\">${this.config.title}</h1>`\r\n              : ''}\r\n            ${this.config.subtitle\r\n              ? html`<h2 class=\"subtitle\">${this.config.subtitle}</h2>`\r\n              : ''}\r\n          </header>\r\n          <section\r\n            class=\"modal-body\"\r\n            style=\"background-color: ${this.config.bodyColor}\"\r\n          >\r\n            <div class=\"content\">\r\n              <div\r\n                class=\"processing-logo ${this.config.showProcessingIndicator\r\n                  ? ''\r\n                  : 'hidden'}\"\r\n              >\r\n                <ia-activity-indicator\r\n                  .mode=${this.config.processingImageMode}\r\n                ></ia-activity-indicator>\r\n              </div>\r\n              ${this.config.headline\r\n                ? html` <h1 class=\"headline\">${this.config.headline}</h1> `\r\n                : ''}\r\n              ${this.config.message\r\n                ? html` <p class=\"message\">${this.config.message}</p> `\r\n                : ''}\r\n\r\n              <div class=\"slot-container\">\r\n                <slot> </slot>\r\n              </div>\r\n            </div>\r\n          </section>\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Dispatch the `closeButtonPressed` event to the consumer\r\n   *\r\n   * @private\r\n   * @memberof ModalTemplate\r\n   */\r\n  private handleCloseButton(e: Event): void {\r\n    e.preventDefault();\r\n    if (\r\n      e.type === 'keydown' &&\r\n      (e as KeyboardEvent).key !== ' ' &&\r\n      (e as KeyboardEvent).key !== 'Enter'\r\n    ) {\r\n      return;\r\n    }\r\n    const event = new Event('closeButtonPressed');\r\n    this.dispatchEvent(event);\r\n  }\r\n\r\n  /**\r\n   * Dispatch the `leftNavButtonPressed` event to the consumer\r\n   *\r\n   * @private\r\n   * @memberof ModalTemplate\r\n   */\r\n  private handleLeftNavButtonPressed(e: Event): void {\r\n    e.preventDefault();\r\n    if (\r\n      e.type === 'keydown' &&\r\n      (e as KeyboardEvent).key !== ' ' &&\r\n      (e as KeyboardEvent).key !== 'Enter'\r\n    ) {\r\n      return;\r\n    }\r\n    const event = new Event('leftNavButtonPressed');\r\n    this.dispatchEvent(event);\r\n  }\r\n\r\n  /**\r\n   * The close button template\r\n   *\r\n   * @readonly\r\n   * @private\r\n   * @type {TemplateResult}\r\n   * @memberof ModalTemplate\r\n   */\r\n  private get closeButtonTemplate(): TemplateResult {\r\n    return html`\r\n      <button\r\n        type=\"button\"\r\n        class=\"close-button\"\r\n        @click=${this.handleCloseButton}\r\n        @keydown=${this.handleCloseButton}\r\n      >\r\n        <ia-icon-close></ia-icon-close>\r\n      </button>\r\n    `;\r\n  }\r\n\r\n  private get leftNavButtonTemplate(): TemplateResult {\r\n    return html`<button\r\n      type=\"button\"\r\n      class=\"back-button\"\r\n      @click=${this.handleLeftNavButtonPressed}\r\n      @keydown=${this.handleLeftNavButtonPressed}\r\n    >\r\n      ${arrowLeftIcon} ${this.config.leftNavButtonText ?? ''}\r\n    </button> `;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  static get styles(): CSSResult {\r\n    const modalLogoSize = css`var(--modalLogoSize, 6.5rem)`;\r\n\r\n    const processingImageSize = css`var(--processingImageSize, 7.5rem)`;\r\n\r\n    const modalCornerRadius = css`var(--modalCornerRadius, 1rem)`;\r\n    const modalBorder = css`var(--modalBorder, 2px solid black)`;\r\n    // if the content of the modal is too big to fit on screen, this sets the bottom margin\r\n    // it's not exact, but a close estimation\r\n    const modalBottomMarginCss = css`var(--modalBottomMargin, 2.5rem)`;\r\n    const modalTopMarginCss = css`var(--modalTopMargin, 5rem)`;\r\n    const modalHeaderBottomPaddingCss = css`var(--modalHeaderBottomPadding, 0.5em)`;\r\n\r\n    const modalBottomPadding = css`var(--modalBottomPadding, 2rem)`;\r\n    const scrollOffset = css`var(--modalScrollOffset, 5px)`;\r\n\r\n    const titleFontSize = css`var(--modalTitleFontSize, 1.8rem)`;\r\n    const subtitleFontSize = css`var(--modalSubtitleFontSize, 1.4rem)`;\r\n    const headlineFontSize = css`var(--modalHeadlineFontSize, 1.6rem)`;\r\n    const messageFontSize = css`var(--modalMessageFontSize, 1.4rem)`;\r\n\r\n    const titleLineHeight = css`var(--modalTitleLineHeight, normal)`;\r\n    const subtitleLineHeight = css`var(--modalSubtitleLineHeight, normal)`;\r\n    const headlineLineHeight = css`var(--modalHeadlineLineHeight, normal)`;\r\n    const messageLineHeight = css`var(--modalMessageLineHeight, normal)`;\r\n\r\n    return css`\r\n      .processing-logo {\r\n        margin: auto;\r\n        width: ${processingImageSize};\r\n        height: ${processingImageSize};\r\n      }\r\n\r\n      .processing-logo.hidden {\r\n        height: 1rem;\r\n      }\r\n\r\n      .processing-logo.hidden ia-activity-indicator {\r\n        display: none;\r\n      }\r\n\r\n      .modal-wrapper {\r\n        outline: none;\r\n      }\r\n\r\n      .modal-container {\r\n        border-radius: ${modalCornerRadius};\r\n        width: 100%;\r\n        margin-top: ${modalTopMarginCss};\r\n      }\r\n\r\n      header {\r\n        position: relative;\r\n        background-color: #36a483;\r\n        color: white;\r\n        border-radius: calc(${modalCornerRadius}) calc(${modalCornerRadius}) 0 0;\r\n        border: ${modalBorder};\r\n        border-bottom: 0;\r\n        text-align: center;\r\n        padding-bottom: ${modalHeaderBottomPaddingCss};\r\n      }\r\n\r\n      .title {\r\n        margin: 0;\r\n        padding: 0;\r\n        font-size: ${titleFontSize};\r\n        font-weight: bold;\r\n        line-height: ${titleLineHeight};\r\n      }\r\n\r\n      .subtitle {\r\n        margin: 0;\r\n        padding: 0;\r\n        font-weight: normal;\r\n        padding-top: 0;\r\n        font-size: ${subtitleFontSize};\r\n        line-height: ${subtitleLineHeight};\r\n      }\r\n\r\n      .modal-body {\r\n        background-color: #fbfbfd;\r\n        border-radius: 0 0 calc(${modalCornerRadius}) calc(${modalCornerRadius});\r\n        border: ${modalBorder};\r\n        border-top: 0;\r\n        padding: 0 1rem calc(${modalBottomPadding} - ${scrollOffset}) 1rem;\r\n        color: #333;\r\n        margin-bottom: 2.5rem;\r\n        min-height: 5rem;\r\n      }\r\n\r\n      .content {\r\n        overflow-y: auto;\r\n        max-height: calc(100vh - (16.5rem + ${modalBottomMarginCss}));\r\n        min-height: 5rem;\r\n        padding: 0 0 calc(${scrollOffset}) 0;\r\n      }\r\n\r\n      .headline {\r\n        font-size: ${headlineFontSize};\r\n        font-weight: bold;\r\n        text-align: center;\r\n        line-height: ${headlineLineHeight};\r\n        margin: 0;\r\n        padding: 0;\r\n      }\r\n\r\n      .message {\r\n        margin: 1rem 0 0 0;\r\n        text-align: center;\r\n        font-size: ${messageFontSize};\r\n        line-height: ${messageLineHeight};\r\n      }\r\n\r\n      .logo-icon {\r\n        border-radius: 100%;\r\n        border: 3px solid #fff;\r\n        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),\r\n          0 2px 2px 0 rgba(0, 0, 0, 0.08);\r\n        width: ${modalLogoSize};\r\n        height: ${modalLogoSize};\r\n        margin: -2.9rem auto 0.5rem auto;\r\n        background-color: black;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n      }\r\n\r\n      .logo-icon svg {\r\n        width: calc(${modalLogoSize} * 0.65);\r\n        height: calc(${modalLogoSize} * 0.65);\r\n      }\r\n\r\n      .logo-icon svg .fill-color {\r\n        fill: white;\r\n      }\r\n\r\n      .logo-icon svg .stroke-color {\r\n        stroke: red;\r\n      }\r\n\r\n      .close-button {\r\n        position: absolute;\r\n        right: 1.2rem;\r\n        top: 1.2rem;\r\n        width: 2rem;\r\n        height: 2rem;\r\n        border-radius: 100%;\r\n        border: 0;\r\n        padding: 0;\r\n        cursor: pointer;\r\n        background-color: white;\r\n        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),\r\n          0 4px 4px 0 rgba(0, 0, 0, 0.08);\r\n      }\r\n\r\n      .back-button {\r\n        position: absolute;\r\n        left: 1.2rem;\r\n        top: 1.2rem;\r\n        height: 2rem;\r\n        background-color: transparent;\r\n        outline: none;\r\n        border: none;\r\n        padding: 0;\r\n        cursor: pointer;\r\n        color: white;\r\n        font-family: inherit;\r\n        display: flex;\r\n        flex-direction: row;\r\n        align-items: center;\r\n        gap: 0.5rem;\r\n      }\r\n\r\n      .back-button svg {\r\n        height: 1.5rem;\r\n      }\r\n\r\n      .sr-only {\r\n        position: absolute;\r\n        width: 1px;\r\n        height: 1px;\r\n        padding: 0;\r\n        margin: -1px;\r\n        overflow: hidden;\r\n        clip: rect(0, 0, 0, 0);\r\n        border: 0;\r\n      }\r\n\r\n      slot::slotted(.sr-only) {\r\n        position: absolute;\r\n        width: 1px;\r\n        height: 1px;\r\n        padding: 0;\r\n        margin: -1px;\r\n        overflow: hidden;\r\n        clip: rect(0, 0, 0, 0);\r\n        border: 0;\r\n      }\r\n    `;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"modal-template.js","sourceRoot":"","sources":["../../src/modal-template.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\n\nimport '@internetarchive/ia-activity-indicator';\nimport '@internetarchive/icon-close';\n\nimport { ModalConfig } from './modal-config';\nimport IALogoIcon from './assets/ia-logo-icon';\nimport arrowLeftIcon from './assets/arrow-left-icon';\n\n@customElement('modal-template')\nexport class ModalTemplate extends LitElement {\n  /**\n   * The ModalConfig that displayed the template\n   *\n   * @type {ModalConfig}\n   * @memberof ModalTemplate\n   */\n  @property({ type: Object }) config: ModalConfig = new ModalConfig();\n\n  /** @inheritdoc */\n  render(): TemplateResult {\n    return html`\n      <div class=\"modal-wrapper\">\n        <div class=\"modal-container\">\n          <header style=\"background-color: ${this.config.headerColor}\">\n            ${this.config.showLeftNavButton\n              ? this.leftNavButtonTemplate\n              : nothing}\n            ${this.config.showCloseButton ? this.closeButtonTemplate : ''}\n            ${this.config.showHeaderLogo\n              ? html`<div class=\"logo-icon\">${IALogoIcon}</div>`\n              : nothing}\n            ${this.config.title\n              ? html`<h1 class=\"title\">${this.config.title}</h1>`\n              : ''}\n            ${this.config.subtitle\n              ? html`<h2 class=\"subtitle\">${this.config.subtitle}</h2>`\n              : ''}\n          </header>\n          <section\n            class=\"modal-body\"\n            style=\"background-color: ${this.config.bodyColor}\"\n          >\n            <div class=\"content\">\n              <div\n                class=\"processing-logo ${this.config.showProcessingIndicator\n                  ? ''\n                  : 'hidden'}\"\n              >\n                <ia-activity-indicator\n                  .mode=${this.config.processingImageMode}\n                ></ia-activity-indicator>\n              </div>\n              ${this.config.headline\n                ? html` <h1 class=\"headline\">${this.config.headline}</h1> `\n                : ''}\n              ${this.config.message\n                ? html` <p class=\"message\">${this.config.message}</p> `\n                : ''}\n\n              <div class=\"slot-container\">\n                <slot> </slot>\n              </div>\n            </div>\n          </section>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Dispatch the `closeButtonPressed` event to the consumer\n   *\n   * @private\n   * @memberof ModalTemplate\n   */\n  private handleCloseButton(e: Event): void {\n    e.preventDefault();\n    if (\n      e.type === 'keydown' &&\n      (e as KeyboardEvent).key !== ' ' &&\n      (e as KeyboardEvent).key !== 'Enter'\n    ) {\n      return;\n    }\n    const event = new Event('closeButtonPressed');\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * Dispatch the `leftNavButtonPressed` event to the consumer\n   *\n   * @private\n   * @memberof ModalTemplate\n   */\n  private handleLeftNavButtonPressed(e: Event): void {\n    e.preventDefault();\n    if (\n      e.type === 'keydown' &&\n      (e as KeyboardEvent).key !== ' ' &&\n      (e as KeyboardEvent).key !== 'Enter'\n    ) {\n      return;\n    }\n    const event = new Event('leftNavButtonPressed');\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * The close button template\n   *\n   * @readonly\n   * @private\n   * @type {TemplateResult}\n   * @memberof ModalTemplate\n   */\n  private get closeButtonTemplate(): TemplateResult {\n    return html`\n      <button\n        type=\"button\"\n        class=\"close-button\"\n        @click=${this.handleCloseButton}\n        @keydown=${this.handleCloseButton}\n      >\n        <ia-icon-close></ia-icon-close>\n      </button>\n    `;\n  }\n\n  private get leftNavButtonTemplate(): TemplateResult {\n    return html`<button\n      type=\"button\"\n      class=\"back-button\"\n      @click=${this.handleLeftNavButtonPressed}\n      @keydown=${this.handleLeftNavButtonPressed}\n    >\n      ${arrowLeftIcon} ${this.config.leftNavButtonText ?? ''}\n    </button> `;\n  }\n\n  /** @inheritdoc */\n  static get styles(): CSSResult {\n    const modalLogoSize = css`var(--modalLogoSize, 6.5rem)`;\n\n    const processingImageSize = css`var(--processingImageSize, 7.5rem)`;\n\n    const modalCornerRadius = css`var(--modalCornerRadius, 1rem)`;\n    const modalBorder = css`var(--modalBorder, 2px solid black)`;\n    // if the content of the modal is too big to fit on screen, this sets the bottom margin\n    // it's not exact, but a close estimation\n    const modalBottomMarginCss = css`var(--modalBottomMargin, 2.5rem)`;\n    const modalTopMarginCss = css`var(--modalTopMargin, 5rem)`;\n    const modalHeaderBottomPaddingCss = css`var(--modalHeaderBottomPadding, 0.5em)`;\n\n    const modalBottomPadding = css`var(--modalBottomPadding, 2rem)`;\n    const scrollOffset = css`var(--modalScrollOffset, 5px)`;\n\n    const titleFontSize = css`var(--modalTitleFontSize, 1.8rem)`;\n    const subtitleFontSize = css`var(--modalSubtitleFontSize, 1.4rem)`;\n    const headlineFontSize = css`var(--modalHeadlineFontSize, 1.6rem)`;\n    const messageFontSize = css`var(--modalMessageFontSize, 1.4rem)`;\n\n    const titleLineHeight = css`var(--modalTitleLineHeight, normal)`;\n    const subtitleLineHeight = css`var(--modalSubtitleLineHeight, normal)`;\n    const headlineLineHeight = css`var(--modalHeadlineLineHeight, normal)`;\n    const messageLineHeight = css`var(--modalMessageLineHeight, normal)`;\n\n    return css`\n      .processing-logo {\n        margin: auto;\n        width: ${processingImageSize};\n        height: ${processingImageSize};\n      }\n\n      .processing-logo.hidden {\n        height: 1rem;\n      }\n\n      .processing-logo.hidden ia-activity-indicator {\n        display: none;\n      }\n\n      .modal-wrapper {\n        outline: none;\n      }\n\n      .modal-container {\n        border-radius: ${modalCornerRadius};\n        width: 100%;\n        margin-top: ${modalTopMarginCss};\n      }\n\n      header {\n        position: relative;\n        background-color: #36a483;\n        color: white;\n        border-radius: calc(${modalCornerRadius}) calc(${modalCornerRadius}) 0 0;\n        border: ${modalBorder};\n        border-bottom: 0;\n        text-align: center;\n        padding-bottom: ${modalHeaderBottomPaddingCss};\n      }\n\n      .title {\n        margin: 0;\n        padding: 0;\n        font-size: ${titleFontSize};\n        font-weight: bold;\n        line-height: ${titleLineHeight};\n      }\n\n      .subtitle {\n        margin: 0;\n        padding: 0;\n        font-weight: normal;\n        padding-top: 0;\n        font-size: ${subtitleFontSize};\n        line-height: ${subtitleLineHeight};\n      }\n\n      .modal-body {\n        background-color: #fbfbfd;\n        border-radius: 0 0 calc(${modalCornerRadius}) calc(${modalCornerRadius});\n        border: ${modalBorder};\n        border-top: 0;\n        padding: 0 1rem calc(${modalBottomPadding} - ${scrollOffset}) 1rem;\n        color: #333;\n        margin-bottom: 2.5rem;\n        min-height: 5rem;\n      }\n\n      .content {\n        overflow-y: auto;\n        max-height: calc(100vh - (16.5rem + ${modalBottomMarginCss}));\n        min-height: 5rem;\n        padding: 0 0 calc(${scrollOffset}) 0;\n      }\n\n      .headline {\n        font-size: ${headlineFontSize};\n        font-weight: bold;\n        text-align: center;\n        line-height: ${headlineLineHeight};\n        margin: 0;\n        padding: 0;\n      }\n\n      .message {\n        margin: 1rem 0 0 0;\n        text-align: center;\n        font-size: ${messageFontSize};\n        line-height: ${messageLineHeight};\n      }\n\n      .logo-icon {\n        border-radius: 100%;\n        border: 3px solid #fff;\n        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),\n          0 2px 2px 0 rgba(0, 0, 0, 0.08);\n        width: ${modalLogoSize};\n        height: ${modalLogoSize};\n        margin: -2.9rem auto 0.5rem auto;\n        background-color: black;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n\n      .logo-icon svg {\n        width: calc(${modalLogoSize} * 0.65);\n        height: calc(${modalLogoSize} * 0.65);\n      }\n\n      .logo-icon svg .fill-color {\n        fill: white;\n      }\n\n      .logo-icon svg .stroke-color {\n        stroke: red;\n      }\n\n      .close-button {\n        position: absolute;\n        right: 1.2rem;\n        top: 1.2rem;\n        width: 2rem;\n        height: 2rem;\n        border-radius: 100%;\n        border: 0;\n        padding: 0;\n        cursor: pointer;\n        background-color: white;\n        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),\n          0 4px 4px 0 rgba(0, 0, 0, 0.08);\n      }\n\n      .back-button {\n        position: absolute;\n        left: 1.2rem;\n        top: 1.2rem;\n        height: 2rem;\n        background-color: transparent;\n        outline: none;\n        border: none;\n        padding: 0;\n        cursor: pointer;\n        color: white;\n        font-family: inherit;\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        gap: 0.5rem;\n      }\n\n      .back-button svg {\n        height: 1.5rem;\n      }\n\n      .sr-only {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        border: 0;\n      }\n\n      slot::slotted(.sr-only) {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        border: 0;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/shoelace/active-elements.js.map

@@ -1 +1 @@
-{"version":3,"file":"active-elements.js","sourceRoot":"","sources":["../../../src/shoelace/active-elements.ts"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B;;;;;;;;;;;;GAYG;AACH,MAAM,SAAS,CAAC,CAAC,cAAc,CAC7B,gBAAgC,QAAQ,CAAC,aAAa;IAEtD,IAAI,aAAa,KAAK,IAAI,IAAI,aAAa,KAAK,SAAS;QAAE,OAAO;IAElE,MAAM,aAAa,CAAC;IAEpB,IACE,YAAY,IAAI,aAAa;QAC7B,aAAa,CAAC,UAAU;QACxB,aAAa,CAAC,UAAU,CAAC,IAAI,KAAK,QAAQ,EAC1C;QACA,KAAK,CAAC,CAAC,cAAc,CAAC,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;KAC/D;AACH,CAAC;AAED,MAAM,UAAU,uBAAuB;IACrC,OAAO,CAAC,GAAG,cAAc,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC;AACrC,CAAC","sourcesContent":["/* istanbul ignore file */\r\n/**\r\n * Use a generator so we can iterate and possibly break early.\r\n * @example\r\n *   // to operate like a regular array. This kinda nullifies generator benefits, but worth knowing if you need the whole array.\r\n *   const allActiveElements = [...activeElements()]\r\n *\r\n *   // Early return\r\n *   for (const activeElement of activeElements()) {\r\n *     if (<cond>) {\r\n *       break; // Break the loop, dont need to iterate over the whole array or store an array in memory!\r\n *     }\r\n *   }\r\n */\r\nexport function* activeElements(\r\n  activeElement: Element | null = document.activeElement\r\n): Generator<Element> {\r\n  if (activeElement === null || activeElement === undefined) return;\r\n\r\n  yield activeElement;\r\n\r\n  if (\r\n    'shadowRoot' in activeElement &&\r\n    activeElement.shadowRoot &&\r\n    activeElement.shadowRoot.mode !== 'closed'\r\n  ) {\r\n    yield* activeElements(activeElement.shadowRoot.activeElement);\r\n  }\r\n}\r\n\r\nexport function getDeepestActiveElement() {\r\n  return [...activeElements()].pop();\r\n}\r\n"]}
+{"version":3,"file":"active-elements.js","sourceRoot":"","sources":["../../../src/shoelace/active-elements.ts"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B;;;;;;;;;;;;GAYG;AACH,MAAM,SAAS,CAAC,CAAC,cAAc,CAC7B,gBAAgC,QAAQ,CAAC,aAAa;IAEtD,IAAI,aAAa,KAAK,IAAI,IAAI,aAAa,KAAK,SAAS;QAAE,OAAO;IAElE,MAAM,aAAa,CAAC;IAEpB,IACE,YAAY,IAAI,aAAa;QAC7B,aAAa,CAAC,UAAU;QACxB,aAAa,CAAC,UAAU,CAAC,IAAI,KAAK,QAAQ,EAC1C;QACA,KAAK,CAAC,CAAC,cAAc,CAAC,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;KAC/D;AACH,CAAC;AAED,MAAM,UAAU,uBAAuB;IACrC,OAAO,CAAC,GAAG,cAAc,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC;AACrC,CAAC","sourcesContent":["/* istanbul ignore file */\n/**\n * Use a generator so we can iterate and possibly break early.\n * @example\n *   // to operate like a regular array. This kinda nullifies generator benefits, but worth knowing if you need the whole array.\n *   const allActiveElements = [...activeElements()]\n *\n *   // Early return\n *   for (const activeElement of activeElements()) {\n *     if (<cond>) {\n *       break; // Break the loop, dont need to iterate over the whole array or store an array in memory!\n *     }\n *   }\n */\nexport function* activeElements(\n  activeElement: Element | null = document.activeElement\n): Generator<Element> {\n  if (activeElement === null || activeElement === undefined) return;\n\n  yield activeElement;\n\n  if (\n    'shadowRoot' in activeElement &&\n    activeElement.shadowRoot &&\n    activeElement.shadowRoot.mode !== 'closed'\n  ) {\n    yield* activeElements(activeElement.shadowRoot.activeElement);\n  }\n}\n\nexport function getDeepestActiveElement() {\n  return [...activeElements()].pop();\n}\n"]}

package/dist/src/shoelace/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/shoelace/modal.ts"],"names":[],"mappings":"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","sourcesContent":["/* istanbul ignore file */\r\nimport { activeElements, getDeepestActiveElement } from './active-elements.js';\r\nimport { getTabbableElements } from './tabbable.js';\r\n\r\nlet activeModals: HTMLElement[] = [];\r\n\r\nexport default class Modal {\r\n  element: HTMLElement;\r\n  isExternalActivated: boolean = false;\r\n  tabDirection: 'forward' | 'backward' = 'forward';\r\n  currentFocus: HTMLElement | null = null;\r\n  previousFocus: HTMLElement | null = null;\r\n  elementsWithTabbableControls: string[];\r\n\r\n  constructor(element: HTMLElement) {\r\n    this.element = element;\r\n\r\n    this.elementsWithTabbableControls = ['iframe'];\r\n  }\r\n\r\n  /** Activates focus trapping. */\r\n  activate() {\r\n    activeModals.push(this.element);\r\n    document.addEventListener('focusin', this.handleFocusIn);\r\n    document.addEventListener('keydown', this.handleKeyDown);\r\n    document.addEventListener('keyup', this.handleKeyUp);\r\n  }\r\n\r\n  /** Deactivates focus trapping. */\r\n  deactivate() {\r\n    activeModals = activeModals.filter(modal => modal !== this.element);\r\n    this.currentFocus = null;\r\n    document.removeEventListener('focusin', this.handleFocusIn);\r\n    document.removeEventListener('keydown', this.handleKeyDown);\r\n    document.removeEventListener('keyup', this.handleKeyUp);\r\n  }\r\n\r\n  /** Determines if this modal element is currently active or not. */\r\n  isActive() {\r\n    // The \"active\" modal is always the most recent one shown\r\n    return activeModals[activeModals.length - 1] === this.element;\r\n  }\r\n\r\n  /** Activates external modal behavior and temporarily disables focus trapping. */\r\n  activateExternal() {\r\n    this.isExternalActivated = true;\r\n  }\r\n\r\n  /** Deactivates external modal behavior and re-enables focus trapping. */\r\n  deactivateExternal() {\r\n    this.isExternalActivated = false;\r\n  }\r\n\r\n  private checkFocus() {\r\n    if (this.isActive() && !this.isExternalActivated) {\r\n      const tabbableElements = getTabbableElements(this.element);\r\n      if (!this.element.matches(':focus-within')) {\r\n        const start = tabbableElements[0];\r\n        const end = tabbableElements[tabbableElements.length - 1];\r\n        const target = this.tabDirection === 'forward' ? start : end;\r\n\r\n        if (typeof target?.focus === 'function') {\r\n          this.currentFocus = target;\r\n          target.focus({ preventScroll: false });\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  private handleFocusIn = () => {\r\n    if (!this.isActive()) return;\r\n    this.checkFocus();\r\n  };\r\n\r\n  private possiblyHasTabbableChildren(element: HTMLElement) {\r\n    return (\r\n      this.elementsWithTabbableControls.includes(\r\n        element.tagName.toLowerCase()\r\n      ) || element.hasAttribute('controls')\r\n      // Should we add a data-attribute for people to set just in case they have an element where we don't know if it has possibly tabbable elements?\r\n    );\r\n  }\r\n\r\n  private handleKeyDown = (event: KeyboardEvent) => {\r\n    if (event.key !== 'Tab' || this.isExternalActivated) return;\r\n    if (!this.isActive()) return;\r\n\r\n    // Because sometimes focus can actually be taken over from outside sources,\r\n    // we don't want to rely on `this.currentFocus`. Instead we check the actual `activeElement` and\r\n    // recurse through shadowRoots.\r\n    const currentActiveElement = getDeepestActiveElement();\r\n    this.previousFocus = currentActiveElement as HTMLElement | null;\r\n\r\n    if (\r\n      this.previousFocus &&\r\n      this.possiblyHasTabbableChildren(this.previousFocus)\r\n    ) {\r\n      return;\r\n    }\r\n\r\n    if (event.shiftKey) {\r\n      this.tabDirection = 'backward';\r\n    } else {\r\n      this.tabDirection = 'forward';\r\n    }\r\n\r\n    const tabbableElements = getTabbableElements(this.element);\r\n\r\n    let currentFocusIndex = tabbableElements.findIndex(\r\n      el => el === currentActiveElement\r\n    );\r\n\r\n    this.previousFocus = this.currentFocus;\r\n\r\n    const addition = this.tabDirection === 'forward' ? 1 : -1;\r\n\r\n    // eslint-disable-next-line\r\n    while (true) {\r\n      if (currentFocusIndex + addition >= tabbableElements.length) {\r\n        currentFocusIndex = 0;\r\n      } else if (currentFocusIndex + addition < 0) {\r\n        currentFocusIndex = tabbableElements.length - 1;\r\n      } else {\r\n        currentFocusIndex += addition;\r\n      }\r\n\r\n      this.previousFocus = this.currentFocus;\r\n      const nextFocus =\r\n        /** @type {HTMLElement} */ tabbableElements[currentFocusIndex];\r\n\r\n      // This is a special case. We need to make sure we're not calling .focus() if we're already focused on an element\r\n      // that possibly has \"controls\"\r\n      if (this.tabDirection === 'backward') {\r\n        if (\r\n          this.previousFocus &&\r\n          this.possiblyHasTabbableChildren(this.previousFocus)\r\n        ) {\r\n          return;\r\n        }\r\n      }\r\n\r\n      if (nextFocus && this.possiblyHasTabbableChildren(nextFocus)) {\r\n        return;\r\n      }\r\n\r\n      event.preventDefault();\r\n      this.currentFocus = nextFocus;\r\n      this.currentFocus?.focus({ preventScroll: false });\r\n\r\n      // Check to make sure focus actually changed. It may not always be the next focus, we just don't want it to be the previousFocus.\r\n      const allActiveElements = [...activeElements()];\r\n      if (\r\n        allActiveElements.includes(this.currentFocus) ||\r\n        !allActiveElements.includes(this.previousFocus!)\r\n      ) {\r\n        break;\r\n      }\r\n    }\r\n\r\n    setTimeout(() => this.checkFocus());\r\n  };\r\n\r\n  private handleKeyUp = () => {\r\n    this.tabDirection = 'forward';\r\n  };\r\n}\r\n"]}
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/shoelace/modal.ts"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,OAAO,EAAE,cAAc,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAC/E,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEpD,IAAI,YAAY,GAAkB,EAAE,CAAC;AAErC,MAAM,CAAC,OAAO,OAAO,KAAK;IAQxB,YAAY,OAAoB;QANhC,wBAAmB,GAAY,KAAK,CAAC;QACrC,iBAAY,GAA2B,SAAS,CAAC;QACjD,iBAAY,GAAuB,IAAI,CAAC;QACxC,kBAAa,GAAuB,IAAI,CAAC;QA0DjC,kBAAa,GAAG,GAAG,EAAE;YAC3B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAAE,OAAO;YAC7B,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC,CAAC;QAWM,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;;YAC/C,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,IAAI,CAAC,mBAAmB;gBAAE,OAAO;YAC5D,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAAE,OAAO;YAE7B,2EAA2E;YAC3E,gGAAgG;YAChG,+BAA+B;YAC/B,MAAM,oBAAoB,GAAG,uBAAuB,EAAE,CAAC;YACvD,IAAI,CAAC,aAAa,GAAG,oBAA0C,CAAC;YAEhE,IACE,IAAI,CAAC,aAAa;gBAClB,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,aAAa,CAAC,EACpD;gBACA,OAAO;aACR;YAED,IAAI,KAAK,CAAC,QAAQ,EAAE;gBAClB,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;aAChC;iBAAM;gBACL,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;aAC/B;YAED,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAE3D,IAAI,iBAAiB,GAAG,gBAAgB,CAAC,SAAS,CAChD,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,oBAAoB,CAClC,CAAC;YAEF,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC;YAEvC,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAE1D,2BAA2B;YAC3B,OAAO,IAAI,EAAE;gBACX,IAAI,iBAAiB,GAAG,QAAQ,IAAI,gBAAgB,CAAC,MAAM,EAAE;oBAC3D,iBAAiB,GAAG,CAAC,CAAC;iBACvB;qBAAM,IAAI,iBAAiB,GAAG,QAAQ,GAAG,CAAC,EAAE;oBAC3C,iBAAiB,GAAG,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC;iBACjD;qBAAM;oBACL,iBAAiB,IAAI,QAAQ,CAAC;iBAC/B;gBAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC;gBACvC,MAAM,SAAS;gBACb,0BAA0B,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;gBAEjE,iHAAiH;gBACjH,+BAA+B;gBAC/B,IAAI,IAAI,CAAC,YAAY,KAAK,UAAU,EAAE;oBACpC,IACE,IAAI,CAAC,aAAa;wBAClB,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,aAAa,CAAC,EACpD;wBACA,OAAO;qBACR;iBACF;gBAED,IAAI,SAAS,IAAI,IAAI,CAAC,2BAA2B,CAAC,SAAS,CAAC,EAAE;oBAC5D,OAAO;iBACR;gBAED,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;gBAC9B,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,CAAC;gBAEnD,iIAAiI;gBACjI,MAAM,iBAAiB,GAAG,CAAC,GAAG,cAAc,EAAE,CAAC,CAAC;gBAChD,IACE,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC;oBAC7C,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAc,CAAC,EAChD;oBACA,MAAM;iBACP;aACF;YAED,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;QACtC,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;QAChC,CAAC,CAAC;QArJA,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QAEvB,IAAI,CAAC,4BAA4B,GAAG,CAAC,QAAQ,CAAC,CAAC;IACjD,CAAC;IAED,gCAAgC;IAChC,QAAQ;QACN,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAChC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACzD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACzD,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACvD,CAAC;IAED,kCAAkC;IAClC,UAAU;QACR,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC;QACpE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC5D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC5D,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAC1D,CAAC;IAED,mEAAmE;IACnE,QAAQ;QACN,yDAAyD;QACzD,OAAO,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC;IAChE,CAAC;IAED,iFAAiF;IACjF,gBAAgB;QACd,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;IAClC,CAAC;IAED,yEAAyE;IACzE,kBAAkB;QAChB,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;IACnC,CAAC;IAEO,UAAU;QAChB,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE;YAChD,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC3D,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE;gBAC1C,MAAM,KAAK,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC;gBAClC,MAAM,GAAG,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;gBAC1D,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;gBAE7D,IAAI,OAAO,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,CAAA,KAAK,UAAU,EAAE;oBACvC,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;oBAC3B,MAAM,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,CAAC;iBACxC;aACF;SACF;IACH,CAAC;IAOO,2BAA2B,CAAC,OAAoB;QACtD,OAAO,CACL,IAAI,CAAC,4BAA4B,CAAC,QAAQ,CACxC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAC9B,IAAI,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC;QACrC,+IAA+I;SAChJ,CAAC;IACJ,CAAC;CAoFF","sourcesContent":["/* istanbul ignore file */\nimport { activeElements, getDeepestActiveElement } from './active-elements.js';\nimport { getTabbableElements } from './tabbable.js';\n\nlet activeModals: HTMLElement[] = [];\n\nexport default class Modal {\n  element: HTMLElement;\n  isExternalActivated: boolean = false;\n  tabDirection: 'forward' | 'backward' = 'forward';\n  currentFocus: HTMLElement | null = null;\n  previousFocus: HTMLElement | null = null;\n  elementsWithTabbableControls: string[];\n\n  constructor(element: HTMLElement) {\n    this.element = element;\n\n    this.elementsWithTabbableControls = ['iframe'];\n  }\n\n  /** Activates focus trapping. */\n  activate() {\n    activeModals.push(this.element);\n    document.addEventListener('focusin', this.handleFocusIn);\n    document.addEventListener('keydown', this.handleKeyDown);\n    document.addEventListener('keyup', this.handleKeyUp);\n  }\n\n  /** Deactivates focus trapping. */\n  deactivate() {\n    activeModals = activeModals.filter(modal => modal !== this.element);\n    this.currentFocus = null;\n    document.removeEventListener('focusin', this.handleFocusIn);\n    document.removeEventListener('keydown', this.handleKeyDown);\n    document.removeEventListener('keyup', this.handleKeyUp);\n  }\n\n  /** Determines if this modal element is currently active or not. */\n  isActive() {\n    // The \"active\" modal is always the most recent one shown\n    return activeModals[activeModals.length - 1] === this.element;\n  }\n\n  /** Activates external modal behavior and temporarily disables focus trapping. */\n  activateExternal() {\n    this.isExternalActivated = true;\n  }\n\n  /** Deactivates external modal behavior and re-enables focus trapping. */\n  deactivateExternal() {\n    this.isExternalActivated = false;\n  }\n\n  private checkFocus() {\n    if (this.isActive() && !this.isExternalActivated) {\n      const tabbableElements = getTabbableElements(this.element);\n      if (!this.element.matches(':focus-within')) {\n        const start = tabbableElements[0];\n        const end = tabbableElements[tabbableElements.length - 1];\n        const target = this.tabDirection === 'forward' ? start : end;\n\n        if (typeof target?.focus === 'function') {\n          this.currentFocus = target;\n          target.focus({ preventScroll: false });\n        }\n      }\n    }\n  }\n\n  private handleFocusIn = () => {\n    if (!this.isActive()) return;\n    this.checkFocus();\n  };\n\n  private possiblyHasTabbableChildren(element: HTMLElement) {\n    return (\n      this.elementsWithTabbableControls.includes(\n        element.tagName.toLowerCase()\n      ) || element.hasAttribute('controls')\n      // Should we add a data-attribute for people to set just in case they have an element where we don't know if it has possibly tabbable elements?\n    );\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== 'Tab' || this.isExternalActivated) return;\n    if (!this.isActive()) return;\n\n    // Because sometimes focus can actually be taken over from outside sources,\n    // we don't want to rely on `this.currentFocus`. Instead we check the actual `activeElement` and\n    // recurse through shadowRoots.\n    const currentActiveElement = getDeepestActiveElement();\n    this.previousFocus = currentActiveElement as HTMLElement | null;\n\n    if (\n      this.previousFocus &&\n      this.possiblyHasTabbableChildren(this.previousFocus)\n    ) {\n      return;\n    }\n\n    if (event.shiftKey) {\n      this.tabDirection = 'backward';\n    } else {\n      this.tabDirection = 'forward';\n    }\n\n    const tabbableElements = getTabbableElements(this.element);\n\n    let currentFocusIndex = tabbableElements.findIndex(\n      el => el === currentActiveElement\n    );\n\n    this.previousFocus = this.currentFocus;\n\n    const addition = this.tabDirection === 'forward' ? 1 : -1;\n\n    // eslint-disable-next-line\n    while (true) {\n      if (currentFocusIndex + addition >= tabbableElements.length) {\n        currentFocusIndex = 0;\n      } else if (currentFocusIndex + addition < 0) {\n        currentFocusIndex = tabbableElements.length - 1;\n      } else {\n        currentFocusIndex += addition;\n      }\n\n      this.previousFocus = this.currentFocus;\n      const nextFocus =\n        /** @type {HTMLElement} */ tabbableElements[currentFocusIndex];\n\n      // This is a special case. We need to make sure we're not calling .focus() if we're already focused on an element\n      // that possibly has \"controls\"\n      if (this.tabDirection === 'backward') {\n        if (\n          this.previousFocus &&\n          this.possiblyHasTabbableChildren(this.previousFocus)\n        ) {\n          return;\n        }\n      }\n\n      if (nextFocus && this.possiblyHasTabbableChildren(nextFocus)) {\n        return;\n      }\n\n      event.preventDefault();\n      this.currentFocus = nextFocus;\n      this.currentFocus?.focus({ preventScroll: false });\n\n      // Check to make sure focus actually changed. It may not always be the next focus, we just don't want it to be the previousFocus.\n      const allActiveElements = [...activeElements()];\n      if (\n        allActiveElements.includes(this.currentFocus) ||\n        !allActiveElements.includes(this.previousFocus!)\n      ) {\n        break;\n      }\n    }\n\n    setTimeout(() => this.checkFocus());\n  };\n\n  private handleKeyUp = () => {\n    this.tabDirection = 'forward';\n  };\n}\n"]}