@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
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-DUlunl9a.js');
|
|
4
4
|
var i18n_utilsIlwlcG9l = require('./i18n.utils-IlwlcG9l-ku0bScip.js');
|
|
5
5
|
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
6
6
|
require('@stencil/react-output-target/runtime');
|
|
7
7
|
require('react');
|
|
8
8
|
require('react-dom');
|
|
9
9
|
|
|
10
|
-
const nvFielddropdownCss =
|
|
10
|
+
const nvFielddropdownCss = () => `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-fielddropdown{--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-fielddropdown[fluid]:not([fluid=false]){max-width:unset}nv-fielddropdown[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-fielddropdown[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-fielddropdown[required]:not([required=false]) label::after,nv-fielddropdown[aria-required=true] label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fielddropdown[hidden]:not([hidden=false]) label{display:none}nv-fielddropdown 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-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown nv-popover [data-scope=popover]{min-width:100%;width:max-content;max-width:400px;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fielddropdown nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fielddropdown nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fielddropdown nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .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-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container:focus-within,nv-fielddropdown .input-container:focus-within:hover,nv-fielddropdown .input-container:focus,nv-fielddropdown .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-fielddropdown .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container{position:relative;width:100%;min-height:40px}nv-fielddropdown .input-container input[type=search]::-webkit-search-decoration,nv-fielddropdown .input-container input[type=search]::-webkit-search-cancel-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}nv-fielddropdown .input-container input,nv-fielddropdown .input-container p.non-filterable-text{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-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container p.non-filterable-text::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-fielddropdown .input-container input,nv-fielddropdown .input-container p.non-filterable-text{}nv-fielddropdown .input-container input[type=password]::-ms-clear,nv-fielddropdown .input-container input[type=password]::-ms-reveal,nv-fielddropdown .input-container p.non-filterable-text[type=password]::-ms-clear,nv-fielddropdown .input-container p.non-filterable-text[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddropdown .input-container p.non-filterable-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fielddropdown .input-container p.non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fielddropdown .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddropdown .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddropdown .input-container>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddropdown .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-fielddropdown .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)}`;
|
|
11
11
|
|
|
12
12
|
const NvFielddropdown = class {
|
|
13
13
|
constructor(hostRef) {
|
|
@@ -15,7 +15,7 @@ const NvFielddropdown = class {
|
|
|
15
15
|
this.valueChanged = index.createEvent(this, "valueChanged", 3);
|
|
16
16
|
this.filterTextChanged = index.createEvent(this, "filterTextChanged", 3);
|
|
17
17
|
this.openChanged = index.createEvent(this, "openChanged", 3);
|
|
18
|
-
this.dropdownItemSelected = index.createEvent(this, "dropdownItemSelected",
|
|
18
|
+
this.dropdownItemSelected = index.createEvent(this, "dropdownItemSelected", 7);
|
|
19
19
|
/** Pre-computed search index for efficient filtering */
|
|
20
20
|
this.indexedItems = [];
|
|
21
21
|
/** Raw items for worker initialization */
|
|
@@ -211,7 +211,6 @@ const NvFielddropdown = class {
|
|
|
211
211
|
return selectedLabel;
|
|
212
212
|
};
|
|
213
213
|
}
|
|
214
|
-
/* eslint-enable nova/event-bubbling */
|
|
215
214
|
//#endregion EVENTS
|
|
216
215
|
/****************************************************************************/
|
|
217
216
|
//#region WATCHERS
|
|
@@ -235,9 +234,7 @@ const NvFielddropdown = class {
|
|
|
235
234
|
//#endregion WATCHERS
|
|
236
235
|
/****************************************************************************/
|
|
237
236
|
//#region LISTENERS
|
|
238
|
-
/* eslint-disable nova/native-event-listener */
|
|
239
237
|
handleDropdownItemSelected(event) {
|
|
240
|
-
event.stopPropagation();
|
|
241
238
|
if (this.disabled || this.readonly)
|
|
242
239
|
return;
|
|
243
240
|
if (!this.openOnSelect)
|
|
@@ -257,7 +254,6 @@ const NvFielddropdown = class {
|
|
|
257
254
|
this.setFilterInputToSelectedValue();
|
|
258
255
|
this.valueChanged.emit(event.detail.value);
|
|
259
256
|
}
|
|
260
|
-
/* eslint-enable nova/native-event-listener */
|
|
261
257
|
handleFocus(event) {
|
|
262
258
|
if (event.relatedTarget instanceof HTMLElement &&
|
|
263
259
|
event.relatedTarget.tagName.includes('NV-FIELDDROPDOWNITEM')) {
|
|
@@ -659,20 +655,26 @@ const NvFielddropdown = class {
|
|
|
659
655
|
? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
|
|
660
656
|
: undefined;
|
|
661
657
|
const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
|
|
662
|
-
return (index.h(index.Host, { key: '
|
|
658
|
+
return (index.h(index.Host, { key: '0915d7a88c89a16adc2d27630b326c4fa426445b', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'c4c614d2f0224a8a0fa10e4a12ddb5c7023a54d8', htmlFor: this.inputId, onClick: this.syncToggleDropdown.bind(this) }, index.h("slot", { key: '14b7f31b260e324a57559cd7fc566f8fcfe29c1e', name: "label" }, this.label))), index.h("nv-popover", { key: 'bffecd6ae3c0e6a5e5def096fd196d9d078cdee5', triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: e => this.openChanged.emit(e.detail) }, index.h("div", { key: 'b2f6dd569d553f61d22b31a96e2020d9a53ecf30', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: 'c1d3c314d3466fafa94d4b7f2bf124a70586ea98', name: "before-input" }), index.h("div", { key: '6f9a5e8eb390569a85b7d8e811995434fc478a31', class: "input-container" }, index.h("slot", { key: '57c396497f9fb4633b5814ec3e5791fffb4e29fc', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (index.h("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
|
|
663
659
|
'aria-required': String(ariaRequiredValue),
|
|
664
|
-
}), disabled: this.disabled, readOnly: this.readonly, onInput: this.handleFilterInput })) : (index.h("p", { "data-scope": "focusable", id: this.inputId, ref: el => (this.selectElement = el), class: "non-filterable-text", tabIndex: this.disabled ? -1 : 0 }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && (index.h("nv-iconbutton", { key: '
|
|
665
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
666
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
660
|
+
}), disabled: this.disabled, readOnly: this.readonly, onInput: this.handleFilterInput })) : (index.h("p", { "data-scope": "focusable", id: this.inputId, ref: el => (this.selectElement = el), class: "non-filterable-text", tabIndex: this.disabled ? -1 : 0 }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && (index.h("nv-iconbutton", { key: 'a317de934a5525a0f2fc8da60efb30e6f145e26b', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter.bind(this), "aria-label": "Clear input" })), this.error && (index.h("nv-icon", { key: '66f875b52c5aad0b3d337495e2b84479c539f40c', name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '87d05a637e89e2d31621fdaf4da25a0472679790', "data-scope": "toggle-dropdown", ref: el => (this.toggleElement = el), name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', onClick: this.syncToggleDropdown.bind(this), tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '709fa474ef044a35a09ea9e03f2c2cb7f8beb499', name: "after-input" })), index.h("div", { key: '1c0599436e013c853b8d52411812d383095b7339', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, this.options?.length > 0 && (index.h("ul", { key: '7d29e377eb3c90d20a0e8659a4404da0f603ce33' }, this.options.map(option => (index.h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))), index.h("slot", { key: '76796c930183e266a8f13dceb70040e9a531bf4b', name: "content" }))), (this.description ||
|
|
661
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '5ce379ed837ce4045e29835f452615901a49e765', class: "description" }, index.h("slot", { key: '099b08d109920596d58aee26aa3a1f13ed5c8743', name: "description" }, this.description))), (this.errorDescription ||
|
|
662
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'f8357878d232e6d28714bcc7f3aa508fd33d4c84', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '3f76cd412d3b8cff001295bc68cc726f166788ab', name: "error-description" }, this.errorDescription)))));
|
|
667
663
|
}
|
|
668
664
|
static get formAssociated() { return true; }
|
|
669
665
|
get el() { return index.getElement(this); }
|
|
670
666
|
static get watchers() { return {
|
|
671
|
-
"open": [
|
|
672
|
-
|
|
673
|
-
|
|
667
|
+
"open": [{
|
|
668
|
+
"handleOpenChange": 0
|
|
669
|
+
}],
|
|
670
|
+
"value": [{
|
|
671
|
+
"handleValueChange": 0
|
|
672
|
+
}],
|
|
673
|
+
"options": [{
|
|
674
|
+
"handleOptionsChange": 0
|
|
675
|
+
}]
|
|
674
676
|
}; }
|
|
675
677
|
};
|
|
676
|
-
NvFielddropdown.style = nvFielddropdownCss;
|
|
678
|
+
NvFielddropdown.style = nvFielddropdownCss();
|
|
677
679
|
|
|
678
680
|
exports.nv_fielddropdown = NvFielddropdown;
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-DUlunl9a.js');
|
|
4
|
+
require('@stencil/react-output-target/runtime');
|
|
5
|
+
require('react');
|
|
6
|
+
require('react-dom');
|
|
7
|
+
|
|
8
|
+
const nvFielddropdownitemCss = () => `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-fielddropdownitem{display:flex;gap:var(--list-select-gap-y);flex-wrap:wrap;align-items:center;width:100%;background-color:var(--components-list-select-option-background-default);padding:var(--list-select-option-padding);font-weight:var(--menu-contextual-item-font-weight);font-size:var(--list-select-font-size);line-height:var(--list-select-line-height);color:var(--components-list-select-option-content-default);border-radius:var(--list-select-option-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:not(:first-of-type){margin-top:var(--list-select-gap-y)}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-list-select-option-background-hover);color:var(--components-list-select-option-content-hover)}nv-fielddropdownitem:checked{background-color:var(--components-list-select-option-background-active);color:var(--components-list-select-option-content-active)}nv-fielddropdownitem:checked::after{order:1;margin-left:auto;content:"";display:inline-block;width:var(--spacing-5);height:var(--spacing-5);background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='nvicon_check' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6px' d='m5 12 5 5L20 7' vector-effect='non-scaling-stroke'%3E%3C/path%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='nvicon_check' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6px' d='m5 12 5 5L20 7' vector-effect='non-scaling-stroke'%3E%3C/path%3E%3C/svg%3E");mask-repeat:no-repeat;mask-position:center;mask-size:contain}nv-fielddropdownitem::checkmark{display:none}nv-fielddropdownitem:disabled,nv-fielddropdownitem:checked:disabled{color:var(--components-list-select-option-content-disabled);background-color:var(--components-list-select-option-background-default)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem .text-wrapper{display:flex;flex-grow:1;align-items:center;justify-content:space-between}nv-fielddropdownitem [data-scope=text]{flex-grow:1;word-break:break-word;overflow-wrap:break-word;padding-right:var(--spacing-5)}nv-fielddropdownitem nv-icon[data-scope=selected]{color:var(--components-list-dropdown-item-label-default);align-self:center;margin-left:auto;position:absolute;right:var(--list-dropdown-item-padding-y)}`;
|
|
9
|
+
|
|
10
|
+
const NvFielddropdownitem = class {
|
|
11
|
+
constructor(hostRef) {
|
|
12
|
+
index.registerInstance(this, hostRef);
|
|
13
|
+
this.dropdownItemSelected = index.createEvent(this, "dropdownItemSelected", 7);
|
|
14
|
+
/****************************************************************************/
|
|
15
|
+
//#region PROPERTIES
|
|
16
|
+
/**
|
|
17
|
+
* Disables the item, preventing any user interaction.
|
|
18
|
+
*/
|
|
19
|
+
this.disabled = false;
|
|
20
|
+
/**
|
|
21
|
+
* Indicates if the item is selected.
|
|
22
|
+
*/
|
|
23
|
+
this.selected = false;
|
|
24
|
+
/**
|
|
25
|
+
* If detached, the item will not be filtered out or change the dropdown's
|
|
26
|
+
* selected item. Useful for actionable items, such as Add New item, etc.
|
|
27
|
+
*/
|
|
28
|
+
this.detached = false;
|
|
29
|
+
//#endregion EVENTS
|
|
30
|
+
/****************************************************************************/
|
|
31
|
+
//#region METHODS
|
|
32
|
+
this.handleSelected = () => {
|
|
33
|
+
if (this.disabled)
|
|
34
|
+
return;
|
|
35
|
+
this.dropdownItemSelected.emit({
|
|
36
|
+
label: this.label,
|
|
37
|
+
value: this.value,
|
|
38
|
+
detached: this.detached,
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
handleKeyDown(event) {
|
|
43
|
+
if (event.target !== this.el)
|
|
44
|
+
return;
|
|
45
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
46
|
+
event.preventDefault();
|
|
47
|
+
this.handleSelected();
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
//#endregion METHODS
|
|
51
|
+
/****************************************************************************/
|
|
52
|
+
//#region LIFECYCLE
|
|
53
|
+
componentWillRender() {
|
|
54
|
+
if (!this.value) {
|
|
55
|
+
const fallback = this.label ?? this.el.textContent;
|
|
56
|
+
this.value = fallback.replace(/\W+/g, ''); // Remove non-word characters
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
//#endregion LIFECYCLE
|
|
60
|
+
/****************************************************************************/
|
|
61
|
+
//#region RENDER
|
|
62
|
+
render() {
|
|
63
|
+
return (index.h(index.Host, { key: 'cc904014a9b842b78989983ea9bef85b77d78ccd', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, index.h("slot", { key: 'bea22ab46cadc0150ee379e2157fad80d11cccdd' }, index.h("div", { key: 'bd873a6664bee68e5e177ef04c14f68f2e0d3cf1', class: "text-wrapper" }, index.h("span", { key: '786a7be6c2aaf0d3cbc570f38ed45f2f23e742be', "data-scope": "text" }, this.label))), this.selected && (index.h("nv-icon", { key: 'a53bfcf17378c42bec4bbd970635dbd6ada1c3a4', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
|
|
64
|
+
}
|
|
65
|
+
get el() { return index.getElement(this); }
|
|
66
|
+
};
|
|
67
|
+
NvFielddropdownitem.style = nvFielddropdownitemCss();
|
|
68
|
+
|
|
69
|
+
exports.nv_fielddropdownitem = NvFielddropdownitem;
|
package/dist/cjs/{nv-fieldmultiselect.entry-BWY5xOAd.js → nv-fieldmultiselect.entry-DSpQeiPx.js}
RENAMED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-DUlunl9a.js');
|
|
4
4
|
var i18n_utilsIlwlcG9l = require('./i18n.utils-IlwlcG9l-ku0bScip.js');
|
|
5
5
|
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
6
6
|
require('@stencil/react-output-target/runtime');
|
|
7
7
|
require('react');
|
|
8
8
|
require('react-dom');
|
|
9
9
|
|
|
10
|
-
const nvFieldmultiselectCss = "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-fieldmultiselect{--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-fieldmultiselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldmultiselect[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-fieldmultiselect[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-fieldmultiselect[required]:not([required=false]) label::after,nv-fieldmultiselect[aria-required=true] label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldmultiselect 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-fieldmultiselect nv-popover{width:100%;display:block}nv-fieldmultiselect nv-popover [data-scope=popover]{min-width:100%;width:max-content;max-width:400px;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fieldmultiselect nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fieldmultiselect nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldmultiselect nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fieldmultiselect .input-wrapper-multiselect{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldmultiselect .input-container-multiselect{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-fieldmultiselect .input-container-multiselect:hover{border-color:var(--nv-field-border-hover)}nv-fieldmultiselect .input-container-multiselect:focus-within,nv-fieldmultiselect .input-container-multiselect:focus-within:hover,nv-fieldmultiselect .input-container-multiselect:focus,nv-fieldmultiselect .input-container-multiselect: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-fieldmultiselect .input-container-multiselect:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldmultiselect .input-container-multiselect:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldmultiselect .input-container-multiselect{position:relative;width:100%;min-height:40px}nv-fieldmultiselect .input-container-multiselect>nv-badge{margin-left:var(--form-field-padding-x)}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{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-fieldmultiselect .input-container-multiselect input:focus,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text:focus{outline:none}nv-fieldmultiselect .input-container-multiselect input::placeholder,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text::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-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{}nv-fieldmultiselect .input-container-multiselect input[type=password]::-ms-clear,nv-fieldmultiselect .input-container-multiselect input[type=password]::-ms-reveal,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text[type=password]::-ms-clear,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{width:100%;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton{border:0px;border-radius:0px}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fieldmultiselect .input-container-multiselect nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldmultiselect .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fieldmultiselect .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fieldmultiselect .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-fieldmultiselect .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)}.no-results-message{cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled);padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x)}.multiselect-divider{display:block;width:100%;height:1px;background-color:var(--components-list-dropdown-separator);margin:var(--list-dropdown-item-padding-y) 0;border:0}.select-all-container{position:sticky;top:0;background-color:var(--components-list-dropdown-background);border-bottom:1px solid var(--components-list-dropdown-separator);padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);z-index:10;margin-bottom:0}.select-all-container .select-all-header{display:flex;align-items:center;gap:var(--form-field-gap)}.select-all-container .select-all-header nv-fieldcheckbox{flex:1;margin:0}.select-all-container .select-all-header nv-iconbutton,.select-all-container .select-all-header nv-button{flex-shrink:0;margin-left:auto}.select-all-container .select-all-header nv-button{justify-content:center}";
|
|
10
|
+
const nvFieldmultiselectCss = () => `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-fieldmultiselect{--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-fieldmultiselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldmultiselect[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-fieldmultiselect[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-fieldmultiselect[required]:not([required=false]) label::after,nv-fieldmultiselect[aria-required=true] label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldmultiselect 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-fieldmultiselect nv-popover{width:100%;display:block}nv-fieldmultiselect nv-popover [data-scope=popover]{min-width:100%;width:max-content;max-width:400px;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fieldmultiselect nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fieldmultiselect nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldmultiselect nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fieldmultiselect .input-wrapper-multiselect{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldmultiselect .input-container-multiselect{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-fieldmultiselect .input-container-multiselect:hover{border-color:var(--nv-field-border-hover)}nv-fieldmultiselect .input-container-multiselect:focus-within,nv-fieldmultiselect .input-container-multiselect:focus-within:hover,nv-fieldmultiselect .input-container-multiselect:focus,nv-fieldmultiselect .input-container-multiselect: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-fieldmultiselect .input-container-multiselect:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldmultiselect .input-container-multiselect:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldmultiselect .input-container-multiselect{position:relative;width:100%;min-height:40px}nv-fieldmultiselect .input-container-multiselect>nv-badge{margin-left:var(--form-field-padding-x)}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{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-fieldmultiselect .input-container-multiselect input:focus,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text:focus{outline:none}nv-fieldmultiselect .input-container-multiselect input::placeholder,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text::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-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{}nv-fieldmultiselect .input-container-multiselect input[type=password]::-ms-clear,nv-fieldmultiselect .input-container-multiselect input[type=password]::-ms-reveal,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text[type=password]::-ms-clear,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{width:100%;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton{border:0px;border-radius:0px}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fieldmultiselect .input-container-multiselect nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldmultiselect .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fieldmultiselect .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fieldmultiselect .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-fieldmultiselect .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)}.no-results-message{cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled);padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x)}.multiselect-divider{display:block;width:100%;height:1px;background-color:var(--components-list-dropdown-separator);margin:var(--list-dropdown-item-padding-y) 0;border:0}.select-all-container{position:sticky;top:0;background-color:var(--components-list-dropdown-background);border-bottom:1px solid var(--components-list-dropdown-separator);padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);z-index:10;margin-bottom:0}.select-all-container .select-all-header{display:flex;align-items:center;gap:var(--form-field-gap)}.select-all-container .select-all-header nv-fieldcheckbox{flex:1;margin:0}.select-all-container .select-all-header nv-iconbutton,.select-all-container .select-all-header nv-button{flex-shrink:0;margin-left:auto}.select-all-container .select-all-header nv-button{justify-content:center}`;
|
|
11
11
|
|
|
12
12
|
const NvFieldmultiselect = class {
|
|
13
13
|
constructor(hostRef) {
|
|
@@ -604,7 +604,6 @@ const NvFieldmultiselect = class {
|
|
|
604
604
|
//#endregion WATCHERS
|
|
605
605
|
/****************************************************************************/
|
|
606
606
|
//#region LISTENERS
|
|
607
|
-
/* eslint-disable nova/native-event-listener */
|
|
608
607
|
/**
|
|
609
608
|
* Listen for the `itemChecked` event emitted by child items.
|
|
610
609
|
* @param {CustomEvent} event - The event object containing the selected value and its checked state.
|
|
@@ -642,7 +641,6 @@ const NvFieldmultiselect = class {
|
|
|
642
641
|
console.warn('[Event:itemChecked] Received itemChecked event with undefined or null value'); // Warning log
|
|
643
642
|
}
|
|
644
643
|
}
|
|
645
|
-
/* eslint-enable nova/native-event-listener */
|
|
646
644
|
// Add a listener for the slot content
|
|
647
645
|
handleSlotChange(event) {
|
|
648
646
|
// Check: we only want to reorder if it's the "content" slot
|
|
@@ -1466,11 +1464,17 @@ const NvFieldmultiselect = class {
|
|
|
1466
1464
|
static get formAssociated() { return true; }
|
|
1467
1465
|
get el() { return index.getElement(this); }
|
|
1468
1466
|
static get watchers() { return {
|
|
1469
|
-
"options": [
|
|
1470
|
-
|
|
1471
|
-
|
|
1467
|
+
"options": [{
|
|
1468
|
+
"handleOptionsChange": 0
|
|
1469
|
+
}],
|
|
1470
|
+
"value": [{
|
|
1471
|
+
"watchValueHandler": 0
|
|
1472
|
+
}],
|
|
1473
|
+
"open": [{
|
|
1474
|
+
"handleOpenChange": 0
|
|
1475
|
+
}]
|
|
1472
1476
|
}; }
|
|
1473
1477
|
};
|
|
1474
|
-
NvFieldmultiselect.style = nvFieldmultiselectCss;
|
|
1478
|
+
NvFieldmultiselect.style = nvFieldmultiselectCss();
|
|
1475
1479
|
|
|
1476
1480
|
exports.nv_fieldmultiselect = NvFieldmultiselect;
|
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-DUlunl9a.js');
|
|
4
|
+
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
5
|
+
require('@stencil/react-output-target/runtime');
|
|
6
|
+
require('react');
|
|
7
|
+
require('react-dom');
|
|
8
|
+
|
|
9
|
+
const nvFieldnumberCss = () => `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-fieldnumber{--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-fieldnumber[fluid]:not([fluid=false]){max-width:unset}nv-fieldnumber[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-fieldnumber[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-fieldnumber[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-fieldnumber[required]:not([required=false]) label::after,nv-fieldnumber[aria-required=true] label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldnumber 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-fieldnumber .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldnumber .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-fieldnumber .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldnumber .input-wrapper .input-container:focus-within,nv-fieldnumber .input-wrapper .input-container:focus-within:hover,nv-fieldnumber .input-wrapper .input-container:focus,nv-fieldnumber .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-fieldnumber .input-wrapper .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldnumber .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-fieldnumber .input-wrapper .input-container{container-type:inline-size;container-name:field-number-input-container;overflow:hidden;position:relative}nv-fieldnumber .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-fieldnumber .input-wrapper .input-container input:focus{outline:none}nv-fieldnumber .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-fieldnumber .input-wrapper .input-container input{}nv-fieldnumber .input-wrapper .input-container input[type=password]::-ms-clear,nv-fieldnumber .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldnumber .input-wrapper .input-container input{width:100%;appearance:textfield}nv-fieldnumber .input-wrapper .input-container input::-webkit-inner-spin-button,nv-fieldnumber .input-wrapper .input-container input::-webkit-outer-spin-button{appearance:none;margin:0}nv-fieldnumber .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default);margin-right:var(--form-field-gap)}nv-fieldnumber .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fieldnumber .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldnumber .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-fieldnumber .input-wrapper .input-container .stepper{display:flex;border-left:var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly)}nv-fieldnumber .input-wrapper .input-container .stepper>nv-iconbutton{border:0px;border-radius:0px}nv-fieldnumber .input-wrapper .input-container .stepper>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldnumber .input-wrapper .input-container .stepper>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fieldnumber .input-wrapper .input-container .stepper>nv-iconbutton{border-radius:0px}@container field-number-input-container (width < 150px){nv-fieldnumber .input-wrapper .input-container .stepper-spacer{display:none}nv-fieldnumber .input-wrapper .input-container .stepper{display:none}}nv-fieldnumber .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-fieldnumber .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)}`;
|
|
10
|
+
|
|
11
|
+
const NvFieldnumber = class {
|
|
12
|
+
constructor(hostRef) {
|
|
13
|
+
index.registerInstance(this, hostRef);
|
|
14
|
+
this.valueChanged = index.createEvent(this, "valueChanged", 3);
|
|
15
|
+
//#endregion DEPRECATED
|
|
16
|
+
/****************************************************************************/
|
|
17
|
+
//#region PROPERTIES
|
|
18
|
+
/**
|
|
19
|
+
* Sets the ID for the input element and the for attribute of the associated
|
|
20
|
+
* label. If no ID is provided, a random one will be automatically generated
|
|
21
|
+
* to ensure unique identification, facilitating proper label association and
|
|
22
|
+
* accessibility.
|
|
23
|
+
*/
|
|
24
|
+
this.inputId = v4BdYh22OP.v4();
|
|
25
|
+
/**
|
|
26
|
+
* The disabled prop lets you turn off the input field so that users can’t
|
|
27
|
+
* type in it. When disabled, the field is grayed out and won’t respond to#
|
|
28
|
+
* clicks or touches.
|
|
29
|
+
*/
|
|
30
|
+
this.disabled = false;
|
|
31
|
+
/**
|
|
32
|
+
* Display the input field’s content without allowing users to change it.
|
|
33
|
+
* Users can still click on it, select, and copy the text, but they won’t be
|
|
34
|
+
* able to type or delete anything.
|
|
35
|
+
*/
|
|
36
|
+
this.readonly = false;
|
|
37
|
+
/**
|
|
38
|
+
* Marks the input field as required, ensuring that the user must fill it out
|
|
39
|
+
* before submitting the form.
|
|
40
|
+
* @note This uses the native HTML `required` attribute, which triggers browser validation.
|
|
41
|
+
*/
|
|
42
|
+
this.required = false;
|
|
43
|
+
/**
|
|
44
|
+
* Marks the input field as required for accessibility purposes without triggering
|
|
45
|
+
* native HTML validation. Use this when implementing custom validation logic.
|
|
46
|
+
* @note When set, this uses `aria-required` instead of the native `required` attribute.
|
|
47
|
+
* This allows developers to implement custom validation while maintaining accessibility.
|
|
48
|
+
* @note If this prop is not explicitly set, the component will check for the HTML attribute
|
|
49
|
+
* 'aria-required' directly to determine if it should be applied.
|
|
50
|
+
*/
|
|
51
|
+
this.ariaRequiredAttr = false;
|
|
52
|
+
/**
|
|
53
|
+
* Alters the input field's appearance to indicate an error, helping users
|
|
54
|
+
* identify fields that need correction.
|
|
55
|
+
* @validator error
|
|
56
|
+
*/
|
|
57
|
+
this.error = false;
|
|
58
|
+
/**
|
|
59
|
+
* Changes the input field’s appearance to indicate successful input or
|
|
60
|
+
* validation.
|
|
61
|
+
*/
|
|
62
|
+
this.success = false;
|
|
63
|
+
/**
|
|
64
|
+
* Define the increment value for the input field. It determines how much the
|
|
65
|
+
* value will increase or decrease when the user clicks the stepper buttons.
|
|
66
|
+
*/
|
|
67
|
+
this.step = 1;
|
|
68
|
+
/**
|
|
69
|
+
* Applies focus to the input field as soon as the component is mounted. This
|
|
70
|
+
* is equivalent to setting the native autofocus attribute on an <input>
|
|
71
|
+
* element.
|
|
72
|
+
*/
|
|
73
|
+
this.autofocus = false;
|
|
74
|
+
/**
|
|
75
|
+
* Allows the field to stretch and fill the entire width of its container.
|
|
76
|
+
*/
|
|
77
|
+
this.fluid = false;
|
|
78
|
+
//#endregion WATCHERS
|
|
79
|
+
/****************************************************************************/
|
|
80
|
+
//#region METHODS
|
|
81
|
+
this.handleInput = (event) => {
|
|
82
|
+
const input = event.target;
|
|
83
|
+
if (input.value === '') {
|
|
84
|
+
this.value = null;
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
const nextValue = input.valueAsNumber;
|
|
88
|
+
if (Number.isNaN(nextValue)) {
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
this.value = nextValue;
|
|
92
|
+
};
|
|
93
|
+
this.handleInputContainerClick = () => {
|
|
94
|
+
this.inputElement.focus();
|
|
95
|
+
};
|
|
96
|
+
this.handlePlus = () => {
|
|
97
|
+
this.inputElement.stepUp();
|
|
98
|
+
this.value = Number(this.inputElement.value);
|
|
99
|
+
};
|
|
100
|
+
this.handleMinus = () => {
|
|
101
|
+
this.inputElement.stepDown();
|
|
102
|
+
this.value = Number(this.inputElement.value);
|
|
103
|
+
};
|
|
104
|
+
// prevents text selection when clicking the buttons multiple times
|
|
105
|
+
this.preventSelection = (event) => {
|
|
106
|
+
event.preventDefault();
|
|
107
|
+
};
|
|
108
|
+
this.isMinValueReached = () => {
|
|
109
|
+
return (this.min !== undefined &&
|
|
110
|
+
typeof this.value === 'number' &&
|
|
111
|
+
this.value <= this.min);
|
|
112
|
+
};
|
|
113
|
+
this.isMaxValueReached = () => {
|
|
114
|
+
return (this.max !== undefined &&
|
|
115
|
+
typeof this.value === 'number' &&
|
|
116
|
+
this.value >= this.max);
|
|
117
|
+
};
|
|
118
|
+
}
|
|
119
|
+
//#endregion EVENTS
|
|
120
|
+
/****************************************************************************/
|
|
121
|
+
//#region WATCHERS
|
|
122
|
+
watchValueHandler(newValue) {
|
|
123
|
+
const normalized = typeof newValue === 'number' && !Number.isNaN(newValue) ? newValue : null;
|
|
124
|
+
if (this.lastEmittedValue === normalized) {
|
|
125
|
+
return;
|
|
126
|
+
}
|
|
127
|
+
this.lastEmittedValue = normalized;
|
|
128
|
+
this.valueChanged.emit(normalized);
|
|
129
|
+
}
|
|
130
|
+
//#endregion METHODS
|
|
131
|
+
/****************************************************************************/
|
|
132
|
+
//#region LIFECYCLE
|
|
133
|
+
componentWillRender() {
|
|
134
|
+
if (this.message) {
|
|
135
|
+
this.description = this.message;
|
|
136
|
+
}
|
|
137
|
+
if (this.validation) {
|
|
138
|
+
this.errorDescription = this.validation;
|
|
139
|
+
this.error = true;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
//#endregion LIFECYCLE
|
|
143
|
+
/****************************************************************************/
|
|
144
|
+
//#region RENDER
|
|
145
|
+
render() {
|
|
146
|
+
// Check aria-required from multiple sources:
|
|
147
|
+
// 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set
|
|
148
|
+
// 2. JavaScript prop (when prop is explicitly set via JavaScript)
|
|
149
|
+
// We use hasAttribute to determine if the attribute was explicitly set by the user,
|
|
150
|
+
// since the prop now defaults to false (to maintain Blazor compatibility)
|
|
151
|
+
const hasAriaRequiredAttr = this.el.hasAttribute('aria-required') ||
|
|
152
|
+
this.el.hasAttribute('aria-required-attr');
|
|
153
|
+
const ariaRequiredFromAttr = hasAriaRequiredAttr
|
|
154
|
+
? this.el.getAttribute('aria-required') ||
|
|
155
|
+
this.el.getAttribute('aria-required-attr')
|
|
156
|
+
: null;
|
|
157
|
+
// Use aria-required if the attribute was explicitly set
|
|
158
|
+
// With reflect: true, setting the prop will also set the attribute
|
|
159
|
+
const useAriaRequired = hasAriaRequiredAttr;
|
|
160
|
+
// Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)
|
|
161
|
+
// If attribute doesn't exist, the prop was never set and we don't use aria-required
|
|
162
|
+
const ariaRequiredAttrValue = hasAriaRequiredAttr
|
|
163
|
+
? ariaRequiredFromAttr
|
|
164
|
+
: null;
|
|
165
|
+
// Determine which attributes to use
|
|
166
|
+
// If aria-required HTML attribute is present, use it (convert string to boolean)
|
|
167
|
+
// If required is set and aria-required is not "false", use native required
|
|
168
|
+
// If aria-required is "false", don't use native required even if required is set
|
|
169
|
+
const ariaRequiredValue = useAriaRequired
|
|
170
|
+
? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
|
|
171
|
+
: undefined;
|
|
172
|
+
const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
|
|
173
|
+
return (index.h(index.Host, { key: '8923d44cca66a2540688650ababfeec76ea1ef37' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '56b80106201b70cb881df6051c6ef12694762cc3', htmlFor: this.inputId }, index.h("slot", { key: '864103e328f18ad16041f434856ee6b3c996aa86', name: "label" }, this.label))), index.h("div", { key: '83f62b35fa18c43b7825d1510e47b47151c007cd', class: "input-wrapper" }, index.h("slot", { key: 'c566e63d0e78c63ee1a3d42e44dfed04eb1bf442', name: "before-input" }), index.h("div", { key: '234a861d3bd801394ed529a96480616357d1be68', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'c1128d9b4cbe4b7c2c57117b8b86f8ae553df749', name: "leading-input" }), index.h("input", { key: 'b5d2a4a11e7a86be87bc43b2258352c427478f2e', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
|
|
174
|
+
'aria-required': String(ariaRequiredValue),
|
|
175
|
+
}), max: this.max, min: this.min, step: this.step, value: typeof this.value === 'number' ? this.value : undefined, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), index.h("slot", { key: '37629423645755fdf53ea955ead6950752047ca4', name: "trailing-input" }), this.error && (index.h("nv-icon", { key: 'a23fccf662246ac1f696942f96d632112644b103', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'b20933d5b749b3d3bc56ceb9acab8dc4a1a22c7b', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: '1b1eccecd0c62d1c8675b323e5e69df4321ab0b1', class: "stepper" }, index.h("nv-iconbutton", { key: '4065c40b5f1dcb35d4508741d24ec4e98b410e20', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), index.h("nv-iconbutton", { key: '185fc575ffb4143b6f212831c0cfdb9467593a14', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), index.h("slot", { key: '684f6fd512db5becf5a392d641583f3fde4b7ee1', name: "after-input" })), (this.description ||
|
|
176
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '731b758b37cf19b90ed83fc59ef071d758fa308c', class: "description" }, index.h("slot", { key: '6c5b91e259ec4f70353ff52297c5d9e3f5d4e830', name: "description" }, this.description))), (this.errorDescription ||
|
|
177
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'ac5c52dc7f3ece9cb6c7fa19dfc537fbac307686', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'ce43bfc92428463267fccf376b580ab6794e9200', name: "error-description" }, this.errorDescription)))));
|
|
178
|
+
}
|
|
179
|
+
static get formAssociated() { return true; }
|
|
180
|
+
get el() { return index.getElement(this); }
|
|
181
|
+
static get watchers() { return {
|
|
182
|
+
"value": [{
|
|
183
|
+
"watchValueHandler": 0
|
|
184
|
+
}]
|
|
185
|
+
}; }
|
|
186
|
+
};
|
|
187
|
+
NvFieldnumber.style = nvFieldnumberCss();
|
|
188
|
+
|
|
189
|
+
exports.nv_fieldnumber = NvFieldnumber;
|