@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
@@ -1,82 +1,82 @@
1
- import { throttle } from 'throttle-debounce';
2
-
3
- import { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';
4
- import { ModalManagerInterface } from './modal-manager-interface';
5
- import { ModalManagerMode } from './modal-manager-mode';
6
-
7
- /**
8
- * The `ModalManagerHostBridge` is a bridge between the `ModalManager` and the
9
- * host that sets up environment-specific changes when the modal opens and closes.
10
- *
11
- * For instance, when the modal opens, this adds a class to the `<body>` tag for styling
12
- * and adds a `resize` listener to fix a Safari shadow root issue.
13
- *
14
- * Consumers can create their own `ModalManagerHostBridgeInterface` classes and pass
15
- * them into the `ModalManager` if this one does not work for their environment.
16
- *
17
- * @export
18
- * @class ModalManagerHostBridge
19
- * @implements {ModalManagerHostBridgeInterface}
20
- */
21
- export class ModalManagerHostBridge implements ModalManagerHostBridgeInterface {
22
- private modalManager: ModalManagerInterface;
23
-
24
- constructor(modalManager: ModalManagerInterface) {
25
- this.modalManager = modalManager;
26
- }
27
-
28
- /**
29
- * Handle the mode change
30
- *
31
- * @private
32
- * @memberof ModalManager
33
- */
34
- handleModeChange(mode: ModalManagerMode): void {
35
- switch (mode) {
36
- case ModalManagerMode.Open:
37
- this.startResizeListener();
38
- this.stopDocumentScroll();
39
- break;
40
- case ModalManagerMode.Closed:
41
- this.stopResizeListener();
42
- this.resumeDocumentScroll();
43
- break;
44
- }
45
- }
46
-
47
- private windowResizeThrottler: throttle<() => void> = throttle(
48
- 100,
49
- this.updateModalContainerHeight,
50
- { noLeading: false, noTrailing: false }
51
- ).bind(this);
52
-
53
- // This is a workaround for Safari. Safari does not update shadowRoot elements calculated
54
- // based on the viewport size (ie. `calc(100vh - 10px)`). It does an initial calculation correctly,
55
- // but resizing the window does not cause the calculation to update. Firefox and Chrome both handle
56
- // this correctly.
57
- // It doesn't matter what css variable you set, it is just forcing Safari to do an update.
58
- // Also note that the value has to change on each update for Safari to do the update,
59
- // ie. you can't just set a static value.
60
- private updateModalContainerHeight(): void {
61
- this.modalManager.style.setProperty(
62
- '--containerHeight',
63
- `${window.innerHeight}px`
64
- );
65
- }
66
-
67
- private stopDocumentScroll(): void {
68
- document.body.classList.add('modal-manager-open');
69
- }
70
-
71
- private resumeDocumentScroll(): void {
72
- document.body.classList.remove('modal-manager-open');
73
- }
74
-
75
- private startResizeListener(): void {
76
- window.addEventListener('resize', this.windowResizeThrottler);
77
- }
78
-
79
- private stopResizeListener(): void {
80
- window.removeEventListener('resize', this.windowResizeThrottler);
81
- }
82
- }
1
+ import { throttle } from 'throttle-debounce';
2
+
3
+ import { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';
4
+ import { ModalManagerInterface } from './modal-manager-interface';
5
+ import { ModalManagerMode } from './modal-manager-mode';
6
+
7
+ /**
8
+ * The `ModalManagerHostBridge` is a bridge between the `ModalManager` and the
9
+ * host that sets up environment-specific changes when the modal opens and closes.
10
+ *
11
+ * For instance, when the modal opens, this adds a class to the `<body>` tag for styling
12
+ * and adds a `resize` listener to fix a Safari shadow root issue.
13
+ *
14
+ * Consumers can create their own `ModalManagerHostBridgeInterface` classes and pass
15
+ * them into the `ModalManager` if this one does not work for their environment.
16
+ *
17
+ * @export
18
+ * @class ModalManagerHostBridge
19
+ * @implements {ModalManagerHostBridgeInterface}
20
+ */
21
+ export class ModalManagerHostBridge implements ModalManagerHostBridgeInterface {
22
+ private modalManager: ModalManagerInterface;
23
+
24
+ constructor(modalManager: ModalManagerInterface) {
25
+ this.modalManager = modalManager;
26
+ }
27
+
28
+ /**
29
+ * Handle the mode change
30
+ *
31
+ * @private
32
+ * @memberof ModalManager
33
+ */
34
+ handleModeChange(mode: ModalManagerMode): void {
35
+ switch (mode) {
36
+ case ModalManagerMode.Open:
37
+ this.startResizeListener();
38
+ this.stopDocumentScroll();
39
+ break;
40
+ case ModalManagerMode.Closed:
41
+ this.stopResizeListener();
42
+ this.resumeDocumentScroll();
43
+ break;
44
+ }
45
+ }
46
+
47
+ private windowResizeThrottler: throttle<() => void> = throttle(
48
+ 100,
49
+ this.updateModalContainerHeight,
50
+ { noLeading: false, noTrailing: false }
51
+ ).bind(this);
52
+
53
+ // This is a workaround for Safari. Safari does not update shadowRoot elements calculated
54
+ // based on the viewport size (ie. `calc(100vh - 10px)`). It does an initial calculation correctly,
55
+ // but resizing the window does not cause the calculation to update. Firefox and Chrome both handle
56
+ // this correctly.
57
+ // It doesn't matter what css variable you set, it is just forcing Safari to do an update.
58
+ // Also note that the value has to change on each update for Safari to do the update,
59
+ // ie. you can't just set a static value.
60
+ private updateModalContainerHeight(): void {
61
+ this.modalManager.style.setProperty(
62
+ '--containerHeight',
63
+ `${window.innerHeight}px`
64
+ );
65
+ }
66
+
67
+ private stopDocumentScroll(): void {
68
+ document.body.classList.add('modal-manager-open');
69
+ }
70
+
71
+ private resumeDocumentScroll(): void {
72
+ document.body.classList.remove('modal-manager-open');
73
+ }
74
+
75
+ private startResizeListener(): void {
76
+ window.addEventListener('resize', this.windowResizeThrottler);
77
+ }
78
+
79
+ private stopResizeListener(): void {
80
+ window.removeEventListener('resize', this.windowResizeThrottler);
81
+ }
82
+ }
@@ -1,30 +1,30 @@
1
- import { LitElement, TemplateResult } from 'lit';
2
- import { ModalConfig } from './modal-config';
3
- import { ModalManagerMode } from './modal-manager-mode';
4
-
5
- export interface ModalManagerInterface extends LitElement {
6
- /**
7
- * Get the current modal mode.
8
- */
9
- getMode(): ModalManagerMode;
10
-
11
- /**
12
- * Show a modal from a given ModalConfig
13
- *
14
- * @param config ModalConfig
15
- * @param customModalContent TemplateResult | undefined
16
- * @param userClosedModalCallback () => void | undefined an optional callback when the modal is closed
17
- * @param userPressedLeftNavButtonCallback () => void | undefined an optional callback when the left nav button is pressed
18
- */
19
- showModal(options: {
20
- config: ModalConfig;
21
- customModalContent?: TemplateResult;
22
- userClosedModalCallback?: () => void;
23
- userPressedLeftNavButtonCallback?: () => void;
24
- }): Promise<void>;
25
-
26
- /**
27
- * Close the currently open modal
28
- */
29
- closeModal(): void;
30
- }
1
+ import { LitElement, TemplateResult } from 'lit';
2
+ import { ModalConfig } from './modal-config';
3
+ import { ModalManagerMode } from './modal-manager-mode';
4
+
5
+ export interface ModalManagerInterface extends LitElement {
6
+ /**
7
+ * Get the current modal mode.
8
+ */
9
+ getMode(): ModalManagerMode;
10
+
11
+ /**
12
+ * Show a modal from a given ModalConfig
13
+ *
14
+ * @param config ModalConfig
15
+ * @param customModalContent TemplateResult | undefined
16
+ * @param userClosedModalCallback () => void | undefined an optional callback when the modal is closed
17
+ * @param userPressedLeftNavButtonCallback () => void | undefined an optional callback when the left nav button is pressed
18
+ */
19
+ showModal(options: {
20
+ config: ModalConfig;
21
+ customModalContent?: TemplateResult;
22
+ userClosedModalCallback?: () => void;
23
+ userPressedLeftNavButtonCallback?: () => void;
24
+ }): Promise<void>;
25
+
26
+ /**
27
+ * Close the currently open modal
28
+ */
29
+ closeModal(): void;
30
+ }
@@ -1,10 +1,10 @@
1
- /**
2
- * Various modes the modal can be in
3
- *
4
- * @export
5
- * @enum {number}
6
- */
7
- export 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 enum ModalManagerMode {
8
+ Open = 'open',
9
+ Closed = 'closed',
10
+ }