@spectrum-web-components/split-view 0.4.9 → 0.4.11-devmode.7

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