@nova-design-system/nova-react 3.24.0 → 3.26.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/README.md +1 -0
- package/dist/cjs/dom.utils-CuXVGECR-8VY5SfMZ.js +177 -0
- package/dist/cjs/generated/components.server.js +82 -62
- package/dist/cjs/index-BeFrXZol.js +9699 -0
- package/dist/cjs/index.js +2 -1
- package/dist/cjs/{nv-accordion-item.entry-Bu1tAcCq.js → nv-accordion-item.entry-DtzjLTCo.js} +8 -7
- package/dist/cjs/{nv-accordion.entry-jWjLdX8w.js → nv-accordion.entry-DRcTfezT.js} +10 -8
- package/dist/cjs/{nv-alert.entry-E9ZJay_K.js → nv-alert.entry-86bfoXVx.js} +6 -4
- package/dist/cjs/nv-avatar.entry-mp2LJ6RA.js +68 -0
- package/dist/cjs/nv-badge_2.entry-BrDaHeqh.js +220 -0
- package/dist/cjs/nv-breadcrumb.entry-B2q7jJy2.js +49 -0
- package/dist/cjs/nv-breadcrumbs.entry-DKzST1uS.js +21 -0
- package/dist/cjs/nv-button.entry-CVgcU-bi.js +166 -0
- package/dist/cjs/{nv-buttongroup.entry-CuZCRsnV.js → nv-buttongroup.entry-CvuBGaGK.js} +12 -6
- package/dist/cjs/{nv-calendar.entry-CT3mASW6.js → nv-calendar.entry-BCcGhxzJ.js} +27 -19
- package/dist/cjs/{nv-col.entry--pCxkaTh.js → nv-col.entry-CzTahRVr.js} +3 -3
- package/dist/cjs/{nv-datagrid.entry-CGCEhO8C.js → nv-datagrid.entry-DWZxNqTE.js} +47 -184
- package/dist/cjs/{nv-datagridcolumn.entry-Fsqc7CT_.js → nv-datagridcolumn.entry-CzCzmdQl.js} +1 -1
- package/dist/cjs/{nv-dialog.entry-B6OYcZxQ.js → nv-dialog.entry-ByVD02QB.js} +19 -20
- package/dist/cjs/{nv-dialogfooter_2.entry-C4fP_n2-.js → nv-dialogfooter_2.entry-BmQcYJsD.js} +11 -29
- package/dist/cjs/{nv-drawer.entry-C5O4KvHU.js → nv-drawer.entry-C15JRJ3N.js} +19 -19
- package/dist/cjs/{nv-drawerfooter_2.entry-C-reYJXG.js → nv-drawerfooter_2.entry-DuDac_Os.js} +11 -29
- package/dist/cjs/nv-fieldcheckbox.entry-CwDOQzSW.js +179 -0
- package/dist/cjs/{nv-fielddate.entry-dqZDBVmm.js → nv-fielddate.entry-DKICGwc0.js} +15 -13
- package/dist/cjs/{nv-fielddaterange.entry-wNRasXky.js → nv-fielddaterange.entry-DGEK8F9p.js} +15 -14
- package/dist/cjs/{nv-fielddropdown.entry-BA15piWa.js → nv-fielddropdown.entry-BLS7lRzD.js} +33 -31
- package/dist/cjs/nv-fielddropdownitem.entry-Bbfi3A8C.js +69 -0
- package/dist/cjs/{nv-fieldmultiselect.entry-BWY5xOAd.js → nv-fieldmultiselect.entry-Cpy7HzlZ.js} +28 -24
- package/dist/cjs/nv-fieldnumber.entry-SbNb4hKr.js +189 -0
- package/dist/cjs/nv-fieldpassword.entry-CPsgagjY.js +167 -0
- package/dist/cjs/nv-fieldradio.entry-DLP-rmKU.js +105 -0
- package/dist/cjs/{nv-fieldselect.entry-uUIZ6hmN.js → nv-fieldselect.entry-DOOO03kM.js} +20 -12
- package/dist/cjs/{nv-fieldslider.entry-DnvmxxYY.js → nv-fieldslider.entry-CpVbxkpo.js} +33 -15
- package/dist/cjs/nv-fieldtext.entry-BpbG4WHv.js +163 -0
- package/dist/cjs/nv-fieldtextarea.entry-BA_RApYN.js +245 -0
- package/dist/cjs/{nv-fieldtime.entry-DlMNDTht.js → nv-fieldtime.entry-DaJfwQtC.js} +15 -9
- package/dist/cjs/{nv-icon.entry-CnUkRzaA.js → nv-icon.entry-DIi792yJ.js} +4 -4
- package/dist/cjs/nv-iconbutton_2.entry-B4xB5WtE.js +171 -0
- package/dist/cjs/{nv-menu.entry-Dc_FvIx7.js → nv-menu.entry-DHWhkWeB.js} +9 -13
- package/dist/cjs/nv-menuitem.entry-CQApuT2D.js +59 -0
- package/dist/cjs/nv-notification-bullet.entry-CnYVWE_Z.js +76 -0
- package/dist/cjs/{nv-notification.entry-C3m5p5BL.js → nv-notification.entry-DraOvzsu.js} +4 -4
- package/dist/cjs/nv-notificationcontainer.entry-BDo-rQLL.js +41 -0
- package/dist/cjs/nv-paginationtable.entry-CS7BhAVe.js +231 -0
- package/dist/cjs/{nv-popover.entry-B0c-2rO4.js → nv-popover.entry-DSyKCLtF.js} +105 -33
- package/dist/cjs/nv-row.entry-D21zN2Vr.js +22 -0
- package/dist/cjs/{nv-sidebar.entry-CiN813gQ.js → nv-sidebar.entry-DpKgnjsJ.js} +10 -6
- package/dist/cjs/nv-sidebarcontent.entry-BWFDcui8.js +22 -0
- package/dist/cjs/{nv-sidebardivider.entry-B4EMyca5.js → nv-sidebardivider.entry-BSzLq-h3.js} +4 -4
- package/dist/cjs/{nv-sidebarfooter.entry-CHi4qOFe.js → nv-sidebarfooter.entry-C3DLHPSQ.js} +4 -4
- package/dist/cjs/nv-sidebargroup.entry-BMYLbCql.js +23 -0
- package/dist/cjs/{nv-sidebarheader.entry-_7ch0O3G.js → nv-sidebarheader.entry-CkUGD-Tw.js} +4 -4
- package/dist/cjs/{nv-sidebarlogo.entry-Ch9F-JnT.js → nv-sidebarlogo.entry-BX1-1S1v.js} +4 -4
- package/dist/cjs/{nv-sidebarnavitem.entry-DVrafSMr.js → nv-sidebarnavitem.entry-CPwt0Njh.js} +9 -7
- package/dist/cjs/nv-sidebarnavsubitem.entry-HZOTB6Tl.js +35 -0
- package/dist/cjs/{nv-split.entry-0HTslRAX.js → nv-split.entry-DdtzktvN.js} +10 -6
- package/dist/cjs/nv-stack.entry-BMLt30Nt.js +31 -0
- package/dist/cjs/{nv-table.entry-DH85n8Mc.js → nv-table.entry-RTiqKRKM.js} +6 -4
- package/dist/cjs/{nv-tableheader.entry-CKfocdxD.js → nv-tableheader.entry-Ci4qo8eY.js} +4 -4
- package/dist/cjs/nv-toggle.entry-s8B7-8P7.js +82 -0
- package/dist/cjs/nv-togglebutton.entry-CyHgU4Wl.js +66 -0
- package/dist/cjs/{nv-togglebuttongroup.entry-C0NLbsq7.js → nv-togglebuttongroup.entry-Bn_9DsdP.js} +13 -9
- package/dist/cjs/nv-tooltip.entry-D6kxXLO-.js +56 -0
- package/dist/components/NvDatatable/NvDatatable.js +29 -8
- package/dist/generated/components.js +11 -0
- package/dist/generated/components.server.js +81 -62
- package/dist/providers/NotificationProvider.js +9 -8
- package/dist/types/components/NvDatatable/types.d.ts +6 -0
- package/dist/types/generated/components.d.ts +52 -46
- package/dist/types/generated/components.server.d.ts +52 -46
- package/package.json +7 -4
- package/dist/cjs/index-kU2nW5aN.js +0 -40286
- package/dist/cjs/nv-avatar.entry-CUX7u0kR.js +0 -68
- package/dist/cjs/nv-badge_2.entry-bxpV5gxE.js +0 -213
- package/dist/cjs/nv-breadcrumb.entry-Cbbb9Qeh.js +0 -46
- package/dist/cjs/nv-breadcrumbs.entry-BTqnp9zO.js +0 -21
- package/dist/cjs/nv-button.entry-upWH19y6.js +0 -162
- package/dist/cjs/nv-fieldcheckbox.entry-bk7UNQny.js +0 -177
- package/dist/cjs/nv-fielddropdownitem.entry-DEWaf9dC.js +0 -72
- package/dist/cjs/nv-fieldnumber.entry-DoYORd0d.js +0 -187
- package/dist/cjs/nv-fieldpassword.entry-CPaLj9aD.js +0 -165
- package/dist/cjs/nv-fieldradio.entry-CvUmEaCa.js +0 -103
- package/dist/cjs/nv-fieldtext.entry-BYAJp3n_.js +0 -163
- package/dist/cjs/nv-fieldtextarea.entry-DU2bWYeg.js +0 -237
- package/dist/cjs/nv-iconbutton_2.entry-hqp4AcRq.js +0 -167
- package/dist/cjs/nv-menuitem.entry-DzMhx6c_.js +0 -60
- package/dist/cjs/nv-notification-bullet.entry-BwhHCMQF.js +0 -76
- package/dist/cjs/nv-notificationcontainer.entry-DTRNn7VE.js +0 -41
- package/dist/cjs/nv-row.entry-CdcjVGZv.js +0 -22
- package/dist/cjs/nv-sidebarcontent.entry-D9hpAhK8.js +0 -22
- package/dist/cjs/nv-sidebargroup.entry-RVqrsyIU.js +0 -23
- package/dist/cjs/nv-sidebarnavsubitem.entry-C0XDAzma.js +0 -35
- package/dist/cjs/nv-stack.entry-CqO7uTQf.js +0 -31
- package/dist/cjs/nv-toggle.entry-BHUl76Im.js +0 -80
- package/dist/cjs/nv-togglebutton.entry-D_9COjY-.js +0 -67
- package/dist/cjs/nv-tooltip.entry-BfViGE_U.js +0 -55
- /package/dist/cjs/{i18n.utils-IlwlcG9l-ku0bScip.js → i18n.utils-CR9MpYzU-ku0bScip.js} +0 -0
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-BeFrXZol.js');
|
|
4
|
+
require('@stencil/react-output-target/runtime');
|
|
5
|
+
require('react');
|
|
6
|
+
require('react-dom');
|
|
7
|
+
|
|
8
|
+
const nvSidebargroupCss = () => `nv-sidebargroup{display:flex;flex-direction:column;gap:var(--sidebar-group-gap-y)}nv-sidebargroup .nv-sidebargroup-label{display:block;font-size:var(--font-size-sm);line-height:var(--line-height-sm);font-weight:var(--font-weight-medium-emphasis);color:var(--color-content-lower-text);letter-spacing:0;padding:var(--sidebar-title-padding-y) var(--sidebar-title-padding-x)}nv-sidebar[collapsed] nv-sidebargroup .nv-sidebargroup-label{display:none}`;
|
|
9
|
+
|
|
10
|
+
const NvSidebargroup = class {
|
|
11
|
+
constructor(hostRef) {
|
|
12
|
+
index.registerInstance(this, hostRef);
|
|
13
|
+
}
|
|
14
|
+
//#endregion PROPERTIES
|
|
15
|
+
/****************************************************************************/
|
|
16
|
+
//#region RENDER
|
|
17
|
+
render() {
|
|
18
|
+
return (index.h(index.Host, { key: 'efeaa9f861a41ad96b5f1878510bb1bbbd4a5404', role: "group", "aria-label": this.label }, this.label && index.h("div", { key: '75816b463eeb0cf7687f2b0bca271db560cfafa6', class: "nv-sidebargroup-label" }, this.label), index.h("slot", { key: '614116b7997561766949124e56f3cb66addd419b' })));
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
NvSidebargroup.style = nvSidebargroupCss();
|
|
22
|
+
|
|
23
|
+
exports.nv_sidebargroup = NvSidebargroup;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BeFrXZol.js');
|
|
4
4
|
require('@stencil/react-output-target/runtime');
|
|
5
5
|
require('react');
|
|
6
6
|
require('react-dom');
|
|
7
7
|
|
|
8
|
-
const nvSidebarheaderCss =
|
|
8
|
+
const nvSidebarheaderCss = () => `nv-sidebarheader{display:block}`;
|
|
9
9
|
|
|
10
10
|
const NvSidebarheader = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -14,9 +14,9 @@ const NvSidebarheader = class {
|
|
|
14
14
|
/****************************************************************************/
|
|
15
15
|
//#region RENDER
|
|
16
16
|
render() {
|
|
17
|
-
return (index.h(index.Host, { key: '
|
|
17
|
+
return (index.h(index.Host, { key: '8dd986cfb2cd89557955c6eb61ebfbad0eb1dbcc' }, index.h("slot", { key: 'ee7808c81f750f5c46da9ed0bfd3b9fcb18d393d' })));
|
|
18
18
|
}
|
|
19
19
|
};
|
|
20
|
-
NvSidebarheader.style = nvSidebarheaderCss;
|
|
20
|
+
NvSidebarheader.style = nvSidebarheaderCss();
|
|
21
21
|
|
|
22
22
|
exports.nv_sidebarheader = NvSidebarheader;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BeFrXZol.js');
|
|
4
4
|
require('@stencil/react-output-target/runtime');
|
|
5
5
|
require('react');
|
|
6
6
|
require('react-dom');
|
|
7
7
|
|
|
8
|
-
const nvSidebarlogoCss =
|
|
8
|
+
const nvSidebarlogoCss = () => `nv-sidebarlogo{display:block}nv-sidebarlogo .nv-sidebarlogo-container{display:flex;align-items:center;gap:var(--spacing-3)}nv-sidebarlogo .nv-sidebarlogo-full,nv-sidebarlogo .nv-sidebarlogo-collapsed{height:var(--spacing-8);width:auto;object-fit:contain}nv-sidebarlogo .nv-sidebarlogo-collapsed{display:none}nv-sidebarlogo .nv-sidebarlogo-title{font-size:var(--nv-sidebarlogo-font-size, var(--font-size-md));font-weight:var(--nv-sidebarlogo-font-weight, var(--font-weight-high-emphasis));font-family:var(--nv-sidebarlogo-font-family, inherit);color:var(--color-content-high-text);white-space:nowrap;overflow:hidden;transition:opacity 0.2s ease, max-width 0.3s ease, margin-left 0.3s ease;max-width:200px;opacity:1}nv-sidebar[collapsed] nv-sidebarlogo .nv-sidebarlogo-full{display:none}nv-sidebar[collapsed] nv-sidebarlogo .nv-sidebarlogo-collapsed{display:block}nv-sidebar[collapsed] nv-sidebarlogo .nv-sidebarlogo-title{max-width:0;opacity:0;margin-left:0}nv-sidebar[collapsed] nv-sidebarlogo .nv-sidebarlogo-container{justify-content:center;align-items:center;gap:0;width:100%;min-height:var(--spacing-12);padding:0}`;
|
|
9
9
|
|
|
10
10
|
const NvSidebarlogo = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -24,9 +24,9 @@ const NvSidebarlogo = class {
|
|
|
24
24
|
render() {
|
|
25
25
|
const logoSrc = this.logo || this.defaultLogo;
|
|
26
26
|
const collapsedLogoSrc = this.collapsedLogo || this.defaultCollapsedLogo;
|
|
27
|
-
return (index.h(index.Host, { key: '
|
|
27
|
+
return (index.h(index.Host, { key: '6a1df67b6c23e0c2b4cd4da481dcd7a708062963' }, index.h("div", { key: 'e974e75054b93aac6d417a5fa1c527ca75b0f417', class: "nv-sidebarlogo-container" }, index.h("img", { key: '51bb65b380cc18252a3ea6c16741485a61f0cf12', src: logoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-full" }), index.h("img", { key: '0cee540a20ffb605ea2efa38c5b5942505ada7db', src: collapsedLogoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-collapsed" }), this.label && index.h("span", { key: '10ffc4e62a39c5ecfffd9f115c5929057901222a', class: "nv-sidebarlogo-title" }, this.label))));
|
|
28
28
|
}
|
|
29
29
|
};
|
|
30
|
-
NvSidebarlogo.style = nvSidebarlogoCss;
|
|
30
|
+
NvSidebarlogo.style = nvSidebarlogoCss();
|
|
31
31
|
|
|
32
32
|
exports.nv_sidebarlogo = NvSidebarlogo;
|
package/dist/cjs/{nv-sidebarnavitem.entry-DVrafSMr.js → nv-sidebarnavitem.entry-CPwt0Njh.js}
RENAMED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BeFrXZol.js');
|
|
4
4
|
require('@stencil/react-output-target/runtime');
|
|
5
5
|
require('react');
|
|
6
6
|
require('react-dom');
|
|
7
7
|
|
|
8
|
-
const nvSidebarnavitemCss =
|
|
8
|
+
const nvSidebarnavitemCss = () => `nv-sidebarnavitem{display:flex;flex-direction:column;gap:0}nv-sidebarnavitem .nv-sidebarnavitem-trigger{display:flex;align-items:center;gap:var(--sidebar-item-gap-x);padding:var(--sidebar-item-padding-y) var(--sidebar-item-padding-x);border-radius:var(--sidebar-item-radius);cursor:pointer;transition:all 0.15s ease;font-size:var(--sidebar-item-font-size);font-weight:var(--font-weight-medium-emphasis);color:var(--color-content-low-text);background:var(--components-sidebar-background);text-decoration:none;--nv-component-background:var(--components-sidebar-background);--nv-sidebarnavitem-background:var(--components-sidebar-background)}nv-sidebarnavitem .nv-sidebarnavitem-trigger:hover{background-color:var(--color-interaction-container-neutral-background-hover);color:var(--color-content-medium-text);--nv-component-background:var(--color-interaction-container-neutral-background-hover);--nv-sidebarnavitem-background:var(--color-interaction-container-neutral-background-hover)}nv-sidebarnavitem .nv-sidebarnavitem-trigger:focus,nv-sidebarnavitem .nv-sidebarnavitem-trigger:focus-within{outline:none}nv-sidebarnavitem .nv-sidebarnavitem-trigger:focus-visible,nv-sidebarnavitem .nv-sidebarnavitem-trigger:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-sidebarnavitem[active] .nv-sidebarnavitem-trigger{background-color:var(--color-interaction-container-neutral-background-active);color:var(--color-interaction-container-neutral-text-active);font-weight:var(--font-weight-medium-emphasis);--nv-component-background:var(--color-interaction-container-neutral-background-active);--nv-sidebarnavitem-background:var(--color-interaction-container-neutral-background-active)}nv-sidebarnavitem .nv-sidebarnavitem-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit;width:var(--sidebar-item-icon-size);height:var(--sidebar-item-icon-size);position:relative}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-icon{overflow:visible;margin:0;justify-content:center}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-icon nv-notification-bullet{position:absolute;transform:translate(50%, -50%);z-index:1;--sidebar-notification-bullet-size-reduced:calc( var(--sidebar-item-icon-size) * 0.4 )}nv-sidebarnavitem .nv-sidebarnavitem-content{flex:1;display:flex;align-items:center}nv-sidebarnavitem .nv-sidebarnavitem-content a{color:inherit !important;text-decoration:none !important;font-weight:var(--font-weight-medium-emphasis) !important;flex:1}nv-sidebarnavitem .nv-sidebarnavitem-trailing{display:flex;align-items:center;gap:var(--spacing-2);margin-left:auto}nv-sidebarnavitem .nv-sidebarnavitem-chevron{transition:transform 0.2s ease;color:inherit}nv-sidebarnavitem[open] .nv-sidebarnavitem-chevron{transform:rotate(180deg)}nv-sidebarnavitem .nv-sidebarnavitem-subitems{display:flex;flex-direction:column;gap:0;max-height:0;overflow:hidden;opacity:0;transition:max-height 0.3s ease, opacity 0.2s ease;padding-left:0}nv-sidebarnavitem[open] .nv-sidebarnavitem-subitems{opacity:1;margin-top:var(--spacing-1)}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-trigger{justify-content:center;gap:0;padding:var(--sidebar-item-padding-y-collapsed) var(--sidebar-item-padding-x-collapsed)}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-content{display:none}nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-trailing,nv-sidebar[collapsed] nv-sidebarnavitem .nv-sidebarnavitem-chevron{display:none}`;
|
|
9
9
|
|
|
10
10
|
const NvSidebarnavitem = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -187,7 +187,7 @@ const NvSidebarnavitem = class {
|
|
|
187
187
|
//#region LIFECYCLE
|
|
188
188
|
componentWillLoad() {
|
|
189
189
|
// Check if there are sub-items in any slot
|
|
190
|
-
const subItems =
|
|
190
|
+
const subItems = this.el.querySelectorAll('nv-sidebarnavsubitem');
|
|
191
191
|
this.hasSubitems = subItems.length > 0;
|
|
192
192
|
// Move sub-items to the subitems slot
|
|
193
193
|
if (this.hasSubitems) {
|
|
@@ -269,7 +269,7 @@ const NvSidebarnavitem = class {
|
|
|
269
269
|
render() {
|
|
270
270
|
const showNotificationBullet = this.notificationCount !== undefined && this.notificationCount > 0;
|
|
271
271
|
const notificationSize = this.isSidebarCollapsed ? 'reduced' : 'default';
|
|
272
|
-
return (index.h(index.Host, { key: '
|
|
272
|
+
return (index.h(index.Host, { key: '0809fb5e4f1663571199bd75e3f2d69d09eabc2f', role: "listitem" }, index.h("div", { key: '6885fbc8e01fd60f32d56a8b750398a772ee1169', class: "nv-sidebarnavitem-trigger", onClick: this.handleToggle, "aria-expanded": this.collapsible ? String(this.open) : undefined, "aria-current": this.active && !this.collapsible ? 'page' : undefined }, this.icon && (index.h("div", { key: '515ea7bb25f83fb3a645531ade9370357b1a3cc3', class: "nv-sidebarnavitem-icon" }, index.h("nv-icon", { key: '718f35787fcd979dd305bcf985a51a9bf7f21a8b', name: this.icon, size: "md" }), showNotificationBullet && this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: 'c99767c829bf878d30345933d1bdf9f7c79fc778', count: this.notificationCount, size: notificationSize, contrastingBorder: true })))), index.h("div", { key: 'd2cfe856fb91a7d15232ff30c73a6709b6adffbf', class: "nv-sidebarnavitem-content" }, index.h("slot", { key: 'dbcc77aaf798efdca11714c0a6c9109c112ea314' })), index.h("div", { key: 'bf0136c15af7ac1c4bb98c9415ef0a37760cf4e1', class: "nv-sidebarnavitem-trailing" }, index.h("slot", { key: 'b84329d00c08ba2e7dc1a783b65d309fbf45a4da', name: "trailing" }), showNotificationBullet && !this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: '8a5b9447b80a59c38f006d86fe0d6bd655e02735', count: this.notificationCount, size: notificationSize })), this.collapsible && (index.h("nv-icon", { key: '47348e1ad810f7abd022dc510bfd11caeb8d8c71', name: "chevron-down", size: "sm", class: "nv-sidebarnavitem-chevron" })))), this.collapsible && this.hasSubitems && (index.h("div", { key: 'ba5160e5ea9cac822afdf9ed75f3e00807615304', class: "nv-sidebarnavitem-subitems", ref: el => {
|
|
273
273
|
// Only update ref and initialize if element changed or not yet initialized
|
|
274
274
|
if (el !== this.subitemsRef) {
|
|
275
275
|
this.subitemsRef = el;
|
|
@@ -284,13 +284,15 @@ const NvSidebarnavitem = class {
|
|
|
284
284
|
});
|
|
285
285
|
}
|
|
286
286
|
}
|
|
287
|
-
} }, index.h("slot", { key: '
|
|
287
|
+
} }, index.h("slot", { key: '4cd023b2af51cf8941d29cb2728cdd1c6b2ea8ed', name: "subitems" })))));
|
|
288
288
|
}
|
|
289
289
|
get el() { return index.getElement(this); }
|
|
290
290
|
static get watchers() { return {
|
|
291
|
-
"open": [
|
|
291
|
+
"open": [{
|
|
292
|
+
"onOpenChanged": 0
|
|
293
|
+
}]
|
|
292
294
|
}; }
|
|
293
295
|
};
|
|
294
|
-
NvSidebarnavitem.style = nvSidebarnavitemCss;
|
|
296
|
+
NvSidebarnavitem.style = nvSidebarnavitemCss();
|
|
295
297
|
|
|
296
298
|
exports.nv_sidebarnavitem = NvSidebarnavitem;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-BeFrXZol.js');
|
|
4
|
+
require('@stencil/react-output-target/runtime');
|
|
5
|
+
require('react');
|
|
6
|
+
require('react-dom');
|
|
7
|
+
|
|
8
|
+
const nvSidebarnavsubitemCss = () => `nv-sidebarnavsubitem{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--sidebar-item-padding-y) var(--sidebar-item-padding-x) var(--sidebar-item-padding-y) calc(var(--sidebar-sub-item-padding-left) + var(--sidebar-item-padding-x));cursor:pointer;transition:all 0.15s ease;position:relative;min-height:var(--spacing-10);background-color:var(--color-interaction-container-neutral-background);border-radius:var(--sidebar-item-radius);--nv-component-background:var(--color-interaction-container-neutral-background)}nv-sidebarnavsubitem:hover{background-color:var(--color-interaction-container-neutral-background-hover);--nv-component-background:var(--color-interaction-container-neutral-background-hover)}nv-sidebarnavsubitem:focus,nv-sidebarnavsubitem:focus-within{outline:none}nv-sidebarnavsubitem:focus-visible,nv-sidebarnavsubitem:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-sidebarnavsubitem .nv-sidebarnavsubitem-indicator{display:none}nv-sidebarnavsubitem .nv-sidebarnavsubitem-content{flex:1;display:flex;align-items:center;gap:var(--spacing-2);font-size:var(--font-size-sm);color:var(--color-content-medium-text);text-decoration:none;font-weight:var(--font-weight-medium-emphasis)}nv-sidebarnavsubitem .nv-sidebarnavsubitem-content a{color:inherit !important;text-decoration:none !important;font-weight:var(--font-weight-medium-emphasis) !important;flex:1}nv-sidebarnavsubitem:hover .nv-sidebarnavsubitem-content{color:var(--color-content-medium-text)}nv-sidebarnavsubitem[active]{background-color:var(--color-interaction-container-neutral-background-active);--nv-component-background:var(--color-interaction-container-neutral-background-active)}nv-sidebarnavsubitem[active] .nv-sidebarnavsubitem-content{color:var(--color-interaction-container-neutral-text-active);font-weight:var(--font-weight-high-emphasis)}nv-sidebarnavsubitem .nv-sidebarnavsubitem-trailing{display:flex;align-items:center}nv-sidebar[collapsed] nv-sidebarnavsubitem .nv-sidebarnavsubitem-content{max-width:0;opacity:0;margin:0;overflow:hidden;transition:opacity 0.2s ease, max-width 0.2s ease}nv-sidebar[collapsed] nv-sidebarnavsubitem .nv-sidebarnavsubitem-indicator{margin-right:0;width:var(--spacing-6);justify-content:center}nv-sidebar[collapsed] nv-sidebarnavsubitem .nv-sidebarnavsubitem-trailing{display:none}`;
|
|
9
|
+
|
|
10
|
+
const NvSidebarnavsubitem = class {
|
|
11
|
+
constructor(hostRef) {
|
|
12
|
+
index.registerInstance(this, hostRef);
|
|
13
|
+
/****************************************************************************/
|
|
14
|
+
//#region PROPERTIES
|
|
15
|
+
/**
|
|
16
|
+
* Whether this sub-item represents the active/current page.
|
|
17
|
+
*/
|
|
18
|
+
this.active = false;
|
|
19
|
+
}
|
|
20
|
+
//#endregion PROPERTIES
|
|
21
|
+
/****************************************************************************/
|
|
22
|
+
//#region METHODS
|
|
23
|
+
// Note: We no longer use stopPropagation() here because it prevents React Router
|
|
24
|
+
// (and other SPA routers) from receiving the click event due to event delegation.
|
|
25
|
+
// Instead, the parent nv-sidebarnavitem checks if clicks originate from subitems.
|
|
26
|
+
//#endregion METHODS
|
|
27
|
+
/****************************************************************************/
|
|
28
|
+
//#region RENDER
|
|
29
|
+
render() {
|
|
30
|
+
return (index.h(index.Host, { key: 'e5b353c32937bbf45c455593693b58d7177879f9', role: "listitem", "aria-current": this.active ? 'page' : undefined }, index.h("div", { key: 'ebe7894659ae59538adc96043621b37a3145ef1a', class: "nv-sidebarnavsubitem-indicator" }), index.h("div", { key: '2054d9f16623e2611652274f4872b6bcdc78c44c', class: "nv-sidebarnavsubitem-content" }, index.h("slot", { key: 'fa1db84fbb2fcbc3cd6729146b6962445bbba2be' })), index.h("div", { key: 'd3399e26472f48809c2b4fd824402827330b9b11', class: "nv-sidebarnavsubitem-trailing" }, index.h("slot", { key: '5ee8b8b8198854ed658272032855e3cf18f21a25', name: "trailing" }))));
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
NvSidebarnavsubitem.style = nvSidebarnavsubitemCss();
|
|
34
|
+
|
|
35
|
+
exports.nv_sidebarnavsubitem = NvSidebarnavsubitem;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BeFrXZol.js');
|
|
4
4
|
require('@stencil/react-output-target/runtime');
|
|
5
5
|
require('react');
|
|
6
6
|
require('react-dom');
|
|
7
7
|
|
|
8
|
-
const nvSplitCss =
|
|
8
|
+
const nvSplitCss = () => `nv-split{display:flex;width:100%;height:100%;position:relative}nv-split[direction=horizontal]{flex-direction:row}nv-split[direction=vertical]{flex-direction:column}nv-split .nv-split-gutter{position:absolute;z-index:10;background:transparent;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background-color 0.2s ease}nv-split .nv-split-gutter::after{content:"";position:absolute;background:var(--components-splitter-line-background);transition:background-color 0.2s ease}nv-split .nv-split-gutter:hover::after{background:var(--components-splitter-line-background-hover)}nv-split .nv-split-gutter::before{content:"";background:var(--components-splitter-handle-background);position:absolute;background-repeat:no-repeat;background-position:center;transition:all 0.2s ease;pointer-events:none}nv-split[direction=horizontal]>.nv-split-gutter{width:var(--splitter-gutter);top:0;bottom:0;transform:translateX(-50%);cursor:col-resize}nv-split[direction=horizontal]>.nv-split-gutter::after{width:var(--splitter-line-width);background-color:var(--components-splitter-line-background);height:100%;left:50%;top:0%;transform:translateX(-50%)}nv-split[direction=horizontal]>.nv-split-gutter:hover::after{background-color:var(--components-splitter-line-background-hover)}nv-split[direction=horizontal]>.nv-split-gutter:active::after{background-color:var(--components-splitter-line-background-active)}nv-split[direction=horizontal]>.nv-split-gutter::before{background-color:var(--components-splitter-handle-background);width:var(--splitter-handle-wide);height:var(--splitter-handle-long);border-radius:var(--splitter-handle-radius);z-index:11;transition:all 0.2s ease}nv-split[direction=horizontal]>.nv-split-gutter:hover::before{background-color:var(--components-splitter-handle-background-hover)}nv-split[direction=horizontal]>.nv-split-gutter:active::before{background-color:var(--components-splitter-handle-background-active)}nv-split[direction=vertical]>.nv-split-gutter{height:var(--splitter-gutter);left:0;right:0;transform:translateY(-50%);cursor:row-resize}nv-split[direction=vertical]>.nv-split-gutter::after{height:var(--splitter-line-width);background-color:var(--components-splitter-line-background);width:100%;top:50%;left:0%;transform:translateY(-50%)}nv-split[direction=vertical]>.nv-split-gutter:hover::after{background-color:var(--components-splitter-line-background-hover)}nv-split[direction=vertical]>.nv-split-gutter:active::after{background-color:var(--components-splitter-line-background-active)}nv-split[direction=vertical]>.nv-split-gutter::before{background-color:var(--components-splitter-handle-background);width:var(--splitter-handle-long);height:var(--splitter-handle-wide);border-radius:var(--splitter-handle-radius);z-index:11;transition:all 0.2s ease}nv-split[direction=vertical]>.nv-split-gutter:hover::before{background-color:var(--components-splitter-handle-background-hover)}nv-split[direction=vertical]>.nv-split-gutter:active::before{background-color:var(--components-splitter-handle-background-active)}nv-split[data-dragging=true]>.nv-split-gutter::after{background:var(--components-splitter-line-background-active)}nv-split>[slot=pane]{box-sizing:border-box;flex:1 1 auto;overflow:hidden;min-width:0;min-height:0;display:flex;flex-direction:column;margin:0 !important}nv-split>[slot=pane]>nv-split{flex:1 1 auto;width:100%;height:100%}`;
|
|
9
9
|
|
|
10
10
|
const NvSplit = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -326,14 +326,18 @@ const NvSplit = class {
|
|
|
326
326
|
/****************************************************************************/
|
|
327
327
|
//#region RENDER
|
|
328
328
|
render() {
|
|
329
|
-
return (index.h(index.Host, { key: '
|
|
329
|
+
return (index.h(index.Host, { key: 'ab2b75b963d3cee109e90fe22e0dfe356a384706', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: 'a7a8258a976029f91ffbce3fa1f90f7ed35409ef', name: "pane" }), index.h("slot", { key: '9af34cb299ff061bec6ba7dfe6e969e093aeb3bc', name: "gutter" })));
|
|
330
330
|
}
|
|
331
331
|
get el() { return index.getElement(this); }
|
|
332
332
|
static get watchers() { return {
|
|
333
|
-
"sizes": [
|
|
334
|
-
|
|
333
|
+
"sizes": [{
|
|
334
|
+
"onSizesChanged": 0
|
|
335
|
+
}],
|
|
336
|
+
"direction": [{
|
|
337
|
+
"onDirectionChanged": 0
|
|
338
|
+
}]
|
|
335
339
|
}; }
|
|
336
340
|
};
|
|
337
|
-
NvSplit.style = nvSplitCss;
|
|
341
|
+
NvSplit.style = nvSplitCss();
|
|
338
342
|
|
|
339
343
|
exports.nv_split = NvSplit;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-BeFrXZol.js');
|
|
4
|
+
var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
|
|
5
|
+
require('@stencil/react-output-target/runtime');
|
|
6
|
+
require('react');
|
|
7
|
+
require('react-dom');
|
|
8
|
+
|
|
9
|
+
const nvStackCss = () => `nv-stack{display:flex;align-items:center;justify-content:flex-start;flex-direction:row}nv-stack nv-col{display:flex}nv-stack:not(nv-row){flex-wrap:nowrap}nv-stack>.nv-stack-item-flex{flex-shrink:1;flex-grow:1}nv-stack>.nv-stack-item-lead{margin-right:auto}nv-stack>.nv-stack-item-lead+*{margin-left:0}nv-stack>.nv-stack-item-center{margin-right:auto;margin-left:auto}nv-stack>.nv-stack-item-tail{margin-left:auto}nv-stack>.nv-stack-nowrap{white-space:nowrap}nv-stack.nv-stack-vertical{align-items:stretch;flex-direction:column}nv-stack.nv-stack-vertical>.nv-stack-item-lead{margin-right:0;margin-bottom:auto}nv-stack.nv-stack-vertical>.nv-stack-item-lead+*{margin-top:0}nv-stack.nv-stack-vertical>.nv-stack-item-tail{margin-left:0;margin-top:auto}nv-stack.nv-stack-vertical>.nv-stack-item-center{margin:auto 0}nv-stack.nv-stack-flex>*{flex-shrink:1;flex-grow:1}nv-stack.nv-stack-fill>*{height:100%}nv-stack.nv-stack-fill.nv-stack-vertical>*{height:auto;width:100%}`;
|
|
10
|
+
|
|
11
|
+
const NvStack = class {
|
|
12
|
+
constructor(hostRef) {
|
|
13
|
+
index.registerInstance(this, hostRef);
|
|
14
|
+
/****************************************************************************/
|
|
15
|
+
//#region PROPERTIES
|
|
16
|
+
/**
|
|
17
|
+
* Gutter refers to the space that exists between children components inside
|
|
18
|
+
* the stack container.
|
|
19
|
+
*/
|
|
20
|
+
this.gutter = 2;
|
|
21
|
+
}
|
|
22
|
+
//#endregion PROPERTIES
|
|
23
|
+
/****************************************************************************/
|
|
24
|
+
//#region RENDER
|
|
25
|
+
render() {
|
|
26
|
+
return (index.h(index.Host, { key: '1fe102ad734149231a7058af441e5ee77ef97ca3', class: clsxChV9xqsO.clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, index.h("slot", { key: 'f7ed597dabd90182887096441ff1258812dfe9fc' })));
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
NvStack.style = nvStackCss();
|
|
30
|
+
|
|
31
|
+
exports.nv_stack = NvStack;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BeFrXZol.js');
|
|
4
4
|
require('@stencil/react-output-target/runtime');
|
|
5
5
|
require('react');
|
|
6
6
|
require('react-dom');
|
|
@@ -116,6 +116,8 @@ function releasePointerCapture(cell, pointerId) {
|
|
|
116
116
|
* @param {boolean} prevent - Whether to prevent selection
|
|
117
117
|
*/
|
|
118
118
|
function setUserSelectPrevention(prevent) {
|
|
119
|
+
if (!document)
|
|
120
|
+
return; // SSR & node env fallback safety
|
|
119
121
|
document.body.style.userSelect = prevent ? 'none' : '';
|
|
120
122
|
}
|
|
121
123
|
/**
|
|
@@ -178,7 +180,7 @@ function updateCellWidthFromResize(state, event, minWidth = TABLE_CONSTANTS.MIN_
|
|
|
178
180
|
setCellWidth(state.resizingCell, newWidth);
|
|
179
181
|
}
|
|
180
182
|
|
|
181
|
-
const nvTableCss =
|
|
183
|
+
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}`;
|
|
182
184
|
|
|
183
185
|
const NvTable = class {
|
|
184
186
|
constructor(hostRef) {
|
|
@@ -234,10 +236,10 @@ const NvTable = class {
|
|
|
234
236
|
/****************************************************************************/
|
|
235
237
|
//#region RENDER
|
|
236
238
|
render() {
|
|
237
|
-
return (index.h(index.Host, { key: '
|
|
239
|
+
return (index.h(index.Host, { key: '0d5518a54b41c67bdd7c73d5147fd954fb53d388' }, index.h("slot", { key: '8ab65d5dd1ce751fd357b275b84db042b1d9ce2e' })));
|
|
238
240
|
}
|
|
239
241
|
get host() { return index.getElement(this); }
|
|
240
242
|
};
|
|
241
|
-
NvTable.style = nvTableCss;
|
|
243
|
+
NvTable.style = nvTableCss();
|
|
242
244
|
|
|
243
245
|
exports.nv_table = NvTable;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BeFrXZol.js');
|
|
4
4
|
require('@stencil/react-output-target/runtime');
|
|
5
5
|
require('react');
|
|
6
6
|
require('react-dom');
|
|
7
7
|
|
|
8
|
-
const nvTableheaderCss =
|
|
8
|
+
const nvTableheaderCss = () => `nv-tableheader{display:inline-flex;width:100%;align-items:center;gap:var(--spacing-2)}nv-tableheader:focus-visible:focus,nv-tableheader:focus-visible:focus-within{outline:none}nv-tableheader:focus-visible:focus-visible,nv-tableheader:focus-visible:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-tableheader:focus-visible{border-radius:var(--radius-rounded-sm)}nv-tableheader nv-iconbutton{transition:transform 120ms ease, opacity 120ms ease}nv-tableheader nv-iconbutton svg{transition:transform 240ms ease}nv-tableheader nv-iconbutton.is-none{opacity:0.5}nv-tableheader nv-iconbutton.is-desc svg{transform:rotate(180deg)}`;
|
|
9
9
|
|
|
10
10
|
const NvTableheader = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -62,7 +62,7 @@ const NvTableheader = class {
|
|
|
62
62
|
/****************************************************************************/
|
|
63
63
|
//#region RENDER
|
|
64
64
|
render() {
|
|
65
|
-
return (index.h(index.Host, { key: '
|
|
65
|
+
return (index.h(index.Host, { key: '95447cd8ccde74d09226bcdbf645eed309be0fa8', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, index.h("slot", { key: '4e26aa21f080cf23ce42fb72d6777463bd079991' }), this.sortable && (index.h("span", { key: '666254c197e97226d2f1c6830d1216b9457c4acc', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: '11b2de5c4c270740857094ec8a39f1d392d7246a', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
|
|
66
66
|
// prevent mousedown from selecting text
|
|
67
67
|
onMouseDown: (e) => e.preventDefault(), class: {
|
|
68
68
|
'is-none': this.sortDirection === 'none',
|
|
@@ -70,6 +70,6 @@ const NvTableheader = class {
|
|
|
70
70
|
} })))));
|
|
71
71
|
}
|
|
72
72
|
};
|
|
73
|
-
NvTableheader.style = nvTableheaderCss;
|
|
73
|
+
NvTableheader.style = nvTableheaderCss();
|
|
74
74
|
|
|
75
75
|
exports.nv_tableheader = NvTableheader;
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-BeFrXZol.js');
|
|
4
|
+
var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
|
|
5
|
+
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
6
|
+
require('@stencil/react-output-target/runtime');
|
|
7
|
+
require('react');
|
|
8
|
+
require('react-dom');
|
|
9
|
+
|
|
10
|
+
const nvToggleCss = () => `@charset "UTF-8";nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle label{align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-toggle label.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-toggle-border-default);background:var(--components-toggle-background-default)}nv-toggle .input-container input[type=checkbox]::after{content:"";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-toggle-shape-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-toggle-border-hover)}nv-toggle .input-container input[type=checkbox]:hover::after{background-color:var(--components-toggle-shape-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-toggle-border-default)}nv-toggle .input-container input[type=checkbox]:focus::after{background-color:var(--components-toggle-shape-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-toggle-background-default-checked);border-color:var(--components-toggle-border-default-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:"";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-toggle-shape-default-checked);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-toggle-background-default-checked);border-color:var(--components-toggle-border-default-checked)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-toggle-background-disabled);border-color:var(--components-toggle-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked{background:var(--components-toggle-background-disabled-checked);border-color:var(--components-toggle-border-disabled-checked)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-toggle-shape-disabled-checked)}@media print{nv-toggle .input-container input[type=checkbox]::after{content:"●";top:calc(50% - 3.5px);width:auto;height:auto;background:none;color:var(--components-toggle-border-default);font-size:calc(var(--form-toggle-switch-dot-default) * 3);line-height:1}nv-toggle .input-container input[type=checkbox]:checked{background:transparent;border-color:var(--components-toggle-border-default-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:"●";top:calc(50% - 3.5px);width:auto;height:auto;left:75%;background:none;color:var(--components-toggle-border-default-checked)}}nv-toggle .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:450;line-height:var(--form-description-line-height)}nv-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}`;
|
|
11
|
+
|
|
12
|
+
const NvToggle = class {
|
|
13
|
+
constructor(hostRef) {
|
|
14
|
+
index.registerInstance(this, hostRef);
|
|
15
|
+
this.checkedChanged = index.createEvent(this, "checkedChanged", 3);
|
|
16
|
+
/****************************************************************************/
|
|
17
|
+
//#region PROPERTIES
|
|
18
|
+
/**
|
|
19
|
+
* Sets the ID for the radio button’s input element and the for attribute of
|
|
20
|
+
* the associated label. If no ID is provided, a random one will be
|
|
21
|
+
* automatically generated to ensure unique identification, facilitating
|
|
22
|
+
* proper label association and accessibility.
|
|
23
|
+
*/
|
|
24
|
+
this.inputId = v4BdYh22OP.v4();
|
|
25
|
+
/**
|
|
26
|
+
* Hides the label visually while still keeping it available for screen
|
|
27
|
+
* readers.
|
|
28
|
+
*/
|
|
29
|
+
this.hideLabel = false;
|
|
30
|
+
/** Indicates whether the toggle is checked or not. */
|
|
31
|
+
this.checked = false;
|
|
32
|
+
/** Disables the toggle, preventing user interaction. */
|
|
33
|
+
this.disabled = false;
|
|
34
|
+
/**
|
|
35
|
+
* Sets the toggle to read-only, preventing user changes but still allowing
|
|
36
|
+
* focus and selection of text.
|
|
37
|
+
*/
|
|
38
|
+
this.readonly = false;
|
|
39
|
+
}
|
|
40
|
+
//#endregion EVENTS
|
|
41
|
+
/****************************************************************************/
|
|
42
|
+
//#region WATCHERS
|
|
43
|
+
/**
|
|
44
|
+
* Watches for changes to the checked state and emits the new value.
|
|
45
|
+
* @param {boolean} checked - The new value of the checked state.
|
|
46
|
+
*/
|
|
47
|
+
onCheckedChanged(checked) {
|
|
48
|
+
this.checkedChanged.emit(checked);
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* Listens for the change event on the toggle input element and updates the checked state.
|
|
52
|
+
* the checked state of the host elements.
|
|
53
|
+
* @param {Event} event - The change event.
|
|
54
|
+
*/
|
|
55
|
+
handleChange(event) {
|
|
56
|
+
const target = event.target;
|
|
57
|
+
if (target.type === 'checkbox' && target.id === this.inputId) {
|
|
58
|
+
if (this.readonly || this.disabled) {
|
|
59
|
+
event.preventDefault();
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
this.checked = target.checked;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
//#endregion WATCHERS
|
|
66
|
+
/****************************************************************************/
|
|
67
|
+
//#region RENDER
|
|
68
|
+
render() {
|
|
69
|
+
return (index.h(index.Host, { key: '38dd2a460c82599e2c2bfd6b039eafff0dc6fc67', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '4d6bf742f548cc5f92ae84497f12569d9680dcef', class: "input-container" }, index.h("input", { key: '97f54363c17cde48ec226680ee58da012e590b69', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), index.h("div", { key: 'e4576a0884f02731a3e6d2d20537cfabf411a8fe', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '4744036b0d1e73f350bbc4b6f6e7664bb9361d1e', htmlFor: this.inputId, class: clsxChV9xqsO.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '44a2aeb86c840246473bc47e0ba01269af77ef06', name: "label" }, this.label))), (this.description ||
|
|
70
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '6e5c3d1721c9db3cffd019c9274294c40793daf0', class: "description" }, index.h("slot", { key: '87c3d35c78ded085cd1ddb5b2874dfae7bd99842', name: "description" }, this.description))))));
|
|
71
|
+
}
|
|
72
|
+
static get formAssociated() { return true; }
|
|
73
|
+
get el() { return index.getElement(this); }
|
|
74
|
+
static get watchers() { return {
|
|
75
|
+
"checked": [{
|
|
76
|
+
"onCheckedChanged": 0
|
|
77
|
+
}]
|
|
78
|
+
}; }
|
|
79
|
+
};
|
|
80
|
+
NvToggle.style = nvToggleCss();
|
|
81
|
+
|
|
82
|
+
exports.nv_toggle = NvToggle;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-BeFrXZol.js');
|
|
4
|
+
require('@stencil/react-output-target/runtime');
|
|
5
|
+
require('react');
|
|
6
|
+
require('react-dom');
|
|
7
|
+
|
|
8
|
+
const nvTogglebuttonCss = () => `nv-togglebutton{display:inline-flex;justify-content:center;align-items:center}nv-togglebutton:focus-visible,nv-togglebutton:has(:focus-visible){z-index:1}nv-togglebutton[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-togglebutton[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-togglebutton[size=xs]{padding-top:calc(var(--togglegroup-xs-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-xs-button-padding-y) - var(--togglegroup-stroke));border-radius:var(--togglegroup-xs-button-radius);height:calc((var(--togglegroup-xs-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[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-togglebutton[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-togglebutton[size=sm]{padding-top:calc(var(--togglegroup-sm-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-sm-button-padding-y) - var(--togglegroup-stroke));border-radius:calc(var(--togglegroup-sm-button-radius) + 1px);height:calc((var(--togglegroup-sm-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[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-togglebutton[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-togglebutton[size=md]{padding-top:calc(var(--togglegroup-md-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-md-button-padding-y) - var(--togglegroup-stroke));border-radius:calc(var(--togglegroup-md-button-radius) + 1px);height:calc((var(--togglegroup-md-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[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-togglebutton[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-togglebutton[size=lg]{padding-top:calc(var(--togglegroup-lg-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-lg-button-padding-y) - var(--togglegroup-stroke));border-radius:calc(var(--togglegroup-lg-button-radius) + 1px);height:calc((var(--togglegroup-lg-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[emphasis=high]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-togglebutton[emphasis=high]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-togglebutton[emphasis=high]: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-togglebutton[emphasis=high]:focus,nv-togglebutton[emphasis=high]:focus-within{outline:none}nv-togglebutton[emphasis=high]:focus-visible,nv-togglebutton[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-togglebutton[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=high][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-togglebutton[emphasis=low]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-togglebutton[emphasis=low]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-togglebutton[emphasis=low]: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-togglebutton[emphasis=low]:focus,nv-togglebutton[emphasis=low]:focus-within{outline:none}nv-togglebutton[emphasis=low]:focus-visible,nv-togglebutton[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-togglebutton[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=low][active]:not([active=false]),nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}`;
|
|
9
|
+
|
|
10
|
+
const NvTogglebutton = class {
|
|
11
|
+
constructor(hostRef) {
|
|
12
|
+
index.registerInstance(this, hostRef);
|
|
13
|
+
this.toggled = index.createEvent(this, "toggled", 7);
|
|
14
|
+
/****************************************************************************/
|
|
15
|
+
//#region PROPERTIES
|
|
16
|
+
/**
|
|
17
|
+
* Determines how large or small the togglebutton appears, allowing for
|
|
18
|
+
* customization of the togglebutton's dimensions to fit different design
|
|
19
|
+
* specifications and user needs.
|
|
20
|
+
*/
|
|
21
|
+
this.size = 'md';
|
|
22
|
+
/**
|
|
23
|
+
* Prevents all interaction, rendering the toggle in a non-interactive state.
|
|
24
|
+
*/
|
|
25
|
+
this.disabled = false;
|
|
26
|
+
/**
|
|
27
|
+
* Whether the button is active or not. Will not toggle automatically but
|
|
28
|
+
* needs to be controlled externally.
|
|
29
|
+
*/
|
|
30
|
+
this.active = false;
|
|
31
|
+
/**
|
|
32
|
+
* Make it more or less visually prominent to users.
|
|
33
|
+
*/
|
|
34
|
+
this.emphasis = 'high';
|
|
35
|
+
//#endregion PROPERTIES
|
|
36
|
+
/****************************************************************************/
|
|
37
|
+
//#region METHODS
|
|
38
|
+
this.handleClick = () => {
|
|
39
|
+
if (this.disabled)
|
|
40
|
+
return;
|
|
41
|
+
this.toggled.emit({
|
|
42
|
+
value: this.value,
|
|
43
|
+
active: this.active,
|
|
44
|
+
});
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
//#endregion METHODS
|
|
48
|
+
/****************************************************************************/
|
|
49
|
+
//#region LISTENERS
|
|
50
|
+
handleKeyDown(event) {
|
|
51
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
52
|
+
event.preventDefault();
|
|
53
|
+
this.el.click();
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
//#endregion EVENTS
|
|
57
|
+
/****************************************************************************/
|
|
58
|
+
//#region RENDER
|
|
59
|
+
render() {
|
|
60
|
+
return (index.h(index.Host, { key: '4af1293d9eb69a3a20d8f30c6b2876c6c29ddc03', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '783fad27c525553cd404c1ffed0ae1305d330de8' })));
|
|
61
|
+
}
|
|
62
|
+
get el() { return index.getElement(this); }
|
|
63
|
+
};
|
|
64
|
+
NvTogglebutton.style = nvTogglebuttonCss();
|
|
65
|
+
|
|
66
|
+
exports.nv_togglebutton = NvTogglebutton;
|
package/dist/cjs/{nv-togglebuttongroup.entry-C0NLbsq7.js → nv-togglebuttongroup.entry-Bn_9DsdP.js}
RENAMED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BeFrXZol.js');
|
|
4
4
|
require('@stencil/react-output-target/runtime');
|
|
5
5
|
require('react');
|
|
6
6
|
require('react-dom');
|
|
7
7
|
|
|
8
|
-
const nvTogglebuttongroupCss =
|
|
8
|
+
const nvTogglebuttongroupCss = () => `nv-togglebuttongroup{display:flex;gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius);width:fit-content;padding:var(--togglegroup-lg-gap)}nv-togglebuttongroup[emphasis=high]{border:1px solid var(--components-togglegroup-high-border)}nv-togglebuttongroup[emphasis=low]{border:1px solid var(--components-togglegroup-low-border)}nv-togglebuttongroup[size=xs]{padding:calc(var(--togglegroup-xs-padding) - 1px);gap:var(--togglegroup-xs-gap);border-radius:var(--togglegroup-xs-radius);height:var(--togglegroup-xs-height)}nv-togglebuttongroup[size=sm]{padding:calc(var(--togglegroup-sm-padding) - 1px);gap:var(--togglegroup-sm-gap);border-radius:var(--togglegroup-sm-radius);height:var(--togglegroup-sm-height)}nv-togglebuttongroup[size=md]{padding:calc(var(--togglegroup-md-padding) - 1px);gap:var(--togglegroup-md-gap);border-radius:var(--togglegroup-md-radius);height:var(--togglegroup-md-height)}nv-togglebuttongroup[size=lg]{padding:calc(var(--togglegroup-lg-padding) - 1px);gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius);height:var(--togglegroup-lg-height)}`;
|
|
9
9
|
|
|
10
10
|
const NvTogglebuttongroup = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -112,7 +112,6 @@ const NvTogglebuttongroup = class {
|
|
|
112
112
|
onSizeChanged() {
|
|
113
113
|
this.setSizeToggleButtons();
|
|
114
114
|
}
|
|
115
|
-
/* eslint-disable nova/native-event-listener */
|
|
116
115
|
onToggled(event) {
|
|
117
116
|
event.stopPropagation();
|
|
118
117
|
const valueSet = new Set(this.value);
|
|
@@ -139,7 +138,6 @@ const NvTogglebuttongroup = class {
|
|
|
139
138
|
}
|
|
140
139
|
this.value = [...valueSet];
|
|
141
140
|
}
|
|
142
|
-
/* eslint-enable nova/native-event-listener */
|
|
143
141
|
//#endregion WATCHERS
|
|
144
142
|
/****************************************************************************/
|
|
145
143
|
//#region LIFECYCLE
|
|
@@ -158,15 +156,21 @@ const NvTogglebuttongroup = class {
|
|
|
158
156
|
/****************************************************************************/
|
|
159
157
|
//#region RENDER
|
|
160
158
|
render() {
|
|
161
|
-
return (index.h(index.Host, { key: '
|
|
159
|
+
return (index.h(index.Host, { key: '1116872815229d09e1e286dd1f12a9787218e207' }, index.h("slot", { key: 'fa5363ec707f38830065718b2423dd8493acdd4e' })));
|
|
162
160
|
}
|
|
163
161
|
get el() { return index.getElement(this); }
|
|
164
162
|
static get watchers() { return {
|
|
165
|
-
"value": [
|
|
166
|
-
|
|
167
|
-
|
|
163
|
+
"value": [{
|
|
164
|
+
"onValueChanged": 0
|
|
165
|
+
}],
|
|
166
|
+
"emphasis": [{
|
|
167
|
+
"onEmphasisChanged": 0
|
|
168
|
+
}],
|
|
169
|
+
"size": [{
|
|
170
|
+
"onSizeChanged": 0
|
|
171
|
+
}]
|
|
168
172
|
}; }
|
|
169
173
|
};
|
|
170
|
-
NvTogglebuttongroup.style = nvTogglebuttongroupCss;
|
|
174
|
+
NvTogglebuttongroup.style = nvTogglebuttongroupCss();
|
|
171
175
|
|
|
172
176
|
exports.nv_togglebuttongroup = NvTogglebuttongroup;
|