@nova-design-system/nova-react 3.25.0 → 3.27.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/generated/components.server.js +21 -1
- package/dist/cjs/{index-DUlunl9a.js → index-clzdrCkN.js} +270 -253
- package/dist/cjs/index.js +2 -1
- package/dist/cjs/{nv-accordion-item.entry-CqnjIt4R.js → nv-accordion-item.entry-Gn0QFETn.js} +1 -1
- package/dist/cjs/{nv-accordion.entry-Dx7FmGg_.js → nv-accordion.entry-BooppL5C.js} +1 -1
- package/dist/cjs/{nv-alert.entry-BL3Pdcxd.js → nv-alert.entry-CDmHhq86.js} +1 -1
- package/dist/cjs/{nv-avatar.entry-2dFR4I9_.js → nv-avatar.entry-pYMjQvxK.js} +1 -1
- package/dist/cjs/{nv-badge_2.entry-5FShR2Ax.js → nv-badge_2.entry-BneUUyR7.js} +6 -4
- package/dist/cjs/{nv-breadcrumb.entry-Cfi32bBT.js → nv-breadcrumb.entry-B7CGcJ_l.js} +2 -2
- package/dist/cjs/{nv-breadcrumbs.entry-BSgn3KUO.js → nv-breadcrumbs.entry-BNKz4ehX.js} +2 -2
- package/dist/cjs/{nv-button.entry-BdQQ_LE7.js → nv-button.entry-DDCkNY_S.js} +2 -2
- package/dist/cjs/{nv-buttongroup.entry-BM8CwXFK.js → nv-buttongroup.entry-Bio-SWcx.js} +3 -3
- package/dist/cjs/{nv-calendar.entry-CeKsMGOa.js → nv-calendar.entry-BoNFEz6W.js} +3 -12
- package/dist/cjs/{nv-col.entry-D-h2PGcz.js → nv-col.entry-BHTqFTHl.js} +2 -2
- package/dist/cjs/{nv-datagrid.entry-nOBIfqOS.js → nv-datagrid.entry-Bw_sqaMu.js} +3 -3
- package/dist/cjs/{nv-datagridcolumn.entry-BAzTU_KM.js → nv-datagridcolumn.entry-Z-RXn3ak.js} +2 -2
- package/dist/cjs/{nv-dialog.entry-Bi2ZVSe2.js → nv-dialog.entry-ByZkK4F9.js} +16 -3
- package/dist/cjs/{nv-dialogfooter_2.entry-D6lzC-3S.js → nv-dialogfooter_2.entry-Bddcz6HA.js} +3 -3
- package/dist/cjs/{nv-drawer.entry-Dp4AfBiF.js → nv-drawer.entry-660dihzy.js} +2 -2
- package/dist/cjs/{nv-drawerfooter_2.entry-DpWSsq6d.js → nv-drawerfooter_2.entry-D6EA-3-u.js} +3 -3
- package/dist/cjs/{nv-fieldcheckbox.entry-COA3LXnX.js → nv-fieldcheckbox.entry-Bm6qurcS.js} +6 -6
- package/dist/cjs/{nv-fielddate.entry-B8r5RFXd.js → nv-fielddate.entry-DW9RQ_dD.js} +7 -7
- package/dist/cjs/{nv-fielddaterange.entry-C6_Kq93P.js → nv-fielddaterange.entry-m3dY0P2v.js} +7 -8
- package/dist/cjs/{nv-fielddropdown.entry-B2Dr5zHd.js → nv-fielddropdown.entry-DkARzQix.js} +21 -21
- package/dist/cjs/{nv-fielddropdownitem.entry-DapivVnR.js → nv-fielddropdownitem.entry-DKG1bO2H.js} +2 -2
- package/dist/cjs/{nv-fieldmultiselect.entry-DSpQeiPx.js → nv-fieldmultiselect.entry-B4As0NxI.js} +17 -17
- package/dist/cjs/{nv-fieldnumber.entry-BwxR9sRr.js → nv-fieldnumber.entry-DHBPKUcr.js} +5 -5
- package/dist/cjs/{nv-fieldpassword.entry-BOSU-Skh.js → nv-fieldpassword.entry-DxEaIvRh.js} +5 -5
- package/dist/cjs/nv-fieldradio.entry-MSrPlSzv.js +105 -0
- package/dist/cjs/{nv-fieldselect.entry-CfWjQAd9.js → nv-fieldselect.entry-qMAtqdcr.js} +6 -6
- package/dist/cjs/{nv-fieldslider.entry-dDPcWUxs.js → nv-fieldslider.entry-CHdMG-lt.js} +4 -4
- package/dist/cjs/{nv-fieldtext.entry-Yaa-mkjJ.js → nv-fieldtext.entry-tbYFUJP9.js} +5 -5
- package/dist/cjs/{nv-fieldtextarea.entry-Dp_l2pKZ.js → nv-fieldtextarea.entry-D7b3-4Ar.js} +31 -29
- package/dist/cjs/{nv-fieldtime.entry-CWxi4Uel.js → nv-fieldtime.entry-TSPljEeW.js} +4 -4
- package/dist/cjs/{nv-icon.entry-Dci11W9S.js → nv-icon.entry-BtmsouTL.js} +3 -3
- package/dist/cjs/{nv-iconbutton_2.entry-A6FKFJT_.js → nv-iconbutton_2.entry-Ch0rfD12.js} +3 -3
- package/dist/cjs/{nv-menu.entry-BHaYP-9M.js → nv-menu.entry-BKLyCbyy.js} +2 -2
- package/dist/cjs/{nv-menuitem.entry-Cm1vvN25.js → nv-menuitem.entry-BBK6uQav.js} +2 -2
- package/dist/cjs/{nv-notification-bullet.entry-DRlS3Ybc.js → nv-notification-bullet.entry-Dk0oaUTe.js} +1 -1
- package/dist/cjs/{nv-notification.entry-BeDmR-XC.js → nv-notification.entry-DVUXuj9T.js} +2 -2
- package/dist/cjs/{nv-notificationcontainer.entry-C3p_87Dg.js → nv-notificationcontainer.entry-BQbB0vJ8.js} +2 -2
- package/dist/cjs/nv-pagination-nav.entry-BON8ve70.js +201 -0
- package/dist/cjs/{nv-paginationtable.entry-BzEqQOBa.js → nv-paginationtable.entry-pT2Qx3xY.js} +2 -2
- package/dist/cjs/{nv-popover.entry-D2oFn9vL.js → nv-popover.entry-91VegZzi.js} +2 -2
- package/dist/cjs/{nv-row.entry-hV1kxmrr.js → nv-row.entry-C_75GYAm.js} +2 -2
- package/dist/cjs/{nv-sidebar.entry-BJrqJ8K7.js → nv-sidebar.entry-XIcDybjF.js} +2 -2
- package/dist/cjs/{nv-sidebarcontent.entry-CPfGF7nx.js → nv-sidebarcontent.entry-JSf1Mb0x.js} +2 -2
- package/dist/cjs/{nv-sidebardivider.entry-D2wmzHCO.js → nv-sidebardivider.entry-XZ1hYAgj.js} +2 -2
- package/dist/cjs/{nv-sidebarfooter.entry-C7fqCzjH.js → nv-sidebarfooter.entry-BHO9gh6y.js} +2 -2
- package/dist/cjs/{nv-sidebargroup.entry-qkXnxhs_.js → nv-sidebargroup.entry-DAb7dWFF.js} +2 -2
- package/dist/cjs/{nv-sidebarheader.entry-DBsOmyQ0.js → nv-sidebarheader.entry-BksZP_km.js} +2 -2
- package/dist/cjs/{nv-sidebarlogo.entry-902Ht3UR.js → nv-sidebarlogo.entry-BntEWmH_.js} +2 -2
- package/dist/cjs/{nv-sidebarnavitem.entry-CICrllp8.js → nv-sidebarnavitem.entry-DSu34C34.js} +12 -5
- package/dist/cjs/{nv-sidebarnavsubitem.entry-Q9jjU_7D.js → nv-sidebarnavsubitem.entry-Y8Ex0_Lr.js} +2 -2
- package/dist/cjs/{nv-split.entry-BYIsE2wp.js → nv-split.entry-BDr6FxCd.js} +2 -2
- package/dist/cjs/{nv-stack.entry-DgE5ASGH.js → nv-stack.entry-CChjKrA3.js} +2 -2
- package/dist/cjs/{nv-table.entry-DHXBu2n1.js → nv-table.entry-CfqHpj1L.js} +4 -2
- package/dist/cjs/{nv-tableheader.entry-BijgOxcO.js → nv-tableheader.entry-C61xO9Ra.js} +2 -2
- package/dist/cjs/nv-toggle.entry-B0HofO36.js +82 -0
- package/dist/cjs/{nv-togglebutton.entry-DAPETEmF.js → nv-togglebutton.entry-CzyNiZyK.js} +2 -2
- package/dist/cjs/{nv-togglebuttongroup.entry-CzDI1XCr.js → nv-togglebuttongroup.entry-TizvIVlB.js} +2 -2
- package/dist/cjs/{nv-tooltip.entry-DPoUP9iL.js → nv-tooltip.entry-0kcGcQZo.js} +3 -3
- package/dist/generated/components.js +8 -0
- package/dist/generated/components.server.js +20 -1
- package/dist/providers/NotificationProvider.js +9 -8
- package/dist/types/components/NvDatatable/types.d.ts +1 -0
- package/dist/types/generated/components.d.ts +6 -1
- package/dist/types/generated/components.server.d.ts +6 -1
- package/package.json +7 -4
- package/dist/cjs/nv-fieldradio.entry-ZFafNY5_.js +0 -105
- package/dist/cjs/nv-toggle.entry-CMI1WdvV.js +0 -82
- /package/dist/cjs/{i18n.utils-IlwlcG9l-ku0bScip.js → i18n.utils-CR9MpYzU-ku0bScip.js} +0 -0
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-clzdrCkN.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 nvFieldradioCss = () => `@charset "UTF-8";nv-fieldradio{--nv-fieldradio-border-default:var(--components-form-field-border-default);--nv-fieldradio-border-hover:var(--components-form-field-border-hover);--nv-fieldradio-border-focus:var(--components-form-field-border-default);--nv-fieldradio-background-default:var(--components-form-field-background-default);--nv-fieldradio-background-checked:var(--components-form-field-background-checked);--nv-fieldradio-background-disabled:var(--components-form-field-background-disabled);--nv-fieldradio-focus-box-shadow:var(--color-focus-brand);--nv-fieldradio-dot-color-checked:var(--components-form-shape-foreground-default);--nv-fieldradio-dot-color-disabled:var(--components-form-shape-foreground-disabled);--nv-fieldradio-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x)}nv-fieldradio:not([disabled]) input,nv-fieldradio:not([disabled]) label,nv-fieldradio[disabled=false] input,nv-fieldradio[disabled=false] label{cursor:pointer}nv-fieldradio.error{--nv-fieldradio-border-default:var(--components-form-field-border-error);--nv-fieldradio-border-hover:var(--nv-fieldradio-border-default);--nv-fieldradio-border-focus:var(--components-form-field-border-error);--nv-fieldradio-background-checked:var(--components-form-field-background-error);--nv-fieldradio-focus-box-shadow:var(--color-focus-destructive);--nv-fieldradio-dot-color-checked:var(--components-form-shape-foreground-default);--nv-fieldradio-dot-color-disabled:var(--components-form-field-border-error);--nv-fieldradio-outline-color:var(--color-focus-destructive)}nv-fieldradio.label-placement-before{flex-direction:row-reverse}nv-fieldradio[disabled]{opacity:0.5}nv-fieldradio label{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(--form-label-font-weight);line-height:var(--form-label-line-height)}nv-fieldradio input[type=radio]{appearance:none;position:relative;display:flex;width:var(--form-radio-size);height:var(--form-radio-size);padding:var(--form-radio-inner-circle-padding);flex-direction:column;align-items:flex-start;border-radius:var(--radius-rounded-full);border-width:var(--form-radio-border-width);border-style:solid;border-color:var(--nv-fieldradio-border-default);background:var(--nv-fieldradio-background-default)}nv-fieldradio input[type=radio]:hover{border-color:var(--nv-fieldradio-border-hover)}nv-fieldradio input[type=radio]:focus{border-color:var(--nv-fieldradio-border-focus)}nv-fieldradio input[type=radio]:focus,nv-fieldradio input[type=radio]:focus-within{outline:none}nv-fieldradio input[type=radio]:focus-visible,nv-fieldradio input[type=radio]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-fieldradio-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldradio input[type=radio]:checked{background:var(--nv-fieldradio-background-checked);border-color:var(--nv-fieldradio-background-checked)}nv-fieldradio input[type=radio]:checked:hover,nv-fieldradio input[type=radio]:checked:focus{border-color:var(--nv-fieldradio-background-checked);background:var(--nv-fieldradio-background-checked)}nv-fieldradio input[type=radio]:checked::before{content:"";position:absolute;top:50%;right:50%;transform:translate(50%, -50%);left:0;width:var(--form-radio-inner-circle-size);height:var(--form-radio-inner-circle-size);flex-shrink:0;border-radius:var(--radius-rounded-full);background:var(--nv-fieldradio-dot-color-checked)}nv-fieldradio input[type=radio]:disabled{border-radius:var(--radius-rounded-full);border-width:var(--form-radio-border-width);border-style:solid;border-color:var(--nv-fieldradio-border-default);background:var(--nv-fieldradio-background-disabled)}nv-fieldradio input[type=radio]:disabled:checked::before{background:var(--nv-fieldradio-dot-color-disabled)}nv-fieldradio input[type=radio]:disabled:hover{border-color:var(--nv-fieldradio-border-default);background:var(--nv-fieldradio-background-disabled)}@media print{nv-fieldradio input[type=radio]:checked{background:transparent;border-color:var(--nv-fieldradio-background-checked)}nv-fieldradio input[type=radio]:checked::before{content:"●";position:absolute;top:calc(50% - 2px);left:calc(50% - 4.5px);transform:translate(-50%, -50%);width:auto;height:auto;background:none;color:var(--nv-fieldradio-background-checked);font-size:calc(var(--form-radio-inner-circle-size) * 3);line-height:1}}nv-fieldradio .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-fieldradio .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)}nv-fieldradio .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}`;
|
|
11
|
+
|
|
12
|
+
const NvFieldradio = class {
|
|
13
|
+
constructor(hostRef) {
|
|
14
|
+
index.registerInstance(this, hostRef);
|
|
15
|
+
this.checkedChanged = index.createEvent(this, "checkedChanged", 3);
|
|
16
|
+
/**
|
|
17
|
+
* Set the label placement to before the input
|
|
18
|
+
* @deprecated use labelPlacement 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
|
+
* Highlight the radio button with error styling. It helps users quickly
|
|
33
|
+
* identify which option needs attention, improving their form-filling
|
|
34
|
+
* experience by making issues more visible.
|
|
35
|
+
* @validator error
|
|
36
|
+
*/
|
|
37
|
+
this.error = false;
|
|
38
|
+
/**
|
|
39
|
+
* Controls whether the radio button is selected.
|
|
40
|
+
*/
|
|
41
|
+
this.checked = false;
|
|
42
|
+
/**
|
|
43
|
+
* Disables the radio button, making it un-selectable.
|
|
44
|
+
*/
|
|
45
|
+
this.disabled = false;
|
|
46
|
+
/**
|
|
47
|
+
* Applies focus to the input field as soon as the component is mounted. This
|
|
48
|
+
* is equivalent to setting the native autofocus attribute on an <input>
|
|
49
|
+
* element.
|
|
50
|
+
*/
|
|
51
|
+
this.autofocus = false;
|
|
52
|
+
}
|
|
53
|
+
componentWillRender() {
|
|
54
|
+
if (this.message) {
|
|
55
|
+
this.description = this.message;
|
|
56
|
+
}
|
|
57
|
+
if (this.labelBefore) {
|
|
58
|
+
this.labelPlacement = 'before';
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
//#endregion EVENTS
|
|
62
|
+
/****************************************************************************/
|
|
63
|
+
//#region WATCHERS
|
|
64
|
+
/**
|
|
65
|
+
* Watches for changes to the checked state and emits the new value.
|
|
66
|
+
* @param {boolean} checked - The new value of the checked state.
|
|
67
|
+
*/
|
|
68
|
+
handleCheckedChange(checked) {
|
|
69
|
+
this.checkedChanged.emit(checked);
|
|
70
|
+
}
|
|
71
|
+
/**
|
|
72
|
+
* Listens for the change event on the radio button input element and controls
|
|
73
|
+
* the checked state of the host elements.
|
|
74
|
+
* @param {Event} event - The change event.
|
|
75
|
+
*/
|
|
76
|
+
handleChange(event) {
|
|
77
|
+
const target = event.target;
|
|
78
|
+
if (target?.type === 'radio') {
|
|
79
|
+
Array.from(document.getElementsByTagName('nv-fieldradio')).forEach(element => {
|
|
80
|
+
if (element.name === this.name) {
|
|
81
|
+
element.checked = false;
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
this.checked = target.checked;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
//#endregion WATCHERS
|
|
88
|
+
/****************************************************************************/
|
|
89
|
+
//#region RENDER
|
|
90
|
+
render() {
|
|
91
|
+
return (index.h(index.Host, { key: '07d9225a6a3af28efa5885b5bb02a3f512708a97', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("input", { key: '2b5afcf255bc442914f9225537987d331000883d', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), index.h("div", { key: '8fc76a826e8a8ef51a80173b950ab460cf0ff8f3', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '4578fccf241e9470a7f514761b3141d3fad77a88', htmlFor: this.inputId }, index.h("slot", { key: 'f6d9f4961d07525175bd51fa4a4b546d62e74d4e', name: "label" }, this.label))), (this.description ||
|
|
92
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '17d029eb709c443e8a68a5d6bdd1265400ae35d2', class: "description" }, index.h("slot", { key: 'e4485b5ed253c6fc45508947387fa43f0492f654', name: "description" }, this.description))), (this.errorDescription ||
|
|
93
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'cde01e850752c1a2b4a3b2559f2052167409a605', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'f9d9f08be6506a495a5b42bcc9ebd2db49e749d5', name: "error-description" }, this.errorDescription))))));
|
|
94
|
+
}
|
|
95
|
+
static get formAssociated() { return true; }
|
|
96
|
+
get el() { return index.getElement(this); }
|
|
97
|
+
static get watchers() { return {
|
|
98
|
+
"checked": [{
|
|
99
|
+
"handleCheckedChange": 0
|
|
100
|
+
}]
|
|
101
|
+
}; }
|
|
102
|
+
};
|
|
103
|
+
NvFieldradio.style = nvFieldradioCss();
|
|
104
|
+
|
|
105
|
+
exports.nv_fieldradio = NvFieldradio;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-clzdrCkN.js');
|
|
4
4
|
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
5
5
|
require('@stencil/react-output-target/runtime');
|
|
6
6
|
require('react');
|
|
@@ -373,15 +373,15 @@ const NvFieldselect = class {
|
|
|
373
373
|
? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
|
|
374
374
|
: undefined;
|
|
375
375
|
const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
|
|
376
|
-
return (index.h(index.Host, { key: '
|
|
376
|
+
return (index.h(index.Host, { key: '14b1a2aa45b0c68539234e57dfcce39422d6d23b' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'a9c3a454574d65358d28f8e72049d82b5667b0cb', htmlFor: this.inputId }, index.h("slot", { key: 'ead692187041569b918d65afd775e1f4050d54e7', name: "label" }, this.label))), index.h("div", { key: '1707389d32a34a16a141990a9ab133c0e39fdd11', class: "select-wrapper" }, index.h("slot", { key: 'd8ac565ec1a564f1e451f8d0f80ad12c4b25a70d', name: "before-input" }), index.h("div", { key: '4c0edadba8462c36ea4f315971842796fb59852f', class: "select-container", onClick: this.handleSelectContainerClick }, index.h("slot", { key: '68442a898f7321d584d7fff62452af2b37ee3467', name: "leading-input" }), this.internalReadonly && (index.h("input", { key: '997d8e04f32826d65f4a1a138b008f69910fa6d2', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
|
|
377
377
|
? `${this.inputId}-error`
|
|
378
|
-
: `${this.inputId}-description` })), index.h("select", { key: '
|
|
378
|
+
: `${this.inputId}-description` })), index.h("select", { key: '732a7a11d9547ea4f6b3322781bc34be18b6b77e', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
|
|
379
379
|
'aria-required': String(ariaRequiredValue),
|
|
380
380
|
}), multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
|
|
381
381
|
? `${this.inputId}-error`
|
|
382
|
-
: `${this.inputId}-description` }, this.options && this.options.length > 0 ? (this.options.map(option => (index.h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (index.h("slot", null))), index.h("div", { key: '
|
|
383
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
384
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
382
|
+
: `${this.inputId}-description` }, this.options && this.options.length > 0 ? (this.options.map(option => (index.h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (index.h("slot", null))), index.h("div", { key: 'f4675290f5ee76afb1020f40e70c19e2f33b9292', class: "select-icons" }, this.error && (index.h("nv-icon", { key: '246f1fd624270c5f2cfdfc5fc31ff1e63c0aa99f', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'ff06df43b44ceb423c2dd3be999e553a62953d84', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (index.h("nv-iconbutton", { key: 'fee5dd8d3268d6ad00389b2ace10eaffa81fb0c0', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), index.h("slot", { key: 'debcb059b6fc7a3667009af11539a98778812064', name: "after-input" })), (this.description ||
|
|
383
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'c64ad4587fe24de32391e730a02d34138e9dd55d', class: "description", id: `${this.inputId}-description` }, index.h("slot", { key: '7bee964467a46ea037d3be6733a04a08979fbebb', name: "description" }, this.description))), (this.errorDescription ||
|
|
384
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'd759750f8a90a8a41d2b42ac1cc4a297ae14e571', class: "error-description", id: `${this.inputId}-error` }, index.h("slot", { key: 'df17b5135b5f8bbf991895f11cc1bb74c7e665a6', name: "error-description" }, this.errorDescription)))));
|
|
385
385
|
}
|
|
386
386
|
static get formAssociated() { return true; }
|
|
387
387
|
get el() { return index.getElement(this); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-clzdrCkN.js');
|
|
4
4
|
var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
|
|
5
5
|
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
6
6
|
require('@stencil/react-output-target/runtime');
|
|
@@ -691,11 +691,11 @@ const NvFieldslider = class {
|
|
|
691
691
|
/****************************************************************************/
|
|
692
692
|
//#region RENDER
|
|
693
693
|
render() {
|
|
694
|
-
return (index.h(index.Host, { key: '
|
|
694
|
+
return (index.h(index.Host, { key: '34ffffbcfefbeac4050ced2db000a32f67222376' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'b07225ad89ae0f85d3cd2b1ee203b30e6abd7e57', htmlFor: this.startInputId }, index.h("slot", { key: 'b1f39009872c4a38dae38286a036bb69f8ba6f62', name: "label" }, this.label))), index.h("div", { key: '0013570dd6edbcb7c0f4a6ea32a550b6d9432271', class: "slider-container" }, this.range ? (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, index.h("div", { key: 'ca639497db1b588fcf0d4fad5f548a53ff1ee353', class: "track-container" }, index.h("div", { key: '6a8d1eb4bddff4d5ca9760729cfa1ce27b887a65', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (index.h(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (index.h(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, step: this.step, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), index.h(TickMarks, { key: '134bf7de84a7572b1f033e4e17e0e435e841eb42', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
|
|
695
695
|
this.description ||
|
|
696
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
696
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'b0188dce4fe8718a90715049d2af71fff7e9c512', class: "description" }, this.success && (index.h("nv-icon", { key: 'cd2fd95080cd96ed516f9caa3b078ad481ee9912', name: "circle-check", class: "validation", size: "md" })), index.h("slot", { key: 'd5dbc5f8bb6b66cef814a58e00aa07e7b9e07a23', name: "description" }, this.description))), (this.error ||
|
|
697
697
|
this.errorDescription ||
|
|
698
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
698
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '67a78749af19d44d553581ff0042e40c067dd44c', class: "error-description", hidden: !this.error }, this.error && (index.h("nv-icon", { key: '4aac6d31b273cee32d235b7c53fd4cac6af4c253', name: "alert-circle", class: "validation", size: "md" })), index.h("slot", { key: '9faa92d59e9fde524d1fb41e30b30178d9c12c4b', name: "error-description" }, this.errorDescription)))));
|
|
699
699
|
}
|
|
700
700
|
static get formAssociated() { return true; }
|
|
701
701
|
get el() { return index.getElement(this); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-clzdrCkN.js');
|
|
4
4
|
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
5
5
|
require('@stencil/react-output-target/runtime');
|
|
6
6
|
require('react');
|
|
@@ -149,11 +149,11 @@ const NvFieldtext = class {
|
|
|
149
149
|
? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
|
|
150
150
|
: undefined;
|
|
151
151
|
const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
|
|
152
|
-
return (index.h(index.Host, { key: '
|
|
152
|
+
return (index.h(index.Host, { key: '0baf2e0b76bd06018a819a60d2d3a271474d8b26' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '915a355b200bb2eebb44b60b46715c0be57af927', htmlFor: this.inputId }, index.h("slot", { key: 'e915661a6fdf9d7a489b39ac9c41ae368c64764c', name: "label" }, this.label))), index.h("div", { key: '33109ed1f7ddfc38de2606d7b3ac273678a71a82', class: "input-wrapper" }, index.h("slot", { key: 'a93db4a91c9fb313031680c7cd992f501930b5da', name: "before-input" }), index.h("div", { key: '1c56222cf9e1ad0b4242548bb3133b502b890ea7', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'bcff7d46918f5069e8c512412a6d7120e3204f1f', name: "leading-input" }), index.h("input", { key: '16f7a7230799cccdec45dc5a53939f5fc78f4e24', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
|
|
153
153
|
'aria-required': String(ariaRequiredValue),
|
|
154
|
-
}), maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), index.h("slot", { key: '
|
|
155
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
156
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
154
|
+
}), maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), index.h("slot", { key: '446a2dcd683ba6caeb9f1f715890a38cb084d341', name: "trailing-input" }), this.error && (index.h("nv-icon", { key: '2e2787b8ac5c39db8a8212dffb7ed545b2d35084', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '88e507f5003fc9d2967968b6938b51731dbb5d09', name: "circle-check", class: "validation", size: "md" }))), index.h("slot", { key: '3d471559b8630cfbcb39b17477beb62bf707bea7', name: "after-input" })), (this.description ||
|
|
155
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '5e6bb278db247a1f94e27f6401519821a9fc571b', class: "description" }, index.h("slot", { key: '13483a478681d97b00d06664fee40c35f81eb29f', name: "description" }, this.description))), (this.errorDescription ||
|
|
156
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'c91425b592a094661d4c76316b060877861d85f5', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'f371e111411bf60d331e3a0762135d62010ad06c', name: "error-description" }, this.errorDescription)))));
|
|
157
157
|
}
|
|
158
158
|
static get formAssociated() { return true; }
|
|
159
159
|
get el() { return index.getElement(this); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-clzdrCkN.js');
|
|
4
4
|
var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
|
|
5
5
|
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
6
6
|
require('@stencil/react-output-target/runtime');
|
|
@@ -76,7 +76,7 @@ const NvFieldtextarea = class {
|
|
|
76
76
|
/**
|
|
77
77
|
* Enable this to make the textarea automatically resize as the user types,
|
|
78
78
|
* adjusting the height to fit the content. For the best experience, avoid
|
|
79
|
-
* vertical resizing, as it
|
|
79
|
+
* vertical resizing, as it's controlled by this feature. Horizontal resizing
|
|
80
80
|
* can still be allowed if desired.
|
|
81
81
|
*/
|
|
82
82
|
this.autosize = false;
|
|
@@ -138,35 +138,37 @@ const NvFieldtextarea = class {
|
|
|
138
138
|
adjustTextareaHeight() {
|
|
139
139
|
if (this.textareaElement && this.autosize) {
|
|
140
140
|
/**
|
|
141
|
-
*
|
|
141
|
+
* A single requestAnimationFrame ensures that the DOM has applied any
|
|
142
142
|
* pending changes (e.g., value updates or attribute changes) before
|
|
143
|
-
*
|
|
143
|
+
* measuring. All style reads and writes happen synchronously within
|
|
144
|
+
* this callback so the browser never paints the intermediate
|
|
145
|
+
* "height: auto" state, avoiding a visible flash.
|
|
144
146
|
*/
|
|
145
147
|
requestAnimationFrame(() => {
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
this.textareaElement.style.minHeight = `${minHeight}px`;
|
|
148
|
+
this.textareaElement.style.height = 'auto';
|
|
149
|
+
const computedStyle = window.getComputedStyle(this.textareaElement);
|
|
150
|
+
const lineHeight = parseFloat(computedStyle.lineHeight);
|
|
151
|
+
const paddingTop = parseFloat(computedStyle.paddingTop);
|
|
152
|
+
const paddingBottom = parseFloat(computedStyle.paddingBottom);
|
|
153
|
+
const borderTopWidth = parseFloat(computedStyle.borderTopWidth);
|
|
154
|
+
const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);
|
|
155
|
+
// Calculate min-height based on rows
|
|
156
|
+
const minHeight = lineHeight * this.rows +
|
|
157
|
+
paddingTop +
|
|
158
|
+
paddingBottom +
|
|
159
|
+
borderTopWidth +
|
|
160
|
+
borderBottomWidth;
|
|
161
|
+
this.textareaElement.style.minHeight = `${minHeight}px`;
|
|
162
|
+
if (this.maxAutoHeight &&
|
|
163
|
+
this.textareaElement.scrollHeight > this.maxAutoHeight) {
|
|
164
|
+
this.textareaElement.style.height = `${this.maxAutoHeight}px`;
|
|
165
|
+
this.textareaElement.style.overflowY = 'auto';
|
|
166
|
+
}
|
|
167
|
+
else {
|
|
167
168
|
this.textareaElement.style.height =
|
|
168
169
|
this.textareaElement.scrollHeight + 'px';
|
|
169
|
-
|
|
170
|
+
this.textareaElement.style.overflowY = 'hidden';
|
|
171
|
+
}
|
|
170
172
|
});
|
|
171
173
|
}
|
|
172
174
|
}
|
|
@@ -218,11 +220,11 @@ const NvFieldtextarea = class {
|
|
|
218
220
|
? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
|
|
219
221
|
: undefined;
|
|
220
222
|
const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
|
|
221
|
-
return (index.h(index.Host, { key: '
|
|
223
|
+
return (index.h(index.Host, { key: '9d7aed8625b1cfa103e275495d40116b8f1314c3' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '6609cc39f3809b833a4c9755c487ba3eef05a5c4', htmlFor: this.inputId }, index.h("slot", { key: '277484af20e4054be5491576ffdfb95ca0f23a79', name: "label" }, this.label))), index.h("div", { key: '6224c47beaee1e15ea9277a1f69f4ac5ea496cb6', class: "textarea-wrapper" }, index.h("div", { key: '6dd7868aa65091dd79c34497dec020945d56f925', class: "textarea-container", onClick: this.handleTextareaContainerClick }, index.h("textarea", { key: '2548dab5d8b387d37036a07c4a76b567c84a8b59', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
|
|
222
224
|
'aria-required': String(ariaRequiredValue),
|
|
223
225
|
}), maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsxChV9xqsO.clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
|
|
224
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
225
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
226
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '10ba44a9c4b83db00d00c2a4e791c68836413aac', class: "description" }, index.h("slot", { key: '5015686b48e185707376008306c204432199cde1', name: "description" }, this.description))), (this.errorDescription ||
|
|
227
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '312502a84e08fdacbe77cc55f4e91e0b4122c82b', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'b837f0784d75b8d0df04e025ee8f9a309c6f46d3', name: "error-description" }, this.errorDescription)))));
|
|
226
228
|
}
|
|
227
229
|
static get formAssociated() { return true; }
|
|
228
230
|
get el() { return index.getElement(this); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-clzdrCkN.js');
|
|
4
4
|
var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
|
|
5
5
|
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
6
6
|
require('@stencil/react-output-target/runtime');
|
|
@@ -1104,9 +1104,9 @@ const NvFieldtime = class {
|
|
|
1104
1104
|
}, key: `${option}-${index$1}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
|
|
1105
1105
|
}
|
|
1106
1106
|
render() {
|
|
1107
|
-
return (index.h(index.Host, { key: '
|
|
1108
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
1109
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
1107
|
+
return (index.h(index.Host, { key: 'a02fbea3aa9b46d22978cececd750548c16c79cf', onclick: (e) => this.handleHostClick(e), "aria-expanded": this.open ? 'true' : 'false' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '0ec36fbb4e2e810455e35537277496b600b8bd72', htmlFor: this.inputId }, index.h("slot", { key: '5ab4bca171c9d68fbb592c378b0db30139e23642', name: "label" }, this.label))), index.h("nv-popover", { key: '962705b7347af233d00ad7c33ea8777403e32534', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: this.handleOpenChanged }, index.h("div", { key: '16e06fbf7003cfdf29e019cd4dfcd33c3b4a12e4', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '64c31ef85a92430ac348e9ff06405f682ceb7a98', name: "before-input" }), index.h("div", { key: '291130925798643a0c034719fc46a5ee391ec487', class: "input-container" }, index.h("slot", { key: '823f17b06aeb798216a46631655513bef79f7508', name: "leading-input" }), this.renderTimeInputFields(), index.h("nv-iconbutton", { key: '4e87bc2c19494f43cb4ac7dfb3b370eac6edab0b', name: 'clock', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', onClick: () => this.HandleDropdownIconClick() }), this.error && (index.h("nv-icon", { key: 'a5c97446025ee0b571f3fe2223dfd759ed69f9ca', name: "alert-circle", class: "validation", size: "sm" })), this.success && (index.h("nv-icon", { key: '475f240e74459e16e5a9dd3bea0df21f32949e18', name: "circle-check", class: "validation", size: "sm" }))), index.h("slot", { key: '696be862dee53acc18c311fe2ea26f4ec099c62e', name: "after-input" })), index.h("div", { key: '75e7e8ad1c1bc7be602d633946b3845007a3b1c5', class: "time-dropdown", slot: "content" }, index.h("div", { key: '89898000bb7005ef687372d1016b5b93f02a43bc', class: "time-columns" }, this.renderTimeDropdownColumns()))), (this.description ||
|
|
1108
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'a0bddd8851b21c57637fbe8f9d8a83d62ff43bdf', class: "description" }, index.h("slot", { key: '133c39ce0065b8f95a932d12c5150af595eab460', name: "description" }, this.description))), (this.errorDescription ||
|
|
1109
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'de3a537dd418c1c218eceb8062fd925c0ea06bba', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '97e2865ce647f2e4e32697acf5154fc94be9eab7', name: "error-description" }, this.errorDescription)))));
|
|
1110
1110
|
}
|
|
1111
1111
|
static get formAssociated() { return true; }
|
|
1112
1112
|
get el() { return index.getElement(this); }
|