@spectrum-web-components/split-view 0.4.10 → 0.4.11

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 (34) hide show
  1. package/custom-elements.json +3 -3
  2. package/package.json +24 -7
  3. package/sp-split-view.dev.js +3 -0
  4. package/sp-split-view.dev.js.map +7 -0
  5. package/sp-split-view.js +3 -14
  6. package/sp-split-view.js.map +7 -1
  7. package/src/SplitView.dev.js +319 -0
  8. package/src/SplitView.dev.js.map +7 -0
  9. package/src/SplitView.js +279 -310
  10. package/src/SplitView.js.map +7 -1
  11. package/src/index.dev.js +2 -0
  12. package/src/index.dev.js.map +7 -0
  13. package/src/index.js +2 -13
  14. package/src/index.js.map +7 -1
  15. package/src/spectrum-split-view.css.dev.js +99 -0
  16. package/src/spectrum-split-view.css.dev.js.map +7 -0
  17. package/src/spectrum-split-view.css.js +3 -14
  18. package/src/spectrum-split-view.css.js.map +7 -1
  19. package/src/split-view.css.dev.js +111 -0
  20. package/src/split-view.css.dev.js.map +7 -0
  21. package/src/split-view.css.js +3 -14
  22. package/src/split-view.css.js.map +7 -1
  23. package/src/types.dev.js +1 -0
  24. package/src/types.dev.js.map +7 -0
  25. package/src/types.js +1 -13
  26. package/src/types.js.map +7 -1
  27. package/stories/split-view.stories.js +36 -47
  28. package/stories/split-view.stories.js.map +7 -1
  29. package/test/benchmark/basic-test.js +5 -16
  30. package/test/benchmark/basic-test.js.map +7 -1
  31. package/test/split-view.test-vrt.js +4 -15
  32. package/test/split-view.test-vrt.js.map +7 -1
  33. package/test/split-view.test.js +540 -542
  34. package/test/split-view.test.js.map +7 -1
package/test/split-view.test.js CHANGED
@@ -1,53 +1,59 @@
1
- /*
2
- Copyright 2020 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License. You may obtain a copy
5
- of the License at http://www.apache.org/licenses/LICENSE-2.0
6
-
7
- Unless required by applicable law or agreed to in writing, software distributed under
8
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
- OF ANY KIND, either express or implied. See the License for the specific language
10
- governing permissions and limitations under the License.
11
- */
12
- import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
13
- import '../sp-split-view.js';
14
- import { arrowDownEvent, arrowLeftEvent, arrowRightEvent, arrowUpEvent, endEvent, homeEvent, pageDownEvent, pageUpEvent, shiftTabEvent, } from '../../../test/testing-helpers.js';
15
- import { spy } from 'sinon';
16
- describe('SplitView', () => {
17
- it('loads default (horizontal) split-view accessibly', async () => {
18
- const el = await fixture(html `
1
+ import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
2
+ import "@spectrum-web-components/split-view/sp-split-view.js";
3
+ import {
4
+ arrowDownEvent,
5
+ arrowLeftEvent,
6
+ arrowRightEvent,
7
+ arrowUpEvent,
8
+ endEvent,
9
+ homeEvent,
10
+ pageDownEvent,
11
+ pageUpEvent,
12
+ shiftTabEvent,
13
+ testForLitDevWarnings
14
+ } from "../../../test/testing-helpers.js";
15
+ import { spy } from "sinon";
16
+ describe("SplitView", () => {
17
+ testForLitDevWarnings(async () => await fixture(html`
18
+ <sp-split-view primary-size="100">
19
+ <div>First panel</div>
20
+ <div>Second panel</div>
21
+ </sp-split-view>
22
+ `));
23
+ it("loads default (horizontal) split-view accessibly", async () => {
24
+ const el = await fixture(html`
19
25
  <sp-split-view primary-size="100">
20
26
  <div>First panel</div>
21
27
  <div>Second panel</div>
22
28
  </sp-split-view>
23
29
  `);
24
- await elementUpdated(el);
25
- await expect(el).to.be.accessible();
26
- expect(el.splitterPos || 0).to.equal(100);
27
- expect(el.resizable).to.be.false;
28
- expect(el.collapsible).to.be.false;
29
- const gripper = el.shadowRoot.querySelector('#gripper');
30
- expect(gripper).to.be.null;
31
- const splitter = el.shadowRoot.querySelector('#splitter');
32
- expect(getComputedStyle(splitter).cursor).to.equal('auto');
33
- });
34
- it('loads horizontal [resizable] split-view accessibly', async () => {
35
- const el = await fixture(html `
30
+ await elementUpdated(el);
31
+ await expect(el).to.be.accessible();
32
+ expect(el.splitterPos || 0).to.equal(100);
33
+ expect(el.resizable).to.be.false;
34
+ expect(el.collapsible).to.be.false;
35
+ const gripper = el.shadowRoot.querySelector("#gripper");
36
+ expect(gripper).to.be.null;
37
+ const splitter = el.shadowRoot.querySelector("#splitter");
38
+ expect(getComputedStyle(splitter).cursor).to.equal("auto");
39
+ });
40
+ it("loads horizontal [resizable] split-view accessibly", async () => {
41
+ const el = await fixture(html`
36
42
  <sp-split-view resizable primary-size="100px">
37
43
  <div>First panel</div>
38
44
  <div>Second panel</div>
39
45
  </sp-split-view>
40
46
  `);
41
- await elementUpdated(el);
42
- await expect(el).to.be.accessible();
43
- expect(el.splitterPos || 0).to.equal(100);
44
- const gripper = el.shadowRoot.querySelector('#gripper');
45
- await expect(gripper).to.be.accessible();
46
- const splitter = el.shadowRoot.querySelector('#splitter');
47
- expect(getComputedStyle(splitter).cursor).to.equal('ew-resize');
48
- });
49
- it('loads [vertical] split-view accessibly', async () => {
50
- const el = await fixture(html `
47
+ await elementUpdated(el);
48
+ await expect(el).to.be.accessible();
49
+ expect(el.splitterPos || 0).to.equal(100);
50
+ const gripper = el.shadowRoot.querySelector("#gripper");
51
+ await expect(gripper).to.be.accessible();
52
+ const splitter = el.shadowRoot.querySelector("#splitter");
53
+ expect(getComputedStyle(splitter).cursor).to.equal("ew-resize");
54
+ });
55
+ it("loads [vertical] split-view accessibly", async () => {
56
+ const el = await fixture(html`
51
57
  <sp-split-view
52
58
  vertical
53
59
  primary-size="75%"
@@ -57,28 +63,28 @@ describe('SplitView', () => {
57
63
  <div>Second panel</div>
58
64
  </sp-split-view>
59
65
  `);
60
- await elementUpdated(el);
61
- await expect(el).to.be.accessible();
62
- expect(el.splitterPos || 0).to.equal(300);
63
- const splitter = el.shadowRoot.querySelector('#splitter');
64
- expect(getComputedStyle(splitter).cursor).to.equal('auto');
65
- });
66
- it('loads [vertical] [resizable] split-view accessibly', async () => {
67
- const el = await fixture(html `
66
+ await elementUpdated(el);
67
+ await expect(el).to.be.accessible();
68
+ expect(el.splitterPos || 0).to.equal(300);
69
+ const splitter = el.shadowRoot.querySelector("#splitter");
70
+ expect(getComputedStyle(splitter).cursor).to.equal("auto");
71
+ });
72
+ it("loads [vertical] [resizable] split-view accessibly", async () => {
73
+ const el = await fixture(html`
68
74
  <sp-split-view vertical resizable style="height: 400px">
69
75
  <div>First panel</div>
70
76
  <div>Second panel</div>
71
77
  </sp-split-view>
72
78
  `);
73
- await elementUpdated(el);
74
- await expect(el).to.be.accessible();
75
- expect(el.splitterPos || 0).to.equal(200);
76
- const splitter = el.shadowRoot.querySelector('#splitter');
77
- expect(getComputedStyle(splitter).cursor).to.equal('ns-resize');
78
- });
79
- it('set all panel values', async () => {
80
- const splitTotalWidth = 400;
81
- const el = await fixture(html `
79
+ await elementUpdated(el);
80
+ await expect(el).to.be.accessible();
81
+ expect(el.splitterPos || 0).to.equal(200);
82
+ const splitter = el.shadowRoot.querySelector("#splitter");
83
+ expect(getComputedStyle(splitter).cursor).to.equal("ns-resize");
84
+ });
85
+ it("set all panel values", async () => {
86
+ const splitTotalWidth = 400;
87
+ const el = await fixture(html`
82
88
  <sp-split-view
83
89
  resizable
84
90
  primary-min="50"
@@ -90,16 +96,16 @@ describe('SplitView', () => {
90
96
  <div>Second panel</div>
91
97
  </sp-split-view>
92
98
  `);
93
- await elementUpdated(el);
94
- expect(el.resizable).to.be.true;
95
- expect(el.primaryMin).to.equal(50);
96
- expect(el.primaryMax).to.equal(300);
97
- expect(el.secondaryMin).to.equal(50);
98
- expect(el.secondaryMax).to.equal(3840);
99
- });
100
- it('use auto height in primary pane', async () => {
101
- const splitTotalWidth = 400;
102
- const el = await fixture(html `
99
+ await elementUpdated(el);
100
+ expect(el.resizable).to.be.true;
101
+ expect(el.primaryMin).to.equal(50);
102
+ expect(el.primaryMax).to.equal(300);
103
+ expect(el.secondaryMin).to.equal(50);
104
+ expect(el.secondaryMax).to.equal(3840);
105
+ });
106
+ it("use auto height in primary pane", async () => {
107
+ const splitTotalWidth = 400;
108
+ const el = await fixture(html`
103
109
  <sp-split-view
104
110
  resizable
105
111
  primary-size="auto"
@@ -117,15 +123,15 @@ describe('SplitView', () => {
117
123
  <div>Second panel</div>
118
124
  </sp-split-view>
119
125
  `);
120
- await elementUpdated(el);
121
- expect(el.resizable).to.be.true;
122
- expect(el.primarySize).to.equal('auto');
123
- expect(el.splitterPos || 0).to.equal(398);
124
- });
125
- it('resizes when pointer moves and resizable is enabled [ltr]', async () => {
126
- let pointerId = -1;
127
- const splitTotalWidth = 400;
128
- const el = await fixture(html `
126
+ await elementUpdated(el);
127
+ expect(el.resizable).to.be.true;
128
+ expect(el.primarySize).to.equal("auto");
129
+ expect(el.splitterPos || 0).to.equal(398);
130
+ });
131
+ it("resizes when pointer moves and resizable is enabled [ltr]", async () => {
132
+ let pointerId = -1;
133
+ const splitTotalWidth = 400;
134
+ const el = await fixture(html`
129
135
  <sp-split-view
130
136
  resizable
131
137
  primary-min="50"
@@ -136,50 +142,47 @@ describe('SplitView', () => {
136
142
  <div>Second panel</div>
137
143
  </sp-split-view>
138
144
  `);
139
- await elementUpdated(el);
140
- expect(el.resizable).to.be.true;
141
- const splitter = el.shadowRoot.querySelector('#splitter');
142
- splitter.setPointerCapture = (id) => (pointerId = id);
143
- splitter.releasePointerCapture = (id) => (pointerId = id);
144
- let pos = el.splitterPos;
145
- expect(el.splitterPos).to.equal(200);
146
- splitter.dispatchEvent(new PointerEvent('pointerdown', { pointerId: 1 }));
147
- await elementUpdated(el);
148
- expect(pointerId).to.equal(1);
149
- pos -= 10;
150
- splitter.dispatchEvent(new PointerEvent('pointermove', {
151
- clientX: pos,
152
- }));
153
- await elementUpdated(el);
154
- expect(Math.round(el.splitterPos)).to.equal(pos - el.getBoundingClientRect().left);
155
- // don't collapse to start
156
- splitter.dispatchEvent(new PointerEvent('pointermove', {
157
- clientX: 0,
158
- }));
159
- await elementUpdated(el);
160
- expect(el.splitterPos).to.equal(el.primaryMin);
161
- expect(getComputedStyle(splitter).cursor).to.equal('e-resize');
162
- // don't collapse to end
163
- splitter.dispatchEvent(new PointerEvent('pointermove', {
164
- clientX: splitTotalWidth,
165
- }));
166
- await elementUpdated(el);
167
- expect(el.splitterPos, '350 first time').to.equal(splitTotalWidth - el.secondaryMin);
168
- expect(getComputedStyle(splitter).cursor).to.equal('w-resize');
169
- splitter.dispatchEvent(new PointerEvent('pointerup'));
170
- await elementUpdated(el);
171
- // don't change anything when triggering mouseevent with right button click
172
- splitter.dispatchEvent(new MouseEvent('pointerdown', { button: 2, cancelable: true }));
173
- await elementUpdated(el);
174
- splitter.dispatchEvent(new PointerEvent('pointermove', {
175
- clientX: 0,
176
- }));
177
- expect(el.splitterPos, '350 second time, because right click').to.equal(splitTotalWidth - el.secondaryMin);
178
- });
179
- it('resizes when pointer moves and resizable is enabled [rtl]', async () => {
180
- let pointerId = -1;
181
- const splitTotalWidth = 400;
182
- const el = await fixture(html `
145
+ await elementUpdated(el);
146
+ expect(el.resizable).to.be.true;
147
+ const splitter = el.shadowRoot.querySelector("#splitter");
148
+ splitter.setPointerCapture = (id) => pointerId = id;
149
+ splitter.releasePointerCapture = (id) => pointerId = id;
150
+ let pos = el.splitterPos;
151
+ expect(el.splitterPos).to.equal(200);
152
+ splitter.dispatchEvent(new PointerEvent("pointerdown", { pointerId: 1 }));
153
+ await elementUpdated(el);
154
+ expect(pointerId).to.equal(1);
155
+ pos -= 10;
156
+ splitter.dispatchEvent(new PointerEvent("pointermove", {
157
+ clientX: pos
158
+ }));
159
+ await elementUpdated(el);
160
+ expect(Math.round(el.splitterPos)).to.equal(pos - el.getBoundingClientRect().left);
161
+ splitter.dispatchEvent(new PointerEvent("pointermove", {
162
+ clientX: 0
163
+ }));
164
+ await elementUpdated(el);
165
+ expect(el.splitterPos).to.equal(el.primaryMin);
166
+ expect(getComputedStyle(splitter).cursor).to.equal("e-resize");
167
+ splitter.dispatchEvent(new PointerEvent("pointermove", {
168
+ clientX: splitTotalWidth
169
+ }));
170
+ await elementUpdated(el);
171
+ expect(el.splitterPos, "350 first time").to.equal(splitTotalWidth - el.secondaryMin);
172
+ expect(getComputedStyle(splitter).cursor).to.equal("w-resize");
173
+ splitter.dispatchEvent(new PointerEvent("pointerup"));
174
+ await elementUpdated(el);
175
+ splitter.dispatchEvent(new MouseEvent("pointerdown", { button: 2, cancelable: true }));
176
+ await elementUpdated(el);
177
+ splitter.dispatchEvent(new PointerEvent("pointermove", {
178
+ clientX: 0
179
+ }));
180
+ expect(el.splitterPos, "350 second time, because right click").to.equal(splitTotalWidth - el.secondaryMin);
181
+ });
182
+ it("resizes when pointer moves and resizable is enabled [rtl]", async () => {
183
+ let pointerId = -1;
184
+ const splitTotalWidth = 400;
185
+ const el = await fixture(html`
183
186
  <sp-split-view
184
187
  resizable
185
188
  primary-min="50"
@@ -191,37 +194,37 @@ describe('SplitView', () => {
191
194
  <div>Second panel</div>
192
195
  </sp-split-view>
193
196
  `);
194
- await elementUpdated(el);
195
- expect(el.resizable).to.be.true;
196
- const splitter = el.shadowRoot.querySelector('#splitter');
197
- splitter.setPointerCapture = (id) => (pointerId = id);
198
- splitter.releasePointerCapture = (id) => (pointerId = id);
199
- let pos = el.splitterPos || 0;
200
- splitter.dispatchEvent(new PointerEvent('pointerdown', { pointerId: 1 }));
201
- await elementUpdated(el);
202
- expect(pointerId).to.equal(1);
203
- pos = el.getBoundingClientRect().right - 100;
204
- splitter.dispatchEvent(new PointerEvent('pointermove', {
205
- clientX: pos,
206
- }));
207
- await elementUpdated(el);
208
- expect(Math.round(el.splitterPos || 0)).to.equal(el.getBoundingClientRect().right - pos);
209
- splitter.dispatchEvent(new PointerEvent('pointermove', {
210
- clientX: 0,
211
- }));
212
- await elementUpdated(el);
213
- expect(el.splitterPos || 0).to.equal(splitTotalWidth - el.secondaryMin);
214
- expect(getComputedStyle(splitter).cursor).to.equal('e-resize');
215
- splitter.dispatchEvent(new PointerEvent('pointermove', {
216
- clientX: el.getBoundingClientRect().right,
217
- }));
218
- await elementUpdated(el);
219
- expect(el.splitterPos || 0).to.equal(el.primaryMin);
220
- expect(getComputedStyle(splitter).cursor).to.equal('w-resize');
221
- });
222
- it('resizes to start pos when pointer moves in horizontal splitview', async () => {
223
- let pointerId = -1;
224
- const el = await fixture(html `
197
+ await elementUpdated(el);
198
+ expect(el.resizable).to.be.true;
199
+ const splitter = el.shadowRoot.querySelector("#splitter");
200
+ splitter.setPointerCapture = (id) => pointerId = id;
201
+ splitter.releasePointerCapture = (id) => pointerId = id;
202
+ let pos = el.splitterPos || 0;
203
+ splitter.dispatchEvent(new PointerEvent("pointerdown", { pointerId: 1 }));
204
+ await elementUpdated(el);
205
+ expect(pointerId).to.equal(1);
206
+ pos = el.getBoundingClientRect().right - 100;
207
+ splitter.dispatchEvent(new PointerEvent("pointermove", {
208
+ clientX: pos
209
+ }));
210
+ await elementUpdated(el);
211
+ expect(Math.round(el.splitterPos || 0)).to.equal(el.getBoundingClientRect().right - pos);
212
+ splitter.dispatchEvent(new PointerEvent("pointermove", {
213
+ clientX: 0
214
+ }));
215
+ await elementUpdated(el);
216
+ expect(el.splitterPos || 0).to.equal(splitTotalWidth - el.secondaryMin);
217
+ expect(getComputedStyle(splitter).cursor).to.equal("e-resize");
218
+ splitter.dispatchEvent(new PointerEvent("pointermove", {
219
+ clientX: el.getBoundingClientRect().right
220
+ }));
221
+ await elementUpdated(el);
222
+ expect(el.splitterPos || 0).to.equal(el.primaryMin);
223
+ expect(getComputedStyle(splitter).cursor).to.equal("w-resize");
224
+ });
225
+ it("resizes to start pos when pointer moves in horizontal splitview", async () => {
226
+ let pointerId = -1;
227
+ const el = await fixture(html`
225
228
  <sp-split-view
226
229
  resizable
227
230
  secondary-min="50"
@@ -231,27 +234,27 @@ describe('SplitView', () => {
231
234
  <div>Second panel</div>
232
235
  </sp-split-view>
233
236
  `);
234
- await elementUpdated(el);
235
- const splitter = el.shadowRoot.querySelector('#splitter');
236
- splitter.setPointerCapture = (id) => (pointerId = id);
237
- splitter.releasePointerCapture = (id) => (pointerId = id);
238
- splitter.dispatchEvent(new PointerEvent('pointerdown', { pointerId: 1 }));
239
- await elementUpdated(el);
240
- expect(pointerId).to.equal(1);
241
- splitter.dispatchEvent(new PointerEvent('pointermove', {
242
- clientX: -10,
243
- }));
244
- await elementUpdated(el);
245
- expect(el.splitterPos || 0).to.equal(0);
246
- splitter.dispatchEvent(new PointerEvent('pointerup'));
247
- await elementUpdated(el);
248
- expect(splitter.classList.contains('is-collapsed-start')).to.be.true;
249
- expect(getComputedStyle(splitter).cursor).to.equal('e-resize');
250
- });
251
- it('resizes to end pos when pointer moves in horizontal splitview', async () => {
252
- let pointerId = -1;
253
- const splitTotalWidth = 400;
254
- const el = await fixture(html `
237
+ await elementUpdated(el);
238
+ const splitter = el.shadowRoot.querySelector("#splitter");
239
+ splitter.setPointerCapture = (id) => pointerId = id;
240
+ splitter.releasePointerCapture = (id) => pointerId = id;
241
+ splitter.dispatchEvent(new PointerEvent("pointerdown", { pointerId: 1 }));
242
+ await elementUpdated(el);
243
+ expect(pointerId).to.equal(1);
244
+ splitter.dispatchEvent(new PointerEvent("pointermove", {
245
+ clientX: -10
246
+ }));
247
+ await elementUpdated(el);
248
+ expect(el.splitterPos || 0).to.equal(0);
249
+ splitter.dispatchEvent(new PointerEvent("pointerup"));
250
+ await elementUpdated(el);
251
+ expect(splitter.classList.contains("is-collapsed-start")).to.be.true;
252
+ expect(getComputedStyle(splitter).cursor).to.equal("e-resize");
253
+ });
254
+ it("resizes to end pos when pointer moves in horizontal splitview", async () => {
255
+ let pointerId = -1;
256
+ const splitTotalWidth = 400;
257
+ const el = await fixture(html`
255
258
  <sp-split-view
256
259
  resizable
257
260
  primary-min="50"
@@ -261,28 +264,28 @@ describe('SplitView', () => {
261
264
  <div>Second panel</div>
262
265
  </sp-split-view>
263
266
  `);
264
- await elementUpdated(el);
265
- const splitter = el.shadowRoot.querySelector('#splitter');
266
- splitter.setPointerCapture = (id) => (pointerId = id);
267
- splitter.releasePointerCapture = (id) => (pointerId = id);
268
- expect(el.primaryMin).to.equal(50);
269
- expect(el.resizable).to.be.true;
270
- splitter.dispatchEvent(new PointerEvent('pointerdown', { pointerId: 1 }));
271
- await elementUpdated(el);
272
- expect(pointerId).to.equal(1);
273
- splitter.dispatchEvent(new PointerEvent('pointermove', {
274
- clientX: splitTotalWidth + 10,
275
- }));
276
- await elementUpdated(el);
277
- expect(el.splitterPos || 0).to.equal(splitTotalWidth - el.splitterSize);
278
- splitter.dispatchEvent(new PointerEvent('pointerup'));
279
- await elementUpdated(el);
280
- expect(splitter.classList.contains('is-collapsed-end')).to.be.true;
281
- expect(getComputedStyle(splitter).cursor).to.equal('w-resize');
282
- });
283
- it('resizes to start pos when pointer moves in [vertical] splitview', async () => {
284
- let pointerId = -1;
285
- const el = await fixture(html `
267
+ await elementUpdated(el);
268
+ const splitter = el.shadowRoot.querySelector("#splitter");
269
+ splitter.setPointerCapture = (id) => pointerId = id;
270
+ splitter.releasePointerCapture = (id) => pointerId = id;
271
+ expect(el.primaryMin).to.equal(50);
272
+ expect(el.resizable).to.be.true;
273
+ splitter.dispatchEvent(new PointerEvent("pointerdown", { pointerId: 1 }));
274
+ await elementUpdated(el);
275
+ expect(pointerId).to.equal(1);
276
+ splitter.dispatchEvent(new PointerEvent("pointermove", {
277
+ clientX: splitTotalWidth + 10
278
+ }));
279
+ await elementUpdated(el);
280
+ expect(el.splitterPos || 0).to.equal(splitTotalWidth - el.splitterSize);
281
+ splitter.dispatchEvent(new PointerEvent("pointerup"));
282
+ await elementUpdated(el);
283
+ expect(splitter.classList.contains("is-collapsed-end")).to.be.true;
284
+ expect(getComputedStyle(splitter).cursor).to.equal("w-resize");
285
+ });
286
+ it("resizes to start pos when pointer moves in [vertical] splitview", async () => {
287
+ let pointerId = -1;
288
+ const el = await fixture(html`
286
289
  <sp-split-view
287
290
  vertical
288
291
  resizable
@@ -294,27 +297,27 @@ describe('SplitView', () => {
294
297
  <div>Second panel</div>
295
298
  </sp-split-view>
296
299
  `);
297
- await elementUpdated(el);
298
- const splitter = el.shadowRoot.querySelector('#splitter');
299
- splitter.setPointerCapture = (id) => (pointerId = id);
300
- splitter.releasePointerCapture = (id) => (pointerId = id);
301
- splitter.dispatchEvent(new PointerEvent('pointerdown', { pointerId: 1 }));
302
- await elementUpdated(el);
303
- expect(pointerId).to.equal(1);
304
- splitter.dispatchEvent(new PointerEvent('pointermove', {
305
- clientY: 0,
306
- }));
307
- await elementUpdated(el);
308
- expect(el.splitterPos || 0).to.equal(0);
309
- splitter.dispatchEvent(new PointerEvent('pointerup'));
310
- await elementUpdated(el);
311
- expect(splitter.classList.contains('is-collapsed-start')).to.be.true;
312
- expect(getComputedStyle(splitter).cursor).to.equal('s-resize');
313
- });
314
- it('resizes to end pos when pointer moves in [vertical] splitview', async () => {
315
- let pointerId = -1;
316
- const splitTotalHeight = 400;
317
- const el = await fixture(html `
300
+ await elementUpdated(el);
301
+ const splitter = el.shadowRoot.querySelector("#splitter");
302
+ splitter.setPointerCapture = (id) => pointerId = id;
303
+ splitter.releasePointerCapture = (id) => pointerId = id;
304
+ splitter.dispatchEvent(new PointerEvent("pointerdown", { pointerId: 1 }));
305
+ await elementUpdated(el);
306
+ expect(pointerId).to.equal(1);
307
+ splitter.dispatchEvent(new PointerEvent("pointermove", {
308
+ clientY: 0
309
+ }));
310
+ await elementUpdated(el);
311
+ expect(el.splitterPos || 0).to.equal(0);
312
+ splitter.dispatchEvent(new PointerEvent("pointerup"));
313
+ await elementUpdated(el);
314
+ expect(splitter.classList.contains("is-collapsed-start")).to.be.true;
315
+ expect(getComputedStyle(splitter).cursor).to.equal("s-resize");
316
+ });
317
+ it("resizes to end pos when pointer moves in [vertical] splitview", async () => {
318
+ let pointerId = -1;
319
+ const splitTotalHeight = 400;
320
+ const el = await fixture(html`
318
321
  <sp-split-view
319
322
  vertical
320
323
  resizable
@@ -325,28 +328,28 @@ describe('SplitView', () => {
325
328
  <div>Second panel</div>
326
329
  </sp-split-view>
327
330
  `);
328
- await elementUpdated(el);
329
- const splitter = el.shadowRoot.querySelector('#splitter');
330
- splitter.setPointerCapture = (id) => (pointerId = id);
331
- splitter.releasePointerCapture = (id) => (pointerId = id);
332
- expect(el.primaryMin).to.equal(50);
333
- expect(el.resizable).to.be.true;
334
- splitter.dispatchEvent(new PointerEvent('pointerdown', { pointerId: 1 }));
335
- await elementUpdated(el);
336
- expect(pointerId).to.equal(1);
337
- splitter.dispatchEvent(new PointerEvent('pointermove', {
338
- clientY: splitTotalHeight + 10,
339
- }));
340
- await elementUpdated(el);
341
- expect(el.splitterPos || 0).to.equal(splitTotalHeight - el.splitterSize);
342
- splitter.dispatchEvent(new PointerEvent('pointerup'));
343
- await elementUpdated(el);
344
- expect(splitter.classList.contains('is-collapsed-end')).to.be.true;
345
- expect(getComputedStyle(splitter).cursor).to.equal('n-resize');
346
- });
347
- it('resizes and collapses when pointer moves in horizontal splitview', async () => {
348
- let pointerId = -1;
349
- const el = await fixture(html `
331
+ await elementUpdated(el);
332
+ const splitter = el.shadowRoot.querySelector("#splitter");
333
+ splitter.setPointerCapture = (id) => pointerId = id;
334
+ splitter.releasePointerCapture = (id) => pointerId = id;
335
+ expect(el.primaryMin).to.equal(50);
336
+ expect(el.resizable).to.be.true;
337
+ splitter.dispatchEvent(new PointerEvent("pointerdown", { pointerId: 1 }));
338
+ await elementUpdated(el);
339
+ expect(pointerId).to.equal(1);
340
+ splitter.dispatchEvent(new PointerEvent("pointermove", {
341
+ clientY: splitTotalHeight + 10
342
+ }));
343
+ await elementUpdated(el);
344
+ expect(el.splitterPos || 0).to.equal(splitTotalHeight - el.splitterSize);
345
+ splitter.dispatchEvent(new PointerEvent("pointerup"));
346
+ await elementUpdated(el);
347
+ expect(splitter.classList.contains("is-collapsed-end")).to.be.true;
348
+ expect(getComputedStyle(splitter).cursor).to.equal("n-resize");
349
+ });
350
+ it("resizes and collapses when pointer moves in horizontal splitview", async () => {
351
+ let pointerId = -1;
352
+ const el = await fixture(html`
350
353
  <sp-split-view
351
354
  resizable
352
355
  collapsible
@@ -358,49 +361,49 @@ describe('SplitView', () => {
358
361
  <div>Second panel</div>
359
362
  </sp-split-view>
360
363
  `);
361
- await elementUpdated(el);
362
- expect(el.collapsible).to.be.true;
363
- const splitter = el.shadowRoot.querySelector('#splitter');
364
- splitter.setPointerCapture = (id) => (pointerId = id);
365
- splitter.releasePointerCapture = (id) => (pointerId = id);
366
- splitter.dispatchEvent(new PointerEvent('pointerdown', { pointerId: 1 }));
367
- await elementUpdated(el);
368
- expect(pointerId).to.equal(1);
369
- splitter.dispatchEvent(new PointerEvent('pointermove', {
370
- clientX: 40,
371
- }));
372
- await elementUpdated(el);
373
- expect(el.splitterPos || 0).to.equal(50);
374
- expect(splitter.classList.contains('is-collapsed-start')).to.be.false;
375
- expect(getComputedStyle(splitter).cursor).to.equal('ew-resize');
376
- splitter.dispatchEvent(new PointerEvent('pointermove', {
377
- clientX: -10,
378
- }));
379
- await elementUpdated(el);
380
- expect(el.splitterPos || 0).to.equal(0);
381
- expect(splitter.classList.contains('is-collapsed-start')).to.be.true;
382
- expect(getComputedStyle(splitter).cursor).to.equal('e-resize');
383
- splitter.dispatchEvent(new PointerEvent('pointermove', {
384
- clientX: el.getBoundingClientRect().right - 10,
385
- }));
386
- await elementUpdated(el);
387
- expect(el.splitterPos || 0).to.equal(350);
388
- expect(splitter.classList.contains('is-collapsed-end')).to.be.false;
389
- expect(getComputedStyle(splitter).cursor).to.equal('ew-resize');
390
- splitter.dispatchEvent(new PointerEvent('pointermove', {
391
- clientX: el.getBoundingClientRect().right,
392
- }));
393
- await elementUpdated(el);
394
- expect(el.splitterPos || 0).to.equal(400 - el.splitterSize);
395
- splitter.dispatchEvent(new PointerEvent('pointerup'));
396
- await elementUpdated(el);
397
- expect(splitter.classList.contains('is-collapsed-end')).to.be.true;
398
- expect(getComputedStyle(splitter).cursor).to.equal('w-resize');
399
- });
400
- it('resizes and collapses when pointer moves in [vertical] splitview', async () => {
401
- let pointerId = -1;
402
- const splitTotalHeight = 400;
403
- const el = await fixture(html `
364
+ await elementUpdated(el);
365
+ expect(el.collapsible).to.be.true;
366
+ const splitter = el.shadowRoot.querySelector("#splitter");
367
+ splitter.setPointerCapture = (id) => pointerId = id;
368
+ splitter.releasePointerCapture = (id) => pointerId = id;
369
+ splitter.dispatchEvent(new PointerEvent("pointerdown", { pointerId: 1 }));
370
+ await elementUpdated(el);
371
+ expect(pointerId).to.equal(1);
372
+ splitter.dispatchEvent(new PointerEvent("pointermove", {
373
+ clientX: 40
374
+ }));
375
+ await elementUpdated(el);
376
+ expect(el.splitterPos || 0).to.equal(50);
377
+ expect(splitter.classList.contains("is-collapsed-start")).to.be.false;
378
+ expect(getComputedStyle(splitter).cursor).to.equal("ew-resize");
379
+ splitter.dispatchEvent(new PointerEvent("pointermove", {
380
+ clientX: -10
381
+ }));
382
+ await elementUpdated(el);
383
+ expect(el.splitterPos || 0).to.equal(0);
384
+ expect(splitter.classList.contains("is-collapsed-start")).to.be.true;
385
+ expect(getComputedStyle(splitter).cursor).to.equal("e-resize");
386
+ splitter.dispatchEvent(new PointerEvent("pointermove", {
387
+ clientX: el.getBoundingClientRect().right - 10
388
+ }));
389
+ await elementUpdated(el);
390
+ expect(el.splitterPos || 0).to.equal(350);
391
+ expect(splitter.classList.contains("is-collapsed-end")).to.be.false;
392
+ expect(getComputedStyle(splitter).cursor).to.equal("ew-resize");
393
+ splitter.dispatchEvent(new PointerEvent("pointermove", {
394
+ clientX: el.getBoundingClientRect().right
395
+ }));
396
+ await elementUpdated(el);
397
+ expect(el.splitterPos || 0).to.equal(400 - el.splitterSize);
398
+ splitter.dispatchEvent(new PointerEvent("pointerup"));
399
+ await elementUpdated(el);
400
+ expect(splitter.classList.contains("is-collapsed-end")).to.be.true;
401
+ expect(getComputedStyle(splitter).cursor).to.equal("w-resize");
402
+ });
403
+ it("resizes and collapses when pointer moves in [vertical] splitview", async () => {
404
+ let pointerId = -1;
405
+ const splitTotalHeight = 400;
406
+ const el = await fixture(html`
404
407
  <sp-split-view
405
408
  vertical
406
409
  resizable
@@ -413,47 +416,47 @@ describe('SplitView', () => {
413
416
  <div>Second panel</div>
414
417
  </sp-split-view>
415
418
  `);
416
- await elementUpdated(el);
417
- const splitter = el.shadowRoot.querySelector('#splitter');
418
- splitter.setPointerCapture = (id) => (pointerId = id);
419
- splitter.releasePointerCapture = (id) => (pointerId = id);
420
- splitter.dispatchEvent(new PointerEvent('pointerdown', { pointerId: 1 }));
421
- await elementUpdated(el);
422
- expect(pointerId).to.equal(1);
423
- splitter.dispatchEvent(new PointerEvent('pointermove', {
424
- clientY: 40,
425
- }));
426
- await elementUpdated(el);
427
- expect(el.splitterPos || 0).to.equal(50);
428
- expect(splitter.classList.contains('is-collapsed-start')).to.be.false;
429
- expect(getComputedStyle(splitter).cursor).to.equal('ns-resize');
430
- splitter.dispatchEvent(new PointerEvent('pointermove', {
431
- clientY: -10,
432
- }));
433
- await elementUpdated(el);
434
- expect(el.splitterPos || 0).to.equal(0);
435
- expect(splitter.classList.contains('is-collapsed-start')).to.be.true;
436
- expect(getComputedStyle(splitter).cursor).to.equal('s-resize');
437
- splitter.dispatchEvent(new PointerEvent('pointermove', {
438
- clientY: splitTotalHeight - 40,
439
- }));
440
- await elementUpdated(el);
441
- expect(el.splitterPos || 0).to.equal(splitTotalHeight - 50);
442
- expect(splitter.classList.contains('is-collapsed-end')).to.be.false;
443
- expect(getComputedStyle(splitter).cursor).to.equal('ns-resize');
444
- splitter.dispatchEvent(new PointerEvent('pointermove', {
445
- clientY: splitTotalHeight + 50,
446
- }));
447
- await elementUpdated(el);
448
- expect(el.splitterPos || 0).to.equal(splitTotalHeight - el.splitterSize);
449
- splitter.dispatchEvent(new PointerEvent('pointerup'));
450
- await elementUpdated(el);
451
- expect(splitter.classList.contains('is-collapsed-end')).to.be.true;
452
- expect(getComputedStyle(splitter).cursor).to.equal('n-resize');
453
- });
454
- it('handles focus and keyboard inputs and resizes accordingly for horizontal splitviews [ltr]', async () => {
455
- const splitTotalWidth = 500;
456
- const el = await fixture(html `
419
+ await elementUpdated(el);
420
+ const splitter = el.shadowRoot.querySelector("#splitter");
421
+ splitter.setPointerCapture = (id) => pointerId = id;
422
+ splitter.releasePointerCapture = (id) => pointerId = id;
423
+ splitter.dispatchEvent(new PointerEvent("pointerdown", { pointerId: 1 }));
424
+ await elementUpdated(el);
425
+ expect(pointerId).to.equal(1);
426
+ splitter.dispatchEvent(new PointerEvent("pointermove", {
427
+ clientY: 40
428
+ }));
429
+ await elementUpdated(el);
430
+ expect(el.splitterPos || 0).to.equal(50);
431
+ expect(splitter.classList.contains("is-collapsed-start")).to.be.false;
432
+ expect(getComputedStyle(splitter).cursor).to.equal("ns-resize");
433
+ splitter.dispatchEvent(new PointerEvent("pointermove", {
434
+ clientY: -10
435
+ }));
436
+ await elementUpdated(el);
437
+ expect(el.splitterPos || 0).to.equal(0);
438
+ expect(splitter.classList.contains("is-collapsed-start")).to.be.true;
439
+ expect(getComputedStyle(splitter).cursor).to.equal("s-resize");
440
+ splitter.dispatchEvent(new PointerEvent("pointermove", {
441
+ clientY: splitTotalHeight - 40
442
+ }));
443
+ await elementUpdated(el);
444
+ expect(el.splitterPos || 0).to.equal(splitTotalHeight - 50);
445
+ expect(splitter.classList.contains("is-collapsed-end")).to.be.false;
446
+ expect(getComputedStyle(splitter).cursor).to.equal("ns-resize");
447
+ splitter.dispatchEvent(new PointerEvent("pointermove", {
448
+ clientY: splitTotalHeight + 50
449
+ }));
450
+ await elementUpdated(el);
451
+ expect(el.splitterPos || 0).to.equal(splitTotalHeight - el.splitterSize);
452
+ splitter.dispatchEvent(new PointerEvent("pointerup"));
453
+ await elementUpdated(el);
454
+ expect(splitter.classList.contains("is-collapsed-end")).to.be.true;
455
+ expect(getComputedStyle(splitter).cursor).to.equal("n-resize");
456
+ });
457
+ it("handles focus and keyboard inputs and resizes accordingly for horizontal splitviews [ltr]", async () => {
458
+ const splitTotalWidth = 500;
459
+ const el = await fixture(html`
457
460
  <sp-split-view
458
461
  resizable
459
462
  primary-min="50"
@@ -464,48 +467,48 @@ describe('SplitView', () => {
464
467
  <div>Second panel</div>
465
468
  </sp-split-view>
466
469
  `);
467
- await elementUpdated(el);
468
- expect(el.resizable).to.be.true;
469
- const pos = el.splitterPos || 0;
470
- const splitter = el.shadowRoot.querySelector('#splitter');
471
- splitter.dispatchEvent(arrowLeftEvent());
472
- await elementUpdated(el);
473
- expect(el.splitterPos || 0).to.equal(pos - 10);
474
- splitter.dispatchEvent(arrowRightEvent());
475
- await elementUpdated(el);
476
- expect(el.splitterPos || 0).to.equal(pos);
477
- splitter.dispatchEvent(arrowUpEvent());
478
- await elementUpdated(el);
479
- expect(el.splitterPos || 0).to.equal(pos + 10);
480
- splitter.dispatchEvent(arrowDownEvent());
481
- await elementUpdated(el);
482
- expect(el.splitterPos || 0).to.equal(pos);
483
- splitter.dispatchEvent(pageUpEvent());
484
- await elementUpdated(el);
485
- expect(el.splitterPos || 0).to.equal(pos + 50);
486
- splitter.dispatchEvent(pageDownEvent());
487
- await elementUpdated(el);
488
- expect(el.splitterPos || 0).to.equal(pos);
489
- splitter.dispatchEvent(homeEvent());
490
- await elementUpdated(el);
491
- expect(el.splitterPos || 0).to.equal(50);
492
- splitter.dispatchEvent(arrowLeftEvent());
493
- await elementUpdated(el);
494
- expect(el.splitterPos || 0).to.equal(50);
495
- splitter.dispatchEvent(endEvent());
496
- await elementUpdated(el);
497
- expect(el.splitterPos || 0).to.equal(splitTotalWidth - 50);
498
- splitter.dispatchEvent(arrowRightEvent());
499
- await elementUpdated(el);
500
- expect(el.splitterPos || 0).to.equal(splitTotalWidth - 50);
501
- splitter.dispatchEvent(shiftTabEvent());
502
- await elementUpdated(el);
503
- const outsideFocused = document.activeElement;
504
- expect(typeof outsideFocused).not.to.equal(splitter);
505
- });
506
- it('handles focus and keyboard inputs and resizes accordingly for horizontal splitviews [rtl]', async () => {
507
- const splitTotalWidth = 500;
508
- const el = await fixture(html `
470
+ await elementUpdated(el);
471
+ expect(el.resizable).to.be.true;
472
+ const pos = el.splitterPos || 0;
473
+ const splitter = el.shadowRoot.querySelector("#splitter");
474
+ splitter.dispatchEvent(arrowLeftEvent());
475
+ await elementUpdated(el);
476
+ expect(el.splitterPos || 0).to.equal(pos - 10);
477
+ splitter.dispatchEvent(arrowRightEvent());
478
+ await elementUpdated(el);
479
+ expect(el.splitterPos || 0).to.equal(pos);
480
+ splitter.dispatchEvent(arrowUpEvent());
481
+ await elementUpdated(el);
482
+ expect(el.splitterPos || 0).to.equal(pos + 10);
483
+ splitter.dispatchEvent(arrowDownEvent());
484
+ await elementUpdated(el);
485
+ expect(el.splitterPos || 0).to.equal(pos);
486
+ splitter.dispatchEvent(pageUpEvent());
487
+ await elementUpdated(el);
488
+ expect(el.splitterPos || 0).to.equal(pos + 50);
489
+ splitter.dispatchEvent(pageDownEvent());
490
+ await elementUpdated(el);
491
+ expect(el.splitterPos || 0).to.equal(pos);
492
+ splitter.dispatchEvent(homeEvent());
493
+ await elementUpdated(el);
494
+ expect(el.splitterPos || 0).to.equal(50);
495
+ splitter.dispatchEvent(arrowLeftEvent());
496
+ await elementUpdated(el);
497
+ expect(el.splitterPos || 0).to.equal(50);
498
+ splitter.dispatchEvent(endEvent());
499
+ await elementUpdated(el);
500
+ expect(el.splitterPos || 0).to.equal(splitTotalWidth - 50);
501
+ splitter.dispatchEvent(arrowRightEvent());
502
+ await elementUpdated(el);
503
+ expect(el.splitterPos || 0).to.equal(splitTotalWidth - 50);
504
+ splitter.dispatchEvent(shiftTabEvent());
505
+ await elementUpdated(el);
506
+ const outsideFocused = document.activeElement;
507
+ expect(typeof outsideFocused).not.to.equal(splitter);
508
+ });
509
+ it("handles focus and keyboard inputs and resizes accordingly for horizontal splitviews [rtl]", async () => {
510
+ const splitTotalWidth = 500;
511
+ const el = await fixture(html`
509
512
  <sp-split-view
510
513
  resizable
511
514
  style=${`height: 200px; width: ${splitTotalWidth}px;`}
@@ -515,42 +518,42 @@ describe('SplitView', () => {
515
518
  <div>Second panel</div>
516
519
  </sp-split-view>
517
520
  `);
518
- await elementUpdated(el);
519
- expect(el.resizable).to.be.true;
520
- const pos = el.splitterPos || 0;
521
- const splitter = el.shadowRoot.querySelector('#splitter');
522
- splitter.dispatchEvent(arrowLeftEvent());
523
- await elementUpdated(el);
524
- expect(el.splitterPos || 0).to.equal(pos + 10);
525
- splitter.dispatchEvent(arrowRightEvent());
526
- await elementUpdated(el);
527
- expect(el.splitterPos || 0).to.equal(pos);
528
- splitter.dispatchEvent(arrowUpEvent());
529
- await elementUpdated(el);
530
- expect(el.splitterPos || 0).to.equal(pos + 10);
531
- splitter.dispatchEvent(arrowDownEvent());
532
- await elementUpdated(el);
533
- expect(el.splitterPos || 0).to.equal(pos);
534
- splitter.dispatchEvent(pageUpEvent());
535
- await elementUpdated(el);
536
- expect(el.splitterPos || 0).to.equal(pos + 50);
537
- splitter.dispatchEvent(pageDownEvent());
538
- await elementUpdated(el);
539
- expect(el.splitterPos || 0).to.equal(pos);
540
- splitter.dispatchEvent(homeEvent());
541
- await elementUpdated(el);
542
- expect(el.splitterPos || 0).to.equal(0);
543
- splitter.dispatchEvent(endEvent());
544
- await elementUpdated(el);
545
- expect(el.splitterPos || 0).to.equal(splitTotalWidth - el.splitterSize);
546
- splitter.dispatchEvent(shiftTabEvent());
547
- await elementUpdated(el);
548
- const outsideFocused = document.activeElement;
549
- expect(typeof outsideFocused).not.to.equal(splitter);
550
- });
551
- it('handles keyboard inputs and resizes accordingly for [vertical] splitviews', async () => {
552
- const splitTotalHeight = 500;
553
- const el = await fixture(html `
521
+ await elementUpdated(el);
522
+ expect(el.resizable).to.be.true;
523
+ const pos = el.splitterPos || 0;
524
+ const splitter = el.shadowRoot.querySelector("#splitter");
525
+ splitter.dispatchEvent(arrowLeftEvent());
526
+ await elementUpdated(el);
527
+ expect(el.splitterPos || 0).to.equal(pos + 10);
528
+ splitter.dispatchEvent(arrowRightEvent());
529
+ await elementUpdated(el);
530
+ expect(el.splitterPos || 0).to.equal(pos);
531
+ splitter.dispatchEvent(arrowUpEvent());
532
+ await elementUpdated(el);
533
+ expect(el.splitterPos || 0).to.equal(pos + 10);
534
+ splitter.dispatchEvent(arrowDownEvent());
535
+ await elementUpdated(el);
536
+ expect(el.splitterPos || 0).to.equal(pos);
537
+ splitter.dispatchEvent(pageUpEvent());
538
+ await elementUpdated(el);
539
+ expect(el.splitterPos || 0).to.equal(pos + 50);
540
+ splitter.dispatchEvent(pageDownEvent());
541
+ await elementUpdated(el);
542
+ expect(el.splitterPos || 0).to.equal(pos);
543
+ splitter.dispatchEvent(homeEvent());
544
+ await elementUpdated(el);
545
+ expect(el.splitterPos || 0).to.equal(0);
546
+ splitter.dispatchEvent(endEvent());
547
+ await elementUpdated(el);
548
+ expect(el.splitterPos || 0).to.equal(splitTotalWidth - el.splitterSize);
549
+ splitter.dispatchEvent(shiftTabEvent());
550
+ await elementUpdated(el);
551
+ const outsideFocused = document.activeElement;
552
+ expect(typeof outsideFocused).not.to.equal(splitter);
553
+ });
554
+ it("handles keyboard inputs and resizes accordingly for [vertical] splitviews", async () => {
555
+ const splitTotalHeight = 500;
556
+ const el = await fixture(html`
554
557
  <sp-split-view
555
558
  vertical
556
559
  resizable
@@ -560,42 +563,42 @@ describe('SplitView', () => {
560
563
  <div>Second panel</div>
561
564
  </sp-split-view>
562
565
  `);
563
- await elementUpdated(el);
564
- expect(el.resizable).to.be.true;
565
- const pos = el.splitterPos || 0;
566
- const splitter = el.shadowRoot.querySelector('#splitter');
567
- splitter.dispatchEvent(arrowLeftEvent());
568
- await elementUpdated(el);
569
- expect(el.splitterPos || 0).to.equal(pos - 10);
570
- splitter.dispatchEvent(arrowRightEvent());
571
- await elementUpdated(el);
572
- expect(el.splitterPos || 0).to.equal(pos);
573
- splitter.dispatchEvent(arrowUpEvent());
574
- await elementUpdated(el);
575
- expect(el.splitterPos || 0).to.equal(pos - 10);
576
- splitter.dispatchEvent(arrowDownEvent());
577
- await elementUpdated(el);
578
- expect(el.splitterPos || 0).to.equal(pos);
579
- splitter.dispatchEvent(pageUpEvent());
580
- await elementUpdated(el);
581
- expect(el.splitterPos || 0).to.equal(pos - 50);
582
- splitter.dispatchEvent(pageDownEvent());
583
- await elementUpdated(el);
584
- expect(el.splitterPos || 0).to.equal(pos);
585
- splitter.dispatchEvent(homeEvent());
586
- await elementUpdated(el);
587
- expect(el.splitterPos || 0).to.equal(0);
588
- splitter.dispatchEvent(endEvent());
589
- await elementUpdated(el);
590
- expect(el.splitterPos || 0).to.equal(splitTotalHeight - el.splitterSize);
591
- splitter.dispatchEvent(shiftTabEvent());
592
- await elementUpdated(el);
593
- const outsideFocused = document.activeElement;
594
- expect(typeof outsideFocused).not.to.equal(splitter);
595
- });
596
- it('handles focus and keyboard inputs and resizes accordingly for collapsible horizontal splitviews', async () => {
597
- const splitTotalWidth = 500;
598
- const el = await fixture(html `
566
+ await elementUpdated(el);
567
+ expect(el.resizable).to.be.true;
568
+ const pos = el.splitterPos || 0;
569
+ const splitter = el.shadowRoot.querySelector("#splitter");
570
+ splitter.dispatchEvent(arrowLeftEvent());
571
+ await elementUpdated(el);
572
+ expect(el.splitterPos || 0).to.equal(pos - 10);
573
+ splitter.dispatchEvent(arrowRightEvent());
574
+ await elementUpdated(el);
575
+ expect(el.splitterPos || 0).to.equal(pos);
576
+ splitter.dispatchEvent(arrowUpEvent());
577
+ await elementUpdated(el);
578
+ expect(el.splitterPos || 0).to.equal(pos - 10);
579
+ splitter.dispatchEvent(arrowDownEvent());
580
+ await elementUpdated(el);
581
+ expect(el.splitterPos || 0).to.equal(pos);
582
+ splitter.dispatchEvent(pageUpEvent());
583
+ await elementUpdated(el);
584
+ expect(el.splitterPos || 0).to.equal(pos - 50);
585
+ splitter.dispatchEvent(pageDownEvent());
586
+ await elementUpdated(el);
587
+ expect(el.splitterPos || 0).to.equal(pos);
588
+ splitter.dispatchEvent(homeEvent());
589
+ await elementUpdated(el);
590
+ expect(el.splitterPos || 0).to.equal(0);
591
+ splitter.dispatchEvent(endEvent());
592
+ await elementUpdated(el);
593
+ expect(el.splitterPos || 0).to.equal(splitTotalHeight - el.splitterSize);
594
+ splitter.dispatchEvent(shiftTabEvent());
595
+ await elementUpdated(el);
596
+ const outsideFocused = document.activeElement;
597
+ expect(typeof outsideFocused).not.to.equal(splitter);
598
+ });
599
+ it("handles focus and keyboard inputs and resizes accordingly for collapsible horizontal splitviews", async () => {
600
+ const splitTotalWidth = 500;
601
+ const el = await fixture(html`
599
602
  <sp-split-view
600
603
  resizable
601
604
  collapsible
@@ -607,114 +610,109 @@ describe('SplitView', () => {
607
610
  <div>Second panel</div>
608
611
  </sp-split-view>
609
612
  `);
610
- await elementUpdated(el);
611
- expect(el.resizable).to.be.true;
612
- const splitter = el.shadowRoot.querySelector('#splitter');
613
- splitter.dispatchEvent(homeEvent());
614
- await elementUpdated(el);
615
- expect(el.splitterPos || 0).to.equal(0);
616
- splitter.dispatchEvent(endEvent());
617
- await elementUpdated(el);
618
- expect(el.splitterPos || 0).to.equal(splitTotalWidth - el.splitterSize);
619
- });
620
- it('does not resize when not resizable', async () => {
621
- const el = await fixture(html `
613
+ await elementUpdated(el);
614
+ expect(el.resizable).to.be.true;
615
+ const splitter = el.shadowRoot.querySelector("#splitter");
616
+ splitter.dispatchEvent(homeEvent());
617
+ await elementUpdated(el);
618
+ expect(el.splitterPos || 0).to.equal(0);
619
+ splitter.dispatchEvent(endEvent());
620
+ await elementUpdated(el);
621
+ expect(el.splitterPos || 0).to.equal(splitTotalWidth - el.splitterSize);
622
+ });
623
+ it("does not resize when not resizable", async () => {
624
+ const el = await fixture(html`
622
625
  <sp-split-view>
623
626
  <div>First panel</div>
624
627
  <div>Second panel</div>
625
628
  </sp-split-view>
626
629
  `);
627
- await elementUpdated(el);
628
- expect(el.resizable).to.be.false;
629
- const pos = el.splitterPos || 0;
630
- const splitter = el.shadowRoot
631
- ? el.shadowRoot.querySelector('#splitter')
632
- : el;
633
- splitter.dispatchEvent(new PointerEvent('pointerdown'));
634
- await elementUpdated(el);
635
- //Send keyboard events to resize
636
- splitter.dispatchEvent(arrowLeftEvent());
637
- await elementUpdated(el);
638
- expect(el.splitterPos || 0).to.equal(pos);
639
- });
640
- it('renders no splitter if only one panel is provided', async () => {
641
- const el = await fixture(html `
630
+ await elementUpdated(el);
631
+ expect(el.resizable).to.be.false;
632
+ const pos = el.splitterPos || 0;
633
+ const splitter = el.shadowRoot ? el.shadowRoot.querySelector("#splitter") : el;
634
+ splitter.dispatchEvent(new PointerEvent("pointerdown"));
635
+ await elementUpdated(el);
636
+ splitter.dispatchEvent(arrowLeftEvent());
637
+ await elementUpdated(el);
638
+ expect(el.splitterPos || 0).to.equal(pos);
639
+ });
640
+ it("renders no splitter if only one panel is provided", async () => {
641
+ const el = await fixture(html`
642
642
  <sp-split-view style="width: 400px">
643
643
  <div id="primary" style="width: 200px">First panel</div>
644
644
  </sp-split-view>
645
645
  `);
646
- await elementUpdated(el);
647
- expect(el.resizable).to.be.false;
648
- const splitter = el.shadowRoot.querySelector('#splitter');
649
- expect(splitter).to.be.null;
650
- const slot = el.shadowRoot.querySelector('slot');
651
- expect(slot).to.exist;
652
- expect(slot.assignedElements().length).to.equal(1);
653
- const elPrim = slot.assignedElements()[0];
654
- expect(getComputedStyle(elPrim).width).to.equal('200px');
655
- });
656
- it('renders only 2 out of 3 panels', async () => {
657
- const el = await fixture(html `
646
+ await elementUpdated(el);
647
+ expect(el.resizable).to.be.false;
648
+ const splitter = el.shadowRoot.querySelector("#splitter");
649
+ expect(splitter).to.be.null;
650
+ const slot = el.shadowRoot.querySelector("slot");
651
+ expect(slot).to.exist;
652
+ expect(slot.assignedElements().length).to.equal(1);
653
+ const elPrim = slot.assignedElements()[0];
654
+ expect(getComputedStyle(elPrim).width).to.equal("200px");
655
+ });
656
+ it("renders only 2 out of 3 panels", async () => {
657
+ const el = await fixture(html`
658
658
  <sp-split-view>
659
659
  <div>First panel</div>
660
660
  <div>Second panel</div>
661
661
  <div id="testPanel">Third (invisible) panel</div>
662
662
  </sp-split-view>
663
663
  `);
664
- await elementUpdated(el);
665
- const testPanel = el.shadowRoot.querySelector('#testPanel');
666
- expect(testPanel).to.be.null;
667
- });
668
- it('keeps the splitter pos when removing and re-adding a panel', async () => {
669
- var _a, _b;
670
- let pointerId = -1;
671
- const el = await fixture(html `
664
+ await elementUpdated(el);
665
+ const testPanel = el.shadowRoot.querySelector("#testPanel");
666
+ expect(testPanel).to.be.null;
667
+ });
668
+ it("keeps the splitter pos when removing and re-adding a panel", async () => {
669
+ var _a, _b;
670
+ let pointerId = -1;
671
+ const el = await fixture(html`
672
672
  <sp-split-view resizable style="width: 400px">
673
673
  <div id="primary">First panel</div>
674
674
  <div id="secondary">Second panel</div>
675
675
  </sp-split-view>
676
676
  `);
677
- await elementUpdated(el);
678
- expect(el.resizable).to.be.true;
679
- let splitter = el.shadowRoot.querySelector('#splitter');
680
- splitter.setPointerCapture = (id) => (pointerId = id);
681
- splitter.releasePointerCapture = (id) => (pointerId = id);
682
- let pos = el.splitterPos || 0;
683
- expect(pos).to.equal(200);
684
- splitter.dispatchEvent(new PointerEvent('pointerdown', { pointerId: 1 }));
685
- await elementUpdated(el);
686
- expect(pointerId).to.equal(1);
687
- pos -= 10;
688
- splitter.dispatchEvent(new PointerEvent('pointermove', {
689
- clientX: pos,
690
- }));
691
- await elementUpdated(el);
692
- expect(Math.round(el.splitterPos || 0)).to.equal(pos - el.getBoundingClientRect().left);
693
- // Remove second panel
694
- const secPanel = (_a = el.lastElementChild) === null || _a === void 0 ? void 0 : _a.cloneNode(true);
695
- expect(secPanel).not.to.be.null;
696
- (_b = el.lastElementChild) === null || _b === void 0 ? void 0 : _b.remove();
697
- await elementUpdated(el);
698
- let slot = el.shadowRoot.querySelector('slot');
699
- expect(slot).to.exist;
700
- expect(slot.assignedElements().length).to.equal(1);
701
- splitter = el.shadowRoot.querySelector('#splitter');
702
- expect(splitter).to.be.null;
703
- if (secPanel) {
704
- // Re-add second panel
705
- el.appendChild(secPanel);
706
- await elementUpdated(el);
707
- expect(Math.round(el.splitterPos || 0)).to.equal(pos - el.getBoundingClientRect().left);
708
- slot = el.shadowRoot.querySelector('slot');
709
- expect(slot).to.exist;
710
- expect(slot.assignedElements().length).to.equal(2);
711
- splitter = el.shadowRoot.querySelector('#splitter');
712
- await expect(splitter).to.be.accessible();
713
- }
714
- });
715
- it('announces when splitterPos moves', async () => {
716
- const changeSpy = spy();
717
- const el = await fixture(html `
677
+ await elementUpdated(el);
678
+ expect(el.resizable).to.be.true;
679
+ let splitter = el.shadowRoot.querySelector("#splitter");
680
+ splitter.setPointerCapture = (id) => pointerId = id;
681
+ splitter.releasePointerCapture = (id) => pointerId = id;
682
+ let pos = el.splitterPos || 0;
683
+ expect(pos).to.equal(200);
684
+ splitter.dispatchEvent(new PointerEvent("pointerdown", { pointerId: 1 }));
685
+ await elementUpdated(el);
686
+ expect(pointerId).to.equal(1);
687
+ pos -= 10;
688
+ splitter.dispatchEvent(new PointerEvent("pointermove", {
689
+ clientX: pos
690
+ }));
691
+ await elementUpdated(el);
692
+ expect(Math.round(el.splitterPos || 0)).to.equal(pos - el.getBoundingClientRect().left);
693
+ const secPanel = (_a = el.lastElementChild) == null ? void 0 : _a.cloneNode(true);
694
+ expect(secPanel).not.to.be.null;
695
+ (_b = el.lastElementChild) == null ? void 0 : _b.remove();
696
+ await elementUpdated(el);
697
+ let slot = el.shadowRoot.querySelector("slot");
698
+ expect(slot).to.exist;
699
+ expect(slot.assignedElements().length).to.equal(1);
700
+ splitter = el.shadowRoot.querySelector("#splitter");
701
+ expect(splitter).to.be.null;
702
+ if (secPanel) {
703
+ el.appendChild(secPanel);
704
+ await elementUpdated(el);
705
+ expect(Math.round(el.splitterPos || 0)).to.equal(pos - el.getBoundingClientRect().left);
706
+ slot = el.shadowRoot.querySelector("slot");
707
+ expect(slot).to.exist;
708
+ expect(slot.assignedElements().length).to.equal(2);
709
+ splitter = el.shadowRoot.querySelector("#splitter");
710
+ await expect(splitter).to.be.accessible();
711
+ }
712
+ });
713
+ it("announces when splitterPos moves", async () => {
714
+ const changeSpy = spy();
715
+ const el = await fixture(html`
718
716
  <sp-split-view
719
717
  resizable
720
718
  style=${`height: 200px; width: 500px;`}
@@ -723,18 +721,18 @@ describe('SplitView', () => {
723
721
  <div>Second panel</div>
724
722
  </sp-split-view>
725
723
  `);
726
- el.addEventListener('change', changeSpy);
727
- await elementUpdated(el);
728
- expect(el.resizable).to.be.true;
729
- const pos = el.splitterPos || 0;
730
- const splitter = el.shadowRoot.querySelector('#splitter');
731
- splitter.dispatchEvent(arrowLeftEvent());
732
- await elementUpdated(el);
733
- expect(el.splitterPos || 0).to.equal(pos - 10);
734
- expect(changeSpy.callCount).to.equal(1);
735
- });
736
- it('resizes when primarySize changes', async () => {
737
- const el = await fixture(html `
724
+ el.addEventListener("change", changeSpy);
725
+ await elementUpdated(el);
726
+ expect(el.resizable).to.be.true;
727
+ const pos = el.splitterPos || 0;
728
+ const splitter = el.shadowRoot.querySelector("#splitter");
729
+ splitter.dispatchEvent(arrowLeftEvent());
730
+ await elementUpdated(el);
731
+ expect(el.splitterPos || 0).to.equal(pos - 10);
732
+ expect(changeSpy.callCount).to.equal(1);
733
+ });
734
+ it("resizes when primarySize changes", async () => {
735
+ const el = await fixture(html`
738
736
  <sp-split-view
739
737
  resizable
740
738
  primary-size="100"
@@ -744,11 +742,11 @@ describe('SplitView', () => {
744
742
  <div>Second panel</div>
745
743
  </sp-split-view>
746
744
  `);
747
- await elementUpdated(el);
748
- expect(el.splitterPos || 0).to.equal(100);
749
- el.primarySize = '300';
750
- await elementUpdated(el);
751
- expect(el.splitterPos || 0).to.equal(300);
752
- });
745
+ await elementUpdated(el);
746
+ expect(el.splitterPos || 0).to.equal(100);
747
+ el.primarySize = "300";
748
+ await elementUpdated(el);
749
+ expect(el.splitterPos || 0).to.equal(300);
750
+ });
753
751
  });
754
- //# sourceMappingURL=split-view.test.js.map
752
+ //# sourceMappingURL=split-view.test.js.map