@nova-design-system/nova-react 3.24.0 → 3.25.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/dist/cjs/dom.utils-CuXVGECR-8VY5SfMZ.js +177 -0
- package/dist/cjs/generated/components.server.js +80 -61
- package/dist/cjs/index-DUlunl9a.js +9696 -0
- package/dist/cjs/index.js +2 -1
- package/dist/cjs/{nv-accordion-item.entry-Bu1tAcCq.js → nv-accordion-item.entry-CqnjIt4R.js} +8 -7
- package/dist/cjs/{nv-accordion.entry-jWjLdX8w.js → nv-accordion.entry-Dx7FmGg_.js} +10 -8
- package/dist/cjs/{nv-alert.entry-E9ZJay_K.js → nv-alert.entry-BL3Pdcxd.js} +6 -4
- package/dist/cjs/nv-avatar.entry-2dFR4I9_.js +68 -0
- package/dist/cjs/nv-badge_2.entry-5FShR2Ax.js +218 -0
- package/dist/cjs/nv-breadcrumb.entry-Cfi32bBT.js +49 -0
- package/dist/cjs/nv-breadcrumbs.entry-BSgn3KUO.js +21 -0
- package/dist/cjs/nv-button.entry-BdQQ_LE7.js +166 -0
- package/dist/cjs/{nv-buttongroup.entry-CuZCRsnV.js → nv-buttongroup.entry-BM8CwXFK.js} +13 -7
- package/dist/cjs/{nv-calendar.entry-CT3mASW6.js → nv-calendar.entry-CeKsMGOa.js} +27 -10
- package/dist/cjs/nv-col.entry-D-h2PGcz.js +38 -0
- package/dist/cjs/{nv-datagrid.entry-CGCEhO8C.js → nv-datagrid.entry-nOBIfqOS.js} +47 -184
- package/dist/cjs/{nv-datagridcolumn.entry-Fsqc7CT_.js → nv-datagridcolumn.entry-BAzTU_KM.js} +2 -2
- package/dist/cjs/{nv-dialog.entry-B6OYcZxQ.js → nv-dialog.entry-Bi2ZVSe2.js} +19 -20
- package/dist/cjs/{nv-dialogfooter_2.entry-C4fP_n2-.js → nv-dialogfooter_2.entry-D6lzC-3S.js} +11 -29
- package/dist/cjs/{nv-drawer.entry-C5O4KvHU.js → nv-drawer.entry-Dp4AfBiF.js} +19 -19
- package/dist/cjs/{nv-drawerfooter_2.entry-C-reYJXG.js → nv-drawerfooter_2.entry-DpWSsq6d.js} +11 -29
- package/dist/cjs/nv-fieldcheckbox.entry-COA3LXnX.js +179 -0
- package/dist/cjs/{nv-fielddate.entry-dqZDBVmm.js → nv-fielddate.entry-B8r5RFXd.js} +15 -13
- package/dist/cjs/{nv-fielddaterange.entry-wNRasXky.js → nv-fielddaterange.entry-C6_Kq93P.js} +15 -13
- package/dist/cjs/{nv-fielddropdown.entry-BA15piWa.js → nv-fielddropdown.entry-B2Dr5zHd.js} +17 -15
- package/dist/cjs/nv-fielddropdownitem.entry-DapivVnR.js +69 -0
- package/dist/cjs/{nv-fieldmultiselect.entry-BWY5xOAd.js → nv-fieldmultiselect.entry-DSpQeiPx.js} +12 -8
- package/dist/cjs/nv-fieldnumber.entry-BwxR9sRr.js +189 -0
- package/dist/cjs/nv-fieldpassword.entry-BOSU-Skh.js +167 -0
- package/dist/cjs/nv-fieldradio.entry-ZFafNY5_.js +105 -0
- package/dist/cjs/{nv-fieldselect.entry-uUIZ6hmN.js → nv-fieldselect.entry-CfWjQAd9.js} +20 -12
- package/dist/cjs/{nv-fieldslider.entry-DnvmxxYY.js → nv-fieldslider.entry-dDPcWUxs.js} +33 -15
- package/dist/cjs/nv-fieldtext.entry-Yaa-mkjJ.js +163 -0
- package/dist/cjs/{nv-fieldtextarea.entry-DU2bWYeg.js → nv-fieldtextarea.entry-Dp_l2pKZ.js} +15 -9
- package/dist/cjs/{nv-fieldtime.entry-DlMNDTht.js → nv-fieldtime.entry-CWxi4Uel.js} +15 -9
- package/dist/cjs/{nv-icon.entry-CnUkRzaA.js → nv-icon.entry-Dci11W9S.js} +4 -4
- package/dist/cjs/nv-iconbutton_2.entry-A6FKFJT_.js +171 -0
- package/dist/cjs/{nv-menu.entry-Dc_FvIx7.js → nv-menu.entry-BHaYP-9M.js} +9 -13
- package/dist/cjs/nv-menuitem.entry-Cm1vvN25.js +59 -0
- package/dist/cjs/nv-notification-bullet.entry-DRlS3Ybc.js +76 -0
- package/dist/cjs/{nv-notification.entry-C3m5p5BL.js → nv-notification.entry-BeDmR-XC.js} +4 -4
- package/dist/cjs/nv-notificationcontainer.entry-C3p_87Dg.js +41 -0
- package/dist/cjs/nv-paginationtable.entry-BzEqQOBa.js +231 -0
- package/dist/cjs/{nv-popover.entry-B0c-2rO4.js → nv-popover.entry-D2oFn9vL.js} +105 -33
- package/dist/cjs/nv-row.entry-hV1kxmrr.js +22 -0
- package/dist/cjs/{nv-sidebar.entry-CiN813gQ.js → nv-sidebar.entry-BJrqJ8K7.js} +10 -6
- package/dist/cjs/nv-sidebarcontent.entry-CPfGF7nx.js +22 -0
- package/dist/cjs/{nv-sidebardivider.entry-B4EMyca5.js → nv-sidebardivider.entry-D2wmzHCO.js} +4 -4
- package/dist/cjs/{nv-sidebarfooter.entry-CHi4qOFe.js → nv-sidebarfooter.entry-C7fqCzjH.js} +4 -4
- package/dist/cjs/nv-sidebargroup.entry-qkXnxhs_.js +23 -0
- package/dist/cjs/{nv-sidebarheader.entry-_7ch0O3G.js → nv-sidebarheader.entry-DBsOmyQ0.js} +4 -4
- package/dist/cjs/{nv-sidebarlogo.entry-Ch9F-JnT.js → nv-sidebarlogo.entry-902Ht3UR.js} +4 -4
- package/dist/cjs/{nv-sidebarnavitem.entry-DVrafSMr.js → nv-sidebarnavitem.entry-CICrllp8.js} +9 -7
- package/dist/cjs/nv-sidebarnavsubitem.entry-Q9jjU_7D.js +35 -0
- package/dist/cjs/{nv-split.entry-0HTslRAX.js → nv-split.entry-BYIsE2wp.js} +10 -6
- package/dist/cjs/nv-stack.entry-DgE5ASGH.js +31 -0
- package/dist/cjs/{nv-table.entry-DH85n8Mc.js → nv-table.entry-DHXBu2n1.js} +4 -4
- package/dist/cjs/{nv-tableheader.entry-CKfocdxD.js → nv-tableheader.entry-BijgOxcO.js} +4 -4
- package/dist/cjs/nv-toggle.entry-CMI1WdvV.js +82 -0
- package/dist/cjs/nv-togglebutton.entry-DAPETEmF.js +66 -0
- package/dist/cjs/{nv-togglebuttongroup.entry-C0NLbsq7.js → nv-togglebuttongroup.entry-CzDI1XCr.js} +13 -9
- package/dist/cjs/nv-tooltip.entry-DPoUP9iL.js +56 -0
- package/dist/components/NvDatatable/NvDatatable.js +29 -8
- package/dist/generated/components.js +11 -0
- package/dist/generated/components.server.js +79 -61
- package/dist/types/components/NvDatatable/types.d.ts +5 -0
- package/dist/types/generated/components.d.ts +52 -46
- package/dist/types/generated/components.server.d.ts +52 -46
- package/package.json +2 -2
- 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-col.entry--pCxkaTh.js +0 -38
- 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-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/{nv-drawerfooter_2.entry-C-reYJXG.js → nv-drawerfooter_2.entry-DpWSsq6d.js}
RENAMED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-DUlunl9a.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: '1a15bd9a6bac74ceb64d57ef7830e4ff8d081770' }, index.h("slot", { key: '72f762cc6d64cc286252da929111b0e86013194f' }, index.h(index.Fragment, { key: '21d8100769c0f84dd5fee916bad8021190f08703' }, !this.undismissable && (index.h("nv-button", { key: '3c5e445643fa1b01fef28fc53f60ffb0d2f6f94c', onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), index.h("nv-button", { key: 'd93583226649f6ac4928c9359d5f0654e0bb6714', 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: '4d292e8a54df0b1dbdac0ace38dac7f24224ebe2', slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (index.h("nv-icon", { key: '412d46f4ef9ef573234b70a1456a91dda1569936', 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: '1c9cd7b1157e63563f07b5b4b58a694b3ee4094d' }, index.h("slot", { key: '97c4b5cd72c240ff25d7f8aa7801a1d68c5ea073' }, index.h(index.Fragment, { key: '75896e1efe1ebe98c3275214d6aaea253afefce0' }, index.h("div", { key: '5bf874923f7cdff2cadcb8d9a352812ee532132d', class: "heading" }, this.heading), index.h("div", { key: '7ca0080c00eaa1bc68df9efe7aeb6ff57da13730', 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-DUlunl9a.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)}`;
|
|
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: '1e4742153edb85a5d5d2e6bd7101240eb5dd354c', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("div", { key: '222f3fed3f6626f3fc67cbae5612c7a8aaa10f65', class: "input-container" }, index.h("input", { key: '62534be4145abdad01e86b9c7d8662e7954ec85a', 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: '848e8e33f9304104c504474cf98a660cb7620081', class: "icon" }, this.checked && !this.indeterminate && (index.h("slot", { key: 'ab36f853010d596c2d34ee65f8c0fb5cab6341aa', name: "checked-icon" }, index.h("svg", { key: '859a903120c84e3e65c5c8e2809e0103d1e36ae0', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '0487c96d2b233e1e6fa1d5481de40fdf9762cca1', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (index.h("slot", { key: 'e6e865f17821b69d7a6dccd832dce1bf170a868b', name: "indeterminate-icon" }, index.h("svg", { key: 'c989f2dc8fef8a4c8cd4fdda9302d70f56b7d627', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: 'fd969c39273b2235bfe38840ef333d01fb2eaef5', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("slot", { key: 'bc2db6ec3ff59680c883ee3cc2967da1a541838b' }), index.h("div", { key: '190ae3a02eb07d0225f858989eb4c033e81bcb68', class: "text-container" }, index.h("slot", { key: 'ff259699df50be0cda8de8f901c8a07f6e61ff2c', name: "main" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '24680fbd2f98953cefc51477c5c968d44df3c6d6', htmlFor: this.inputId, class: clsxChV9xqsO.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '948c7a0ca93a288eb70d5876a3654385dc341a81', name: "label" }, this.label))), (this.description ||
|
|
166
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '70010d156ca492d2127c437ba2b66a381522740f', class: "description" }, index.h("slot", { key: '1d6bacc49c6aa4b81f18c739ed6c7f2161ae64e6', name: "description" }, this.description)))), (this.errorDescription ||
|
|
167
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '65872b7a73f74d0bd1db9e701b7b2a0d4890e096', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '5aeccf82482f24be30e73526512c15b5e727bbd2', 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-DUlunl9a.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: '8898ef05a02d52db7457d17b54a942db3730fc74' }, ((this.label && this.label.length > 0) ||
|
|
408
|
+
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '41f7f75b133b0954b64adb40c777fa34595e1319', htmlFor: this.inputId }, index.h("slot", { key: '4c70dc05926cc39b0898d3e12b756d8ea5c82e9d', name: "label" }, this.label))), index.h("nv-popover", { key: '0cc0878e48231202bc0036fe80d5e9ed334d6782', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '18d889f4c8d164ec11efe254dd61978a0215bdb7', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: 'e3c8537c9692a241f3a3d869e21605460803fe13', name: "before-input" }), index.h("div", { key: '03e01a26472ba46e951290f99de396b02ad1acad', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '440c384b64cdac05fc2f37f65a10d9c3968de67a', name: "leading-input" }), index.h("input", { key: '095fb9dc86347cb5a09065701e17ea760ffa3faa', 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: '33f6f0c755cdecbd26f258d729c406a79301e221', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '52960d4d2266249f43aaa205c140b6b78af86096', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'f840216a37849b661ca76296b1bb78c0aff4f6a0', 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: '87a4c9a1287296001aca41314bc5c9b47d093cad', name: "after-input" })), index.h("div", { key: 'a268e2bca4958172c2cab48aff2267ce6a6090c8', slot: "content" }, index.h("nv-calendar", { key: 'df7288f6bcaf64f44496f1e414f1768fa138603d', 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: '11f0d3702c944c732c4e9cfd4fa7f73311adb32a', class: "description" }, index.h("slot", { key: '964af4f567e755f002d955190f39d39b627519b7', name: "description" }, this.description))), (this.errorDescription ||
|
|
415
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '017cf538acbb319dce67129673ac80ea6a5e1be5', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '34c7ab28d7fb6950113ac9536dfc6052fe2969f9' })));
|
|
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-C6_Kq93P.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-DUlunl9a.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) {
|
|
@@ -468,12 +468,10 @@ const NvFielddaterange = class {
|
|
|
468
468
|
disconnectedCallback() {
|
|
469
469
|
document.removeEventListener('click', this.handleClickOutside);
|
|
470
470
|
}
|
|
471
|
-
/* eslint-disable nova/native-event-listener */
|
|
472
471
|
handleClosePopover(event) {
|
|
473
472
|
event.stopPropagation();
|
|
474
473
|
this.open = false;
|
|
475
474
|
}
|
|
476
|
-
/* eslint-enable nova/native-event-listener */
|
|
477
475
|
//#endregion EVENTS
|
|
478
476
|
/****************************************************************************/
|
|
479
477
|
//#region LISTENERS
|
|
@@ -564,23 +562,27 @@ const NvFielddaterange = class {
|
|
|
564
562
|
? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
|
|
565
563
|
: undefined;
|
|
566
564
|
const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
|
|
567
|
-
return (index.h(index.Host, { key: '
|
|
568
|
-
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '
|
|
565
|
+
return (index.h(index.Host, { key: 'a5b6bfb1024db1794bd68970c4d03bc0d2aa12b2' }, ((this.label && this.label.length > 0) ||
|
|
566
|
+
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'aebf223f1c199a61d70ff07068b1279cd00fd63a', htmlFor: this.startInputId }, index.h("slot", { key: 'b0c75a9509c80b5e983b50ff06f0fd987c0dfb13', name: "label" }, this.label))), index.h("nv-popover", { key: '39d9afe5c5a3d6f1e0a65bc6a25e0123c26bf093', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '83f602a64a7fe08370da5e7c5ca70da6c9b9743d', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '388802ed31223aa0ca1f4f5e709774df936c79d6', name: "before-input" }), index.h("div", { key: '45f13be37efe3eaa15396a247f83652ab671d26d', class: "input-container" }, index.h("slot", { key: 'eb79a369f672e4c6c22bbf8e1f96f1b6ff221599', name: "leading-input" }), index.h("div", { key: '8a231a529fccb39481aa1be3b75aea92a9ba14d1', class: "range-inputs" }, index.h("input", { key: 'd547f462d2a695eb7e07abcbcc2b1ff05e138ff3', id: this.startInputId, type: "text", placeholder: this.startPlaceholder ||
|
|
569
567
|
this.convertToInputmaskFormat(this.dateFormat), name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
|
|
570
568
|
'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: '
|
|
569
|
+
}), autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), index.h("div", { key: '848fa94da2032b0c75973d1e06c4b319f7d6ce1e', class: "range-separator" }), index.h("input", { key: 'e62de0223934c2f75236fb312bcb0520936769f9', id: this.endInputId, type: "text", placeholder: this.endPlaceholder ||
|
|
572
570
|
this.convertToInputmaskFormat(this.dateFormat), name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
|
|
573
571
|
'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: '
|
|
572
|
+
}), value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (index.h("nv-icon", { key: '037dd8133c599ddad1791dc19dd6a5a814e5a51d', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '314e2584ce385f7c27ddd1ded9f093d7bc48d96c', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '5462d036a418755e40cb43ccbf06f1b6d3645c8e', 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: '18dd4d9e3abc1f1580d88b62c1380822865f2b64', name: "after-input" })), index.h("div", { key: '66d37dc2a4158f9e85cc56d68be484ca01eb196c', slot: "content" }, index.h("nv-calendar", { key: 'e3289b5b2018da82d9c25a9427cfdfceb86af5e7', 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) ||
|
|
573
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'd7f58a9351e717508fff5e3bdbccad7fbef0c9a9', class: "description" }, index.h("slot", { key: '5acbe11d1bc2f95e05dad845a0b6d4abe8bd3985', name: "description" }, this.description))), (this.errorDescription ||
|
|
574
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '6c0a8e0dcd93375296be427908e998b61c94bf9c', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: 'fb82d190c29033466f6db6f45596dc16cad28e42' })));
|
|
577
575
|
}
|
|
578
576
|
get el() { return index.getElement(this); }
|
|
579
577
|
static get watchers() { return {
|
|
580
|
-
"value": [
|
|
581
|
-
|
|
578
|
+
"value": [{
|
|
579
|
+
"handleValueChange": 0
|
|
580
|
+
}],
|
|
581
|
+
"open": [{
|
|
582
|
+
"onOpenChanged": 0
|
|
583
|
+
}]
|
|
582
584
|
}; }
|
|
583
585
|
};
|
|
584
|
-
NvFielddaterange.style = nvFielddaterangeCss;
|
|
586
|
+
NvFielddaterange.style = nvFielddaterangeCss();
|
|
585
587
|
|
|
586
588
|
exports.nv_fielddaterange = NvFielddaterange;
|