@nova-design-system/nova-react 3.0.0-beta.43 → 3.0.0-beta.45

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.
Files changed (81) hide show
  1. package/dist/cjs/{index-CinzsZ8D.js → index-S09Gr7Tw.js} +180 -218
  2. package/dist/cjs/index.js +1 -1
  3. package/dist/cjs/{nv-alert.entry-BVY_rxey.js → nv-alert.entry-DH8Qd2s2.js} +1 -1
  4. package/dist/cjs/{nv-avatar.entry-pREKtiv2.js → nv-avatar.entry-B3-elLZC.js} +1 -1
  5. package/dist/cjs/{nv-badge_2.entry-wDuiCwys.js → nv-badge_2.entry-D15EDzX0.js} +2 -2
  6. package/dist/cjs/{nv-base.entry-DwtTXK_n.js → nv-base.entry-D-_RUZTX.js} +1 -1
  7. package/dist/cjs/{nv-breadcrumb.entry-B0hIeE83.js → nv-breadcrumb.entry-DG49Nj1L.js} +2 -2
  8. package/dist/cjs/{nv-breadcrumbs.entry-Cq0LsIFs.js → nv-breadcrumbs.entry-BqJO5pbN.js} +1 -1
  9. package/dist/cjs/{nv-button.entry-DaSGnB1L.js → nv-button.entry-CN9kB98T.js} +6 -4
  10. package/dist/cjs/{nv-calendar.entry-BC6NDsVl.js → nv-calendar.entry-CMEgSU64.js} +6 -6
  11. package/dist/cjs/{nv-col.entry-DNUY559i.js → nv-col.entry-wcZ9HHAb.js} +1 -1
  12. package/dist/cjs/{nv-datagrid.entry-Cp8RCSEv.js → nv-datagrid.entry-GCLeN2qT.js} +32 -5
  13. package/dist/cjs/{nv-datagridcolumn.entry-CR9_1fsZ.js → nv-datagridcolumn.entry-lgIz71UU.js} +1 -1
  14. package/dist/cjs/{nv-dialog.entry-BjTJ5FFL.js → nv-dialog.entry-DfY0TaYp.js} +17 -13
  15. package/dist/cjs/{nv-dialogfooter_2.entry-DJkKzEgO.js → nv-dialogfooter_2.entry-OByWsulH.js} +6 -6
  16. package/dist/cjs/{nv-fieldcheckbox.entry-C0DmeqXD.js → nv-fieldcheckbox.entry-Bqpe9BK3.js} +2 -2
  17. package/dist/cjs/{nv-fielddate.entry-DRX2mfZL.js → nv-fielddate.entry-DJePv6tR.js} +1 -1
  18. package/dist/cjs/{nv-fielddaterange.entry-ka3JiDvT.js → nv-fielddaterange.entry--YC750sX.js} +1 -1
  19. package/dist/cjs/{nv-fielddropdown.entry-DUAKFYgw.js → nv-fielddropdown.entry-BPlTlc_S.js} +45 -75
  20. package/dist/cjs/{nv-fielddropdownitem.entry-BsbvJERH.js → nv-fielddropdownitem.entry-zwoGySum.js} +7 -9
  21. package/dist/cjs/{nv-fieldmultiselect.entry-DFr-ZICs.js → nv-fieldmultiselect.entry-Bg_v0LUF.js} +7 -49
  22. package/dist/cjs/{nv-fieldnumber.entry-ezdDvJh_.js → nv-fieldnumber.entry-BLNaq7yr.js} +1 -1
  23. package/dist/cjs/{nv-fieldpassword.entry-D4a8SnGr.js → nv-fieldpassword.entry-iSEdS5R8.js} +1 -1
  24. package/dist/cjs/{nv-fieldradio.entry-Co7WX2vI.js → nv-fieldradio.entry-Dov4vZkh.js} +1 -1
  25. package/dist/cjs/{nv-fieldselect.entry-sTbv_flF.js → nv-fieldselect.entry-NmpesarX.js} +1 -1
  26. package/dist/cjs/{nv-fieldtext.entry-DRPCH6Sf.js → nv-fieldtext.entry-r6oQajRS.js} +1 -1
  27. package/dist/cjs/{nv-fieldtextarea.entry-BwJCUiVW.js → nv-fieldtextarea.entry-CJ2yQkfi.js} +1 -1
  28. package/dist/cjs/{nv-fieldtime.entry-uU-IET2k.js → nv-fieldtime.entry-Bxoj6N53.js} +1 -1
  29. package/dist/cjs/nv-icon.entry-CWKRt8F0.js +79 -0
  30. package/dist/cjs/{nv-iconbutton_2.entry-Dx4usGkY.js → nv-iconbutton_2.entry-CnbscpNn.js} +1 -1
  31. package/dist/cjs/{nv-menu.entry-D3qvf_0H.js → nv-menu.entry-wC7oSruP.js} +1 -1
  32. package/dist/cjs/{nv-menuitem.entry-3t6TixM7.js → nv-menuitem.entry-BVSa1vrS.js} +1 -1
  33. package/dist/cjs/{nv-popover.entry-Bv6kuTK_.js → nv-popover.entry-ChP1we3l.js} +12 -10
  34. package/dist/cjs/{nv-row.entry-BPK1Li7w.js → nv-row.entry-D6FeFpzG.js} +1 -1
  35. package/dist/cjs/{nv-stack.entry-ByaO-0TJ.js → nv-stack.entry-zjJmztkO.js} +1 -1
  36. package/dist/cjs/{nv-table.entry-C7Hd57Iq.js → nv-table.entry-CGX0jsR3.js} +2 -2
  37. package/dist/cjs/{nv-tablecolumn.entry-BDCw_45v.js → nv-tablecolumn.entry-Cwdmo_RY.js} +1 -1
  38. package/dist/cjs/{nv-toggle.entry-BTqGH_H0.js → nv-toggle.entry-BvToMkI2.js} +2 -2
  39. package/dist/cjs/{nv-tooltip.entry-BDZfrLHv.js → nv-tooltip.entry-DZ7_lB-p.js} +2 -2
  40. package/dist/generated/components.js +3 -3
  41. package/dist/types/generated/components.d.ts +3 -5
  42. package/package.json +1 -1
  43. package/dist/cjs/index-C8UfzrMI.js +0 -26405
  44. package/dist/cjs/nv-alert.entry-8esWDUyU.js +0 -173
  45. package/dist/cjs/nv-avatar.entry-CO6bt4k6.js +0 -67
  46. package/dist/cjs/nv-badge_2.entry-xfXsesV0.js +0 -195
  47. package/dist/cjs/nv-base.entry-BO-6krwg.js +0 -71
  48. package/dist/cjs/nv-breadcrumb.entry-DTwjCmMI.js +0 -45
  49. package/dist/cjs/nv-breadcrumbs.entry-jn5hRjpQ.js +0 -20
  50. package/dist/cjs/nv-button.entry-DxzA6-My.js +0 -162
  51. package/dist/cjs/nv-calendar.entry-DKz-iBnp.js +0 -1036
  52. package/dist/cjs/nv-col.entry-X7jkNThH.js +0 -37
  53. package/dist/cjs/nv-datagrid.entry-DL-Fyo4l.js +0 -3671
  54. package/dist/cjs/nv-datagridcolumn.entry-CyTG5E7M.js +0 -18
  55. package/dist/cjs/nv-dialog.entry-Do_uALC6.js +0 -784
  56. package/dist/cjs/nv-dialogfooter_2.entry-DJ8qS9q6.js +0 -134
  57. package/dist/cjs/nv-fieldcheckbox.entry-DoGQX-5D.js +0 -137
  58. package/dist/cjs/nv-fielddate.entry-D-PjbYaA.js +0 -278
  59. package/dist/cjs/nv-fielddaterange.entry-BrC5jKLp.js +0 -355
  60. package/dist/cjs/nv-fielddropdown.entry-MsUR1kVe.js +0 -391
  61. package/dist/cjs/nv-fielddropdownitem.entry-DRM-Zljt.js +0 -70
  62. package/dist/cjs/nv-fieldmultiselect.entry-Dr8FfT_W.js +0 -1060
  63. package/dist/cjs/nv-fieldnumber.entry-DZsM1vmO.js +0 -126
  64. package/dist/cjs/nv-fieldpassword.entry-Biw__M2W.js +0 -115
  65. package/dist/cjs/nv-fieldradio.entry-ZL7KgEZ7.js +0 -102
  66. package/dist/cjs/nv-fieldselect.entry-D6eRsM9T.js +0 -365
  67. package/dist/cjs/nv-fieldtext.entry-DKdxC2cG.js +0 -119
  68. package/dist/cjs/nv-fieldtextarea.entry-Dc_TGlmI.js +0 -194
  69. package/dist/cjs/nv-fieldtime.entry-CXRtpWt1.js +0 -1011
  70. package/dist/cjs/nv-icon.entry-iipuvT3D.js +0 -79
  71. package/dist/cjs/nv-icon.entry-xltjoSa2.js +0 -79
  72. package/dist/cjs/nv-iconbutton_2.entry-BsXvYbCi.js +0 -163
  73. package/dist/cjs/nv-menu.entry-DFEYw_KZ.js +0 -227
  74. package/dist/cjs/nv-menuitem.entry-BeTXOtir.js +0 -58
  75. package/dist/cjs/nv-popover.entry-Zt25YeAv.js +0 -1960
  76. package/dist/cjs/nv-row.entry-Bwzlub3i.js +0 -21
  77. package/dist/cjs/nv-stack.entry-bhess4lQ.js +0 -30
  78. package/dist/cjs/nv-table.entry-D3U4dFcw.js +0 -338
  79. package/dist/cjs/nv-tablecolumn.entry-BzwWPlLf.js +0 -18
  80. package/dist/cjs/nv-toggle.entry-DXpNGkbz.js +0 -79
  81. package/dist/cjs/nv-tooltip.entry-CvCZZV88.js +0 -44
@@ -1,134 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-C8UfzrMI.js');
4
- var constants98e2dcc2 = require('./constants-98e2dcc2-C0SBCapP.js');
5
- require('react');
6
-
7
- const nvDialogfooterCss = "nv-dialogfooter{display:flex;padding:var(--dialog-footer-padding-top) var(--dialog-footer-padding-x) var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);justify-content:flex-end;align-items:flex-end;gap:var(--dialog-footer-gap-y);align-self:stretch}";
8
- const NvDialogfooterStyle0 = nvDialogfooterCss;
9
-
10
- const NvDialogfooter = class {
11
- constructor(hostRef) {
12
- index.registerInstance(this, hostRef);
13
- this.nvDialogCanceled = index.createEvent(this, "nvDialogCanceled");
14
- this.nvDialogPrimaryClicked = index.createEvent(this, "nvDialogPrimaryClicked");
15
- if (hostRef.$hostElement$["s-ei"]) {
16
- this.internals = hostRef.$hostElement$["s-ei"];
17
- }
18
- else {
19
- this.internals = hostRef.$hostElement$.attachInternals();
20
- hostRef.$hostElement$["s-ei"] = this.internals;
21
- }
22
- this.hasSlot = false;
23
- /****************************************************************************/
24
- //#region PROPERTIES
25
- /**
26
- * Disables the primary button, preventing user interaction.
27
- */
28
- this.disabled = false;
29
- /**
30
- * Controls the visibility of the cancel button. When true, the cancel button is
31
- * hidden.
32
- */
33
- this.undismissable = false;
34
- /**
35
- * Sets the leading icon for the primary button.
36
- */
37
- this.leadingIcon = '';
38
- /**
39
- * Sets the trailing icon for the primary button.
40
- */
41
- this.trailingIcon = '';
42
- /**
43
- * Sets the danger state for the primary button.
44
- */
45
- this.danger = false;
46
- /**
47
- * Sets the label for the cancel button.
48
- */
49
- this.cancelLabel = 'Cancel';
50
- /**
51
- * Sets the label for the primary button.
52
- */
53
- this.primaryLabel = 'Primary';
54
- /**
55
- * Sets the type of the primary button.
56
- */
57
- this.primaryButtonType = constants98e2dcc2.ButtonType.Button;
58
- //#endregion EVENTS
59
- /****************************************************************************/
60
- //#region METHODS
61
- /**
62
- * Handles the primary action when the primary button is clicked.
63
- * @param {Event} event - The click event.
64
- */
65
- this.handlePrimary = (event) => {
66
- event.stopPropagation();
67
- this.nvDialogPrimaryClicked.emit();
68
- };
69
- /**
70
- * Handles the cancel action when the cancel button is clicked. This will close the dialog.
71
- * @param {Event} event - The click event.
72
- */
73
- this.handleCancel = (event) => {
74
- event.stopPropagation();
75
- this.nvDialogCanceled.emit();
76
- };
77
- }
78
- //#endregion METHODS
79
- /****************************************************************************/
80
- //#region LIFECYCLE
81
- componentWillLoad() {
82
- // Check if there are any child elements that don't have a slot attribute
83
- this.hasSlot = Array.from(this.el.childNodes).some(node => {
84
- return (node.nodeType === Node.ELEMENT_NODE &&
85
- !node.hasAttribute('slot'));
86
- });
87
- }
88
- //#endregion LIFECYCLE
89
- /****************************************************************************/
90
- //#region RENDER
91
- render() {
92
- return (index.h(index.Host, { key: 'b291c31883ea841708e5b318248b2a81695eda6d' }, !this.hasSlot ? (index.h(index.Fragment, null, !this.undismissable && (index.h("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), index.h("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (index.h("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (index.h("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (index.h("slot", null))));
93
- }
94
- static get formAssociated() { return true; }
95
- get el() { return index.getElement(this); }
96
- };
97
- NvDialogfooter.style = NvDialogfooterStyle0;
98
-
99
- const nvDialogheaderCss = "nv-dialogheader{padding:var(--dialog-header-padding-top) var(--dialog-header-padding-x) var(--dialog-header-padding-bottom) var(--dialog-header-padding-x);justify-content:space-between;align-items:flex-start;align-self:stretch}nv-dialogheader .heading{color:var(--color-content-high-text);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--font-size-lg);font-style:normal;font-weight:500;line-height:var(--leading-px-6);letter-spacing:var(--letter-spacing-heading-xs)}nv-dialogheader .subheading{color:var(--color-content-low-text);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--font-size-sm);font-style:normal;font-weight:400;line-height:var(--line-height-sm);}";
100
- const NvDialogheaderStyle0 = nvDialogheaderCss;
101
-
102
- const NvDialogheader = class {
103
- constructor(hostRef) {
104
- index.registerInstance(this, hostRef);
105
- this.hasSlot = false;
106
- /****************************************************************************/
107
- //#region PROPERTIES
108
- /**
109
- * Sets the heading text for the dialog.
110
- */
111
- this.heading = 'Dialog Title';
112
- }
113
- //#endregion PROPERTIES
114
- /****************************************************************************/
115
- //#region LIFECYCLE
116
- componentWillLoad() {
117
- // Check if there are any child elements that don't have a slot attribute
118
- this.hasSlot = Array.from(this.el.childNodes).some(node => {
119
- return (node.nodeType === Node.ELEMENT_NODE &&
120
- !node.hasAttribute('slot'));
121
- });
122
- }
123
- //#endregion LIFECYCLE
124
- /****************************************************************************/
125
- //#region RENDER
126
- render() {
127
- return (index.h(index.Host, { key: '57c18e06633951d2d82006d5b28cf863e9414bf4' }, !this.hasSlot ? (index.h(index.Fragment, null, index.h("div", { class: "heading" }, this.heading), index.h("div", { class: "subheading" }, this.subheading))) : (index.h("slot", null))));
128
- }
129
- get el() { return index.getElement(this); }
130
- };
131
- NvDialogheader.style = NvDialogheaderStyle0;
132
-
133
- exports.nv_dialogfooter = NvDialogfooter;
134
- exports.nv_dialogheader = NvDialogheader;
@@ -1,137 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-C8UfzrMI.js');
4
- var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
5
- var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
6
- require('react');
7
-
8
- const nvFieldcheckboxCss = "nv-fieldcheckbox{--nv-fieldcheckbox-border-default:var(\n --components-form-field-border-default\n );--nv-fieldcheckbox-border-hover:var(--components-form-field-border-hover);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-default);--nv-fieldcheckbox-background-default:var(\n --components-form-field-background-default\n );--nv-fieldcheckbox-background-checked:var(\n --components-form-field-background-checked\n );--nv-fieldcheckbox-background-disabled:var(\n --components-form-field-background-disabled\n );--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-brand);--nv-fieldcheckbox-color-checked:var(\n --components-form-shape-foreground-default\n );--nv-fieldcheckbox-color-disabled:var(\n --components-form-shape-foreground-disabled\n );--nv-fieldcheckbox-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-fieldcheckbox:not([disabled],[readonly]) input,nv-fieldcheckbox:not([disabled],[readonly]) label{cursor:pointer}nv-fieldcheckbox.error>.input-container{--nv-fieldcheckbox-border-default:var(--components-form-field-border-error);--nv-fieldcheckbox-border-hover:var(--nv-fieldcheckbox-border-default);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-error);--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-destructive);--nv-fieldcheckbox-color-disabled:var(\n --components-form-shape-foreground-disabled-error\n );--nv-fieldcheckbox-background-checked:var(\n --components-form-field-background-error\n );--nv-fieldcheckbox-outline-color:var(--color-focus-destructive)}nv-fieldcheckbox.label-placement-before{flex-direction:row-reverse}nv-fieldcheckbox[disabled]:not([disabled=false]){opacity:0.5}nv-fieldcheckbox>.input-container{position:relative;color:var(--nv-fieldcheckbox-color-checked)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-fieldcheckbox-color-disabled)}nv-fieldcheckbox>.input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-fieldcheckbox-border-default);background:var(--nv-fieldcheckbox-background-default)}nv-fieldcheckbox>.input-container input[type=checkbox]:hover{border-color:var(--nv-fieldcheckbox-border-hover)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus{border-color:var(--nv-fieldcheckbox-border-focus)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus,nv-fieldcheckbox>.input-container input[type=checkbox]:focus-within{outline:none}nv-fieldcheckbox>.input-container input[type=checkbox]:focus-visible,nv-fieldcheckbox>.input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-fieldcheckbox-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldcheckbox>.input-container input[type=checkbox]:checked,nv-fieldcheckbox>.input-container input[type=checkbox]:indeterminate{background:var(--nv-fieldcheckbox-background-checked);border-color:var(--nv-fieldcheckbox-background-checked)}nv-fieldcheckbox>.input-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-fieldcheckbox-background-disabled);border-color:var(--nv-fieldcheckbox-border-default)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-fieldcheckbox>.input-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}nv-fieldcheckbox>.text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}nv-fieldcheckbox>.text-container label{align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--form-label-font-weight);line-height:var(--form-label-line-height)}nv-fieldcheckbox>.text-container .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height)}nv-fieldcheckbox>.text-container .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
9
- const NvFieldcheckboxStyle0 = nvFieldcheckboxCss;
10
-
11
- const NvFieldcheckbox = class {
12
- constructor(hostRef) {
13
- index.registerInstance(this, hostRef);
14
- this.checkedChanged = index.createEvent(this, "checkedChanged");
15
- /**
16
- * When true, the label will be placed before the checkbox.
17
- * @deprecated Use `labelPlacement = end` instead.
18
- * */
19
- this.labelBefore = false;
20
- //#endregion DEPRECATED
21
- /****************************************************************************/
22
- //#region PROPERTIES
23
- /**
24
- * Sets the ID for the radio button’s input element and the for attribute of
25
- * the associated label. If no ID is provided, a random one will be
26
- * automatically generated to ensure unique identification, facilitating
27
- * proper label association and accessibility.
28
- */
29
- this.inputId = v4A79185f4.v4();
30
- /**
31
- * Hides the label visually while still keeping it available for screen
32
- * readers.
33
- */
34
- this.hideLabel = false;
35
- /**
36
- * Signals that there is an error associated with the checkbox, which can
37
- * trigger visual cues.
38
- * @validator error
39
- */
40
- this.error = false;
41
- /**
42
- * Indicates whether the checkbox is checked or not.
43
- */
44
- this.checked = false;
45
- /**
46
- * Indicates whether the checkbox is in an indeterminate state, typically used
47
- * for hierarchical checkboxes.
48
- */
49
- this.indeterminate = false;
50
- /**
51
- * Disables the checkbox, preventing user interaction.
52
- */
53
- this.disabled = false;
54
- /**
55
- * Sets the checkbox to read-only, preventing user changes but still allowing
56
- * focus and selection of text.
57
- */
58
- this.readonly = false;
59
- /**
60
- * Marks the checkbox as required, indicating that it must be checked for
61
- * form submission.
62
- */
63
- this.required = false;
64
- /**
65
- * Applies focus to the input field as soon as the component is mounted. This
66
- * is equivalent to setting the native autofocus attribute on an <input>
67
- * element.
68
- */
69
- this.autofocus = false;
70
- }
71
- //#endregion EVENTS
72
- /****************************************************************************/
73
- //#region LISTENERS
74
- /**
75
- * Listens for the change event on the checkbox input element and updates the
76
- * checked state.
77
- * @param {Event} event - The change event.
78
- */
79
- handleChange(event) {
80
- const target = event.target;
81
- if (target.type === 'checkbox' && target.id === this.inputId) {
82
- if (this.readonly || this.disabled) {
83
- event.preventDefault();
84
- return;
85
- }
86
- if (this.indeterminate) {
87
- this.indeterminate = false;
88
- }
89
- this.checked = target.checked;
90
- }
91
- }
92
- //#endregion LISTENERS
93
- /****************************************************************************/
94
- //#region WATCHERS
95
- /**
96
- * Watches for changes to the checked state and emits the new value.
97
- * @param {boolean} checked - The new value of the checked state.
98
- */
99
- onCheckedChanged(checked) {
100
- this.checkedChanged.emit(checked);
101
- }
102
- //#endregion WATCHERS
103
- /****************************************************************************/
104
- //#region LIFECYCLE
105
- componentWillRender() {
106
- if (this.message) {
107
- this.description = this.message;
108
- }
109
- if (this.labelBefore) {
110
- this.labelPlacement = 'before';
111
- }
112
- if (this.validation) {
113
- this.errorDescription = this.validation;
114
- this.error = true;
115
- }
116
- }
117
- //#endregion LIFECYCLE
118
- /****************************************************************************/
119
- //#region RENDER
120
- render() {
121
- return (index.h(index.Host, { key: '6fd28954984db7abe74c9c827ab2c183be2b0b43', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("div", { key: '95e06aed85655df76f49da2ae2e9226070574e4a', class: "input-container" }, index.h("input", { key: 'f19d8f746fa4f87038549e3952ce77fa18aa8cd7', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
122
- if (el) {
123
- el.indeterminate = this.indeterminate;
124
- }
125
- } }), index.h("span", { key: '2b8219210c10dc78fa3b6c1170ec1f2e266885ad', class: "icon" }, this.checked && !this.indeterminate && (index.h("slot", { key: '930508585db44cf275e00dcf982c74cc7027ab07', name: "checked-icon" }, index.h("svg", { key: '239b8996bcf8cbc7a92b8936cafdaa8e52924bfe', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: 'c9771fe1a7496c6db893a8a42ae88801a8f5517a', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (index.h("slot", { key: '429b610c49394715ff6650c0271617d763861f17', name: "indeterminate-icon" }, index.h("svg", { key: 'd2f042295e7b7a7a780b2034bebee5897eb5d0cf', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '3a3aabe203887e2ddf198f1b27c1a1f36baa9c1b', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("div", { key: 'f3ce64d695ffb4ae2ac5776c696a16ff634a7554', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '28682a4ce85309caddca1404e4a24b92effab9be', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '42a33d753120a06d2f974a9a8fdfd47cf696e610', name: "label" }, this.label))), (this.description ||
126
- this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '036b2dfcbd0b0d97d8fa0f662d286c0409ccb84c', class: "description" }, index.h("slot", { key: 'fdf2b60f107025c91d1db343cf8a55957adcf1e2', name: "description" }, this.description))), (this.errorDescription ||
127
- this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '1a9bdeb00883256471097ea4b1f5859cb6c7e9c0', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'daa6997b0773d0b7b585e2c33a70d8c147e34c2e', name: "error-description" }, this.errorDescription))))));
128
- }
129
- static get formAssociated() { return true; }
130
- get el() { return index.getElement(this); }
131
- static get watchers() { return {
132
- "checked": ["onCheckedChanged"]
133
- }; }
134
- };
135
- NvFieldcheckbox.style = NvFieldcheckboxStyle0;
136
-
137
- exports.nv_fieldcheckbox = NvFieldcheckbox;
@@ -1,278 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-C8UfzrMI.js');
4
- var inputmaskEdcad3c1 = require('./inputmask-edcad3c1-B9Omti4z.js');
5
- var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
6
- require('react');
7
- require('./_commonjsHelpers-1789f0cf-BJu3ubxk.js');
8
-
9
- const nvFielddateCss = "nv-fielddate{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fielddate[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddate[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fielddate[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fielddate[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddate label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fielddate nv-popover{width:100%;display:block}nv-fielddate nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto}nv-fielddate nv-popover [slot=content]{display:block;width:100%}nv-fielddate .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;display:flex;align-items:center;gap:8px}nv-fielddate .input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fielddate .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddate .input-wrapper .input-container:focus-within,nv-fielddate .input-wrapper .input-container:focus-within:hover,nv-fielddate .input-wrapper .input-container:focus,nv-fielddate .input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddate .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddate .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddate .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%}nv-fielddate .input-wrapper .input-container input:focus{outline:none}nv-fielddate .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddate .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddate .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddate .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddate .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddate .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
10
- const NvFielddateStyle0 = nvFielddateCss;
11
-
12
- const NvFielddate = class {
13
- constructor(hostRef) {
14
- index.registerInstance(this, hostRef);
15
- this.dateChange = index.createEvent(this, "dateChange");
16
- this.popoverId = v4A79185f4.v4();
17
- /****************************************************************************/
18
- //#region PROPERTIES
19
- /**
20
- * Sets the ID for the input element and the for attribute of the associated
21
- * label. If no ID is provided, a random one will be automatically generated.
22
- */
23
- this.inputId = v4A79185f4.v4();
24
- /**
25
- * Disables the input field.
26
- */
27
- this.disabled = false;
28
- /**
29
- * Sets the input field as read-only.
30
- */
31
- this.readonly = false;
32
- /**
33
- * Marks the input field as required.
34
- */
35
- this.required = false;
36
- /**
37
- * Indicates an error state.
38
- */
39
- this.error = false;
40
- /**
41
- * Indicates a success state.
42
- */
43
- this.success = false;
44
- /**
45
- * Autofocus the input when the component is mounted.
46
- */
47
- this.autofocus = false;
48
- /**
49
- * The initial value of the input (date in string format).
50
- */
51
- this.value = '';
52
- /**
53
- * The current value of the input date in string format.
54
- */
55
- this.singleValue = '';
56
- /**
57
- * Controls the opening of the popover.
58
- */
59
- this.open = false;
60
- /**
61
- * First day of the week 0 = Sunday, 1 = Monday, etc.
62
- * @default 1
63
- */
64
- this.firstDayOfWeek = 1;
65
- /**
66
- * Number of calendars to display
67
- * @default 1
68
- */
69
- this.numberOfCalendars = 1;
70
- /**
71
- * Minimum date for selection ISO string format, ex: 2025-01-01
72
- */
73
- this.min = '';
74
- /**
75
- * Maximum date for selection ISO string format, ex: 2025-12-31
76
- */
77
- this.max = '';
78
- /** Locale for date formatting
79
- * @default 'en-BE'
80
- */
81
- this.locale = 'en-BE';
82
- /** Date format ex: YYYY-MM-DD, DD-MM-YYYY, etc.
83
- * @default 'YYYY-MM-DD'
84
- * @note If the date format is in UTC mode, the date will be displayed in UTC time.
85
- * @note If the date format is not in UTC mode, the date will be displayed in the local time.
86
- */
87
- this.dateFormat = 'YYYY-MM-DD';
88
- /**
89
- * Footer placement
90
- * @default 'bottom'
91
- */
92
- this.shortcutsPlacement = 'bottom';
93
- /**
94
- * Show action buttons
95
- * @default false
96
- */
97
- this.showActions = false;
98
- /**
99
- * Custom actions to display in the footer
100
- * JSON array of objects with the following properties:
101
- * - label: string
102
- * - onClick: function
103
- * @default '[]'
104
- */
105
- this.shortcuts = '[]';
106
- /**
107
- * Disabled dates ISO string array
108
- * @default '[]'
109
- */
110
- this.disabledDates = '[]';
111
- /**
112
- * Closes the popover when a click is detected outside the component.
113
- * @param {MouseEvent} event - The click event.
114
- */
115
- this.handleClickOutside = (event) => {
116
- if (this.open && this.el && !this.el.contains(event.target)) {
117
- this.open = false;
118
- }
119
- };
120
- /**
121
- * Focuses the input when the input container is clicked.
122
- * @param {MouseEvent} event - The click event.
123
- */
124
- this.handleInputContainerClick = (event) => {
125
- if (this.readonly || this.disabled) {
126
- event.preventDefault();
127
- event.stopPropagation();
128
- return;
129
- }
130
- this.inputElement.focus();
131
- // Select the first characters based on the date format
132
- const format = this.dateFormat;
133
- if (format.startsWith('DD')) {
134
- this.inputElement.setSelectionRange(0, 2);
135
- }
136
- else if (format.startsWith('MM')) {
137
- this.inputElement.setSelectionRange(0, 2);
138
- }
139
- else if (format.startsWith('YYYY')) {
140
- this.inputElement.setSelectionRange(0, 4);
141
- }
142
- };
143
- /**
144
- * Handles the input event on the input element.
145
- * Updates the singleValue and emits the dateChange event.
146
- * @param {Event} event - The input event.
147
- */
148
- this.handleInput = (event) => {
149
- if (this.readonly || this.disabled) {
150
- event.preventDefault();
151
- return;
152
- }
153
- const input = event.target;
154
- this.singleValue = input.value;
155
- this.dateChange.emit({ value: input.value });
156
- };
157
- /**
158
- * Toggles the opening/closing of the popover.
159
- */
160
- this.toggleCalendar = () => {
161
- if (this.readonly || this.disabled) {
162
- return;
163
- }
164
- this.open = !this.open;
165
- };
166
- /**
167
- * Handles focus events on the input element.
168
- * @param {FocusEvent} event - The focus event.
169
- */
170
- this.handleFocus = (event) => {
171
- if (this.readonly || this.disabled) {
172
- event.preventDefault();
173
- event.target.blur();
174
- return;
175
- }
176
- };
177
- }
178
- //#endregion PROPERTIES
179
- /****************************************************************************/
180
- //#region METHODS
181
- /**
182
- * Converts the nv-calendar date format to the format expected by Inputmask.
183
- * @param {string} format - The date format.
184
- * @returns {string} Format adapted for Inputmask.
185
- */
186
- convertToInputmaskFormat(format) {
187
- switch (format) {
188
- case 'DD/MM/YYYY':
189
- return 'dd/mm/yyyy';
190
- case 'MM/DD/YYYY':
191
- return 'mm/dd/yyyy';
192
- case 'YYYY-MM-DD':
193
- return 'yyyy-mm-dd';
194
- case 'DD.MM.YYYY':
195
- return 'dd.mm.yyyy';
196
- case 'YYYYMMDD':
197
- return 'yyyymmdd';
198
- default:
199
- return format;
200
- }
201
- }
202
- //#endregion METHODS
203
- /****************************************************************************/
204
- //#region LIFECYCLE
205
- connectedCallback() {
206
- document.addEventListener('click', this.handleClickOutside);
207
- }
208
- componentWillLoad() {
209
- if (this.value) {
210
- this.singleValue = this.value;
211
- }
212
- }
213
- componentDidLoad() {
214
- const inputs = this.el.querySelectorAll('.input-wrapper input');
215
- inputs.forEach((input) => {
216
- inputmaskEdcad3c1.Inputmask({
217
- alias: 'datetime',
218
- inputFormat: this.convertToInputmaskFormat(this.dateFormat),
219
- placeholder: '_'.repeat(this.dateFormat.length),
220
- }).mask(input);
221
- });
222
- }
223
- disconnectedCallback() {
224
- document.removeEventListener('click', this.handleClickOutside);
225
- }
226
- /**
227
- * Handles the single date selection event from nv-calendar.
228
- * Updates the input value and closes the popover.
229
- * @param {CustomEvent} event - The event from nv-calendar.
230
- */
231
- handleSingleDateChange(event) {
232
- const value = event.detail;
233
- this.singleValue = value;
234
- this.dateChange.emit({ value });
235
- if (!this.showActions) {
236
- this.open = false;
237
- }
238
- }
239
- handleClosePopover() {
240
- this.open = false;
241
- }
242
- handleKeyDown(event) {
243
- if (!this.open) {
244
- if (event.key === 'ArrowDown') {
245
- this.open = true;
246
- event.preventDefault();
247
- return;
248
- }
249
- return;
250
- }
251
- // Verify if the popover element is defined
252
- if (!this.popoverElement) {
253
- console.warn('nv-fielddate -> Popover element is not defined');
254
- return;
255
- }
256
- }
257
- handleValueChange(newValue) {
258
- this.singleValue = newValue;
259
- }
260
- //#endregion EVENTS
261
- /****************************************************************************/
262
- //#region RENDER
263
- render() {
264
- return (index.h(index.Host, { key: '7528622493ff8256275d57c31b0f7ce53f67904e' }, ((this.label && this.label.length > 0) ||
265
- this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '7e3bc0273ba7e6fff6727875d92e8e3983196f32', htmlFor: this.inputId }, index.h("slot", { key: 'f384ada454778fb416001c6bcc883146b7f9a59d', name: "label" }, this.label))), index.h("nv-popover", { key: '65b22631c4f88bc8f3109a591e7d698da693a421', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '8b1d051e9b381bdb449affba6a885f0e592b9439', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: 'd6a469cd46cb57e50176cb11c1c7bf96f0d7a776', name: "before-input" }), index.h("div", { key: 'ec11add30aaf6e597fa75ddca2d6fe9a9103ae87', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'a75e84bb7fad922ab341fa006d57fc69e75cfdb7', name: "leading-input" }), index.h("input", { key: 'b592011badb9abbeb9b761403559be25ca189ff0', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.singleValue, onInput: this.handleInput, onFocus: this.handleFocus }), index.h("nv-iconbutton", { key: 'd10e211811b98874bdaf5d1c61a82487f86a9a2d', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
266
- ,
267
- size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: 'bae46e0cded86617977b52a6b304732c51cdcba6', name: "after-input" })), index.h("div", { key: 'd0c619279207a439ca85146d4a333ef0520c2d16', slot: "content" }, index.h("nv-calendar", { key: 'c7f2db2bf06c46cd07ad35a1670652527dea5354', dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates }))), ((this.description && this.description.length > 0) ||
268
- this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '91f99c0758253ef46a73f995d8f284c27bbf2795', class: "description" }, index.h("slot", { key: 'a6be4e1ce405819981c3fcf710d5fadbd64e87f3', name: "description" }, this.description))), (this.errorDescription ||
269
- this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '8eba4bf20122f3834ba512901c581c2215ebad9d', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '76d7e46d6ac178660a931a8251c366b600af6bc1' })));
270
- }
271
- get el() { return index.getElement(this); }
272
- static get watchers() { return {
273
- "value": ["handleValueChange"]
274
- }; }
275
- };
276
- NvFielddate.style = NvFielddateStyle0;
277
-
278
- exports.nv_fielddate = NvFielddate;