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

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 (103) hide show
  1. package/.editorconfig +29 -29
  2. package/.eslintrc.js +14 -14
  3. package/.github/workflows/ci.yml +30 -30
  4. package/.github/workflows/gh-pages-main.yml +42 -42
  5. package/.github/workflows/pr-preview.yml +40 -40
  6. package/LICENSE +661 -661
  7. package/README.md +139 -139
  8. package/custom-elements.json +170 -170
  9. package/dist/index.d.ts +7 -7
  10. package/dist/index.js +5 -5
  11. package/dist/index.js.map +1 -1
  12. package/dist/src/assets/arrow-left-icon.d.ts +2 -2
  13. package/dist/src/assets/arrow-left-icon.js +14 -14
  14. package/dist/src/assets/arrow-left-icon.js.map +1 -1
  15. package/dist/src/assets/ia-logo-icon.d.ts +2 -2
  16. package/dist/src/assets/ia-logo-icon.js +29 -29
  17. package/dist/src/assets/ia-logo-icon.js.map +1 -1
  18. package/dist/src/modal-config.d.ts +104 -104
  19. package/dist/src/modal-config.js +24 -24
  20. package/dist/src/modal-config.js.map +1 -1
  21. package/dist/src/modal-manager-host-bridge-interface.d.ts +12 -12
  22. package/dist/src/modal-manager-host-bridge-interface.js +1 -1
  23. package/dist/src/modal-manager-host-bridge-interface.js.map +1 -1
  24. package/dist/src/modal-manager-host-bridge.d.ts +34 -34
  25. package/dist/src/modal-manager-host-bridge.js +62 -62
  26. package/dist/src/modal-manager-host-bridge.js.map +1 -1
  27. package/dist/src/modal-manager-interface.d.ts +27 -27
  28. package/dist/src/modal-manager-interface.js +1 -1
  29. package/dist/src/modal-manager-interface.js.map +1 -1
  30. package/dist/src/modal-manager-mode.d.ts +10 -10
  31. package/dist/src/modal-manager-mode.js +11 -11
  32. package/dist/src/modal-manager-mode.js.map +1 -1
  33. package/dist/src/modal-manager.d.ts +137 -127
  34. package/dist/src/modal-manager.js +247 -234
  35. package/dist/src/modal-manager.js.map +1 -1
  36. package/dist/src/modal-template.d.ts +41 -41
  37. package/dist/src/modal-template.js +335 -335
  38. package/dist/src/modal-template.js.map +1 -1
  39. package/dist/src/shoelace/active-elements.d.ts +15 -15
  40. package/dist/src/shoelace/active-elements.js +27 -27
  41. package/dist/src/shoelace/active-elements.js.map +1 -1
  42. package/dist/src/shoelace/modal.d.ts +24 -24
  43. package/dist/src/shoelace/modal.js +131 -131
  44. package/dist/src/shoelace/modal.js.map +1 -1
  45. package/dist/src/shoelace/tabbable.d.ts +9 -9
  46. package/dist/src/shoelace/tabbable.js +169 -169
  47. package/dist/src/shoelace/tabbable.js.map +1 -1
  48. package/dist/test/modal-config.test.d.ts +1 -1
  49. package/dist/test/modal-config.test.js +69 -69
  50. package/dist/test/modal-config.test.js.map +1 -1
  51. package/dist/test/modal-manager.test.d.ts +1 -1
  52. package/dist/test/modal-manager.test.js +274 -274
  53. package/dist/test/modal-manager.test.js.map +1 -1
  54. package/dist/test/modal-template.test.d.ts +1 -1
  55. package/dist/test/modal-template.test.js +178 -178
  56. package/dist/test/modal-template.test.js.map +1 -1
  57. package/dist/vite.config.d.ts +2 -2
  58. package/dist/vite.config.js +22 -22
  59. package/dist/vite.config.js.map +1 -1
  60. package/docs/assets/css/main.css +2678 -2678
  61. package/docs/classes/_src_modal_config_.modalconfig.html +429 -429
  62. package/docs/classes/_src_modal_manager_.modalmanager.html +7702 -7702
  63. package/docs/classes/_src_modal_manager_host_bridge_.modalmanagerhostbridge.html +409 -409
  64. package/docs/classes/_src_modal_template_.modaltemplate.html +7096 -7096
  65. package/docs/enums/_src_modal_manager_mode_.modalmanagermode.html +196 -196
  66. package/docs/globals.html +150 -150
  67. package/docs/index.html +252 -252
  68. package/docs/interfaces/_src_modal_manager_host_bridge_interface_.modalmanagerhostbridgeinterface.html +210 -210
  69. package/docs/interfaces/_src_modal_manager_interface_.modalmanagerinterface.html +7095 -7095
  70. package/docs/modules/_index_.html +208 -208
  71. package/docs/modules/_src_modal_config_.html +146 -146
  72. package/docs/modules/_src_modal_manager_.html +146 -146
  73. package/docs/modules/_src_modal_manager_host_bridge_.html +146 -146
  74. package/docs/modules/_src_modal_manager_host_bridge_interface_.html +146 -146
  75. package/docs/modules/_src_modal_manager_interface_.html +146 -146
  76. package/docs/modules/_src_modal_manager_mode_.html +146 -146
  77. package/docs/modules/_src_modal_template_.html +146 -146
  78. package/docs/modules/_test_modal_config_test_.html +106 -106
  79. package/docs/modules/_test_modal_manager_test_.html +106 -106
  80. package/docs/modules/_test_modal_template_test_.html +106 -106
  81. package/index.html +300 -300
  82. package/index.ts +7 -7
  83. package/karma.conf.js +24 -24
  84. package/package.json +85 -85
  85. package/renovate.json +7 -7
  86. package/src/assets/arrow-left-icon.ts +15 -15
  87. package/src/assets/ia-logo-icon.ts +30 -30
  88. package/src/modal-config.ts +133 -133
  89. package/src/modal-manager-host-bridge-interface.ts +13 -13
  90. package/src/modal-manager-host-bridge.ts +82 -82
  91. package/src/modal-manager-interface.ts +30 -30
  92. package/src/modal-manager-mode.ts +10 -10
  93. package/src/modal-manager.ts +303 -283
  94. package/src/modal-template.ts +343 -343
  95. package/src/shoelace/LICENSE.md +6 -6
  96. package/src/shoelace/active-elements.ts +33 -33
  97. package/src/shoelace/modal.ts +166 -166
  98. package/src/shoelace/tabbable.ts +223 -223
  99. package/test/modal-config.test.ts +77 -77
  100. package/test/modal-manager.test.ts +347 -347
  101. package/test/modal-template.test.ts +206 -206
  102. package/tsconfig.json +21 -21
  103. package/vite.config.ts +23 -23
package/dist/src/modal-manager-host-bridge.js CHANGED
@@ -1,63 +1,63 @@
1
- import { throttle } from 'throttle-debounce';
2
- import { ModalManagerMode } from './modal-manager-mode';
3
- /**
4
- * The `ModalManagerHostBridge` is a bridge between the `ModalManager` and the
5
- * host that sets up environment-specific changes when the modal opens and closes.
6
- *
7
- * For instance, when the modal opens, this adds a class to the `<body>` tag for styling
8
- * and adds a `resize` listener to fix a Safari shadow root issue.
9
- *
10
- * Consumers can create their own `ModalManagerHostBridgeInterface` classes and pass
11
- * them into the `ModalManager` if this one does not work for their environment.
12
- *
13
- * @export
14
- * @class ModalManagerHostBridge
15
- * @implements {ModalManagerHostBridgeInterface}
16
- */
17
- export class ModalManagerHostBridge {
18
- constructor(modalManager) {
19
- this.windowResizeThrottler = throttle(100, this.updateModalContainerHeight, { noLeading: false, noTrailing: false }).bind(this);
20
- this.modalManager = modalManager;
21
- }
22
- /**
23
- * Handle the mode change
24
- *
25
- * @private
26
- * @memberof ModalManager
27
- */
28
- handleModeChange(mode) {
29
- switch (mode) {
30
- case ModalManagerMode.Open:
31
- this.startResizeListener();
32
- this.stopDocumentScroll();
33
- break;
34
- case ModalManagerMode.Closed:
35
- this.stopResizeListener();
36
- this.resumeDocumentScroll();
37
- break;
38
- }
39
- }
40
- // This is a workaround for Safari. Safari does not update shadowRoot elements calculated
41
- // based on the viewport size (ie. `calc(100vh - 10px)`). It does an initial calculation correctly,
42
- // but resizing the window does not cause the calculation to update. Firefox and Chrome both handle
43
- // this correctly.
44
- // It doesn't matter what css variable you set, it is just forcing Safari to do an update.
45
- // Also note that the value has to change on each update for Safari to do the update,
46
- // ie. you can't just set a static value.
47
- updateModalContainerHeight() {
48
- this.modalManager.style.setProperty('--containerHeight', `${window.innerHeight}px`);
49
- }
50
- stopDocumentScroll() {
51
- document.body.classList.add('modal-manager-open');
52
- }
53
- resumeDocumentScroll() {
54
- document.body.classList.remove('modal-manager-open');
55
- }
56
- startResizeListener() {
57
- window.addEventListener('resize', this.windowResizeThrottler);
58
- }
59
- stopResizeListener() {
60
- window.removeEventListener('resize', this.windowResizeThrottler);
61
- }
62
- }
1
+ import { throttle } from 'throttle-debounce';
2
+ import { ModalManagerMode } from './modal-manager-mode';
3
+ /**
4
+ * The `ModalManagerHostBridge` is a bridge between the `ModalManager` and the
5
+ * host that sets up environment-specific changes when the modal opens and closes.
6
+ *
7
+ * For instance, when the modal opens, this adds a class to the `<body>` tag for styling
8
+ * and adds a `resize` listener to fix a Safari shadow root issue.
9
+ *
10
+ * Consumers can create their own `ModalManagerHostBridgeInterface` classes and pass
11
+ * them into the `ModalManager` if this one does not work for their environment.
12
+ *
13
+ * @export
14
+ * @class ModalManagerHostBridge
15
+ * @implements {ModalManagerHostBridgeInterface}
16
+ */
17
+ export class ModalManagerHostBridge {
18
+ constructor(modalManager) {
19
+ this.windowResizeThrottler = throttle(100, this.updateModalContainerHeight, { noLeading: false, noTrailing: false }).bind(this);
20
+ this.modalManager = modalManager;
21
+ }
22
+ /**
23
+ * Handle the mode change
24
+ *
25
+ * @private
26
+ * @memberof ModalManager
27
+ */
28
+ handleModeChange(mode) {
29
+ switch (mode) {
30
+ case ModalManagerMode.Open:
31
+ this.startResizeListener();
32
+ this.stopDocumentScroll();
33
+ break;
34
+ case ModalManagerMode.Closed:
35
+ this.stopResizeListener();
36
+ this.resumeDocumentScroll();
37
+ break;
38
+ }
39
+ }
40
+ // This is a workaround for Safari. Safari does not update shadowRoot elements calculated
41
+ // based on the viewport size (ie. `calc(100vh - 10px)`). It does an initial calculation correctly,
42
+ // but resizing the window does not cause the calculation to update. Firefox and Chrome both handle
43
+ // this correctly.
44
+ // It doesn't matter what css variable you set, it is just forcing Safari to do an update.
45
+ // Also note that the value has to change on each update for Safari to do the update,
46
+ // ie. you can't just set a static value.
47
+ updateModalContainerHeight() {
48
+ this.modalManager.style.setProperty('--containerHeight', `${window.innerHeight}px`);
49
+ }
50
+ stopDocumentScroll() {
51
+ document.body.classList.add('modal-manager-open');
52
+ }
53
+ resumeDocumentScroll() {
54
+ document.body.classList.remove('modal-manager-open');
55
+ }
56
+ startResizeListener() {
57
+ window.addEventListener('resize', this.windowResizeThrottler);
58
+ }
59
+ stopResizeListener() {
60
+ window.removeEventListener('resize', this.windowResizeThrottler);
61
+ }
62
+ }
63
63
  //# sourceMappingURL=modal-manager-host-bridge.js.map
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,IAAI,CAAC,0BAA0B,EAC/B,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,CACxC,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"]}
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,EAC/B,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,CACxC,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';\r\n\r\nimport { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';\r\nimport { ModalManagerInterface } from './modal-manager-interface';\r\nimport { ModalManagerMode } from './modal-manager-mode';\r\n\r\n/**\r\n * The `ModalManagerHostBridge` is a bridge between the `ModalManager` and the\r\n * host that sets up environment-specific changes when the modal opens and closes.\r\n *\r\n * For instance, when the modal opens, this adds a class to the `<body>` tag for styling\r\n * and adds a `resize` listener to fix a Safari shadow root issue.\r\n *\r\n * Consumers can create their own `ModalManagerHostBridgeInterface` classes and pass\r\n * them into the `ModalManager` if this one does not work for their environment.\r\n *\r\n * @export\r\n * @class ModalManagerHostBridge\r\n * @implements {ModalManagerHostBridgeInterface}\r\n */\r\nexport class ModalManagerHostBridge implements ModalManagerHostBridgeInterface {\r\n private modalManager: ModalManagerInterface;\r\n\r\n constructor(modalManager: ModalManagerInterface) {\r\n this.modalManager = modalManager;\r\n }\r\n\r\n /**\r\n * Handle the mode change\r\n *\r\n * @private\r\n * @memberof ModalManager\r\n */\r\n handleModeChange(mode: ModalManagerMode): void {\r\n switch (mode) {\r\n case ModalManagerMode.Open:\r\n this.startResizeListener();\r\n this.stopDocumentScroll();\r\n break;\r\n case ModalManagerMode.Closed:\r\n this.stopResizeListener();\r\n this.resumeDocumentScroll();\r\n break;\r\n }\r\n }\r\n\r\n private windowResizeThrottler: throttle<() => void> = throttle(\r\n 100,\r\n this.updateModalContainerHeight,\r\n { noLeading: false, noTrailing: false }\r\n ).bind(this);\r\n\r\n // This is a workaround for Safari. Safari does not update shadowRoot elements calculated\r\n // based on the viewport size (ie. `calc(100vh - 10px)`). It does an initial calculation correctly,\r\n // but resizing the window does not cause the calculation to update. Firefox and Chrome both handle\r\n // this correctly.\r\n // It doesn't matter what css variable you set, it is just forcing Safari to do an update.\r\n // Also note that the value has to change on each update for Safari to do the update,\r\n // ie. you can't just set a static value.\r\n private updateModalContainerHeight(): void {\r\n this.modalManager.style.setProperty(\r\n '--containerHeight',\r\n `${window.innerHeight}px`\r\n );\r\n }\r\n\r\n private stopDocumentScroll(): void {\r\n document.body.classList.add('modal-manager-open');\r\n }\r\n\r\n private resumeDocumentScroll(): void {\r\n document.body.classList.remove('modal-manager-open');\r\n }\r\n\r\n private startResizeListener(): void {\r\n window.addEventListener('resize', this.windowResizeThrottler);\r\n }\r\n\r\n private stopResizeListener(): void {\r\n window.removeEventListener('resize', this.windowResizeThrottler);\r\n }\r\n}\r\n"]}
package/dist/src/modal-manager-interface.d.ts CHANGED
@@ -1,27 +1,27 @@
1
- import { LitElement, TemplateResult } from 'lit';
2
- import { ModalConfig } from './modal-config';
3
- import { ModalManagerMode } from './modal-manager-mode';
4
- export interface ModalManagerInterface extends LitElement {
5
- /**
6
- * Get the current modal mode.
7
- */
8
- getMode(): ModalManagerMode;
9
- /**
10
- * Show a modal from a given ModalConfig
11
- *
12
- * @param config ModalConfig
13
- * @param customModalContent TemplateResult | undefined
14
- * @param userClosedModalCallback () => void | undefined an optional callback when the modal is closed
15
- * @param userPressedLeftNavButtonCallback () => void | undefined an optional callback when the left nav button is pressed
16
- */
17
- showModal(options: {
18
- config: ModalConfig;
19
- customModalContent?: TemplateResult;
20
- userClosedModalCallback?: () => void;
21
- userPressedLeftNavButtonCallback?: () => void;
22
- }): Promise<void>;
23
- /**
24
- * Close the currently open modal
25
- */
26
- closeModal(): void;
27
- }
1
+ import { LitElement, TemplateResult } from 'lit';
2
+ import { ModalConfig } from './modal-config';
3
+ import { ModalManagerMode } from './modal-manager-mode';
4
+ export interface ModalManagerInterface extends LitElement {
5
+ /**
6
+ * Get the current modal mode.
7
+ */
8
+ getMode(): ModalManagerMode;
9
+ /**
10
+ * Show a modal from a given ModalConfig
11
+ *
12
+ * @param config ModalConfig
13
+ * @param customModalContent TemplateResult | undefined
14
+ * @param userClosedModalCallback () => void | undefined an optional callback when the modal is closed
15
+ * @param userPressedLeftNavButtonCallback () => void | undefined an optional callback when the left nav button is pressed
16
+ */
17
+ showModal(options: {
18
+ config: ModalConfig;
19
+ customModalContent?: TemplateResult;
20
+ userClosedModalCallback?: () => void;
21
+ userPressedLeftNavButtonCallback?: () => void;
22
+ }): Promise<void>;
23
+ /**
24
+ * Close the currently open modal
25
+ */
26
+ closeModal(): void;
27
+ }
package/dist/src/modal-manager-interface.js CHANGED
@@ -1,2 +1,2 @@
1
- export {};
1
+ export {};
2
2
  //# sourceMappingURL=modal-manager-interface.js.map
package/dist/src/modal-manager-interface.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"modal-manager-interface.js","sourceRoot":"","sources":["../../src/modal-manager-interface.ts"],"names":[],"mappings":"","sourcesContent":["import { LitElement, TemplateResult } from 'lit';\nimport { ModalConfig } from './modal-config';\nimport { ModalManagerMode } from './modal-manager-mode';\n\nexport interface ModalManagerInterface extends LitElement {\n /**\n * Get the current modal mode.\n */\n getMode(): ModalManagerMode;\n\n /**\n * Show a modal from a given ModalConfig\n *\n * @param config ModalConfig\n * @param customModalContent TemplateResult | undefined\n * @param userClosedModalCallback () => void | undefined an optional callback when the modal is closed\n * @param userPressedLeftNavButtonCallback () => void | undefined an optional callback when the left nav button is pressed\n */\n showModal(options: {\n config: ModalConfig;\n customModalContent?: TemplateResult;\n userClosedModalCallback?: () => void;\n userPressedLeftNavButtonCallback?: () => void;\n }): Promise<void>;\n\n /**\n * Close the currently open modal\n */\n closeModal(): void;\n}\n"]}
1
+ {"version":3,"file":"modal-manager-interface.js","sourceRoot":"","sources":["../../src/modal-manager-interface.ts"],"names":[],"mappings":"","sourcesContent":["import { LitElement, TemplateResult } from 'lit';\r\nimport { ModalConfig } from './modal-config';\r\nimport { ModalManagerMode } from './modal-manager-mode';\r\n\r\nexport interface ModalManagerInterface extends LitElement {\r\n /**\r\n * Get the current modal mode.\r\n */\r\n getMode(): ModalManagerMode;\r\n\r\n /**\r\n * Show a modal from a given ModalConfig\r\n *\r\n * @param config ModalConfig\r\n * @param customModalContent TemplateResult | undefined\r\n * @param userClosedModalCallback () => void | undefined an optional callback when the modal is closed\r\n * @param userPressedLeftNavButtonCallback () => void | undefined an optional callback when the left nav button is pressed\r\n */\r\n showModal(options: {\r\n config: ModalConfig;\r\n customModalContent?: TemplateResult;\r\n userClosedModalCallback?: () => void;\r\n userPressedLeftNavButtonCallback?: () => void;\r\n }): Promise<void>;\r\n\r\n /**\r\n * Close the currently open modal\r\n */\r\n closeModal(): void;\r\n}\r\n"]}
package/dist/src/modal-manager-mode.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- /**
2
- * Various modes the modal can be in
3
- *
4
- * @export
5
- * @enum {number}
6
- */
7
- export declare enum ModalManagerMode {
8
- Open = "open",
9
- Closed = "closed"
10
- }
1
+ /**
2
+ * Various modes the modal can be in
3
+ *
4
+ * @export
5
+ * @enum {number}
6
+ */
7
+ export declare enum ModalManagerMode {
8
+ Open = "open",
9
+ Closed = "closed"
10
+ }
package/dist/src/modal-manager-mode.js CHANGED
@@ -1,12 +1,12 @@
1
- /**
2
- * Various modes the modal can be in
3
- *
4
- * @export
5
- * @enum {number}
6
- */
7
- export var ModalManagerMode;
8
- (function (ModalManagerMode) {
9
- ModalManagerMode["Open"] = "open";
10
- ModalManagerMode["Closed"] = "closed";
11
- })(ModalManagerMode || (ModalManagerMode = {}));
1
+ /**
2
+ * Various modes the modal can be in
3
+ *
4
+ * @export
5
+ * @enum {number}
6
+ */
7
+ export var ModalManagerMode;
8
+ (function (ModalManagerMode) {
9
+ ModalManagerMode["Open"] = "open";
10
+ ModalManagerMode["Closed"] = "closed";
11
+ })(ModalManagerMode || (ModalManagerMode = {}));
12
12
  //# sourceMappingURL=modal-manager-mode.js.map
package/dist/src/modal-manager-mode.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"modal-manager-mode.js","sourceRoot":"","sources":["../../src/modal-manager-mode.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAN,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IAC1B,iCAAa,CAAA;IACb,qCAAiB,CAAA;AACnB,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B","sourcesContent":["/**\n * Various modes the modal can be in\n *\n * @export\n * @enum {number}\n */\nexport enum ModalManagerMode {\n Open = 'open',\n Closed = 'closed',\n}\n"]}
1
+ {"version":3,"file":"modal-manager-mode.js","sourceRoot":"","sources":["../../src/modal-manager-mode.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAN,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IAC1B,iCAAa,CAAA;IACb,qCAAiB,CAAA;AACnB,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B","sourcesContent":["/**\r\n * Various modes the modal can be in\r\n *\r\n * @export\r\n * @enum {number}\r\n */\r\nexport enum ModalManagerMode {\r\n Open = 'open',\r\n Closed = 'closed',\r\n}\r\n"]}
package/dist/src/modal-manager.d.ts CHANGED
@@ -1,127 +1,137 @@
1
- import { LitElement, CSSResult, TemplateResult, PropertyValues } from 'lit';
2
- import Modal from './shoelace/modal';
3
- import './modal-template';
4
- import { ModalConfig } from './modal-config';
5
- import { ModalManagerInterface } from './modal-manager-interface';
6
- import { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';
7
- import { ModalManagerMode } from './modal-manager-mode';
8
- export declare class ModalManager extends LitElement implements ModalManagerInterface {
9
- /**
10
- * The current mode of the ModalManager
11
- *
12
- * Current options are `modal` or `closed`
13
- *
14
- * @type {ModalManagerMode}
15
- * @memberof ModalManager
16
- */
17
- mode: ModalManagerMode;
18
- /**
19
- * Custom content to display in the modal's content slot
20
- *
21
- * @type {(TemplateResult | undefined)}
22
- * @memberof ModalManager
23
- */
24
- customModalContent?: TemplateResult;
25
- /**
26
- * This hostBridge handles environmental-specific interactions such as adding classes
27
- * to the body tag or event listeners needed to support the modal manager in the host environment.
28
- *
29
- * There is a default `ModalManagerHostBridge`, but consumers can override it with a custom
30
- * `ModalManagerHostBridgeInterface`
31
- *
32
- * @type {ModalManagerHostBridgeInterface}
33
- * @memberof ModalManager
34
- */
35
- hostBridge: ModalManagerHostBridgeInterface;
36
- /**
37
- * Reference to the ModalTemplate DOM element
38
- *
39
- * @private
40
- * @type {ModalTemplate}
41
- * @memberof ModalManager
42
- */
43
- private modalTemplate?;
44
- modal: Modal;
45
- firstUpdated(): Promise<void>;
46
- disconnectedCallback(): void;
47
- /** @inheritdoc */
48
- render(): TemplateResult;
49
- /** @inheritdoc */
50
- getMode(): ModalManagerMode;
51
- /** @inheritdoc */
52
- closeModal(): void;
53
- /**
54
- * Whether the modal should close if the user taps on the backdrop
55
- *
56
- * @private
57
- * @memberof ModalManager
58
- */
59
- private closeOnBackdropClick;
60
- /**
61
- * A callback if the user closes the modal
62
- *
63
- * @private
64
- * @memberof ModalManager
65
- */
66
- private userClosedModalCallback?;
67
- /**
68
- * A callback if the user presses the left nav button
69
- *
70
- * @private
71
- * @memberof ModalManager
72
- */
73
- private userPressedLeftNavButtonCallback?;
74
- /**
75
- * Call the userClosedModalCallback and reset it if it exists
76
- *
77
- * @private
78
- * @memberof ModalManager
79
- */
80
- private callUserClosedModalCallback;
81
- /**
82
- * Call the user pressed left nav button callback and reset it if it exists
83
- *
84
- * @private
85
- * @memberof ModalManager
86
- */
87
- private callUserPressedLeftNavButtonCallback;
88
- /** @inheritdoc */
89
- showModal(options: {
90
- config: ModalConfig;
91
- customModalContent?: TemplateResult;
92
- userClosedModalCallback?: () => void;
93
- userPressedLeftNavButtonCallback?: () => void;
94
- }): Promise<void>;
95
- /** @inheritdoc */
96
- updated(changed: PropertyValues): void;
97
- /**
98
- * Called when the backdrop is clicked
99
- *
100
- * @private
101
- * @memberof ModalManager
102
- */
103
- private backdropClicked;
104
- /**
105
- * Handle the mode change
106
- *
107
- * @private
108
- * @memberof ModalManager
109
- */
110
- private handleModeChange;
111
- /**
112
- * Emit a modeChange event
113
- *
114
- * @private
115
- * @memberof ModalManager
116
- */
117
- private emitModeChangeEvent;
118
- /**
119
- * Called when the modal close button is pressed. Closes the modal.
120
- *
121
- * @private
122
- * @memberof ModalManager
123
- */
124
- private closeButtonPressed;
125
- /** @inheritdoc */
126
- static get styles(): CSSResult;
127
- }
1
+ import { LitElement, CSSResult, TemplateResult, PropertyValues } from 'lit';
2
+ import Modal from './shoelace/modal';
3
+ import './modal-template';
4
+ import { ModalConfig } from './modal-config';
5
+ import { ModalManagerInterface } from './modal-manager-interface';
6
+ import { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';
7
+ import { ModalManagerMode } from './modal-manager-mode';
8
+ export declare class ModalManager extends LitElement implements ModalManagerInterface {
9
+ /**
10
+ * The current mode of the ModalManager
11
+ *
12
+ * Current options are `modal` or `closed`
13
+ *
14
+ * @type {ModalManagerMode}
15
+ * @memberof ModalManager
16
+ */
17
+ mode: ModalManagerMode;
18
+ /**
19
+ * Custom content to display in the modal's content slot
20
+ *
21
+ * @type {(TemplateResult | undefined)}
22
+ * @memberof ModalManager
23
+ */
24
+ customModalContent?: TemplateResult;
25
+ /**
26
+ * This hostBridge handles environmental-specific interactions such as adding classes
27
+ * to the body tag or event listeners needed to support the modal manager in the host environment.
28
+ *
29
+ * There is a default `ModalManagerHostBridge`, but consumers can override it with a custom
30
+ * `ModalManagerHostBridgeInterface`
31
+ *
32
+ * @type {ModalManagerHostBridgeInterface}
33
+ * @memberof ModalManager
34
+ */
35
+ hostBridge: ModalManagerHostBridgeInterface;
36
+ /**
37
+ * Reference to the ModalTemplate DOM element
38
+ *
39
+ * @private
40
+ * @type {ModalTemplate}
41
+ * @memberof ModalManager
42
+ */
43
+ private modalTemplate?;
44
+ modal: Modal;
45
+ firstUpdated(): Promise<void>;
46
+ disconnectedCallback(): void;
47
+ /** @inheritdoc */
48
+ render(): TemplateResult;
49
+ /** @inheritdoc */
50
+ getMode(): ModalManagerMode;
51
+ /** @inheritdoc */
52
+ closeModal(): void;
53
+ /**
54
+ * Whether the modal should close if the user taps on the backdrop
55
+ *
56
+ * @private
57
+ * @memberof ModalManager
58
+ */
59
+ private closeOnBackdropClick;
60
+ /**
61
+ * The element that had focus when the modal was opened, so that we can return focus
62
+ * to it after the modal closes.
63
+ */
64
+ private triggeringElement?;
65
+ /**
66
+ * A callback if the user closes the modal
67
+ *
68
+ * @private
69
+ * @memberof ModalManager
70
+ */
71
+ private userClosedModalCallback?;
72
+ /**
73
+ * A callback if the user presses the left nav button
74
+ *
75
+ * @private
76
+ * @memberof ModalManager
77
+ */
78
+ private userPressedLeftNavButtonCallback?;
79
+ /**
80
+ * Call the userClosedModalCallback and reset it if it exists
81
+ *
82
+ * @private
83
+ * @memberof ModalManager
84
+ */
85
+ private callUserClosedModalCallback;
86
+ /**
87
+ * Call the user pressed left nav button callback and reset it if it exists
88
+ *
89
+ * @private
90
+ * @memberof ModalManager
91
+ */
92
+ private callUserPressedLeftNavButtonCallback;
93
+ /** @inheritdoc */
94
+ showModal(options: {
95
+ config: ModalConfig;
96
+ customModalContent?: TemplateResult;
97
+ userClosedModalCallback?: () => void;
98
+ userPressedLeftNavButtonCallback?: () => void;
99
+ }): Promise<void>;
100
+ /**
101
+ * Sets the triggering element to the one that is currently focused, as deep
102
+ * within Shadow DOM as possible.
103
+ */
104
+ private captureTriggeringElement;
105
+ /** @inheritdoc */
106
+ updated(changed: PropertyValues): void;
107
+ /**
108
+ * Called when the backdrop is clicked
109
+ *
110
+ * @private
111
+ * @memberof ModalManager
112
+ */
113
+ private backdropClicked;
114
+ /**
115
+ * Handle the mode change
116
+ *
117
+ * @private
118
+ * @memberof ModalManager
119
+ */
120
+ private handleModeChange;
121
+ /**
122
+ * Emit a modeChange event
123
+ *
124
+ * @private
125
+ * @memberof ModalManager
126
+ */
127
+ private emitModeChangeEvent;
128
+ /**
129
+ * Called when the modal close button is pressed. Closes the modal.
130
+ *
131
+ * @private
132
+ * @memberof ModalManager
133
+ */
134
+ private closeButtonPressed;
135
+ /** @inheritdoc */
136
+ static get styles(): CSSResult;
137
+ }