@nova-design-system/nova-react 3.24.0 → 3.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/dist/cjs/dom.utils-CuXVGECR-8VY5SfMZ.js +177 -0
- package/dist/cjs/generated/components.server.js +82 -62
- package/dist/cjs/index-BeFrXZol.js +9699 -0
- package/dist/cjs/index.js +2 -1
- package/dist/cjs/{nv-accordion-item.entry-Bu1tAcCq.js → nv-accordion-item.entry-DtzjLTCo.js} +8 -7
- package/dist/cjs/{nv-accordion.entry-jWjLdX8w.js → nv-accordion.entry-DRcTfezT.js} +10 -8
- package/dist/cjs/{nv-alert.entry-E9ZJay_K.js → nv-alert.entry-86bfoXVx.js} +6 -4
- package/dist/cjs/nv-avatar.entry-mp2LJ6RA.js +68 -0
- package/dist/cjs/nv-badge_2.entry-BrDaHeqh.js +220 -0
- package/dist/cjs/nv-breadcrumb.entry-B2q7jJy2.js +49 -0
- package/dist/cjs/nv-breadcrumbs.entry-DKzST1uS.js +21 -0
- package/dist/cjs/nv-button.entry-CVgcU-bi.js +166 -0
- package/dist/cjs/{nv-buttongroup.entry-CuZCRsnV.js → nv-buttongroup.entry-CvuBGaGK.js} +12 -6
- package/dist/cjs/{nv-calendar.entry-CT3mASW6.js → nv-calendar.entry-BCcGhxzJ.js} +27 -19
- package/dist/cjs/{nv-col.entry--pCxkaTh.js → nv-col.entry-CzTahRVr.js} +3 -3
- package/dist/cjs/{nv-datagrid.entry-CGCEhO8C.js → nv-datagrid.entry-DWZxNqTE.js} +47 -184
- package/dist/cjs/{nv-datagridcolumn.entry-Fsqc7CT_.js → nv-datagridcolumn.entry-CzCzmdQl.js} +1 -1
- package/dist/cjs/{nv-dialog.entry-B6OYcZxQ.js → nv-dialog.entry-ByVD02QB.js} +19 -20
- package/dist/cjs/{nv-dialogfooter_2.entry-C4fP_n2-.js → nv-dialogfooter_2.entry-BmQcYJsD.js} +11 -29
- package/dist/cjs/{nv-drawer.entry-C5O4KvHU.js → nv-drawer.entry-C15JRJ3N.js} +19 -19
- package/dist/cjs/{nv-drawerfooter_2.entry-C-reYJXG.js → nv-drawerfooter_2.entry-DuDac_Os.js} +11 -29
- package/dist/cjs/nv-fieldcheckbox.entry-CwDOQzSW.js +179 -0
- package/dist/cjs/{nv-fielddate.entry-dqZDBVmm.js → nv-fielddate.entry-DKICGwc0.js} +15 -13
- package/dist/cjs/{nv-fielddaterange.entry-wNRasXky.js → nv-fielddaterange.entry-DGEK8F9p.js} +15 -14
- package/dist/cjs/{nv-fielddropdown.entry-BA15piWa.js → nv-fielddropdown.entry-BLS7lRzD.js} +33 -31
- package/dist/cjs/nv-fielddropdownitem.entry-Bbfi3A8C.js +69 -0
- package/dist/cjs/{nv-fieldmultiselect.entry-BWY5xOAd.js → nv-fieldmultiselect.entry-Cpy7HzlZ.js} +28 -24
- package/dist/cjs/nv-fieldnumber.entry-SbNb4hKr.js +189 -0
- package/dist/cjs/nv-fieldpassword.entry-CPsgagjY.js +167 -0
- package/dist/cjs/nv-fieldradio.entry-DLP-rmKU.js +105 -0
- package/dist/cjs/{nv-fieldselect.entry-uUIZ6hmN.js → nv-fieldselect.entry-DOOO03kM.js} +20 -12
- package/dist/cjs/{nv-fieldslider.entry-DnvmxxYY.js → nv-fieldslider.entry-CpVbxkpo.js} +33 -15
- package/dist/cjs/nv-fieldtext.entry-BpbG4WHv.js +163 -0
- package/dist/cjs/nv-fieldtextarea.entry-BA_RApYN.js +245 -0
- package/dist/cjs/{nv-fieldtime.entry-DlMNDTht.js → nv-fieldtime.entry-DaJfwQtC.js} +15 -9
- package/dist/cjs/{nv-icon.entry-CnUkRzaA.js → nv-icon.entry-DIi792yJ.js} +4 -4
- package/dist/cjs/nv-iconbutton_2.entry-B4xB5WtE.js +171 -0
- package/dist/cjs/{nv-menu.entry-Dc_FvIx7.js → nv-menu.entry-DHWhkWeB.js} +9 -13
- package/dist/cjs/nv-menuitem.entry-CQApuT2D.js +59 -0
- package/dist/cjs/nv-notification-bullet.entry-CnYVWE_Z.js +76 -0
- package/dist/cjs/{nv-notification.entry-C3m5p5BL.js → nv-notification.entry-DraOvzsu.js} +4 -4
- package/dist/cjs/nv-notificationcontainer.entry-BDo-rQLL.js +41 -0
- package/dist/cjs/nv-paginationtable.entry-CS7BhAVe.js +231 -0
- package/dist/cjs/{nv-popover.entry-B0c-2rO4.js → nv-popover.entry-DSyKCLtF.js} +105 -33
- package/dist/cjs/nv-row.entry-D21zN2Vr.js +22 -0
- package/dist/cjs/{nv-sidebar.entry-CiN813gQ.js → nv-sidebar.entry-DpKgnjsJ.js} +10 -6
- package/dist/cjs/nv-sidebarcontent.entry-BWFDcui8.js +22 -0
- package/dist/cjs/{nv-sidebardivider.entry-B4EMyca5.js → nv-sidebardivider.entry-BSzLq-h3.js} +4 -4
- package/dist/cjs/{nv-sidebarfooter.entry-CHi4qOFe.js → nv-sidebarfooter.entry-C3DLHPSQ.js} +4 -4
- package/dist/cjs/nv-sidebargroup.entry-BMYLbCql.js +23 -0
- package/dist/cjs/{nv-sidebarheader.entry-_7ch0O3G.js → nv-sidebarheader.entry-CkUGD-Tw.js} +4 -4
- package/dist/cjs/{nv-sidebarlogo.entry-Ch9F-JnT.js → nv-sidebarlogo.entry-BX1-1S1v.js} +4 -4
- package/dist/cjs/{nv-sidebarnavitem.entry-DVrafSMr.js → nv-sidebarnavitem.entry-CPwt0Njh.js} +9 -7
- package/dist/cjs/nv-sidebarnavsubitem.entry-HZOTB6Tl.js +35 -0
- package/dist/cjs/{nv-split.entry-0HTslRAX.js → nv-split.entry-DdtzktvN.js} +10 -6
- package/dist/cjs/nv-stack.entry-BMLt30Nt.js +31 -0
- package/dist/cjs/{nv-table.entry-DH85n8Mc.js → nv-table.entry-RTiqKRKM.js} +6 -4
- package/dist/cjs/{nv-tableheader.entry-CKfocdxD.js → nv-tableheader.entry-Ci4qo8eY.js} +4 -4
- package/dist/cjs/nv-toggle.entry-s8B7-8P7.js +82 -0
- package/dist/cjs/nv-togglebutton.entry-CyHgU4Wl.js +66 -0
- package/dist/cjs/{nv-togglebuttongroup.entry-C0NLbsq7.js → nv-togglebuttongroup.entry-Bn_9DsdP.js} +13 -9
- package/dist/cjs/nv-tooltip.entry-D6kxXLO-.js +56 -0
- package/dist/components/NvDatatable/NvDatatable.js +29 -8
- package/dist/generated/components.js +11 -0
- package/dist/generated/components.server.js +81 -62
- package/dist/providers/NotificationProvider.js +9 -8
- package/dist/types/components/NvDatatable/types.d.ts +6 -0
- package/dist/types/generated/components.d.ts +52 -46
- package/dist/types/generated/components.server.d.ts +52 -46
- package/package.json +7 -4
- package/dist/cjs/index-kU2nW5aN.js +0 -40286
- package/dist/cjs/nv-avatar.entry-CUX7u0kR.js +0 -68
- package/dist/cjs/nv-badge_2.entry-bxpV5gxE.js +0 -213
- package/dist/cjs/nv-breadcrumb.entry-Cbbb9Qeh.js +0 -46
- package/dist/cjs/nv-breadcrumbs.entry-BTqnp9zO.js +0 -21
- package/dist/cjs/nv-button.entry-upWH19y6.js +0 -162
- package/dist/cjs/nv-fieldcheckbox.entry-bk7UNQny.js +0 -177
- package/dist/cjs/nv-fielddropdownitem.entry-DEWaf9dC.js +0 -72
- package/dist/cjs/nv-fieldnumber.entry-DoYORd0d.js +0 -187
- package/dist/cjs/nv-fieldpassword.entry-CPaLj9aD.js +0 -165
- package/dist/cjs/nv-fieldradio.entry-CvUmEaCa.js +0 -103
- package/dist/cjs/nv-fieldtext.entry-BYAJp3n_.js +0 -163
- package/dist/cjs/nv-fieldtextarea.entry-DU2bWYeg.js +0 -237
- package/dist/cjs/nv-iconbutton_2.entry-hqp4AcRq.js +0 -167
- package/dist/cjs/nv-menuitem.entry-DzMhx6c_.js +0 -60
- package/dist/cjs/nv-notification-bullet.entry-BwhHCMQF.js +0 -76
- package/dist/cjs/nv-notificationcontainer.entry-DTRNn7VE.js +0 -41
- package/dist/cjs/nv-row.entry-CdcjVGZv.js +0 -22
- package/dist/cjs/nv-sidebarcontent.entry-D9hpAhK8.js +0 -22
- package/dist/cjs/nv-sidebargroup.entry-RVqrsyIU.js +0 -23
- package/dist/cjs/nv-sidebarnavsubitem.entry-C0XDAzma.js +0 -35
- package/dist/cjs/nv-stack.entry-CqO7uTQf.js +0 -31
- package/dist/cjs/nv-toggle.entry-BHUl76Im.js +0 -80
- package/dist/cjs/nv-togglebutton.entry-D_9COjY-.js +0 -67
- package/dist/cjs/nv-tooltip.entry-BfViGE_U.js +0 -55
- /package/dist/cjs/{i18n.utils-IlwlcG9l-ku0bScip.js → i18n.utils-CR9MpYzU-ku0bScip.js} +0 -0
package/dist/cjs/{nv-drawerfooter_2.entry-C-reYJXG.js → nv-drawerfooter_2.entry-DuDac_Os.js}
RENAMED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BeFrXZol.js');
|
|
4
4
|
var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
|
|
5
5
|
require('@stencil/react-output-target/runtime');
|
|
6
6
|
require('react');
|
|
7
7
|
require('react-dom');
|
|
8
8
|
|
|
9
|
-
const nvDrawerfooterCss =
|
|
9
|
+
const nvDrawerfooterCss = () => `nv-drawerfooter{display:flex;padding:var(--drawer-padding-y, var(--dialog-footer-padding-top)) var(--drawer-padding-x, var(--dialog-footer-padding-x)) var(--drawer-padding-y, var(--dialog-footer-padding-bottom)) var(--drawer-padding-x, var(--dialog-footer-padding-x));justify-content:flex-end;align-items:flex-end;gap:var(--drawer-gap-y, var(--dialog-footer-gap-y));align-self:stretch}`;
|
|
10
10
|
|
|
11
11
|
const NvDrawerfooter = class {
|
|
12
12
|
constructor(hostRef) {
|
|
@@ -20,7 +20,6 @@ const NvDrawerfooter = class {
|
|
|
20
20
|
this.internals = hostRef.$hostElement$.attachInternals();
|
|
21
21
|
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
22
22
|
}
|
|
23
|
-
this.hasSlot = false;
|
|
24
23
|
/****************************************************************************/
|
|
25
24
|
//#region PROPERTIES
|
|
26
25
|
/**
|
|
@@ -80,37 +79,30 @@ const NvDrawerfooter = class {
|
|
|
80
79
|
//#endregion METHODS
|
|
81
80
|
/****************************************************************************/
|
|
82
81
|
//#region LIFECYCLE
|
|
83
|
-
|
|
84
|
-
// Check if there are any child elements that don't have a slot attribute
|
|
85
|
-
this.hasSlot = Array.from(this.el.childNodes).some(node => {
|
|
86
|
-
return (node.nodeType === Node.ELEMENT_NODE &&
|
|
87
|
-
!node.hasAttribute('slot'));
|
|
88
|
-
});
|
|
89
|
-
}
|
|
90
|
-
componentDidLoad() {
|
|
82
|
+
componentDidRender() {
|
|
91
83
|
// Set the default button type based on the form property
|
|
92
|
-
this.primaryButtonType
|
|
93
|
-
this.
|
|
84
|
+
if (!this.primaryButtonType) {
|
|
85
|
+
this.primaryButtonRef.type = this.form
|
|
94
86
|
? constantsBReL3Lsa.ButtonType.Submit
|
|
95
87
|
: constantsBReL3Lsa.ButtonType.Button;
|
|
88
|
+
}
|
|
96
89
|
}
|
|
97
90
|
//#endregion LIFECYCLE
|
|
98
91
|
/****************************************************************************/
|
|
99
92
|
//#region RENDER
|
|
100
93
|
render() {
|
|
101
|
-
return (index.h(index.Host, { key: '
|
|
94
|
+
return (index.h(index.Host, { key: 'c83bba64c28cf284847c2b726e2d1bb9deb86152' }, index.h("slot", { key: '89e9a548f3cee3c45b8e7874e9d8618b469ce94a' }, index.h(index.Fragment, { key: 'ef18a333ef7c5de05891a265a8ccb85b6913237a' }, !this.undismissable && (index.h("nv-button", { key: 'd69eab0d344bdfb9f2454cc18d953f50b9d65aa2', onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), index.h("nv-button", { key: '8329da9bcbb41cb972c2b2527334086c47a10f93', ref: el => (this.primaryButtonRef = el), 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", { key: '86ac92ef44afe20e540422d3cd0ee45c04c233bc', slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (index.h("nv-icon", { key: '3a48543e903d060ff77d1100df4984db04c0d2cb', slot: "trailing-icon", name: this.trailingIcon, size: "sm" })))))));
|
|
102
95
|
}
|
|
103
96
|
static get formAssociated() { return true; }
|
|
104
97
|
get el() { return index.getElement(this); }
|
|
105
98
|
};
|
|
106
|
-
NvDrawerfooter.style = nvDrawerfooterCss;
|
|
99
|
+
NvDrawerfooter.style = nvDrawerfooterCss();
|
|
107
100
|
|
|
108
|
-
const nvDrawerheaderCss =
|
|
101
|
+
const nvDrawerheaderCss = () => `nv-drawerheader{padding:var(--drawer-padding-y, var(--dialog-header-padding-top)) var(--drawer-padding-x, var(--dialog-header-padding-x)) var(--drawer-padding-y, var(--dialog-header-padding-bottom)) var(--drawer-padding-x, var(--dialog-header-padding-x));justify-content:space-between;align-items:flex-start;align-self:stretch}nv-drawerheader:has(>div:not(.heading):not(.subheading)){padding:0}nv-drawerheader>div[style*=gradient]{background-attachment:local}nv-drawerheader .heading{color:var(--color-content-high-text);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-lg);font-style:normal;font-weight:var(--font-weight-medium-emphasis);padding-right:var(--drawer-header-padding-right, var(--spacing-7));line-height:var(--leading-px-6);letter-spacing:var(--letter-spacing-heading-xs)}nv-drawerheader .subheading{color:var(--color-content-low-text);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-sm);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-sm);}`;
|
|
109
102
|
|
|
110
103
|
const NvDrawerheader = class {
|
|
111
104
|
constructor(hostRef) {
|
|
112
105
|
index.registerInstance(this, hostRef);
|
|
113
|
-
this.hasSlot = false;
|
|
114
106
|
/****************************************************************************/
|
|
115
107
|
//#region PROPERTIES
|
|
116
108
|
/**
|
|
@@ -124,23 +116,13 @@ const NvDrawerheader = class {
|
|
|
124
116
|
}
|
|
125
117
|
//#endregion PROPERTIES
|
|
126
118
|
/****************************************************************************/
|
|
127
|
-
//#region LIFECYCLE
|
|
128
|
-
componentWillLoad() {
|
|
129
|
-
// Check if there are any child elements that don't have a slot attribute
|
|
130
|
-
this.hasSlot = Array.from(this.el.childNodes).some(node => {
|
|
131
|
-
return (node.nodeType === Node.ELEMENT_NODE &&
|
|
132
|
-
!node.hasAttribute('slot'));
|
|
133
|
-
});
|
|
134
|
-
}
|
|
135
|
-
//#endregion LIFECYCLE
|
|
136
|
-
/****************************************************************************/
|
|
137
119
|
//#region RENDER
|
|
138
120
|
render() {
|
|
139
|
-
return (index.h(index.Host, { key: '
|
|
121
|
+
return (index.h(index.Host, { key: '8ada9e8c2b69a74b61b079de6def10bc7504d7f5' }, index.h("slot", { key: '29c79bb789bed32bb395f1d5a8ebccf4838e3f45' }, index.h(index.Fragment, { key: '688bb835bd87de992f5bc4a63f2a857b7f806120' }, index.h("div", { key: '2638fa0871f356cc5ec6e8b72f9812cdbc93ff03', class: "heading" }, this.heading), index.h("div", { key: 'a3c2b292bfc359e2d09ae4d9a88857bc9fa0d8cb', class: "subheading" }, this.subheading)))));
|
|
140
122
|
}
|
|
141
123
|
get el() { return index.getElement(this); }
|
|
142
124
|
};
|
|
143
|
-
NvDrawerheader.style = nvDrawerheaderCss;
|
|
125
|
+
NvDrawerheader.style = nvDrawerheaderCss();
|
|
144
126
|
|
|
145
127
|
exports.nv_drawerfooter = NvDrawerfooter;
|
|
146
128
|
exports.nv_drawerheader = NvDrawerheader;
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-BeFrXZol.js');
|
|
4
|
+
var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
|
|
5
|
+
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
6
|
+
require('@stencil/react-output-target/runtime');
|
|
7
|
+
require('react');
|
|
8
|
+
require('react-dom');
|
|
9
|
+
|
|
10
|
+
const nvFieldcheckboxCss = () => `nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldcheckbox{--nv-fieldcheckbox-border-default:var( --components-form-field-border-default );--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( --components-form-field-background-default );--nv-fieldcheckbox-background-checked:var( --components-form-field-background-checked );--nv-fieldcheckbox-background-disabled:var( --components-form-field-background-disabled );--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-brand);--nv-fieldcheckbox-color-checked:var( --components-form-shape-foreground-default );--nv-fieldcheckbox-color-disabled:var( --components-form-shape-foreground-disabled );--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( --components-form-shape-foreground-disabled-error );--nv-fieldcheckbox-background-checked:var( --components-form-field-background-error );--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[required]:not([required=false])>.text-container label::after,nv-fieldcheckbox[aria-required=true]>.text-container label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}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;text-align:left;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--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:var(--font-family-default), var(--font-family-fallback), 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:var(--font-family-default), var(--font-family-fallback), 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)}@media print{nv-fieldcheckbox>.input-container{color:var(--nv-fieldcheckbox-background-checked)}nv-fieldcheckbox>.input-container input[type=checkbox]:checked,nv-fieldcheckbox>.input-container input[type=checkbox]:indeterminate{background:transparent;border-color:var(--nv-fieldcheckbox-background-checked)}}`;
|
|
11
|
+
|
|
12
|
+
const NvFieldcheckbox = class {
|
|
13
|
+
constructor(hostRef) {
|
|
14
|
+
index.registerInstance(this, hostRef);
|
|
15
|
+
this.checkedChanged = index.createEvent(this, "checkedChanged", 3);
|
|
16
|
+
/**
|
|
17
|
+
* When true, the label will be placed before the checkbox.
|
|
18
|
+
* @deprecated Use `labelPlacement = end` instead.
|
|
19
|
+
* */
|
|
20
|
+
this.labelBefore = false;
|
|
21
|
+
//#endregion DEPRECATED
|
|
22
|
+
/****************************************************************************/
|
|
23
|
+
//#region PROPERTIES
|
|
24
|
+
/**
|
|
25
|
+
* Sets the ID for the radio button’s input element and the for attribute of
|
|
26
|
+
* the associated label. If no ID is provided, a random one will be
|
|
27
|
+
* automatically generated to ensure unique identification, facilitating
|
|
28
|
+
* proper label association and accessibility.
|
|
29
|
+
*/
|
|
30
|
+
this.inputId = v4BdYh22OP.v4();
|
|
31
|
+
/**
|
|
32
|
+
* Hides the label visually while still keeping it available for screen
|
|
33
|
+
* readers.
|
|
34
|
+
*/
|
|
35
|
+
this.hideLabel = false;
|
|
36
|
+
/**
|
|
37
|
+
* Signals that there is an error associated with the checkbox, which can
|
|
38
|
+
* trigger visual cues.
|
|
39
|
+
* @validator error
|
|
40
|
+
*/
|
|
41
|
+
this.error = false;
|
|
42
|
+
/**
|
|
43
|
+
* Indicates whether the checkbox is checked or not.
|
|
44
|
+
*/
|
|
45
|
+
this.checked = false;
|
|
46
|
+
/**
|
|
47
|
+
* Indicates whether the checkbox is in an indeterminate state, typically used
|
|
48
|
+
* for hierarchical checkboxes.
|
|
49
|
+
*/
|
|
50
|
+
this.indeterminate = false;
|
|
51
|
+
/**
|
|
52
|
+
* Disables the checkbox, preventing user interaction.
|
|
53
|
+
*/
|
|
54
|
+
this.disabled = false;
|
|
55
|
+
/**
|
|
56
|
+
* Sets the checkbox to read-only, preventing user changes but still allowing
|
|
57
|
+
* focus and selection of text.
|
|
58
|
+
*/
|
|
59
|
+
this.readonly = false;
|
|
60
|
+
/**
|
|
61
|
+
* Marks the checkbox as required, indicating that it must be checked for
|
|
62
|
+
* form submission.
|
|
63
|
+
* @note This uses the native HTML `required` attribute, which triggers browser validation.
|
|
64
|
+
*/
|
|
65
|
+
this.required = false;
|
|
66
|
+
/**
|
|
67
|
+
* Marks the checkbox as required for accessibility purposes without triggering
|
|
68
|
+
* native HTML validation. Use this when implementing custom validation logic.
|
|
69
|
+
* @note When set, this uses `aria-required` instead of the native `required` attribute.
|
|
70
|
+
* This allows developers to implement custom validation while maintaining accessibility.
|
|
71
|
+
* @note If this prop is not explicitly set, the component will check for the HTML attribute
|
|
72
|
+
* 'aria-required' directly to determine if it should be applied.
|
|
73
|
+
*/
|
|
74
|
+
this.ariaRequiredAttr = false;
|
|
75
|
+
/**
|
|
76
|
+
* Applies focus to the input field as soon as the component is mounted. This
|
|
77
|
+
* is equivalent to setting the native autofocus attribute on an <input>
|
|
78
|
+
* element.
|
|
79
|
+
*/
|
|
80
|
+
this.autofocus = false;
|
|
81
|
+
}
|
|
82
|
+
//#endregion EVENTS
|
|
83
|
+
/****************************************************************************/
|
|
84
|
+
//#region LISTENERS
|
|
85
|
+
/**
|
|
86
|
+
* Listens for the change event on the checkbox input element and updates the
|
|
87
|
+
* checked state.
|
|
88
|
+
* @param {Event} event - The change event.
|
|
89
|
+
*/
|
|
90
|
+
handleChange(event) {
|
|
91
|
+
const target = event.target;
|
|
92
|
+
if (target.type === 'checkbox' && target.id === this.inputId) {
|
|
93
|
+
if (this.readonly || this.disabled) {
|
|
94
|
+
event.preventDefault();
|
|
95
|
+
return;
|
|
96
|
+
}
|
|
97
|
+
if (this.indeterminate) {
|
|
98
|
+
this.indeterminate = false;
|
|
99
|
+
}
|
|
100
|
+
this.checked = target.checked;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
//#endregion LISTENERS
|
|
104
|
+
/****************************************************************************/
|
|
105
|
+
//#region WATCHERS
|
|
106
|
+
/**
|
|
107
|
+
* Watches for changes to the checked state and emits the new value.
|
|
108
|
+
* @param {boolean} checked - The new value of the checked state.
|
|
109
|
+
*/
|
|
110
|
+
onCheckedChanged(checked) {
|
|
111
|
+
this.checkedChanged.emit(checked);
|
|
112
|
+
}
|
|
113
|
+
//#endregion WATCHERS
|
|
114
|
+
/****************************************************************************/
|
|
115
|
+
//#region LIFECYCLE
|
|
116
|
+
componentWillRender() {
|
|
117
|
+
if (this.message) {
|
|
118
|
+
this.description = this.message;
|
|
119
|
+
}
|
|
120
|
+
if (this.labelBefore) {
|
|
121
|
+
this.labelPlacement = 'before';
|
|
122
|
+
}
|
|
123
|
+
if (this.validation) {
|
|
124
|
+
this.errorDescription = this.validation;
|
|
125
|
+
this.error = true;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
//#endregion LIFECYCLE
|
|
129
|
+
/****************************************************************************/
|
|
130
|
+
//#region RENDER
|
|
131
|
+
render() {
|
|
132
|
+
// Check aria-required from multiple sources:
|
|
133
|
+
// 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set
|
|
134
|
+
// 2. JavaScript prop (when prop is explicitly set via JavaScript)
|
|
135
|
+
// We use hasAttribute to determine if the attribute was explicitly set by the user,
|
|
136
|
+
// since the prop now defaults to false (to maintain Blazor compatibility)
|
|
137
|
+
const hasAriaRequiredAttr = this.el.hasAttribute('aria-required') ||
|
|
138
|
+
this.el.hasAttribute('aria-required-attr');
|
|
139
|
+
const ariaRequiredFromAttr = hasAriaRequiredAttr
|
|
140
|
+
? this.el.getAttribute('aria-required') ||
|
|
141
|
+
this.el.getAttribute('aria-required-attr')
|
|
142
|
+
: null;
|
|
143
|
+
// Use aria-required if the attribute was explicitly set
|
|
144
|
+
// With reflect: true, setting the prop will also set the attribute
|
|
145
|
+
const useAriaRequired = hasAriaRequiredAttr;
|
|
146
|
+
// Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)
|
|
147
|
+
// If attribute doesn't exist, the prop was never set and we don't use aria-required
|
|
148
|
+
const ariaRequiredAttrValue = hasAriaRequiredAttr
|
|
149
|
+
? ariaRequiredFromAttr
|
|
150
|
+
: null;
|
|
151
|
+
// Determine which attributes to use
|
|
152
|
+
// If aria-required HTML attribute is present, use it (convert string to boolean)
|
|
153
|
+
// If required is set and aria-required is not "false", use native required
|
|
154
|
+
// If aria-required is "false", don't use native required even if required is set
|
|
155
|
+
const ariaRequiredValue = useAriaRequired
|
|
156
|
+
? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
|
|
157
|
+
: undefined;
|
|
158
|
+
const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
|
|
159
|
+
return (index.h(index.Host, { key: '6ee6fed9bb078e32a40ac2d6c1c4baf2f1825be1', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("div", { key: '21b122c2c36382824eea7e66f2382cd333c0831c', class: "input-container" }, index.h("input", { key: '727fd8a8321e4259d44a8ffe362aa23bdb2e640e', 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 && !useNativeRequired, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
|
|
160
|
+
'aria-required': String(ariaRequiredValue),
|
|
161
|
+
}), indeterminate: this.indeterminate, ref: el => {
|
|
162
|
+
if (el) {
|
|
163
|
+
el.indeterminate = this.indeterminate;
|
|
164
|
+
}
|
|
165
|
+
} }), index.h("span", { key: '74e19f64867b671e2f632780726f8cab9c6e485e', class: "icon" }, this.checked && !this.indeterminate && (index.h("slot", { key: '960d296f7caa4abe6f4268c41c09b29b4c0454da', name: "checked-icon" }, index.h("svg", { key: '5a6875f34252b36490daabfdc600b4aa748c6f2e', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '8acd040c77cb913d2904daaac86038171e338761', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (index.h("slot", { key: '42163fea08858131d3a4e74c119565e70d850cf2', name: "indeterminate-icon" }, index.h("svg", { key: '86d0ce5504ea9e8a82ba6c85b7729ce8161aaecf', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: 'ce47ed03186447bc90321a2aa8343a3377a6ade7', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("slot", { key: 'b41cb04185643e5dada6da24e5fc325905b53d08' }), index.h("div", { key: '57509a30441ab9de0c1949f6392dab34674ce91c', class: "text-container" }, index.h("slot", { key: '81ee7728a5a814371dab853d377e249afb5eab7e', name: "main" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'f428aeaedd1e70f7b9626c54f3995b2998cde140', htmlFor: this.inputId, class: clsxChV9xqsO.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: 'e36c574ba6041b7ab0dee5c02a025370f21d947a', name: "label" }, this.label))), (this.description ||
|
|
166
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'fed901aef5e5ac91b5ac04fc8751585b55031666', class: "description" }, index.h("slot", { key: '84fdd3bd94f0249f3ed821e1849be6a6f192fb72', name: "description" }, this.description)))), (this.errorDescription ||
|
|
167
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'fc0526ddbbd84e08c18ee27c0b4be0533af0fe22', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'd288116644ed450bdab0be20a3e7def7481e6c8b', name: "error-description" }, this.errorDescription))))));
|
|
168
|
+
}
|
|
169
|
+
static get formAssociated() { return true; }
|
|
170
|
+
get el() { return index.getElement(this); }
|
|
171
|
+
static get watchers() { return {
|
|
172
|
+
"checked": [{
|
|
173
|
+
"onCheckedChanged": 0
|
|
174
|
+
}]
|
|
175
|
+
}; }
|
|
176
|
+
};
|
|
177
|
+
NvFieldcheckbox.style = nvFieldcheckboxCss();
|
|
178
|
+
|
|
179
|
+
exports.nv_fieldcheckbox = NvFieldcheckbox;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BeFrXZol.js');
|
|
4
4
|
var inputmaskCSo292ul = require('./inputmask-CSo292ul-DlvupPk6.js');
|
|
5
5
|
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
6
6
|
require('@stencil/react-output-target/runtime');
|
|
@@ -8,7 +8,7 @@ require('react');
|
|
|
8
8
|
require('react-dom');
|
|
9
9
|
require('./_commonjsHelpers-B85MJLTf-CFO10eej.js');
|
|
10
10
|
|
|
11
|
-
const nvFielddateCss =
|
|
11
|
+
const nvFielddateCss = () => `nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}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;max-width:480px}nv-fielddate[fluid]:not([fluid=false]){max-width:unset}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-in-field)}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,nv-fielddate[aria-required=true] label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}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:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-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 nv-popover .datepicker-container{border:none}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){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:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);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:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fielddate .input-wrapper .input-container input{}nv-fielddate .input-wrapper .input-container input[type=password]::-ms-clear,nv-fielddate .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddate .input-wrapper .input-container input{font-feature-settings:"tnum";font-family:"TTNorms Pro Mono", monospace}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-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fielddate .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddate .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddate .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}`;
|
|
12
12
|
|
|
13
13
|
const NvFielddate = class {
|
|
14
14
|
constructor(hostRef) {
|
|
@@ -343,12 +343,10 @@ const NvFielddate = class {
|
|
|
343
343
|
//#endregion WATCHERS
|
|
344
344
|
/****************************************************************************/
|
|
345
345
|
//#region LISTENERS
|
|
346
|
-
/* eslint-disable nova/native-event-listener */
|
|
347
346
|
handleClosePopover(event) {
|
|
348
347
|
event.stopPropagation();
|
|
349
348
|
this.open = false;
|
|
350
349
|
}
|
|
351
|
-
/* eslint-enable nova/native-event-listener */
|
|
352
350
|
handleDocumentClick(event) {
|
|
353
351
|
this.handleClickOutside(event);
|
|
354
352
|
}
|
|
@@ -406,22 +404,26 @@ const NvFielddate = class {
|
|
|
406
404
|
? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
|
|
407
405
|
: undefined;
|
|
408
406
|
const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
|
|
409
|
-
return (index.h(index.Host, { key: '
|
|
410
|
-
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '
|
|
407
|
+
return (index.h(index.Host, { key: '3c13437365ba5c194e382050d83a01c2610f901d' }, ((this.label && this.label.length > 0) ||
|
|
408
|
+
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '82bccae1ff2044e8b099789e4403857772f8449c', htmlFor: this.inputId }, index.h("slot", { key: '3a2065e072ba6acb2ca5a162b877d05d30f93815', name: "label" }, this.label))), index.h("nv-popover", { key: 'afd5fc8f78a46562b318f2f2d48306efa2275fac', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '748395cd864e8ee8f224460a420379b9f8ea362e', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '8c1f2baa6a33861d83c9497ee39a6a2a08b27d2e', name: "before-input" }), index.h("div", { key: '91dfd2e870fc59e0949ff1ae2b66e0a3c89ec203', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '7e7a11aacf727512ccbf4c5fd149f9ccbf161c0d', name: "leading-input" }), index.h("input", { key: '47b9d83bb4942604c3e8244995d032743ad84e78', id: this.inputId, ref: this.setInputRef, placeholder: this.placeholder ||
|
|
411
409
|
this.convertToInputmaskFormat(this.dateFormat), name: this.name, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
|
|
412
410
|
'aria-required': String(ariaRequiredValue),
|
|
413
|
-
}), autofocus: this.autofocus, onInput: this.handleInput, onFocus: this.handleFocus, "data-scope": "date" }), this.error && (index.h("nv-icon", { key: '
|
|
411
|
+
}), autofocus: this.autofocus, onInput: this.handleInput, onFocus: this.handleFocus, "data-scope": "date" }), this.error && (index.h("nv-icon", { key: '0c8badb4887475f3ce278db7dd1bb9d4f4db1948', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '908c9595d2858b5915ea9625b365d98c9076175d', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '2acbfe40a0db4b070491e91fa69b9a21fee5111d', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
|
|
414
412
|
,
|
|
415
|
-
size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '
|
|
416
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
417
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
413
|
+
size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: 'fb9ae11ed575835053e11a28136c545fefa1f185', name: "after-input" })), index.h("div", { key: '4ed455b92288d64e1d243e0d2268251f183523c9', slot: "content" }, index.h("nv-calendar", { key: '1af9d63edd9c95414ddcba5e3988a1bf42fae4bb', onSingleDateChange: this.handleSingleDateChange.bind(this), 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) ||
|
|
414
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '3a124e7dd1d5216ac586893eb2d7ae8383051cdc', class: "description" }, index.h("slot", { key: '13f0b8e29875e369734799370fbd54c27becebfb', name: "description" }, this.description))), (this.errorDescription ||
|
|
415
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '78dbbd76ada0c99907c9725fc82f2edfea41830c', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '2c7f702581d6645cb9e6e0e94effa2ea067f049a' })));
|
|
418
416
|
}
|
|
419
417
|
get el() { return index.getElement(this); }
|
|
420
418
|
static get watchers() { return {
|
|
421
|
-
"value": [
|
|
422
|
-
|
|
419
|
+
"value": [{
|
|
420
|
+
"handleValueChange": 0
|
|
421
|
+
}],
|
|
422
|
+
"open": [{
|
|
423
|
+
"handleOpenChange": 0
|
|
424
|
+
}]
|
|
423
425
|
}; }
|
|
424
426
|
};
|
|
425
|
-
NvFielddate.style = nvFielddateCss;
|
|
427
|
+
NvFielddate.style = nvFielddateCss();
|
|
426
428
|
|
|
427
429
|
exports.nv_fielddate = NvFielddate;
|
package/dist/cjs/{nv-fielddaterange.entry-wNRasXky.js → nv-fielddaterange.entry-DGEK8F9p.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BeFrXZol.js');
|
|
4
4
|
var inputmaskCSo292ul = require('./inputmask-CSo292ul-DlvupPk6.js');
|
|
5
5
|
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
6
6
|
require('@stencil/react-output-target/runtime');
|
|
@@ -8,7 +8,7 @@ require('react');
|
|
|
8
8
|
require('react-dom');
|
|
9
9
|
require('./_commonjsHelpers-B85MJLTf-CFO10eej.js');
|
|
10
10
|
|
|
11
|
-
const nvFielddaterangeCss = "nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fielddaterange{--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;max-width:480px}nv-fielddaterange[fluid]:not([fluid=false]){max-width:unset}nv-fielddaterange[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-fielddaterange[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-in-field)}nv-fielddaterange[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-fielddaterange[required]:not([required=false]) label::after,nv-fielddaterange[aria-required=true] label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fielddaterange label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-fielddaterange nv-popover{width:100%;display:block}nv-fielddaterange nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto;z-index:2}nv-fielddaterange nv-popover [slot=content]{display:block;width:100%}nv-fielddaterange .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-fielddaterange .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-fielddaterange .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddaterange .input-wrapper .input-container:focus-within,nv-fielddaterange .input-wrapper .input-container:focus-within:hover,nv-fielddaterange .input-wrapper .input-container:focus,nv-fielddaterange .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-fielddaterange .input-wrapper .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddaterange .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-fielddaterange .input-wrapper .input-container:focus-within,nv-fielddaterange .input-wrapper .input-container:focus-within:hover,nv-fielddaterange .input-wrapper .input-container:focus,nv-fielddaterange .input-wrapper .input-container:focus:hover{box-shadow:none;border-color:var(--nv-field-border-default)}nv-fielddaterange .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:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);width:100%}nv-fielddaterange .input-wrapper .input-container input:focus{outline:none}nv-fielddaterange .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fielddaterange .input-wrapper .input-container input{}nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-clear,nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddaterange .input-wrapper .input-container input{width:100%}nv-fielddaterange .input-wrapper .input-container input:focus-within,nv-fielddaterange .input-wrapper .input-container input:focus-within:hover,nv-fielddaterange .input-wrapper .input-container input:focus,nv-fielddaterange .input-wrapper .input-container input:focus:hover{outline:var(--focus-outline-stroke) solid var(--nv-field-border-focus);outline-offset:0px}nv-fielddaterange .input-wrapper .input-container input:focus-within~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus-within:hover~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus:hover~.range-separator{background-color:transparent}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fielddaterange .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddaterange .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddaterange .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fielddaterange .range-inputs{display:flex;align-items:center;gap:0;width:100%}nv-fielddaterange .range-inputs:focus-within{z-index:1}nv-fielddaterange .range-inputs input{flex:1;border:none;outline:none;padding:0;font-size:var(--form-field-font-size);color:var(--components-form-field-content-text);background:transparent;min-width:0}nv-fielddaterange .range-inputs input::placeholder{color:var(--components-form-field-content-placeholder)}nv-fielddaterange .range-inputs input:disabled{cursor:not-allowed;color:var(--components-form-field-content-text);background-color:var(--components-form-field-background-disabled)}nv-fielddaterange .range-inputs .range-separator{width:1px;height:1.5rem;background-color:var(--color-content-medium-border)}";
|
|
11
|
+
const nvFielddaterangeCss = () => `nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fielddaterange{--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;max-width:480px}nv-fielddaterange[fluid]:not([fluid=false]){max-width:unset}nv-fielddaterange[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-fielddaterange[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-in-field)}nv-fielddaterange[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-fielddaterange[required]:not([required=false]) label::after,nv-fielddaterange[aria-required=true] label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fielddaterange label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-fielddaterange nv-popover{width:100%;display:block}nv-fielddaterange nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto;z-index:2}nv-fielddaterange nv-popover [slot=content]{display:block;width:100%}nv-fielddaterange .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-fielddaterange .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-fielddaterange .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddaterange .input-wrapper .input-container:focus-within,nv-fielddaterange .input-wrapper .input-container:focus-within:hover,nv-fielddaterange .input-wrapper .input-container:focus,nv-fielddaterange .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-fielddaterange .input-wrapper .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddaterange .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-fielddaterange .input-wrapper .input-container:focus-within,nv-fielddaterange .input-wrapper .input-container:focus-within:hover,nv-fielddaterange .input-wrapper .input-container:focus,nv-fielddaterange .input-wrapper .input-container:focus:hover{box-shadow:none;border-color:var(--nv-field-border-default)}nv-fielddaterange .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:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);width:100%}nv-fielddaterange .input-wrapper .input-container input:focus{outline:none}nv-fielddaterange .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fielddaterange .input-wrapper .input-container input{}nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-clear,nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddaterange .input-wrapper .input-container input{width:100%}nv-fielddaterange .input-wrapper .input-container input:focus-within,nv-fielddaterange .input-wrapper .input-container input:focus-within:hover,nv-fielddaterange .input-wrapper .input-container input:focus,nv-fielddaterange .input-wrapper .input-container input:focus:hover{outline:var(--focus-outline-stroke) solid var(--nv-field-border-focus);outline-offset:0px}nv-fielddaterange .input-wrapper .input-container input:focus-within~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus-within:hover~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus:hover~.range-separator{background-color:transparent}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fielddaterange .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddaterange .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddaterange .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fielddaterange .range-inputs{display:flex;align-items:center;gap:0;width:100%}nv-fielddaterange .range-inputs:focus-within{z-index:1}nv-fielddaterange .range-inputs input{flex:1;border:none;outline:none;padding:0;font-size:var(--form-field-font-size);color:var(--components-form-field-content-text);background:transparent;min-width:0}nv-fielddaterange .range-inputs input::placeholder{color:var(--components-form-field-content-placeholder)}nv-fielddaterange .range-inputs input:disabled{cursor:not-allowed;color:var(--components-form-field-content-text);background-color:var(--components-form-field-background-disabled)}nv-fielddaterange .range-inputs .range-separator{width:1px;height:1.5rem;background-color:var(--color-content-medium-border)}`;
|
|
12
12
|
|
|
13
13
|
const NvFielddaterange = class {
|
|
14
14
|
constructor(hostRef) {
|
|
@@ -65,7 +65,6 @@ const NvFielddaterange = class {
|
|
|
65
65
|
/**
|
|
66
66
|
* The initial value of the date range (in string format).
|
|
67
67
|
*/
|
|
68
|
-
// eslint-disable-next-line @stencil-community/strict-mutable
|
|
69
68
|
this.value = '';
|
|
70
69
|
/**
|
|
71
70
|
* The current value of the start date in string format.
|
|
@@ -468,12 +467,10 @@ const NvFielddaterange = class {
|
|
|
468
467
|
disconnectedCallback() {
|
|
469
468
|
document.removeEventListener('click', this.handleClickOutside);
|
|
470
469
|
}
|
|
471
|
-
/* eslint-disable nova/native-event-listener */
|
|
472
470
|
handleClosePopover(event) {
|
|
473
471
|
event.stopPropagation();
|
|
474
472
|
this.open = false;
|
|
475
473
|
}
|
|
476
|
-
/* eslint-enable nova/native-event-listener */
|
|
477
474
|
//#endregion EVENTS
|
|
478
475
|
/****************************************************************************/
|
|
479
476
|
//#region LISTENERS
|
|
@@ -564,23 +561,27 @@ const NvFielddaterange = class {
|
|
|
564
561
|
? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
|
|
565
562
|
: undefined;
|
|
566
563
|
const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
|
|
567
|
-
return (index.h(index.Host, { key: '
|
|
568
|
-
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '
|
|
564
|
+
return (index.h(index.Host, { key: 'ff398fcfbbe95e5665b774fe43350acbbc348fe9' }, ((this.label && this.label.length > 0) ||
|
|
565
|
+
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '2b1909b93047611192bb66f574bdda3b206e2385', htmlFor: this.startInputId }, index.h("slot", { key: '8195acf71bec4897fca7c4617eb0de096e88b191', name: "label" }, this.label))), index.h("nv-popover", { key: 'ba36048cf5a34974f4f4deb66fb0d735988e5b53', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '14b6d78ac81001bd174bad38172a8a1a1f347731', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: 'fb016c89c6f8f99ae3c67917fc623bd5ebfd55fc', name: "before-input" }), index.h("div", { key: 'ba782a5e283e468467ccdb9b571046cd2f4852e9', class: "input-container" }, index.h("slot", { key: '2adfa150e03b07b3fc68dcf58e8033b7945161a0', name: "leading-input" }), index.h("div", { key: '0276764deeb85f4211ac741f3eb5fef2f9fbcb43', class: "range-inputs" }, index.h("input", { key: 'b752bb09fefcd173403cb11db40d0aabd25e1388', id: this.startInputId, type: "text", placeholder: this.startPlaceholder ||
|
|
569
566
|
this.convertToInputmaskFormat(this.dateFormat), name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
|
|
570
567
|
'aria-required': String(ariaRequiredValue),
|
|
571
|
-
}), autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), index.h("div", { key: '
|
|
568
|
+
}), autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), index.h("div", { key: 'd5be46903d09c3b189dc4e7ee8ddad170c0f6286', class: "range-separator" }), index.h("input", { key: '11b9a3838149854e68ae7c9d96aedbaaba84a90d', id: this.endInputId, type: "text", placeholder: this.endPlaceholder ||
|
|
572
569
|
this.convertToInputmaskFormat(this.dateFormat), name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
|
|
573
570
|
'aria-required': String(ariaRequiredValue),
|
|
574
|
-
}), value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (index.h("nv-icon", { key: '
|
|
575
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
576
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
571
|
+
}), value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (index.h("nv-icon", { key: '26b42abdeafd75930a5ca607d24337b6b3c10ac2', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '1af99ccf21b9f8089204e9e97c2453b2bdeffd29', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '38b70d2b9f4ec16ff1707dc2b05ceae806646541', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '2ab6a03f44f04595763f4a6cbb8bc142578e1b3a', name: "after-input" })), index.h("div", { key: '1fc0213d712a8560dee995c4d26c7d9944af650b', slot: "content" }, index.h("nv-calendar", { key: 'd883272405391bec569516321fd2eae93dac817a', ref: el => (this.calendarElement = el), onRangeDateChange: this.handleRangeDateChange.bind(this), onValueChanged: this.handleCalendarValueChanged.bind(this), onSingleDateChange: this.handleCancelDateChange.bind(this), 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) ||
|
|
572
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'd0f9852ccd37202db9653b338cf850ba44365ddf', class: "description" }, index.h("slot", { key: 'cff092ce15f1f90f246de859fea30d3714fd4520', name: "description" }, this.description))), (this.errorDescription ||
|
|
573
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'c9dfd25d6784cca037337e7ffe28fc4ac1d33fd5', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '8123f07bf03ae219917f2e9f8146142bd8781bd4' })));
|
|
577
574
|
}
|
|
578
575
|
get el() { return index.getElement(this); }
|
|
579
576
|
static get watchers() { return {
|
|
580
|
-
"value": [
|
|
581
|
-
|
|
577
|
+
"value": [{
|
|
578
|
+
"handleValueChange": 0
|
|
579
|
+
}],
|
|
580
|
+
"open": [{
|
|
581
|
+
"onOpenChanged": 0
|
|
582
|
+
}]
|
|
582
583
|
}; }
|
|
583
584
|
};
|
|
584
|
-
NvFielddaterange.style = nvFielddaterangeCss;
|
|
585
|
+
NvFielddaterange.style = nvFielddaterangeCss();
|
|
585
586
|
|
|
586
587
|
exports.nv_fielddaterange = NvFielddaterange;
|