@nova-design-system/nova-react 3.15.0 → 3.17.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-BK1_MpRZ.js → index-B0fvq6nd.js} +4818 -1376
- package/dist/cjs/index.js +3 -2
- package/dist/cjs/{nv-accordion-item.entry-BPaDkIFa.js → nv-accordion-item.entry-DSXSMuOt.js} +2 -2
- package/dist/cjs/{nv-accordion.entry-BaHER2iL.js → nv-accordion.entry-D2GTCEoF.js} +6 -6
- package/dist/cjs/{nv-alert.entry-Hv-y3Bwl.js → nv-alert.entry-CxrdJWzE.js} +2 -2
- package/dist/cjs/nv-avatar.entry-Boe2Bp39.js +68 -0
- package/dist/cjs/{nv-badge_2.entry-CwlWa72m.js → nv-badge_2.entry-Cvu8cWAm.js} +1 -1
- package/dist/cjs/{nv-breadcrumb.entry-BvHgDgxV.js → nv-breadcrumb.entry-IBd49U13.js} +2 -2
- package/dist/cjs/{nv-breadcrumbs.entry-BdptRKYA.js → nv-breadcrumbs.entry-CxDCe3pi.js} +1 -1
- package/dist/cjs/nv-button.entry-veszqyTF.js +159 -0
- package/dist/cjs/{nv-buttongroup.entry-Bh0f3bAn.js → nv-buttongroup.entry-BoqH0Kje.js} +1 -1
- package/dist/cjs/{nv-calendar.entry-BZLITXEC.js → nv-calendar.entry-D-Wl56-6.js} +1 -1
- package/dist/cjs/{nv-col.entry-I3bCSLB5.js → nv-col.entry-BhKZwFpL.js} +1 -1
- package/dist/cjs/{nv-datagrid.entry-BzIkgOV6.js → nv-datagrid.entry-DnMZbymp.js} +177 -10
- package/dist/cjs/{nv-datagridcolumn.entry-BuFhEECG.js → nv-datagridcolumn.entry-U38uoM6D.js} +1 -1
- package/dist/cjs/{nv-dialog.entry-DIbIIXo2.js → nv-dialog.entry-BF4VplVi.js} +32 -29
- package/dist/cjs/{nv-dialogfooter_2.entry-Thzk1kVd.js → nv-dialogfooter_2.entry-TqO3Mryg.js} +2 -2
- package/dist/cjs/{nv-fieldcheckbox.entry-mkas423y.js → nv-fieldcheckbox.entry-C_rJ7Jrf.js} +2 -2
- package/dist/cjs/{nv-fielddate.entry-Cek70TQM.js → nv-fielddate.entry-DZdztKCP.js} +51 -26
- package/dist/cjs/{nv-fielddaterange.entry-C3BYAnVq.js → nv-fielddaterange.entry-CMxpi6X9.js} +68 -42
- package/dist/cjs/{nv-fielddropdown.entry-Djz5-R1T.js → nv-fielddropdown.entry-T-qNo0gM.js} +33 -7
- package/dist/cjs/{nv-fielddropdownitem.entry-B2z13jEI.js → nv-fielddropdownitem.entry-BfIqaxW3.js} +1 -1
- package/dist/cjs/{nv-fieldmultiselect.entry-uJ9i2gtz.js → nv-fieldmultiselect.entry-rtKSNZ5F.js} +187 -156
- package/dist/cjs/{nv-fieldnumber.entry-zpWCDG_-.js → nv-fieldnumber.entry-BD-xCdb5.js} +2 -2
- package/dist/cjs/{nv-fieldpassword.entry-C835HE_i.js → nv-fieldpassword.entry-Dmt91T4y.js} +2 -2
- package/dist/cjs/{nv-fieldradio.entry-CzLMbo4W.js → nv-fieldradio.entry-CAoRufTW.js} +2 -2
- package/dist/cjs/{nv-fieldselect.entry-BzcYzmqe.js → nv-fieldselect.entry-2YLbIpBO.js} +2 -2
- package/dist/cjs/{nv-fieldslider.entry-B5vyrQZw.js → nv-fieldslider.entry-D6g_MrUd.js} +2 -2
- package/dist/cjs/{nv-fieldtext.entry-DnPQxVqp.js → nv-fieldtext.entry-D-SS4OPR.js} +2 -2
- package/dist/cjs/{nv-fieldtextarea.entry-n2MJK2Jg.js → nv-fieldtextarea.entry-L0XDrdHL.js} +2 -2
- package/dist/cjs/{nv-fieldtime.entry-DChhvqKi.js → nv-fieldtime.entry-Hw5VOmpK.js} +25 -12
- package/dist/cjs/nv-icon.entry-B7mLhu0c.js +80 -0
- package/dist/cjs/{nv-iconbutton_2.entry-u0l16LeW.js → nv-iconbutton_2.entry-iinBJBb6.js} +2 -2
- package/dist/cjs/{nv-menu.entry-OYVh6iMu.js → nv-menu.entry-BTW4XauN.js} +24 -9
- package/dist/cjs/{nv-menuitem.entry-Dj6N1n9X.js → nv-menuitem.entry-CIT2_Fbe.js} +1 -1
- package/dist/cjs/{nv-notification.entry-D1dVSEYZ.js → nv-notification.entry-CVyzCsSh.js} +2 -2
- package/dist/cjs/{nv-notificationcontainer.entry-Bp2NR_fe.js → nv-notificationcontainer.entry-CqoyGWAa.js} +1 -1
- package/dist/cjs/{nv-popover.entry-Bf2AEn9B.js → nv-popover.entry-Bf5ihsdq.js} +67 -61
- package/dist/cjs/{nv-row.entry-Bi9eoQEh.js → nv-row.entry-Chp5QzjD.js} +1 -1
- package/dist/cjs/nv-split.entry-DSB_HMU-.js +337 -0
- package/dist/cjs/{nv-stack.entry-Dd680LIT.js → nv-stack.entry-D6L6830W.js} +2 -2
- package/dist/cjs/nv-table.entry-B-UuWaI5.js +245 -0
- package/dist/cjs/{nv-toggle.entry-gBokGnGe.js → nv-toggle.entry-AG7sAORg.js} +2 -2
- package/dist/cjs/{nv-togglebutton.entry-ZpltTrQe.js → nv-togglebutton.entry-Btlxm5gO.js} +1 -1
- package/dist/cjs/{nv-togglebuttongroup.entry-Bu0C6Iq3.js → nv-togglebuttongroup.entry-CM3nWiUU.js} +2 -2
- package/dist/cjs/{nv-tooltip.entry-DR4aj5qF.js → nv-tooltip.entry-m4AYXhW3.js} +1 -1
- package/dist/components/NvDatatable.js +45 -0
- package/dist/generated/components.js +10 -10
- package/dist/generated/components.server.js +10 -16
- package/dist/index.js +1 -0
- package/dist/types/components/NvDatatable.d.ts +25 -0
- package/dist/types/generated/components.d.ts +7 -12
- package/dist/types/generated/components.server.d.ts +7 -12
- package/dist/types/index.d.ts +1 -0
- package/package.json +14 -6
- package/dist/cjs/dom.utils-ac71e0ef-CmIwRr6O.js +0 -168
- package/dist/cjs/nv-avatar.entry-BTmGyeGF.js +0 -68
- package/dist/cjs/nv-button.entry-6O39hBHY.js +0 -165
- package/dist/cjs/nv-icon.entry-agdqxUMS.js +0 -80
- package/dist/cjs/nv-table.entry-wxn9GDDo.js +0 -339
- package/dist/cjs/nv-tablecolumn.entry-Bo0z0XyB.js +0 -19
|
@@ -0,0 +1,337 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-B0fvq6nd.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-B0fvq6nd.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;
|
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-B0fvq6nd.js');
|
|
4
|
+
require('react');
|
|
5
|
+
require('react-dom');
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Table utility functions and constants for nv-table component
|
|
9
|
+
*
|
|
10
|
+
* This module contains pure utility functions for table column resizing logic,
|
|
11
|
+
* pointer event handling calculations, and related helper functions.
|
|
12
|
+
*/
|
|
13
|
+
/**
|
|
14
|
+
* Constants for table column resizing behavior
|
|
15
|
+
*/
|
|
16
|
+
const TABLE_CONSTANTS = Object.freeze({
|
|
17
|
+
/** Handle width for fine pointers (mouse) in pixels */
|
|
18
|
+
HANDLE_W: 12,
|
|
19
|
+
/** Handle width for coarse pointers (touch) in pixels */
|
|
20
|
+
HANDLE_W_TOUCH: 24,
|
|
21
|
+
/** Minimum column width in pixels */
|
|
22
|
+
MIN_W: 40,
|
|
23
|
+
});
|
|
24
|
+
/**
|
|
25
|
+
* Determines the appropriate handle width based on the current pointer type
|
|
26
|
+
* @returns {number} Handle width in pixels (10px for fine pointers, 24px for coarse/touch)
|
|
27
|
+
*/
|
|
28
|
+
function getHandleWidthForCurrentPointer() {
|
|
29
|
+
// Match the CSS media query: wider handle on coarse pointers (touch)
|
|
30
|
+
return matchMedia('(pointer: coarse)').matches
|
|
31
|
+
? TABLE_CONSTANTS.HANDLE_W_TOUCH
|
|
32
|
+
: TABLE_CONSTANTS.HANDLE_W;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Calculates the pointer's horizontal offset within a table cell
|
|
36
|
+
* @param {PointerEvent} event - The pointer event
|
|
37
|
+
* @param {HTMLTableCellElement} cell - The table cell element
|
|
38
|
+
* @returns {number} The horizontal offset from the left edge of the cell
|
|
39
|
+
*/
|
|
40
|
+
function getPointerOffsetInCell(event, cell) {
|
|
41
|
+
const rect = cell.getBoundingClientRect();
|
|
42
|
+
return event.clientX - rect.left;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Determines if the pointer is within the resize handle area of a table cell
|
|
46
|
+
* @param {number} offsetX - Horizontal offset within the cell
|
|
47
|
+
* @param {number} cellWidth - Total width of the cell
|
|
48
|
+
* @param {number} handleWidth - Width of the resize handle area
|
|
49
|
+
* @returns {boolean} True if the pointer is in the resize handle area
|
|
50
|
+
*/
|
|
51
|
+
function isInResizeHandle(offsetX, cellWidth, handleWidth) {
|
|
52
|
+
return offsetX >= cellWidth - handleWidth;
|
|
53
|
+
}
|
|
54
|
+
/**
|
|
55
|
+
* Calculates the new column width based on resize delta and constraints
|
|
56
|
+
* @param {number} startWidth - Original width of the column
|
|
57
|
+
* @param {number} delta - Change in pixels from the start position
|
|
58
|
+
* @param {number} minWidth - Minimum allowed width for the column
|
|
59
|
+
* @returns {number} The calculated new width, constrained by minimum
|
|
60
|
+
*/
|
|
61
|
+
function calculateNewWidth(startWidth, delta, minWidth = TABLE_CONSTANTS.MIN_W) {
|
|
62
|
+
return Math.max(minWidth, startWidth + delta);
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* Validates that a table cell element is suitable for resizing
|
|
66
|
+
* @param {HTMLElement | null} element - The element to check
|
|
67
|
+
* @returns {element is HTMLTableCellElement} Type guard for table cell elements
|
|
68
|
+
*/
|
|
69
|
+
function isValidTableCell(element) {
|
|
70
|
+
return (element === null || element === void 0 ? void 0 : element.tagName) === 'TH' || (element === null || element === void 0 ? void 0 : element.tagName) === 'TD';
|
|
71
|
+
}
|
|
72
|
+
/**
|
|
73
|
+
* Finds the closest table cell element from an event target
|
|
74
|
+
* @param {EventTarget | null} target - The event target
|
|
75
|
+
* @returns {HTMLTableCellElement | null} The closest table cell or null
|
|
76
|
+
*/
|
|
77
|
+
function getClosestTableCell(target) {
|
|
78
|
+
if (!(target instanceof HTMLElement))
|
|
79
|
+
return null;
|
|
80
|
+
const cell = target.closest('th, td');
|
|
81
|
+
return isValidTableCell(cell) ? cell : null;
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* Sets up pointer capture for consistent drag behavior across browsers
|
|
85
|
+
* @param {HTMLTableCellElement} cell - The table cell element
|
|
86
|
+
* @param {number} pointerId - The pointer ID from the pointer event
|
|
87
|
+
* @returns {boolean} True if capture was successfully set
|
|
88
|
+
*/
|
|
89
|
+
function setPointerCapture(cell, pointerId) {
|
|
90
|
+
var _a;
|
|
91
|
+
try {
|
|
92
|
+
(_a = cell.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(cell, pointerId);
|
|
93
|
+
return true;
|
|
94
|
+
}
|
|
95
|
+
catch (_b) {
|
|
96
|
+
return false;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
/**
|
|
100
|
+
* Releases pointer capture
|
|
101
|
+
* @param {HTMLTableCellElement} cell - The table cell element
|
|
102
|
+
* @param {number} pointerId - The pointer ID from the pointer event
|
|
103
|
+
* @returns {boolean} True if release was successful
|
|
104
|
+
*/
|
|
105
|
+
function releasePointerCapture(cell, pointerId) {
|
|
106
|
+
var _a;
|
|
107
|
+
try {
|
|
108
|
+
(_a = cell.releasePointerCapture) === null || _a === void 0 ? void 0 : _a.call(cell, pointerId);
|
|
109
|
+
return true;
|
|
110
|
+
}
|
|
111
|
+
catch (_b) {
|
|
112
|
+
return false;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
/**
|
|
116
|
+
* Prevents text selection during drag operations
|
|
117
|
+
* @param {boolean} prevent - Whether to prevent selection
|
|
118
|
+
*/
|
|
119
|
+
function setUserSelectPrevention(prevent) {
|
|
120
|
+
document.body.style.userSelect = prevent ? 'none' : '';
|
|
121
|
+
}
|
|
122
|
+
/**
|
|
123
|
+
* Gets the current width of a table cell element
|
|
124
|
+
* @param {HTMLTableCellElement} cell - The table cell element
|
|
125
|
+
* @returns {number} The current width in pixels
|
|
126
|
+
*/
|
|
127
|
+
function getCellWidth(cell) {
|
|
128
|
+
return cell.offsetWidth;
|
|
129
|
+
}
|
|
130
|
+
/**
|
|
131
|
+
* Applies a width to a table cell element
|
|
132
|
+
* @param {HTMLTableCellElement} cell - The table cell element
|
|
133
|
+
* @param {number} width - The width to apply in pixels
|
|
134
|
+
*/
|
|
135
|
+
function setCellWidth(cell, width) {
|
|
136
|
+
cell.style.width = `${width}px`;
|
|
137
|
+
}
|
|
138
|
+
/**
|
|
139
|
+
* Calculates the delta (change) in horizontal position between two pointer events
|
|
140
|
+
* @param {number} currentX - Current clientX position
|
|
141
|
+
* @param {number} startX - Starting clientX position
|
|
142
|
+
* @returns {number} The horizontal delta
|
|
143
|
+
*/
|
|
144
|
+
function calculatePointerDelta(currentX, startX) {
|
|
145
|
+
return currentX - startX;
|
|
146
|
+
}
|
|
147
|
+
/**
|
|
148
|
+
* Creates a new resize state object
|
|
149
|
+
* @param {HTMLTableCellElement} cell - The cell being resized
|
|
150
|
+
* @param {PointerEvent} event - The initiating pointer event
|
|
151
|
+
* @returns {ResizeState} A new resize state object
|
|
152
|
+
*/
|
|
153
|
+
function createResizeState(cell, event) {
|
|
154
|
+
return {
|
|
155
|
+
resizingCell: cell,
|
|
156
|
+
pointerId: event.pointerId,
|
|
157
|
+
startX: event.clientX,
|
|
158
|
+
startWidth: getCellWidth(cell),
|
|
159
|
+
};
|
|
160
|
+
}
|
|
161
|
+
/**
|
|
162
|
+
* Validates that a resize state is active and matches the given pointer event
|
|
163
|
+
* @param {ResizeState | null} state - The current resize state
|
|
164
|
+
* @param {PointerEvent} event - The pointer event to validate against
|
|
165
|
+
* @returns {boolean} True if the state is valid for this event
|
|
166
|
+
*/
|
|
167
|
+
function isValidResizeState(state, event) {
|
|
168
|
+
return state !== null && state.pointerId === event.pointerId;
|
|
169
|
+
}
|
|
170
|
+
/**
|
|
171
|
+
* Updates the width of a cell during a resize operation
|
|
172
|
+
* @param {ResizeState} state - The current resize state
|
|
173
|
+
* @param {PointerEvent} event - The current pointer event
|
|
174
|
+
* @param {number} minWidth - Minimum width constraint
|
|
175
|
+
*/
|
|
176
|
+
function updateCellWidthFromResize(state, event, minWidth = TABLE_CONSTANTS.MIN_W) {
|
|
177
|
+
const delta = calculatePointerDelta(event.clientX, state.startX);
|
|
178
|
+
const newWidth = calculateNewWidth(state.startWidth, delta, minWidth);
|
|
179
|
+
setCellWidth(state.resizingCell, newWidth);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
const nvTableCss = "nv-table table{border-collapse:separate;border-spacing:0;table-layout:fixed;width:max-content;min-width:100%;background:var(--color-level-00-background)}nv-table table thead{background:var(--components-datagrid-header-background)}nv-table table tbody tr:hover td{background:var(--components-datagrid-body-background-hover)}nv-table table tbody tr[data-selected]{background:var(--components-datagrid-body-background-active)}nv-table table td{height:var(--spacing-16);padding:var(--datagrid-cell-body-padding-y) var(--datagrid-cell-body-padding-x) var(--spacing-2) var(--datagrid-cell-body-padding-x);font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-base);background:var(--components-datagrid-body-background-default);border-bottom:1px solid var(--components-datagrid-body-border)}nv-table table th{position:relative;text-align:left;padding:var(--datagrid-cell-header-padding-y) var(--datagrid-cell-header-padding-right) var(--datagrid-cell-header-padding-y) var(--datagrid-cell-header-padding-x);padding-right:calc(var(--datagrid-cell-header-padding-right) + 12px);color:var(--color-content-low-text);font-variant-numeric:lining-nums tabular-nums slashed-zero;font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-high-emphasis);line-height:var(--line-height-base);min-width:40px;border-bottom:1px solid var(--components-datagrid-header-border);background:var(--components-datagrid-header-background)}nv-table table th::after{content:\"\";position:absolute;top:0;right:0;width:12px;height:50%;transform:translateY(50%);cursor:col-resize;background:linear-gradient(90deg, transparent 0%, transparent calc(50% - 1px), var(--components-datagrid-header-border), calc(50% - 1px), var(--components-datagrid-header-border) calc(50% + 1px), transparent calc(50% + 1px), transparent 100%);opacity:0;transition:opacity 0.05s ease-in-out}nv-table table th[data-grow]{width:unset}nv-table table th:hover::after{opacity:1}nv-table table th[data-no-resize]::after{display:none}nv-table [data-sticky-left]{position:sticky;z-index:1;background:var(--color-level-00-background);left:0;top:0}nv-table [data-sticky-right]{position:sticky;z-index:1;background:var(--color-level-00-background);right:0;top:0}nv-table [data-sticky-top] th{position:sticky;z-index:1;background:var(--color-level-00-background);top:0}";
|
|
183
|
+
const NvTableStyle0 = nvTableCss;
|
|
184
|
+
|
|
185
|
+
const NvTable = class {
|
|
186
|
+
constructor(hostRef) {
|
|
187
|
+
index.registerInstance(this, hostRef);
|
|
188
|
+
this.resizeState = null;
|
|
189
|
+
}
|
|
190
|
+
/****************************************************************************/
|
|
191
|
+
//#region PROPERTIES
|
|
192
|
+
//#endregion PROPERTIES
|
|
193
|
+
/****************************************************************************/
|
|
194
|
+
//#region METHODS
|
|
195
|
+
//#endregion METHODS
|
|
196
|
+
/****************************************************************************/
|
|
197
|
+
//#region LISTENERS
|
|
198
|
+
onPointerDown(ev) {
|
|
199
|
+
const th = getClosestTableCell(ev.target);
|
|
200
|
+
if (!th)
|
|
201
|
+
return;
|
|
202
|
+
// Skip resize if the cell has data-no-resize attribute
|
|
203
|
+
if (th.hasAttribute('data-no-resize'))
|
|
204
|
+
return;
|
|
205
|
+
const offsetX = getPointerOffsetInCell(ev, th);
|
|
206
|
+
const handleWidth = getHandleWidthForCurrentPointer();
|
|
207
|
+
const cellWidth = getCellWidth(th);
|
|
208
|
+
// Start only if we're in the resize handle area
|
|
209
|
+
if (!isInResizeHandle(offsetX, cellWidth, handleWidth))
|
|
210
|
+
return;
|
|
211
|
+
this.resizeState = createResizeState(th, ev);
|
|
212
|
+
// Capture so move/up still fire even if the finger leaves the th
|
|
213
|
+
setPointerCapture(th, ev.pointerId);
|
|
214
|
+
// Prevent scrolling/selection during drag
|
|
215
|
+
setUserSelectPrevention(true);
|
|
216
|
+
}
|
|
217
|
+
onPointerMove(ev) {
|
|
218
|
+
if (!isValidResizeState(this.resizeState, ev))
|
|
219
|
+
return;
|
|
220
|
+
updateCellWidthFromResize(this.resizeState, ev, TABLE_CONSTANTS.MIN_W);
|
|
221
|
+
}
|
|
222
|
+
onPointerUp(ev) {
|
|
223
|
+
if (!isValidResizeState(this.resizeState, ev))
|
|
224
|
+
return;
|
|
225
|
+
releasePointerCapture(this.resizeState.resizingCell, this.resizeState.pointerId);
|
|
226
|
+
this.resizeState = null;
|
|
227
|
+
setUserSelectPrevention(false);
|
|
228
|
+
}
|
|
229
|
+
//#endregion LISTENERS
|
|
230
|
+
/****************************************************************************/
|
|
231
|
+
//#region LIFECYCLE
|
|
232
|
+
//#endregion LIFECYCLE
|
|
233
|
+
/****************************************************************************/
|
|
234
|
+
//#region EVENTS
|
|
235
|
+
//#endregion EVENTS
|
|
236
|
+
/****************************************************************************/
|
|
237
|
+
//#region RENDER
|
|
238
|
+
render() {
|
|
239
|
+
return (index.h(index.Host, { key: '16b564cc29e8987d8b3fda3a84c0b19882a733bd' }, index.h("slot", { key: '1305cbc6d29caa60df55bfa01a39a3417a27ec01' })));
|
|
240
|
+
}
|
|
241
|
+
get host() { return index.getElement(this); }
|
|
242
|
+
};
|
|
243
|
+
NvTable.style = NvTableStyle0;
|
|
244
|
+
|
|
245
|
+
exports.nv_table = NvTable;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-B0fvq6nd.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
5
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('react-dom');
|
|
8
8
|
|
|
9
|
-
const nvToggleCss = "nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle label{align-self:stretch;color:var(--components-form-text-label-default);font-family
|
|
9
|
+
const nvToggleCss = "nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle label{align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-toggle label.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-toggle-border-default);background:var(--components-toggle-background-default)}nv-toggle .input-container input[type=checkbox]::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-toggle-shape-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-toggle-border-hover)}nv-toggle .input-container input[type=checkbox]:hover::after{background-color:var(--components-toggle-shape-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-toggle-border-default)}nv-toggle .input-container input[type=checkbox]:focus::after{background-color:var(--components-toggle-shape-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-toggle-background-default-checked);border-color:var(--components-toggle-border-default-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:\"\";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-toggle-shape-default-checked);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-toggle-background-default-checked);border-color:var(--components-toggle-border-default-checked)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-toggle-background-disabled);border-color:var(--components-toggle-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked{background:var(--components-toggle-background-disabled-checked);border-color:var(--components-toggle-border-disabled-checked)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-toggle-shape-disabled-checked)}nv-toggle .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:450;line-height:var(--form-description-line-height)}nv-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}";
|
|
10
10
|
const NvToggleStyle0 = nvToggleCss;
|
|
11
11
|
|
|
12
12
|
const NvToggle = class {
|
package/dist/cjs/{nv-togglebuttongroup.entry-Bu0C6Iq3.js → nv-togglebuttongroup.entry-CM3nWiUU.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-B0fvq6nd.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 {
|