@nova-design-system/nova-react 3.23.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/events.utils-B6GgGra--01N__3wY.js +23 -0
- package/dist/cjs/generated/components.server.js +124 -58
- package/dist/cjs/{grow.animation-CvHGHBL4-DDIEYBK-.js → grow.animation-D7ep_aVl-BuXEDSK-.js} +0 -21
- package/dist/cjs/{i18n.utils-DOZbXX2L-BizoXo6c.js → i18n.utils-IlwlcG9l-ku0bScip.js} +14 -18
- package/dist/cjs/index-DUlunl9a.js +9696 -0
- package/dist/cjs/{nv-dialog.entry-O47Eol_7.js → index.esm-D3eWMME9-CG1TVKfu.js} +1 -296
- package/dist/cjs/index.js +5 -1
- package/dist/cjs/{nv-accordion-item.entry-B_l0-ux0.js → nv-accordion-item.entry-CqnjIt4R.js} +8 -7
- package/dist/cjs/{nv-accordion.entry-BX8_YuZF.js → nv-accordion.entry-Dx7FmGg_.js} +11 -14
- package/dist/cjs/{nv-alert.entry-DCWYR0OK.js → nv-alert.entry-BL3Pdcxd.js} +7 -6
- 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-BZaTKN_n.js → nv-buttongroup.entry-BM8CwXFK.js} +13 -7
- package/dist/cjs/{nv-calendar.entry-D9ESuu7C.js → nv-calendar.entry-CeKsMGOa.js} +39 -32
- package/dist/cjs/nv-col.entry-D-h2PGcz.js +38 -0
- package/dist/cjs/{nv-datagrid.entry-DcB5q2oC.js → nv-datagrid.entry-nOBIfqOS.js} +113 -255
- package/dist/cjs/{nv-datagridcolumn.entry-BhKOzXA6.js → nv-datagridcolumn.entry-BAzTU_KM.js} +2 -2
- package/dist/cjs/nv-dialog.entry-Bi2ZVSe2.js +299 -0
- package/dist/cjs/{nv-dialogfooter_2.entry-Dn16bI8a.js → nv-dialogfooter_2.entry-D6lzC-3S.js} +11 -29
- package/dist/cjs/nv-drawer.entry-Dp4AfBiF.js +445 -0
- package/dist/cjs/nv-drawerfooter_2.entry-DpWSsq6d.js +128 -0
- package/dist/cjs/nv-fieldcheckbox.entry-COA3LXnX.js +179 -0
- package/dist/cjs/{nv-fielddate.entry-B4P0U8QG.js → nv-fielddate.entry-B8r5RFXd.js} +20 -21
- package/dist/cjs/{nv-fielddaterange.entry-BORwYJ-k.js → nv-fielddaterange.entry-C6_Kq93P.js} +20 -19
- package/dist/cjs/{nv-fielddropdown.entry-DzBAIynY.js → nv-fielddropdown.entry-B2Dr5zHd.js} +51 -58
- package/dist/cjs/nv-fielddropdownitem.entry-DapivVnR.js +69 -0
- package/dist/cjs/{nv-fieldmultiselect.entry-DiqRreWh.js → nv-fieldmultiselect.entry-DSpQeiPx.js} +45 -49
- 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-CfWjQAd9.js +405 -0
- package/dist/cjs/{nv-fieldslider.entry-CozmnUfN.js → nv-fieldslider.entry-dDPcWUxs.js} +34 -16
- package/dist/cjs/nv-fieldtext.entry-Yaa-mkjJ.js +163 -0
- package/dist/cjs/{nv-fieldtextarea.entry-7UrKWDHg.js → nv-fieldtextarea.entry-Dp_l2pKZ.js} +18 -13
- package/dist/cjs/{nv-fieldtime.entry-DakOlLiO.js → nv-fieldtime.entry-CWxi4Uel.js} +38 -40
- package/dist/cjs/{nv-icon.entry-Db00kB2u.js → nv-icon.entry-Dci11W9S.js} +5 -5
- package/dist/cjs/nv-iconbutton_2.entry-A6FKFJT_.js +171 -0
- package/dist/cjs/{nv-menu.entry-CK2HdmBt.js → nv-menu.entry-BHaYP-9M.js} +11 -16
- 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-BeDmR-XC.js +176 -0
- 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-mLdLSp6n.js → nv-popover.entry-D2oFn9vL.js} +118 -46
- package/dist/cjs/nv-row.entry-hV1kxmrr.js +22 -0
- package/dist/cjs/{nv-sidebar.entry-inDVNJ4s.js → nv-sidebar.entry-BJrqJ8K7.js} +12 -8
- package/dist/cjs/nv-sidebarcontent.entry-CPfGF7nx.js +22 -0
- package/dist/cjs/{nv-sidebardivider.entry-D_yern0R.js → nv-sidebardivider.entry-D2wmzHCO.js} +4 -4
- package/dist/cjs/{nv-sidebarfooter.entry-Rkkn9TB_.js → nv-sidebarfooter.entry-C7fqCzjH.js} +4 -4
- package/dist/cjs/nv-sidebargroup.entry-qkXnxhs_.js +23 -0
- package/dist/cjs/{nv-sidebarheader.entry-CYpD_4pI.js → nv-sidebarheader.entry-DBsOmyQ0.js} +4 -4
- package/dist/cjs/{nv-sidebarlogo.entry-BgK03M1v.js → nv-sidebarlogo.entry-902Ht3UR.js} +4 -4
- package/dist/cjs/{nv-sidebarnavitem.entry-DglvcCOD.js → nv-sidebarnavitem.entry-CICrllp8.js} +11 -10
- package/dist/cjs/nv-sidebarnavsubitem.entry-Q9jjU_7D.js +35 -0
- package/dist/cjs/{nv-split.entry-mzg2F66T.js → nv-split.entry-BYIsE2wp.js} +51 -45
- package/dist/cjs/nv-stack.entry-DgE5ASGH.js +31 -0
- package/dist/cjs/{nv-table.entry-DkbNgxtI.js → nv-table.entry-DHXBu2n1.js} +9 -11
- package/dist/cjs/{nv-tableheader.entry-CRVFTQA-.js → nv-tableheader.entry-BijgOxcO.js} +5 -5
- 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-BYXX5ejg.js → nv-togglebuttongroup.entry-CzDI1XCr.js} +14 -11
- package/dist/cjs/nv-tooltip.entry-DPoUP9iL.js +56 -0
- package/dist/cjs/slide.animation-CmH5d1of-BZuw607U.js +90 -0
- package/dist/components/NvDatatable/NvDatatable.js +69 -32
- package/dist/generated/components.js +38 -0
- package/dist/generated/components.server.js +120 -58
- package/dist/types/components/NvDatatable/NvDatatable.d.ts +1 -1
- package/dist/types/components/NvDatatable/types.d.ts +13 -3
- package/dist/types/generated/components.d.ts +63 -43
- package/dist/types/generated/components.server.d.ts +63 -43
- package/package.json +2 -2
- package/dist/cjs/index-CtjeeUI-.js +0 -39617
- package/dist/cjs/nv-avatar.entry-C_xZD3Lp.js +0 -68
- package/dist/cjs/nv-badge_2.entry-JjqANStV.js +0 -213
- package/dist/cjs/nv-breadcrumb.entry-DQZDn6cm.js +0 -46
- package/dist/cjs/nv-breadcrumbs.entry-Bz0GjhY_.js +0 -21
- package/dist/cjs/nv-button.entry-Br1DH9Vj.js +0 -164
- package/dist/cjs/nv-col.entry-CfgPMMxS.js +0 -38
- package/dist/cjs/nv-fieldcheckbox.entry-Bx6ArV_b.js +0 -177
- package/dist/cjs/nv-fielddropdownitem.entry-C_17isWd.js +0 -73
- package/dist/cjs/nv-fieldnumber.entry-C9O4UPp3.js +0 -187
- package/dist/cjs/nv-fieldpassword.entry-BfVJNT0A.js +0 -165
- package/dist/cjs/nv-fieldradio.entry-CG22oETM.js +0 -103
- package/dist/cjs/nv-fieldselect.entry-BPQEtrv2.js +0 -397
- package/dist/cjs/nv-fieldtext.entry-BD-z01ru.js +0 -163
- package/dist/cjs/nv-iconbutton_2.entry-CaKCa8NT.js +0 -168
- package/dist/cjs/nv-menuitem.entry-mKMqCAdz.js +0 -60
- package/dist/cjs/nv-notification-bullet.entry-DtbjtFxs.js +0 -77
- package/dist/cjs/nv-notification.entry-CLb0gNu3.js +0 -262
- package/dist/cjs/nv-notificationcontainer.entry-Cijivlm6.js +0 -41
- package/dist/cjs/nv-row.entry-C2C94fcv.js +0 -22
- package/dist/cjs/nv-sidebarcontent.entry-DxoljE15.js +0 -22
- package/dist/cjs/nv-sidebargroup.entry-C1p9qqxr.js +0 -23
- package/dist/cjs/nv-sidebarnavsubitem.entry-Dt1jKmC-.js +0 -35
- package/dist/cjs/nv-stack.entry-nnvjTrBy.js +0 -31
- package/dist/cjs/nv-toggle.entry-oC9TVkr1.js +0 -80
- package/dist/cjs/nv-togglebutton.entry-BTWCzbS9.js +0 -67
- package/dist/cjs/nv-tooltip.entry-OJGxfJEh.js +0 -55
|
@@ -0,0 +1,22 @@
|
|
|
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 nvSidebarcontentCss = () => `nv-sidebarcontent{display:flex;flex-direction:column;flex:1;overflow-y:auto;overflow-x:hidden}`;
|
|
9
|
+
|
|
10
|
+
const NvSidebarcontent = class {
|
|
11
|
+
constructor(hostRef) {
|
|
12
|
+
index.registerInstance(this, hostRef);
|
|
13
|
+
}
|
|
14
|
+
/****************************************************************************/
|
|
15
|
+
//#region RENDER
|
|
16
|
+
render() {
|
|
17
|
+
return (index.h(index.Host, { key: '58412906cd2e7719c5bdd60f24a5d14c270068de', role: "list" }, index.h("slot", { key: 'cb10719b5baf8dfcacc970a2cc5b199883d91853' })));
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
NvSidebarcontent.style = nvSidebarcontentCss();
|
|
21
|
+
|
|
22
|
+
exports.nv_sidebarcontent = NvSidebarcontent;
|
package/dist/cjs/{nv-sidebardivider.entry-D_yern0R.js → nv-sidebardivider.entry-D2wmzHCO.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 nvSidebardividerCss =
|
|
8
|
+
const nvSidebardividerCss = () => `nv-sidebardivider{display:block;height:var(--sidebar-divider-size);background-color:var(--components-sidebar-divider)}`;
|
|
9
9
|
|
|
10
10
|
const NvSidebardivider = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -14,9 +14,9 @@ const NvSidebardivider = class {
|
|
|
14
14
|
/****************************************************************************/
|
|
15
15
|
//#region RENDER
|
|
16
16
|
render() {
|
|
17
|
-
return index.h(index.Host, { key: '
|
|
17
|
+
return index.h(index.Host, { key: '8784711ab19a337f7a0e14450765b816ea2bf400', role: "separator", "aria-orientation": "horizontal" });
|
|
18
18
|
}
|
|
19
19
|
};
|
|
20
|
-
NvSidebardivider.style = nvSidebardividerCss;
|
|
20
|
+
NvSidebardivider.style = nvSidebardividerCss();
|
|
21
21
|
|
|
22
22
|
exports.nv_sidebardivider = NvSidebardivider;
|
|
@@ -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 nvSidebarfooterCss =
|
|
8
|
+
const nvSidebarfooterCss = () => `nv-sidebarfooter{display:block;margin-top:auto}`;
|
|
9
9
|
|
|
10
10
|
const NvSidebarfooter = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -14,9 +14,9 @@ const NvSidebarfooter = class {
|
|
|
14
14
|
/****************************************************************************/
|
|
15
15
|
//#region RENDER
|
|
16
16
|
render() {
|
|
17
|
-
return (index.h(index.Host, { key: '
|
|
17
|
+
return (index.h(index.Host, { key: '0e41cf447ba7f4421dae314ffb6fa4da3a2c1c21' }, index.h("slot", { key: '7d05fa96a4354c8f2125d930dd64fc917de6a2dc' })));
|
|
18
18
|
}
|
|
19
19
|
};
|
|
20
|
-
NvSidebarfooter.style = nvSidebarfooterCss;
|
|
20
|
+
NvSidebarfooter.style = nvSidebarfooterCss();
|
|
21
21
|
|
|
22
22
|
exports.nv_sidebarfooter = NvSidebarfooter;
|
|
@@ -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-DglvcCOD.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) {
|
|
@@ -42,7 +42,7 @@ const NvSidebarnavitem = class {
|
|
|
42
42
|
if (this.isSidebarCollapsed) {
|
|
43
43
|
// Find the first link that is NOT inside subitems
|
|
44
44
|
const link = this.el.querySelector('.nv-sidebarnavitem-content a, :scope > a');
|
|
45
|
-
if (link
|
|
45
|
+
if (link?.href) {
|
|
46
46
|
// Check if click was directly on the link - if so, let it handle naturally
|
|
47
47
|
if (target.closest('a')) {
|
|
48
48
|
return;
|
|
@@ -119,10 +119,9 @@ const NvSidebarnavitem = class {
|
|
|
119
119
|
}
|
|
120
120
|
};
|
|
121
121
|
this.checkSidebarCollapsed = () => {
|
|
122
|
-
var _a;
|
|
123
122
|
const sidebar = this.el.closest('nv-sidebar');
|
|
124
123
|
const wasCollapsed = this.isSidebarCollapsed;
|
|
125
|
-
this.isSidebarCollapsed =
|
|
124
|
+
this.isSidebarCollapsed = sidebar?.hasAttribute('collapsed') ?? false;
|
|
126
125
|
// When sidebar collapse state changes, update active state based on subitems
|
|
127
126
|
if (wasCollapsed !== this.isSidebarCollapsed) {
|
|
128
127
|
this.updateActiveFromSubitems();
|
|
@@ -188,7 +187,7 @@ const NvSidebarnavitem = class {
|
|
|
188
187
|
//#region LIFECYCLE
|
|
189
188
|
componentWillLoad() {
|
|
190
189
|
// Check if there are sub-items in any slot
|
|
191
|
-
const subItems =
|
|
190
|
+
const subItems = this.el.querySelectorAll('nv-sidebarnavsubitem');
|
|
192
191
|
this.hasSubitems = subItems.length > 0;
|
|
193
192
|
// Move sub-items to the subitems slot
|
|
194
193
|
if (this.hasSubitems) {
|
|
@@ -270,7 +269,7 @@ const NvSidebarnavitem = class {
|
|
|
270
269
|
render() {
|
|
271
270
|
const showNotificationBullet = this.notificationCount !== undefined && this.notificationCount > 0;
|
|
272
271
|
const notificationSize = this.isSidebarCollapsed ? 'reduced' : 'default';
|
|
273
|
-
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 => {
|
|
274
273
|
// Only update ref and initialize if element changed or not yet initialized
|
|
275
274
|
if (el !== this.subitemsRef) {
|
|
276
275
|
this.subitemsRef = el;
|
|
@@ -285,13 +284,15 @@ const NvSidebarnavitem = class {
|
|
|
285
284
|
});
|
|
286
285
|
}
|
|
287
286
|
}
|
|
288
|
-
} }, index.h("slot", { key: '
|
|
287
|
+
} }, index.h("slot", { key: '6dd9e45df235d3dc45f7174c4da6cc4fd46833ca', name: "subitems" })))));
|
|
289
288
|
}
|
|
290
289
|
get el() { return index.getElement(this); }
|
|
291
290
|
static get watchers() { return {
|
|
292
|
-
"open": [
|
|
291
|
+
"open": [{
|
|
292
|
+
"onOpenChanged": 0
|
|
293
|
+
}]
|
|
293
294
|
}; }
|
|
294
295
|
};
|
|
295
|
-
NvSidebarnavitem.style = nvSidebarnavitemCss;
|
|
296
|
+
NvSidebarnavitem.style = nvSidebarnavitemCss();
|
|
296
297
|
|
|
297
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) {
|
|
@@ -38,7 +38,7 @@ const NvSplit = class {
|
|
|
38
38
|
this.startPos = 0;
|
|
39
39
|
this.startSizes = [];
|
|
40
40
|
// Handlers stored to be able to detach them
|
|
41
|
-
this.onDocMove = (
|
|
41
|
+
this.onDocMove = (e) => this.handleMouseMove(e);
|
|
42
42
|
this.onDocUp = () => this.stopDragging();
|
|
43
43
|
}
|
|
44
44
|
//#endregion
|
|
@@ -59,18 +59,20 @@ const NvSplit = class {
|
|
|
59
59
|
componentDidLoad() {
|
|
60
60
|
// Initialization (once)
|
|
61
61
|
this.ensureGutters();
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
62
|
+
// Defer applySizes to ensure CSS (margins, padding) is computed
|
|
63
|
+
requestAnimationFrame(() => {
|
|
64
|
+
this.applySizes();
|
|
65
|
+
this.positionGutters();
|
|
66
|
+
});
|
|
67
|
+
// Observer: reposition gutters when resized
|
|
65
68
|
this.ro = new ResizeObserver(() => this.positionGutters());
|
|
66
69
|
this.ro.observe(this.el);
|
|
67
70
|
window.addEventListener('resize', () => this.positionGutters());
|
|
68
71
|
}
|
|
69
72
|
disconnectedCallback() {
|
|
70
|
-
var _a;
|
|
71
73
|
// Security cleanup (in case a drag was in progress)
|
|
72
74
|
this.detachDocumentListeners();
|
|
73
|
-
|
|
75
|
+
this.ro?.disconnect();
|
|
74
76
|
this.ro = undefined;
|
|
75
77
|
}
|
|
76
78
|
//#endregion
|
|
@@ -118,13 +120,12 @@ const NvSplit = class {
|
|
|
118
120
|
* @returns {Promise<void>}
|
|
119
121
|
*/
|
|
120
122
|
async destroy() {
|
|
121
|
-
var _a;
|
|
122
123
|
this.sizes = [];
|
|
123
124
|
this.isDragging = false;
|
|
124
125
|
this.dragIndex = -1;
|
|
125
126
|
this.removeOwnGutters();
|
|
126
127
|
this.detachDocumentListeners();
|
|
127
|
-
|
|
128
|
+
this.ro?.disconnect();
|
|
128
129
|
}
|
|
129
130
|
//#endregion
|
|
130
131
|
/****************************************************************************/
|
|
@@ -199,15 +200,14 @@ const NvSplit = class {
|
|
|
199
200
|
this.sizes = Array(n).fill(100 / n);
|
|
200
201
|
}
|
|
201
202
|
panes.forEach((pane, i) => {
|
|
202
|
-
|
|
203
|
-
const size = Math.max(0, (_a = this.sizes[i]) !== null && _a !== void 0 ? _a : 100 / n);
|
|
204
|
-
// Flex-basis via flex shorthand (https://developer.mozilla.org/en-US/docs/Web/CSS/flex)
|
|
203
|
+
const size = Math.max(0, this.sizes[i] ?? 100 / n);
|
|
205
204
|
pane.style.flex = `0 0 ${size}%`;
|
|
206
205
|
pane.style.minWidth = '0';
|
|
207
206
|
pane.style.minHeight = '0';
|
|
208
|
-
pane.style.overflow = 'hidden';
|
|
207
|
+
pane.style.overflow = 'hidden';
|
|
209
208
|
pane.style.display = 'flex';
|
|
210
209
|
pane.style.flexDirection = 'column';
|
|
210
|
+
pane.style.boxSizing = 'border-box';
|
|
211
211
|
});
|
|
212
212
|
this.positionGutters();
|
|
213
213
|
}
|
|
@@ -229,7 +229,6 @@ const NvSplit = class {
|
|
|
229
229
|
* Positions the gutters based on the current sizes of the panes.
|
|
230
230
|
*/
|
|
231
231
|
positionGutters() {
|
|
232
|
-
var _a, _b;
|
|
233
232
|
const panes = this.getPanes();
|
|
234
233
|
const gutters = this.getOwnGutters();
|
|
235
234
|
if (panes.length <= 1 || gutters.length === 0)
|
|
@@ -237,7 +236,7 @@ const NvSplit = class {
|
|
|
237
236
|
const horizontal = this.direction === 'horizontal';
|
|
238
237
|
let cumPct = 0;
|
|
239
238
|
for (let i = 0; i < gutters.length; i++) {
|
|
240
|
-
const sizePct =
|
|
239
|
+
const sizePct = this.sizes?.[i] ?? 100 / panes.length;
|
|
241
240
|
cumPct += sizePct;
|
|
242
241
|
const g = gutters[i];
|
|
243
242
|
g.style.position = 'absolute';
|
|
@@ -246,68 +245,70 @@ const NvSplit = class {
|
|
|
246
245
|
g.style.top = '0';
|
|
247
246
|
g.style.bottom = '0';
|
|
248
247
|
g.style.height = '100%';
|
|
248
|
+
g.style.transform = 'translateX(-50%)';
|
|
249
249
|
}
|
|
250
250
|
else {
|
|
251
251
|
g.style.top = `${cumPct}%`;
|
|
252
252
|
g.style.left = '0';
|
|
253
253
|
g.style.right = '0';
|
|
254
254
|
g.style.width = '100%';
|
|
255
|
+
g.style.transform = 'translateY(-50%)';
|
|
255
256
|
}
|
|
256
257
|
}
|
|
257
258
|
}
|
|
258
259
|
/**
|
|
259
260
|
* Starts the dragging process.
|
|
260
|
-
* @param {MouseEvent}
|
|
261
|
+
* @param {MouseEvent} e - The mouse event.
|
|
261
262
|
* @param {number} index - The index of the gutter.
|
|
262
263
|
*/
|
|
263
|
-
startDragging(
|
|
264
|
+
startDragging(e, index) {
|
|
265
|
+
e.preventDefault();
|
|
264
266
|
this.isDragging = true;
|
|
265
267
|
this.dragIndex = index;
|
|
266
|
-
this.startPos = this.direction === 'horizontal' ?
|
|
268
|
+
this.startPos = this.direction === 'horizontal' ? e.clientX : e.clientY;
|
|
267
269
|
this.startSizes = [...this.sizes];
|
|
268
270
|
this.attachDocumentListeners();
|
|
271
|
+
this.sizesChanged.emit([...this.sizes]);
|
|
269
272
|
}
|
|
270
273
|
/**
|
|
271
274
|
* Handles the mouse movement during dragging.
|
|
272
|
-
* @param {MouseEvent}
|
|
275
|
+
* @param {MouseEvent} e - The mouse event.
|
|
273
276
|
*/
|
|
274
|
-
handleMouseMove(
|
|
275
|
-
var _a, _b, _c, _d;
|
|
277
|
+
handleMouseMove(e) {
|
|
276
278
|
if (!this.isDragging || this.dragIndex < 0)
|
|
277
279
|
return;
|
|
278
280
|
const panes = this.getPanes();
|
|
279
281
|
if (panes.length < 2)
|
|
280
282
|
return;
|
|
281
283
|
const rect = this.el.getBoundingClientRect();
|
|
282
|
-
|
|
283
|
-
const
|
|
284
|
-
const
|
|
285
|
-
const deltaPx = (this.direction === 'horizontal' ? ev.clientX : ev.clientY) -
|
|
286
|
-
this.startPos;
|
|
284
|
+
const horizontal = this.direction === 'horizontal';
|
|
285
|
+
const totalPx = Math.max(horizontal ? rect.width : rect.height, 1);
|
|
286
|
+
const deltaPx = (horizontal ? e.clientX : e.clientY) - this.startPos;
|
|
287
287
|
const deltaPct = (deltaPx / totalPx) * 100;
|
|
288
288
|
const i = this.dragIndex;
|
|
289
289
|
const j = i + 1;
|
|
290
|
-
|
|
291
|
-
|
|
290
|
+
const startLeft = this.startSizes[i];
|
|
291
|
+
const startRight = this.startSizes[j];
|
|
292
292
|
// minSizes (px) -> %
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
const k = targetSum / (pairSum || 1);
|
|
302
|
-
left *= k;
|
|
303
|
-
right *= k;
|
|
293
|
+
let minLeftPct = ((this.minSizes?.[i] ?? 0) / totalPx) * 100;
|
|
294
|
+
let minRightPct = ((this.minSizes?.[j] ?? 0) / totalPx) * 100;
|
|
295
|
+
const minSum = minLeftPct + minRightPct;
|
|
296
|
+
const availableSum = startLeft + startRight;
|
|
297
|
+
if (minSum > availableSum) {
|
|
298
|
+
const scale = availableSum / minSum;
|
|
299
|
+
minLeftPct *= scale;
|
|
300
|
+
minRightPct *= scale;
|
|
304
301
|
}
|
|
302
|
+
const minDelta = minLeftPct - startLeft;
|
|
303
|
+
const maxDelta = startRight - minRightPct;
|
|
304
|
+
const clampedDelta = Math.min(Math.max(deltaPct, minDelta), maxDelta);
|
|
305
|
+
const left = startLeft + clampedDelta;
|
|
306
|
+
const right = startRight - clampedDelta;
|
|
305
307
|
const next = [...this.startSizes];
|
|
306
308
|
next[i] = left;
|
|
307
309
|
next[j] = right;
|
|
308
310
|
this.sizes = next;
|
|
309
311
|
this.applySizes();
|
|
310
|
-
this.sizesChanged.emit([...this.sizes]);
|
|
311
312
|
this.positionGutters();
|
|
312
313
|
}
|
|
313
314
|
/**
|
|
@@ -319,19 +320,24 @@ const NvSplit = class {
|
|
|
319
320
|
this.isDragging = false;
|
|
320
321
|
this.dragIndex = -1;
|
|
321
322
|
this.detachDocumentListeners();
|
|
323
|
+
this.sizesChanged.emit([...this.sizes]);
|
|
322
324
|
}
|
|
323
325
|
//#endregion
|
|
324
326
|
/****************************************************************************/
|
|
325
327
|
//#region RENDER
|
|
326
328
|
render() {
|
|
327
|
-
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" })));
|
|
328
330
|
}
|
|
329
331
|
get el() { return index.getElement(this); }
|
|
330
332
|
static get watchers() { return {
|
|
331
|
-
"sizes": [
|
|
332
|
-
|
|
333
|
+
"sizes": [{
|
|
334
|
+
"onSizesChanged": 0
|
|
335
|
+
}],
|
|
336
|
+
"direction": [{
|
|
337
|
+
"onDirectionChanged": 0
|
|
338
|
+
}]
|
|
333
339
|
}; }
|
|
334
340
|
};
|
|
335
|
-
NvSplit.style = nvSplitCss;
|
|
341
|
+
NvSplit.style = nvSplitCss();
|
|
336
342
|
|
|
337
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;
|