@nova-design-system/nova-react 3.9.0 → 3.10.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/dist/cjs/{constants-4faa1fae-BzFAKCkR.js → constants-23aaef7b-Cj2b-su0.js} +12 -0
- package/dist/cjs/{index-BPZo04LR.js → index-Cm4m8MM1.js} +1509 -552
- package/dist/cjs/index.js +4 -1
- package/dist/cjs/{nv-accordion-item.entry-igHq6GcV.js → nv-accordion-item.entry-CnpS6CGa.js} +2 -2
- package/dist/cjs/{nv-accordion.entry-CjUtVUBZ.js → nv-accordion.entry-8UIjQG0P.js} +1 -1
- package/dist/cjs/{nv-alert.entry-NETR8Q1I.js → nv-alert.entry-96FaJ9yM.js} +8 -8
- package/dist/cjs/{nv-avatar.entry-B75vfd1u.js → nv-avatar.entry-BcLkxe35.js} +7 -7
- package/dist/cjs/nv-badge_2.entry-CzDec_7j.js +206 -0
- package/dist/cjs/{nv-breadcrumb.entry-21ZDbr-x.js → nv-breadcrumb.entry-BvnO7tGb.js} +2 -2
- package/dist/cjs/{nv-breadcrumbs.entry-CrqqjIzx.js → nv-breadcrumbs.entry-Du98f0lC.js} +1 -1
- package/dist/cjs/{nv-button.entry-D-2Zt42f.js → nv-button.entry-D8Ob5YDg.js} +8 -8
- package/dist/cjs/nv-buttongroup.entry-BGpQpMD_.js +195 -0
- package/dist/cjs/{nv-calendar.entry-BHT-inlG.js → nv-calendar.entry-CAINTAPB.js} +127 -44
- package/dist/cjs/{nv-col.entry-AHfSMqc1.js → nv-col.entry-5trkPEIg.js} +2 -2
- package/dist/cjs/{nv-datagrid.entry-BRT5wQGR.js → nv-datagrid.entry-DqbLtkI4.js} +9 -9
- package/dist/cjs/{nv-datagridcolumn.entry-BMDydM-l.js → nv-datagridcolumn.entry-Dn1u3PFr.js} +2 -2
- package/dist/cjs/{nv-dialog.entry-NPDVQdjH.js → nv-dialog.entry-pibB_NBe.js} +3 -3
- package/dist/cjs/{nv-dialogfooter_2.entry-CyHKMRiZ.js → nv-dialogfooter_2.entry-0MTTK7Y2.js} +5 -5
- package/dist/cjs/{nv-fieldcheckbox.entry-DyoNGs60.js → nv-fieldcheckbox.entry-DBSUOWI_.js} +6 -6
- package/dist/cjs/{nv-fielddate.entry-CgnVYTZx.js → nv-fielddate.entry-DM6ap-c_.js} +63 -95
- package/dist/cjs/{nv-fielddaterange.entry-DVcNJ2nO.js → nv-fielddaterange.entry-DJEbpwlV.js} +53 -34
- package/dist/cjs/{nv-fielddropdown.entry-D1Gb5Lvr.js → nv-fielddropdown.entry-COGswgIv.js} +4 -4
- package/dist/cjs/{nv-fielddropdownitem.entry-D1YDyF8i.js → nv-fielddropdownitem.entry-m6TjyMp3.js} +2 -2
- package/dist/cjs/{nv-fieldmultiselect.entry-eOD0Tk6H.js → nv-fieldmultiselect.entry-PhmD9JYp.js} +378 -28
- package/dist/cjs/{nv-fieldnumber.entry-C0S5sB8-.js → nv-fieldnumber.entry-dR0KzTa9.js} +4 -4
- package/dist/cjs/{nv-fieldpassword.entry-BwK_EseD.js → nv-fieldpassword.entry-CuQO_qjq.js} +4 -4
- package/dist/cjs/{nv-fieldradio.entry-DseYLmZY.js → nv-fieldradio.entry-UvL5fKFQ.js} +5 -5
- package/dist/cjs/{nv-fieldselect.entry-CO4wZVq5.js → nv-fieldselect.entry-DKMYBCaJ.js} +6 -6
- package/dist/cjs/{nv-fieldslider.entry-Bd_ntnN9.js → nv-fieldslider.entry-tOUuTb46.js} +4 -4
- package/dist/cjs/{nv-fieldtext.entry-BomXuhfy.js → nv-fieldtext.entry-m9XbYLZW.js} +4 -4
- package/dist/cjs/{nv-fieldtextarea.entry-COUlp8L8.js → nv-fieldtextarea.entry-DQpfF5ME.js} +4 -4
- package/dist/cjs/{nv-fieldtime.entry-Ejb66NjT.js → nv-fieldtime.entry-Pmt1E_Hm.js} +66 -66
- package/dist/cjs/{nv-icon.entry-DZgf515j.js → nv-icon.entry-C4VmFtRW.js} +9 -9
- package/dist/cjs/{nv-iconbutton_2.entry-C7cXslTK.js → nv-iconbutton_2.entry-Cc2xKJb5.js} +4 -4
- package/dist/cjs/{nv-menu.entry-Bd2VP2mz.js → nv-menu.entry-B6kxLiip.js} +2 -2
- package/dist/cjs/{nv-menuitem.entry-COtjh76S.js → nv-menuitem.entry-rYbCnY7o.js} +2 -2
- package/dist/cjs/{nv-popover.entry-BNDaFpW5.js → nv-popover.entry-CJJjW4Pv.js} +2 -2
- package/dist/cjs/{nv-row.entry-Aae5W4O5.js → nv-row.entry-BMMoJvjb.js} +2 -2
- package/dist/cjs/{nv-stack.entry-sV1xr1W5.js → nv-stack.entry-DI6QCSbS.js} +2 -2
- package/dist/cjs/{nv-table.entry-Dwq9q1W7.js → nv-table.entry-BPWQIWyg.js} +3 -3
- package/dist/cjs/{nv-tablecolumn.entry-_lJgMLCe.js → nv-tablecolumn.entry-De81f1e9.js} +1 -1
- package/dist/cjs/{nv-toggle.entry-COR80n7Q.js → nv-toggle.entry-BTNtBXGR.js} +4 -4
- package/dist/cjs/nv-togglebutton.entry-vWKwWiQe.js +55 -0
- package/dist/cjs/nv-togglebuttongroup.entry-BmpHIXnd.js +169 -0
- package/dist/cjs/{nv-tooltip.entry-BOB0Y-Wc.js → nv-tooltip.entry-BJHXydMC.js} +2 -2
- package/dist/generated/components.js +24 -0
- package/dist/generated/components.server.js +41 -4
- package/dist/types/generated/components.d.ts +16 -0
- package/dist/types/generated/components.server.d.ts +16 -0
- package/package.json +1 -1
- package/dist/cjs/nv-badge_2.entry-CAvYBnR-.js +0 -206
package/dist/cjs/{nv-datagridcolumn.entry-BMDydM-l.js → nv-datagridcolumn.entry-Dn1u3PFr.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cm4m8MM1.js');
|
|
4
4
|
require('react');
|
|
5
5
|
|
|
6
6
|
const NvDatagridcolumn = class {
|
|
@@ -15,7 +15,7 @@ const NvDatagridcolumn = class {
|
|
|
15
15
|
/****************************************************************************/
|
|
16
16
|
//#region RENDER
|
|
17
17
|
render() {
|
|
18
|
-
return (index.h(index.Host, { key: '
|
|
18
|
+
return (index.h(index.Host, { key: 'd93cf7234c22d08319d2e4157945ece0b9e5f7b1' }, index.h("slot", { key: 'd4530c7f6854773716e7494e0379bc21f446ca53', name: "header" }), index.h("slot", { key: '60e2933f219f48c0567fd0e01a137a694ae1c1c9', name: "cell" })));
|
|
19
19
|
}
|
|
20
20
|
};
|
|
21
21
|
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cm4m8MM1.js');
|
|
4
4
|
var events_utilsFe1d907f = require('./events.utils-fe1d907f-01N__3wY.js');
|
|
5
5
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
6
|
-
var
|
|
6
|
+
var constants23aaef7b = require('./constants-23aaef7b-Cj2b-su0.js');
|
|
7
7
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
8
8
|
require('react');
|
|
9
9
|
|
|
@@ -782,7 +782,7 @@ const NvDialog = class {
|
|
|
782
782
|
//#region RENDER
|
|
783
783
|
render() {
|
|
784
784
|
const hasForm = this.form || this.el.querySelector('form');
|
|
785
|
-
return (index.h(index.Host, { key: '
|
|
785
|
+
return (index.h(index.Host, { key: 'c5fa728dbdde087203b45eb23f433d6227418657' }, index.h("slot", { key: '573185fe0ce4b8d4cb2a2dbf5d267a6b7f7a2989', name: "trigger" }), index.h("dialog", { key: '9641a8579a90e51aabc0a982a7e0f34b9f56b39c', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsx297c1ffe.clsx({ full: this.full }) }, index.h("div", { key: '8811f4890cb17bcf67b60705f850986f720a3b29', class: "content" }, !this.undismissable && (index.h("nv-button", { key: '7348177c577ea9dace324526935f81088e967326', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDialogClose, "aria-label": "Close dialog" }, index.h("nv-icon", { key: '65370e598f80ec8e716b3c1d748cd38aa9ca5844', name: "x", size: "sm" }))), this.headerElement ? (index.h("slot", { name: "header" })) : (index.h("nv-dialogheader", { id: "dialog-header" })), index.h("div", { key: '8957787909e830d3f6d6158eea79e3c955fcf730', class: "content-body", id: "dialog-content" }, index.h("slot", { key: '46292e1f98ed56b7f098457e20d11d559f0868d0' })), this.footerElement ? (index.h("slot", { name: "footer" })) : (index.h("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? constants23aaef7b.ButtonType.Submit : constants23aaef7b.ButtonType.Button, onDialogCanceled: this.handleDialogClose, undismissable: this.undismissable }))))));
|
|
786
786
|
}
|
|
787
787
|
get el() { return index.getElement(this); }
|
|
788
788
|
static get watchers() { return {
|
package/dist/cjs/{nv-dialogfooter_2.entry-CyHKMRiZ.js → nv-dialogfooter_2.entry-0MTTK7Y2.js}
RENAMED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
4
|
-
var
|
|
3
|
+
var index = require('./index-Cm4m8MM1.js');
|
|
4
|
+
var constants23aaef7b = require('./constants-23aaef7b-Cj2b-su0.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
7
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}";
|
|
@@ -54,7 +54,7 @@ const NvDialogfooter = class {
|
|
|
54
54
|
/**
|
|
55
55
|
* Sets the type of the primary button.
|
|
56
56
|
*/
|
|
57
|
-
this.primaryButtonType =
|
|
57
|
+
this.primaryButtonType = constants23aaef7b.ButtonType.Button;
|
|
58
58
|
//#endregion EVENTS
|
|
59
59
|
/****************************************************************************/
|
|
60
60
|
//#region METHODS
|
|
@@ -89,7 +89,7 @@ const NvDialogfooter = class {
|
|
|
89
89
|
/****************************************************************************/
|
|
90
90
|
//#region RENDER
|
|
91
91
|
render() {
|
|
92
|
-
return (index.h(index.Host, { key: '
|
|
92
|
+
return (index.h(index.Host, { key: '313836d5d0bc1704325aa200f0ed115bf3e63e7d' }, !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
93
|
}
|
|
94
94
|
static get formAssociated() { return true; }
|
|
95
95
|
get el() { return index.getElement(this); }
|
|
@@ -124,7 +124,7 @@ const NvDialogheader = class {
|
|
|
124
124
|
/****************************************************************************/
|
|
125
125
|
//#region RENDER
|
|
126
126
|
render() {
|
|
127
|
-
return (index.h(index.Host, { key: '
|
|
127
|
+
return (index.h(index.Host, { key: 'f91a9aea8aa7116266f52bb356ef2ec493df6354' }, !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
128
|
}
|
|
129
129
|
get el() { return index.getElement(this); }
|
|
130
130
|
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cm4m8MM1.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
5
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
6
6
|
require('react');
|
|
7
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 label.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-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)}";
|
|
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);z-index:111}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 label.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-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
9
|
const NvFieldcheckboxStyle0 = nvFieldcheckboxCss;
|
|
10
10
|
|
|
11
11
|
const NvFieldcheckbox = class {
|
|
@@ -118,13 +118,13 @@ const NvFieldcheckbox = class {
|
|
|
118
118
|
/****************************************************************************/
|
|
119
119
|
//#region RENDER
|
|
120
120
|
render() {
|
|
121
|
-
return (index.h(index.Host, { key: '
|
|
121
|
+
return (index.h(index.Host, { key: '62195333f84808381f19ca4017916380d20d493f', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("div", { key: '65f02aee06eacecf83c5297d87130bbe9f85b19c', class: "input-container" }, index.h("input", { key: 'c3e8fcb41c835f0eba254f9e77de749b7dc6349e', 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
122
|
if (el) {
|
|
123
123
|
el.indeterminate = this.indeterminate;
|
|
124
124
|
}
|
|
125
|
-
} }), index.h("span", { key: '
|
|
126
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
127
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
125
|
+
} }), index.h("span", { key: '439a8c467373d734293012514cdb22c419b534ae', class: "icon" }, this.checked && !this.indeterminate && (index.h("slot", { key: '335a92ed1431fe96af3c7c6fac2f4245c0d4caaa', name: "checked-icon" }, index.h("svg", { key: '67d97efca27a97c7db77d9f8c182a21fbd21d13c', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '9cb6730b00813e8d4fe6fa14549de6f2a41ea068', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (index.h("slot", { key: 'e47b17269156f72ddaf7af1ecc818ae5b6b8c0d3', name: "indeterminate-icon" }, index.h("svg", { key: '4748acc27a70e74f9228cdb6e41eae4b1ae82559', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '40748b36b277c1ed6ea8fc8f82f4cd687b2f6e3a', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("slot", { key: '0fa9e559cefb8169c20b171fcbb6c1786fd6b3ae' }), index.h("div", { key: '44eef633025d1a7606979d4d8374c2a04081f45c', class: "text-container" }, index.h("slot", { key: 'b43251a02b15431f5399c3bced485b89741e069e', name: "main" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '7781451a357961ce1606b18c590baa344df4ff95', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: 'b420ad1dbdc05a5c57d0b45e62176866ec0527ca', name: "label" }, this.label))), (this.description ||
|
|
126
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '67715bef879e0778b58648b83135edefdbdba53d', class: "description" }, index.h("slot", { key: 'b1d4d21e83130e19e94efa915abd6661c027bbce', name: "description" }, this.description)))), (this.errorDescription ||
|
|
127
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '157df3faf2cadb4014ba8475c99cf68d86da9f63', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '42aa95b2332618120d846fa481a1b30b7edeccca', name: "error-description" }, this.errorDescription))))));
|
|
128
128
|
}
|
|
129
129
|
static get formAssociated() { return true; }
|
|
130
130
|
get el() { return index.getElement(this); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cm4m8MM1.js');
|
|
4
4
|
var inputmaskEdcad3c1 = require('./inputmask-edcad3c1-B9Omti4z.js');
|
|
5
5
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
6
6
|
require('react');
|
|
@@ -49,8 +49,6 @@ const NvFielddate = class {
|
|
|
49
49
|
* The initial value of the input (date in string format).
|
|
50
50
|
* @bind value
|
|
51
51
|
*/
|
|
52
|
-
// eslint-disable-next-line @stencil-community/own-props-must-be-private
|
|
53
|
-
// eslint-disable-next-line @stencil-community/strict-mutable
|
|
54
52
|
this.value = '';
|
|
55
53
|
/**
|
|
56
54
|
* The current value of the input date in string format.
|
|
@@ -122,18 +120,10 @@ const NvFielddate = class {
|
|
|
122
120
|
return;
|
|
123
121
|
}
|
|
124
122
|
this.inputElement.focus();
|
|
125
|
-
// Select the first characters based on the date format
|
|
126
|
-
const format = this.dateFormat;
|
|
127
|
-
if (format.startsWith('DD') || format.startsWith('MM')) {
|
|
128
|
-
this.inputElement.setSelectionRange(0, 2);
|
|
129
|
-
}
|
|
130
|
-
else if (format.startsWith('YYYY')) {
|
|
131
|
-
this.inputElement.setSelectionRange(0, 4);
|
|
132
|
-
}
|
|
133
123
|
};
|
|
134
124
|
/**
|
|
135
125
|
* Handles the input event on the input element.
|
|
136
|
-
* Updates the singleValue and emits the valueChanged event.
|
|
126
|
+
* Updates the singleValue and emits the valueChanged event if empty.
|
|
137
127
|
* @param {Event} event - The input event.
|
|
138
128
|
*/
|
|
139
129
|
this.handleInput = (event) => {
|
|
@@ -142,74 +132,10 @@ const NvFielddate = class {
|
|
|
142
132
|
return;
|
|
143
133
|
}
|
|
144
134
|
const input = event.target;
|
|
145
|
-
const previousValue = this.value;
|
|
146
135
|
this.singleValue = input.value;
|
|
147
136
|
this.value = input.value;
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
this.valueChanged.emit(input.value);
|
|
151
|
-
}
|
|
152
|
-
};
|
|
153
|
-
/**
|
|
154
|
-
* Initializes the input mask.
|
|
155
|
-
*/
|
|
156
|
-
this.initializeInputMask = () => {
|
|
157
|
-
this.currentPlaceholder = '';
|
|
158
|
-
if (this.inputElement.inputmask) {
|
|
159
|
-
return;
|
|
160
|
-
}
|
|
161
|
-
const inputMask = new inputmaskEdcad3c1.Inputmask({
|
|
162
|
-
alias: 'datetime',
|
|
163
|
-
inputFormat: this.convertToInputmaskFormat(this.dateFormat),
|
|
164
|
-
placeholder: ' ',
|
|
165
|
-
prefillYear: false,
|
|
166
|
-
clearIncomplete: false,
|
|
167
|
-
showMaskOnHover: false,
|
|
168
|
-
showMaskOnFocus: false,
|
|
169
|
-
clearMaskOnLostFocus: false,
|
|
170
|
-
insertMode: true,
|
|
171
|
-
rightAlign: false,
|
|
172
|
-
oncomplete: function (e) {
|
|
173
|
-
const input = e.target;
|
|
174
|
-
const event = new CustomEvent('input', { bubbles: true });
|
|
175
|
-
input.dispatchEvent(event);
|
|
176
|
-
},
|
|
177
|
-
});
|
|
178
|
-
inputMask.mask(this.inputElement);
|
|
179
|
-
// Set the value after applying the mask
|
|
180
|
-
if (this.inputElement.name === this.name && this.singleValue) {
|
|
181
|
-
requestAnimationFrame(() => {
|
|
182
|
-
this.inputElement.value = this.singleValue;
|
|
183
|
-
const event = new CustomEvent('input', { bubbles: true });
|
|
184
|
-
this.inputElement.dispatchEvent(event);
|
|
185
|
-
});
|
|
186
|
-
}
|
|
187
|
-
};
|
|
188
|
-
/**
|
|
189
|
-
* Handles keydown events on the input before the mask is initialized.
|
|
190
|
-
* Initializes the mask on the first number input.
|
|
191
|
-
* @param {KeyboardEvent} event - The keyboard event.
|
|
192
|
-
*/
|
|
193
|
-
this.handleKeydownBeforeMask = (event) => {
|
|
194
|
-
const allowedKeys = [
|
|
195
|
-
'Backspace',
|
|
196
|
-
'Delete',
|
|
197
|
-
'Tab',
|
|
198
|
-
'ArrowLeft',
|
|
199
|
-
'ArrowRight',
|
|
200
|
-
'ArrowUp',
|
|
201
|
-
'ArrowDown',
|
|
202
|
-
'Home',
|
|
203
|
-
'End',
|
|
204
|
-
];
|
|
205
|
-
if (/\d/.test(event.key)) {
|
|
206
|
-
this.initializeInputMask();
|
|
207
|
-
this.inputElement.removeEventListener('keydown', this.handleKeydownBeforeMask);
|
|
208
|
-
}
|
|
209
|
-
else if (!allowedKeys.includes(event.key) &&
|
|
210
|
-
!event.metaKey &&
|
|
211
|
-
!event.ctrlKey) {
|
|
212
|
-
event.preventDefault();
|
|
137
|
+
if (this.value === '') {
|
|
138
|
+
this.valueChanged.emit('');
|
|
213
139
|
}
|
|
214
140
|
};
|
|
215
141
|
/**
|
|
@@ -222,17 +148,8 @@ const NvFielddate = class {
|
|
|
222
148
|
event.target.blur();
|
|
223
149
|
return;
|
|
224
150
|
}
|
|
225
|
-
if (!this.inputElement.inputmask) {
|
|
226
|
-
this.inputElement.addEventListener('keydown', this.handleKeydownBeforeMask);
|
|
227
|
-
}
|
|
228
151
|
this.open = true;
|
|
229
152
|
};
|
|
230
|
-
/**
|
|
231
|
-
* Handles blur events on the input element.
|
|
232
|
-
*/
|
|
233
|
-
this.handleBlur = () => {
|
|
234
|
-
this.inputElement.removeEventListener('keydown', this.handleKeydownBeforeMask);
|
|
235
|
-
};
|
|
236
153
|
/**
|
|
237
154
|
* Prevents the valueChanged event from the calendar from propagating up.
|
|
238
155
|
* @param {CustomEvent} event - The valueChanged event from nv-calendar.
|
|
@@ -307,6 +224,27 @@ const NvFielddate = class {
|
|
|
307
224
|
// Close the popover if open
|
|
308
225
|
this.open = false;
|
|
309
226
|
}
|
|
227
|
+
updateMask() {
|
|
228
|
+
var _a, _b;
|
|
229
|
+
if (!this.inputElement)
|
|
230
|
+
return;
|
|
231
|
+
(_b = (_a = this.inputElement.inputmask) === null || _a === void 0 ? void 0 : _a.remove) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
232
|
+
const inputMask = new inputmaskEdcad3c1.Inputmask({
|
|
233
|
+
alias: 'datetime',
|
|
234
|
+
inputFormat: this.convertToInputmaskFormat(this.dateFormat),
|
|
235
|
+
placeholder: this.convertToInputmaskFormat(this.dateFormat),
|
|
236
|
+
clearIncomplete: false,
|
|
237
|
+
showMaskOnHover: false,
|
|
238
|
+
showMaskOnFocus: true,
|
|
239
|
+
clearMaskOnLostFocus: !this.open,
|
|
240
|
+
postValidation: true,
|
|
241
|
+
oncomplete: (e) => {
|
|
242
|
+
var _a;
|
|
243
|
+
this.valueChanged.emit((_a = e.target) === null || _a === void 0 ? void 0 : _a.value);
|
|
244
|
+
},
|
|
245
|
+
});
|
|
246
|
+
inputMask.mask(this.inputElement);
|
|
247
|
+
}
|
|
310
248
|
//#endregion METHODS
|
|
311
249
|
/****************************************************************************/
|
|
312
250
|
//#region LIFECYCLE
|
|
@@ -317,10 +255,26 @@ const NvFielddate = class {
|
|
|
317
255
|
if (this.value) {
|
|
318
256
|
this.singleValue = this.value;
|
|
319
257
|
}
|
|
320
|
-
this.currentPlaceholder = this.placeholder || this.dateFormat;
|
|
321
258
|
}
|
|
322
259
|
componentDidLoad() {
|
|
323
|
-
|
|
260
|
+
this.updateMask();
|
|
261
|
+
// Set the initial value after applying the mask
|
|
262
|
+
if (this.inputElement.name === this.name && this.singleValue) {
|
|
263
|
+
requestAnimationFrame(() => {
|
|
264
|
+
this.inputElement.value = this.singleValue;
|
|
265
|
+
const event = new CustomEvent('input', { bubbles: true });
|
|
266
|
+
this.inputElement.dispatchEvent(event);
|
|
267
|
+
});
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
componentDidRender() {
|
|
271
|
+
// Only set value on initial render when there's no existing value in the input
|
|
272
|
+
if (this.singleValue && this.inputElement && !this.inputElement.value) {
|
|
273
|
+
requestAnimationFrame(() => {
|
|
274
|
+
this.inputElement.value = this.singleValue;
|
|
275
|
+
this.inputElement.setAttribute('value', this.singleValue);
|
|
276
|
+
});
|
|
277
|
+
}
|
|
324
278
|
}
|
|
325
279
|
disconnectedCallback() {
|
|
326
280
|
document.removeEventListener('click', this.handleClickOutside);
|
|
@@ -339,6 +293,10 @@ const NvFielddate = class {
|
|
|
339
293
|
const previousValue = this.value;
|
|
340
294
|
this.singleValue = value;
|
|
341
295
|
this.value = value;
|
|
296
|
+
// Set the input value directly when calendar is used
|
|
297
|
+
if (this.inputElement) {
|
|
298
|
+
this.inputElement.value = value;
|
|
299
|
+
}
|
|
342
300
|
// Only emit valueChanged if the value actually changed
|
|
343
301
|
if (previousValue !== value) {
|
|
344
302
|
this.valueChanged.emit(value);
|
|
@@ -367,21 +325,31 @@ const NvFielddate = class {
|
|
|
367
325
|
}
|
|
368
326
|
handleValueChange(newValue) {
|
|
369
327
|
this.singleValue = newValue;
|
|
328
|
+
// Only set input value if it's different from current input value
|
|
329
|
+
// This prevents interfering with user typing
|
|
330
|
+
if (this.inputElement && this.inputElement.value !== newValue) {
|
|
331
|
+
this.inputElement.value = newValue;
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
handleOpenChange() {
|
|
335
|
+
this.updateMask();
|
|
370
336
|
}
|
|
371
337
|
//#endregion EVENTS
|
|
372
338
|
/****************************************************************************/
|
|
373
339
|
//#region RENDER
|
|
374
340
|
render() {
|
|
375
|
-
return (index.h(index.Host, { key: '
|
|
376
|
-
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '
|
|
341
|
+
return (index.h(index.Host, { key: 'e0914be919a272863714493837e515e3b95fa38c' }, ((this.label && this.label.length > 0) ||
|
|
342
|
+
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '3ecdac541c5d62417892e64ed2ca1ab41b0cb4cf', htmlFor: this.inputId }, index.h("slot", { key: '58d8c5ab53df1fdc38627504cc3c26033398fccb', name: "label" }, this.label))), index.h("nv-popover", { key: '1d78703d4f1c979bc6f5d13a9d76d0619d7bfbbe', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '12648ac734ee3aab93d77c60df4793f5a20f7298', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '3803e7cf0fdf84fcf3e918c727f4d47198edb813', name: "before-input" }), index.h("div", { key: 'afe8a466b314adb546da7069f94bb621d8664abb', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '43af98b4dd4ff2487bc63ab9a0f9b307c51f5357', name: "leading-input" }), index.h("input", { key: 'f9f5966ad347db7e848b59f9790debb55a0f7e20', id: this.inputId, ref: this.setInputRef, placeholder: this.placeholder ||
|
|
343
|
+
this.convertToInputmaskFormat(this.dateFormat), name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, onInput: this.handleInput, onFocus: this.handleFocus, "data-scope": "date" }), this.error && (index.h("nv-icon", { key: '4601fb0d8d1eaa18f9ff0027c2e4723eb2532b4f', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '0a8d818eb1c650e45d42e05fc03e28360bb5e283', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '2f56171211d237eda83b009266e3426eeb83c48e', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
|
|
377
344
|
,
|
|
378
|
-
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: '
|
|
379
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
380
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
345
|
+
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: 'df3476a4edc879ab7bbd9c74190abe857949ca8b', name: "after-input" })), index.h("div", { key: '7bfab4992d8e4a1fdf9de2941028be095df1cb88', slot: "content" }, index.h("nv-calendar", { key: '8bab211eb998baa41c6df0b51419f526732ead72', 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, onValueChanged: this.handleCalendarValueChanged }))), ((this.description && this.description.length > 0) ||
|
|
346
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '431945fddf898fce6596b49fdb6266dec556cc27', class: "description" }, index.h("slot", { key: 'b1da904d1790776e404d283e1530a2e14b73f123', name: "description" }, this.description))), (this.errorDescription ||
|
|
347
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '5de0b4f415fae16da71a80671b00a4c4402834e8', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '889bf8e7bbb7511937c6a3e0a70dd2a95dc15bd7' })));
|
|
381
348
|
}
|
|
382
349
|
get el() { return index.getElement(this); }
|
|
383
350
|
static get watchers() { return {
|
|
384
|
-
"value": ["handleValueChange"]
|
|
351
|
+
"value": ["handleValueChange"],
|
|
352
|
+
"open": ["handleOpenChange"]
|
|
385
353
|
}; }
|
|
386
354
|
};
|
|
387
355
|
NvFielddate.style = NvFielddateStyle0;
|
package/dist/cjs/{nv-fielddaterange.entry-DVcNJ2nO.js → nv-fielddaterange.entry-DJEbpwlV.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cm4m8MM1.js');
|
|
4
4
|
var inputmaskEdcad3c1 = require('./inputmask-edcad3c1-B9Omti4z.js');
|
|
5
5
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
6
6
|
require('react');
|
|
@@ -130,12 +130,6 @@ const NvFielddaterange = class {
|
|
|
130
130
|
this.startValue = values[0];
|
|
131
131
|
this.endValue = values[1];
|
|
132
132
|
}
|
|
133
|
-
else {
|
|
134
|
-
// Handle malformed value gracefully
|
|
135
|
-
console.warn(`Invalid date range format: ${value}`);
|
|
136
|
-
this.startValue = '';
|
|
137
|
-
this.endValue = '';
|
|
138
|
-
}
|
|
139
133
|
};
|
|
140
134
|
/**
|
|
141
135
|
* Closes the popover when a click is detected outside the component.
|
|
@@ -159,9 +153,6 @@ const NvFielddaterange = class {
|
|
|
159
153
|
this.startValue = input.value;
|
|
160
154
|
// Update unified value prop
|
|
161
155
|
this.value = `${input.value},${this.endValue}`;
|
|
162
|
-
this.valueChanged.emit(this.value);
|
|
163
|
-
// Legacy support (deprecated)
|
|
164
|
-
this.dateRangeChange.emit({ start: input.value, end: this.endValue });
|
|
165
156
|
// Temporarily enable navigation for keyboard input
|
|
166
157
|
if (this.calendarElement) {
|
|
167
158
|
this.calendarElement.removeAttribute('data-prevent-navigation');
|
|
@@ -187,9 +178,6 @@ const NvFielddaterange = class {
|
|
|
187
178
|
this.endValue = input.value;
|
|
188
179
|
// Update unified value prop
|
|
189
180
|
this.value = `${this.startValue},${input.value}`;
|
|
190
|
-
this.valueChanged.emit(this.value);
|
|
191
|
-
// Legacy support (deprecated)
|
|
192
|
-
this.dateRangeChange.emit({ start: this.startValue, end: input.value });
|
|
193
181
|
// Temporarily enable navigation for keyboard input
|
|
194
182
|
if (this.calendarElement) {
|
|
195
183
|
this.calendarElement.removeAttribute('data-prevent-navigation');
|
|
@@ -286,6 +274,50 @@ const NvFielddaterange = class {
|
|
|
286
274
|
this.calendarElement.clear();
|
|
287
275
|
}
|
|
288
276
|
}
|
|
277
|
+
updateMask() {
|
|
278
|
+
const inputs = this.el.querySelectorAll('.input-wrapper input');
|
|
279
|
+
inputs.forEach((input) => {
|
|
280
|
+
var _a, _b;
|
|
281
|
+
(_b = (_a = input.inputmask) === null || _a === void 0 ? void 0 : _a.remove) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
282
|
+
const inputMask = new inputmaskEdcad3c1.Inputmask({
|
|
283
|
+
alias: 'datetime',
|
|
284
|
+
inputFormat: this.convertToInputmaskFormat(this.dateFormat),
|
|
285
|
+
placeholder: this.convertToInputmaskFormat(this.dateFormat),
|
|
286
|
+
clearIncomplete: false,
|
|
287
|
+
showMaskOnHover: false,
|
|
288
|
+
showMaskOnFocus: true,
|
|
289
|
+
clearMaskOnLostFocus: !this.open,
|
|
290
|
+
postValidation: true,
|
|
291
|
+
oncleared: (e) => {
|
|
292
|
+
const input = e.target;
|
|
293
|
+
if (input.id === this.startInputId) {
|
|
294
|
+
this.startValue = '';
|
|
295
|
+
}
|
|
296
|
+
if (input.id === this.endInputId) {
|
|
297
|
+
this.endValue = '';
|
|
298
|
+
}
|
|
299
|
+
},
|
|
300
|
+
oncomplete: () => {
|
|
301
|
+
if (/[a-zA-Z]/g.test(this.value))
|
|
302
|
+
return;
|
|
303
|
+
const values = this.value
|
|
304
|
+
.split(',')
|
|
305
|
+
.map(v => v.trim())
|
|
306
|
+
.filter(Boolean);
|
|
307
|
+
if (values.length < 2)
|
|
308
|
+
return;
|
|
309
|
+
// If valid emit change event
|
|
310
|
+
this.valueChanged.emit(this.value);
|
|
311
|
+
// Legacy support (deprecated)
|
|
312
|
+
this.dateRangeChange.emit({
|
|
313
|
+
start: this.startValue,
|
|
314
|
+
end: input.value,
|
|
315
|
+
});
|
|
316
|
+
},
|
|
317
|
+
});
|
|
318
|
+
inputMask.mask(input);
|
|
319
|
+
});
|
|
320
|
+
}
|
|
289
321
|
//#endregion METHODS
|
|
290
322
|
/****************************************************************************/
|
|
291
323
|
//#region LIFECYCLE
|
|
@@ -299,25 +331,9 @@ const NvFielddaterange = class {
|
|
|
299
331
|
}
|
|
300
332
|
}
|
|
301
333
|
componentDidLoad() {
|
|
334
|
+
this.updateMask();
|
|
302
335
|
const inputs = this.el.querySelectorAll('.input-wrapper input');
|
|
303
336
|
inputs.forEach((input) => {
|
|
304
|
-
const inputMask = new inputmaskEdcad3c1.Inputmask({
|
|
305
|
-
alias: 'datetime',
|
|
306
|
-
inputFormat: this.convertToInputmaskFormat(this.dateFormat),
|
|
307
|
-
placeholder: this.convertToInputmaskFormat(this.dateFormat),
|
|
308
|
-
clearIncomplete: false,
|
|
309
|
-
showMaskOnHover: false,
|
|
310
|
-
showMaskOnFocus: false,
|
|
311
|
-
clearMaskOnLostFocus: false,
|
|
312
|
-
insertMode: true,
|
|
313
|
-
rightAlign: false,
|
|
314
|
-
oncomplete: function (e) {
|
|
315
|
-
const input = e.target;
|
|
316
|
-
const event = new CustomEvent('input', { bubbles: true });
|
|
317
|
-
input.dispatchEvent(event);
|
|
318
|
-
},
|
|
319
|
-
});
|
|
320
|
-
inputMask.mask(input);
|
|
321
337
|
// Set the value after applying the mask
|
|
322
338
|
if (input.name === this.startName && this.startValue) {
|
|
323
339
|
requestAnimationFrame(() => {
|
|
@@ -449,6 +465,7 @@ const NvFielddaterange = class {
|
|
|
449
465
|
this.parseUnifiedValue(newValue);
|
|
450
466
|
}
|
|
451
467
|
onOpenChanged(newValue) {
|
|
468
|
+
this.updateMask();
|
|
452
469
|
if (this.contentRef) {
|
|
453
470
|
if (newValue) {
|
|
454
471
|
this.contentRef.style.transition = 'none';
|
|
@@ -474,10 +491,12 @@ const NvFielddaterange = class {
|
|
|
474
491
|
/****************************************************************************/
|
|
475
492
|
//#region RENDER
|
|
476
493
|
render() {
|
|
477
|
-
return (index.h(index.Host, { key: '
|
|
478
|
-
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '
|
|
479
|
-
|
|
480
|
-
|
|
494
|
+
return (index.h(index.Host, { key: '1f11c1e95c0e1cdc54cc0fc22c6bb3c629d35560' }, ((this.label && this.label.length > 0) ||
|
|
495
|
+
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'b7f2d251de0f4e9e8429095d0c74197a963ddb45', htmlFor: this.startInputId }, index.h("slot", { key: 'bdf0f487baf834fcfb48f81a5d4ba0ad786961f2', name: "label" }, this.label))), index.h("nv-popover", { key: 'cc25f182c4f6fb8dc5a8d70c9f6a5ab28eaf05bc', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: 'c2e0214f5e66baf986dcd4de7ea8a83044f90185', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '341b161e3b993305e4ddd6bdfa9138cefd5a8b06', name: "before-input" }), index.h("div", { key: '4ebf9b5ea2c188cd5b4e12bcdd800d040339ac41', class: "input-container" }, index.h("slot", { key: 'af19b28485924209146b42db39ec1295609e96e1', name: "leading-input" }), index.h("div", { key: '93bb5f085cc3da0eb81794bf106597c90b80be09', class: "range-inputs" }, index.h("input", { key: '3a6143d6480bf57b4d3118cb293de529f4443c64', id: this.startInputId, type: "text", placeholder: this.startPlaceholder ||
|
|
496
|
+
this.convertToInputmaskFormat(this.dateFormat), name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), index.h("div", { key: '5b719fa2d4cf0505a2198fcbfb0aed622f3cd1d8', class: "range-separator" }), index.h("input", { key: 'a126155bb80bcc9926e7b6eae9c02a7f88c447ef', id: this.endInputId, type: "text", placeholder: this.endPlaceholder ||
|
|
497
|
+
this.convertToInputmaskFormat(this.dateFormat), name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (index.h("nv-icon", { key: 'bb7ae5511eb9f2dbba73376ad36063a2143336a6', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '0762e12a2686d58734b00e7fcc176231696d2e31', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'dca1f92d86b3e09d3826c8042c730f2ac1cc51d7', class: "toggle-calendar-icon", name: "calendar", 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: 'ef46e31ef47bb2b9aa485b69b65af2ec93ba94ab', name: "after-input" })), index.h("div", { key: 'b96f6ee83f4d00a1cc74cc2a03a731a557c6fda5', slot: "content" }, index.h("nv-calendar", { key: '0f7222572196deeb5c40899fea3b97dc12180665', ref: el => (this.calendarElement = el), dateFormat: this.dateFormat, value: this.value, 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, selectionType: "range", "data-prevent-navigation": "true" }))), ((this.description && this.description.length > 0) ||
|
|
498
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '17b857ca9a4529b8febd98a9477a6b176c7ba931', class: "description" }, index.h("slot", { key: 'c03f5413d16ca9adac251ad68d5f7a817520a5d9', name: "description" }, this.description))), (this.errorDescription ||
|
|
499
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '4d246d32982bf90043fd3c46a24a2eebd9e2ecd7', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '7cbbc91895e1772e0b1750e61db78b97285f8b85' })));
|
|
481
500
|
}
|
|
482
501
|
get el() { return index.getElement(this); }
|
|
483
502
|
static get watchers() { return {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cm4m8MM1.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
@@ -356,9 +356,9 @@ const NvFielddropdown = class {
|
|
|
356
356
|
//#region RENDER
|
|
357
357
|
render() {
|
|
358
358
|
var _a;
|
|
359
|
-
return (index.h(index.Host, { key: '
|
|
360
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
361
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
359
|
+
return (index.h(index.Host, { key: 'da19368ad4006df880581a7a0d7c1be1d2249008', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '38c0a47d3f85ccb50173a5d5322cc4e5ea577b85', htmlFor: this.inputId }, index.h("slot", { key: '9a97d0960a2f36dd0d9853ed41796708129068ac', name: "label" }, this.label))), index.h("nv-popover", { key: '69aabf648cf0890133c48250d8a851516e4266f9', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '10cca5b4b91cee8f8149b01df3daa4d36d44a85c', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '583d0903e75dcc3255fc29ccde93e117797ce41e', name: "before-input" }), index.h("div", { key: '8b2101b0cfecbff145469cab9a86ec381ee01f00', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '5e2c78f28c2df9c6ab8d4c41fae39faf308d74de', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (index.h("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.getSelectedLabel(), required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onClick: this.handleInputFocus, onKeyDown: this.handleKeyDown })) : (index.h("p", { "data-scope": "focusable", id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && this.open && (index.h("nv-iconbutton", { key: '8b6f29fc7eba80edfba731ea2b5e3a2e23045aae', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (index.h("nv-icon", { key: '8e808491b0aa3fedf657a9009fb94e6e4f46f4fa', name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '2e20d15804b70243e2f83d463dbb6d3c617c5263', "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopover, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '6a9fd16a090be92ef9a003e048db8daec58b7419', name: "after-input" })), index.h("div", { key: '0efb0e793cd3b8d41f5884ffb34a86e0d298f217', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (index.h("ul", null, this.options.map(option => (index.h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (index.h("slot", { name: "content" })))), (this.description ||
|
|
360
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '34e787b02ab0ccb02dafb93e12b600d845c96442', class: "description" }, index.h("slot", { key: 'ac8b3085ac8507c3ae243a71392167851a1d5755', name: "description" }, this.description))), (this.errorDescription ||
|
|
361
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'e1a1bf22b2c5f932a31342493d3b8fbb84f31f1e', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '843a2ccfbaf3037747069918dd990d329ae98fbc', name: "error-description" }, this.errorDescription)))));
|
|
362
362
|
}
|
|
363
363
|
static get formAssociated() { return true; }
|
|
364
364
|
get el() { return index.getElement(this); }
|
package/dist/cjs/{nv-fielddropdownitem.entry-D1YDyF8i.js → nv-fielddropdownitem.entry-m6TjyMp3.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cm4m8MM1.js');
|
|
4
4
|
require('react');
|
|
5
5
|
|
|
6
6
|
const nvFielddropdownitemCss = "nv-fielddropdownitem{display:flex;gap:var(--spacing-2);flex-wrap:wrap;align-items:center;width:100%;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);font-weight:var(--menu-contextual-item-font-weight);font-size:var(--list-dropdown-font-size);line-height:var(--list-dropdown-line-height);color:var(--components-list-dropdown-item-label-default);border-radius:var(--list-dropdown-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem .text-wrapper{display:flex;flex-grow:1;align-items:center;justify-content:space-between}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem nv-icon[data-scope=selected]{color:var(--components-list-dropdown-item-label-default);align-self:center;margin-left:auto}";
|
|
@@ -59,7 +59,7 @@ const NvFielddropdownitem = class {
|
|
|
59
59
|
/****************************************************************************/
|
|
60
60
|
//#region RENDER
|
|
61
61
|
render() {
|
|
62
|
-
return (index.h(index.Host, { key: '
|
|
62
|
+
return (index.h(index.Host, { key: 'a70651c297707bf06023a898dd9f99b81b71e243', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, index.h("slot", { key: '0f4d1b390a7c558ac3348372ad4923829d84019d' }), !this.composed && (index.h("div", { key: 'edbaf2f00b95ae3100aa4578799ea056da28b0c4', class: "text-wrapper" }, index.h("span", { key: 'c7258b0bd06a557602cac32a2f98266326762f9c', "data-scope": "text" }, this.label))), this.selected && (index.h("nv-icon", { key: '3cdf6e8a02eeb6dfa41eeac96d32c6c09ff5e828', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
|
|
63
63
|
}
|
|
64
64
|
get el() { return index.getElement(this); }
|
|
65
65
|
};
|