@internetarchive/modal-manager 0.2.4 → 0.2.7

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 (19) hide show
  1. package/README.md +3 -1
  2. package/demo/index.html +16 -0
  3. package/dist/src/modal-config.d.ts +7 -0
  4. package/dist/src/modal-config.js +3 -2
  5. package/dist/src/modal-config.js.map +1 -1
  6. package/dist/src/modal-manager-host-bridge.js +1 -1
  7. package/dist/src/modal-manager-host-bridge.js.map +1 -1
  8. package/dist/src/modal-template.js +26 -5
  9. package/dist/src/modal-template.js.map +1 -1
  10. package/dist/test/modal-config.test.js +4 -0
  11. package/dist/test/modal-config.test.js.map +1 -1
  12. package/dist/test/modal-manager.test.js +12 -0
  13. package/dist/test/modal-manager.test.js.map +1 -1
  14. package/package.json +3 -3
  15. package/src/modal-config.ts +9 -0
  16. package/src/modal-manager-host-bridge.ts +2 -2
  17. package/src/modal-template.ts +26 -5
  18. package/test/modal-config.test.ts +4 -0
  19. package/test/modal-manager.test.ts +14 -0
package/README.md CHANGED
@@ -90,11 +90,13 @@ Display completely custom content in the modal body, including light DOM content
90
90
  const customContent = html`
91
91
  Can contain any markup, including web components. Event listeners also work. Try clicking on the picture.
92
92
  <div style="text-align: center">
93
+ <div class="sr-only">Visible for screen-readers only</div>
93
94
  <a href="https://fillmurray.com" style="display: block">Fill Murray</a>
94
95
  <img src="100x100.jpg" @click=${showBillAlert} />
95
96
  </div>
96
97
  `;
97
98
 
99
+ // customContent used to render as slotted content, it can also use .sr-only class
98
100
  modalManager.showModal(config, customContent);
99
101
  </script>
100
102
  ```
@@ -107,7 +109,7 @@ All of the config options:
107
109
  const config = new ModalConfig();
108
110
  config.title = 'Internet Archive';
109
111
  config.subtitle = '';
110
- config.headline = 'Thanks for your Support!';
112
+ config.headline = '<div class="sr-only">Visible for screen-readers only</div>Thanks for your Support!';
111
113
  config.message = 'Thank you for supporting the Internet Archive!';
112
114
  config.headerColor = '#36A483';
113
115
  config.showProcessingIndicator = false;
package/demo/index.html CHANGED
@@ -21,6 +21,7 @@
21
21
 
22
22
  modal-manager {
23
23
  display: none;
24
+ --modalTitleLineHeight: 4.5rem;
24
25
  }
25
26
 
26
27
  modal-manager[mode='open'] {
@@ -73,6 +74,7 @@
73
74
  <button @click=${showModalUserCannotClose}>Unclosable Modal</button>
74
75
  <button @click=${showModalUserCannotClickBackdrop}>Unclickable Backdrop</button>
75
76
  <button @click=${showOverflowModal}>Text-heavy Modal</button>
77
+ <button @click=${showModalWithoutLogo}>Modal Without Logo</button>
76
78
  </div>
77
79
 
78
80
  <h3>Some Content</h3>
@@ -149,9 +151,11 @@
149
151
  function showCustomContentModal() {
150
152
  const config = new ModalConfig();
151
153
  config.title = 'Custom Content';
154
+ config.headline = html`<span class="sr-only">Also support screen-reader only</span>`;
152
155
 
153
156
  const someContent = html`
154
157
  Can contain any markup, including web components. Event listeners also work. Try clicking on the picture.
158
+ <span class="sr-only">Also support screen-reader only</span>
155
159
  <div style="text-align: center">
156
160
  <a href="https://fillmurray.com" style="display: block">Fill Murray</a>
157
161
  <img src="100x100.jpg" @click=${showBillAlert} />
@@ -198,6 +202,18 @@
198
202
  });
199
203
  }
200
204
 
205
+ function showModalWithoutLogo() {
206
+ const config = new ModalConfig();
207
+ config.headline = 'Success';
208
+ config.title = html`Donation Received`;
209
+ config.message = 'Thank you for your support!';
210
+ config.headerColor = '#194880';
211
+ config.showHeaderLogo = false;
212
+ modalManager.showModal({
213
+ config
214
+ });
215
+ }
216
+
201
217
  function showCompleteModal() {
202
218
  const config = new ModalConfig();
203
219
  config.showProcessingIndicator = true;
package/dist/src/modal-config.d.ts CHANGED
@@ -64,6 +64,12 @@ export declare class ModalConfig {
64
64
  * @memberof ModalConfig
65
65
  */
66
66
  showCloseButton: boolean;
67
+ /**
68
+ * Show the close button
69
+ *
70
+ * @memberof ModalConfig
71
+ */
72
+ showHeaderLogo: boolean;
67
73
  /**
68
74
  * Close the modal if the user taps on the background
69
75
  *
@@ -80,6 +86,7 @@ export declare class ModalConfig {
80
86
  showProcessingIndicator?: boolean;
81
87
  processingImageMode?: string;
82
88
  showCloseButton?: boolean;
89
+ showHeaderLogo?: boolean;
83
90
  closeOnBackdropClick?: boolean;
84
91
  });
85
92
  }
package/dist/src/modal-config.js CHANGED
@@ -6,7 +6,7 @@
6
6
  */
7
7
  export class ModalConfig {
8
8
  constructor(options) {
9
- var _a, _b, _c, _d, _e, _f;
9
+ var _a, _b, _c, _d, _e, _f, _g;
10
10
  this.title = options === null || options === void 0 ? void 0 : options.title;
11
11
  this.subtitle = options === null || options === void 0 ? void 0 : options.subtitle;
12
12
  this.headline = options === null || options === void 0 ? void 0 : options.headline;
@@ -16,7 +16,8 @@ export class ModalConfig {
16
16
  this.showProcessingIndicator = (_c = options === null || options === void 0 ? void 0 : options.showProcessingIndicator) !== null && _c !== void 0 ? _c : false;
17
17
  this.processingImageMode = (_d = options === null || options === void 0 ? void 0 : options.processingImageMode) !== null && _d !== void 0 ? _d : 'complete';
18
18
  this.showCloseButton = (_e = options === null || options === void 0 ? void 0 : options.showCloseButton) !== null && _e !== void 0 ? _e : true;
19
- this.closeOnBackdropClick = (_f = options === null || options === void 0 ? void 0 : options.closeOnBackdropClick) !== null && _f !== void 0 ? _f : true;
19
+ this.showHeaderLogo = (_f = options === null || options === void 0 ? void 0 : options.showHeaderLogo) !== null && _f !== void 0 ? _f : true;
20
+ this.closeOnBackdropClick = (_g = options === null || options === void 0 ? void 0 : options.closeOnBackdropClick) !== null && _g !== void 0 ? _g : true;
20
21
  }
21
22
  }
22
23
  //# sourceMappingURL=modal-config.js.map
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;IA2EtB,YAAY,OAWX;;QACC,IAAI,CAAC,KAAK,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC;QAC5B,IAAI,CAAC,QAAQ,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC;QAClC,IAAI,CAAC,QAAQ,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC;QAClC,IAAI,CAAC,OAAO,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC;QAEhC,IAAI,CAAC,WAAW,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,mCAAI,SAAS,CAAC;QACrD,IAAI,CAAC,SAAS,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,mCAAI,SAAS,CAAC;QACjD,IAAI,CAAC,uBAAuB,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uBAAuB,mCAAI,KAAK,CAAC;QACzE,IAAI,CAAC,mBAAmB,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,mCAAI,UAAU,CAAC;QACtE,IAAI,CAAC,eAAe,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,mCAAI,IAAI,CAAC;QACxD,IAAI,CAAC,oBAAoB,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,mCAAI,IAAI,CAAC;IACpE,CAAC;CACF","sourcesContent":["import { 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 | undefined)}\n * @memberof ModalConfig\n */\n title?: TemplateResult;\n\n /**\n * The subtitle shown in the header under the title\n *\n * @type {(TemplateResult | undefined)}\n * @memberof ModalConfig\n */\n subtitle?: TemplateResult;\n\n /**\n * The headline shown at the top of the content section\n *\n * @type {(TemplateResult | undefined)}\n * @memberof ModalConfig\n */\n headline?: TemplateResult;\n\n /**\n * The text shown below the headline in the content section\n *\n * @type {(TemplateResult | undefined)}\n * @memberof ModalConfig\n */\n message?: TemplateResult;\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, currently `processing` or `complete`\n *\n * @memberof ModalConfig\n */\n processingImageMode: string;\n\n /**\n * Show the close button\n *\n * @memberof ModalConfig\n */\n showCloseButton: 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;\n subtitle?: TemplateResult;\n headline?: TemplateResult;\n message?: TemplateResult;\n headerColor?: string;\n bodyColor?: string;\n showProcessingIndicator?: boolean;\n processingImageMode?: string;\n showCloseButton?: 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 ?? '#f5f5f7';\n this.showProcessingIndicator = options?.showProcessingIndicator ?? false;\n this.processingImageMode = options?.processingImageMode ?? 'complete';\n this.showCloseButton = options?.showCloseButton ?? 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;IAkFtB,YAAY,OAYX;;QACC,IAAI,CAAC,KAAK,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC;QAC5B,IAAI,CAAC,QAAQ,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC;QAClC,IAAI,CAAC,QAAQ,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC;QAClC,IAAI,CAAC,OAAO,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC;QAEhC,IAAI,CAAC,WAAW,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,mCAAI,SAAS,CAAC;QACrD,IAAI,CAAC,SAAS,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,mCAAI,SAAS,CAAC;QACjD,IAAI,CAAC,uBAAuB,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uBAAuB,mCAAI,KAAK,CAAC;QACzE,IAAI,CAAC,mBAAmB,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,mCAAI,UAAU,CAAC;QACtE,IAAI,CAAC,eAAe,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,mCAAI,IAAI,CAAC;QACxD,IAAI,CAAC,cAAc,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,mCAAI,IAAI,CAAC;QACtD,IAAI,CAAC,oBAAoB,SAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,oBAAoB,mCAAI,IAAI,CAAC;IACpE,CAAC;CACF","sourcesContent":["import { 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 | undefined)}\n * @memberof ModalConfig\n */\n title?: TemplateResult;\n\n /**\n * The subtitle shown in the header under the title\n *\n * @type {(TemplateResult | undefined)}\n * @memberof ModalConfig\n */\n subtitle?: TemplateResult;\n\n /**\n * The headline shown at the top of the content section\n *\n * @type {(TemplateResult | undefined)}\n * @memberof ModalConfig\n */\n headline?: TemplateResult;\n\n /**\n * The text shown below the headline in the content section\n *\n * @type {(TemplateResult | undefined)}\n * @memberof ModalConfig\n */\n message?: TemplateResult;\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, currently `processing` or `complete`\n *\n * @memberof ModalConfig\n */\n processingImageMode: string;\n\n /**\n * Show the close button\n *\n * @memberof ModalConfig\n */\n showCloseButton: boolean;\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;\n subtitle?: TemplateResult;\n headline?: TemplateResult;\n message?: TemplateResult;\n headerColor?: string;\n bodyColor?: string;\n showProcessingIndicator?: boolean;\n processingImageMode?: string;\n showCloseButton?: boolean;\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 ?? '#f5f5f7';\n this.showProcessingIndicator = options?.showProcessingIndicator ?? false;\n this.processingImageMode = options?.processingImageMode ?? 'complete';\n this.showCloseButton = options?.showCloseButton ?? true;\n this.showHeaderLogo = options?.showHeaderLogo ?? true;\n this.closeOnBackdropClick = options?.closeOnBackdropClick ?? true;\n }\n}\n"]}
package/dist/src/modal-manager-host-bridge.js CHANGED
@@ -16,7 +16,7 @@ import { ModalManagerMode } from './modal-manager-mode';
16
16
  */
17
17
  export class ModalManagerHostBridge {
18
18
  constructor(modalManager) {
19
- this.windowResizeThrottler = throttle(100, false, this.updateModalContainerHeight).bind(this);
19
+ this.windowResizeThrottler = throttle(100, this.updateModalContainerHeight).bind(this);
20
20
  this.modalManager = modalManager;
21
21
  }
22
22
  /**
package/dist/src/modal-manager-host-bridge.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"modal-manager-host-bridge.js","sourceRoot":"","sources":["../../src/modal-manager-host-bridge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,sBAAsB;IAGjC,YAAY,YAAmC;QAuBvC,0BAAqB,GAAyB,QAAQ,CAC5D,GAAG,EACH,KAAK,EACL,IAAI,CAAC,0BAA0B,CAChC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QA1BX,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IAED;;;;;OAKG;IACH,gBAAgB,CAAC,IAAsB;QACrC,QAAQ,IAAI,EAAE;YACZ,KAAK,gBAAgB,CAAC,IAAI;gBACxB,IAAI,CAAC,mBAAmB,EAAE,CAAC;gBAC3B,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC1B,MAAM;YACR,KAAK,gBAAgB,CAAC,MAAM;gBAC1B,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC1B,IAAI,CAAC,oBAAoB,EAAE,CAAC;gBAC5B,MAAM;SACT;IACH,CAAC;IAQD,yFAAyF;IACzF,mGAAmG;IACnG,mGAAmG;IACnG,kBAAkB;IAClB,0FAA0F;IAC1F,qFAAqF;IACrF,yCAAyC;IACjC,0BAA0B;QAChC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,WAAW,CACjC,mBAAmB,EACnB,GAAG,MAAM,CAAC,WAAW,IAAI,CAC1B,CAAC;IACJ,CAAC;IAEO,kBAAkB;QACxB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;IACpD,CAAC;IAEO,oBAAoB;QAC1B,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC;IACvD,CAAC;IAEO,mBAAmB;QACzB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAChE,CAAC;IAEO,kBAAkB;QACxB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;IACnE,CAAC;CACF","sourcesContent":["import { throttle } from 'throttle-debounce';\n\nimport { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';\nimport { ModalManagerInterface } from './modal-manager-interface';\nimport { ModalManagerMode } from './modal-manager-mode';\n\n/**\n * The `ModalManagerHostBridge` is a bridge between the `ModalManager` and the\n * host that sets up environment-specific changes when the modal opens and closes.\n *\n * For instance, when the modal opens, this adds a class to the `<body>` tag for styling\n * and adds a `resize` listener to fix a Safari shadow root issue.\n *\n * Consumers can create their own `ModalManagerHostBridgeInterface` classes and pass\n * them into the `ModalManager` if this one does not work for their environment.\n *\n * @export\n * @class ModalManagerHostBridge\n * @implements {ModalManagerHostBridgeInterface}\n */\nexport class ModalManagerHostBridge implements ModalManagerHostBridgeInterface {\n private modalManager: ModalManagerInterface;\n\n constructor(modalManager: ModalManagerInterface) {\n this.modalManager = modalManager;\n }\n\n /**\n * Handle the mode change\n *\n * @private\n * @memberof ModalManager\n */\n handleModeChange(mode: ModalManagerMode): void {\n switch (mode) {\n case ModalManagerMode.Open:\n this.startResizeListener();\n this.stopDocumentScroll();\n break;\n case ModalManagerMode.Closed:\n this.stopResizeListener();\n this.resumeDocumentScroll();\n break;\n }\n }\n\n private windowResizeThrottler: throttle<() => void> = throttle(\n 100,\n false,\n this.updateModalContainerHeight\n ).bind(this);\n\n // This is a workaround for Safari. Safari does not update shadowRoot elements calculated\n // based on the viewport size (ie. `calc(100vh - 10px)`). It does an initial calculation correctly,\n // but resizing the window does not cause the calculation to update. Firefox and Chrome both handle\n // this correctly.\n // It doesn't matter what css variable you set, it is just forcing Safari to do an update.\n // Also note that the value has to change on each update for Safari to do the update,\n // ie. you can't just set a static value.\n private updateModalContainerHeight(): void {\n this.modalManager.style.setProperty(\n '--containerHeight',\n `${window.innerHeight}px`\n );\n }\n\n private stopDocumentScroll(): void {\n document.body.classList.add('modal-manager-open');\n }\n\n private resumeDocumentScroll(): void {\n document.body.classList.remove('modal-manager-open');\n }\n\n private startResizeListener(): void {\n window.addEventListener('resize', this.windowResizeThrottler);\n }\n\n private stopResizeListener(): void {\n window.removeEventListener('resize', this.windowResizeThrottler);\n }\n}\n"]}
1
+ {"version":3,"file":"modal-manager-host-bridge.js","sourceRoot":"","sources":["../../src/modal-manager-host-bridge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,sBAAsB;IAGjC,YAAY,YAAmC;QAuBvC,0BAAqB,GAAyB,QAAQ,CAC5D,GAAG,EACH,IAAI,CAAC,0BAA0B,CAEhC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QA1BX,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IAED;;;;;OAKG;IACH,gBAAgB,CAAC,IAAsB;QACrC,QAAQ,IAAI,EAAE;YACZ,KAAK,gBAAgB,CAAC,IAAI;gBACxB,IAAI,CAAC,mBAAmB,EAAE,CAAC;gBAC3B,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC1B,MAAM;YACR,KAAK,gBAAgB,CAAC,MAAM;gBAC1B,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC1B,IAAI,CAAC,oBAAoB,EAAE,CAAC;gBAC5B,MAAM;SACT;IACH,CAAC;IAQD,yFAAyF;IACzF,mGAAmG;IACnG,mGAAmG;IACnG,kBAAkB;IAClB,0FAA0F;IAC1F,qFAAqF;IACrF,yCAAyC;IACjC,0BAA0B;QAChC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,WAAW,CACjC,mBAAmB,EACnB,GAAG,MAAM,CAAC,WAAW,IAAI,CAC1B,CAAC;IACJ,CAAC;IAEO,kBAAkB;QACxB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;IACpD,CAAC;IAEO,oBAAoB;QAC1B,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC;IACvD,CAAC;IAEO,mBAAmB;QACzB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAChE,CAAC;IAEO,kBAAkB;QACxB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;IACnE,CAAC;CACF","sourcesContent":["import { throttle } from 'throttle-debounce';\n\nimport { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';\nimport { ModalManagerInterface } from './modal-manager-interface';\nimport { ModalManagerMode } from './modal-manager-mode';\n\n/**\n * The `ModalManagerHostBridge` is a bridge between the `ModalManager` and the\n * host that sets up environment-specific changes when the modal opens and closes.\n *\n * For instance, when the modal opens, this adds a class to the `<body>` tag for styling\n * and adds a `resize` listener to fix a Safari shadow root issue.\n *\n * Consumers can create their own `ModalManagerHostBridgeInterface` classes and pass\n * them into the `ModalManager` if this one does not work for their environment.\n *\n * @export\n * @class ModalManagerHostBridge\n * @implements {ModalManagerHostBridgeInterface}\n */\nexport class ModalManagerHostBridge implements ModalManagerHostBridgeInterface {\n private modalManager: ModalManagerInterface;\n\n constructor(modalManager: ModalManagerInterface) {\n this.modalManager = modalManager;\n }\n\n /**\n * Handle the mode change\n *\n * @private\n * @memberof ModalManager\n */\n handleModeChange(mode: ModalManagerMode): void {\n switch (mode) {\n case ModalManagerMode.Open:\n this.startResizeListener();\n this.stopDocumentScroll();\n break;\n case ModalManagerMode.Closed:\n this.stopResizeListener();\n this.resumeDocumentScroll();\n break;\n }\n }\n\n private windowResizeThrottler: throttle<() => void> = throttle(\n 100,\n this.updateModalContainerHeight,\n // { noLeading: false, noTrailing: false }\n ).bind(this);\n\n // This is a workaround for Safari. Safari does not update shadowRoot elements calculated\n // based on the viewport size (ie. `calc(100vh - 10px)`). It does an initial calculation correctly,\n // but resizing the window does not cause the calculation to update. Firefox and Chrome both handle\n // this correctly.\n // It doesn't matter what css variable you set, it is just forcing Safari to do an update.\n // Also note that the value has to change on each update for Safari to do the update,\n // ie. you can't just set a static value.\n private updateModalContainerHeight(): void {\n this.modalManager.style.setProperty(\n '--containerHeight',\n `${window.innerHeight}px`\n );\n }\n\n private stopDocumentScroll(): void {\n document.body.classList.add('modal-manager-open');\n }\n\n private resumeDocumentScroll(): void {\n document.body.classList.remove('modal-manager-open');\n }\n\n private startResizeListener(): void {\n window.addEventListener('resize', this.windowResizeThrottler);\n }\n\n private stopResizeListener(): void {\n window.removeEventListener('resize', this.windowResizeThrottler);\n }\n}\n"]}
package/dist/src/modal-template.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __decorate } from "tslib";
2
- import { LitElement, html, css } 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/ia-activity-indicator';
5
5
  import closeIcon from '@internetarchive/icon-close';
@@ -23,9 +23,9 @@ let ModalTemplate = class ModalTemplate extends LitElement {
23
23
  <div class="modal-container">
24
24
  <header style="background-color: ${this.config.headerColor}">
25
25
  ${this.config.showCloseButton ? this.closeButtonTemplate : ''}
26
- <div class="logo-icon">
27
- ${iaLogo}
28
- </div>
26
+ ${this.config.showHeaderLogo
27
+ ? html `<div class="logo-icon">${iaLogo}</div>`
28
+ : nothing}
29
29
  ${this.config.title
30
30
  ? html `<h1 class="title">${this.config.title}</h1>`
31
31
  : ''}
@@ -47,7 +47,6 @@ let ModalTemplate = class ModalTemplate extends LitElement {
47
47
  .mode=${this.config.processingImageMode}
48
48
  ></ia-activity-indicator>
49
49
  </div>
50
-
51
50
  ${this.config.headline
52
51
  ? html ` <h1 class="headline">${this.config.headline}</h1> `
53
52
  : ''}
@@ -243,6 +242,28 @@ let ModalTemplate = class ModalTemplate extends LitElement {
243
242
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),
244
243
  0 4px 4px 0 rgba(0, 0, 0, 0.08);
245
244
  }
245
+
246
+ .sr-only {
247
+ position: absolute;
248
+ width: 1px;
249
+ height: 1px;
250
+ padding: 0;
251
+ margin: -1px;
252
+ overflow: hidden;
253
+ clip: rect(0, 0, 0, 0);
254
+ border: 0;
255
+ }
256
+
257
+ slot::slotted(.sr-only) {
258
+ position: absolute;
259
+ width: 1px;
260
+ height: 1px;
261
+ padding: 0;
262
+ margin: -1px;
263
+ overflow: hidden;
264
+ clip: rect(0, 0, 0, 0);
265
+ border: 0;
266
+ }
246
267
  `;
247
268
  }
248
269
  };
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 } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\n\nimport '@internetarchive/ia-activity-indicator/ia-activity-indicator';\nimport closeIcon from '@internetarchive/icon-close';\nimport iaLogo from '@internetarchive/icon-ia-logo';\n\nimport { ModalConfig } from './modal-config';\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.showCloseButton ? this.closeButtonTemplate : ''}\n <div class=\"logo-icon\">\n ${iaLogo}\n </div>\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\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(): void {\n const event = new Event('closeButtonPressed');\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 tabindex=\"0\"\n @click=${this.handleCloseButton}\n >\n ${closeIcon}\n </button>\n `;\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: #f5f5f7;\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 }\n}\n"]}
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/ia-activity-indicator';\nimport closeIcon from '@internetarchive/icon-close';\nimport iaLogo from '@internetarchive/icon-ia-logo';\n\nimport { ModalConfig } from './modal-config';\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.showCloseButton ? this.closeButtonTemplate : ''}\n ${this.config.showHeaderLogo\n ? html`<div class=\"logo-icon\">${iaLogo}</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(): void {\n const event = new Event('closeButtonPressed');\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 tabindex=\"0\"\n @click=${this.handleCloseButton}\n >\n ${closeIcon}\n </button>\n `;\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: #f5f5f7;\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 .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-config.test.js CHANGED
@@ -20,6 +20,7 @@ describe('Modal Config', () => {
20
20
  const showProcessingIndicator = true;
21
21
  const processingImageMode = 'processing';
22
22
  const showCloseButton = false;
23
+ const showHeaderLogo = false;
23
24
  const closeOnBackdropClick = false;
24
25
  const config = new ModalConfig({
25
26
  title: title,
@@ -30,6 +31,7 @@ describe('Modal Config', () => {
30
31
  showProcessingIndicator: showProcessingIndicator,
31
32
  processingImageMode: processingImageMode,
32
33
  showCloseButton: showCloseButton,
34
+ showHeaderLogo: showHeaderLogo,
33
35
  closeOnBackdropClick: closeOnBackdropClick,
34
36
  });
35
37
  expect(config.title).to.equal(title);
@@ -40,6 +42,7 @@ describe('Modal Config', () => {
40
42
  expect(config.showProcessingIndicator).to.equal(showProcessingIndicator);
41
43
  expect(config.processingImageMode).to.equal(processingImageMode);
42
44
  expect(config.showCloseButton).to.equal(showCloseButton);
45
+ expect(config.showHeaderLogo).to.equal(showHeaderLogo);
43
46
  expect(config.closeOnBackdropClick).to.equal(closeOnBackdropClick);
44
47
  }));
45
48
  it('instantiates properly with defaults', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -52,6 +55,7 @@ describe('Modal Config', () => {
52
55
  expect(config.showProcessingIndicator).to.equal(false);
53
56
  expect(config.processingImageMode).to.equal('complete');
54
57
  expect(config.showCloseButton).to.equal(true);
58
+ expect(config.showHeaderLogo).to.equal(true);
55
59
  expect(config.closeOnBackdropClick).to.equal(true);
56
60
  }));
57
61
  });
package/dist/test/modal-config.test.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"modal-config.test.js","sourceRoot":"","sources":["../../test/modal-config.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,8BAA8B,EAAE,GAAS,EAAE;QAC5C,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;QACjC,MAAM,KAAK,GAAG,IAAI,CAAA,KAAK,CAAC;QACxB,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,MAAM,CAAC,WAAW,GAAG,OAAO,CAAC;QAE7B,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACrC,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC/C,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,+CAA+C,EAAE,GAAS,EAAE;QAC7D,MAAM,KAAK,GAAG,IAAI,CAAA,KAAK,CAAC;QACxB,MAAM,QAAQ,GAAG,IAAI,CAAA,KAAK,CAAC;QAC3B,MAAM,QAAQ,GAAG,IAAI,CAAA,KAAK,CAAC;QAC3B,MAAM,OAAO,GAAG,IAAI,CAAA,MAAM,CAAC;QAE3B,MAAM,WAAW,GAAG,MAAM,CAAC;QAC3B,MAAM,uBAAuB,GAAG,IAAI,CAAC;QACrC,MAAM,mBAAmB,GAAG,YAAY,CAAC;QACzC,MAAM,eAAe,GAAG,KAAK,CAAC;QAC9B,MAAM,oBAAoB,GAAG,KAAK,CAAC;QAEnC,MAAM,MAAM,GAAG,IAAI,WAAW,CAAC;YAC7B,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,OAAO;YAChB,WAAW,EAAE,WAAW;YACxB,uBAAuB,EAAE,uBAAuB;YAChD,mBAAmB,EAAE,mBAAmB;YACxC,eAAe,EAAE,eAAe;YAChC,oBAAoB,EAAE,oBAAoB;SAC3C,CAAC,CAAC;QAEH,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACrC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAC3C,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAC3C,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAEzC,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACjD,MAAM,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAC;QACzE,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;QACjE,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;QACzD,MAAM,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC;IACrE,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,GAAS,EAAE;QACnD,MAAM,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;QACjC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACzC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAC5C,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAC5C,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAC3C,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAC/C,MAAM,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACvD,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QACxD,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAC9C,MAAM,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACrD,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect } from '@open-wc/testing';\nimport { html } from 'lit';\n\nimport { ModalConfig } from '../src/modal-config';\n\ndescribe('Modal Config', () => {\n it('can be instantiated properly', async () => {\n const config = new ModalConfig();\n const title = html`Foo`;\n config.title = title;\n config.headerColor = 'green';\n\n expect(config.title).to.equal(title);\n expect(config.headerColor).to.equal('green');\n });\n\n it('can be instantiated properly with constructor', async () => {\n const title = html`Foo`;\n const subtitle = html`Bar`;\n const headline = html`Baz`;\n const message = html`Boop`;\n\n const headerColor = 'blue';\n const showProcessingIndicator = true;\n const processingImageMode = 'processing';\n const showCloseButton = false;\n const closeOnBackdropClick = false;\n\n const config = new ModalConfig({\n title: title,\n subtitle: subtitle,\n headline: headline,\n message: message,\n headerColor: headerColor,\n showProcessingIndicator: showProcessingIndicator,\n processingImageMode: processingImageMode,\n showCloseButton: showCloseButton,\n closeOnBackdropClick: closeOnBackdropClick,\n });\n\n expect(config.title).to.equal(title);\n expect(config.subtitle).to.equal(subtitle);\n expect(config.headline).to.equal(headline);\n expect(config.message).to.equal(message);\n\n expect(config.headerColor).to.equal(headerColor);\n expect(config.showProcessingIndicator).to.equal(showProcessingIndicator);\n expect(config.processingImageMode).to.equal(processingImageMode);\n expect(config.showCloseButton).to.equal(showCloseButton);\n expect(config.closeOnBackdropClick).to.equal(closeOnBackdropClick);\n });\n\n it('instantiates properly with defaults', async () => {\n const config = new ModalConfig();\n expect(config.title).to.equal(undefined);\n expect(config.subtitle).to.equal(undefined);\n expect(config.headline).to.equal(undefined);\n expect(config.message).to.equal(undefined);\n expect(config.headerColor).to.equal('#55A183');\n expect(config.showProcessingIndicator).to.equal(false);\n expect(config.processingImageMode).to.equal('complete');\n expect(config.showCloseButton).to.equal(true);\n expect(config.closeOnBackdropClick).to.equal(true);\n });\n});\n"]}
1
+ {"version":3,"file":"modal-config.test.js","sourceRoot":"","sources":["../../test/modal-config.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect } from '@open-wc/testing';\nimport { html } from 'lit';\n\nimport { ModalConfig } from '../src/modal-config';\n\ndescribe('Modal Config', () => {\n it('can be instantiated properly', async () => {\n const config = new ModalConfig();\n const title = html`Foo`;\n config.title = title;\n config.headerColor = 'green';\n\n expect(config.title).to.equal(title);\n expect(config.headerColor).to.equal('green');\n });\n\n it('can be instantiated properly with constructor', async () => {\n const title = html`Foo`;\n const subtitle = html`Bar`;\n const headline = html`Baz`;\n const message = html`Boop`;\n\n const headerColor = 'blue';\n const showProcessingIndicator = true;\n const processingImageMode = 'processing';\n const showCloseButton = false;\n const showHeaderLogo = false;\n const closeOnBackdropClick = false;\n\n const config = new ModalConfig({\n title: title,\n subtitle: subtitle,\n headline: headline,\n message: message,\n headerColor: headerColor,\n showProcessingIndicator: showProcessingIndicator,\n processingImageMode: processingImageMode,\n showCloseButton: showCloseButton,\n showHeaderLogo: showHeaderLogo,\n closeOnBackdropClick: closeOnBackdropClick,\n });\n\n expect(config.title).to.equal(title);\n expect(config.subtitle).to.equal(subtitle);\n expect(config.headline).to.equal(headline);\n expect(config.message).to.equal(message);\n\n expect(config.headerColor).to.equal(headerColor);\n expect(config.showProcessingIndicator).to.equal(showProcessingIndicator);\n expect(config.processingImageMode).to.equal(processingImageMode);\n expect(config.showCloseButton).to.equal(showCloseButton);\n expect(config.showHeaderLogo).to.equal(showHeaderLogo);\n expect(config.closeOnBackdropClick).to.equal(closeOnBackdropClick);\n });\n\n it('instantiates properly with defaults', async () => {\n const config = new ModalConfig();\n expect(config.title).to.equal(undefined);\n expect(config.subtitle).to.equal(undefined);\n expect(config.headline).to.equal(undefined);\n expect(config.message).to.equal(undefined);\n expect(config.headerColor).to.equal('#55A183');\n expect(config.showProcessingIndicator).to.equal(false);\n expect(config.processingImageMode).to.equal('complete');\n expect(config.showCloseButton).to.equal(true);\n expect(config.showHeaderLogo).to.equal(true);\n expect(config.closeOnBackdropClick).to.equal(true);\n });\n});\n"]}
package/dist/test/modal-manager.test.js CHANGED
@@ -185,5 +185,17 @@ describe('Modal Manager', () => {
185
185
  yield elementUpdated(el);
186
186
  expect(el.getMode()).to.equal('open');
187
187
  }));
188
+ it('ia logo should not visible on modal', () => __awaiter(void 0, void 0, void 0, function* () {
189
+ var _j;
190
+ const el = (yield fixture(html `
191
+ <modal-manager></modal-manager>
192
+ `));
193
+ const config = new ModalConfig();
194
+ config.showHeaderLogo = false;
195
+ el.showModal({ config });
196
+ yield elementUpdated(el);
197
+ const logoIcon = (_j = el.shadowRoot) === null || _j === void 0 ? void 0 : _j.querySelector('.logo-icon');
198
+ expect(logoIcon).to.not.exist;
199
+ }));
188
200
  });
189
201
  //# sourceMappingURL=modal-manager.test.js.map
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 { fixture, expect, oneEvent, elementUpdated } from '@open-wc/testing';\nimport { 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\ndescribe('Modal Manager', () => {\n it('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 it('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.closeModal();\n await elementUpdated(el);\n\n expect(el.mode).to.equal('closed');\n });\n\n it('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 it('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 it('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 el.showModal({ config });\n await elementUpdated(el);\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 it('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 it('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 it('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 it('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 it('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 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(callbackCalled).to.equal(true);\n });\n\n it('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 it('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 it(\"dont'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"]}
1
+ {"version":3,"file":"modal-manager.test.js","sourceRoot":"","sources":["../../test/modal-manager.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, expect, oneEvent, elementUpdated } from '@open-wc/testing';\nimport { 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\ndescribe('Modal Manager', () => {\n it('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 it('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.closeModal();\n await elementUpdated(el);\n\n expect(el.mode).to.equal('closed');\n });\n\n it('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 it('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 it('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 el.showModal({ config });\n await elementUpdated(el);\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 it('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 it('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 it('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 it('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 it('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 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(callbackCalled).to.equal(true);\n });\n\n it('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 it('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 it(\"dont'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 it('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"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetarchive/modal-manager",
3
- "version": "0.2.4",
3
+ "version": "0.2.7",
4
4
  "description": "A Modal Manager Web Component",
5
5
  "repository": {
6
6
  "type": "git",
@@ -32,7 +32,7 @@
32
32
  "@internetarchive/icon-ia-logo": "^1.3.2",
33
33
  "@internetarchive/icon-user": "^1.3.2",
34
34
  "lit": "^2.2.2",
35
- "throttle-debounce": "^2.2.1"
35
+ "throttle-debounce": "^5.0.0"
36
36
  },
37
37
  "devDependencies": {
38
38
  "@open-wc/eslint-config": "^2.0.0",
@@ -40,7 +40,7 @@
40
40
  "@open-wc/testing-karma": "^3.0.0",
41
41
  "@types/mocha": "^9.0.0",
42
42
  "@types/node": "13.11.1",
43
- "@types/throttle-debounce": "^2.1.0",
43
+ "@types/throttle-debounce": "^5.0.0",
44
44
  "@typescript-eslint/eslint-plugin": "^2.20.0",
45
45
  "@typescript-eslint/parser": "^2.20.0",
46
46
  "concurrently": "^5.1.0",
package/src/modal-config.ts CHANGED
@@ -74,6 +74,13 @@ export class ModalConfig {
74
74
  */
75
75
  showCloseButton: boolean;
76
76
 
77
+ /**
78
+ * Show the close button
79
+ *
80
+ * @memberof ModalConfig
81
+ */
82
+ showHeaderLogo: boolean;
83
+
77
84
  /**
78
85
  * Close the modal if the user taps on the background
79
86
  *
@@ -91,6 +98,7 @@ export class ModalConfig {
91
98
  showProcessingIndicator?: boolean;
92
99
  processingImageMode?: string;
93
100
  showCloseButton?: boolean;
101
+ showHeaderLogo?: boolean;
94
102
  closeOnBackdropClick?: boolean;
95
103
  }) {
96
104
  this.title = options?.title;
@@ -103,6 +111,7 @@ export class ModalConfig {
103
111
  this.showProcessingIndicator = options?.showProcessingIndicator ?? false;
104
112
  this.processingImageMode = options?.processingImageMode ?? 'complete';
105
113
  this.showCloseButton = options?.showCloseButton ?? true;
114
+ this.showHeaderLogo = options?.showHeaderLogo ?? true;
106
115
  this.closeOnBackdropClick = options?.closeOnBackdropClick ?? true;
107
116
  }
108
117
  }
package/src/modal-manager-host-bridge.ts CHANGED
@@ -46,8 +46,8 @@ export class ModalManagerHostBridge implements ModalManagerHostBridgeInterface {
46
46
 
47
47
  private windowResizeThrottler: throttle<() => void> = throttle(
48
48
  100,
49
- false,
50
- this.updateModalContainerHeight
49
+ this.updateModalContainerHeight,
50
+ // { noLeading: false, noTrailing: false }
51
51
  ).bind(this);
52
52
 
53
53
  // This is a workaround for Safari. Safari does not update shadowRoot elements calculated
package/src/modal-template.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { LitElement, html, css, CSSResult, TemplateResult } from 'lit';
1
+ import { LitElement, html, css, CSSResult, TemplateResult, nothing } from 'lit';
2
2
  import { property, customElement } from 'lit/decorators.js';
3
3
 
4
4
  import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
@@ -24,9 +24,9 @@ export class ModalTemplate extends LitElement {
24
24
  <div class="modal-container">
25
25
  <header style="background-color: ${this.config.headerColor}">
26
26
  ${this.config.showCloseButton ? this.closeButtonTemplate : ''}
27
- <div class="logo-icon">
28
- ${iaLogo}
29
- </div>
27
+ ${this.config.showHeaderLogo
28
+ ? html`<div class="logo-icon">${iaLogo}</div>`
29
+ : nothing}
30
30
  ${this.config.title
31
31
  ? html`<h1 class="title">${this.config.title}</h1>`
32
32
  : ''}
@@ -48,7 +48,6 @@ export class ModalTemplate extends LitElement {
48
48
  .mode=${this.config.processingImageMode}
49
49
  ></ia-activity-indicator>
50
50
  </div>
51
-
52
51
  ${this.config.headline
53
52
  ? html` <h1 class="headline">${this.config.headline}</h1> `
54
53
  : ''}
@@ -253,6 +252,28 @@ export class ModalTemplate extends LitElement {
253
252
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),
254
253
  0 4px 4px 0 rgba(0, 0, 0, 0.08);
255
254
  }
255
+
256
+ .sr-only {
257
+ position: absolute;
258
+ width: 1px;
259
+ height: 1px;
260
+ padding: 0;
261
+ margin: -1px;
262
+ overflow: hidden;
263
+ clip: rect(0, 0, 0, 0);
264
+ border: 0;
265
+ }
266
+
267
+ slot::slotted(.sr-only) {
268
+ position: absolute;
269
+ width: 1px;
270
+ height: 1px;
271
+ padding: 0;
272
+ margin: -1px;
273
+ overflow: hidden;
274
+ clip: rect(0, 0, 0, 0);
275
+ border: 0;
276
+ }
256
277
  `;
257
278
  }
258
279
  }
package/test/modal-config.test.ts CHANGED
@@ -24,6 +24,7 @@ describe('Modal Config', () => {
24
24
  const showProcessingIndicator = true;
25
25
  const processingImageMode = 'processing';
26
26
  const showCloseButton = false;
27
+ const showHeaderLogo = false;
27
28
  const closeOnBackdropClick = false;
28
29
 
29
30
  const config = new ModalConfig({
@@ -35,6 +36,7 @@ describe('Modal Config', () => {
35
36
  showProcessingIndicator: showProcessingIndicator,
36
37
  processingImageMode: processingImageMode,
37
38
  showCloseButton: showCloseButton,
39
+ showHeaderLogo: showHeaderLogo,
38
40
  closeOnBackdropClick: closeOnBackdropClick,
39
41
  });
40
42
 
@@ -47,6 +49,7 @@ describe('Modal Config', () => {
47
49
  expect(config.showProcessingIndicator).to.equal(showProcessingIndicator);
48
50
  expect(config.processingImageMode).to.equal(processingImageMode);
49
51
  expect(config.showCloseButton).to.equal(showCloseButton);
52
+ expect(config.showHeaderLogo).to.equal(showHeaderLogo);
50
53
  expect(config.closeOnBackdropClick).to.equal(closeOnBackdropClick);
51
54
  });
52
55
 
@@ -60,6 +63,7 @@ describe('Modal Config', () => {
60
63
  expect(config.showProcessingIndicator).to.equal(false);
61
64
  expect(config.processingImageMode).to.equal('complete');
62
65
  expect(config.showCloseButton).to.equal(true);
66
+ expect(config.showHeaderLogo).to.equal(true);
63
67
  expect(config.closeOnBackdropClick).to.equal(true);
64
68
  });
65
69
  });
package/test/modal-manager.test.ts CHANGED
@@ -228,4 +228,18 @@ describe('Modal Manager', () => {
228
228
 
229
229
  expect(el.getMode()).to.equal('open');
230
230
  });
231
+
232
+ it('ia logo should not visible on modal', async () => {
233
+ const el = (await fixture(html`
234
+ <modal-manager></modal-manager>
235
+ `)) as ModalManagerInterface;
236
+
237
+ const config = new ModalConfig();
238
+ config.showHeaderLogo = false;
239
+ el.showModal({ config });
240
+ await elementUpdated(el);
241
+
242
+ const logoIcon = el.shadowRoot?.querySelector('.logo-icon');
243
+ expect(logoIcon).to.not.exist;
244
+ });
231
245
  });