@nova-design-system/nova-react 3.20.0 → 3.21.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 +14 -2
- package/dist/cjs/{index-BObVnP12.js → index-yxDlFA78.js} +636 -347
- package/dist/cjs/index.js +2 -1
- package/dist/cjs/{nv-accordion-item.entry-BBAGkmLI.js → nv-accordion-item.entry-5DF2ffDE.js} +1 -1
- package/dist/cjs/{nv-accordion.entry-CvvtdLIz.js → nv-accordion.entry-CPB1HBT1.js} +1 -1
- package/dist/cjs/{nv-alert.entry-w5XeFsrC.js → nv-alert.entry-jPxt1obA.js} +1 -1
- package/dist/cjs/{nv-avatar.entry-BxUZg-8h.js → nv-avatar.entry-zmnREEN-.js} +1 -1
- package/dist/cjs/{nv-badge_2.entry-DdSIFlJf.js → nv-badge_2.entry-DtkQx_M9.js} +1 -1
- package/dist/cjs/{nv-breadcrumb.entry-CmbqGw3C.js → nv-breadcrumb.entry-DHAe5FxQ.js} +1 -1
- package/dist/cjs/{nv-breadcrumbs.entry-DFHxtPKv.js → nv-breadcrumbs.entry-C7XepUqF.js} +1 -1
- package/dist/cjs/nv-button.entry-Dg1knj3Y.js +164 -0
- package/dist/cjs/{nv-buttongroup.entry-wn9zFd_M.js → nv-buttongroup.entry-Dlim9p8N.js} +1 -1
- package/dist/cjs/{nv-calendar.entry-Dldsa6dz.js → nv-calendar.entry-rL5_GdQg.js} +1 -1
- package/dist/cjs/{nv-col.entry-DnG79KM1.js → nv-col.entry-CnbFx7h1.js} +1 -1
- package/dist/cjs/{nv-datagrid.entry-C2ML-e47.js → nv-datagrid.entry-CjUfR4ha.js} +3 -3
- package/dist/cjs/{nv-datagridcolumn.entry-DcMPUtQS.js → nv-datagridcolumn.entry-BiuYIp4q.js} +1 -1
- package/dist/cjs/{nv-dialog.entry-C0Vx7dQc.js → nv-dialog.entry-fDywe5i2.js} +2 -2
- package/dist/cjs/{nv-dialogfooter_2.entry-BGq8Jiib.js → nv-dialogfooter_2.entry-CckfZ_QW.js} +1 -1
- package/dist/cjs/{nv-fieldcheckbox.entry-CAPwYnSU.js → nv-fieldcheckbox.entry-WmfLxGad.js} +1 -1
- package/dist/cjs/{nv-fielddate.entry-Byt5cmQi.js → nv-fielddate.entry-GLGb7tzu.js} +1 -1
- package/dist/cjs/{nv-fielddaterange.entry-CCFeFP2q.js → nv-fielddaterange.entry-C8gXNY2P.js} +1 -1
- package/dist/cjs/{nv-fielddropdown.entry-BFp_2vBC.js → nv-fielddropdown.entry-BX1V8Uef.js} +1 -1
- package/dist/cjs/{nv-fielddropdownitem.entry-D_4KdBY1.js → nv-fielddropdownitem.entry-BMVFbA1v.js} +1 -1
- package/dist/cjs/{nv-fieldmultiselect.entry-BaUD7Dcr.js → nv-fieldmultiselect.entry-BuV-qWbu.js} +1 -1
- package/dist/cjs/{nv-fieldnumber.entry-DOmhBrDv.js → nv-fieldnumber.entry-qM1ct5SM.js} +1 -1
- package/dist/cjs/{nv-fieldpassword.entry-hogiPC5z.js → nv-fieldpassword.entry-BnGWErFQ.js} +1 -1
- package/dist/cjs/{nv-fieldradio.entry-CKbyWpIK.js → nv-fieldradio.entry-EliQYldW.js} +1 -1
- package/dist/cjs/{nv-fieldselect.entry-tpURNUEP.js → nv-fieldselect.entry-BfPVPmaZ.js} +1 -1
- package/dist/cjs/{nv-fieldslider.entry-v0d92XEY.js → nv-fieldslider.entry-DBPpL94x.js} +1 -1
- package/dist/cjs/{nv-fieldtext.entry-DNYrOAhj.js → nv-fieldtext.entry-BnabKYgq.js} +1 -1
- package/dist/cjs/{nv-fieldtextarea.entry-cRsjPwwR.js → nv-fieldtextarea.entry-HaELAnJb.js} +1 -1
- package/dist/cjs/{nv-fieldtime.entry-BpGBUfKr.js → nv-fieldtime.entry-CWQM7fza.js} +1 -1
- package/dist/cjs/nv-icon.entry-B5cWNyvf.js +80 -0
- package/dist/cjs/{nv-iconbutton_2.entry-DOv1RrkS.js → nv-iconbutton_2.entry-CP1o9IVZ.js} +7 -2
- package/dist/cjs/{nv-menu.entry-C2L8F-nG.js → nv-menu.entry-wMwI_sZ3.js} +1 -1
- package/dist/cjs/{nv-menuitem.entry-DuDZTlJ1.js → nv-menuitem.entry-C53TrB0_.js} +1 -1
- package/dist/cjs/{nv-notification.entry-DxAj-mc7.js → nv-notification.entry-BPyEusqt.js} +1 -1
- package/dist/cjs/{nv-notificationcontainer.entry-CUnTicXF.js → nv-notificationcontainer.entry-MRIJURIS.js} +1 -1
- package/dist/cjs/{nv-popover.entry-DVwa4DvW.js → nv-popover.entry-fj50OLMu.js} +1 -1
- package/dist/cjs/{nv-row.entry-iLk2UglX.js → nv-row.entry-T0OlcSij.js} +1 -1
- package/dist/cjs/{nv-split.entry-BrMHK6TS.js → nv-split.entry-DlI7I6Tb.js} +1 -1
- package/dist/cjs/{nv-stack.entry-C8jLJ5Ki.js → nv-stack.entry-991A3rOk.js} +1 -1
- package/dist/cjs/{nv-table.entry-D6o4g9Vo.js → nv-table.entry-ClSU3-cR.js} +1 -1
- package/dist/cjs/nv-tableheader.entry-DzvbPDBN.js +75 -0
- package/dist/cjs/{nv-toggle.entry-9iwmu7qi.js → nv-toggle.entry-Dq5hAoVB.js} +3 -3
- package/dist/cjs/nv-togglebutton.entry-DI8HQ5Ou.js +56 -0
- package/dist/cjs/{nv-togglebuttongroup.entry-DWCytOhV.js → nv-togglebuttongroup.entry-DzGOSBF7.js} +2 -2
- package/dist/cjs/{nv-tooltip.entry-BMxnZVYA.js → nv-tooltip.entry-CF0-gdZL.js} +2 -2
- package/dist/components/{NvDatatable.js → NvDatatable/NvDatatable.js} +88 -46
- package/dist/components/NvDatatable/index.js +3 -0
- package/dist/components/NvDatatable/types.js +1 -0
- package/dist/components/NvDatatable/utils.js +5 -0
- package/dist/generated/components.js +8 -0
- package/dist/generated/components.server.js +13 -2
- package/dist/providers/NotificationProvider.js +27 -0
- package/dist/types/components/NvDatatable/NvDatatable.d.ts +7 -0
- package/dist/types/components/NvDatatable/index.d.ts +3 -0
- package/dist/types/components/{NvDatatable.d.ts → NvDatatable/types.d.ts} +18 -8
- package/dist/types/components/NvDatatable/utils.d.ts +2 -0
- package/dist/types/generated/components.d.ts +5 -0
- package/dist/types/generated/components.server.d.ts +5 -0
- package/dist/types/providers/NotificationProvider.d.ts +1 -0
- package/package.json +1 -1
- package/dist/cjs/nv-button.entry-Dyks6_mF.js +0 -159
- package/dist/cjs/nv-icon.entry-BfmyacWA.js +0 -80
- package/dist/cjs/nv-togglebutton.entry-N7_CSvzS.js +0 -56
package/dist/cjs/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-yxDlFA78.js');
|
|
4
4
|
require('react');
|
|
5
5
|
require('react-dom');
|
|
6
6
|
|
|
@@ -97,6 +97,7 @@ exports.NvRow = index.NvRow;
|
|
|
97
97
|
exports.NvSplit = index.NvSplit;
|
|
98
98
|
exports.NvStack = index.NvStack;
|
|
99
99
|
exports.NvTable = index.NvTable;
|
|
100
|
+
exports.NvTableheader = index.NvTableheader;
|
|
100
101
|
exports.NvToggle = index.NvToggle;
|
|
101
102
|
exports.NvTogglebutton = index.NvTogglebutton;
|
|
102
103
|
exports.NvTogglebuttongroup = index.NvTogglebuttongroup;
|
package/dist/cjs/{nv-accordion-item.entry-BBAGkmLI.js → nv-accordion-item.entry-5DF2ffDE.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-yxDlFA78.js');
|
|
4
4
|
var collapse_animation6e0b08df = require('./collapse.animation-6e0b08df-AHWzNGm_.js');
|
|
5
5
|
require('./style-value-types.es-f5d10b79-D0QCM8OB.js');
|
|
6
6
|
require('react');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-yxDlFA78.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
5
|
var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
|
|
6
6
|
var collapse_animation6e0b08df = require('./collapse.animation-6e0b08df-AHWzNGm_.js');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-yxDlFA78.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
5
|
var collapse_animation6e0b08df = require('./collapse.animation-6e0b08df-AHWzNGm_.js');
|
|
6
6
|
var fade_animation9b939939 = require('./fade.animation-9b939939-DV--bM4S.js');
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-yxDlFA78.js');
|
|
4
|
+
var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
|
|
5
|
+
require('react');
|
|
6
|
+
require('react-dom');
|
|
7
|
+
|
|
8
|
+
const nvButtonCss = "nv-button{text-decoration:none;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;user-select:none;cursor:pointer;height:fit-content;width:fit-content}nv-button[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);height:var(--button-xs-height);font-size:var(--button-xs-font-size)}nv-button[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-button[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);height:var(--button-sm-height);font-size:var(--button-sm-font-size)}nv-button[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-button[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);height:var(--button-md-height);font-size:var(--button-md-font-size)}nv-button[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-button[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);height:var(--button-lg-height);font-size:var(--button-lg-font-size)}nv-button[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-button[emphasis=high]{background:var(--components-button-high-background);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text)}nv-button[emphasis=high]:hover{background:var(--components-button-high-background-hover);border:1px solid var(--components-button-high-border);color:var(--components-button-high-text-hover)}nv-button[emphasis=high]:active{background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high]:focus,nv-button[emphasis=high]:focus-within{outline:none}nv-button[emphasis=high]:focus-visible,nv-button[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-button[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=high][active]:not([active=false]){background:var(--components-button-high-background-active);border:1px solid var(--components-button-high-border-active);color:var(--components-button-high-text-active)}nv-button[emphasis=high][danger]:not([danger=false]){background:var(--components-button-destructive-high-background);border:1px solid transparent;color:var(--components-button-destructive-high-text)}nv-button[emphasis=high][danger]:not([danger=false]):hover{background:var(--components-button-destructive-high-background-hover);border:1px solid transparent;color:var(--components-button-destructive-high-text-hover)}nv-button[emphasis=high][danger]:not([danger=false]):focus,nv-button[emphasis=high][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=high][danger]:not([danger=false]):focus-visible,nv-button[emphasis=high][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=medium]{background:var(--components-button-medium-background);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text)}nv-button[emphasis=medium]:hover{background:var(--components-button-medium-background-hover);border:1px solid var(--components-button-medium-border);color:var(--components-button-medium-text-hover)}nv-button[emphasis=medium]:active{background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium]:focus,nv-button[emphasis=medium]:focus-within{outline:none}nv-button[emphasis=medium]:focus-visible,nv-button[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-button[emphasis=medium]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=medium][active]:not([active=false]){background:var(--components-button-medium-background-active);border:1px solid var(--components-button-medium-border-active);color:var(--components-button-medium-text-active)}nv-button[emphasis=medium][danger]:not([danger=false]){background:var(--components-button-destructive-medium-background);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text)}nv-button[emphasis=medium][danger]:not([danger=false]):hover{background:var(--components-button-destructive-medium-background-hover);border:1px solid var(--components-button-destructive-medium-border);color:var(--components-button-destructive-medium-text-hover)}nv-button[emphasis=medium][danger]:not([danger=false]):focus,nv-button[emphasis=medium][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=medium][danger]:not([danger=false]):focus-visible,nv-button[emphasis=medium][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=low]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-button[emphasis=low]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-button[emphasis=low]:active{background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-button[emphasis=low]:focus,nv-button[emphasis=low]:focus-within{outline:none}nv-button[emphasis=low]:focus-visible,nv-button[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-button[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=low][active]:not([active=false]){background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-button[emphasis=low][danger]:not([danger=false]){background:var(--components-button-destructive-low-background);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text)}nv-button[emphasis=low][danger]:not([danger=false]):hover{background:var(--components-button-destructive-low-background-hover);border:1px solid var(--components-button-destructive-low-border);color:var(--components-button-destructive-low-text-hover)}nv-button[emphasis=low][danger]:not([danger=false]):focus,nv-button[emphasis=low][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=low][danger]:not([danger=false]):focus-visible,nv-button[emphasis=low][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[emphasis=lower]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-button[emphasis=lower]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-button[emphasis=lower]:active{background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-button[emphasis=lower]:focus,nv-button[emphasis=lower]:focus-within{outline:none}nv-button[emphasis=lower]:focus-visible,nv-button[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-button[emphasis=lower]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-button[emphasis=lower][active]:not([active=false]){background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-button[emphasis=lower][danger]:not([danger=false]){background:var(--components-button-destructive-lower-background);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text)}nv-button[emphasis=lower][danger]:not([danger=false]):hover{background:var(--components-button-destructive-lower-background-hover);border:1px solid var(--components-button-destructive-lower-border);color:var(--components-button-destructive-lower-text-hover)}nv-button[emphasis=lower][danger]:not([danger=false]):focus,nv-button[emphasis=lower][danger]:not([danger=false]):focus-within{outline:none}nv-button[emphasis=lower][danger]:not([danger=false]):focus-visible,nv-button[emphasis=lower][danger]:not([danger=false]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-destructive);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-button[fluid]:not([fluid=false]){width:100%}nv-button[loading]:not([loading=false]) [slot=leading-icon]{display:none}";
|
|
9
|
+
const NvButtonStyle0 = nvButtonCss;
|
|
10
|
+
|
|
11
|
+
const NvButton = class {
|
|
12
|
+
constructor(hostRef) {
|
|
13
|
+
index.registerInstance(this, hostRef);
|
|
14
|
+
if (hostRef.$hostElement$["s-ei"]) {
|
|
15
|
+
this.internals = hostRef.$hostElement$["s-ei"];
|
|
16
|
+
}
|
|
17
|
+
else {
|
|
18
|
+
this.internals = hostRef.$hostElement$.attachInternals();
|
|
19
|
+
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
20
|
+
}
|
|
21
|
+
/****************************************************************************/
|
|
22
|
+
//#region PROPERTIES
|
|
23
|
+
/**
|
|
24
|
+
* Determines how large or small the button appears, allowing for
|
|
25
|
+
* customization of the button's dimensions to fit different design
|
|
26
|
+
* specifications and user needs.
|
|
27
|
+
*/
|
|
28
|
+
this.size = 'md';
|
|
29
|
+
/**
|
|
30
|
+
* Adjusts the button's emphasis to make it more or less visually prominent
|
|
31
|
+
* to users. Use this to draw attention to important actions or reduce focus
|
|
32
|
+
* on less critical ones
|
|
33
|
+
*/
|
|
34
|
+
this.emphasis = 'high';
|
|
35
|
+
/**
|
|
36
|
+
* Use this prop to highlight the button when it represents the current page
|
|
37
|
+
* or active selection. This helps users understand their navigation context.
|
|
38
|
+
*/
|
|
39
|
+
this.active = false;
|
|
40
|
+
/**
|
|
41
|
+
* Applies styling that visually indicates the button represents a dangerous
|
|
42
|
+
* action.
|
|
43
|
+
*/
|
|
44
|
+
this.danger = false;
|
|
45
|
+
/**
|
|
46
|
+
* Set this to true to show a spinner on the button, letting users know that
|
|
47
|
+
* their action is being processed. It helps improve user experience by
|
|
48
|
+
* indicating ongoing activities.
|
|
49
|
+
*/
|
|
50
|
+
this.loading = false;
|
|
51
|
+
/**
|
|
52
|
+
* Disables the button, preventing user interaction.
|
|
53
|
+
*/
|
|
54
|
+
this.disabled = false;
|
|
55
|
+
/**
|
|
56
|
+
* Allows the button to stretch and fill the entire width of its container.
|
|
57
|
+
*/
|
|
58
|
+
this.fluid = false;
|
|
59
|
+
/**
|
|
60
|
+
* Sets the button type to control its function in forms. Use 'submit' to send
|
|
61
|
+
* form data, 'reset' to clear the form, or 'button' for a standard button
|
|
62
|
+
* that doesn't interact with form submission by default.
|
|
63
|
+
*/
|
|
64
|
+
this.type = 'button';
|
|
65
|
+
/**
|
|
66
|
+
* Use this to make the button skip-able when users navigate with the keyboard.
|
|
67
|
+
* The button remains clickable but won’t be reached via the Tab key.
|
|
68
|
+
*/
|
|
69
|
+
this.disableTabindex = false;
|
|
70
|
+
//#endregion PROPERTIES
|
|
71
|
+
/****************************************************************************/
|
|
72
|
+
//#region METHODS
|
|
73
|
+
/**
|
|
74
|
+
* Handles button click events, managing form actions and disabled states.
|
|
75
|
+
* Prevents default behavior when button is disabled or loading, and
|
|
76
|
+
* processes form submissions/resets when appropriate.
|
|
77
|
+
* @param {Event} event - The click event.
|
|
78
|
+
*/
|
|
79
|
+
this.handleButtonClick = (event) => {
|
|
80
|
+
var _a;
|
|
81
|
+
if (this.loading || this.disabled) {
|
|
82
|
+
event.preventDefault();
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
if (this.type !== constants69bafca2.ButtonType.Button &&
|
|
86
|
+
(this.form || ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.form))) {
|
|
87
|
+
this.processFormAction();
|
|
88
|
+
}
|
|
89
|
+
else if (this.form && this.type === constants69bafca2.ButtonType.Button) {
|
|
90
|
+
console.warn('Button has a form id but is not of type submit or reset so no form action will be processed.', `Button:`, this.el);
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
/**
|
|
94
|
+
* Processes form-related actions by finding the associated form element
|
|
95
|
+
* and triggering the appropriate action (submit/reset) based on button type.
|
|
96
|
+
* Falls back to ElementInternals form if no explicit form ID is provided.
|
|
97
|
+
*/
|
|
98
|
+
this.processFormAction = () => {
|
|
99
|
+
var _a, _b;
|
|
100
|
+
const formElement = this.form
|
|
101
|
+
? document.getElementById(this.form)
|
|
102
|
+
: (_a = this.internals) === null || _a === void 0 ? void 0 : _a.form;
|
|
103
|
+
if (!formElement) {
|
|
104
|
+
console.warn('No form element found.', `Form ID: ${this.form || 'Not provided'}`, `Internals form:`, (_b = this.internals) === null || _b === void 0 ? void 0 : _b.form);
|
|
105
|
+
return;
|
|
106
|
+
}
|
|
107
|
+
switch (this.type) {
|
|
108
|
+
case constants69bafca2.ButtonType.Submit:
|
|
109
|
+
formElement.requestSubmit();
|
|
110
|
+
break;
|
|
111
|
+
case constants69bafca2.ButtonType.Reset:
|
|
112
|
+
formElement.reset();
|
|
113
|
+
break;
|
|
114
|
+
}
|
|
115
|
+
};
|
|
116
|
+
}
|
|
117
|
+
//#endregion METHODS
|
|
118
|
+
/****************************************************************************/
|
|
119
|
+
//#region EVENTS
|
|
120
|
+
handleKeyDown(event) {
|
|
121
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
122
|
+
event.preventDefault();
|
|
123
|
+
this.el.click();
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
//#endregion EVENTS
|
|
127
|
+
/****************************************************************************/
|
|
128
|
+
//#region WATCHERS
|
|
129
|
+
handleLoadingChange(loading) {
|
|
130
|
+
this.loading = loading;
|
|
131
|
+
this.disabled = loading;
|
|
132
|
+
}
|
|
133
|
+
handleDisabledChange(disabled) {
|
|
134
|
+
if (this.loading) {
|
|
135
|
+
this.disabled = this.loading;
|
|
136
|
+
}
|
|
137
|
+
else {
|
|
138
|
+
this.disabled = disabled;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
//#endregion WATCHERS
|
|
142
|
+
/****************************************************************************/
|
|
143
|
+
//#region LIFECYCLE
|
|
144
|
+
componentWillLoad() {
|
|
145
|
+
if (this.loading) {
|
|
146
|
+
this.disabled = this.loading;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
//#endregion LIFECYCLE
|
|
150
|
+
/****************************************************************************/
|
|
151
|
+
//#region RENDER
|
|
152
|
+
render() {
|
|
153
|
+
return (index.h(index.Host, { key: '785b6127926d695ddaaff1a1f740102abd5132bb', role: "button", tabindex: this.disableTabindex ? -1 : 0, onClick: this.handleButtonClick }, this.loading && (index.h("nv-loader", { key: 'b361e4ac45cc1612723d6a67f866b8cdce3c4abc', size: this.size === constants69bafca2.ButtonSize.Large ? 'sm' : 'xs' })), index.h("slot", { key: 'b23c877bd95ae0a02c89c83e4e3d5f0178d646a5', name: "leading-icon" }), index.h("slot", { key: '7c95b1f28a64e7bb5ca02abf2190dfda62d1c758' }), index.h("slot", { key: 'f1cd34ea21393b78bc2f5140364d47b9e70f505c', name: "trailing-icon" })));
|
|
154
|
+
}
|
|
155
|
+
static get formAssociated() { return true; }
|
|
156
|
+
get el() { return index.getElement(this); }
|
|
157
|
+
static get watchers() { return {
|
|
158
|
+
"loading": ["handleLoadingChange"],
|
|
159
|
+
"disabled": ["handleDisabledChange"]
|
|
160
|
+
}; }
|
|
161
|
+
};
|
|
162
|
+
NvButton.style = NvButtonStyle0;
|
|
163
|
+
|
|
164
|
+
exports.nv_button = NvButton;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-yxDlFA78.js');
|
|
4
4
|
var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
|
|
5
5
|
var _commonjsHelpers1789f0cf = require('./_commonjsHelpers-1789f0cf-BJu3ubxk.js');
|
|
6
6
|
require('react');
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-yxDlFA78.js');
|
|
4
4
|
var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
|
|
5
5
|
require('react');
|
|
6
6
|
require('react-dom');
|
|
@@ -4489,7 +4489,7 @@ const NvDatagrid = class {
|
|
|
4489
4489
|
const rows = !this.table || this.table === undefined || this.parsedData.length === 0
|
|
4490
4490
|
? []
|
|
4491
4491
|
: (_c = (_b = this.table) === null || _b === void 0 ? void 0 : _b.getRowModel()) === null || _c === void 0 ? void 0 : _c.rows;
|
|
4492
|
-
return (index.h(index.Host, { key: '
|
|
4492
|
+
return (index.h(index.Host, { key: 'e451dbf6c1042fc5a3796499946db45b4797dc93' }, index.h("div", { key: '670240e9033cdfaa50f5ce81a09ded008e17be12', class: "hidden" }, index.h("slot", { key: '814388d223b82c65f9ee7d1d32ad5ad3faf43f38' })), index.h("slot", { key: '5d8b91ec6e98f86fe1b9b67aef971d228ab54533', name: "before" }), this.enableGlobalFilter && this.table && (index.h("div", { key: 'c9c308ac2e7306414a659b020d8ac169e7705a07', class: `search-container justify-${this.globalFilterPosition}` }, index.h("nv-fieldtext", { key: 'd0447d814471e881aaa186bddcbc245b4defab4d', value: this.globalFilterSearchTerm, onInput: this.handleGlobalFilteringOnInput, placeholder: "Search all columns..." }))), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (index.h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (index.h("div", null, index.h("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (index.h("thead", null, this.parsedColumns.length > 0 && headerGroups
|
|
4493
4493
|
? headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map(headerGroup => (index.h("tr", { key: headerGroup.id }, headerGroup.headers.map(header => {
|
|
4494
4494
|
return this.getHeaderCell(header);
|
|
4495
4495
|
}))))
|
|
@@ -4500,7 +4500,7 @@ const NvDatagrid = class {
|
|
|
4500
4500
|
return (index.h("td", { key: cell.id, "data-row-id": rowId }, this.flexRender(cell.column.columnDef.cell, cell.getContext())));
|
|
4501
4501
|
})));
|
|
4502
4502
|
}))), this.table && this.enableRowSelection ? (index.h("tfoot", null, index.h("tr", null, index.h("td", { colSpan: 20 }, this.enableRowSelection && this.table ? (index.h("div", null, this.rowSelectionState &&
|
|
4503
|
-
Object.keys(this.rowSelectionState).length > 0 ? (index.h("span", null, Object.keys(this.rowSelectionState).length, " of", ' ', ((_e = (_d = this.table.getPreFilteredRowModel()) === null || _d === void 0 ? void 0 : _d.rows) === null || _e === void 0 ? void 0 : _e.length) || 0, ' ', "Total Rows Selected")) : (index.h("span", null, "No rows selected")))) : null)))) : null), this.getPagination())), index.h("slot", { key: '
|
|
4503
|
+
Object.keys(this.rowSelectionState).length > 0 ? (index.h("span", null, Object.keys(this.rowSelectionState).length, " of", ' ', ((_e = (_d = this.table.getPreFilteredRowModel()) === null || _d === void 0 ? void 0 : _d.rows) === null || _e === void 0 ? void 0 : _e.length) || 0, ' ', "Total Rows Selected")) : (index.h("span", null, "No rows selected")))) : null)))) : null), this.getPagination())), index.h("slot", { key: '630915f2ec10f811feae59def0c0b3f4769b11b6', name: "after" })));
|
|
4504
4504
|
}
|
|
4505
4505
|
get el() { return index.getElement(this); }
|
|
4506
4506
|
static get watchers() { return {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-yxDlFA78.js');
|
|
4
4
|
var events_utilsFe1d907f = require('./events.utils-fe1d907f-01N__3wY.js');
|
|
5
5
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
6
6
|
var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
|
|
@@ -542,7 +542,7 @@ var tabbable = function tabbable(container, options) {
|
|
|
542
542
|
return sortByOrder(candidates);
|
|
543
543
|
};
|
|
544
544
|
|
|
545
|
-
const nvDialogCss = "dialog{border-radius:var(--radius-rounded-2xl);background:var(--color-level-00-background);min-width:min(90vw, 400px);width:fit-content;max-width:clamp(90vw, min(90vw, 960px), 960px);margin:auto;max-height:90vh;overflow:hidden;box-shadow:0px var(--shadow-y-axis-2xl) var(--shadow-blur-2xl) var(--shadow-spread-2xl) var(--shadow-color-opacity-3) var(--shadow-color-opacity-3)}dialog.full{width:90vw}dialog::backdrop{opacity:var(--components-overlay-opacity);background:var(--components-overlay-background)}dialog .content{display:flex;flex-direction:column;align-items:flex-start;height:fit-content;max-height:90vh;overflow:hidden}dialog .content nv-button.close-button{position:absolute;top:var(--dialog-dismissible-position-top);right:var(--dialog-dismissible-position-right);display:flex;padding:var(--button-sm-icon-button-padding);justify-content:flex-end;align-items:flex-start;gap:10px}dialog .content .content-body{overflow:auto;box-sizing:border-box;padding:var(--dialog-body-padding-y) var(--dialog-body-padding-x);scrollbar-gutter:stable both-edges;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-base);color:var(--color-content-medium-text)}dialog .content .content-body::-webkit-scrollbar{width:6px;height:6px}dialog .content .content-body::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}dialog .content .content-body::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}";
|
|
545
|
+
const nvDialogCss = "dialog{border-radius:var(--radius-rounded-2xl);background:var(--color-level-00-background);min-width:min(90vw, 400px);width:fit-content;max-width:clamp(90vw, min(90vw, 960px), 960px);margin:auto;max-height:90vh;overflow:hidden;box-shadow:0px var(--shadow-y-axis-2xl) var(--shadow-blur-2xl) var(--shadow-spread-2xl) var(--shadow-color-opacity-3) var(--shadow-color-opacity-3)}dialog.full{width:90vw}dialog::backdrop{opacity:var(--components-overlay-opacity);background:var(--components-overlay-background)}dialog .content{display:flex;flex-direction:column;align-items:flex-start;height:fit-content;max-height:90vh;overflow:hidden}dialog .content nv-button.close-button{position:absolute;top:var(--dialog-dismissible-position-top);right:var(--dialog-dismissible-position-right);display:flex;padding:var(--button-sm-icon-button-padding);justify-content:flex-end;align-items:flex-start;gap:10px}dialog .content .content-body{overflow:auto;box-sizing:border-box;padding:var(--dialog-body-padding-y) var(--dialog-body-padding-x);scrollbar-gutter:stable both-edges;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-base);color:var(--color-content-medium-text);width:100%}dialog .content .content-body::-webkit-scrollbar{width:6px;height:6px}dialog .content .content-body::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}dialog .content .content-body::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}";
|
|
546
546
|
const NvDialogStyle0 = nvDialogCss;
|
|
547
547
|
|
|
548
548
|
const NvDialog = class {
|