@nova-design-system/nova-react 3.16.0 → 3.18.0-beta.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/dist/cjs/generated/components.server.js +826 -0
- package/dist/cjs/{index-7K7BV1CP.js → index-CQAMJPJk.js} +846 -317
- package/dist/cjs/index.js +2 -1
- package/dist/cjs/{nv-accordion-item.entry-C-9tYw-c.js → nv-accordion-item.entry-BQ4e6YBV.js} +1 -1
- package/dist/cjs/{nv-accordion.entry-BA3mTIdj.js → nv-accordion.entry-BX5L-Gh7.js} +1 -1
- package/dist/cjs/{nv-alert.entry-Bic-YGW1.js → nv-alert.entry-GY7Xn7F6.js} +1 -1
- package/dist/cjs/{nv-avatar.entry-C-yd0YlD.js → nv-avatar.entry-j-ctCQEi.js} +1 -1
- package/dist/cjs/{nv-badge_2.entry-B_8yvNXL.js → nv-badge_2.entry-tuEGBPUn.js} +1 -1
- package/dist/cjs/{nv-breadcrumb.entry-BCTbG942.js → nv-breadcrumb.entry-DHZpC_e3.js} +1 -1
- package/dist/cjs/{nv-breadcrumbs.entry-C9B5Baf7.js → nv-breadcrumbs.entry-2tzS_xzO.js} +1 -1
- package/dist/cjs/{nv-button.entry-DgX8Bwmq.js → nv-button.entry-BfV4ewn0.js} +2 -8
- package/dist/cjs/{nv-buttongroup.entry-CKhZN_Yf.js → nv-buttongroup.entry-BBTtBLTw.js} +1 -1
- package/dist/cjs/{nv-calendar.entry-E6Pk83WA.js → nv-calendar.entry-CTkbvFRZ.js} +1 -1
- package/dist/cjs/{nv-col.entry-CkZpukX9.js → nv-col.entry-CsSk4Ltj.js} +1 -1
- package/dist/cjs/{nv-datagrid.entry-RsfP7vbC.js → nv-datagrid.entry-DlQRC5CG.js} +2 -2
- package/dist/cjs/{nv-datagridcolumn.entry-D4VrDWo9.js → nv-datagridcolumn.entry-BxSumv4Q.js} +1 -1
- package/dist/cjs/{nv-dialog.entry-BhtWpYHl.js → nv-dialog.entry-BFeHCAhr.js} +1 -1
- package/dist/cjs/{nv-dialogfooter_2.entry-BXLYmzYl.js → nv-dialogfooter_2.entry-CXOzxujX.js} +1 -1
- package/dist/cjs/{nv-fieldcheckbox.entry-D96Nm6DZ.js → nv-fieldcheckbox.entry-BMq7p1kc.js} +1 -1
- package/dist/cjs/{nv-fielddate.entry-ty37R9jF.js → nv-fielddate.entry-DmMQq5bO.js} +1 -1
- package/dist/cjs/{nv-fielddaterange.entry-BSIRu_mq.js → nv-fielddaterange.entry-BJm7_qAB.js} +1 -1
- package/dist/cjs/{nv-fielddropdown.entry-CUzvIoZZ.js → nv-fielddropdown.entry-DOkzDn78.js} +1 -1
- package/dist/cjs/{nv-fielddropdownitem.entry-D-GTxLNk.js → nv-fielddropdownitem.entry-CVI8jUn4.js} +1 -1
- package/dist/cjs/{nv-fieldmultiselect.entry-DFY2bf6s.js → nv-fieldmultiselect.entry-CWxL0xsk.js} +1 -1
- package/dist/cjs/{nv-fieldnumber.entry-CILclJ7Q.js → nv-fieldnumber.entry-bReRT-TF.js} +1 -1
- package/dist/cjs/{nv-fieldpassword.entry-CdR-NM8e.js → nv-fieldpassword.entry-BprEVABM.js} +1 -1
- package/dist/cjs/{nv-fieldradio.entry-lC4scIvU.js → nv-fieldradio.entry-T_uuPP7m.js} +1 -1
- package/dist/cjs/{nv-fieldselect.entry-CYu6870F.js → nv-fieldselect.entry-DB9YREaD.js} +1 -1
- package/dist/cjs/{nv-fieldslider.entry-DOuJAR6P.js → nv-fieldslider.entry-Bkj5p8jp.js} +1 -1
- package/dist/cjs/{nv-fieldtext.entry-BFLUiPa4.js → nv-fieldtext.entry-BsUZW21W.js} +1 -1
- package/dist/cjs/{nv-fieldtextarea.entry-BeI0k97G.js → nv-fieldtextarea.entry-DtC4sL4g.js} +1 -1
- package/dist/cjs/{nv-fieldtime.entry-C28EAKki.js → nv-fieldtime.entry-BW8nABK-.js} +1 -1
- package/dist/cjs/{nv-icon.entry-BXgjUpe_.js → nv-icon.entry-BFTi5BIN.js} +2 -2
- package/dist/cjs/{nv-iconbutton_2.entry-CpIkxrp9.js → nv-iconbutton_2.entry-DI-3_IYV.js} +1 -1
- package/dist/cjs/{nv-menu.entry-as-NOsF-.js → nv-menu.entry-BbqP7TZx.js} +1 -1
- package/dist/cjs/{nv-menuitem.entry-D8KAh6nr.js → nv-menuitem.entry-BxGppIvW.js} +1 -1
- package/dist/cjs/{nv-notification.entry-C-_jV-DL.js → nv-notification.entry-D1gy3PSV.js} +1 -1
- package/dist/cjs/{nv-notificationcontainer.entry-CMn42loT.js → nv-notificationcontainer.entry-MJPLFXsR.js} +1 -1
- package/dist/cjs/{nv-popover.entry--BhEBSir.js → nv-popover.entry-CL28RbQ0.js} +1 -1
- package/dist/cjs/{nv-row.entry-BxhcK9aY.js → nv-row.entry-DkCe2B9f.js} +1 -1
- package/dist/cjs/nv-split.entry-BMVNZDwj.js +337 -0
- package/dist/cjs/{nv-stack.entry-C3DF9jJZ.js → nv-stack.entry-iH3La5O3.js} +2 -2
- package/dist/cjs/{nv-table.entry-pfEGt2KH.js → nv-table.entry-DFHkpLLG.js} +2 -2
- package/dist/cjs/{nv-toggle.entry-ChpqtQtn.js → nv-toggle.entry-BM2Xdtvg.js} +3 -3
- package/dist/cjs/{nv-togglebutton.entry-DE7CKmeN.js → nv-togglebutton.entry-DPu3j4uH.js} +2 -2
- package/dist/cjs/{nv-togglebuttongroup.entry-BJPjdmHD.js → nv-togglebuttongroup.entry-BBUI9mSK.js} +2 -2
- package/dist/cjs/{nv-tooltip.entry-D9-Fga6C.js → nv-tooltip.entry-CEynYna7.js} +2 -2
- package/dist/components/NvDatatable.js +122 -19
- package/dist/generated/components.js +8 -0
- package/dist/generated/components.server.js +9 -0
- package/dist/types/components/NvDatatable.d.ts +35 -1
- package/dist/types/generated/components.d.ts +5 -0
- package/dist/types/generated/components.server.d.ts +5 -0
- package/package.json +11 -4
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-CQAMJPJk.js');
|
|
4
4
|
var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
|
|
5
5
|
var collapse_animation6e0b08df = require('./collapse.animation-6e0b08df-AHWzNGm_.js');
|
|
6
6
|
var fade_animation9b939939 = require('./fade.animation-9b939939-DV--bM4S.js');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-CQAMJPJk.js');
|
|
4
4
|
var fade_animation9b939939 = require('./fade.animation-9b939939-DV--bM4S.js');
|
|
5
5
|
var styleValueTypes_esF5d10b79 = require('./style-value-types.es-f5d10b79-D0QCM8OB.js');
|
|
6
6
|
var events_utilsFe1d907f = require('./events.utils-fe1d907f-01N__3wY.js');
|
|
@@ -0,0 +1,337 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-CQAMJPJk.js');
|
|
4
|
+
require('react');
|
|
5
|
+
require('react-dom');
|
|
6
|
+
|
|
7
|
+
const nvSplitCss = "nv-split{display:flex;width:100%;height:100%;position:relative}nv-split[direction=horizontal]{flex-direction:row}nv-split[direction=vertical]{flex-direction:column}nv-split .nv-split-gutter{position:absolute;z-index:10;background:transparent;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background-color 0.2s ease}nv-split .nv-split-gutter::after{content:\"\";position:absolute;background:var(--nv-color-neutral-400, #ccc);border-radius:2px;transition:background-color 0.2s ease}nv-split .nv-split-gutter:hover::after{background:var(--nv-color-brand-primary, #0066cc)}nv-split .nv-split-gutter::before{content:\"\";position:absolute;background-repeat:no-repeat;background-position:center;opacity:0.4;transition:opacity 0.2s ease;pointer-events:none}nv-split .nv-split-gutter:hover::before{opacity:0.7}nv-split[direction=horizontal]>.nv-split-gutter{width:var(--nv-split-gutter-size, 24px);top:0;bottom:0;transform:translateX(-50%);cursor:col-resize}nv-split[direction=horizontal]>.nv-split-gutter::after{width:2px;height:60%;left:50%;top:20%;transform:translateX(-50%)}nv-split[direction=horizontal]>.nv-split-gutter::before{width:16px;height:16px}nv-split[direction=vertical]>.nv-split-gutter{height:var(--nv-split-gutter-size, 24px);left:0;right:0;transform:translateY(-50%);cursor:row-resize}nv-split[direction=vertical]>.nv-split-gutter::after{height:2px;width:60%;top:50%;left:20%;transform:translateY(-50%)}nv-split[direction=vertical]>.nv-split-gutter::before{width:16px;height:16px}nv-split[data-dragging=true]>.nv-split-gutter::after{background:var(--nv-color-neutral-500, #9ca3af)}nv-split>[slot=pane]{flex:1 1 auto;overflow:hidden;min-width:0;min-height:0;display:flex;flex-direction:column}nv-split>[slot=pane]>nv-split{flex:1 1 auto;width:100%;height:100%}";
|
|
8
|
+
const NvSplitStyle0 = nvSplitCss;
|
|
9
|
+
|
|
10
|
+
const NvSplit = class {
|
|
11
|
+
constructor(hostRef) {
|
|
12
|
+
index.registerInstance(this, hostRef);
|
|
13
|
+
this.sizesChanged = index.createEvent(this, "sizesChanged");
|
|
14
|
+
/****************************************************************************/
|
|
15
|
+
//#region PROPERTIES
|
|
16
|
+
/**
|
|
17
|
+
* Direction of the split layout.
|
|
18
|
+
* - `horizontal`: panes side by side
|
|
19
|
+
* - `vertical`: panes stacked
|
|
20
|
+
*/
|
|
21
|
+
this.direction = 'horizontal';
|
|
22
|
+
/**
|
|
23
|
+
* Initial sizes of the panes in percentages.
|
|
24
|
+
* Example: `[50, 50]` means two equal panes.
|
|
25
|
+
* Explicitly `reflect: false` (array) for framework compatibility.
|
|
26
|
+
*/
|
|
27
|
+
this.sizes = [];
|
|
28
|
+
/**
|
|
29
|
+
* Width or height of the gutter (in px) depending on the split direction.
|
|
30
|
+
* Default is 24px to meet WCAG 2.2 target size requirements for touch accessibility.
|
|
31
|
+
*/
|
|
32
|
+
this.gutterSize = 24;
|
|
33
|
+
//#endregion
|
|
34
|
+
/****************************************************************************/
|
|
35
|
+
//#region STATE
|
|
36
|
+
this.isDragging = false;
|
|
37
|
+
this.dragIndex = -1;
|
|
38
|
+
this.startPos = 0;
|
|
39
|
+
this.startSizes = [];
|
|
40
|
+
// Handlers stored to be able to detach them
|
|
41
|
+
this.onDocMove = (ev) => this.handleMouseMove(ev);
|
|
42
|
+
this.onDocUp = () => this.stopDragging();
|
|
43
|
+
}
|
|
44
|
+
//#endregion
|
|
45
|
+
/****************************************************************************/
|
|
46
|
+
//#region WATCHERS
|
|
47
|
+
onSizesChanged() {
|
|
48
|
+
// Re-apply sizes if modified from the outside
|
|
49
|
+
this.applySizes();
|
|
50
|
+
}
|
|
51
|
+
onDirectionChanged() {
|
|
52
|
+
// Update the orientation and the cursors of the gutters
|
|
53
|
+
this.ensureGutters();
|
|
54
|
+
this.applySizes();
|
|
55
|
+
}
|
|
56
|
+
//#endregion
|
|
57
|
+
/****************************************************************************/
|
|
58
|
+
//#region LIFECYCLE
|
|
59
|
+
componentDidLoad() {
|
|
60
|
+
// Initialization (once)
|
|
61
|
+
this.ensureGutters();
|
|
62
|
+
this.applySizes();
|
|
63
|
+
this.positionGutters();
|
|
64
|
+
// Observer: reposition gutters when resized (nested or parent split changes)
|
|
65
|
+
this.ro = new ResizeObserver(() => this.positionGutters());
|
|
66
|
+
this.ro.observe(this.el);
|
|
67
|
+
window.addEventListener('resize', () => this.positionGutters());
|
|
68
|
+
}
|
|
69
|
+
disconnectedCallback() {
|
|
70
|
+
var _a;
|
|
71
|
+
// Security cleanup (in case a drag was in progress)
|
|
72
|
+
this.detachDocumentListeners();
|
|
73
|
+
(_a = this.ro) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
74
|
+
this.ro = undefined;
|
|
75
|
+
}
|
|
76
|
+
//#endregion
|
|
77
|
+
/****************************************************************************/
|
|
78
|
+
//#region PUBLIC METHODS
|
|
79
|
+
/**
|
|
80
|
+
* Programmatically set pane sizes.
|
|
81
|
+
* @param {Array<number>} sizes Array of pane sizes in percentages.
|
|
82
|
+
* @returns {Promise<void>}
|
|
83
|
+
*/
|
|
84
|
+
async setSizes(sizes) {
|
|
85
|
+
this.sizes = [...sizes];
|
|
86
|
+
this.applySizes();
|
|
87
|
+
this.sizesChanged.emit([...this.sizes]);
|
|
88
|
+
this.positionGutters();
|
|
89
|
+
}
|
|
90
|
+
/**
|
|
91
|
+
* Returns the current pane sizes.
|
|
92
|
+
* @returns {Promise<number[]>} Array of pane sizes in percentages.
|
|
93
|
+
*/
|
|
94
|
+
async getSizes() {
|
|
95
|
+
return [...this.sizes];
|
|
96
|
+
}
|
|
97
|
+
/**
|
|
98
|
+
* Collapse a specific pane to 0 size.
|
|
99
|
+
* @param {number} index Index of the pane to collapse.
|
|
100
|
+
* @returns {Promise<void>}
|
|
101
|
+
*/
|
|
102
|
+
async collapse(index) {
|
|
103
|
+
const panes = this.getPanes();
|
|
104
|
+
if (index < 0 || index >= panes.length)
|
|
105
|
+
return;
|
|
106
|
+
// Simple strategy: 0% for the index, the rest (100%) for its nearest neighbor
|
|
107
|
+
const next = new Array(panes.length).fill(0);
|
|
108
|
+
const target = index < panes.length - 1 ? index + 1 : index - 1;
|
|
109
|
+
if (target >= 0)
|
|
110
|
+
next[target] = 100;
|
|
111
|
+
this.sizes = next;
|
|
112
|
+
this.applySizes();
|
|
113
|
+
this.sizesChanged.emit([...this.sizes]);
|
|
114
|
+
this.positionGutters();
|
|
115
|
+
}
|
|
116
|
+
/**
|
|
117
|
+
* Destroy the split instance: removes gutters and resets layout state.
|
|
118
|
+
* @returns {Promise<void>}
|
|
119
|
+
*/
|
|
120
|
+
async destroy() {
|
|
121
|
+
var _a;
|
|
122
|
+
this.sizes = [];
|
|
123
|
+
this.isDragging = false;
|
|
124
|
+
this.dragIndex = -1;
|
|
125
|
+
this.removeOwnGutters();
|
|
126
|
+
this.detachDocumentListeners();
|
|
127
|
+
(_a = this.ro) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
128
|
+
}
|
|
129
|
+
//#endregion
|
|
130
|
+
/****************************************************************************/
|
|
131
|
+
//#region INTERNAL HELPERS
|
|
132
|
+
/**
|
|
133
|
+
* Returns the panes of the split.
|
|
134
|
+
* @returns {HTMLElement[]} The panes of the split.
|
|
135
|
+
*/
|
|
136
|
+
getPanes() {
|
|
137
|
+
// Only the direct children slot="pane"
|
|
138
|
+
return Array.from(this.el.querySelectorAll(':scope > [slot="pane"]'));
|
|
139
|
+
}
|
|
140
|
+
/**
|
|
141
|
+
* Returns the own gutters of the split.
|
|
142
|
+
* @returns {HTMLElement[]} The own gutters of the split.
|
|
143
|
+
*/
|
|
144
|
+
getOwnGutters() {
|
|
145
|
+
// Only the direct gutters of THIS instance
|
|
146
|
+
return Array.from(this.el.querySelectorAll(':scope > .nv-split-gutter[data-auto="true"]'));
|
|
147
|
+
}
|
|
148
|
+
/**
|
|
149
|
+
* Removes the own gutters of the split.
|
|
150
|
+
*/
|
|
151
|
+
removeOwnGutters() {
|
|
152
|
+
this.getOwnGutters().forEach(g => g.remove());
|
|
153
|
+
}
|
|
154
|
+
/**
|
|
155
|
+
* Ensures the gutters of the split.
|
|
156
|
+
*/
|
|
157
|
+
ensureGutters() {
|
|
158
|
+
const panes = this.getPanes();
|
|
159
|
+
// 1) Clean ONLY the old direct gutters of THIS instance
|
|
160
|
+
this.removeOwnGutters();
|
|
161
|
+
if (panes.length <= 1)
|
|
162
|
+
return;
|
|
163
|
+
// 2) Add the gutters (directs) between the panes
|
|
164
|
+
panes.forEach((pane, i) => {
|
|
165
|
+
if (i >= panes.length - 1)
|
|
166
|
+
return;
|
|
167
|
+
const g = document.createElement('div');
|
|
168
|
+
g.className = 'nv-split-gutter';
|
|
169
|
+
g.setAttribute('data-auto', 'true');
|
|
170
|
+
if (this.direction === 'horizontal') {
|
|
171
|
+
g.style.width = `${this.gutterSize}px`;
|
|
172
|
+
g.style.cursor = 'col-resize';
|
|
173
|
+
}
|
|
174
|
+
else {
|
|
175
|
+
g.style.height = `${this.gutterSize}px`;
|
|
176
|
+
g.style.cursor = 'row-resize';
|
|
177
|
+
}
|
|
178
|
+
// Customizable internal slot
|
|
179
|
+
const slotEl = document.createElement('slot');
|
|
180
|
+
slotEl.name = 'gutter';
|
|
181
|
+
g.appendChild(slotEl);
|
|
182
|
+
// Listener drag (index = gutter between pane i and i+1)
|
|
183
|
+
g.addEventListener('mousedown', (ev) => this.startDragging(ev, i));
|
|
184
|
+
// Insert just after the pane
|
|
185
|
+
pane.insertAdjacentElement('afterend', g);
|
|
186
|
+
});
|
|
187
|
+
this.positionGutters();
|
|
188
|
+
}
|
|
189
|
+
/**
|
|
190
|
+
* Applies the sizes to the panes.
|
|
191
|
+
*/
|
|
192
|
+
applySizes() {
|
|
193
|
+
const panes = this.getPanes();
|
|
194
|
+
const n = panes.length;
|
|
195
|
+
if (n === 0)
|
|
196
|
+
return;
|
|
197
|
+
// Default values if inconsistent
|
|
198
|
+
if (!this.sizes || this.sizes.length !== n) {
|
|
199
|
+
this.sizes = Array(n).fill(100 / n);
|
|
200
|
+
}
|
|
201
|
+
panes.forEach((pane, i) => {
|
|
202
|
+
var _a;
|
|
203
|
+
const size = Math.max(0, (_a = this.sizes[i]) !== null && _a !== void 0 ? _a : 100 / n);
|
|
204
|
+
// Flex-basis via flex shorthand (https://developer.mozilla.org/en-US/docs/Web/CSS/flex)
|
|
205
|
+
pane.style.flex = `0 0 ${size}%`;
|
|
206
|
+
pane.style.minWidth = '0';
|
|
207
|
+
pane.style.minHeight = '0';
|
|
208
|
+
pane.style.overflow = 'hidden'; // let a nv-split child extend
|
|
209
|
+
pane.style.display = 'flex';
|
|
210
|
+
pane.style.flexDirection = 'column';
|
|
211
|
+
});
|
|
212
|
+
this.positionGutters();
|
|
213
|
+
}
|
|
214
|
+
/**
|
|
215
|
+
* Attaches the document listeners.
|
|
216
|
+
*/
|
|
217
|
+
attachDocumentListeners() {
|
|
218
|
+
document.addEventListener('mousemove', this.onDocMove);
|
|
219
|
+
document.addEventListener('mouseup', this.onDocUp);
|
|
220
|
+
}
|
|
221
|
+
/**
|
|
222
|
+
* Detaches the document listeners.
|
|
223
|
+
*/
|
|
224
|
+
detachDocumentListeners() {
|
|
225
|
+
document.removeEventListener('mousemove', this.onDocMove);
|
|
226
|
+
document.removeEventListener('mouseup', this.onDocUp);
|
|
227
|
+
}
|
|
228
|
+
/**
|
|
229
|
+
* Positions the gutters based on the current sizes of the panes.
|
|
230
|
+
*/
|
|
231
|
+
positionGutters() {
|
|
232
|
+
var _a, _b;
|
|
233
|
+
const panes = this.getPanes();
|
|
234
|
+
const gutters = this.getOwnGutters();
|
|
235
|
+
if (panes.length <= 1 || gutters.length === 0)
|
|
236
|
+
return;
|
|
237
|
+
const horizontal = this.direction === 'horizontal';
|
|
238
|
+
let cumPct = 0;
|
|
239
|
+
for (let i = 0; i < gutters.length; i++) {
|
|
240
|
+
const sizePct = (_b = (_a = this.sizes) === null || _a === void 0 ? void 0 : _a[i]) !== null && _b !== void 0 ? _b : 100 / panes.length;
|
|
241
|
+
cumPct += sizePct;
|
|
242
|
+
const g = gutters[i];
|
|
243
|
+
g.style.position = 'absolute';
|
|
244
|
+
if (horizontal) {
|
|
245
|
+
g.style.left = `${cumPct}%`;
|
|
246
|
+
g.style.top = '0';
|
|
247
|
+
g.style.bottom = '0';
|
|
248
|
+
g.style.height = '100%';
|
|
249
|
+
}
|
|
250
|
+
else {
|
|
251
|
+
g.style.top = `${cumPct}%`;
|
|
252
|
+
g.style.left = '0';
|
|
253
|
+
g.style.right = '0';
|
|
254
|
+
g.style.width = '100%';
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
/**
|
|
259
|
+
* Starts the dragging process.
|
|
260
|
+
* @param {MouseEvent} ev - The mouse event.
|
|
261
|
+
* @param {number} index - The index of the gutter.
|
|
262
|
+
*/
|
|
263
|
+
startDragging(ev, index) {
|
|
264
|
+
this.isDragging = true;
|
|
265
|
+
this.dragIndex = index;
|
|
266
|
+
this.startPos = this.direction === 'horizontal' ? ev.clientX : ev.clientY;
|
|
267
|
+
this.startSizes = [...this.sizes];
|
|
268
|
+
this.attachDocumentListeners();
|
|
269
|
+
}
|
|
270
|
+
/**
|
|
271
|
+
* Handles the mouse movement during dragging.
|
|
272
|
+
* @param {MouseEvent} ev - The mouse event.
|
|
273
|
+
*/
|
|
274
|
+
handleMouseMove(ev) {
|
|
275
|
+
var _a, _b, _c, _d;
|
|
276
|
+
if (!this.isDragging || this.dragIndex < 0)
|
|
277
|
+
return;
|
|
278
|
+
const panes = this.getPanes();
|
|
279
|
+
if (panes.length < 2)
|
|
280
|
+
return;
|
|
281
|
+
const rect = this.el.getBoundingClientRect();
|
|
282
|
+
// Ensure we never divide by zero if the element has zero width/height
|
|
283
|
+
const rawSize = this.direction === 'horizontal' ? rect.width : rect.height;
|
|
284
|
+
const totalPx = Math.max(rawSize, 1);
|
|
285
|
+
const deltaPx = (this.direction === 'horizontal' ? ev.clientX : ev.clientY) -
|
|
286
|
+
this.startPos;
|
|
287
|
+
const deltaPct = (deltaPx / totalPx) * 100;
|
|
288
|
+
const i = this.dragIndex;
|
|
289
|
+
const j = i + 1;
|
|
290
|
+
let left = this.startSizes[i] + deltaPct;
|
|
291
|
+
let right = this.startSizes[j] - deltaPct;
|
|
292
|
+
// minSizes (px) -> %
|
|
293
|
+
const minLeftPct = (((_b = (_a = this.minSizes) === null || _a === void 0 ? void 0 : _a[i]) !== null && _b !== void 0 ? _b : 0) / totalPx) * 100;
|
|
294
|
+
const minRightPct = (((_d = (_c = this.minSizes) === null || _c === void 0 ? void 0 : _c[j]) !== null && _d !== void 0 ? _d : 0) / totalPx) * 100;
|
|
295
|
+
left = Math.max(left, minLeftPct);
|
|
296
|
+
right = Math.max(right, minRightPct);
|
|
297
|
+
// Keep the sum of the pair i/j constant
|
|
298
|
+
const pairSum = left + right;
|
|
299
|
+
const targetSum = this.startSizes[i] + this.startSizes[j];
|
|
300
|
+
if (Math.abs(pairSum - targetSum) > 0.0001) {
|
|
301
|
+
const k = targetSum / (pairSum || 1);
|
|
302
|
+
left *= k;
|
|
303
|
+
right *= k;
|
|
304
|
+
}
|
|
305
|
+
const next = [...this.startSizes];
|
|
306
|
+
next[i] = left;
|
|
307
|
+
next[j] = right;
|
|
308
|
+
this.sizes = next;
|
|
309
|
+
this.applySizes();
|
|
310
|
+
this.sizesChanged.emit([...this.sizes]);
|
|
311
|
+
this.positionGutters();
|
|
312
|
+
}
|
|
313
|
+
/**
|
|
314
|
+
* Stops the dragging process.
|
|
315
|
+
*/
|
|
316
|
+
stopDragging() {
|
|
317
|
+
if (!this.isDragging)
|
|
318
|
+
return;
|
|
319
|
+
this.isDragging = false;
|
|
320
|
+
this.dragIndex = -1;
|
|
321
|
+
this.detachDocumentListeners();
|
|
322
|
+
}
|
|
323
|
+
//#endregion
|
|
324
|
+
/****************************************************************************/
|
|
325
|
+
//#region RENDER
|
|
326
|
+
render() {
|
|
327
|
+
return (index.h(index.Host, { key: 'e3b158ff1b4f665862079d245c219102d8b8ccda', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: 'baa8105a05bf8446d7a31a23cd5276edb320ea2f', name: "pane" }), index.h("slot", { key: '44afe4f4a220aff45f802218f2618e9305141a9f', name: "gutter" })));
|
|
328
|
+
}
|
|
329
|
+
get el() { return index.getElement(this); }
|
|
330
|
+
static get watchers() { return {
|
|
331
|
+
"sizes": ["onSizesChanged"],
|
|
332
|
+
"direction": ["onDirectionChanged"]
|
|
333
|
+
}; }
|
|
334
|
+
};
|
|
335
|
+
NvSplit.style = NvSplitStyle0;
|
|
336
|
+
|
|
337
|
+
exports.nv_split = NvSplit;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-CQAMJPJk.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
5
|
require('react');
|
|
6
6
|
require('react-dom');
|
|
@@ -23,7 +23,7 @@ const NvStack = class {
|
|
|
23
23
|
/****************************************************************************/
|
|
24
24
|
//#region RENDER
|
|
25
25
|
render() {
|
|
26
|
-
return (index.h(index.Host, { key: '
|
|
26
|
+
return (index.h(index.Host, { key: '5922efd8652a14d73e812e85dd6770101e22fe46', class: clsx297c1ffe.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: '71daf4ee34bd57d785203f98799b6ea7c66ffa3b' })));
|
|
27
27
|
}
|
|
28
28
|
};
|
|
29
29
|
NvStack.style = NvStackStyle0;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-CQAMJPJk.js');
|
|
4
4
|
require('react');
|
|
5
5
|
require('react-dom');
|
|
6
6
|
|
|
@@ -236,7 +236,7 @@ const NvTable = class {
|
|
|
236
236
|
/****************************************************************************/
|
|
237
237
|
//#region RENDER
|
|
238
238
|
render() {
|
|
239
|
-
return (index.h(index.Host, { key: '
|
|
239
|
+
return (index.h(index.Host, { key: '16b564cc29e8987d8b3fda3a84c0b19882a733bd' }, index.h("slot", { key: '1305cbc6d29caa60df55bfa01a39a3417a27ec01' })));
|
|
240
240
|
}
|
|
241
241
|
get host() { return index.getElement(this); }
|
|
242
242
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-CQAMJPJk.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
5
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
6
6
|
require('react');
|
|
@@ -66,8 +66,8 @@ const NvToggle = class {
|
|
|
66
66
|
/****************************************************************************/
|
|
67
67
|
//#region RENDER
|
|
68
68
|
render() {
|
|
69
|
-
return (index.h(index.Host, { key: '
|
|
70
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
69
|
+
return (index.h(index.Host, { key: '0f440b59ac0c32d9abe9577668d7045081819b49', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '4289435e34eb31a8e59e00cefcba2e17e98bd03a', class: "input-container" }, index.h("input", { key: '1b7d05f77fd32cece9eed2e6cf79c7e2e707f64c', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: '6d78d7e80eb790bbead21bba6108329f9ded3746', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '524a2c2542a45945bddb688c5dff6c9426d58570', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '59eda4b826602062620e7167acf3c8de0f77ebef', name: "label" }, this.label))), (this.description ||
|
|
70
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '6e8412879ed60fc6806464432348bd52483e3567', class: "description" }, index.h("slot", { key: '85a876130569a5a4051e271eaf1cf49593a014a6', name: "description" }, this.description))))));
|
|
71
71
|
}
|
|
72
72
|
static get formAssociated() { return true; }
|
|
73
73
|
get el() { return index.getElement(this); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-CQAMJPJk.js');
|
|
4
4
|
require('react');
|
|
5
5
|
require('react-dom');
|
|
6
6
|
|
|
@@ -48,7 +48,7 @@ const NvTogglebutton = class {
|
|
|
48
48
|
/****************************************************************************/
|
|
49
49
|
//#region RENDER
|
|
50
50
|
render() {
|
|
51
|
-
return (index.h(index.Host, { key: '
|
|
51
|
+
return (index.h(index.Host, { key: 'b9e37fc1cb34272bca476c7b61db173ab2a9d238', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: 'cf9cf3445fd93873def1f9fa9cbec46c35600025' })));
|
|
52
52
|
}
|
|
53
53
|
};
|
|
54
54
|
NvTogglebutton.style = NvTogglebuttonStyle0;
|
package/dist/cjs/{nv-togglebuttongroup.entry-BJPjdmHD.js → nv-togglebuttongroup.entry-BBUI9mSK.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-CQAMJPJk.js');
|
|
4
4
|
require('react');
|
|
5
5
|
require('react-dom');
|
|
6
6
|
|
|
@@ -156,7 +156,7 @@ const NvTogglebuttongroup = class {
|
|
|
156
156
|
/****************************************************************************/
|
|
157
157
|
//#region RENDER
|
|
158
158
|
render() {
|
|
159
|
-
return (index.h(index.Host, { key: '
|
|
159
|
+
return (index.h(index.Host, { key: '7aad0160ae8e093765ba42649293e27d7b93ab75' }, index.h("slot", { key: '39364122a5e65b1a454bd782a5daacc7edfee8b0' })));
|
|
160
160
|
}
|
|
161
161
|
get el() { return index.getElement(this); }
|
|
162
162
|
static get watchers() { return {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-CQAMJPJk.js');
|
|
4
4
|
require('react');
|
|
5
5
|
require('react-dom');
|
|
6
6
|
|
|
@@ -46,7 +46,7 @@ const NvTooltip = class {
|
|
|
46
46
|
/****************************************************************************/
|
|
47
47
|
//#region RENDER
|
|
48
48
|
render() {
|
|
49
|
-
return (index.h(index.Host, { key: '
|
|
49
|
+
return (index.h(index.Host, { key: '5d5facbf2a0487bda4fbae49913a2cb4f69dcf5a' }, index.h("slot", { key: '91080d347f3473879109f7b0b59b159f5bb5979b' }), index.h("nv-popover", { key: '876e5e2487d1b2b5182e42909a6edeab5b3e9db2', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'e30ce16ed27e41dee7359fb44ccba7a780e72d37', slot: "content" }, this.message), index.h("slot", { key: '395c75d7f45bab9aaebf979bd75087058b979350', name: "content" }))));
|
|
50
50
|
}
|
|
51
51
|
get el() { return index.getElement(this); }
|
|
52
52
|
};
|