@internetarchive/modal-manager 2.0.5-webdev-8155.2 → 2.0.5-webdev-8155.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/demo/app-root.d.ts +1 -1
  2. package/dist/src/assets/arrow-left-icon.d.ts +1 -1
  3. package/dist/src/assets/ia-logo-icon.d.ts +1 -1
  4. package/dist/src/modal-config.d.ts +13 -13
  5. package/dist/src/modal-config.js.map +1 -1
  6. package/dist/src/modal-manager.d.ts +5 -5
  7. package/dist/src/modal-manager.js.map +1 -1
  8. package/dist/src/modal-template.d.ts +3 -3
  9. package/dist/src/modal-template.js +2 -2
  10. package/dist/src/modal-template.js.map +1 -1
  11. package/dist/test/modal-manager.test.js.map +1 -1
  12. package/package.json +2 -2
  13. package/src/modal-config.ts +13 -13
  14. package/src/modal-manager.ts +5 -5
  15. package/src/modal-template.ts +12 -5
  16. package/test/modal-manager.test.ts +2 -2
package/dist/demo/app-root.d.ts CHANGED
@@ -2,7 +2,7 @@ import { LitElement, type CSSResultGroup } from 'lit';
2
2
  import '../src/modal-manager';
3
3
  export declare class AppRoot extends LitElement {
4
4
  private modalManager;
5
- protected render(): import("lit-html").TemplateResult<1>;
5
+ protected render(): import("lit").TemplateResult<1>;
6
6
  showModal(): void;
7
7
  showErrorModal(): void;
8
8
  showBillAlert(): void;
package/dist/src/assets/arrow-left-icon.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const _default: import("lit-html").TemplateResult<1>;
1
+ declare const _default: import("lit").TemplateResult<1>;
2
2
  export default _default;
package/dist/src/assets/ia-logo-icon.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const _default: import("lit-html").TemplateResult<1>;
1
+ declare const _default: import("lit").TemplateResult<1>;
2
2
  export default _default;
package/dist/src/modal-config.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { TemplateResult } from 'lit';
1
+ import type { HTMLTemplateResult } from 'lit';
2
2
  /**
3
3
  * Configuration to show a modal
4
4
  *
@@ -9,31 +9,31 @@ export declare class ModalConfig {
9
9
  /**
10
10
  * The title that shows in the header
11
11
  *
12
- * @type {(TemplateResult | string | undefined)}
12
+ * @type {(HTMLTemplateResult | string | undefined)}
13
13
  * @memberof ModalConfig
14
14
  */
15
- title?: TemplateResult | string;
15
+ title?: HTMLTemplateResult | string;
16
16
  /**
17
17
  * The subtitle shown in the header under the title
18
18
  *
19
- * @type {(TemplateResult | string | undefined)}
19
+ * @type {(HTMLTemplateResult | string | undefined)}
20
20
  * @memberof ModalConfig
21
21
  */
22
- subtitle?: TemplateResult | string;
22
+ subtitle?: HTMLTemplateResult | string;
23
23
  /**
24
24
  * The headline shown at the top of the content section
25
25
  *
26
- * @type {(TemplateResult | string | undefined)}
26
+ * @type {(HTMLTemplateResult | string | undefined)}
27
27
  * @memberof ModalConfig
28
28
  */
29
- headline?: TemplateResult | string;
29
+ headline?: HTMLTemplateResult | string;
30
30
  /**
31
31
  * The text shown below the headline in the content section
32
32
  *
33
- * @type {(TemplateResult | string | undefined)}
33
+ * @type {(HTMLTemplateResult | string | undefined)}
34
34
  * @memberof ModalConfig
35
35
  */
36
- message?: TemplateResult | string;
36
+ message?: HTMLTemplateResult | string;
37
37
  /**
38
38
  * The background color of the header
39
39
  *
@@ -87,10 +87,10 @@ export declare class ModalConfig {
87
87
  */
88
88
  closeOnBackdropClick: boolean;
89
89
  constructor(options?: {
90
- title?: TemplateResult | string;
91
- subtitle?: TemplateResult | string;
92
- headline?: TemplateResult | string;
93
- message?: TemplateResult | string;
90
+ title?: HTMLTemplateResult | string;
91
+ subtitle?: HTMLTemplateResult | string;
92
+ headline?: HTMLTemplateResult | string;
93
+ message?: HTMLTemplateResult | string;
94
94
  headerColor?: string;
95
95
  bodyColor?: string;
96
96
  showProcessingIndicator?: boolean;
package/dist/src/modal-config.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"modal-config.js","sourceRoot":"","sources":["../../src/modal-config.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,OAAO,WAAW;IA8FtB,YAAY,OAcX;QACC,IAAI,CAAC,KAAK,GAAG,OAAO,EAAE,KAAK,CAAC;QAC5B,IAAI,CAAC,QAAQ,GAAG,OAAO,EAAE,QAAQ,CAAC;QAClC,IAAI,CAAC,QAAQ,GAAG,OAAO,EAAE,QAAQ,CAAC;QAClC,IAAI,CAAC,OAAO,GAAG,OAAO,EAAE,OAAO,CAAC;QAEhC,IAAI,CAAC,WAAW,GAAG,OAAO,EAAE,WAAW,IAAI,SAAS,CAAC;QACrD,IAAI,CAAC,SAAS,GAAG,OAAO,EAAE,SAAS,IAAI,SAAS,CAAC;QACjD,IAAI,CAAC,uBAAuB,GAAG,OAAO,EAAE,uBAAuB,IAAI,KAAK,CAAC;QACzE,IAAI,CAAC,mBAAmB,GAAG,OAAO,EAAE,mBAAmB,IAAI,UAAU,CAAC;QACtE,IAAI,CAAC,eAAe,GAAG,OAAO,EAAE,eAAe,IAAI,IAAI,CAAC;QACxD,IAAI,CAAC,iBAAiB,GAAG,OAAO,EAAE,iBAAiB,IAAI,KAAK,CAAC;QAC7D,IAAI,CAAC,iBAAiB,GAAG,OAAO,EAAE,iBAAiB,IAAI,EAAE,CAAC;QAC1D,IAAI,CAAC,cAAc,GAAG,OAAO,EAAE,cAAc,IAAI,IAAI,CAAC;QACtD,IAAI,CAAC,oBAAoB,GAAG,OAAO,EAAE,oBAAoB,IAAI,IAAI,CAAC;IACpE,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit';\n\n/**\n * Configuration to show a modal\n *\n * @export\n * @class ModalConfig\n */\nexport class ModalConfig {\n /**\n * The title that shows in the header\n *\n * @type {(TemplateResult | string | undefined)}\n * @memberof ModalConfig\n */\n title?: TemplateResult | string;\n\n /**\n * The subtitle shown in the header under the title\n *\n * @type {(TemplateResult | string | undefined)}\n * @memberof ModalConfig\n */\n subtitle?: TemplateResult | string;\n\n /**\n * The headline shown at the top of the content section\n *\n * @type {(TemplateResult | string | undefined)}\n * @memberof ModalConfig\n */\n headline?: TemplateResult | string;\n\n /**\n * The text shown below the headline in the content section\n *\n * @type {(TemplateResult | string | undefined)}\n * @memberof ModalConfig\n */\n message?: TemplateResult | string;\n\n /**\n * The background color of the header\n *\n * @memberof ModalConfig\n */\n headerColor: string;\n\n /**\n * The background color of the body\n *\n * @memberof ModalConfig\n */\n bodyColor: string;\n\n /**\n * Show or hide the processing indicator\n *\n * @memberof ModalConfig\n */\n showProcessingIndicator: boolean;\n\n /**\n * Set the processing image mode\n *\n * @memberof ModalConfig\n */\n processingImageMode: 'processing' | 'complete';\n\n /**\n * Show the close button\n *\n * @memberof ModalConfig\n */\n showCloseButton: boolean;\n\n /**\n * Show the left nav button\n *\n * @memberof ModalConfig\n */\n showLeftNavButton: boolean;\n\n /**\n * Left nav button text\n */\n leftNavButtonText: string;\n\n /**\n * Show the close button\n *\n * @memberof ModalConfig\n */\n showHeaderLogo: boolean;\n\n /**\n * Close the modal if the user taps on the background\n *\n * @memberof ModalConfig\n */\n closeOnBackdropClick: boolean;\n\n constructor(options?: {\n title?: TemplateResult | string;\n subtitle?: TemplateResult | string;\n headline?: TemplateResult | string;\n message?: TemplateResult | string;\n headerColor?: string;\n bodyColor?: string;\n showProcessingIndicator?: boolean;\n processingImageMode?: 'processing' | 'complete';\n showCloseButton?: boolean;\n showLeftNavButton?: boolean;\n leftNavButtonText?: string;\n showHeaderLogo?: boolean;\n closeOnBackdropClick?: boolean;\n }) {\n this.title = options?.title;\n this.subtitle = options?.subtitle;\n this.headline = options?.headline;\n this.message = options?.message;\n\n this.headerColor = options?.headerColor ?? '#55A183';\n this.bodyColor = options?.bodyColor ?? '#fbfbfd';\n this.showProcessingIndicator = options?.showProcessingIndicator ?? false;\n this.processingImageMode = options?.processingImageMode ?? 'complete';\n this.showCloseButton = options?.showCloseButton ?? true;\n this.showLeftNavButton = options?.showLeftNavButton ?? false;\n this.leftNavButtonText = options?.leftNavButtonText ?? '';\n this.showHeaderLogo = options?.showHeaderLogo ?? true;\n this.closeOnBackdropClick = options?.closeOnBackdropClick ?? true;\n }\n}\n"]}
1
+ {"version":3,"file":"modal-config.js","sourceRoot":"","sources":["../../src/modal-config.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,OAAO,WAAW;IA8FtB,YAAY,OAcX;QACC,IAAI,CAAC,KAAK,GAAG,OAAO,EAAE,KAAK,CAAC;QAC5B,IAAI,CAAC,QAAQ,GAAG,OAAO,EAAE,QAAQ,CAAC;QAClC,IAAI,CAAC,QAAQ,GAAG,OAAO,EAAE,QAAQ,CAAC;QAClC,IAAI,CAAC,OAAO,GAAG,OAAO,EAAE,OAAO,CAAC;QAEhC,IAAI,CAAC,WAAW,GAAG,OAAO,EAAE,WAAW,IAAI,SAAS,CAAC;QACrD,IAAI,CAAC,SAAS,GAAG,OAAO,EAAE,SAAS,IAAI,SAAS,CAAC;QACjD,IAAI,CAAC,uBAAuB,GAAG,OAAO,EAAE,uBAAuB,IAAI,KAAK,CAAC;QACzE,IAAI,CAAC,mBAAmB,GAAG,OAAO,EAAE,mBAAmB,IAAI,UAAU,CAAC;QACtE,IAAI,CAAC,eAAe,GAAG,OAAO,EAAE,eAAe,IAAI,IAAI,CAAC;QACxD,IAAI,CAAC,iBAAiB,GAAG,OAAO,EAAE,iBAAiB,IAAI,KAAK,CAAC;QAC7D,IAAI,CAAC,iBAAiB,GAAG,OAAO,EAAE,iBAAiB,IAAI,EAAE,CAAC;QAC1D,IAAI,CAAC,cAAc,GAAG,OAAO,EAAE,cAAc,IAAI,IAAI,CAAC;QACtD,IAAI,CAAC,oBAAoB,GAAG,OAAO,EAAE,oBAAoB,IAAI,IAAI,CAAC;IACpE,CAAC;CACF","sourcesContent":["import type { HTMLTemplateResult } from 'lit';\n\n/**\n * Configuration to show a modal\n *\n * @export\n * @class ModalConfig\n */\nexport class ModalConfig {\n /**\n * The title that shows in the header\n *\n * @type {(HTMLTemplateResult | string | undefined)}\n * @memberof ModalConfig\n */\n title?: HTMLTemplateResult | string;\n\n /**\n * The subtitle shown in the header under the title\n *\n * @type {(HTMLTemplateResult | string | undefined)}\n * @memberof ModalConfig\n */\n subtitle?: HTMLTemplateResult | string;\n\n /**\n * The headline shown at the top of the content section\n *\n * @type {(HTMLTemplateResult | string | undefined)}\n * @memberof ModalConfig\n */\n headline?: HTMLTemplateResult | string;\n\n /**\n * The text shown below the headline in the content section\n *\n * @type {(HTMLTemplateResult | string | undefined)}\n * @memberof ModalConfig\n */\n message?: HTMLTemplateResult | string;\n\n /**\n * The background color of the header\n *\n * @memberof ModalConfig\n */\n headerColor: string;\n\n /**\n * The background color of the body\n *\n * @memberof ModalConfig\n */\n bodyColor: string;\n\n /**\n * Show or hide the processing indicator\n *\n * @memberof ModalConfig\n */\n showProcessingIndicator: boolean;\n\n /**\n * Set the processing image mode\n *\n * @memberof ModalConfig\n */\n processingImageMode: 'processing' | 'complete';\n\n /**\n * Show the close button\n *\n * @memberof ModalConfig\n */\n showCloseButton: boolean;\n\n /**\n * Show the left nav button\n *\n * @memberof ModalConfig\n */\n showLeftNavButton: boolean;\n\n /**\n * Left nav button text\n */\n leftNavButtonText: string;\n\n /**\n * Show the close button\n *\n * @memberof ModalConfig\n */\n showHeaderLogo: boolean;\n\n /**\n * Close the modal if the user taps on the background\n *\n * @memberof ModalConfig\n */\n closeOnBackdropClick: boolean;\n\n constructor(options?: {\n title?: HTMLTemplateResult | string;\n subtitle?: HTMLTemplateResult | string;\n headline?: HTMLTemplateResult | string;\n message?: HTMLTemplateResult | string;\n headerColor?: string;\n bodyColor?: string;\n showProcessingIndicator?: boolean;\n processingImageMode?: 'processing' | 'complete';\n showCloseButton?: boolean;\n showLeftNavButton?: boolean;\n leftNavButtonText?: string;\n showHeaderLogo?: boolean;\n closeOnBackdropClick?: boolean;\n }) {\n this.title = options?.title;\n this.subtitle = options?.subtitle;\n this.headline = options?.headline;\n this.message = options?.message;\n\n this.headerColor = options?.headerColor ?? '#55A183';\n this.bodyColor = options?.bodyColor ?? '#fbfbfd';\n this.showProcessingIndicator = options?.showProcessingIndicator ?? false;\n this.processingImageMode = options?.processingImageMode ?? 'complete';\n this.showCloseButton = options?.showCloseButton ?? true;\n this.showLeftNavButton = options?.showLeftNavButton ?? false;\n this.leftNavButtonText = options?.leftNavButtonText ?? '';\n this.showHeaderLogo = options?.showHeaderLogo ?? true;\n this.closeOnBackdropClick = options?.closeOnBackdropClick ?? true;\n }\n}\n"]}
package/dist/src/modal-manager.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { LitElement, CSSResult, TemplateResult, PropertyValues } from 'lit';
1
+ import { LitElement, CSSResult, HTMLTemplateResult, PropertyValues } from 'lit';
2
2
  import Modal from './shoelace/modal';
3
3
  import './modal-template';
4
4
  import { ModalConfig } from './modal-config';
@@ -18,10 +18,10 @@ export declare class ModalManager extends LitElement implements ModalManagerInte
18
18
  /**
19
19
  * Custom content to display in the modal's content slot
20
20
  *
21
- * @type {(TemplateResult | undefined)}
21
+ * @type {(HTMLTemplateResult | undefined)}
22
22
  * @memberof ModalManager
23
23
  */
24
- customModalContent?: TemplateResult;
24
+ customModalContent?: HTMLTemplateResult;
25
25
  /**
26
26
  * This hostBridge handles environmental-specific interactions such as adding classes
27
27
  * to the body tag or event listeners needed to support the modal manager in the host environment.
@@ -45,7 +45,7 @@ export declare class ModalManager extends LitElement implements ModalManagerInte
45
45
  firstUpdated(): Promise<void>;
46
46
  disconnectedCallback(): void;
47
47
  /** @inheritdoc */
48
- render(): TemplateResult;
48
+ render(): HTMLTemplateResult;
49
49
  /** @inheritdoc */
50
50
  getMode(): ModalManagerMode;
51
51
  /** @inheritdoc */
@@ -93,7 +93,7 @@ export declare class ModalManager extends LitElement implements ModalManagerInte
93
93
  /** @inheritdoc */
94
94
  showModal(options: {
95
95
  config: ModalConfig;
96
- customModalContent?: TemplateResult;
96
+ customModalContent?: HTMLTemplateResult;
97
97
  userClosedModalCallback?: () => void;
98
98
  userPressedLeftNavButtonCallback?: () => void;
99
99
  }): Promise<void>;
package/dist/src/modal-manager.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"modal-manager.js","sourceRoot":"","sources":["../../src/modal-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n css,\n CSSResult,\n TemplateResult,\n PropertyValues,\n} from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\n\nimport Modal from './shoelace/modal';\nimport { getDeepestActiveElement } from './shoelace/active-elements';\n\nimport './modal-template';\nimport { ModalTemplate } from './modal-template';\nimport { ModalConfig } from './modal-config';\nimport { ModalManagerHostBridge } from './modal-manager-host-bridge';\nimport { ModalManagerInterface } from './modal-manager-interface';\nimport { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';\nimport { ModalManagerMode } from './modal-manager-mode';\n\n@customElement('modal-manager')\nexport class ModalManager extends LitElement implements ModalManagerInterface {\n /**\n * The current mode of the ModalManager\n *\n * Current options are `modal` or `closed`\n *\n * @type {ModalManagerMode}\n * @memberof ModalManager\n */\n @property({ type: String, reflect: true }) mode: ModalManagerMode =\n ModalManagerMode.Closed;\n\n /**\n * Custom content to display in the modal's content slot\n *\n * @type {(TemplateResult | undefined)}\n * @memberof ModalManager\n */\n @property({ type: Object }) customModalContent?: TemplateResult;\n\n /**\n * This hostBridge handles environmental-specific interactions such as adding classes\n * to the body tag or event listeners needed to support the modal manager in the host environment.\n *\n * There is a default `ModalManagerHostBridge`, but consumers can override it with a custom\n * `ModalManagerHostBridgeInterface`\n *\n * @type {ModalManagerHostBridgeInterface}\n * @memberof ModalManager\n */\n @property({ type: Object })\n hostBridge: ModalManagerHostBridgeInterface = new ModalManagerHostBridge(\n this,\n );\n\n /**\n * Reference to the ModalTemplate DOM element\n *\n * @private\n * @type {ModalTemplate}\n * @memberof ModalManager\n */\n @query('modal-template') private modalTemplate?: ModalTemplate;\n\n // Imported tab handling from shoelace\n public modal = new Modal(this);\n\n async firstUpdated(): Promise<void> {\n // Give the browser a chance to paint\n\n await new Promise((r) => setTimeout(r, 0));\n\n if (this.closeOnBackdropClick) {\n this.addEventListener('keydown', (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n this.backdropClicked();\n }\n });\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.modal.deactivate();\n }\n\n /** @inheritdoc */\n render(): TemplateResult {\n return html`\n <div class=\"container\">\n <div class=\"backdrop\" @click=${this.backdropClicked}></div>\n <modal-template\n @closeButtonPressed=${this.closeButtonPressed}\n @leftNavButtonPressed=${this.callUserPressedLeftNavButtonCallback}\n tabindex=\"-1\"\n >\n ${this.customModalContent}\n </modal-template>\n </div>\n `;\n }\n\n /** @inheritdoc */\n getMode(): ModalManagerMode {\n return this.mode;\n }\n\n /** @inheritdoc */\n closeModal(): void {\n this.mode = ModalManagerMode.Closed;\n this.customModalContent = undefined;\n if (this.modalTemplate) this.modalTemplate.config = new ModalConfig();\n this.modal.deactivate();\n\n // Return focus to the triggering element, if possible\n (this.triggeringElement as HTMLElement)?.focus?.();\n this.triggeringElement = undefined;\n }\n\n /**\n * Whether the modal should close if the user taps on the backdrop\n *\n * @private\n * @memberof ModalManager\n */\n private closeOnBackdropClick = true;\n\n /**\n * The element that had focus when the modal was opened, so that we can return focus\n * to it after the modal closes.\n */\n private triggeringElement?: Element;\n\n /**\n * A callback if the user closes the modal\n *\n * @private\n * @memberof ModalManager\n */\n private userClosedModalCallback?: () => void;\n\n /**\n * A callback if the user presses the left nav button\n *\n * @private\n * @memberof ModalManager\n */\n private userPressedLeftNavButtonCallback?: () => void;\n\n /**\n * Call the userClosedModalCallback and reset it if it exists\n *\n * @private\n * @memberof ModalManager\n */\n private callUserClosedModalCallback(): void {\n // we assign the callback to a temp var and undefine it before calling it\n // otherwise, we run into the potential for an infinite loop if the\n // callback triggers another `showModal()`, which would execute `userClosedModalCallback`\n const callback = this.userClosedModalCallback;\n this.userClosedModalCallback = undefined;\n if (callback) callback();\n }\n\n /**\n * Call the user pressed left nav button callback and reset it if it exists\n *\n * @private\n * @memberof ModalManager\n */\n private callUserPressedLeftNavButtonCallback(): void {\n // avoids an infinite showModal() loop, as above\n const callback = this.userPressedLeftNavButtonCallback;\n this.userPressedLeftNavButtonCallback = undefined;\n if (callback) callback();\n }\n\n /** @inheritdoc */\n async showModal(options: {\n config: ModalConfig;\n customModalContent?: TemplateResult;\n userClosedModalCallback?: () => void;\n userPressedLeftNavButtonCallback?: () => void;\n }): Promise<void> {\n // If the dialog is being opened, make note of what element was focused beforehand\n if (this.mode === ModalManagerMode.Closed) this.captureFocusedElement();\n\n this.closeOnBackdropClick = options.config.closeOnBackdropClick;\n this.userClosedModalCallback = options.userClosedModalCallback;\n this.userPressedLeftNavButtonCallback =\n options.userPressedLeftNavButtonCallback;\n this.customModalContent = options.customModalContent;\n this.mode = ModalManagerMode.Open;\n if (this.modalTemplate) {\n this.modalTemplate.config = options.config;\n await this.modalTemplate.updateComplete;\n this.modalTemplate.focus();\n }\n this.modal.activate();\n }\n\n /**\n * Sets the triggering element to the one that is currently focused, as deep\n * within Shadow DOM as possible.\n */\n private captureFocusedElement(): void {\n this.triggeringElement = getDeepestActiveElement();\n }\n\n /** @inheritdoc */\n updated(changed: PropertyValues): void {\n /* istanbul ignore else */\n if (changed.has('mode')) {\n this.handleModeChange();\n }\n }\n\n /**\n * Called when the backdrop is clicked\n *\n * @private\n * @memberof ModalManager\n */\n private backdropClicked(): void {\n if (this.closeOnBackdropClick) {\n this.closeModal();\n this.callUserClosedModalCallback();\n }\n }\n\n /**\n * Handle the mode change\n *\n * @private\n * @memberof ModalManager\n */\n private handleModeChange(): void {\n this.hostBridge.handleModeChange(this.mode);\n this.emitModeChangeEvent();\n }\n\n /**\n * Emit a modeChange event\n *\n * @private\n * @memberof ModalManager\n */\n private emitModeChangeEvent(): void {\n const event = new CustomEvent('modeChanged', {\n detail: { mode: this.mode },\n });\n this.dispatchEvent(event);\n }\n\n /**\n * Called when the modal close button is pressed. Closes the modal.\n *\n * @private\n * @memberof ModalManager\n */\n private closeButtonPressed(): void {\n this.closeModal();\n this.callUserClosedModalCallback();\n }\n\n /** @inheritdoc */\n static get styles(): CSSResult {\n const modalBackdropColor = css`var(--modalBackdropColor, rgba(10, 10, 10, 0.9))`;\n const modalBackdropZindex = css`var(--modalBackdropZindex, 1000)`;\n\n const modalWidth = css`var(--modalWidth, 32rem)`;\n const modalMaxWidth = css`var(--modalMaxWidth, 95%)`;\n const modalZindex = css`var(--modalZindex, 2000)`;\n\n return css`\n .container {\n width: 100%;\n height: 100%;\n }\n\n .backdrop {\n position: fixed;\n top: 0;\n left: 0;\n background-color: ${modalBackdropColor};\n width: 100%;\n height: 100%;\n z-index: ${modalBackdropZindex};\n }\n\n modal-template {\n outline: 0;\n position: fixed;\n top: 0;\n left: 50%;\n transform: translate(-50%, 0);\n z-index: ${modalZindex};\n width: ${modalWidth};\n max-width: ${modalMaxWidth};\n }\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"modal-manager.js","sourceRoot":"","sources":["../../src/modal-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n css,\n CSSResult,\n HTMLTemplateResult,\n PropertyValues,\n} from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\n\nimport Modal from './shoelace/modal';\nimport { getDeepestActiveElement } from './shoelace/active-elements';\n\nimport './modal-template';\nimport { ModalTemplate } from './modal-template';\nimport { ModalConfig } from './modal-config';\nimport { ModalManagerHostBridge } from './modal-manager-host-bridge';\nimport { ModalManagerInterface } from './modal-manager-interface';\nimport { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';\nimport { ModalManagerMode } from './modal-manager-mode';\n\n@customElement('modal-manager')\nexport class ModalManager extends LitElement implements ModalManagerInterface {\n /**\n * The current mode of the ModalManager\n *\n * Current options are `modal` or `closed`\n *\n * @type {ModalManagerMode}\n * @memberof ModalManager\n */\n @property({ type: String, reflect: true }) mode: ModalManagerMode =\n ModalManagerMode.Closed;\n\n /**\n * Custom content to display in the modal's content slot\n *\n * @type {(HTMLTemplateResult | undefined)}\n * @memberof ModalManager\n */\n @property({ type: Object }) customModalContent?: HTMLTemplateResult;\n\n /**\n * This hostBridge handles environmental-specific interactions such as adding classes\n * to the body tag or event listeners needed to support the modal manager in the host environment.\n *\n * There is a default `ModalManagerHostBridge`, but consumers can override it with a custom\n * `ModalManagerHostBridgeInterface`\n *\n * @type {ModalManagerHostBridgeInterface}\n * @memberof ModalManager\n */\n @property({ type: Object })\n hostBridge: ModalManagerHostBridgeInterface = new ModalManagerHostBridge(\n this,\n );\n\n /**\n * Reference to the ModalTemplate DOM element\n *\n * @private\n * @type {ModalTemplate}\n * @memberof ModalManager\n */\n @query('modal-template') private modalTemplate?: ModalTemplate;\n\n // Imported tab handling from shoelace\n public modal = new Modal(this);\n\n async firstUpdated(): Promise<void> {\n // Give the browser a chance to paint\n\n await new Promise((r) => setTimeout(r, 0));\n\n if (this.closeOnBackdropClick) {\n this.addEventListener('keydown', (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n this.backdropClicked();\n }\n });\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.modal.deactivate();\n }\n\n /** @inheritdoc */\n render(): HTMLTemplateResult {\n return html`\n <div class=\"container\">\n <div class=\"backdrop\" @click=${this.backdropClicked}></div>\n <modal-template\n @closeButtonPressed=${this.closeButtonPressed}\n @leftNavButtonPressed=${this.callUserPressedLeftNavButtonCallback}\n tabindex=\"-1\"\n >\n ${this.customModalContent}\n </modal-template>\n </div>\n `;\n }\n\n /** @inheritdoc */\n getMode(): ModalManagerMode {\n return this.mode;\n }\n\n /** @inheritdoc */\n closeModal(): void {\n this.mode = ModalManagerMode.Closed;\n this.customModalContent = undefined;\n if (this.modalTemplate) this.modalTemplate.config = new ModalConfig();\n this.modal.deactivate();\n\n // Return focus to the triggering element, if possible\n (this.triggeringElement as HTMLElement)?.focus?.();\n this.triggeringElement = undefined;\n }\n\n /**\n * Whether the modal should close if the user taps on the backdrop\n *\n * @private\n * @memberof ModalManager\n */\n private closeOnBackdropClick = true;\n\n /**\n * The element that had focus when the modal was opened, so that we can return focus\n * to it after the modal closes.\n */\n private triggeringElement?: Element;\n\n /**\n * A callback if the user closes the modal\n *\n * @private\n * @memberof ModalManager\n */\n private userClosedModalCallback?: () => void;\n\n /**\n * A callback if the user presses the left nav button\n *\n * @private\n * @memberof ModalManager\n */\n private userPressedLeftNavButtonCallback?: () => void;\n\n /**\n * Call the userClosedModalCallback and reset it if it exists\n *\n * @private\n * @memberof ModalManager\n */\n private callUserClosedModalCallback(): void {\n // we assign the callback to a temp var and undefine it before calling it\n // otherwise, we run into the potential for an infinite loop if the\n // callback triggers another `showModal()`, which would execute `userClosedModalCallback`\n const callback = this.userClosedModalCallback;\n this.userClosedModalCallback = undefined;\n if (callback) callback();\n }\n\n /**\n * Call the user pressed left nav button callback and reset it if it exists\n *\n * @private\n * @memberof ModalManager\n */\n private callUserPressedLeftNavButtonCallback(): void {\n // avoids an infinite showModal() loop, as above\n const callback = this.userPressedLeftNavButtonCallback;\n this.userPressedLeftNavButtonCallback = undefined;\n if (callback) callback();\n }\n\n /** @inheritdoc */\n async showModal(options: {\n config: ModalConfig;\n customModalContent?: HTMLTemplateResult;\n userClosedModalCallback?: () => void;\n userPressedLeftNavButtonCallback?: () => void;\n }): Promise<void> {\n // If the dialog is being opened, make note of what element was focused beforehand\n if (this.mode === ModalManagerMode.Closed) this.captureFocusedElement();\n\n this.closeOnBackdropClick = options.config.closeOnBackdropClick;\n this.userClosedModalCallback = options.userClosedModalCallback;\n this.userPressedLeftNavButtonCallback =\n options.userPressedLeftNavButtonCallback;\n this.customModalContent = options.customModalContent;\n this.mode = ModalManagerMode.Open;\n if (this.modalTemplate) {\n this.modalTemplate.config = options.config;\n await this.modalTemplate.updateComplete;\n this.modalTemplate.focus();\n }\n this.modal.activate();\n }\n\n /**\n * Sets the triggering element to the one that is currently focused, as deep\n * within Shadow DOM as possible.\n */\n private captureFocusedElement(): void {\n this.triggeringElement = getDeepestActiveElement();\n }\n\n /** @inheritdoc */\n updated(changed: PropertyValues): void {\n /* istanbul ignore else */\n if (changed.has('mode')) {\n this.handleModeChange();\n }\n }\n\n /**\n * Called when the backdrop is clicked\n *\n * @private\n * @memberof ModalManager\n */\n private backdropClicked(): void {\n if (this.closeOnBackdropClick) {\n this.closeModal();\n this.callUserClosedModalCallback();\n }\n }\n\n /**\n * Handle the mode change\n *\n * @private\n * @memberof ModalManager\n */\n private handleModeChange(): void {\n this.hostBridge.handleModeChange(this.mode);\n this.emitModeChangeEvent();\n }\n\n /**\n * Emit a modeChange event\n *\n * @private\n * @memberof ModalManager\n */\n private emitModeChangeEvent(): void {\n const event = new CustomEvent('modeChanged', {\n detail: { mode: this.mode },\n });\n this.dispatchEvent(event);\n }\n\n /**\n * Called when the modal close button is pressed. Closes the modal.\n *\n * @private\n * @memberof ModalManager\n */\n private closeButtonPressed(): void {\n this.closeModal();\n this.callUserClosedModalCallback();\n }\n\n /** @inheritdoc */\n static get styles(): CSSResult {\n const modalBackdropColor = css`var(--modalBackdropColor, rgba(10, 10, 10, 0.9))`;\n const modalBackdropZindex = css`var(--modalBackdropZindex, 1000)`;\n\n const modalWidth = css`var(--modalWidth, 32rem)`;\n const modalMaxWidth = css`var(--modalMaxWidth, 95%)`;\n const modalZindex = css`var(--modalZindex, 2000)`;\n\n return css`\n .container {\n width: 100%;\n height: 100%;\n }\n\n .backdrop {\n position: fixed;\n top: 0;\n left: 0;\n background-color: ${modalBackdropColor};\n width: 100%;\n height: 100%;\n z-index: ${modalBackdropZindex};\n }\n\n modal-template {\n outline: 0;\n position: fixed;\n top: 0;\n left: 50%;\n transform: translate(-50%, 0);\n z-index: ${modalZindex};\n width: ${modalWidth};\n max-width: ${modalMaxWidth};\n }\n `;\n }\n}\n"]}
package/dist/src/modal-template.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { LitElement, CSSResult, TemplateResult } from 'lit';
1
+ import { LitElement, CSSResult, HTMLTemplateResult } from 'lit';
2
2
  import '@internetarchive/ia-activity-indicator';
3
3
  import '@internetarchive/icon-close';
4
4
  import { ModalConfig } from './modal-config';
@@ -11,7 +11,7 @@ export declare class ModalTemplate extends LitElement {
11
11
  */
12
12
  config: ModalConfig;
13
13
  /** @inheritdoc */
14
- render(): TemplateResult;
14
+ render(): HTMLTemplateResult;
15
15
  /**
16
16
  * Dispatch the `closeButtonPressed` event to the consumer
17
17
  *
@@ -31,7 +31,7 @@ export declare class ModalTemplate extends LitElement {
31
31
  *
32
32
  * @readonly
33
33
  * @private
34
- * @type {TemplateResult}
34
+ * @type {HTMLTemplateResult}
35
35
  * @memberof ModalTemplate
36
36
  */
37
37
  private get closeButtonTemplate();
package/dist/src/modal-template.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __decorate } from "tslib";
2
- import { LitElement, html, css, nothing } from 'lit';
2
+ import { LitElement, html, css, nothing, } from 'lit';
3
3
  import { property, customElement } from 'lit/decorators.js';
4
4
  import '@internetarchive/ia-activity-indicator';
5
5
  import '@internetarchive/icon-close';
@@ -104,7 +104,7 @@ let ModalTemplate = class ModalTemplate extends LitElement {
104
104
  *
105
105
  * @readonly
106
106
  * @private
107
- * @type {TemplateResult}
107
+ * @type {HTMLTemplateResult}
108
108
  * @memberof ModalTemplate
109
109
  */
110
110
  get closeButtonTemplate() {
package/dist/src/modal-template.js.map CHANGED
@@ -1 +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';\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:\n 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:\n 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"]}
1
+ {"version":3,"file":"modal-template.js","sourceRoot":"","sources":["../../src/modal-template.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n css,\n CSSResult,\n HTMLTemplateResult,\n nothing,\n} 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(): HTMLTemplateResult {\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 {HTMLTemplateResult}\n * @memberof ModalTemplate\n */\n private get closeButtonTemplate(): HTMLTemplateResult {\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(): HTMLTemplateResult {\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:\n 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:\n 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/test/modal-manager.test.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"modal-manager.test.js","sourceRoot":"","sources":["../../test/modal-manager.test.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n fixture,\n oneEvent,\n elementUpdated,\n nextFrame,\n fixtureCleanup,\n} from '@open-wc/testing-helpers';\nimport { describe, test, expect, afterEach } from 'vitest';\nimport { TemplateResult, html } from 'lit';\n\nimport '../src/modal-manager';\nimport { ModalConfig } from '../src/modal-config';\nimport { ModalManager } from '../src/modal-manager';\nimport { ModalManagerMode } from '../src/modal-manager-mode';\nimport { ModalManagerInterface } from '../src/modal-manager-interface';\n\nimport { getTabbableElements } from '../src/shoelace/tabbable';\n\ndescribe('Modal Manager', () => {\n afterEach(() => {\n fixtureCleanup();\n });\n\n test('defaults to closed', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n expect(el.mode).to.equal('closed');\n });\n\n test('can be closed by calling closeModal', async () => {\n const el = (await fixture(html`\n <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>\n `)) as ModalManager;\n\n el.customModalContent = 'foo' as unknown as TemplateResult;\n await elementUpdated(el);\n\n expect(el.customModalContent).to.equal('foo');\n el.closeModal();\n await elementUpdated(el);\n\n expect(el.mode).to.equal('closed');\n expect(el.customModalContent).to.equal(undefined);\n });\n\n test('can be closed by clicking on the backdrop', async () => {\n const el = (await fixture(html`\n <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>\n `)) as ModalManager;\n\n const backdrop = el.shadowRoot?.querySelector('.backdrop');\n const clickEvent = new MouseEvent('click');\n\n backdrop?.dispatchEvent(clickEvent);\n await elementUpdated(el);\n\n expect(el.mode).to.equal('closed');\n });\n\n test('emits a modeChanged event when opening', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n\n setTimeout(() => {\n el.showModal({ config });\n });\n const response = await oneEvent(el, 'modeChanged');\n expect(response.detail.mode).to.equal(ModalManagerMode.Open);\n });\n\n test('emits a modeChanged event when closing', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n await el.showModal({ config });\n await elementUpdated(el);\n await nextFrame();\n\n setTimeout(() => {\n el.closeModal();\n });\n const response = await oneEvent(el, 'modeChanged');\n expect(response.detail.mode).to.equal(ModalManagerMode.Closed);\n });\n\n test('can show a modal', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n el.showModal({ config });\n await elementUpdated(el);\n expect(el.mode).to.equal(ModalManagerMode.Open);\n });\n\n test('sets the --containerHeight CSS property when the window resizes', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n el.showModal({ config });\n await elementUpdated(el);\n const event = new Event('resize');\n const propBefore = el.style.getPropertyValue('--containerHeight');\n expect(propBefore).to.equal('');\n window.dispatchEvent(event);\n await elementUpdated(el);\n const propAfter = el.style.getPropertyValue('--containerHeight');\n expect(propAfter).to.not.equal('');\n });\n\n test('calls the userClosedModalCallback when the user taps the backdrop', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n let callbackCalled = false;\n const callback = (): void => {\n callbackCalled = true;\n };\n el.showModal({\n config,\n userClosedModalCallback: callback,\n });\n await elementUpdated(el);\n\n const backdrop = el.shadowRoot?.querySelector('.backdrop');\n const clickEvent = new MouseEvent('click');\n backdrop?.dispatchEvent(clickEvent);\n\n await elementUpdated(el);\n\n expect(callbackCalled).to.equal(true);\n });\n\n test('does not call the userClosedModalCallback when the modal just closes', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n let callbackCalled = false;\n const callback = (): void => {\n callbackCalled = true;\n };\n el.showModal({\n config,\n userClosedModalCallback: callback,\n });\n await elementUpdated(el);\n el.closeModal();\n await elementUpdated(el);\n expect(callbackCalled).to.equal(false);\n });\n\n test('calls the userPressedLeftNavButtonCallback when the user clicks the left nav button', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n config.showLeftNavButton = true;\n\n let callbackCalled = false;\n const callback = (): void => {\n callbackCalled = true;\n };\n el.showModal({\n config,\n userPressedLeftNavButtonCallback: callback,\n });\n await elementUpdated(el);\n\n const modalTemplate = el.shadowRoot?.querySelector('modal-template');\n expect(modalTemplate).to.exist;\n\n modalTemplate?.dispatchEvent(new Event('leftNavButtonPressed'));\n\n await elementUpdated(el);\n\n expect(callbackCalled).to.equal(true);\n });\n\n test('mode is set to closed when close button is pressed', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n el.showModal({ config });\n await elementUpdated(el);\n\n expect(el.mode).to.equal('open');\n\n const modal = el.shadowRoot?.querySelector('modal-template');\n const closeButton = modal?.shadowRoot?.querySelector('.close-button');\n const clickEvent = new MouseEvent('click');\n closeButton?.dispatchEvent(clickEvent);\n\n await elementUpdated(el);\n\n expect(el.mode).to.equal('closed');\n });\n\n test('mode is set to closed when close button gets spacebar pressed', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n el.showModal({ config });\n await elementUpdated(el);\n\n expect(el.mode).to.equal('open');\n\n const modal = el.shadowRoot?.querySelector('modal-template');\n const closeButton = modal?.shadowRoot?.querySelector('.close-button');\n\n // Close with keyboard\n const spacebarEvent = new KeyboardEvent('keydown', { key: ' ' });\n closeButton?.dispatchEvent(spacebarEvent);\n\n await elementUpdated(el);\n\n expect(el.mode).to.equal('closed');\n });\n\n test('mode remains open when close button gets non-button keypress', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n el.showModal({ config });\n await elementUpdated(el);\n\n expect(el.mode).to.equal('open');\n\n const modal = el.shadowRoot?.querySelector('modal-template');\n const closeButton = modal?.shadowRoot?.querySelector('.close-button');\n\n // Close with keyboard\n const keyboardEvent = new KeyboardEvent('keydown', { key: '.' });\n closeButton?.dispatchEvent(keyboardEvent);\n\n await elementUpdated(el);\n\n expect(el.mode).to.equal('open');\n });\n\n test('allows the user to close by clicking on the backdrop if configured to', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n config.closeOnBackdropClick = true;\n el.showModal({ config });\n await elementUpdated(el);\n\n const backdrop = el.shadowRoot?.querySelector('.backdrop');\n const clickEvent = new MouseEvent('click');\n backdrop?.dispatchEvent(clickEvent);\n\n await elementUpdated(el);\n\n expect(el.mode).to.equal('closed');\n });\n\n test(\"doesn't allow the user to close by clicking on the backdrop if configured to\", async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManagerInterface;\n\n const config = new ModalConfig();\n config.closeOnBackdropClick = false;\n el.showModal({ config });\n await elementUpdated(el);\n\n const backdrop = el.shadowRoot?.querySelector('.backdrop');\n const clickEvent = new MouseEvent('click');\n backdrop?.dispatchEvent(clickEvent);\n\n await elementUpdated(el);\n\n expect(el.getMode()).to.equal('open');\n });\n\n test('ia logo should not visible on modal', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManagerInterface;\n\n const config = new ModalConfig();\n config.showHeaderLogo = false;\n el.showModal({ config });\n await elementUpdated(el);\n\n const logoIcon = el.shadowRoot?.querySelector('.logo-icon');\n expect(logoIcon).to.not.exist;\n });\n\n test('should trap Tab key', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n el.showModal({ config });\n await elementUpdated(el);\n\n expect(el.mode).to.equal('open');\n\n // Tab once to focus\n const tabEvent = new KeyboardEvent('keydown', { key: 'Tab' });\n document.dispatchEvent(tabEvent);\n await elementUpdated(el);\n await nextFrame();\n\n // Should be only one tabbable element\n const modal = el.shadowRoot?.querySelector('modal-template') as HTMLElement;\n const tabbableElements = getTabbableElements(modal);\n expect(tabbableElements?.length).to.equal(1);\n\n const closeButton = modal?.shadowRoot?.querySelector(\n '.close-button',\n ) as HTMLElement;\n expect(modal?.shadowRoot?.activeElement).to.equal(closeButton);\n\n // Tab again\n el.dispatchEvent(tabEvent);\n await elementUpdated(el);\n await nextFrame();\n\n // Should be only one tabbable element\n expect(modal?.shadowRoot?.activeElement).to.equal(closeButton);\n\n // Shift + Tab\n const shiftTabEvent = new KeyboardEvent('keydown', {\n key: 'Tab',\n shiftKey: true,\n });\n document.dispatchEvent(shiftTabEvent);\n await elementUpdated(el);\n await nextFrame();\n\n // Should be only one tabbable element\n expect(modal?.shadowRoot?.activeElement).to.equal(closeButton);\n });\n\n test('returns keyboard focus to the triggering element on close', async () => {\n const config = new ModalConfig();\n const el = (await fixture(html`\n <div>\n <button>Another button</button>\n <button\n id=\"open-modal-btn\"\n @click=${() => {\n const modal = el.querySelector('modal-manager') as ModalManager;\n modal.showModal({ config });\n }}\n >\n Open modal\n </button>\n <modal-manager></modal-manager>\n </div>\n `)) as HTMLDivElement;\n\n const openBtn = el.querySelector('#open-modal-btn') as HTMLButtonElement;\n const modal = el.querySelector('modal-manager') as ModalManager;\n\n // Focus is initially on the Open button\n openBtn.focus();\n expect(document.activeElement).to.equal(openBtn);\n\n // Focus enters the modal when it is opened\n openBtn.click();\n await nextFrame();\n expect(document.activeElement).to.equal(modal);\n\n // With the modal already open, simulate showing different content.\n // This step is to ensure that even if showModal is called multiple times, we still\n // maintain the originally-focused element (subsequent calls do not overwrite it).\n modal.showModal({ config: new ModalConfig() });\n await nextFrame();\n\n // Focus returns to the Open button when the modal closes\n modal.closeModal();\n await modal.updateComplete;\n expect(document.activeElement).to.equal(openBtn);\n });\n});\n"]}
1
+ {"version":3,"file":"modal-manager.test.js","sourceRoot":"","sources":["../../test/modal-manager.test.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n fixture,\n oneEvent,\n elementUpdated,\n nextFrame,\n fixtureCleanup,\n} from '@open-wc/testing-helpers';\nimport { describe, test, expect, afterEach } from 'vitest';\nimport { HTMLTemplateResult, html } from 'lit';\n\nimport '../src/modal-manager';\nimport { ModalConfig } from '../src/modal-config';\nimport { ModalManager } from '../src/modal-manager';\nimport { ModalManagerMode } from '../src/modal-manager-mode';\nimport { ModalManagerInterface } from '../src/modal-manager-interface';\n\nimport { getTabbableElements } from '../src/shoelace/tabbable';\n\ndescribe('Modal Manager', () => {\n afterEach(() => {\n fixtureCleanup();\n });\n\n test('defaults to closed', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n expect(el.mode).to.equal('closed');\n });\n\n test('can be closed by calling closeModal', async () => {\n const el = (await fixture(html`\n <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>\n `)) as ModalManager;\n\n el.customModalContent = 'foo' as unknown as HTMLTemplateResult;\n await elementUpdated(el);\n\n expect(el.customModalContent).to.equal('foo');\n el.closeModal();\n await elementUpdated(el);\n\n expect(el.mode).to.equal('closed');\n expect(el.customModalContent).to.equal(undefined);\n });\n\n test('can be closed by clicking on the backdrop', async () => {\n const el = (await fixture(html`\n <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>\n `)) as ModalManager;\n\n const backdrop = el.shadowRoot?.querySelector('.backdrop');\n const clickEvent = new MouseEvent('click');\n\n backdrop?.dispatchEvent(clickEvent);\n await elementUpdated(el);\n\n expect(el.mode).to.equal('closed');\n });\n\n test('emits a modeChanged event when opening', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n\n setTimeout(() => {\n el.showModal({ config });\n });\n const response = await oneEvent(el, 'modeChanged');\n expect(response.detail.mode).to.equal(ModalManagerMode.Open);\n });\n\n test('emits a modeChanged event when closing', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n await el.showModal({ config });\n await elementUpdated(el);\n await nextFrame();\n\n setTimeout(() => {\n el.closeModal();\n });\n const response = await oneEvent(el, 'modeChanged');\n expect(response.detail.mode).to.equal(ModalManagerMode.Closed);\n });\n\n test('can show a modal', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n el.showModal({ config });\n await elementUpdated(el);\n expect(el.mode).to.equal(ModalManagerMode.Open);\n });\n\n test('sets the --containerHeight CSS property when the window resizes', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n el.showModal({ config });\n await elementUpdated(el);\n const event = new Event('resize');\n const propBefore = el.style.getPropertyValue('--containerHeight');\n expect(propBefore).to.equal('');\n window.dispatchEvent(event);\n await elementUpdated(el);\n const propAfter = el.style.getPropertyValue('--containerHeight');\n expect(propAfter).to.not.equal('');\n });\n\n test('calls the userClosedModalCallback when the user taps the backdrop', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n let callbackCalled = false;\n const callback = (): void => {\n callbackCalled = true;\n };\n el.showModal({\n config,\n userClosedModalCallback: callback,\n });\n await elementUpdated(el);\n\n const backdrop = el.shadowRoot?.querySelector('.backdrop');\n const clickEvent = new MouseEvent('click');\n backdrop?.dispatchEvent(clickEvent);\n\n await elementUpdated(el);\n\n expect(callbackCalled).to.equal(true);\n });\n\n test('does not call the userClosedModalCallback when the modal just closes', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n let callbackCalled = false;\n const callback = (): void => {\n callbackCalled = true;\n };\n el.showModal({\n config,\n userClosedModalCallback: callback,\n });\n await elementUpdated(el);\n el.closeModal();\n await elementUpdated(el);\n expect(callbackCalled).to.equal(false);\n });\n\n test('calls the userPressedLeftNavButtonCallback when the user clicks the left nav button', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n config.showLeftNavButton = true;\n\n let callbackCalled = false;\n const callback = (): void => {\n callbackCalled = true;\n };\n el.showModal({\n config,\n userPressedLeftNavButtonCallback: callback,\n });\n await elementUpdated(el);\n\n const modalTemplate = el.shadowRoot?.querySelector('modal-template');\n expect(modalTemplate).to.exist;\n\n modalTemplate?.dispatchEvent(new Event('leftNavButtonPressed'));\n\n await elementUpdated(el);\n\n expect(callbackCalled).to.equal(true);\n });\n\n test('mode is set to closed when close button is pressed', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n el.showModal({ config });\n await elementUpdated(el);\n\n expect(el.mode).to.equal('open');\n\n const modal = el.shadowRoot?.querySelector('modal-template');\n const closeButton = modal?.shadowRoot?.querySelector('.close-button');\n const clickEvent = new MouseEvent('click');\n closeButton?.dispatchEvent(clickEvent);\n\n await elementUpdated(el);\n\n expect(el.mode).to.equal('closed');\n });\n\n test('mode is set to closed when close button gets spacebar pressed', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n el.showModal({ config });\n await elementUpdated(el);\n\n expect(el.mode).to.equal('open');\n\n const modal = el.shadowRoot?.querySelector('modal-template');\n const closeButton = modal?.shadowRoot?.querySelector('.close-button');\n\n // Close with keyboard\n const spacebarEvent = new KeyboardEvent('keydown', { key: ' ' });\n closeButton?.dispatchEvent(spacebarEvent);\n\n await elementUpdated(el);\n\n expect(el.mode).to.equal('closed');\n });\n\n test('mode remains open when close button gets non-button keypress', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n el.showModal({ config });\n await elementUpdated(el);\n\n expect(el.mode).to.equal('open');\n\n const modal = el.shadowRoot?.querySelector('modal-template');\n const closeButton = modal?.shadowRoot?.querySelector('.close-button');\n\n // Close with keyboard\n const keyboardEvent = new KeyboardEvent('keydown', { key: '.' });\n closeButton?.dispatchEvent(keyboardEvent);\n\n await elementUpdated(el);\n\n expect(el.mode).to.equal('open');\n });\n\n test('allows the user to close by clicking on the backdrop if configured to', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n config.closeOnBackdropClick = true;\n el.showModal({ config });\n await elementUpdated(el);\n\n const backdrop = el.shadowRoot?.querySelector('.backdrop');\n const clickEvent = new MouseEvent('click');\n backdrop?.dispatchEvent(clickEvent);\n\n await elementUpdated(el);\n\n expect(el.mode).to.equal('closed');\n });\n\n test(\"doesn't allow the user to close by clicking on the backdrop if configured to\", async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManagerInterface;\n\n const config = new ModalConfig();\n config.closeOnBackdropClick = false;\n el.showModal({ config });\n await elementUpdated(el);\n\n const backdrop = el.shadowRoot?.querySelector('.backdrop');\n const clickEvent = new MouseEvent('click');\n backdrop?.dispatchEvent(clickEvent);\n\n await elementUpdated(el);\n\n expect(el.getMode()).to.equal('open');\n });\n\n test('ia logo should not visible on modal', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManagerInterface;\n\n const config = new ModalConfig();\n config.showHeaderLogo = false;\n el.showModal({ config });\n await elementUpdated(el);\n\n const logoIcon = el.shadowRoot?.querySelector('.logo-icon');\n expect(logoIcon).to.not.exist;\n });\n\n test('should trap Tab key', async () => {\n const el = (await fixture(html`\n <modal-manager></modal-manager>\n `)) as ModalManager;\n\n const config = new ModalConfig();\n el.showModal({ config });\n await elementUpdated(el);\n\n expect(el.mode).to.equal('open');\n\n // Tab once to focus\n const tabEvent = new KeyboardEvent('keydown', { key: 'Tab' });\n document.dispatchEvent(tabEvent);\n await elementUpdated(el);\n await nextFrame();\n\n // Should be only one tabbable element\n const modal = el.shadowRoot?.querySelector('modal-template') as HTMLElement;\n const tabbableElements = getTabbableElements(modal);\n expect(tabbableElements?.length).to.equal(1);\n\n const closeButton = modal?.shadowRoot?.querySelector(\n '.close-button',\n ) as HTMLElement;\n expect(modal?.shadowRoot?.activeElement).to.equal(closeButton);\n\n // Tab again\n el.dispatchEvent(tabEvent);\n await elementUpdated(el);\n await nextFrame();\n\n // Should be only one tabbable element\n expect(modal?.shadowRoot?.activeElement).to.equal(closeButton);\n\n // Shift + Tab\n const shiftTabEvent = new KeyboardEvent('keydown', {\n key: 'Tab',\n shiftKey: true,\n });\n document.dispatchEvent(shiftTabEvent);\n await elementUpdated(el);\n await nextFrame();\n\n // Should be only one tabbable element\n expect(modal?.shadowRoot?.activeElement).to.equal(closeButton);\n });\n\n test('returns keyboard focus to the triggering element on close', async () => {\n const config = new ModalConfig();\n const el = (await fixture(html`\n <div>\n <button>Another button</button>\n <button\n id=\"open-modal-btn\"\n @click=${() => {\n const modal = el.querySelector('modal-manager') as ModalManager;\n modal.showModal({ config });\n }}\n >\n Open modal\n </button>\n <modal-manager></modal-manager>\n </div>\n `)) as HTMLDivElement;\n\n const openBtn = el.querySelector('#open-modal-btn') as HTMLButtonElement;\n const modal = el.querySelector('modal-manager') as ModalManager;\n\n // Focus is initially on the Open button\n openBtn.focus();\n expect(document.activeElement).to.equal(openBtn);\n\n // Focus enters the modal when it is opened\n openBtn.click();\n await nextFrame();\n expect(document.activeElement).to.equal(modal);\n\n // With the modal already open, simulate showing different content.\n // This step is to ensure that even if showModal is called multiple times, we still\n // maintain the originally-focused element (subsequent calls do not overwrite it).\n modal.showModal({ config: new ModalConfig() });\n await nextFrame();\n\n // Focus returns to the Open button when the modal closes\n modal.closeModal();\n await modal.updateComplete;\n expect(document.activeElement).to.equal(openBtn);\n });\n});\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetarchive/modal-manager",
3
- "version": "2.0.5-webdev-8155.2",
3
+ "version": "2.0.5-webdev-8155.3",
4
4
  "description": "A Modal Manager Web Component",
5
5
  "repository": {
6
6
  "type": "git",
@@ -28,7 +28,7 @@
28
28
  "@internetarchive/ia-activity-indicator": "^0.0.6",
29
29
  "@internetarchive/icon-close": "^1.4.0",
30
30
  "@internetarchive/icon-user": "^1.4.0",
31
- "lit": "^2.8.0",
31
+ "lit": "^3.3.2",
32
32
  "throttle-debounce": "^5.0.2"
33
33
  },
34
34
  "devDependencies": {
package/src/modal-config.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { TemplateResult } from 'lit';
1
+ import type { HTMLTemplateResult } from 'lit';
2
2
 
3
3
  /**
4
4
  * Configuration to show a modal
@@ -10,34 +10,34 @@ export class ModalConfig {
10
10
  /**
11
11
  * The title that shows in the header
12
12
  *
13
- * @type {(TemplateResult | string | undefined)}
13
+ * @type {(HTMLTemplateResult | string | undefined)}
14
14
  * @memberof ModalConfig
15
15
  */
16
- title?: TemplateResult | string;
16
+ title?: HTMLTemplateResult | string;
17
17
 
18
18
  /**
19
19
  * The subtitle shown in the header under the title
20
20
  *
21
- * @type {(TemplateResult | string | undefined)}
21
+ * @type {(HTMLTemplateResult | string | undefined)}
22
22
  * @memberof ModalConfig
23
23
  */
24
- subtitle?: TemplateResult | string;
24
+ subtitle?: HTMLTemplateResult | string;
25
25
 
26
26
  /**
27
27
  * The headline shown at the top of the content section
28
28
  *
29
- * @type {(TemplateResult | string | undefined)}
29
+ * @type {(HTMLTemplateResult | string | undefined)}
30
30
  * @memberof ModalConfig
31
31
  */
32
- headline?: TemplateResult | string;
32
+ headline?: HTMLTemplateResult | string;
33
33
 
34
34
  /**
35
35
  * The text shown below the headline in the content section
36
36
  *
37
- * @type {(TemplateResult | string | undefined)}
37
+ * @type {(HTMLTemplateResult | string | undefined)}
38
38
  * @memberof ModalConfig
39
39
  */
40
- message?: TemplateResult | string;
40
+ message?: HTMLTemplateResult | string;
41
41
 
42
42
  /**
43
43
  * The background color of the header
@@ -101,10 +101,10 @@ export class ModalConfig {
101
101
  closeOnBackdropClick: boolean;
102
102
 
103
103
  constructor(options?: {
104
- title?: TemplateResult | string;
105
- subtitle?: TemplateResult | string;
106
- headline?: TemplateResult | string;
107
- message?: TemplateResult | string;
104
+ title?: HTMLTemplateResult | string;
105
+ subtitle?: HTMLTemplateResult | string;
106
+ headline?: HTMLTemplateResult | string;
107
+ message?: HTMLTemplateResult | string;
108
108
  headerColor?: string;
109
109
  bodyColor?: string;
110
110
  showProcessingIndicator?: boolean;
package/src/modal-manager.ts CHANGED
@@ -3,7 +3,7 @@ import {
3
3
  html,
4
4
  css,
5
5
  CSSResult,
6
- TemplateResult,
6
+ HTMLTemplateResult,
7
7
  PropertyValues,
8
8
  } from 'lit';
9
9
  import { property, customElement, query } from 'lit/decorators.js';
@@ -35,10 +35,10 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
35
35
  /**
36
36
  * Custom content to display in the modal's content slot
37
37
  *
38
- * @type {(TemplateResult | undefined)}
38
+ * @type {(HTMLTemplateResult | undefined)}
39
39
  * @memberof ModalManager
40
40
  */
41
- @property({ type: Object }) customModalContent?: TemplateResult;
41
+ @property({ type: Object }) customModalContent?: HTMLTemplateResult;
42
42
 
43
43
  /**
44
44
  * This hostBridge handles environmental-specific interactions such as adding classes
@@ -87,7 +87,7 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
87
87
  }
88
88
 
89
89
  /** @inheritdoc */
90
- render(): TemplateResult {
90
+ render(): HTMLTemplateResult {
91
91
  return html`
92
92
  <div class="container">
93
93
  <div class="backdrop" @click=${this.backdropClicked}></div>
@@ -180,7 +180,7 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
180
180
  /** @inheritdoc */
181
181
  async showModal(options: {
182
182
  config: ModalConfig;
183
- customModalContent?: TemplateResult;
183
+ customModalContent?: HTMLTemplateResult;
184
184
  userClosedModalCallback?: () => void;
185
185
  userPressedLeftNavButtonCallback?: () => void;
186
186
  }): Promise<void> {
package/src/modal-template.ts CHANGED
@@ -1,4 +1,11 @@
1
- import { LitElement, html, css, CSSResult, TemplateResult, nothing } from 'lit';
1
+ import {
2
+ LitElement,
3
+ html,
4
+ css,
5
+ CSSResult,
6
+ HTMLTemplateResult,
7
+ nothing,
8
+ } from 'lit';
2
9
  import { property, customElement } from 'lit/decorators.js';
3
10
 
4
11
  import '@internetarchive/ia-activity-indicator';
@@ -19,7 +26,7 @@ export class ModalTemplate extends LitElement {
19
26
  @property({ type: Object }) config: ModalConfig = new ModalConfig();
20
27
 
21
28
  /** @inheritdoc */
22
- render(): TemplateResult {
29
+ render(): HTMLTemplateResult {
23
30
  return html`
24
31
  <div class="modal-wrapper">
25
32
  <div class="modal-container">
@@ -112,10 +119,10 @@ export class ModalTemplate extends LitElement {
112
119
  *
113
120
  * @readonly
114
121
  * @private
115
- * @type {TemplateResult}
122
+ * @type {HTMLTemplateResult}
116
123
  * @memberof ModalTemplate
117
124
  */
118
- private get closeButtonTemplate(): TemplateResult {
125
+ private get closeButtonTemplate(): HTMLTemplateResult {
119
126
  return html`
120
127
  <button
121
128
  type="button"
@@ -128,7 +135,7 @@ export class ModalTemplate extends LitElement {
128
135
  `;
129
136
  }
130
137
 
131
- private get leftNavButtonTemplate(): TemplateResult {
138
+ private get leftNavButtonTemplate(): HTMLTemplateResult {
132
139
  return html`<button
133
140
  type="button"
134
141
  class="back-button"
package/test/modal-manager.test.ts CHANGED
@@ -6,7 +6,7 @@ import {
6
6
  fixtureCleanup,
7
7
  } from '@open-wc/testing-helpers';
8
8
  import { describe, test, expect, afterEach } from 'vitest';
9
- import { TemplateResult, html } from 'lit';
9
+ import { HTMLTemplateResult, html } from 'lit';
10
10
 
11
11
  import '../src/modal-manager';
12
12
  import { ModalConfig } from '../src/modal-config';
@@ -34,7 +34,7 @@ describe('Modal Manager', () => {
34
34
  <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>
35
35
  `)) as ModalManager;
36
36
 
37
- el.customModalContent = 'foo' as unknown as TemplateResult;
37
+ el.customModalContent = 'foo' as unknown as HTMLTemplateResult;
38
38
  await elementUpdated(el);
39
39
 
40
40
  expect(el.customModalContent).to.equal('foo');