@internetarchive/modal-manager 0.2.8 → 0.2.9-alpha.2
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/.eslintrc.js +14 -14
- package/.github/workflows/ci.yml +26 -26
- package/LICENSE +661 -661
- package/README.md +139 -139
- package/custom-elements.json +170 -170
- package/demo/index.html +278 -278
- package/dist/index.d.ts +7 -7
- package/dist/index.js +5 -5
- package/dist/index.js.map +1 -1
- package/dist/src/modal-config.d.ts +92 -92
- package/dist/src/modal-config.js +22 -22
- 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.map +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 +25 -25
- package/dist/src/modal-manager-interface.js.map +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-mode.js.map +1 -1
- package/dist/src/modal-manager.d.ts +108 -108
- package/dist/src/modal-manager.js +189 -189
- package/dist/src/modal-manager.js.map +1 -1
- package/dist/src/modal-template.d.ts +32 -32
- package/dist/src/modal-template.js +276 -276
- package/dist/src/modal-template.js.map +1 -1
- package/dist/test/modal-config.test.d.ts +1 -1
- package/dist/test/modal-config.test.js +61 -61
- 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 +200 -200
- 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 +95 -95
- package/dist/test/modal-template.test.js.map +1 -1
- 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/index.ts +7 -7
- package/karma.conf.js +24 -24
- package/package.json +82 -82
- package/src/modal-config.ts +117 -117
- package/src/modal-manager-host-bridge-interface.ts +13 -13
- package/src/modal-manager-host-bridge.ts +82 -82
- package/src/modal-manager-interface.ts +28 -28
- package/src/modal-manager-mode.ts +10 -10
- package/src/modal-manager.ts +228 -228
- package/src/modal-template.ts +279 -279
- package/test/modal-config.test.ts +69 -69
- package/test/modal-manager.test.ts +245 -245
- package/test/modal-template.test.ts +111 -111
- package/tsconfig.json +20 -20
|
@@ -1,111 +1,111 @@
|
|
|
1
|
-
import { fixture, expect, oneEvent } from '@open-wc/testing';
|
|
2
|
-
import { html } from 'lit';
|
|
3
|
-
import '../src/modal-template';
|
|
4
|
-
import { ModalConfig } from '../src/modal-config';
|
|
5
|
-
|
|
6
|
-
describe('Modal Template', () => {
|
|
7
|
-
it('has correct default configuration', async () => {
|
|
8
|
-
const el = await fixture(html` <modal-template></modal-template> `);
|
|
9
|
-
|
|
10
|
-
const processingLogo = el.shadowRoot?.querySelector('.processing-logo');
|
|
11
|
-
const headline = el.shadowRoot?.querySelector('.headline');
|
|
12
|
-
const message = el.shadowRoot?.querySelector('.message');
|
|
13
|
-
const title = el.shadowRoot?.querySelector('h1.title') as HTMLElement;
|
|
14
|
-
|
|
15
|
-
expect(headline).to.not.exist;
|
|
16
|
-
expect(message).to.not.exist;
|
|
17
|
-
expect(title).to.not.exist;
|
|
18
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
19
|
-
expect('hidden' in processingLogo!.classList);
|
|
20
|
-
});
|
|
21
|
-
|
|
22
|
-
it('does not show the title if one not provided', async () => {
|
|
23
|
-
const config = new ModalConfig();
|
|
24
|
-
config.title = undefined;
|
|
25
|
-
|
|
26
|
-
const el = await fixture(html`
|
|
27
|
-
<modal-template .config=${config}></modal-template>
|
|
28
|
-
`);
|
|
29
|
-
|
|
30
|
-
const title = el.shadowRoot?.querySelector('h1.title');
|
|
31
|
-
expect(title).to.not.exist;
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
it('emits closeButtonPressed event when close button is pressed', async () => {
|
|
35
|
-
const el = await fixture(html` <modal-template></modal-template> `);
|
|
36
|
-
|
|
37
|
-
const closeButton = el.shadowRoot?.querySelector('.close-button');
|
|
38
|
-
const clickEvent = new MouseEvent('click');
|
|
39
|
-
|
|
40
|
-
setTimeout(() => {
|
|
41
|
-
closeButton?.dispatchEvent(clickEvent);
|
|
42
|
-
});
|
|
43
|
-
const response = await oneEvent(el, 'closeButtonPressed');
|
|
44
|
-
expect(response).to.exist;
|
|
45
|
-
});
|
|
46
|
-
|
|
47
|
-
it('shows the processing indicator if configured to', async () => {
|
|
48
|
-
const config = new ModalConfig();
|
|
49
|
-
config.showProcessingIndicator = true;
|
|
50
|
-
|
|
51
|
-
const el = await fixture(html`
|
|
52
|
-
<modal-template .config=${config}></modal-template>
|
|
53
|
-
`);
|
|
54
|
-
|
|
55
|
-
const processingLogo = el.shadowRoot?.querySelector('.processing-logo');
|
|
56
|
-
const classList = processingLogo?.classList ?? [];
|
|
57
|
-
expect('hidden' in classList).to.equal(false);
|
|
58
|
-
});
|
|
59
|
-
|
|
60
|
-
it('shows the close button if configured to', async () => {
|
|
61
|
-
const config = new ModalConfig();
|
|
62
|
-
config.showCloseButton = true;
|
|
63
|
-
const el = await fixture(html`
|
|
64
|
-
<modal-template .config=${config}></modal-template>
|
|
65
|
-
`);
|
|
66
|
-
|
|
67
|
-
const closeButton = el.shadowRoot?.querySelector('.close-button');
|
|
68
|
-
expect(closeButton).to.exist;
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
it('hides the close button if configured to', async () => {
|
|
72
|
-
const config = new ModalConfig();
|
|
73
|
-
config.showCloseButton = false;
|
|
74
|
-
const el = await fixture(html`
|
|
75
|
-
<modal-template .config=${config}></modal-template>
|
|
76
|
-
`);
|
|
77
|
-
|
|
78
|
-
const closeButton = el.shadowRoot?.querySelector('.close-button');
|
|
79
|
-
expect(closeButton).to.not.exist;
|
|
80
|
-
});
|
|
81
|
-
|
|
82
|
-
it('shows the properties from the config', async () => {
|
|
83
|
-
const config = new ModalConfig();
|
|
84
|
-
config.title = html`Boop`;
|
|
85
|
-
config.subtitle = html`Bop`;
|
|
86
|
-
config.headline = html`Foo`;
|
|
87
|
-
config.message = html`Bar`;
|
|
88
|
-
|
|
89
|
-
const el = await fixture(html`
|
|
90
|
-
<modal-template .config=${config}></modal-template>
|
|
91
|
-
`);
|
|
92
|
-
|
|
93
|
-
const title = el.shadowRoot?.querySelector('h1');
|
|
94
|
-
const subtitle = el.shadowRoot?.querySelector('h2');
|
|
95
|
-
|
|
96
|
-
const headline = el.shadowRoot?.querySelector('.headline');
|
|
97
|
-
const message = el.shadowRoot?.querySelector('.message');
|
|
98
|
-
|
|
99
|
-
expect(title).to.exist;
|
|
100
|
-
expect(title?.innerText).to.equal('Boop');
|
|
101
|
-
|
|
102
|
-
expect(subtitle).to.exist;
|
|
103
|
-
expect(subtitle?.innerText).to.equal('Bop');
|
|
104
|
-
|
|
105
|
-
expect(headline).to.exist;
|
|
106
|
-
expect(headline?.textContent).to.equal('Foo');
|
|
107
|
-
|
|
108
|
-
expect(message).to.exist;
|
|
109
|
-
expect(message?.textContent).to.equal('Bar');
|
|
110
|
-
});
|
|
111
|
-
});
|
|
1
|
+
import { fixture, expect, oneEvent } from '@open-wc/testing';
|
|
2
|
+
import { html } from 'lit';
|
|
3
|
+
import '../src/modal-template';
|
|
4
|
+
import { ModalConfig } from '../src/modal-config';
|
|
5
|
+
|
|
6
|
+
describe('Modal Template', () => {
|
|
7
|
+
it('has correct default configuration', async () => {
|
|
8
|
+
const el = await fixture(html` <modal-template></modal-template> `);
|
|
9
|
+
|
|
10
|
+
const processingLogo = el.shadowRoot?.querySelector('.processing-logo');
|
|
11
|
+
const headline = el.shadowRoot?.querySelector('.headline');
|
|
12
|
+
const message = el.shadowRoot?.querySelector('.message');
|
|
13
|
+
const title = el.shadowRoot?.querySelector('h1.title') as HTMLElement;
|
|
14
|
+
|
|
15
|
+
expect(headline).to.not.exist;
|
|
16
|
+
expect(message).to.not.exist;
|
|
17
|
+
expect(title).to.not.exist;
|
|
18
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
19
|
+
expect('hidden' in processingLogo!.classList);
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
it('does not show the title if one not provided', async () => {
|
|
23
|
+
const config = new ModalConfig();
|
|
24
|
+
config.title = undefined;
|
|
25
|
+
|
|
26
|
+
const el = await fixture(html`
|
|
27
|
+
<modal-template .config=${config}></modal-template>
|
|
28
|
+
`);
|
|
29
|
+
|
|
30
|
+
const title = el.shadowRoot?.querySelector('h1.title');
|
|
31
|
+
expect(title).to.not.exist;
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
it('emits closeButtonPressed event when close button is pressed', async () => {
|
|
35
|
+
const el = await fixture(html` <modal-template></modal-template> `);
|
|
36
|
+
|
|
37
|
+
const closeButton = el.shadowRoot?.querySelector('.close-button');
|
|
38
|
+
const clickEvent = new MouseEvent('click');
|
|
39
|
+
|
|
40
|
+
setTimeout(() => {
|
|
41
|
+
closeButton?.dispatchEvent(clickEvent);
|
|
42
|
+
});
|
|
43
|
+
const response = await oneEvent(el, 'closeButtonPressed');
|
|
44
|
+
expect(response).to.exist;
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
it('shows the processing indicator if configured to', async () => {
|
|
48
|
+
const config = new ModalConfig();
|
|
49
|
+
config.showProcessingIndicator = true;
|
|
50
|
+
|
|
51
|
+
const el = await fixture(html`
|
|
52
|
+
<modal-template .config=${config}></modal-template>
|
|
53
|
+
`);
|
|
54
|
+
|
|
55
|
+
const processingLogo = el.shadowRoot?.querySelector('.processing-logo');
|
|
56
|
+
const classList = processingLogo?.classList ?? [];
|
|
57
|
+
expect('hidden' in classList).to.equal(false);
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
it('shows the close button if configured to', async () => {
|
|
61
|
+
const config = new ModalConfig();
|
|
62
|
+
config.showCloseButton = true;
|
|
63
|
+
const el = await fixture(html`
|
|
64
|
+
<modal-template .config=${config}></modal-template>
|
|
65
|
+
`);
|
|
66
|
+
|
|
67
|
+
const closeButton = el.shadowRoot?.querySelector('.close-button');
|
|
68
|
+
expect(closeButton).to.exist;
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
it('hides the close button if configured to', async () => {
|
|
72
|
+
const config = new ModalConfig();
|
|
73
|
+
config.showCloseButton = false;
|
|
74
|
+
const el = await fixture(html`
|
|
75
|
+
<modal-template .config=${config}></modal-template>
|
|
76
|
+
`);
|
|
77
|
+
|
|
78
|
+
const closeButton = el.shadowRoot?.querySelector('.close-button');
|
|
79
|
+
expect(closeButton).to.not.exist;
|
|
80
|
+
});
|
|
81
|
+
|
|
82
|
+
it('shows the properties from the config', async () => {
|
|
83
|
+
const config = new ModalConfig();
|
|
84
|
+
config.title = html`Boop`;
|
|
85
|
+
config.subtitle = html`Bop`;
|
|
86
|
+
config.headline = html`Foo`;
|
|
87
|
+
config.message = html`Bar`;
|
|
88
|
+
|
|
89
|
+
const el = await fixture(html`
|
|
90
|
+
<modal-template .config=${config}></modal-template>
|
|
91
|
+
`);
|
|
92
|
+
|
|
93
|
+
const title = el.shadowRoot?.querySelector('h1');
|
|
94
|
+
const subtitle = el.shadowRoot?.querySelector('h2');
|
|
95
|
+
|
|
96
|
+
const headline = el.shadowRoot?.querySelector('.headline');
|
|
97
|
+
const message = el.shadowRoot?.querySelector('.message');
|
|
98
|
+
|
|
99
|
+
expect(title).to.exist;
|
|
100
|
+
expect(title?.innerText).to.equal('Boop');
|
|
101
|
+
|
|
102
|
+
expect(subtitle).to.exist;
|
|
103
|
+
expect(subtitle?.innerText).to.equal('Bop');
|
|
104
|
+
|
|
105
|
+
expect(headline).to.exist;
|
|
106
|
+
expect(headline?.textContent).to.equal('Foo');
|
|
107
|
+
|
|
108
|
+
expect(message).to.exist;
|
|
109
|
+
expect(message?.textContent).to.equal('Bar');
|
|
110
|
+
});
|
|
111
|
+
});
|
package/tsconfig.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"target": "es6",
|
|
4
|
-
"module": "esnext",
|
|
5
|
-
"moduleResolution": "node",
|
|
6
|
-
"noEmitOnError": true,
|
|
7
|
-
"lib": ["es2017", "dom"],
|
|
8
|
-
"strict": true,
|
|
9
|
-
"esModuleInterop": false,
|
|
10
|
-
"allowSyntheticDefaultImports": true,
|
|
11
|
-
"experimentalDecorators": true,
|
|
12
|
-
"importHelpers": true,
|
|
13
|
-
"outDir": "dist",
|
|
14
|
-
"sourceMap": true,
|
|
15
|
-
"inlineSources": true,
|
|
16
|
-
"declaration": true,
|
|
17
|
-
"rootDir": "./"
|
|
18
|
-
},
|
|
19
|
-
"include": ["**/*.ts"]
|
|
20
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "es6",
|
|
4
|
+
"module": "esnext",
|
|
5
|
+
"moduleResolution": "node",
|
|
6
|
+
"noEmitOnError": true,
|
|
7
|
+
"lib": ["es2017", "dom"],
|
|
8
|
+
"strict": true,
|
|
9
|
+
"esModuleInterop": false,
|
|
10
|
+
"allowSyntheticDefaultImports": true,
|
|
11
|
+
"experimentalDecorators": true,
|
|
12
|
+
"importHelpers": true,
|
|
13
|
+
"outDir": "dist",
|
|
14
|
+
"sourceMap": true,
|
|
15
|
+
"inlineSources": true,
|
|
16
|
+
"declaration": true,
|
|
17
|
+
"rootDir": "./"
|
|
18
|
+
},
|
|
19
|
+
"include": ["**/*.ts"]
|
|
20
|
+
}
|