@internetarchive/modal-manager 2.0.4-alpha-webdev7960.1 → 2.0.5-webdev-8155.1
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.
- package/.editorconfig +29 -29
- package/.github/workflows/ci.yml +40 -30
- package/.github/workflows/gh-pages-main.yml +42 -42
- package/.github/workflows/pr-preview.yml +40 -40
- package/.prettierrc +4 -0
- package/.vscode/extensions.json +10 -0
- package/.vscode/tasks.json +12 -0
- package/LICENSE +661 -661
- package/README.md +139 -139
- package/custom-elements.json +170 -170
- package/demo/app-root.ts +366 -0
- package/dist/demo/app-root.d.ts +22 -0
- package/dist/demo/app-root.js +338 -0
- package/dist/demo/app-root.js.map +1 -0
- package/dist/index.d.ts +7 -7
- package/dist/index.js +5 -5
- package/dist/src/assets/arrow-left-icon.d.ts +2 -2
- package/dist/src/assets/arrow-left-icon.js +2 -2
- package/dist/src/assets/ia-logo-icon.d.ts +2 -2
- package/dist/src/assets/ia-logo-icon.js +2 -2
- package/dist/src/modal-config.d.ts +104 -104
- package/dist/src/modal-config.js +23 -24
- package/dist/src/modal-config.js.map +1 -1
- package/dist/src/modal-manager-host-bridge-interface.d.ts +12 -12
- package/dist/src/modal-manager-host-bridge-interface.js +1 -1
- package/dist/src/modal-manager-host-bridge.d.ts +34 -34
- package/dist/src/modal-manager-host-bridge.js +62 -62
- package/dist/src/modal-manager-host-bridge.js.map +1 -1
- package/dist/src/modal-manager-interface.d.ts +27 -27
- package/dist/src/modal-manager-interface.js +1 -1
- package/dist/src/modal-manager-mode.d.ts +10 -10
- package/dist/src/modal-manager-mode.js +11 -11
- package/dist/src/modal-manager.d.ts +137 -137
- package/dist/src/modal-manager.js +206 -212
- package/dist/src/modal-manager.js.map +1 -1
- package/dist/src/modal-template.d.ts +41 -41
- package/dist/src/modal-template.js +119 -118
- package/dist/src/modal-template.js.map +1 -1
- package/dist/src/shoelace/active-elements.d.ts +15 -15
- package/dist/src/shoelace/active-elements.js +28 -27
- package/dist/src/shoelace/active-elements.js.map +1 -1
- package/dist/src/shoelace/modal.d.ts +24 -24
- package/dist/src/shoelace/modal.js +130 -131
- package/dist/src/shoelace/modal.js.map +1 -1
- package/dist/src/shoelace/tabbable.d.ts +9 -9
- package/dist/src/shoelace/tabbable.js +168 -169
- package/dist/src/shoelace/tabbable.js.map +1 -1
- package/dist/test/modal-config.test.d.ts +1 -1
- package/dist/test/modal-config.test.js +68 -69
- package/dist/test/modal-config.test.js.map +1 -1
- package/dist/test/modal-manager.test.d.ts +1 -1
- package/dist/test/modal-manager.test.js +279 -282
- package/dist/test/modal-manager.test.js.map +1 -1
- package/dist/test/modal-template.test.d.ts +1 -1
- package/dist/test/modal-template.test.js +158 -167
- package/dist/test/modal-template.test.js.map +1 -1
- package/dist/vite.config.d.ts +2 -2
- package/dist/vite.config.js +22 -22
- package/dist/vitest.config.ci.d.ts +2 -0
- package/dist/vitest.config.ci.js +24 -0
- package/dist/vitest.config.ci.js.map +1 -0
- package/docs/assets/css/main.css +2678 -2678
- package/docs/classes/_src_modal_config_.modalconfig.html +429 -429
- package/docs/classes/_src_modal_manager_.modalmanager.html +7702 -7702
- package/docs/classes/_src_modal_manager_host_bridge_.modalmanagerhostbridge.html +409 -409
- package/docs/classes/_src_modal_template_.modaltemplate.html +7096 -7096
- package/docs/enums/_src_modal_manager_mode_.modalmanagermode.html +196 -196
- package/docs/globals.html +150 -150
- package/docs/index.html +252 -252
- package/docs/interfaces/_src_modal_manager_host_bridge_interface_.modalmanagerhostbridgeinterface.html +210 -210
- package/docs/interfaces/_src_modal_manager_interface_.modalmanagerinterface.html +7095 -7095
- package/docs/modules/_index_.html +208 -208
- package/docs/modules/_src_modal_config_.html +146 -146
- package/docs/modules/_src_modal_manager_.html +146 -146
- package/docs/modules/_src_modal_manager_host_bridge_.html +146 -146
- package/docs/modules/_src_modal_manager_host_bridge_interface_.html +146 -146
- package/docs/modules/_src_modal_manager_interface_.html +146 -146
- package/docs/modules/_src_modal_manager_mode_.html +146 -146
- package/docs/modules/_src_modal_template_.html +146 -146
- package/docs/modules/_test_modal_config_test_.html +106 -106
- package/docs/modules/_test_modal_manager_test_.html +106 -106
- package/docs/modules/_test_modal_template_test_.html +106 -106
- package/eslint.config.mjs +53 -0
- package/index.html +33 -300
- package/package.json +73 -85
- package/renovate.json +7 -7
- package/src/modal-config.ts +14 -14
- package/src/modal-manager-host-bridge.ts +2 -2
- package/src/modal-manager.ts +3 -3
- package/src/modal-template.ts +4 -2
- package/src/shoelace/LICENSE.md +6 -6
- package/src/shoelace/active-elements.ts +3 -2
- package/src/shoelace/modal.ts +5 -5
- package/src/shoelace/tabbable.ts +4 -3
- package/test/modal-config.test.ts +4 -4
- package/test/modal-manager.test.ts +33 -24
- package/test/modal-template.test.ts +42 -35
- package/tsconfig.json +25 -21
- package/vitest.config.ci.ts +27 -0
- package/.eslintrc.js +0 -14
- package/karma.conf.js +0 -24
package/index.html
CHANGED
|
@@ -1,300 +1,33 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
-
|
|
7
|
-
<style>
|
|
8
|
-
html {
|
|
9
|
-
font-size: 10px;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
body {
|
|
13
|
-
margin: 0;
|
|
14
|
-
padding: 75px 10px 0 10px;
|
|
15
|
-
font-family: Arial, Helvetica, sans-serif;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
body.modal-manager-open {
|
|
19
|
-
overflow: hidden;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.actions {
|
|
37
|
-
position: fixed;
|
|
38
|
-
background-color: rgba(255, 255, 255, 0.9);
|
|
39
|
-
border: 1px solid black;
|
|
40
|
-
padding: 10px;
|
|
41
|
-
top: 10px;
|
|
42
|
-
left: 10px;
|
|
43
|
-
}
|
|
44
|
-
</style>
|
|
45
|
-
</head>
|
|
46
|
-
<body>
|
|
47
|
-
<div id="demo">
|
|
48
|
-
</div>
|
|
49
|
-
|
|
50
|
-
<script type="module">
|
|
51
|
-
import { html, render } from 'lit';
|
|
52
|
-
import './dist/index.js';
|
|
53
|
-
import { ModalConfig } from './dist/index.js';
|
|
54
|
-
|
|
55
|
-
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
|
56
|
-
|
|
57
|
-
render(
|
|
58
|
-
html`
|
|
59
|
-
<modal-manager>
|
|
60
|
-
<div slot="slot-content-demo">
|
|
61
|
-
<p>Slotted Content</p>
|
|
62
|
-
</div>
|
|
63
|
-
</modal-manager>
|
|
64
|
-
|
|
65
|
-
<div class="actions">
|
|
66
|
-
<button @click=${showModal}>Modal</button>
|
|
67
|
-
<button @click=${showAllFeaturesModal}>All Features</button>
|
|
68
|
-
<button @click=${showErrorModal}>Error Modal</button>
|
|
69
|
-
<button @click=${showCustomContentModal}>Custom Content Modal</button>
|
|
70
|
-
<button @click=${showSlottedContentModal}>Slotted Content Modal</button>
|
|
71
|
-
<button @click=${showProcessingModal}>Processing Modal</button>
|
|
72
|
-
<button @click=${showCompleteModal}>Processing Complete Modal</button>
|
|
73
|
-
<button @click=${showUserClosedModalCallbackModal}>Modal Closed Callback</button>
|
|
74
|
-
<button @click=${showModalUserCannotClose}>Unclosable Modal</button>
|
|
75
|
-
<button @click=${showModalUserCannotClickBackdrop}>Unclickable Backdrop</button>
|
|
76
|
-
<button @click=${showOverflowModal}>Text-heavy Modal</button>
|
|
77
|
-
<button @click=${showModalWithoutLogo}>Modal Without Logo</button>
|
|
78
|
-
<button @click=${showModalWithLeftNavButton}>Modal With Left Nav Button</button>
|
|
79
|
-
</div>
|
|
80
|
-
|
|
81
|
-
<h3>Some Content</h3>
|
|
82
|
-
|
|
83
|
-
<img src="./assets/images/200x200.jpg" style="float:right" />
|
|
84
|
-
|
|
85
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere sollicitudin aliquam. Aenean vel felis arcu. Maecenas convallis dolor ac tortor tristique, congue scelerisque turpis congue. Vestibulum porttitor scelerisque quam, sit amet porta tortor consectetur non. Cras sollicitudin sit amet lacus ac egestas. Nam sollicitudin sem at sagittis laoreet. Donec nec nisl erat. Curabitur interdum in enim vehicula aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tempus sit amet tortor laoreet volutpat. Vivamus non vehicula felis, aliquet hendrerit odio.</p>
|
|
86
|
-
|
|
87
|
-
<p>In laoreet scelerisque tortor, at convallis nisl efficitur vehicula. Donec eu erat a turpis fermentum blandit vitae ut erat. Mauris tincidunt erat sit amet ante suscipit porta. Fusce mollis metus sit amet erat condimentum, eu maximus lacus aliquam. Sed cursus lacus eget sem commodo feugiat. Praesent semper lorem eu sollicitudin blandit. Sed id risus in lacus fermentum tristique. In porttitor malesuada sapien non posuere. Phasellus mollis mauris ultrices est consectetur, id pulvinar magna suscipit. Integer sodales sapien in augue tincidunt, ac tempor ligula cursus. Mauris id justo et dui blandit luctus. Morbi mattis id metus id maximus. Suspendisse quis lobortis erat, sed dignissim neque. Etiam cursus posuere ultricies.</p>
|
|
88
|
-
|
|
89
|
-
<p>Maecenas porta ac nulla sed vestibulum. Suspendisse aliquam fermentum mi, id luctus tortor aliquet gravida. Maecenas sed tincidunt quam. Mauris cursus ante sit amet enim egestas, vitae pellentesque metus hendrerit. Sed quis tortor id dui mollis blandit quis ac nunc. Suspendisse tincidunt nisl quis nunc tincidunt, et finibus ipsum elementum. Maecenas congue, neque eget volutpat pulvinar, augue nisl interdum elit, et porta mi augue ut sapien.</p>
|
|
90
|
-
|
|
91
|
-
<p>Fusce vel imperdiet justo. Aenean sollicitudin blandit nunc. Cras vitae orci id lorem condimentum tempor. Aliquam ac lectus sed mi suscipit sollicitudin at convallis nisl. Sed semper elementum sagittis. Nam fermentum nulla velit, non tempor massa fermentum non. Duis id ante eget elit gravida semper ac quis ligula. Duis vel libero ligula. Curabitur tempor sed velit nec egestas. Vivamus sit amet volutpat purus. Integer imperdiet mattis erat, vitae dignissim odio accumsan quis. Fusce bibendum lectus quis est molestie, eget scelerisque elit interdum. Etiam imperdiet a leo vitae ultricies. Etiam pretium quam eget sem mollis, quis elementum libero vulputate. Praesent aliquet dictum augue a luctus.</p>
|
|
92
|
-
|
|
93
|
-
<p>Maecenas vulputate iaculis mauris nec lobortis. Sed nibh ante, vehicula nec varius et, condimentum in massa. Curabitur a turpis porta, auctor magna in, iaculis ante. Suspendisse potenti. Donec massa orci, sollicitudin in nulla ut, fringilla dignissim elit. Suspendisse porttitor lorem nec sem volutpat ullamcorper. Curabitur blandit est tristique velit pharetra rhoncus. Aliquam vitae mauris ex.</p>
|
|
94
|
-
`,
|
|
95
|
-
document.querySelector('#demo')
|
|
96
|
-
);
|
|
97
|
-
|
|
98
|
-
const modalManager = document.querySelector('modal-manager');
|
|
99
|
-
|
|
100
|
-
function showModal() {
|
|
101
|
-
const config = new ModalConfig();
|
|
102
|
-
config.headline = 'Success';
|
|
103
|
-
config.message = 'Thank you for your support!';
|
|
104
|
-
|
|
105
|
-
modalManager.showModal({
|
|
106
|
-
config
|
|
107
|
-
});
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
function showErrorModal() {
|
|
111
|
-
const config = new ModalConfig();
|
|
112
|
-
config.headline = 'Error'
|
|
113
|
-
config.message = 'An error occurred while processing your donation.';
|
|
114
|
-
config.headerColor = '#691916';
|
|
115
|
-
config.bodyColor = '#fff';
|
|
116
|
-
|
|
117
|
-
modalManager.showModal({
|
|
118
|
-
config
|
|
119
|
-
});
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
function showBillAlert() {
|
|
123
|
-
alert('Bill <3 You');
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
function buttonPress() {
|
|
127
|
-
alert('You pressed a button.');
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
function showAllFeaturesModal() {
|
|
131
|
-
const config = new ModalConfig();
|
|
132
|
-
config.title = html`Donation Received`;
|
|
133
|
-
config.subtitle = html`Thanks a bunch!`;
|
|
134
|
-
config.headline = html`A Headline that catches attention and might spill over to multiple lines!`;
|
|
135
|
-
config.message = html`A long informative message for your users that let them know about something`;
|
|
136
|
-
config.headerColor = 'purple';
|
|
137
|
-
config.showProcessingIndicator = true;
|
|
138
|
-
config.processingImageMode = 'done';
|
|
139
|
-
|
|
140
|
-
const someContent = html`
|
|
141
|
-
<div style="text-align: center; margin-top: 10px;">
|
|
142
|
-
<button @click=${buttonPress}>I'm A Button To Press</button>
|
|
143
|
-
</div>
|
|
144
|
-
`;
|
|
145
|
-
|
|
146
|
-
modalManager.showModal({
|
|
147
|
-
config,
|
|
148
|
-
customModalContent: someContent
|
|
149
|
-
});
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
function showCustomContentModal() {
|
|
153
|
-
const config = new ModalConfig();
|
|
154
|
-
config.title = 'Custom Content';
|
|
155
|
-
config.headline = html`<span class="sr-only">Also support screen-reader only</span>`;
|
|
156
|
-
|
|
157
|
-
const someContent = html`
|
|
158
|
-
<style>a:focus {
|
|
159
|
-
outline: 2px solid blue;
|
|
160
|
-
}
|
|
161
|
-
</style>
|
|
162
|
-
Can contain any markup, including web components. Event listeners also work. Try clicking on the picture.
|
|
163
|
-
<span class="sr-only">Also support screen-reader only</span>
|
|
164
|
-
<div style="text-align: center">
|
|
165
|
-
<a href="https://www.billmurraystory.com/" style="display: block;">Bill Murray Stories</a>
|
|
166
|
-
<img src="./assets/images/100x100.jpg" @click=${showBillAlert} />
|
|
167
|
-
</div>
|
|
168
|
-
`;
|
|
169
|
-
|
|
170
|
-
modalManager.showModal({
|
|
171
|
-
config,
|
|
172
|
-
customModalContent: someContent
|
|
173
|
-
});
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
function showSlottedContentModal() {
|
|
177
|
-
const config = new ModalConfig();
|
|
178
|
-
config.title = 'Slotted Content';
|
|
179
|
-
|
|
180
|
-
const someContent = html`
|
|
181
|
-
Can slot content from the top-level:
|
|
182
|
-
<slot name="slot-content-demo"></slot>
|
|
183
|
-
`;
|
|
184
|
-
|
|
185
|
-
modalManager.showModal({
|
|
186
|
-
config,
|
|
187
|
-
customModalContent: someContent
|
|
188
|
-
});
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
function showOverflowModal() {
|
|
192
|
-
const config = new ModalConfig();
|
|
193
|
-
|
|
194
|
-
config.title = html`Lorem Ipsum`;
|
|
195
|
-
config.subtitle = html`Subtitle`;
|
|
196
|
-
config.headline = html`Everything Important`;
|
|
197
|
-
config.message = html`
|
|
198
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere sollicitudin aliquam. Aenean vel felis arcu. Maecenas convallis dolor ac tortor tristique, congue scelerisque turpis congue. Vestibulum porttitor scelerisque quam, sit amet porta tortor consectetur non. Cras sollicitudin sit amet lacus ac egestas. Nam sollicitudin sem at sagittis laoreet. Donec nec nisl erat. Curabitur interdum in enim vehicula aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tempus sit amet tortor laoreet volutpat. Vivamus non vehicula felis, aliquet hendrerit odio.</p>
|
|
199
|
-
|
|
200
|
-
<p>In laoreet scelerisque tortor, at convallis nisl efficitur vehicula. Donec eu erat a turpis fermentum blandit vitae ut erat. Mauris tincidunt erat sit amet ante suscipit porta. Fusce mollis metus sit amet erat condimentum, eu maximus lacus aliquam. Sed cursus lacus eget sem commodo feugiat. Praesent semper lorem eu sollicitudin blandit. Sed id risus in lacus fermentum tristique. In porttitor malesuada sapien non posuere. Phasellus mollis mauris ultrices est consectetur, id pulvinar magna suscipit. Integer sodales sapien in augue tincidunt, ac tempor ligula cursus. Mauris id justo et dui blandit luctus. Morbi mattis id metus id maximus. Suspendisse quis lobortis erat, sed dignissim neque. Etiam cursus posuere ultricies.</p>
|
|
201
|
-
`;
|
|
202
|
-
|
|
203
|
-
config.headerColor = '#36A483';
|
|
204
|
-
|
|
205
|
-
modalManager.showModal({
|
|
206
|
-
config
|
|
207
|
-
});
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
function showModalWithoutLogo() {
|
|
211
|
-
const config = new ModalConfig();
|
|
212
|
-
config.headline = 'Success';
|
|
213
|
-
config.title = html`Donation Received`;
|
|
214
|
-
config.message = 'Thank you for your support!';
|
|
215
|
-
config.headerColor = '#194880';
|
|
216
|
-
config.showHeaderLogo = false;
|
|
217
|
-
modalManager.showModal({
|
|
218
|
-
config
|
|
219
|
-
});
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
function showCompleteModal() {
|
|
223
|
-
const config = new ModalConfig();
|
|
224
|
-
config.showProcessingIndicator = true;
|
|
225
|
-
config.processingImageMode = 'complete';
|
|
226
|
-
modalManager.showModal({
|
|
227
|
-
config
|
|
228
|
-
});
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
function showProcessingModal() {
|
|
232
|
-
const config = new ModalConfig();
|
|
233
|
-
config.headerColor = '#497fbf';
|
|
234
|
-
config.showProcessingIndicator = true;
|
|
235
|
-
config.processingImageMode = 'processing';
|
|
236
|
-
config.showCloseButton = false;
|
|
237
|
-
config.closeOnBackdropClick = false;
|
|
238
|
-
modalManager.showModal({
|
|
239
|
-
config
|
|
240
|
-
});
|
|
241
|
-
|
|
242
|
-
setTimeout(showCompleteModal, 1500);
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
function showUserClosedModalCallbackModal() {
|
|
246
|
-
const config = new ModalConfig();
|
|
247
|
-
config.message = 'When you close this modal another will open.'
|
|
248
|
-
|
|
249
|
-
modalManager.showModal({
|
|
250
|
-
config,
|
|
251
|
-
userClosedModalCallback: () => {
|
|
252
|
-
const config = new ModalConfig();
|
|
253
|
-
config.message = 'I\'m another modal';
|
|
254
|
-
config.headerColor = '#497fbf';
|
|
255
|
-
modalManager.showModal({ config });
|
|
256
|
-
}
|
|
257
|
-
});
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
function showModalUserCannotClose() {
|
|
261
|
-
const config = new ModalConfig();
|
|
262
|
-
config.message = 'User cannot close this. Will close automatically in 2 seconds.';
|
|
263
|
-
config.showCloseButton = false;
|
|
264
|
-
config.closeOnBackdropClick = false;
|
|
265
|
-
modalManager.showModal({
|
|
266
|
-
config
|
|
267
|
-
});
|
|
268
|
-
|
|
269
|
-
setTimeout(modalManager.closeModal.bind(modalManager), 2000);
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
function showModalWithLeftNavButton() {
|
|
273
|
-
const config = new ModalConfig();
|
|
274
|
-
config.message = 'This modal has a left nav button.';
|
|
275
|
-
config.showLeftNavButton = true;
|
|
276
|
-
config.leftNavButtonText = 'Back';
|
|
277
|
-
|
|
278
|
-
modalManager.showModal({
|
|
279
|
-
config,
|
|
280
|
-
userPressedLeftNavButtonCallback: () => {
|
|
281
|
-
const config = new ModalConfig();
|
|
282
|
-
config.message = 'I\'m the previous modal (or anything else you want to do here)';
|
|
283
|
-
config.headerColor = '#497fbf';
|
|
284
|
-
modalManager.showModal({ config });
|
|
285
|
-
}
|
|
286
|
-
});
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
function showModalUserCannotClickBackdrop() {
|
|
290
|
-
const config = new ModalConfig();
|
|
291
|
-
config.message = 'Clicking on the backdrop will not close this.';
|
|
292
|
-
config.showCloseButton = true;
|
|
293
|
-
config.closeOnBackdropClick = false;
|
|
294
|
-
modalManager.showModal({
|
|
295
|
-
config
|
|
296
|
-
});
|
|
297
|
-
}
|
|
298
|
-
</script>
|
|
299
|
-
</body>
|
|
300
|
-
</html>
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
|
|
7
|
+
<style>
|
|
8
|
+
html {
|
|
9
|
+
font-size: 10px;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
body {
|
|
13
|
+
margin: 0;
|
|
14
|
+
padding: 75px 10px 0 10px;
|
|
15
|
+
font-family: Arial, Helvetica, sans-serif;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
body.modal-manager-open {
|
|
19
|
+
overflow: hidden;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
#demo {
|
|
23
|
+
margin: 0;
|
|
24
|
+
padding: 0;
|
|
25
|
+
}
|
|
26
|
+
</style>
|
|
27
|
+
|
|
28
|
+
<script type="module" src="./demo/app-root"></script>
|
|
29
|
+
</head>
|
|
30
|
+
<body>
|
|
31
|
+
<app-root></app-root>
|
|
32
|
+
</body>
|
|
33
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,85 +1,73 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@internetarchive/modal-manager",
|
|
3
|
-
"version": "2.0.
|
|
4
|
-
"description": "A Modal Manager Web Component",
|
|
5
|
-
"repository": {
|
|
6
|
-
"type": "git",
|
|
7
|
-
"url": "https://github.com/internetarchive/iaux-modal-manager.git"
|
|
8
|
-
},
|
|
9
|
-
"license": "AGPL-3.0-only",
|
|
10
|
-
"main": "dist/index.js",
|
|
11
|
-
"module": "dist/index.js",
|
|
12
|
-
"types": "dist/index.d.ts",
|
|
13
|
-
"scripts": {
|
|
14
|
-
"prepare": "npm run build && husky install",
|
|
15
|
-
"prepare:ghpages": "rimraf ghpages && npm run prepare && vite build && cp -R assets/images ghpages/assets/images",
|
|
16
|
-
"start": "
|
|
17
|
-
"docs": "typedoc",
|
|
18
|
-
"build": "tsc",
|
|
19
|
-
"tsc:watch": "tsc --watch",
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
"
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
"@
|
|
36
|
-
"
|
|
37
|
-
"throttle-debounce": "^5.0.
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
"@
|
|
41
|
-
"@
|
|
42
|
-
"@
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
"hooks": {
|
|
75
|
-
"pre-commit": "lint-staged"
|
|
76
|
-
}
|
|
77
|
-
},
|
|
78
|
-
"lint-staged": {
|
|
79
|
-
"*.ts": [
|
|
80
|
-
"eslint --fix",
|
|
81
|
-
"prettier --write",
|
|
82
|
-
"git add"
|
|
83
|
-
]
|
|
84
|
-
}
|
|
85
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@internetarchive/modal-manager",
|
|
3
|
+
"version": "2.0.5-webdev-8155.1",
|
|
4
|
+
"description": "A Modal Manager Web Component",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "https://github.com/internetarchive/iaux-modal-manager.git"
|
|
8
|
+
},
|
|
9
|
+
"license": "AGPL-3.0-only",
|
|
10
|
+
"main": "dist/index.js",
|
|
11
|
+
"module": "dist/index.js",
|
|
12
|
+
"types": "dist/index.d.ts",
|
|
13
|
+
"scripts": {
|
|
14
|
+
"prepare": "npm run build && husky install",
|
|
15
|
+
"prepare:ghpages": "rimraf ghpages && npm run prepare && vite build && cp -R assets/images ghpages/assets/images",
|
|
16
|
+
"start": "vite",
|
|
17
|
+
"docs": "typedoc",
|
|
18
|
+
"build": "tsc",
|
|
19
|
+
"tsc:watch": "tsc --watch",
|
|
20
|
+
"format": "eslint --fix && prettier --write \"src/**/*.ts\" \"test/**/*.ts\" \"demo/**/*.ts\"",
|
|
21
|
+
"lint": "eslint && prettier --check \"src/**/*.ts\" \"test/**/*.ts\"",
|
|
22
|
+
"circular": "madge --circular .",
|
|
23
|
+
"test": "npm run circular && npm run lint && vitest run --config ./vitest.config.ci.ts --coverage",
|
|
24
|
+
"test:watch": "npm run circular && npm run lint && vitest",
|
|
25
|
+
"publish:alpha": "npm run test && npm run prepare && npm version prerelease --preid alpha --no-git-tag-version && npm publish --tag alpha"
|
|
26
|
+
},
|
|
27
|
+
"dependencies": {
|
|
28
|
+
"@internetarchive/ia-activity-indicator": "^0.0.6",
|
|
29
|
+
"@internetarchive/icon-close": "^1.4.0",
|
|
30
|
+
"@internetarchive/icon-user": "^1.4.0",
|
|
31
|
+
"lit": "^3.3.2",
|
|
32
|
+
"throttle-debounce": "^5.0.2"
|
|
33
|
+
},
|
|
34
|
+
"devDependencies": {
|
|
35
|
+
"@open-wc/testing-helpers": "^3.0.1",
|
|
36
|
+
"@types/node": "^25.2.0",
|
|
37
|
+
"@types/throttle-debounce": "^5.0.2",
|
|
38
|
+
"@typescript-eslint/eslint-plugin": "^8.54.0",
|
|
39
|
+
"@typescript-eslint/parser": "^8.54.0",
|
|
40
|
+
"@vitest/browser": "^4.0.18",
|
|
41
|
+
"@vitest/browser-playwright": "^4.0.18",
|
|
42
|
+
"@vitest/coverage-v8": "^4.0.18",
|
|
43
|
+
"concurrently": "^9.2.1",
|
|
44
|
+
"deepmerge": "^4.3.1",
|
|
45
|
+
"eslint": "^9.39.2",
|
|
46
|
+
"eslint-config-prettier": "^10.1.8",
|
|
47
|
+
"eslint-plugin-html": "^8.1.4",
|
|
48
|
+
"husky": "^9.1.7",
|
|
49
|
+
"jiti": "^2.6.1",
|
|
50
|
+
"lint-staged": "^16.2.7",
|
|
51
|
+
"madge": "^8.0.0",
|
|
52
|
+
"playwright": "^1.58.1",
|
|
53
|
+
"prettier": "^3.8.1",
|
|
54
|
+
"rimraf": "^6.1.2",
|
|
55
|
+
"tslib": "^2.8.1",
|
|
56
|
+
"typedoc": "^0.28.16",
|
|
57
|
+
"typescript": "^5.9.3",
|
|
58
|
+
"vite": "^7.3.1",
|
|
59
|
+
"vitest": "^4.0.18"
|
|
60
|
+
},
|
|
61
|
+
"husky": {
|
|
62
|
+
"hooks": {
|
|
63
|
+
"pre-commit": "lint-staged"
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
"lint-staged": {
|
|
67
|
+
"*.ts": [
|
|
68
|
+
"eslint --fix",
|
|
69
|
+
"prettier --write",
|
|
70
|
+
"git add"
|
|
71
|
+
]
|
|
72
|
+
}
|
|
73
|
+
}
|
package/renovate.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
|
|
3
|
-
"extends": [
|
|
4
|
-
"config:base",
|
|
5
|
-
":preserveSemverRanges"
|
|
6
|
-
]
|
|
7
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
|
|
3
|
+
"extends": [
|
|
4
|
+
"config:base",
|
|
5
|
+
":preserveSemverRanges"
|
|
6
|
+
]
|
|
7
|
+
}
|
package/src/modal-config.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { TemplateResult } from 'lit';
|
|
1
|
+
import type { TemplateResult } from 'lit';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Configuration to show a modal
|
|
@@ -10,34 +10,34 @@ export class ModalConfig {
|
|
|
10
10
|
/**
|
|
11
11
|
* The title that shows in the header
|
|
12
12
|
*
|
|
13
|
-
* @type {(TemplateResult | undefined)}
|
|
13
|
+
* @type {(TemplateResult | string | undefined)}
|
|
14
14
|
* @memberof ModalConfig
|
|
15
15
|
*/
|
|
16
|
-
title?: TemplateResult;
|
|
16
|
+
title?: TemplateResult | string;
|
|
17
17
|
|
|
18
18
|
/**
|
|
19
19
|
* The subtitle shown in the header under the title
|
|
20
20
|
*
|
|
21
|
-
* @type {(TemplateResult | undefined)}
|
|
21
|
+
* @type {(TemplateResult | string | undefined)}
|
|
22
22
|
* @memberof ModalConfig
|
|
23
23
|
*/
|
|
24
|
-
subtitle?: TemplateResult;
|
|
24
|
+
subtitle?: TemplateResult | string;
|
|
25
25
|
|
|
26
26
|
/**
|
|
27
27
|
* The headline shown at the top of the content section
|
|
28
28
|
*
|
|
29
|
-
* @type {(TemplateResult | undefined)}
|
|
29
|
+
* @type {(TemplateResult | string | undefined)}
|
|
30
30
|
* @memberof ModalConfig
|
|
31
31
|
*/
|
|
32
|
-
headline?: TemplateResult;
|
|
32
|
+
headline?: TemplateResult | string;
|
|
33
33
|
|
|
34
34
|
/**
|
|
35
35
|
* The text shown below the headline in the content section
|
|
36
36
|
*
|
|
37
|
-
* @type {(TemplateResult | undefined)}
|
|
37
|
+
* @type {(TemplateResult | string | undefined)}
|
|
38
38
|
* @memberof ModalConfig
|
|
39
39
|
*/
|
|
40
|
-
message?: TemplateResult;
|
|
40
|
+
message?: TemplateResult | string;
|
|
41
41
|
|
|
42
42
|
/**
|
|
43
43
|
* The background color of the header
|
|
@@ -61,7 +61,7 @@ export class ModalConfig {
|
|
|
61
61
|
showProcessingIndicator: boolean;
|
|
62
62
|
|
|
63
63
|
/**
|
|
64
|
-
* Set the processing image mode
|
|
64
|
+
* Set the processing image mode
|
|
65
65
|
*
|
|
66
66
|
* @memberof ModalConfig
|
|
67
67
|
*/
|
|
@@ -101,10 +101,10 @@ export class ModalConfig {
|
|
|
101
101
|
closeOnBackdropClick: boolean;
|
|
102
102
|
|
|
103
103
|
constructor(options?: {
|
|
104
|
-
title?: TemplateResult;
|
|
105
|
-
subtitle?: TemplateResult;
|
|
106
|
-
headline?: TemplateResult;
|
|
107
|
-
message?: TemplateResult;
|
|
104
|
+
title?: TemplateResult | string;
|
|
105
|
+
subtitle?: TemplateResult | string;
|
|
106
|
+
headline?: TemplateResult | string;
|
|
107
|
+
message?: TemplateResult | string;
|
|
108
108
|
headerColor?: string;
|
|
109
109
|
bodyColor?: string;
|
|
110
110
|
showProcessingIndicator?: boolean;
|
|
@@ -47,7 +47,7 @@ export class ModalManagerHostBridge implements ModalManagerHostBridgeInterface {
|
|
|
47
47
|
private windowResizeThrottler: throttle<() => void> = throttle(
|
|
48
48
|
100,
|
|
49
49
|
this.updateModalContainerHeight,
|
|
50
|
-
{ noLeading: false, noTrailing: false }
|
|
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
|
|
@@ -60,7 +60,7 @@ export class ModalManagerHostBridge implements ModalManagerHostBridgeInterface {
|
|
|
60
60
|
private updateModalContainerHeight(): void {
|
|
61
61
|
this.modalManager.style.setProperty(
|
|
62
62
|
'--containerHeight',
|
|
63
|
-
`${window.innerHeight}px
|
|
63
|
+
`${window.innerHeight}px`,
|
|
64
64
|
);
|
|
65
65
|
}
|
|
66
66
|
|
package/src/modal-manager.ts
CHANGED
|
@@ -52,7 +52,7 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
|
|
|
52
52
|
*/
|
|
53
53
|
@property({ type: Object })
|
|
54
54
|
hostBridge: ModalManagerHostBridgeInterface = new ModalManagerHostBridge(
|
|
55
|
-
this
|
|
55
|
+
this,
|
|
56
56
|
);
|
|
57
57
|
|
|
58
58
|
/**
|
|
@@ -69,8 +69,8 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
|
|
|
69
69
|
|
|
70
70
|
async firstUpdated(): Promise<void> {
|
|
71
71
|
// Give the browser a chance to paint
|
|
72
|
-
|
|
73
|
-
await new Promise(r => setTimeout(r, 0));
|
|
72
|
+
|
|
73
|
+
await new Promise((r) => setTimeout(r, 0));
|
|
74
74
|
|
|
75
75
|
if (this.closeOnBackdropClick) {
|
|
76
76
|
this.addEventListener('keydown', (e: KeyboardEvent) => {
|
package/src/modal-template.ts
CHANGED
|
@@ -256,7 +256,8 @@ export class ModalTemplate extends LitElement {
|
|
|
256
256
|
.logo-icon {
|
|
257
257
|
border-radius: 100%;
|
|
258
258
|
border: 3px solid #fff;
|
|
259
|
-
box-shadow:
|
|
259
|
+
box-shadow:
|
|
260
|
+
0 0 0 1px rgba(0, 0, 0, 0.18),
|
|
260
261
|
0 2px 2px 0 rgba(0, 0, 0, 0.08);
|
|
261
262
|
width: ${modalLogoSize};
|
|
262
263
|
height: ${modalLogoSize};
|
|
@@ -291,7 +292,8 @@ export class ModalTemplate extends LitElement {
|
|
|
291
292
|
padding: 0;
|
|
292
293
|
cursor: pointer;
|
|
293
294
|
background-color: white;
|
|
294
|
-
box-shadow:
|
|
295
|
+
box-shadow:
|
|
296
|
+
0 0 0 1px rgba(0, 0, 0, 0.18),
|
|
295
297
|
0 4px 4px 0 rgba(0, 0, 0, 0.08);
|
|
296
298
|
}
|
|
297
299
|
|
package/src/shoelace/LICENSE.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
Copyright (c) 2020 A Beautiful Site, LLC
|
|
2
|
-
|
|
3
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
4
|
-
|
|
5
|
-
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
6
|
-
|
|
1
|
+
Copyright (c) 2020 A Beautiful Site, LLC
|
|
2
|
+
|
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
4
|
+
|
|
5
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
6
|
+
|
|
7
7
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|