@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.
- package/dist/cjs/{index-CinzsZ8D.js → index-S09Gr7Tw.js} +180 -218
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/{nv-alert.entry-BVY_rxey.js → nv-alert.entry-DH8Qd2s2.js} +1 -1
- package/dist/cjs/{nv-avatar.entry-pREKtiv2.js → nv-avatar.entry-B3-elLZC.js} +1 -1
- package/dist/cjs/{nv-badge_2.entry-wDuiCwys.js → nv-badge_2.entry-D15EDzX0.js} +2 -2
- package/dist/cjs/{nv-base.entry-DwtTXK_n.js → nv-base.entry-D-_RUZTX.js} +1 -1
- package/dist/cjs/{nv-breadcrumb.entry-B0hIeE83.js → nv-breadcrumb.entry-DG49Nj1L.js} +2 -2
- package/dist/cjs/{nv-breadcrumbs.entry-Cq0LsIFs.js → nv-breadcrumbs.entry-BqJO5pbN.js} +1 -1
- package/dist/cjs/{nv-button.entry-DaSGnB1L.js → nv-button.entry-CN9kB98T.js} +6 -4
- package/dist/cjs/{nv-calendar.entry-BC6NDsVl.js → nv-calendar.entry-CMEgSU64.js} +6 -6
- package/dist/cjs/{nv-col.entry-DNUY559i.js → nv-col.entry-wcZ9HHAb.js} +1 -1
- package/dist/cjs/{nv-datagrid.entry-Cp8RCSEv.js → nv-datagrid.entry-GCLeN2qT.js} +32 -5
- package/dist/cjs/{nv-datagridcolumn.entry-CR9_1fsZ.js → nv-datagridcolumn.entry-lgIz71UU.js} +1 -1
- package/dist/cjs/{nv-dialog.entry-BjTJ5FFL.js → nv-dialog.entry-DfY0TaYp.js} +17 -13
- package/dist/cjs/{nv-dialogfooter_2.entry-DJkKzEgO.js → nv-dialogfooter_2.entry-OByWsulH.js} +6 -6
- package/dist/cjs/{nv-fieldcheckbox.entry-C0DmeqXD.js → nv-fieldcheckbox.entry-Bqpe9BK3.js} +2 -2
- package/dist/cjs/{nv-fielddate.entry-DRX2mfZL.js → nv-fielddate.entry-DJePv6tR.js} +1 -1
- package/dist/cjs/{nv-fielddaterange.entry-ka3JiDvT.js → nv-fielddaterange.entry--YC750sX.js} +1 -1
- package/dist/cjs/{nv-fielddropdown.entry-DUAKFYgw.js → nv-fielddropdown.entry-BPlTlc_S.js} +45 -75
- package/dist/cjs/{nv-fielddropdownitem.entry-BsbvJERH.js → nv-fielddropdownitem.entry-zwoGySum.js} +7 -9
- package/dist/cjs/{nv-fieldmultiselect.entry-DFr-ZICs.js → nv-fieldmultiselect.entry-Bg_v0LUF.js} +7 -49
- package/dist/cjs/{nv-fieldnumber.entry-ezdDvJh_.js → nv-fieldnumber.entry-BLNaq7yr.js} +1 -1
- package/dist/cjs/{nv-fieldpassword.entry-D4a8SnGr.js → nv-fieldpassword.entry-iSEdS5R8.js} +1 -1
- package/dist/cjs/{nv-fieldradio.entry-Co7WX2vI.js → nv-fieldradio.entry-Dov4vZkh.js} +1 -1
- package/dist/cjs/{nv-fieldselect.entry-sTbv_flF.js → nv-fieldselect.entry-NmpesarX.js} +1 -1
- package/dist/cjs/{nv-fieldtext.entry-DRPCH6Sf.js → nv-fieldtext.entry-r6oQajRS.js} +1 -1
- package/dist/cjs/{nv-fieldtextarea.entry-BwJCUiVW.js → nv-fieldtextarea.entry-CJ2yQkfi.js} +1 -1
- package/dist/cjs/{nv-fieldtime.entry-uU-IET2k.js → nv-fieldtime.entry-Bxoj6N53.js} +1 -1
- package/dist/cjs/nv-icon.entry-CWKRt8F0.js +79 -0
- package/dist/cjs/{nv-iconbutton_2.entry-Dx4usGkY.js → nv-iconbutton_2.entry-CnbscpNn.js} +1 -1
- package/dist/cjs/{nv-menu.entry-D3qvf_0H.js → nv-menu.entry-wC7oSruP.js} +1 -1
- package/dist/cjs/{nv-menuitem.entry-3t6TixM7.js → nv-menuitem.entry-BVSa1vrS.js} +1 -1
- package/dist/cjs/{nv-popover.entry-Bv6kuTK_.js → nv-popover.entry-ChP1we3l.js} +12 -10
- package/dist/cjs/{nv-row.entry-BPK1Li7w.js → nv-row.entry-D6FeFpzG.js} +1 -1
- package/dist/cjs/{nv-stack.entry-ByaO-0TJ.js → nv-stack.entry-zjJmztkO.js} +1 -1
- package/dist/cjs/{nv-table.entry-C7Hd57Iq.js → nv-table.entry-CGX0jsR3.js} +2 -2
- package/dist/cjs/{nv-tablecolumn.entry-BDCw_45v.js → nv-tablecolumn.entry-Cwdmo_RY.js} +1 -1
- package/dist/cjs/{nv-toggle.entry-BTqGH_H0.js → nv-toggle.entry-BvToMkI2.js} +2 -2
- package/dist/cjs/{nv-tooltip.entry-BDZfrLHv.js → nv-tooltip.entry-DZ7_lB-p.js} +2 -2
- package/dist/generated/components.js +3 -3
- package/dist/types/generated/components.d.ts +3 -5
- package/package.json +1 -1
- package/dist/cjs/index-C8UfzrMI.js +0 -26405
- package/dist/cjs/nv-alert.entry-8esWDUyU.js +0 -173
- package/dist/cjs/nv-avatar.entry-CO6bt4k6.js +0 -67
- package/dist/cjs/nv-badge_2.entry-xfXsesV0.js +0 -195
- package/dist/cjs/nv-base.entry-BO-6krwg.js +0 -71
- package/dist/cjs/nv-breadcrumb.entry-DTwjCmMI.js +0 -45
- package/dist/cjs/nv-breadcrumbs.entry-jn5hRjpQ.js +0 -20
- package/dist/cjs/nv-button.entry-DxzA6-My.js +0 -162
- package/dist/cjs/nv-calendar.entry-DKz-iBnp.js +0 -1036
- package/dist/cjs/nv-col.entry-X7jkNThH.js +0 -37
- package/dist/cjs/nv-datagrid.entry-DL-Fyo4l.js +0 -3671
- package/dist/cjs/nv-datagridcolumn.entry-CyTG5E7M.js +0 -18
- package/dist/cjs/nv-dialog.entry-Do_uALC6.js +0 -784
- package/dist/cjs/nv-dialogfooter_2.entry-DJ8qS9q6.js +0 -134
- package/dist/cjs/nv-fieldcheckbox.entry-DoGQX-5D.js +0 -137
- package/dist/cjs/nv-fielddate.entry-D-PjbYaA.js +0 -278
- package/dist/cjs/nv-fielddaterange.entry-BrC5jKLp.js +0 -355
- package/dist/cjs/nv-fielddropdown.entry-MsUR1kVe.js +0 -391
- package/dist/cjs/nv-fielddropdownitem.entry-DRM-Zljt.js +0 -70
- package/dist/cjs/nv-fieldmultiselect.entry-Dr8FfT_W.js +0 -1060
- package/dist/cjs/nv-fieldnumber.entry-DZsM1vmO.js +0 -126
- package/dist/cjs/nv-fieldpassword.entry-Biw__M2W.js +0 -115
- package/dist/cjs/nv-fieldradio.entry-ZL7KgEZ7.js +0 -102
- package/dist/cjs/nv-fieldselect.entry-D6eRsM9T.js +0 -365
- package/dist/cjs/nv-fieldtext.entry-DKdxC2cG.js +0 -119
- package/dist/cjs/nv-fieldtextarea.entry-Dc_TGlmI.js +0 -194
- package/dist/cjs/nv-fieldtime.entry-CXRtpWt1.js +0 -1011
- package/dist/cjs/nv-icon.entry-iipuvT3D.js +0 -79
- package/dist/cjs/nv-icon.entry-xltjoSa2.js +0 -79
- package/dist/cjs/nv-iconbutton_2.entry-BsXvYbCi.js +0 -163
- package/dist/cjs/nv-menu.entry-DFEYw_KZ.js +0 -227
- package/dist/cjs/nv-menuitem.entry-BeTXOtir.js +0 -58
- package/dist/cjs/nv-popover.entry-Zt25YeAv.js +0 -1960
- package/dist/cjs/nv-row.entry-Bwzlub3i.js +0 -21
- package/dist/cjs/nv-stack.entry-bhess4lQ.js +0 -30
- package/dist/cjs/nv-table.entry-D3U4dFcw.js +0 -338
- package/dist/cjs/nv-tablecolumn.entry-BzwWPlLf.js +0 -18
- package/dist/cjs/nv-toggle.entry-DXpNGkbz.js +0 -79
- 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;
|