@rcarls/rc-splitter 0.3.1 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +103 -61
- package/dist/custom-elements.json +255 -27
- package/dist/{rc-splitter-BZgnDbmR.js → rc-splitter-CJTLxYi3.js} +265 -130
- package/dist/rc-splitter-CJTLxYi3.js.map +1 -0
- package/dist/rc-splitter-define.js +1 -1
- package/dist/rc-splitter.js +1 -1
- package/dist/types/packages/rc-splitter/src/rc-splitter.d.ts +68 -13
- package/package.json +1 -1
- package/dist/rc-splitter-BZgnDbmR.js.map +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { css as
|
|
2
|
-
import { property as
|
|
3
|
-
import {
|
|
4
|
-
const
|
|
1
|
+
import { css as f, LitElement as m, html as p, nothing as g } from "lit";
|
|
2
|
+
import { property as l, state as c, query as _, queryAssignedElements as v } from "lit/decorators.js";
|
|
3
|
+
import { DragGestureController as y, findNextSnapIndex as b, findNearestSnapIndex as x, keyNavigation as V, keyInteraction as M } from "@rcarls/rc-common";
|
|
4
|
+
const z = f`
|
|
5
5
|
*,
|
|
6
6
|
*::before,
|
|
7
7
|
*::after {
|
|
@@ -41,9 +41,18 @@ const x = v`
|
|
|
41
41
|
display: flex;
|
|
42
42
|
flex-direction: column;
|
|
43
43
|
justify-content: center;
|
|
44
|
-
background-color: var(
|
|
45
|
-
|
|
46
|
-
|
|
44
|
+
background-color: var(
|
|
45
|
+
--rc-splitter-separator-color,
|
|
46
|
+
color-mix(in srgb, ButtonBorder 35%, Canvas 65%)
|
|
47
|
+
);
|
|
48
|
+
border-left: var(
|
|
49
|
+
--rc-splitter-separator-border-inline-start,
|
|
50
|
+
var(--rc-splitter-keyline, 1px solid ButtonBorder)
|
|
51
|
+
);
|
|
52
|
+
border-right: var(
|
|
53
|
+
--rc-splitter-separator-border-inline-end,
|
|
54
|
+
var(--rc-splitter-keyline, 1px solid ButtonBorder)
|
|
55
|
+
);
|
|
47
56
|
/* z-index: 1 as a flex item stacks separator above pane siblings so the
|
|
48
57
|
::after touch-target circle (which extends past the strip) is hittable */
|
|
49
58
|
z-index: 1;
|
|
@@ -54,8 +63,14 @@ const x = v`
|
|
|
54
63
|
flex-direction: row;
|
|
55
64
|
border-left: unset;
|
|
56
65
|
border-right: unset;
|
|
57
|
-
border-top: var(
|
|
58
|
-
|
|
66
|
+
border-top: var(
|
|
67
|
+
--rc-splitter-separator-border-block-start,
|
|
68
|
+
var(--rc-splitter-keyline, 1px solid ButtonBorder)
|
|
69
|
+
);
|
|
70
|
+
border-bottom: var(
|
|
71
|
+
--rc-splitter-separator-border-block-end,
|
|
72
|
+
var(--rc-splitter-keyline, 1px solid ButtonBorder)
|
|
73
|
+
);
|
|
59
74
|
}
|
|
60
75
|
}
|
|
61
76
|
|
|
@@ -97,6 +112,7 @@ const x = v`
|
|
|
97
112
|
}
|
|
98
113
|
|
|
99
114
|
#separator-handle {
|
|
115
|
+
touch-action: none;
|
|
100
116
|
width: 100%;
|
|
101
117
|
height: var(--rc-splitter-separator-handle-size, 100%);
|
|
102
118
|
cursor: col-resize;
|
|
@@ -118,9 +134,21 @@ const x = v`
|
|
|
118
134
|
background-color: var(--rc-splitter-handle-fill, transparent);
|
|
119
135
|
background-image: var(
|
|
120
136
|
--rc-splitter-handle-pattern,
|
|
121
|
-
radial-gradient(
|
|
122
|
-
|
|
123
|
-
|
|
137
|
+
radial-gradient(
|
|
138
|
+
circle 1px at 50% calc(50% - 5px),
|
|
139
|
+
var(--rc-splitter-handle-color, ButtonBorder) 100%,
|
|
140
|
+
transparent 100%
|
|
141
|
+
),
|
|
142
|
+
radial-gradient(
|
|
143
|
+
circle 1px at 50% 50%,
|
|
144
|
+
var(--rc-splitter-handle-color, ButtonBorder) 100%,
|
|
145
|
+
transparent 100%
|
|
146
|
+
),
|
|
147
|
+
radial-gradient(
|
|
148
|
+
circle 1px at 50% calc(50% + 5px),
|
|
149
|
+
var(--rc-splitter-handle-color, ButtonBorder) 100%,
|
|
150
|
+
transparent 100%
|
|
151
|
+
)
|
|
124
152
|
);
|
|
125
153
|
border-radius: var(--rc-splitter-handle-border-radius, 0);
|
|
126
154
|
pointer-events: none;
|
|
@@ -160,9 +188,21 @@ const x = v`
|
|
|
160
188
|
height: var(--rc-splitter-handle-thickness, 4px);
|
|
161
189
|
background-image: var(
|
|
162
190
|
--rc-splitter-handle-pattern,
|
|
163
|
-
radial-gradient(
|
|
164
|
-
|
|
165
|
-
|
|
191
|
+
radial-gradient(
|
|
192
|
+
circle 1px at calc(50% - 5px) 50%,
|
|
193
|
+
var(--rc-splitter-handle-color, ButtonBorder) 100%,
|
|
194
|
+
transparent 100%
|
|
195
|
+
),
|
|
196
|
+
radial-gradient(
|
|
197
|
+
circle 1px at 50% 50%,
|
|
198
|
+
var(--rc-splitter-handle-color, ButtonBorder) 100%,
|
|
199
|
+
transparent 100%
|
|
200
|
+
),
|
|
201
|
+
radial-gradient(
|
|
202
|
+
circle 1px at calc(50% + 5px) 50%,
|
|
203
|
+
var(--rc-splitter-handle-color, ButtonBorder) 100%,
|
|
204
|
+
transparent 100%
|
|
205
|
+
)
|
|
166
206
|
);
|
|
167
207
|
}
|
|
168
208
|
}
|
|
@@ -194,26 +234,34 @@ const x = v`
|
|
|
194
234
|
flex: 1;
|
|
195
235
|
}
|
|
196
236
|
`;
|
|
197
|
-
var
|
|
198
|
-
for (var
|
|
199
|
-
(
|
|
200
|
-
return
|
|
237
|
+
var w = Object.defineProperty, S = Object.getOwnPropertyDescriptor, s = (d, t, e, i) => {
|
|
238
|
+
for (var r = i > 1 ? void 0 : i ? S(t, e) : t, o = d.length - 1, n; o >= 0; o--)
|
|
239
|
+
(n = d[o]) && (r = (i ? n(t, e, r) : n(r)) || r);
|
|
240
|
+
return i && r && w(t, e, r), r;
|
|
201
241
|
};
|
|
202
|
-
const
|
|
242
|
+
const $ = 24, k = 200, C = "cubic-bezier(0.4, 0, 0.2, 1)", u = class u extends m {
|
|
203
243
|
constructor() {
|
|
204
|
-
super(...arguments), this.label = "Splitter", this.orientation = "horizontal", this.mode = "length", this.step = 1, this.min = 0, this.max = void 0, this._valueInitialized = !1, this._value = 0, this.fixed = !1, this.collapsible = !1, this._minValue = 0, this._maxValue = 0, this._lastValue = 0, this._initialMax = 0, this.
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
244
|
+
super(...arguments), this.label = "Splitter", this.orientation = "horizontal", this.mode = "length", this.step = 1, this.min = 0, this.max = void 0, this._valueInitialized = !1, this._value = 0, this.fixed = !1, this.collapsible = !1, this.snapPoints = "", this.swipeVelocity = 500, this._minValue = 0, this._maxValue = 0, this._lastValue = 0, this._initialMax = 0, this._gestureStartValue = 0, this._gestureRestoreValue = 0, this._activeSnapAnimation = null, this._reducedMotion = typeof window < "u" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null, this._gesture = new y(this, {
|
|
245
|
+
target: () => this._$separatorHandle,
|
|
246
|
+
axis: this.orientation === "horizontal" ? "x" : "y",
|
|
247
|
+
focusOnStart: !0,
|
|
248
|
+
onStart: (t) => this._onGestureStart(t),
|
|
249
|
+
onMove: (t) => this._onGestureMove(t),
|
|
250
|
+
onEnd: (t) => this._onGestureEnd(t),
|
|
251
|
+
onCancel: () => this._onGestureCancel()
|
|
252
|
+
}), this._resizeObserver = new ResizeObserver(() => this._onResize());
|
|
253
|
+
}
|
|
254
|
+
set value(t) {
|
|
255
|
+
const e = this._hostValue;
|
|
256
|
+
this._hostValue = t, this._initialMax && this._setValue(t, !1), this.requestUpdate("value", e);
|
|
209
257
|
}
|
|
210
258
|
/** The current splitter value, corresponding to the separator position, in either pixels or percentage points depending on `mode`. */
|
|
211
259
|
get value() {
|
|
212
260
|
return this._value;
|
|
213
261
|
}
|
|
214
|
-
set defaultValue(
|
|
215
|
-
const
|
|
216
|
-
this._defaultValue =
|
|
262
|
+
set defaultValue(t) {
|
|
263
|
+
const e = this._defaultValue;
|
|
264
|
+
this._defaultValue = t, !this._initialMax && this._hostValue === void 0 && t !== void 0 && this._setValue(t, !1), this.requestUpdate("defaultValue", e);
|
|
217
265
|
}
|
|
218
266
|
/** Initial uncontrolled splitter value. */
|
|
219
267
|
get defaultValue() {
|
|
@@ -230,20 +278,19 @@ const p = class p extends _ {
|
|
|
230
278
|
return this._initialMax > 0 && this.value <= this._effectiveMin;
|
|
231
279
|
}
|
|
232
280
|
_toggleCollapse() {
|
|
233
|
-
this._setUserValue(
|
|
234
|
-
this._isCollapsed ? this._lastValue : this._effectiveMin
|
|
235
|
-
);
|
|
281
|
+
this._setUserValue(this._isCollapsed ? this._lastValue : this._effectiveMin);
|
|
236
282
|
}
|
|
237
283
|
_onCollapseButtonClick() {
|
|
238
284
|
this._toggleCollapse();
|
|
239
285
|
}
|
|
240
|
-
_onCollapseKeydown(
|
|
241
|
-
if (!this.collapsible || this.fixed || !
|
|
242
|
-
|
|
286
|
+
_onCollapseKeydown(t) {
|
|
287
|
+
if (!this.collapsible || this.fixed || !t.ctrlKey && !t.metaKey)
|
|
288
|
+
return;
|
|
289
|
+
(this.orientation === "horizontal" ? t.key === "ArrowLeft" || t.key === "ArrowRight" : t.key === "ArrowUp" || t.key === "ArrowDown") && (t.preventDefault(), t.stopImmediatePropagation(), this._toggleCollapse());
|
|
243
290
|
}
|
|
244
291
|
get _collapseButtonIcon() {
|
|
245
|
-
const
|
|
246
|
-
return
|
|
292
|
+
const e = this.orientation === "horizontal" ? this._isCollapsed ? "M 3 1 L 7 5 L 3 9" : "M 7 1 L 3 5 L 7 9" : this._isCollapsed ? "M 1 3 L 5 7 L 9 3" : "M 1 7 L 5 3 L 9 7";
|
|
293
|
+
return p`<svg
|
|
247
294
|
aria-hidden="true"
|
|
248
295
|
viewBox="0 0 10 10"
|
|
249
296
|
width="10"
|
|
@@ -254,15 +301,15 @@ const p = class p extends _ {
|
|
|
254
301
|
stroke-linecap="round"
|
|
255
302
|
stroke-linejoin="round"
|
|
256
303
|
>
|
|
257
|
-
<path d=${
|
|
304
|
+
<path d=${e} />
|
|
258
305
|
</svg>`;
|
|
259
306
|
}
|
|
260
|
-
_setValue(
|
|
261
|
-
const
|
|
307
|
+
_setValue(t, e) {
|
|
308
|
+
const i = this._value;
|
|
262
309
|
this._value = Math.min(
|
|
263
|
-
Math.max(Math.round(
|
|
310
|
+
Math.max(Math.round(t / this.step) * this.step, this._effectiveMin),
|
|
264
311
|
this._effectiveMax
|
|
265
|
-
),
|
|
312
|
+
), e && this._value !== i && this.dispatchEvent(
|
|
266
313
|
new CustomEvent("rc-splitter-change", {
|
|
267
314
|
bubbles: !0,
|
|
268
315
|
composed: !0,
|
|
@@ -270,16 +317,16 @@ const p = class p extends _ {
|
|
|
270
317
|
})
|
|
271
318
|
);
|
|
272
319
|
}
|
|
273
|
-
_setUserValue(
|
|
274
|
-
this._valueInitialized = !0, this._hostValue = void 0, this._value > this._effectiveMin && (this._lastValue = this._value), this._setValue(
|
|
320
|
+
_setUserValue(t) {
|
|
321
|
+
this._valueInitialized = !0, this._hostValue = void 0, this._value > this._effectiveMin && (this._lastValue = this._value), this._setValue(t, !0);
|
|
275
322
|
}
|
|
276
323
|
/** A human-readable string representation of the value. */
|
|
277
324
|
get valueText() {
|
|
278
|
-
return `${this.value}${this.mode === "
|
|
325
|
+
return `${this.value}${this.mode === "percent" ? "%" : "px"}`;
|
|
279
326
|
}
|
|
280
|
-
_onKeyboardResize(
|
|
327
|
+
_onKeyboardResize(t) {
|
|
281
328
|
if (!this.fixed)
|
|
282
|
-
switch (
|
|
329
|
+
switch (t) {
|
|
283
330
|
case "next":
|
|
284
331
|
this._setUserValue(this.value + this.step);
|
|
285
332
|
break;
|
|
@@ -305,66 +352,144 @@ const p = class p extends _ {
|
|
|
305
352
|
break;
|
|
306
353
|
}
|
|
307
354
|
}
|
|
308
|
-
_onPointerResize(
|
|
355
|
+
_onPointerResize(t) {
|
|
309
356
|
if (this.fixed)
|
|
310
357
|
return;
|
|
311
|
-
const
|
|
312
|
-
this.orientation === "vertical" ? this._setUserValue(
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
358
|
+
const e = this.getBoundingClientRect();
|
|
359
|
+
this.orientation === "vertical" ? this._setUserValue((t.clientY - e.top) / e.height * this._maxValue) : this._setUserValue((t.clientX - e.left) / e.width * this._maxValue);
|
|
360
|
+
}
|
|
361
|
+
/**
|
|
362
|
+
* Settles at a declared snap point by zero-based index.
|
|
363
|
+
*
|
|
364
|
+
* Finite fractional indices are truncated and clamped. Calls without valid
|
|
365
|
+
* snap points or with a non-finite index have no effect.
|
|
366
|
+
*
|
|
367
|
+
* @param index - zero-based index into `snapPoints`
|
|
368
|
+
* @param behavior - whether to animate the movement
|
|
369
|
+
*/
|
|
370
|
+
snapTo(t, e = "animated") {
|
|
371
|
+
const i = this._resolvedSnapPoints();
|
|
372
|
+
if (!Number.isFinite(t) || i.length === 0)
|
|
373
|
+
return;
|
|
374
|
+
const r = Math.max(0, Math.min(Math.trunc(t), i.length - 1));
|
|
375
|
+
this._settleToValue(i[r], e);
|
|
376
|
+
}
|
|
377
|
+
_onGestureStart(t) {
|
|
378
|
+
this._activeSnapAnimation?.cancel(), this._activeSnapAnimation = null, this._gestureStartValue = this.value, this._gestureRestoreValue = this._lastValue;
|
|
379
|
+
}
|
|
380
|
+
_onGestureMove(t) {
|
|
381
|
+
this._onPointerResize({ clientX: t.x, clientY: t.y });
|
|
382
|
+
}
|
|
383
|
+
_onGestureEnd(t) {
|
|
384
|
+
const e = this.orientation === "horizontal" ? t.deltaX : t.deltaY, i = this.orientation === "horizontal" ? t.velocityX : t.velocityY, r = Math.abs(e) >= $ && Math.abs(i) >= this.swipeVelocity;
|
|
385
|
+
if (r && this.collapsible) {
|
|
386
|
+
if (i < 0) {
|
|
387
|
+
const h = this._gestureRestoreValue > this._effectiveMin ? this._gestureRestoreValue : this._gestureStartValue;
|
|
388
|
+
this._settleToValue(this._effectiveMin, "animated"), this._lastValue = h;
|
|
389
|
+
return;
|
|
390
|
+
}
|
|
391
|
+
if (this._gestureStartValue <= this._effectiveMin) {
|
|
392
|
+
this._settleToValue(
|
|
393
|
+
Math.max(this._gestureRestoreValue, this._effectiveMin),
|
|
394
|
+
"animated"
|
|
395
|
+
);
|
|
396
|
+
return;
|
|
397
|
+
}
|
|
398
|
+
}
|
|
399
|
+
const o = this._resolvedSnapPoints();
|
|
400
|
+
if (o.length === 0)
|
|
401
|
+
return;
|
|
402
|
+
const n = r ? b(o, this._gestureStartValue, i > 0 ? 1 : -1) : x(o, this.value);
|
|
403
|
+
n >= 0 && this._settleToValue(o[n], "animated");
|
|
404
|
+
}
|
|
405
|
+
_onGestureCancel() {
|
|
406
|
+
this._activeSnapAnimation?.cancel(), this._activeSnapAnimation = null;
|
|
407
|
+
}
|
|
408
|
+
_resolvedSnapPoints() {
|
|
409
|
+
return this.snapPoints.trim() ? this.snapPoints.trim().split(/\s+/).map(Number).filter(Number.isFinite).map((t) => Math.min(Math.max(t, this._effectiveMin), this._effectiveMax)).filter((t, e, i) => e === 0 || t !== i[e - 1]) : [];
|
|
410
|
+
}
|
|
411
|
+
async _settleToValue(t, e) {
|
|
412
|
+
const i = this._$primary, r = this.orientation === "horizontal" ? i.getBoundingClientRect().width : i.getBoundingClientRect().height;
|
|
413
|
+
if (this._activeSnapAnimation?.cancel(), this._activeSnapAnimation = null, this._setUserValue(t), await this.updateComplete, e === "instant" || this._reducedMotion?.matches)
|
|
414
|
+
return;
|
|
415
|
+
const o = this.orientation === "horizontal" ? i.getBoundingClientRect().width : i.getBoundingClientRect().height;
|
|
416
|
+
if (r === o)
|
|
417
|
+
return;
|
|
418
|
+
const n = this.orientation === "horizontal" ? "width" : "height", h = i.animate(
|
|
419
|
+
[{ [n]: `${r}px` }, { [n]: `${o}px` }],
|
|
420
|
+
{
|
|
421
|
+
duration: this._snapDuration(),
|
|
422
|
+
easing: C
|
|
423
|
+
}
|
|
316
424
|
);
|
|
425
|
+
this._activeSnapAnimation = h;
|
|
426
|
+
try {
|
|
427
|
+
await h.finished;
|
|
428
|
+
} catch {
|
|
429
|
+
} finally {
|
|
430
|
+
this._activeSnapAnimation === h && (this._activeSnapAnimation = null);
|
|
431
|
+
}
|
|
317
432
|
}
|
|
318
|
-
|
|
433
|
+
_snapDuration() {
|
|
434
|
+
const t = getComputedStyle(this).getPropertyValue("--rc-splitter-snap-duration").trim(), e = Number.parseFloat(t);
|
|
435
|
+
return Number.isFinite(e) ? e : k;
|
|
436
|
+
}
|
|
437
|
+
_onPrimaryChange(t) {
|
|
319
438
|
queueMicrotask(() => {
|
|
320
|
-
this._$primaryElements.length < 2 || this._$primaryElements.slice(1).forEach((
|
|
439
|
+
this._$primaryElements.length < 2 || this._$primaryElements.slice(1).forEach((e) => e.setAttribute("slot", "secondary"));
|
|
321
440
|
});
|
|
322
441
|
}
|
|
323
|
-
_onSecondaryChange(
|
|
442
|
+
_onSecondaryChange(t) {
|
|
324
443
|
queueMicrotask(() => {
|
|
325
444
|
!this._$secondaryElements.length || this._$primaryElements.length || this._$secondaryElements.at(0)?.removeAttribute("slot");
|
|
326
445
|
});
|
|
327
446
|
}
|
|
328
|
-
_measureHostSize(
|
|
329
|
-
const
|
|
330
|
-
if (
|
|
331
|
-
return Math.ceil(
|
|
332
|
-
const
|
|
333
|
-
return Number.isFinite(
|
|
447
|
+
_measureHostSize(t) {
|
|
448
|
+
const e = this.getBoundingClientRect(), i = t === "inline" ? e.width : e.height;
|
|
449
|
+
if (i > 0)
|
|
450
|
+
return Math.ceil(i);
|
|
451
|
+
const r = getComputedStyle(this), o = t === "inline" ? r.width : r.height, n = Number.parseFloat(o);
|
|
452
|
+
return Number.isFinite(n) ? Math.ceil(n) : 0;
|
|
334
453
|
}
|
|
335
454
|
_onResize() {
|
|
336
|
-
const
|
|
455
|
+
const t = this._$primaryElements.at(0), e = this._$primary.style.getPropertyValue("display");
|
|
337
456
|
globalThis.requestAnimationFrame(() => {
|
|
338
457
|
this._$primary.style.setProperty("display", "contents");
|
|
339
|
-
const
|
|
340
|
-
if (this.mode
|
|
341
|
-
const
|
|
458
|
+
const i = t?.getBoundingClientRect() ?? this.getBoundingClientRect();
|
|
459
|
+
if (this.mode !== "percent") {
|
|
460
|
+
const r = this.orientation === "horizontal" ? (
|
|
342
461
|
// For horizontal splitters, just take the host width...
|
|
343
462
|
this._measureHostSize("inline")
|
|
344
463
|
) : (
|
|
345
464
|
// ...otherwise try to use the first lightDOM element's auto height, and cache it
|
|
346
|
-
this._initialMax || Math.ceil(
|
|
465
|
+
this._initialMax || Math.ceil(i.height) || this._measureHostSize("block")
|
|
347
466
|
);
|
|
348
|
-
(
|
|
467
|
+
(r > 0 || !this._initialMax) && (this._maxValue = r);
|
|
349
468
|
} else
|
|
350
469
|
this._maxValue = 100;
|
|
351
470
|
this._initialMax ? this._hostValue !== void 0 ? this._setValue(this._hostValue, !1) : this._setValue(this.value, !1) : (this._initialMax = this._maxValue, this._setValue(
|
|
352
471
|
this._valueInitialized ? this._value : this._hostValue ?? this.defaultValue ?? this._maxValue / 2,
|
|
353
472
|
!1
|
|
354
|
-
)),
|
|
473
|
+
)), e ? this._$primary.style.setProperty("display", e) : this._$primary.style.removeProperty("display");
|
|
355
474
|
});
|
|
356
475
|
}
|
|
357
476
|
connectedCallback() {
|
|
358
477
|
super.connectedCallback(), this._resizeObserver.observe(this);
|
|
359
478
|
}
|
|
360
479
|
disconnectedCallback() {
|
|
361
|
-
this._resizeObserver.disconnect(), super.disconnectedCallback();
|
|
480
|
+
this._resizeObserver.disconnect(), this._activeSnapAnimation?.cancel(), this._activeSnapAnimation = null, super.disconnectedCallback();
|
|
362
481
|
}
|
|
363
482
|
firstUpdated() {
|
|
364
483
|
this._onResize();
|
|
365
484
|
}
|
|
485
|
+
updated() {
|
|
486
|
+
this._gesture.setOptions({
|
|
487
|
+
axis: this.orientation === "horizontal" ? "x" : "y",
|
|
488
|
+
target: () => this._$separatorHandle
|
|
489
|
+
});
|
|
490
|
+
}
|
|
366
491
|
render() {
|
|
367
|
-
return
|
|
492
|
+
return p`
|
|
368
493
|
<div
|
|
369
494
|
id="primary"
|
|
370
495
|
part="primary"
|
|
@@ -376,14 +501,16 @@ const p = class p extends _ {
|
|
|
376
501
|
</div>
|
|
377
502
|
|
|
378
503
|
<div id="separator" part="separator">
|
|
379
|
-
${this.collapsible && this._$secondaryElements.length && !this.fixed ?
|
|
504
|
+
${this.collapsible && this._$secondaryElements.length && !this.fixed ? p`<button
|
|
380
505
|
id="collapse-button"
|
|
381
506
|
part="collapse-button"
|
|
382
507
|
aria-label=${this._isCollapsed ? `Expand ${this.label}` : `Collapse ${this.label}`}
|
|
383
508
|
aria-expanded=${String(!this._isCollapsed)}
|
|
384
509
|
aria-controls="primary"
|
|
385
510
|
@click=${this._onCollapseButtonClick}
|
|
386
|
-
|
|
511
|
+
>
|
|
512
|
+
${this._collapseButtonIcon}
|
|
513
|
+
</button>` : g}
|
|
387
514
|
<div
|
|
388
515
|
id="separator-handle"
|
|
389
516
|
role="separator"
|
|
@@ -397,9 +524,8 @@ const p = class p extends _ {
|
|
|
397
524
|
aria-valuemin=${this._effectiveMin}
|
|
398
525
|
aria-valuemax=${this._effectiveMax}
|
|
399
526
|
@keydown=${this._onCollapseKeydown}
|
|
400
|
-
${
|
|
401
|
-
${
|
|
402
|
-
${g(this._onPointerResize)}
|
|
527
|
+
${V(this._onKeyboardResize)}
|
|
528
|
+
${M()}
|
|
403
529
|
?hidden=${!this._$secondaryElements.length}
|
|
404
530
|
></div>
|
|
405
531
|
</div>
|
|
@@ -414,60 +540,69 @@ const p = class p extends _ {
|
|
|
414
540
|
`;
|
|
415
541
|
}
|
|
416
542
|
};
|
|
417
|
-
|
|
418
|
-
let
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
],
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
],
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
],
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
],
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
],
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
],
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
],
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
],
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
],
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
],
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
],
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
],
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
],
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
],
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
],
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
],
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
],
|
|
543
|
+
u.styles = [z];
|
|
544
|
+
let a = u;
|
|
545
|
+
s([
|
|
546
|
+
l({ type: String })
|
|
547
|
+
], a.prototype, "label", 2);
|
|
548
|
+
s([
|
|
549
|
+
l({ type: String, reflect: !0 })
|
|
550
|
+
], a.prototype, "orientation", 2);
|
|
551
|
+
s([
|
|
552
|
+
l({ type: String, reflect: !0 })
|
|
553
|
+
], a.prototype, "mode", 2);
|
|
554
|
+
s([
|
|
555
|
+
l({ type: Number })
|
|
556
|
+
], a.prototype, "step", 2);
|
|
557
|
+
s([
|
|
558
|
+
l({ type: Number })
|
|
559
|
+
], a.prototype, "min", 2);
|
|
560
|
+
s([
|
|
561
|
+
l({ type: Number })
|
|
562
|
+
], a.prototype, "max", 2);
|
|
563
|
+
s([
|
|
564
|
+
l({ type: Number })
|
|
565
|
+
], a.prototype, "value", 1);
|
|
566
|
+
s([
|
|
567
|
+
l({ type: Number, attribute: "default-value" })
|
|
568
|
+
], a.prototype, "defaultValue", 1);
|
|
569
|
+
s([
|
|
570
|
+
c()
|
|
571
|
+
], a.prototype, "_value", 2);
|
|
572
|
+
s([
|
|
573
|
+
l({ type: Boolean })
|
|
574
|
+
], a.prototype, "fixed", 2);
|
|
575
|
+
s([
|
|
576
|
+
l({ type: Boolean })
|
|
577
|
+
], a.prototype, "collapsible", 2);
|
|
578
|
+
s([
|
|
579
|
+
l({ type: String, attribute: "snap-points" })
|
|
580
|
+
], a.prototype, "snapPoints", 2);
|
|
581
|
+
s([
|
|
582
|
+
l({ type: Number, attribute: "swipe-velocity" })
|
|
583
|
+
], a.prototype, "swipeVelocity", 2);
|
|
584
|
+
s([
|
|
585
|
+
c()
|
|
586
|
+
], a.prototype, "_minValue", 2);
|
|
587
|
+
s([
|
|
588
|
+
c()
|
|
589
|
+
], a.prototype, "_maxValue", 2);
|
|
590
|
+
s([
|
|
591
|
+
c()
|
|
592
|
+
], a.prototype, "_lastValue", 2);
|
|
593
|
+
s([
|
|
594
|
+
_("#primary", !0)
|
|
595
|
+
], a.prototype, "_$primary", 2);
|
|
596
|
+
s([
|
|
597
|
+
_("#separator-handle")
|
|
598
|
+
], a.prototype, "_$separatorHandle", 2);
|
|
599
|
+
s([
|
|
600
|
+
v()
|
|
601
|
+
], a.prototype, "_$primaryElements", 2);
|
|
602
|
+
s([
|
|
603
|
+
v({ slot: "secondary" })
|
|
604
|
+
], a.prototype, "_$secondaryElements", 2);
|
|
470
605
|
export {
|
|
471
|
-
|
|
606
|
+
a as R
|
|
472
607
|
};
|
|
473
|
-
//# sourceMappingURL=rc-splitter-
|
|
608
|
+
//# sourceMappingURL=rc-splitter-CJTLxYi3.js.map
|