@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
|
@@ -1,11 +1,11 @@
|
|
|
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');
|
|
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-B0fvq6nd.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-B0fvq6nd.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-B0fvq6nd.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 {
|