@nova-design-system/nova-react 3.15.0 → 3.16.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/{index-BK1_MpRZ.js → index-7K7BV1CP.js} +7303 -4228
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/{nv-accordion-item.entry-BPaDkIFa.js → nv-accordion-item.entry-C-9tYw-c.js} +2 -2
- package/dist/cjs/{nv-accordion.entry-BaHER2iL.js → nv-accordion.entry-BA3mTIdj.js} +6 -6
- package/dist/cjs/{nv-alert.entry-Hv-y3Bwl.js → nv-alert.entry-Bic-YGW1.js} +2 -2
- package/dist/cjs/nv-avatar.entry-C-yd0YlD.js +68 -0
- package/dist/cjs/{nv-badge_2.entry-CwlWa72m.js → nv-badge_2.entry-B_8yvNXL.js} +1 -1
- package/dist/cjs/{nv-breadcrumb.entry-BvHgDgxV.js → nv-breadcrumb.entry-BCTbG942.js} +2 -2
- package/dist/cjs/{nv-breadcrumbs.entry-BdptRKYA.js → nv-breadcrumbs.entry-C9B5Baf7.js} +1 -1
- package/dist/cjs/nv-button.entry-DgX8Bwmq.js +165 -0
- package/dist/cjs/{nv-buttongroup.entry-Bh0f3bAn.js → nv-buttongroup.entry-CKhZN_Yf.js} +1 -1
- package/dist/cjs/{nv-calendar.entry-BZLITXEC.js → nv-calendar.entry-E6Pk83WA.js} +1 -1
- package/dist/cjs/{nv-col.entry-I3bCSLB5.js → nv-col.entry-CkZpukX9.js} +1 -1
- package/dist/cjs/{nv-datagrid.entry-BzIkgOV6.js → nv-datagrid.entry-RsfP7vbC.js} +177 -10
- package/dist/cjs/{nv-datagridcolumn.entry-BuFhEECG.js → nv-datagridcolumn.entry-D4VrDWo9.js} +1 -1
- package/dist/cjs/{nv-dialog.entry-DIbIIXo2.js → nv-dialog.entry-BhtWpYHl.js} +32 -29
- package/dist/cjs/{nv-dialogfooter_2.entry-Thzk1kVd.js → nv-dialogfooter_2.entry-BXLYmzYl.js} +2 -2
- package/dist/cjs/{nv-fieldcheckbox.entry-mkas423y.js → nv-fieldcheckbox.entry-D96Nm6DZ.js} +2 -2
- package/dist/cjs/{nv-fielddate.entry-Cek70TQM.js → nv-fielddate.entry-ty37R9jF.js} +51 -26
- package/dist/cjs/{nv-fielddaterange.entry-C3BYAnVq.js → nv-fielddaterange.entry-BSIRu_mq.js} +68 -42
- package/dist/cjs/{nv-fielddropdown.entry-Djz5-R1T.js → nv-fielddropdown.entry-CUzvIoZZ.js} +33 -7
- package/dist/cjs/{nv-fielddropdownitem.entry-B2z13jEI.js → nv-fielddropdownitem.entry-D-GTxLNk.js} +1 -1
- package/dist/cjs/{nv-fieldmultiselect.entry-uJ9i2gtz.js → nv-fieldmultiselect.entry-DFY2bf6s.js} +187 -156
- package/dist/cjs/{nv-fieldnumber.entry-zpWCDG_-.js → nv-fieldnumber.entry-CILclJ7Q.js} +2 -2
- package/dist/cjs/{nv-fieldpassword.entry-C835HE_i.js → nv-fieldpassword.entry-CdR-NM8e.js} +2 -2
- package/dist/cjs/{nv-fieldradio.entry-CzLMbo4W.js → nv-fieldradio.entry-lC4scIvU.js} +2 -2
- package/dist/cjs/{nv-fieldselect.entry-BzcYzmqe.js → nv-fieldselect.entry-CYu6870F.js} +2 -2
- package/dist/cjs/{nv-fieldslider.entry-B5vyrQZw.js → nv-fieldslider.entry-DOuJAR6P.js} +2 -2
- package/dist/cjs/{nv-fieldtext.entry-DnPQxVqp.js → nv-fieldtext.entry-BFLUiPa4.js} +2 -2
- package/dist/cjs/{nv-fieldtextarea.entry-n2MJK2Jg.js → nv-fieldtextarea.entry-BeI0k97G.js} +2 -2
- package/dist/cjs/{nv-fieldtime.entry-DChhvqKi.js → nv-fieldtime.entry-C28EAKki.js} +25 -12
- package/dist/cjs/nv-icon.entry-BXgjUpe_.js +80 -0
- package/dist/cjs/{nv-iconbutton_2.entry-u0l16LeW.js → nv-iconbutton_2.entry-CpIkxrp9.js} +2 -2
- package/dist/cjs/{nv-menu.entry-OYVh6iMu.js → nv-menu.entry-as-NOsF-.js} +24 -9
- package/dist/cjs/{nv-menuitem.entry-Dj6N1n9X.js → nv-menuitem.entry-D8KAh6nr.js} +1 -1
- package/dist/cjs/{nv-notification.entry-D1dVSEYZ.js → nv-notification.entry-C-_jV-DL.js} +2 -2
- package/dist/cjs/{nv-notificationcontainer.entry-Bp2NR_fe.js → nv-notificationcontainer.entry-CMn42loT.js} +1 -1
- package/dist/cjs/{nv-popover.entry-Bf2AEn9B.js → nv-popover.entry--BhEBSir.js} +67 -61
- package/dist/cjs/{nv-row.entry-Bi9eoQEh.js → nv-row.entry-BxhcK9aY.js} +1 -1
- package/dist/cjs/{nv-stack.entry-Dd680LIT.js → nv-stack.entry-C3DF9jJZ.js} +1 -1
- package/dist/cjs/nv-table.entry-pfEGt2KH.js +245 -0
- package/dist/cjs/nv-toggle.entry-ChpqtQtn.js +80 -0
- package/dist/cjs/{nv-togglebutton.entry-ZpltTrQe.js → nv-togglebutton.entry-DE7CKmeN.js} +2 -2
- package/dist/cjs/{nv-togglebuttongroup.entry-Bu0C6Iq3.js → nv-togglebuttongroup.entry-BJPjdmHD.js} +2 -2
- package/dist/cjs/{nv-tooltip.entry-DR4aj5qF.js → nv-tooltip.entry-D9-Fga6C.js} +2 -2
- package/dist/components/NvDatatable.js +45 -0
- package/dist/generated/components.js +2 -10
- package/dist/generated/components.server.js +1 -16
- package/dist/index.js +1 -0
- package/dist/types/components/NvDatatable.d.ts +25 -0
- package/dist/types/generated/components.d.ts +2 -12
- package/dist/types/generated/components.server.d.ts +2 -12
- package/dist/types/index.d.ts +1 -0
- package/package.json +4 -3
- 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
- package/dist/cjs/nv-toggle.entry-gBokGnGe.js +0 -80
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-7K7BV1CP.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
5
|
require('react');
|
|
6
6
|
require('react-dom');
|
|
7
7
|
|
|
8
|
-
const nvIconbuttonCss = "nv-iconbutton.root{display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:
|
|
8
|
+
const nvIconbuttonCss = "nv-iconbutton.root{display:inline-flex;justify-content:center;align-items:center;font-style:normal;font-weight:var(--font-weight-medium-emphasis);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;transition:background-color 150ms ease-out;height:fit-content;width:fit-content}nv-iconbutton.size-xs{padding:var(--button-xs-icon-button-padding);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);font-size:var(--button-xs-font-size)}nv-iconbutton.size-sm{padding:var(--button-sm-icon-button-padding);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);font-size:var(--button-sm-font-size)}nv-iconbutton.size-md{padding:var(--button-md-icon-button-padding);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);font-size:var(--button-md-font-size)}nv-iconbutton.size-lg{padding:var(--button-lg-icon-button-padding);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);font-size:var(--button-lg-font-size)}nv-iconbutton.emphasis-high{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-iconbutton.emphasis-high:hover{background:var(--components-button-high-background-hover);color:var(--components-button-high-text-hover)}nv-iconbutton.emphasis-high:focus,nv-iconbutton.emphasis-high:focus-within{outline:none}nv-iconbutton.emphasis-high:focus-visible,nv-iconbutton.emphasis-high:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-high:disabled{background:var(--components-button-high-background);color:var(--components-button-high-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-high nv-icon>svg{color:var(--components-button-high-icon)}nv-iconbutton.emphasis-medium{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-iconbutton.emphasis-medium:hover{background:var(--components-button-medium-background-hover);color:var(--components-button-medium-text-hover)}nv-iconbutton.emphasis-medium:focus,nv-iconbutton.emphasis-medium:focus-within{outline:none}nv-iconbutton.emphasis-medium:focus-visible,nv-iconbutton.emphasis-medium:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-medium:disabled{background:var(--components-button-medium-background);color:var(--components-button-medium-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-medium nv-icon>svg{color:var(--components-button-medium-icon)}nv-iconbutton.emphasis-low{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-iconbutton.emphasis-low:hover{background:var(--components-button-low-background-hover);color:var(--components-button-low-text-hover)}nv-iconbutton.emphasis-low:focus,nv-iconbutton.emphasis-low:focus-within{outline:none}nv-iconbutton.emphasis-low:focus-visible,nv-iconbutton.emphasis-low:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-low:disabled{background:var(--components-button-low-background);color:var(--components-button-low-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-low nv-icon>svg{color:var(--components-button-low-icon)}nv-iconbutton.emphasis-lower{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-iconbutton.emphasis-lower:hover{background:var(--components-button-lower-background-hover);color:var(--components-button-lower-text-hover)}nv-iconbutton.emphasis-lower:focus,nv-iconbutton.emphasis-lower:focus-within{outline:none}nv-iconbutton.emphasis-lower:focus-visible,nv-iconbutton.emphasis-lower:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-iconbutton.emphasis-lower:disabled{background:var(--components-button-lower-background);color:var(--components-button-lower-text);opacity:0.5;cursor:not-allowed;box-shadow:none}nv-iconbutton.emphasis-lower nv-icon>svg{color:var(--components-button-lower-icon)}nv-iconbutton.loading [slot=leading-icon]{display:none}nv-iconbutton.shape-rounded{border-radius:var(--radius-rounded-full)}";
|
|
9
9
|
const NvIconbuttonStyle0 = nvIconbuttonCss;
|
|
10
10
|
|
|
11
11
|
const NvIconbutton = class {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-7K7BV1CP.js');
|
|
4
4
|
require('react');
|
|
5
5
|
require('react-dom');
|
|
6
6
|
|
|
@@ -68,6 +68,24 @@ const NvMenu = class {
|
|
|
68
68
|
async close() {
|
|
69
69
|
this.open = false;
|
|
70
70
|
}
|
|
71
|
+
focusFirstItem() {
|
|
72
|
+
const firstButton = this.popoverElement.querySelector('nv-menuitem');
|
|
73
|
+
if (firstButton) {
|
|
74
|
+
requestAnimationFrame(() => firstButton.focus());
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
//#endregion EVENTS
|
|
78
|
+
/****************************************************************************/
|
|
79
|
+
//#region WATCHERS
|
|
80
|
+
handleOpenChange(newOpen) {
|
|
81
|
+
// React to external changes, e.g., focus first item if opened externally
|
|
82
|
+
if (newOpen) {
|
|
83
|
+
this.focusFirstItem();
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
//#endregion WATCHERS
|
|
87
|
+
/****************************************************************************/
|
|
88
|
+
//#region LISTENERS
|
|
71
89
|
handleMenuItemSelect(event) {
|
|
72
90
|
if (this.disableCloseOnSelect)
|
|
73
91
|
return;
|
|
@@ -180,13 +198,7 @@ const NvMenu = class {
|
|
|
180
198
|
if (triggerHasFocus && triggerHasFocusVisible)
|
|
181
199
|
this.focusFirstItem();
|
|
182
200
|
}
|
|
183
|
-
|
|
184
|
-
const firstButton = this.popoverElement.querySelector('nv-menuitem');
|
|
185
|
-
if (firstButton) {
|
|
186
|
-
requestAnimationFrame(() => firstButton.focus());
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
//#endregion EVENTS
|
|
201
|
+
//#endregion LISTENERS
|
|
190
202
|
/****************************************************************************/
|
|
191
203
|
//#region LIFECYCLE
|
|
192
204
|
componentWillLoad() {
|
|
@@ -195,9 +207,12 @@ const NvMenu = class {
|
|
|
195
207
|
});
|
|
196
208
|
}
|
|
197
209
|
render() {
|
|
198
|
-
return (index.h(index.Host, { key: '
|
|
210
|
+
return (index.h(index.Host, { key: '9c580e2085804dead07f60f3ce4494bed123a58e' }, index.h("slot", { key: '87740cf4b003379eb7a4d011b2b80640e9d7c24f', name: "trigger" }), index.h("nv-popover", { key: '102ebedefdc1b6ac5f10900a82c904b12e4cddb1', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.items ? (index.h("ul", { slot: "content" }, this.renderMenuItems())) : (index.h("slot", { name: "content" })))));
|
|
199
211
|
}
|
|
200
212
|
get el() { return index.getElement(this); }
|
|
213
|
+
static get watchers() { return {
|
|
214
|
+
"open": ["handleOpenChange"]
|
|
215
|
+
}; }
|
|
201
216
|
};
|
|
202
217
|
NvMenu.style = NvMenuStyle0;
|
|
203
218
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-7K7BV1CP.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');
|
|
@@ -94,7 +94,7 @@ const useSlide = (node, { duration } = { duration: 200 }) => {
|
|
|
94
94
|
};
|
|
95
95
|
};
|
|
96
96
|
|
|
97
|
-
const nvNotificationCss = "nv-notification{display:block}nv-notification [data-scope=container]{display:flex;position:relative;max-width:512px;width:100%;padding:var(--notification-padding);align-items:flex-start;gap:var(--notification-gap-x);border-radius:var(--notification-radius);border-style:solid;box-shadow:0 var(--shadow-y-axis-lg-1, 4px) var(--shadow-blur-lg-1, 6px) var(--shadow-spread-lg-1, -2px) var(--shadow-color-opacity-1, rgba(14, 14, 14, 0.06)), 0 var(--shadow-y-axis-lg-2, 10px) var(--shadow-blur-lg-2, 15px) var(--shadow-spread-lg-2, -3px) var(--shadow-color-opacity-2, rgba(14, 14, 14, 0.1))}nv-notification [data-scope=container] [data-scope=icon]{flex-shrink:0}nv-notification [data-scope=container] [data-scope=dismiss]{padding:var(--button-sm-icon-button-padding, 8px);justify-content:center;align-items:center;gap:var(--button-sm-gap, 6px);display:flex;position:absolute;right:8px;top:8px;border-radius:var(--button-sm-border-radius, 4px);background:var(--components-button-lower-background, rgba(255, 255, 255, 0));color:var(--components-button-lower-icon)}nv-notification [data-scope=container] [data-scope=content]{display:flex;padding-right:var(--notification-padding-right);flex-direction:column;align-items:flex-start;gap:var(--notification-gap-y);flex:1 0 0}nv-notification [data-scope=container] [data-scope=content] [data-scope=heading]{display:flex;align-items:flex-start;gap:var(--notification-gap-x);align-self:stretch;color:var(--components-notification-content-title);font-size:var(--notification-title-font-size);font-style:normal;font-weight:
|
|
97
|
+
const nvNotificationCss = "nv-notification{display:block}nv-notification [data-scope=container]{display:flex;position:relative;max-width:512px;width:100%;padding:var(--notification-padding);align-items:flex-start;gap:var(--notification-gap-x);border-radius:var(--notification-radius);border-style:solid;box-shadow:0 var(--shadow-y-axis-lg-1, 4px) var(--shadow-blur-lg-1, 6px) var(--shadow-spread-lg-1, -2px) var(--shadow-color-opacity-1, rgba(14, 14, 14, 0.06)), 0 var(--shadow-y-axis-lg-2, 10px) var(--shadow-blur-lg-2, 15px) var(--shadow-spread-lg-2, -3px) var(--shadow-color-opacity-2, rgba(14, 14, 14, 0.1))}nv-notification [data-scope=container] [data-scope=icon]{flex-shrink:0}nv-notification [data-scope=container] [data-scope=dismiss]{padding:var(--button-sm-icon-button-padding, 8px);justify-content:center;align-items:center;gap:var(--button-sm-gap, 6px);display:flex;position:absolute;right:8px;top:8px;border-radius:var(--button-sm-border-radius, 4px);background:var(--components-button-lower-background, rgba(255, 255, 255, 0));color:var(--components-button-lower-icon)}nv-notification [data-scope=container] [data-scope=content]{display:flex;padding-right:var(--notification-padding-right);flex-direction:column;align-items:flex-start;gap:var(--notification-gap-y);flex:1 0 0}nv-notification [data-scope=container] [data-scope=content] [data-scope=heading]{display:flex;align-items:flex-start;gap:var(--notification-gap-x);align-self:stretch;color:var(--components-notification-content-title);font-size:var(--notification-title-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:20px;}nv-notification [data-scope=container] [data-scope=content] [data-scope=message]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--notification-gap-y);align-self:stretch;color:var(--components-notification-content-description);font-variant-numeric:lining-nums tabular-nums slashed-zero;font-size:var(--font-size-sm, 14px);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-sm, 20px)}nv-notification [data-scope=container] [data-scope=content] [data-scope=actions]{display:flex;padding:var(--spacing-2, 8px) 0;padding-bottom:0px;align-items:flex-start;gap:var(--notification-gap-x);align-self:stretch;margin-left:calc(-1 * var(--button-sm-padding-x))}nv-notification[feedback=information] [data-scope=container]{background-color:var(--components-notification-information-background);border-color:var(--components-notification-information-border)}nv-notification[feedback=information] [data-scope=container] [data-scope=icon]{color:var(--components-notification-information-icon)}nv-notification[feedback=information]>[data-scope=close]:focus,nv-notification[feedback=information]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=information]>[data-scope=close]:focus-visible,nv-notification[feedback=information]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=warning] [data-scope=container]{background-color:var(--components-notification-warning-background);border-color:var(--components-notification-warning-border)}nv-notification[feedback=warning] [data-scope=container] [data-scope=icon]{color:var(--components-notification-warning-icon)}nv-notification[feedback=warning]>[data-scope=close]:focus,nv-notification[feedback=warning]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=warning]>[data-scope=close]:focus-visible,nv-notification[feedback=warning]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=error] [data-scope=container]{background-color:var(--components-notification-error-background);border-color:var(--components-notification-error-border)}nv-notification[feedback=error] [data-scope=container] [data-scope=icon]{color:var(--components-notification-error-icon)}nv-notification[feedback=error]>[data-scope=close]:focus,nv-notification[feedback=error]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=error]>[data-scope=close]:focus-visible,nv-notification[feedback=error]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=success] [data-scope=container]{background-color:var(--components-notification-success-background);border-color:var(--components-notification-success-border)}nv-notification[feedback=success] [data-scope=container] [data-scope=icon]{color:var(--components-notification-success-icon)}nv-notification[feedback=success]>[data-scope=close]:focus,nv-notification[feedback=success]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=success]>[data-scope=close]:focus-visible,nv-notification[feedback=success]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=neutral] [data-scope=container]{background-color:var(--components-notification-neutral-background);border-color:var(--components-notification-neutral-border)}nv-notification[feedback=neutral] [data-scope=container] [data-scope=icon]{color:var(--components-notification-neutral-icon)}nv-notification[feedback=neutral]>[data-scope=close]:focus,nv-notification[feedback=neutral]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=neutral]>[data-scope=close]:focus-visible,nv-notification[feedback=neutral]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[emphasis=high] [data-scope=container]{border-width:1px;border-left-width:var(--notification-border-width-high-emphasis);padding-left:calc(var(--notification-padding) - var(--notification-border-width-high-emphasis) + 1px)}nv-notification[emphasis=medium] [data-scope=container]{border-width:var(--notification-border-width-low-emphasis);border-color:var(--color-content-low-border, #E3E3E3)}";
|
|
98
98
|
const NvNotificationStyle0 = nvNotificationCss;
|
|
99
99
|
|
|
100
100
|
const NvNotification = class {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-7K7BV1CP.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');
|
|
@@ -1659,6 +1659,50 @@ const NvPopover = class {
|
|
|
1659
1659
|
index.registerInstance(this, hostRef);
|
|
1660
1660
|
this.openChanged = index.createEvent(this, "openChanged");
|
|
1661
1661
|
this.eventsAttached = false;
|
|
1662
|
+
this.isAnimating = false;
|
|
1663
|
+
this.clickEvents = [
|
|
1664
|
+
['click', () => (this.open = !this.open)],
|
|
1665
|
+
];
|
|
1666
|
+
this.hoverEvents = [
|
|
1667
|
+
[
|
|
1668
|
+
'focus',
|
|
1669
|
+
() => {
|
|
1670
|
+
clearTimeout(this.hideTimeout);
|
|
1671
|
+
this.showTimeout = setTimeout(() => (this.open = true), this.enterDelay);
|
|
1672
|
+
},
|
|
1673
|
+
],
|
|
1674
|
+
[
|
|
1675
|
+
'blur',
|
|
1676
|
+
() => {
|
|
1677
|
+
clearTimeout(this.showTimeout);
|
|
1678
|
+
this.hideTimeout = setTimeout(() => (this.open = false), 50);
|
|
1679
|
+
},
|
|
1680
|
+
],
|
|
1681
|
+
[
|
|
1682
|
+
'mouseenter',
|
|
1683
|
+
() => {
|
|
1684
|
+
clearTimeout(this.hideTimeout);
|
|
1685
|
+
this.showTimeout = setTimeout(() => (this.open = true), this.enterDelay);
|
|
1686
|
+
},
|
|
1687
|
+
],
|
|
1688
|
+
[
|
|
1689
|
+
'mouseleave',
|
|
1690
|
+
() => {
|
|
1691
|
+
clearTimeout(this.showTimeout);
|
|
1692
|
+
this.hideTimeout = setTimeout(() => (this.open = false), 100);
|
|
1693
|
+
},
|
|
1694
|
+
],
|
|
1695
|
+
];
|
|
1696
|
+
this.closeEvents = [
|
|
1697
|
+
[
|
|
1698
|
+
'keydown',
|
|
1699
|
+
(e) => {
|
|
1700
|
+
if (e.key === 'Escape') {
|
|
1701
|
+
this.open = false;
|
|
1702
|
+
}
|
|
1703
|
+
},
|
|
1704
|
+
],
|
|
1705
|
+
];
|
|
1662
1706
|
/**
|
|
1663
1707
|
* Use this prop to toggle the visibility of the popover. Set to true to show
|
|
1664
1708
|
* the popover and false to hide it.
|
|
@@ -1728,57 +1772,13 @@ const NvPopover = class {
|
|
|
1728
1772
|
return;
|
|
1729
1773
|
this.open = false;
|
|
1730
1774
|
};
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1775
|
+
//#endregion METHODS
|
|
1776
|
+
/****************************************************************************/
|
|
1777
|
+
//#region HELPERS
|
|
1734
1778
|
this.outsideClickEvents = [
|
|
1735
1779
|
['click', this.handleClickOutside],
|
|
1736
1780
|
['touchstart', this.handleClickOutside],
|
|
1737
1781
|
];
|
|
1738
|
-
this.hoverEvents = [
|
|
1739
|
-
[
|
|
1740
|
-
'focus',
|
|
1741
|
-
() => {
|
|
1742
|
-
clearTimeout(this.hideTimeout);
|
|
1743
|
-
this.showTimeout = setTimeout(() => (this.open = true), this.enterDelay);
|
|
1744
|
-
},
|
|
1745
|
-
],
|
|
1746
|
-
[
|
|
1747
|
-
'blur',
|
|
1748
|
-
() => {
|
|
1749
|
-
clearTimeout(this.showTimeout);
|
|
1750
|
-
this.hideTimeout = setTimeout(() => (this.open = false), 50);
|
|
1751
|
-
},
|
|
1752
|
-
],
|
|
1753
|
-
[
|
|
1754
|
-
'mouseenter',
|
|
1755
|
-
() => {
|
|
1756
|
-
clearTimeout(this.hideTimeout);
|
|
1757
|
-
this.showTimeout = setTimeout(() => (this.open = true), this.enterDelay);
|
|
1758
|
-
},
|
|
1759
|
-
],
|
|
1760
|
-
[
|
|
1761
|
-
'mouseleave',
|
|
1762
|
-
() => {
|
|
1763
|
-
clearTimeout(this.showTimeout);
|
|
1764
|
-
this.hideTimeout = setTimeout(() => (this.open = false), 100);
|
|
1765
|
-
},
|
|
1766
|
-
],
|
|
1767
|
-
];
|
|
1768
|
-
this.closeEvents = [
|
|
1769
|
-
[
|
|
1770
|
-
'keydown',
|
|
1771
|
-
(e) => {
|
|
1772
|
-
if (e.key === 'Escape') {
|
|
1773
|
-
this.open = false;
|
|
1774
|
-
}
|
|
1775
|
-
},
|
|
1776
|
-
],
|
|
1777
|
-
];
|
|
1778
|
-
//#endregion EVENTS
|
|
1779
|
-
/****************************************************************************/
|
|
1780
|
-
//#region WATCHERS
|
|
1781
|
-
this.isAnimating = false;
|
|
1782
1782
|
}
|
|
1783
1783
|
//#endregion PROPERTIES
|
|
1784
1784
|
/****************************************************************************/
|
|
@@ -1872,18 +1872,9 @@ const NvPopover = class {
|
|
|
1872
1872
|
}
|
|
1873
1873
|
});
|
|
1874
1874
|
}
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
return;
|
|
1879
|
-
if (this.nested)
|
|
1880
|
-
return;
|
|
1881
|
-
if ((_a = event.target) === null || _a === void 0 ? void 0 : _a.hasAttribute('nested'))
|
|
1882
|
-
return;
|
|
1883
|
-
// This popover should close when another one is opened.
|
|
1884
|
-
if (event.target !== this.el && event.detail === true)
|
|
1885
|
-
this.open = false;
|
|
1886
|
-
}
|
|
1875
|
+
//#endregion EVENTS
|
|
1876
|
+
/****************************************************************************/
|
|
1877
|
+
//#region WATCHERS
|
|
1887
1878
|
async handleOpenChange(open) {
|
|
1888
1879
|
// Prevent multiple animations from running at the same time.
|
|
1889
1880
|
while (this.isAnimating) {
|
|
@@ -1925,6 +1916,21 @@ const NvPopover = class {
|
|
|
1925
1916
|
}
|
|
1926
1917
|
//#endregion WATCHERS
|
|
1927
1918
|
/****************************************************************************/
|
|
1919
|
+
//#region LISTENERS
|
|
1920
|
+
handleOpenChanged(event) {
|
|
1921
|
+
var _a;
|
|
1922
|
+
if (this.triggerMode === 'controlled')
|
|
1923
|
+
return;
|
|
1924
|
+
if (this.nested)
|
|
1925
|
+
return;
|
|
1926
|
+
if ((_a = event.target) === null || _a === void 0 ? void 0 : _a.hasAttribute('nested'))
|
|
1927
|
+
return;
|
|
1928
|
+
// This popover should close when another one is opened.
|
|
1929
|
+
if (event.target !== this.el && event.detail === true)
|
|
1930
|
+
this.open = false;
|
|
1931
|
+
}
|
|
1932
|
+
//#endregion LISTENERS
|
|
1933
|
+
/****************************************************************************/
|
|
1928
1934
|
//#region LIFECYCLE
|
|
1929
1935
|
componentWillLoad() {
|
|
1930
1936
|
if (!this.triggerElement)
|
|
@@ -1968,7 +1974,7 @@ const NvPopover = class {
|
|
|
1968
1974
|
/****************************************************************************/
|
|
1969
1975
|
//#region RENDER
|
|
1970
1976
|
render() {
|
|
1971
|
-
return (index.h(index.Host, { key: '
|
|
1977
|
+
return (index.h(index.Host, { key: '0644e319053ca1f216aac89f5737805008b097be' }, index.h("slot", { key: '7f03080c300378be09e6fce9a44fa2a4a8730f40', name: "trigger" }), index.h("div", { key: '801b7f1dd8c87db5eb06bcabddda8936c89a6ab2', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: 'd8e40589a4c53d4ac0c313f3d97cf61ef928f56d', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: 'af0743b1a94c44dd161712e080dbf54a69c9d4a4', name: "content" }))));
|
|
1972
1978
|
}
|
|
1973
1979
|
get el() { return index.getElement(this); }
|
|
1974
1980
|
static get watchers() { return {
|
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-7K7BV1CP.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: 'b63510e2da93a1b98eb3813ba7ac9bed97b81c1f' }, index.h("slot", { key: '14fb76c397db4da5dfba94bce599d1e4d8992a6b' })));
|
|
240
|
+
}
|
|
241
|
+
get host() { return index.getElement(this); }
|
|
242
|
+
};
|
|
243
|
+
NvTable.style = NvTableStyle0;
|
|
244
|
+
|
|
245
|
+
exports.nv_table = NvTable;
|