@nova-design-system/nova-react 3.24.0 → 3.25.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 +80 -61
- package/dist/cjs/index-DUlunl9a.js +9696 -0
- package/dist/cjs/index.js +2 -1
- package/dist/cjs/{nv-accordion-item.entry-Bu1tAcCq.js → nv-accordion-item.entry-CqnjIt4R.js} +8 -7
- package/dist/cjs/{nv-accordion.entry-jWjLdX8w.js → nv-accordion.entry-Dx7FmGg_.js} +10 -8
- package/dist/cjs/{nv-alert.entry-E9ZJay_K.js → nv-alert.entry-BL3Pdcxd.js} +6 -4
- package/dist/cjs/nv-avatar.entry-2dFR4I9_.js +68 -0
- package/dist/cjs/nv-badge_2.entry-5FShR2Ax.js +218 -0
- package/dist/cjs/nv-breadcrumb.entry-Cfi32bBT.js +49 -0
- package/dist/cjs/nv-breadcrumbs.entry-BSgn3KUO.js +21 -0
- package/dist/cjs/nv-button.entry-BdQQ_LE7.js +166 -0
- package/dist/cjs/{nv-buttongroup.entry-CuZCRsnV.js → nv-buttongroup.entry-BM8CwXFK.js} +13 -7
- package/dist/cjs/{nv-calendar.entry-CT3mASW6.js → nv-calendar.entry-CeKsMGOa.js} +27 -10
- package/dist/cjs/nv-col.entry-D-h2PGcz.js +38 -0
- package/dist/cjs/{nv-datagrid.entry-CGCEhO8C.js → nv-datagrid.entry-nOBIfqOS.js} +47 -184
- package/dist/cjs/{nv-datagridcolumn.entry-Fsqc7CT_.js → nv-datagridcolumn.entry-BAzTU_KM.js} +2 -2
- package/dist/cjs/{nv-dialog.entry-B6OYcZxQ.js → nv-dialog.entry-Bi2ZVSe2.js} +19 -20
- package/dist/cjs/{nv-dialogfooter_2.entry-C4fP_n2-.js → nv-dialogfooter_2.entry-D6lzC-3S.js} +11 -29
- package/dist/cjs/{nv-drawer.entry-C5O4KvHU.js → nv-drawer.entry-Dp4AfBiF.js} +19 -19
- package/dist/cjs/{nv-drawerfooter_2.entry-C-reYJXG.js → nv-drawerfooter_2.entry-DpWSsq6d.js} +11 -29
- package/dist/cjs/nv-fieldcheckbox.entry-COA3LXnX.js +179 -0
- package/dist/cjs/{nv-fielddate.entry-dqZDBVmm.js → nv-fielddate.entry-B8r5RFXd.js} +15 -13
- package/dist/cjs/{nv-fielddaterange.entry-wNRasXky.js → nv-fielddaterange.entry-C6_Kq93P.js} +15 -13
- package/dist/cjs/{nv-fielddropdown.entry-BA15piWa.js → nv-fielddropdown.entry-B2Dr5zHd.js} +17 -15
- package/dist/cjs/nv-fielddropdownitem.entry-DapivVnR.js +69 -0
- package/dist/cjs/{nv-fieldmultiselect.entry-BWY5xOAd.js → nv-fieldmultiselect.entry-DSpQeiPx.js} +12 -8
- package/dist/cjs/nv-fieldnumber.entry-BwxR9sRr.js +189 -0
- package/dist/cjs/nv-fieldpassword.entry-BOSU-Skh.js +167 -0
- package/dist/cjs/nv-fieldradio.entry-ZFafNY5_.js +105 -0
- package/dist/cjs/{nv-fieldselect.entry-uUIZ6hmN.js → nv-fieldselect.entry-CfWjQAd9.js} +20 -12
- package/dist/cjs/{nv-fieldslider.entry-DnvmxxYY.js → nv-fieldslider.entry-dDPcWUxs.js} +33 -15
- package/dist/cjs/nv-fieldtext.entry-Yaa-mkjJ.js +163 -0
- package/dist/cjs/{nv-fieldtextarea.entry-DU2bWYeg.js → nv-fieldtextarea.entry-Dp_l2pKZ.js} +15 -9
- package/dist/cjs/{nv-fieldtime.entry-DlMNDTht.js → nv-fieldtime.entry-CWxi4Uel.js} +15 -9
- package/dist/cjs/{nv-icon.entry-CnUkRzaA.js → nv-icon.entry-Dci11W9S.js} +4 -4
- package/dist/cjs/nv-iconbutton_2.entry-A6FKFJT_.js +171 -0
- package/dist/cjs/{nv-menu.entry-Dc_FvIx7.js → nv-menu.entry-BHaYP-9M.js} +9 -13
- package/dist/cjs/nv-menuitem.entry-Cm1vvN25.js +59 -0
- package/dist/cjs/nv-notification-bullet.entry-DRlS3Ybc.js +76 -0
- package/dist/cjs/{nv-notification.entry-C3m5p5BL.js → nv-notification.entry-BeDmR-XC.js} +4 -4
- package/dist/cjs/nv-notificationcontainer.entry-C3p_87Dg.js +41 -0
- package/dist/cjs/nv-paginationtable.entry-BzEqQOBa.js +231 -0
- package/dist/cjs/{nv-popover.entry-B0c-2rO4.js → nv-popover.entry-D2oFn9vL.js} +105 -33
- package/dist/cjs/nv-row.entry-hV1kxmrr.js +22 -0
- package/dist/cjs/{nv-sidebar.entry-CiN813gQ.js → nv-sidebar.entry-BJrqJ8K7.js} +10 -6
- package/dist/cjs/nv-sidebarcontent.entry-CPfGF7nx.js +22 -0
- package/dist/cjs/{nv-sidebardivider.entry-B4EMyca5.js → nv-sidebardivider.entry-D2wmzHCO.js} +4 -4
- package/dist/cjs/{nv-sidebarfooter.entry-CHi4qOFe.js → nv-sidebarfooter.entry-C7fqCzjH.js} +4 -4
- package/dist/cjs/nv-sidebargroup.entry-qkXnxhs_.js +23 -0
- package/dist/cjs/{nv-sidebarheader.entry-_7ch0O3G.js → nv-sidebarheader.entry-DBsOmyQ0.js} +4 -4
- package/dist/cjs/{nv-sidebarlogo.entry-Ch9F-JnT.js → nv-sidebarlogo.entry-902Ht3UR.js} +4 -4
- package/dist/cjs/{nv-sidebarnavitem.entry-DVrafSMr.js → nv-sidebarnavitem.entry-CICrllp8.js} +9 -7
- package/dist/cjs/nv-sidebarnavsubitem.entry-Q9jjU_7D.js +35 -0
- package/dist/cjs/{nv-split.entry-0HTslRAX.js → nv-split.entry-BYIsE2wp.js} +10 -6
- package/dist/cjs/nv-stack.entry-DgE5ASGH.js +31 -0
- package/dist/cjs/{nv-table.entry-DH85n8Mc.js → nv-table.entry-DHXBu2n1.js} +4 -4
- package/dist/cjs/{nv-tableheader.entry-CKfocdxD.js → nv-tableheader.entry-BijgOxcO.js} +4 -4
- package/dist/cjs/nv-toggle.entry-CMI1WdvV.js +82 -0
- package/dist/cjs/nv-togglebutton.entry-DAPETEmF.js +66 -0
- package/dist/cjs/{nv-togglebuttongroup.entry-C0NLbsq7.js → nv-togglebuttongroup.entry-CzDI1XCr.js} +13 -9
- package/dist/cjs/nv-tooltip.entry-DPoUP9iL.js +56 -0
- package/dist/components/NvDatatable/NvDatatable.js +29 -8
- package/dist/generated/components.js +11 -0
- package/dist/generated/components.server.js +79 -61
- package/dist/types/components/NvDatatable/types.d.ts +5 -0
- package/dist/types/generated/components.d.ts +52 -46
- package/dist/types/generated/components.server.d.ts +52 -46
- package/package.json +2 -2
- 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-col.entry--pCxkaTh.js +0 -38
- 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-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
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-DUlunl9a.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: '44083339d01b3aedaa26340b6e13f8187e731359', role: "group", "aria-label": this.label }, this.label && index.h("div", { key: '847d06e57d9478e52c0041786ace2ed5891caf0a', class: "nv-sidebargroup-label" }, this.label), index.h("slot", { key: '7511c5bb39cbb64e7615ed32e33de40cf3157183' })));
|
|
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-DUlunl9a.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: 'ea659d39850f5024e27a5678bf465ff1e1fce5d5' }, index.h("slot", { key: 'd04813b173ecb718794b969c0b28c4e059ff7675' })));
|
|
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-DUlunl9a.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: 'bc083fb598f98c96f382a8bac65e89344dafba94' }, index.h("div", { key: '6c53e699495efd6dfa71512e21d645844fef178f', class: "nv-sidebarlogo-container" }, index.h("img", { key: 'e0baaddb610374eacd9b0bb63b4d07b63a2fc41a', src: logoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-full" }), index.h("img", { key: '508fa312a65f11bed1fe955db9553aa26f600e75', src: collapsedLogoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-collapsed" }), this.label && index.h("span", { key: '78e16fb552eea8a477d785e184e0c4bdbc43c4c6', 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-CICrllp8.js}
RENAMED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-DUlunl9a.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: '89dfabe76e3b309d8be7f32224ba9bf960afaa57', role: "listitem" }, index.h("div", { key: 'f953530dec5af473a9845eeefca3619d4cb58306', 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: '10853dd4ec6fff353bf893a206244baf6a6c47af', class: "nv-sidebarnavitem-icon" }, index.h("nv-icon", { key: '12362c99a8a799b564d30775073f549904399286', name: this.icon, size: "md" }), showNotificationBullet && this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: '04c48fbaba743faed9cc59f3b214bec61d1c196c', count: this.notificationCount, size: notificationSize, contrastingBorder: true })))), index.h("div", { key: 'eb7a19ff2e6bdfcf8b4c13a2bc1f381b3c148e2f', class: "nv-sidebarnavitem-content" }, index.h("slot", { key: '081686d517d863eef0ce243f208df58dd5f4fc54' })), index.h("div", { key: 'ae745270bdb4282aacb48b819589ef9c8d4e6819', class: "nv-sidebarnavitem-trailing" }, index.h("slot", { key: '38c312ea17afec572d310c976670ff8290a0b4fb', name: "trailing" }), showNotificationBullet && !this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: '887bfe50c260545cfbebca24160d5556cbe73ce2', count: this.notificationCount, size: notificationSize })), this.collapsible && (index.h("nv-icon", { key: '0078974c65b7a8fb11d796c29d291b7011c01e57', name: "chevron-down", size: "sm", class: "nv-sidebarnavitem-chevron" })))), this.collapsible && this.hasSubitems && (index.h("div", { key: 'bc9369aad6f4ac18e12abf3a1c5a283f18f3a258', 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: '6dd9e45df235d3dc45f7174c4da6cc4fd46833ca', 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-DUlunl9a.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: '633d2842e116a9de48d5638c3f85a390543f0d0b', role: "listitem", "aria-current": this.active ? 'page' : undefined }, index.h("div", { key: 'fb16e478af164c6bde7b6d79394e87c167b1490a', class: "nv-sidebarnavsubitem-indicator" }), index.h("div", { key: 'f4959009a6e027abe887b6236b4cd6d66dfe75e0', class: "nv-sidebarnavsubitem-content" }, index.h("slot", { key: '5f8d806af8307c81960c1adb6297630e8692fa83' })), index.h("div", { key: 'ab2c3cbcdeec6178e1a328b35a614501f62e5ca1', class: "nv-sidebarnavsubitem-trailing" }, index.h("slot", { key: '21669437e202532277def87f84e67876cadd1877', 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-DUlunl9a.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: '5419c070ac8e17c640987c5016c6cbd18cb12266', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: '4e9c7080adbd6e9efbf5807a517ff7002d540567', name: "pane" }), index.h("slot", { key: '910e3ffca9f3f12849f6d18ba8407c45153b7769', 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-DUlunl9a.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: '4aefa1b0d60c640edb266797c59e4311af87bd09', 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: '0521c6172ffb133a6e9f5ca216e13970b83e7de5' })));
|
|
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-DUlunl9a.js');
|
|
4
4
|
require('@stencil/react-output-target/runtime');
|
|
5
5
|
require('react');
|
|
6
6
|
require('react-dom');
|
|
@@ -178,7 +178,7 @@ function updateCellWidthFromResize(state, event, minWidth = TABLE_CONSTANTS.MIN_
|
|
|
178
178
|
setCellWidth(state.resizingCell, newWidth);
|
|
179
179
|
}
|
|
180
180
|
|
|
181
|
-
const nvTableCss =
|
|
181
|
+
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
182
|
|
|
183
183
|
const NvTable = class {
|
|
184
184
|
constructor(hostRef) {
|
|
@@ -234,10 +234,10 @@ const NvTable = class {
|
|
|
234
234
|
/****************************************************************************/
|
|
235
235
|
//#region RENDER
|
|
236
236
|
render() {
|
|
237
|
-
return (index.h(index.Host, { key: '
|
|
237
|
+
return (index.h(index.Host, { key: 'c6bb094eb2c2300af460f9acd91a8a5121958ded' }, index.h("slot", { key: 'de523656c119a6338558c48cf46ea25df9c446fd' })));
|
|
238
238
|
}
|
|
239
239
|
get host() { return index.getElement(this); }
|
|
240
240
|
};
|
|
241
|
-
NvTable.style = nvTableCss;
|
|
241
|
+
NvTable.style = nvTableCss();
|
|
242
242
|
|
|
243
243
|
exports.nv_table = NvTable;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-DUlunl9a.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: 'f704401884c7620a37c932f1aba53c5587e3c0c3', 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: 'e4fce0b4226dde922d621abf7fbf76efa6b0ceeb' }), this.sortable && (index.h("span", { key: '25cf7526f27eb5e4621434bdadcf169ef60811ab', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: '39745ade1343e6d1e339b4d451abc3a69d644913', 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-DUlunl9a.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 = () => `nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle label{align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-toggle label.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-toggle-border-default);background:var(--components-toggle-background-default)}nv-toggle .input-container input[type=checkbox]::after{content:"";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-toggle-shape-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-toggle-border-hover)}nv-toggle .input-container input[type=checkbox]:hover::after{background-color:var(--components-toggle-shape-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-toggle-border-default)}nv-toggle .input-container input[type=checkbox]:focus::after{background-color:var(--components-toggle-shape-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-toggle-background-default-checked);border-color:var(--components-toggle-border-default-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:"";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-toggle-shape-default-checked);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-toggle-background-default-checked);border-color:var(--components-toggle-border-default-checked)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-toggle-background-disabled);border-color:var(--components-toggle-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked{background:var(--components-toggle-background-disabled-checked);border-color:var(--components-toggle-border-disabled-checked)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-toggle-shape-disabled-checked)}nv-toggle .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:450;line-height:var(--form-description-line-height)}nv-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}`;
|
|
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: '1cc28405c1775d19366fd3a684a834e0ca82cf39', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: 'cc19babb308cb64a8ff359c68eff673d8486b694', class: "input-container" }, index.h("input", { key: '8222a1abe2196b4e943a7adf338df430df2728fe', 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: '46eddca130efc9e6abcef1d6b376281cc1e0544e', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'c9ccfd1fd1e3d896874984943158f9332a7c26b6', htmlFor: this.inputId, class: clsxChV9xqsO.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: 'cd657a7eff81775da798b211f1c0983f18ace953', name: "label" }, this.label))), (this.description ||
|
|
70
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'dee3823d764ff864b4f008a43bd0aa8c44b6db13', class: "description" }, index.h("slot", { key: '6dd3815bf94e766b3c3c43be72b6a86ed354987b', 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-DUlunl9a.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: '91a6205cf5e2dae56a7826c9882bf2899d31321c', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: 'deea1593ddc2083786e7ff05ce6eafa8daebbee3' })));
|
|
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-CzDI1XCr.js}
RENAMED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-DUlunl9a.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: '98d0fd8820da9b6a5911330a0396b66a911352f2' }, index.h("slot", { key: 'aa202371d4d63d127d69a6a199451f3c97a65c86' })));
|
|
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;
|