@nova-design-system/nova-react 3.28.0 → 3.30.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 -1
- package/dist/cjs/{constants-BReL3Lsa-DpB_ghPF.js → constants-gOKBmbgZ-CSoZ8z-G.js} +5 -0
- package/dist/cjs/generated/components.server.js +33 -1
- package/dist/cjs/index-DXwd3F_r.js +10391 -0
- package/dist/cjs/index.js +7 -1
- package/dist/cjs/{nv-accordion-item.entry-fds_kk_3.js → nv-accordion-item.entry-CTbduehY.js} +3 -3
- package/dist/cjs/{nv-accordion.entry-BLs4N5ZL.js → nv-accordion.entry-DeaPwIUP.js} +2 -2
- package/dist/cjs/{nv-alert.entry-Bx1BiC8F.js → nv-alert.entry-B5k8RXXD.js} +8 -8
- package/dist/cjs/{nv-avatar.entry-DS88LME3.js → nv-avatar.entry-CJh9bGfN.js} +8 -8
- package/dist/cjs/{nv-badge_2.entry-vBPxmUmg.js → nv-badge_2.entry-BnPPW4rW.js} +8 -7
- package/dist/cjs/{nv-breadcrumb.entry-BOo3hA5y.js → nv-breadcrumb.entry-DS5GJVCJ.js} +2 -2
- package/dist/cjs/{nv-breadcrumbs.entry-igHC_6Bd.js → nv-breadcrumbs.entry-CJ835Ba8.js} +2 -2
- package/dist/cjs/{nv-button.entry-BRQPmQbs.js → nv-button.entry-8U0o_X3d.js} +7 -7
- package/dist/cjs/{nv-buttongroup.entry-D3tG2EZ1.js → nv-buttongroup.entry-D5I5d9y0.js} +2 -2
- package/dist/cjs/{nv-calendar.entry-BpNHMTKr.js → nv-calendar.entry-C0ggIM3A.js} +9 -9
- package/dist/cjs/{nv-col.entry-lyIZqDsW.js → nv-col.entry-tIk723nS.js} +2 -2
- package/dist/cjs/{nv-datagrid.entry-BeemONKu.js → nv-datagrid.entry-Cal_usTi.js} +8 -8
- package/dist/cjs/{nv-datagridcolumn.entry-B6kE4eVC.js → nv-datagridcolumn.entry-BLbpwW7Q.js} +2 -2
- package/dist/cjs/{nv-datetest.entry-C1uuC-ZG.js → nv-datetest.entry-NQzySOox.js} +2 -2
- package/dist/cjs/{nv-datetimetest.entry-Hthxbjj9.js → nv-datetimetest.entry-Br6j4eAR.js} +1 -1
- package/dist/cjs/{nv-dialog.entry-Cr9zwMPo.js → nv-dialog.entry-GTDQJaoQ.js} +3 -3
- package/dist/cjs/{nv-dialogfooter_2.entry-DaaKojyE.js → nv-dialogfooter_2.entry-CHY36NHl.js} +10 -8
- package/dist/cjs/{nv-drawer.entry-0UaYxCjh.js → nv-drawer.entry-C-TZDi4-.js} +3 -3
- package/dist/cjs/{nv-drawerfooter_2.entry-CqtuC7xP.js → nv-drawerfooter_2.entry-DTY4qAnd.js} +8 -6
- package/dist/cjs/{nv-fieldcheckbox.entry-DK3aO8C8.js → nv-fieldcheckbox.entry-Qf4gdEnq.js} +5 -5
- package/dist/cjs/{nv-fielddate.entry-BY-xF3KN.js → nv-fielddate.entry-D1aJmKbh.js} +8 -8
- package/dist/cjs/{nv-fielddaterange.entry-BT6qCQc3.js → nv-fielddaterange.entry-Vc-gHwf8.js} +8 -8
- package/dist/cjs/{nv-fielddropdown.entry-CsVD067i.js → nv-fielddropdown.entry-BVVsM71m.js} +6 -6
- package/dist/cjs/{nv-fielddropdownitem.entry-Crtfwlx7.js → nv-fielddropdownitem.entry-DTRonCZJ.js} +2 -2
- package/dist/cjs/{nv-fieldmultiselect.entry-C2uoE60e.js → nv-fieldmultiselect.entry-Cvsh_jn7.js} +115 -86
- package/dist/cjs/{nv-fieldnumber.entry-DzW5SiiZ.js → nv-fieldnumber.entry-jVFZ0wj3.js} +6 -6
- package/dist/cjs/{nv-fieldpassword.entry-D4r9Qxos.js → nv-fieldpassword.entry-CQKbWqMe.js} +6 -6
- package/dist/cjs/{nv-fieldradio.entry-DX0Ghx--.js → nv-fieldradio.entry-FPGOqFBo.js} +4 -4
- package/dist/cjs/{nv-fieldselect.entry-_CglE66i.js → nv-fieldselect.entry-DJmW4pff.js} +7 -7
- package/dist/cjs/{nv-fieldslider.entry-6zt75uDU.js → nv-fieldslider.entry-D71HjSto.js} +4 -4
- package/dist/cjs/{nv-fieldtext.entry-B4X110wn.js → nv-fieldtext.entry-BxgbvxEW.js} +6 -6
- package/dist/cjs/{nv-fieldtextarea.entry-CeAMhA8Y.js → nv-fieldtextarea.entry-BDS37zhJ.js} +5 -5
- package/dist/cjs/{nv-fieldtime.entry-BvzncwNd.js → nv-fieldtime.entry-DkWokxdT.js} +55 -52
- package/dist/cjs/{nv-icon.entry-C2md2kmq.js → nv-icon.entry-CUemAv89.js} +8 -8
- package/dist/cjs/{nv-iconbutton_2.entry-D-zRpLjT.js → nv-iconbutton_2.entry-BLdJr3QV.js} +3 -3
- package/dist/cjs/{nv-menu.entry-DN_DkosX.js → nv-menu.entry-z4cDNCeX.js} +2 -2
- package/dist/cjs/{nv-menuitem.entry-Cj6w33rq.js → nv-menuitem.entry-4XdONuGl.js} +2 -2
- package/dist/cjs/{nv-notification-bullet.entry-DagStJ3K.js → nv-notification-bullet.entry-B1EK4G_X.js} +1 -1
- package/dist/cjs/{nv-notification.entry-oV69FpxE.js → nv-notification.entry-BBAQ72f7.js} +19 -19
- package/dist/cjs/{nv-notificationcontainer.entry-gQGHHeer.js → nv-notificationcontainer.entry-CtFunFA9.js} +2 -2
- package/dist/cjs/{nv-pagination-nav.entry-BYvcVj1M.js → nv-pagination-nav.entry-DbzEBjoa.js} +2 -2
- package/dist/cjs/{nv-paginationtable.entry-CwCFQwbl.js → nv-paginationtable.entry-DRGsk0DH.js} +19 -3
- package/dist/cjs/{nv-popover.entry-DySToeSB.js → nv-popover.entry-w9o3Y_vT.js} +2 -2
- package/dist/cjs/{nv-row.entry-46ghuEeG.js → nv-row.entry-Cop4QB1Y.js} +2 -2
- package/dist/cjs/nv-sidebar.entry-96HyTMt9.js +355 -0
- package/dist/cjs/{nv-sidebarcontent.entry-Pb8c2QoA.js → nv-sidebarcontent.entry-RCkZZp9I.js} +2 -2
- package/dist/cjs/{nv-sidebardivider.entry-LCCO53Z5.js → nv-sidebardivider.entry-DY25WqI7.js} +2 -2
- package/dist/cjs/{nv-sidebarfooter.entry-DG5fkLHd.js → nv-sidebarfooter.entry-9BFpNPLP.js} +2 -2
- package/dist/cjs/{nv-sidebargroup.entry-DRqkSyQi.js → nv-sidebargroup.entry-Cj52DXba.js} +2 -2
- package/dist/cjs/{nv-sidebarheader.entry-D6WvH2wG.js → nv-sidebarheader.entry-_WZgNwoi.js} +2 -2
- package/dist/cjs/{nv-sidebarlogo.entry-BorScwI-.js → nv-sidebarlogo.entry-4Zy6k3V5.js} +2 -2
- package/dist/cjs/{nv-sidebarnavitem.entry-BEW74Rw3.js → nv-sidebarnavitem.entry-fQ9sqxDj.js} +3 -3
- package/dist/cjs/{nv-sidebarnavsubitem.entry-EgaIlUfP.js → nv-sidebarnavsubitem.entry-1iBobkME.js} +2 -2
- package/dist/cjs/{nv-split.entry-CEC5Tuwz.js → nv-split.entry-Dfzpge0r.js} +2 -2
- package/dist/cjs/{nv-stack.entry-BR8lYaoI.js → nv-stack.entry-BnCput1S.js} +2 -2
- package/dist/cjs/nv-statusindicator.entry-ClPHcTkz.js +42 -0
- package/dist/cjs/{nv-table.entry-CISZFst5.js → nv-table.entry-DsllD6Bz.js} +3 -3
- package/dist/cjs/{nv-tableheader.entry-DbdpTJGC.js → nv-tableheader.entry-AWCKrpLj.js} +2 -2
- package/dist/cjs/nv-tag.entry-BwENpoSV.js +85 -0
- package/dist/cjs/{nv-timetest.entry-Dg1JEgAv.js → nv-timetest.entry-BQsV7Qb2.js} +2 -2
- package/dist/cjs/{nv-toggle.entry-DDfRpC1R.js → nv-toggle.entry-a0tSJ6GE.js} +3 -3
- package/dist/cjs/{nv-togglebutton.entry-D7NkdIXP.js → nv-togglebutton.entry-CT8fZr74.js} +2 -2
- package/dist/cjs/{nv-togglebuttongroup.entry-L8gitSUS.js → nv-togglebuttongroup.entry-BN7WkQ_L.js} +2 -2
- package/dist/cjs/{nv-tooltip.entry-BElnrEqE.js → nv-tooltip.entry-xpFqRgZM.js} +2 -2
- package/dist/components/NvDatatable/NvDatatable.js +294 -88
- package/dist/components/NvDatatable/expandState.js +8 -0
- package/dist/components/NvDatatable/expandState.test.js +41 -0
- package/dist/components/NvDatatable/paginationState.js +9 -0
- package/dist/components/NvDatatable/paginationState.test.js +84 -0
- package/dist/generated/components.js +20 -1
- package/dist/generated/components.server.js +31 -1
- package/dist/types/components/NvDatatable/NvDatatable.d.ts +1 -1
- package/dist/types/components/NvDatatable/expandState.d.ts +5 -0
- package/dist/types/components/NvDatatable/expandState.test.d.ts +1 -0
- package/dist/types/components/NvDatatable/paginationState.d.ts +9 -0
- package/dist/types/components/NvDatatable/paginationState.test.d.ts +1 -0
- package/dist/types/components/NvDatatable/types.d.ts +21 -1
- package/dist/types/generated/components.d.ts +12 -1
- package/dist/types/generated/components.server.d.ts +12 -1
- package/dist/types/index.d.ts +1 -0
- package/dist/types/providers/NotificationProvider.d.ts +2 -2
- package/package.json +1 -1
- package/dist/cjs/index-Kxp9mv-Q.js +0 -10119
- package/dist/cjs/nv-sidebar.entry-B6opNG2r.js +0 -181
package/dist/cjs/{nv-fieldmultiselect.entry-C2uoE60e.js → nv-fieldmultiselect.entry-Cvsh_jn7.js}
RENAMED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-DXwd3F_r.js');
|
|
4
4
|
var i18n_utilsCR9MpYzU = require('./i18n.utils-CR9MpYzU-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 nv-popover div[slot=content] ul[role=listbox]{display:flex;flex-direction:column}nv-fieldmultiselect nv-popover div[slot=content] ul[role=listbox]>*:not(nv-fielddropdownitemcheck):not(hr.multiselect-divider){order:40}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)}nv-fieldmultiselect .error-description[hidden]{display:none}.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;flex-shrink: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) {
|
|
@@ -242,23 +242,6 @@ const NvFieldmultiselect = class {
|
|
|
242
242
|
this.resetFilter();
|
|
243
243
|
this.hasFilterResults = true;
|
|
244
244
|
};
|
|
245
|
-
/**
|
|
246
|
-
* Handle input blur for options mode.
|
|
247
|
-
*/
|
|
248
|
-
this.handleInputBlurOptions = () => {
|
|
249
|
-
setTimeout(() => {
|
|
250
|
-
if (this.preventBlurClose) {
|
|
251
|
-
this.preventBlurClose = false;
|
|
252
|
-
return; // Don't close the popover
|
|
253
|
-
}
|
|
254
|
-
if (!this.el.contains(document.activeElement)) {
|
|
255
|
-
this.open = false; // Close the popover on blur
|
|
256
|
-
if (this.filterable) {
|
|
257
|
-
this.clearFilterText(); // Clear filter text on blur
|
|
258
|
-
}
|
|
259
|
-
}
|
|
260
|
-
}, 150);
|
|
261
|
-
};
|
|
262
245
|
/**
|
|
263
246
|
* Handle click on the input container for options mode.
|
|
264
247
|
* @param {MouseEvent} event - The click event.
|
|
@@ -362,23 +345,6 @@ const NvFieldmultiselect = class {
|
|
|
362
345
|
}
|
|
363
346
|
this.open = true;
|
|
364
347
|
};
|
|
365
|
-
/**
|
|
366
|
-
* Handle input blur for slots mode.
|
|
367
|
-
*/
|
|
368
|
-
this.handleInputBlurSlots = () => {
|
|
369
|
-
setTimeout(() => {
|
|
370
|
-
if (this.preventBlurClose) {
|
|
371
|
-
this.preventBlurClose = false;
|
|
372
|
-
return; // Don't close the popover
|
|
373
|
-
}
|
|
374
|
-
if (!this.el.contains(document.activeElement)) {
|
|
375
|
-
this.open = false; // Close the popover on blur
|
|
376
|
-
if (this.filterable) {
|
|
377
|
-
this.clearFilterText(); // Clear filter text on blur
|
|
378
|
-
}
|
|
379
|
-
}
|
|
380
|
-
}, 150);
|
|
381
|
-
};
|
|
382
348
|
/**
|
|
383
349
|
* Toggle the multiselect popover for options mode.
|
|
384
350
|
*/
|
|
@@ -503,6 +469,17 @@ const NvFieldmultiselect = class {
|
|
|
503
469
|
};
|
|
504
470
|
this.handleMouseDownPreventBlur = () => {
|
|
505
471
|
this.preventBlurClose = true;
|
|
472
|
+
// Scope the flag to the immediate click cycle only. Synchronous focus
|
|
473
|
+
// events fired during this click (mousedown → focusout → mouseup → click)
|
|
474
|
+
// run before the next macrotask, so any focusout that *should* be
|
|
475
|
+
// suppressed will already have consumed the flag by the time this clears.
|
|
476
|
+
// Without this cleanup, a click on a non-focus-taking target (e.g. the
|
|
477
|
+
// chevron when nothing inside the host had focus, or the tabindex="-1"
|
|
478
|
+
// clear-filter button) leaves the flag set and the user's next Tab-out
|
|
479
|
+
// gets silently swallowed instead of closing the popover.
|
|
480
|
+
setTimeout(() => {
|
|
481
|
+
this.preventBlurClose = false;
|
|
482
|
+
}, 0);
|
|
506
483
|
};
|
|
507
484
|
//#endregion METHODS
|
|
508
485
|
/****************************************************************************/
|
|
@@ -517,7 +494,7 @@ const NvFieldmultiselect = class {
|
|
|
517
494
|
: undefined, ...(this.getRequiredAttributes().ariaRequiredValue !==
|
|
518
495
|
undefined && {
|
|
519
496
|
'aria-required': String(this.getRequiredAttributes().ariaRequiredValue),
|
|
520
|
-
}), disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions,
|
|
497
|
+
}), disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onKeyDown: this.handleKeyDown, "data-scope": "focusable", "aria-label": this.label, "aria-controls": `${this.inputId}-listbox` })) : (index.h(index.Fragment, null, index.h("input", { id: this.inputId, type: "text", style: {
|
|
521
498
|
position: 'absolute',
|
|
522
499
|
opacity: '0',
|
|
523
500
|
width: '0',
|
|
@@ -538,7 +515,7 @@ const NvFieldmultiselect = class {
|
|
|
538
515
|
: undefined, ...(this.getRequiredAttributes().ariaRequiredValue !==
|
|
539
516
|
undefined && {
|
|
540
517
|
'aria-required': String(this.getRequiredAttributes().ariaRequiredValue),
|
|
541
|
-
}), disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots,
|
|
518
|
+
}), disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onKeyDown: this.handleKeyDown, "data-scope": "focusable", "aria-label": this.label, "aria-controls": `${this.inputId}-listbox` })) : (index.h(index.Fragment, null, index.h("input", { id: this.inputId, type: "text", style: {
|
|
542
519
|
position: 'absolute',
|
|
543
520
|
opacity: '0',
|
|
544
521
|
width: '0',
|
|
@@ -653,6 +630,31 @@ const NvFieldmultiselect = class {
|
|
|
653
630
|
});
|
|
654
631
|
}
|
|
655
632
|
}
|
|
633
|
+
/**
|
|
634
|
+
* Close the dropdown when keyboard focus leaves the component.
|
|
635
|
+
* Uses focusout (which bubbles) so it covers every internal focusable
|
|
636
|
+
* (filter input, hidden input, trigger `<p>`, chevron iconbutton,
|
|
637
|
+
* clear-filter iconbutton, dropdown items, badge close button) without
|
|
638
|
+
* needing per-element onBlur wiring.
|
|
639
|
+
* @param {FocusEvent} event - The focus event.
|
|
640
|
+
*/
|
|
641
|
+
handleFocusOut(event) {
|
|
642
|
+
if (this.preventBlurClose) {
|
|
643
|
+
this.preventBlurClose = false;
|
|
644
|
+
return;
|
|
645
|
+
}
|
|
646
|
+
// Focus moved to another element inside the component → keep open.
|
|
647
|
+
if (event.relatedTarget instanceof Node &&
|
|
648
|
+
this.el.contains(event.relatedTarget)) {
|
|
649
|
+
return;
|
|
650
|
+
}
|
|
651
|
+
// Focus moved outside the component (external element, body, or
|
|
652
|
+
// programmatic blur where relatedTarget is null) → close the popover.
|
|
653
|
+
this.open = false;
|
|
654
|
+
if (this.filterable) {
|
|
655
|
+
this.clearFilterText();
|
|
656
|
+
}
|
|
657
|
+
}
|
|
656
658
|
/**
|
|
657
659
|
* Handle keyboard events & arrow key navigation.
|
|
658
660
|
* If the multiselect is not open, opens it and focuses on the first item if the list is not filterable.
|
|
@@ -660,6 +662,8 @@ const NvFieldmultiselect = class {
|
|
|
660
662
|
* @param {KeyboardEvent} event - The keyboard event.
|
|
661
663
|
*/
|
|
662
664
|
async handleKeyDown(event) {
|
|
665
|
+
if (this.disabled || this.readonly)
|
|
666
|
+
return;
|
|
663
667
|
if (event.key === 'Escape') {
|
|
664
668
|
this.open = false;
|
|
665
669
|
return;
|
|
@@ -678,12 +682,22 @@ const NvFieldmultiselect = class {
|
|
|
678
682
|
}
|
|
679
683
|
return;
|
|
680
684
|
}
|
|
681
|
-
|
|
685
|
+
// Sort by computed flex `order` so arrow keys follow the visual order
|
|
686
|
+
// (selected items first), with DOM order as tie-breaker.
|
|
687
|
+
const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck:not([style*="display: none"])')).sort((a, b) => {
|
|
688
|
+
const orderA = parseInt(window.getComputedStyle(a).order || '0', 10);
|
|
689
|
+
const orderB = parseInt(window.getComputedStyle(b).order || '0', 10);
|
|
690
|
+
if (orderA !== orderB)
|
|
691
|
+
return orderA - orderB;
|
|
692
|
+
return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING
|
|
693
|
+
? -1
|
|
694
|
+
: 1;
|
|
695
|
+
});
|
|
682
696
|
if (items.length === 0) {
|
|
683
697
|
console.warn('No visible items found to navigate');
|
|
684
698
|
return;
|
|
685
699
|
}
|
|
686
|
-
let currentIndex = items.findIndex(item => item.
|
|
700
|
+
let currentIndex = items.findIndex(item => item.getAttribute('data-state') === 'highlighted');
|
|
687
701
|
if (event.key === 'ArrowDown') {
|
|
688
702
|
event.preventDefault();
|
|
689
703
|
currentIndex =
|
|
@@ -698,7 +712,15 @@ const NvFieldmultiselect = class {
|
|
|
698
712
|
: (currentIndex - 1 + items.length) % items.length;
|
|
699
713
|
this.updateHighlightedItem(items, currentIndex);
|
|
700
714
|
}
|
|
701
|
-
else if (event.key === 'Enter'
|
|
715
|
+
else if ((event.key === 'Enter' || event.key === ' ') &&
|
|
716
|
+
currentIndex >= 0) {
|
|
717
|
+
// If the key event came from the chevron toggle button, nv-iconbutton
|
|
718
|
+
// has already handled open/close via its own keydown listener. Do not
|
|
719
|
+
// also toggle the highlighted item — that is a double-action bug.
|
|
720
|
+
const target = event.target;
|
|
721
|
+
if (target?.closest?.('[data-scope="toggle-dropdown"]')) {
|
|
722
|
+
return;
|
|
723
|
+
}
|
|
702
724
|
event.preventDefault();
|
|
703
725
|
const selectedItem = items[currentIndex];
|
|
704
726
|
// Toggle the checked state
|
|
@@ -902,7 +924,9 @@ const NvFieldmultiselect = class {
|
|
|
902
924
|
}
|
|
903
925
|
}
|
|
904
926
|
/**
|
|
905
|
-
* Reorder the content of the slot
|
|
927
|
+
* Reorder the content of the slot using CSS flex `order` so the
|
|
928
|
+
* underlying DOM order is preserved (clearing the selection restores
|
|
929
|
+
* the original visual order automatically).
|
|
906
930
|
*/
|
|
907
931
|
reorderSlotContent() {
|
|
908
932
|
if (this.options)
|
|
@@ -910,50 +934,47 @@ const NvFieldmultiselect = class {
|
|
|
910
934
|
const ul = this.el.querySelector('ul');
|
|
911
935
|
if (!ul)
|
|
912
936
|
return;
|
|
913
|
-
// Remove all existing <hr class="multiselect-divider">
|
|
914
|
-
ul.querySelectorAll('hr.multiselect-divider').forEach(divider => divider.remove());
|
|
915
937
|
// Retrieve all items (not hidden)
|
|
916
938
|
const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck')).filter(item => item.style.display !== 'none');
|
|
917
|
-
// If
|
|
939
|
+
// If a "No results" message is currently shown, hide the divider
|
|
940
|
+
// and skip the per-item ordering work.
|
|
918
941
|
const hasEmptyMessage = ul.querySelector('[data-empty]');
|
|
919
942
|
if (hasEmptyMessage) {
|
|
920
|
-
|
|
943
|
+
this.manageDivider(ul, [], []);
|
|
921
944
|
return;
|
|
922
945
|
}
|
|
923
|
-
|
|
924
|
-
const
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
// Add a divider if needed
|
|
933
|
-
if (selectedItems.length > 0 && unselectedItems.length > 0) {
|
|
934
|
-
const divider = document.createElement('hr');
|
|
935
|
-
divider.className = 'multiselect-divider';
|
|
936
|
-
ul.appendChild(divider);
|
|
937
|
-
}
|
|
938
|
-
// Reinsert UNCHECKED items at the end
|
|
939
|
-
unselectedItems.forEach(item => {
|
|
940
|
-
ul.appendChild(item);
|
|
946
|
+
const selectedItems = [];
|
|
947
|
+
const unselectedItems = [];
|
|
948
|
+
items.forEach(item => {
|
|
949
|
+
const isSelected = (this.value || []).includes(item.getAttribute('value') || '');
|
|
950
|
+
item.style.order = isSelected ? '10' : '30';
|
|
951
|
+
if (isSelected)
|
|
952
|
+
selectedItems.push(item);
|
|
953
|
+
else
|
|
954
|
+
unselectedItems.push(item);
|
|
941
955
|
});
|
|
956
|
+
this.manageDivider(ul, selectedItems, unselectedItems);
|
|
942
957
|
}
|
|
943
958
|
/**
|
|
944
|
-
* Reorder the content for options mode
|
|
959
|
+
* Reorder the content for options mode using CSS flex `order` so the
|
|
960
|
+
* underlying DOM order is preserved (clearing the selection restores
|
|
961
|
+
* the original visual order automatically).
|
|
945
962
|
*/
|
|
946
963
|
reorderOptionsContent() {
|
|
947
964
|
const ul = this.el.querySelector('ul');
|
|
948
965
|
if (!ul)
|
|
949
966
|
return;
|
|
950
967
|
const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck')).filter(item => item.style.display !== 'none');
|
|
951
|
-
const selectedItems =
|
|
952
|
-
const unselectedItems =
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
968
|
+
const selectedItems = [];
|
|
969
|
+
const unselectedItems = [];
|
|
970
|
+
items.forEach(item => {
|
|
971
|
+
const isSelected = (this.value || []).includes(item.getAttribute('value') || '');
|
|
972
|
+
item.style.order = isSelected ? '10' : '30';
|
|
973
|
+
if (isSelected)
|
|
974
|
+
selectedItems.push(item);
|
|
975
|
+
else
|
|
976
|
+
unselectedItems.push(item);
|
|
977
|
+
});
|
|
957
978
|
this.manageDivider(ul, selectedItems, unselectedItems);
|
|
958
979
|
}
|
|
959
980
|
/**
|
|
@@ -1035,6 +1056,8 @@ const NvFieldmultiselect = class {
|
|
|
1035
1056
|
emptyMessage.setAttribute('data-empty', 'true');
|
|
1036
1057
|
emptyMessage.textContent = this.emptyResult;
|
|
1037
1058
|
emptyMessage.classList.add('no-results-message');
|
|
1059
|
+
// Keep the message after any item rows under the flex `order` projection.
|
|
1060
|
+
emptyMessage.style.order = '40';
|
|
1038
1061
|
ul.appendChild(emptyMessage);
|
|
1039
1062
|
}
|
|
1040
1063
|
else if (result.truncated) {
|
|
@@ -1170,6 +1193,8 @@ const NvFieldmultiselect = class {
|
|
|
1170
1193
|
truncatedItem.setAttribute('data-truncated', 'true');
|
|
1171
1194
|
truncatedItem.className = 'truncated-message no-results-message';
|
|
1172
1195
|
truncatedItem.textContent = i18n_utilsCR9MpYzU.formatTruncatedResults(textTemplate, shown, total);
|
|
1196
|
+
// Keep the message after any item rows under the flex `order` projection.
|
|
1197
|
+
truncatedItem.style.order = '40';
|
|
1173
1198
|
ul.appendChild(truncatedItem);
|
|
1174
1199
|
}
|
|
1175
1200
|
handleClickOutside(event) {
|
|
@@ -1188,7 +1213,7 @@ const NvFieldmultiselect = class {
|
|
|
1188
1213
|
updateHighlightedItem(items, index) {
|
|
1189
1214
|
items.forEach((item, i) => {
|
|
1190
1215
|
if (i === index) {
|
|
1191
|
-
item.
|
|
1216
|
+
item.setAttribute('data-state', 'highlighted');
|
|
1192
1217
|
item.setAttribute('tabindex', '0');
|
|
1193
1218
|
item.scrollIntoView({ block: 'nearest' });
|
|
1194
1219
|
// Focus on the nv-fieldcheckbox inside
|
|
@@ -1198,19 +1223,30 @@ const NvFieldmultiselect = class {
|
|
|
1198
1223
|
}
|
|
1199
1224
|
}
|
|
1200
1225
|
else {
|
|
1201
|
-
item.
|
|
1226
|
+
item.removeAttribute('data-state');
|
|
1202
1227
|
item.setAttribute('tabindex', '-1');
|
|
1203
1228
|
}
|
|
1204
1229
|
});
|
|
1205
1230
|
}
|
|
1206
1231
|
/**
|
|
1207
|
-
* Focus on the first item in the dropdown list.
|
|
1232
|
+
* Focus on the first item in the dropdown list (visual order).
|
|
1208
1233
|
*/
|
|
1209
1234
|
focusFirstItem() {
|
|
1210
|
-
|
|
1235
|
+
// Sort by computed flex `order` so the "first" item is the first one
|
|
1236
|
+
// visually (selected items are projected to the top via `order: 10`).
|
|
1237
|
+
const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck:not([style*="display: none"])')).sort((a, b) => {
|
|
1238
|
+
const orderA = parseInt(window.getComputedStyle(a).order || '0', 10);
|
|
1239
|
+
const orderB = parseInt(window.getComputedStyle(b).order || '0', 10);
|
|
1240
|
+
if (orderA !== orderB)
|
|
1241
|
+
return orderA - orderB;
|
|
1242
|
+
return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING
|
|
1243
|
+
? -1
|
|
1244
|
+
: 1;
|
|
1245
|
+
});
|
|
1246
|
+
const firstItem = items[0];
|
|
1211
1247
|
if (firstItem) {
|
|
1212
1248
|
firstItem.setAttribute('tabindex', '0');
|
|
1213
|
-
firstItem.
|
|
1249
|
+
firstItem.setAttribute('data-state', 'highlighted');
|
|
1214
1250
|
firstItem.scrollIntoView({ block: 'nearest' });
|
|
1215
1251
|
// Focus on the nv-fieldcheckbox inside
|
|
1216
1252
|
const checkbox = firstItem.querySelector('nv-fieldcheckbox');
|
|
@@ -1229,16 +1265,9 @@ const NvFieldmultiselect = class {
|
|
|
1229
1265
|
divider.className = 'multiselect-divider';
|
|
1230
1266
|
ul.appendChild(divider);
|
|
1231
1267
|
}
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
const lastSelectedItem = selectedItems[selectedItems.length - 1];
|
|
1236
|
-
lastSelectedItem.after(divider);
|
|
1237
|
-
divider.style.display = '';
|
|
1238
|
-
}
|
|
1239
|
-
else {
|
|
1240
|
-
divider.style.display = 'none';
|
|
1241
|
-
}
|
|
1268
|
+
divider.style.order = '20';
|
|
1269
|
+
const shouldShow = selectedItems.length > 0 && unselectedItems.length > 0;
|
|
1270
|
+
divider.style.display = shouldShow ? '' : 'none';
|
|
1242
1271
|
}
|
|
1243
1272
|
/**
|
|
1244
1273
|
* Synchronizes the checked state of all child nv-fielddropdownitemcheck components
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-DXwd3F_r.js');
|
|
4
4
|
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
5
5
|
require('@stencil/react-output-target/runtime');
|
|
6
6
|
require('react');
|
|
7
7
|
require('react-dom');
|
|
8
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)}`;
|
|
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)}nv-fieldnumber .error-description[hidden]{display:none}`;
|
|
10
10
|
|
|
11
11
|
const NvFieldnumber = class {
|
|
12
12
|
constructor(hostRef) {
|
|
@@ -170,11 +170,11 @@ const NvFieldnumber = class {
|
|
|
170
170
|
? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
|
|
171
171
|
: undefined;
|
|
172
172
|
const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
|
|
173
|
-
return (index.h(index.Host, { key: '
|
|
173
|
+
return (index.h(index.Host, { key: 'bd60dd6875bab03a11f68c8cdeb40503dd11387b' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '9b11d71766cb20870e42e3d86509c30ec0bbc1df', htmlFor: this.inputId }, index.h("slot", { key: 'b1b84003346a9d9240a9a2072629701545eb8a4e', name: "label" }, this.label))), index.h("div", { key: 'de3100bb6e5d0befca657857b5011929621c0856', class: "input-wrapper" }, index.h("slot", { key: 'ae056ee9445d741e449ad926b998614e45268dd1', name: "before-input" }), index.h("div", { key: 'ec029f917a8472d207776b279e2a9ae2ed3c87d2', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '3156846b24658fb8b033345038ba8a19e5ed39cf', name: "leading-input" }), index.h("input", { key: '9978de0b82a67650629ccedc7f400d7f3e17810f', 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
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: '
|
|
176
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
177
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
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: '6a65f9360ac4aae869f47a386f964d7121ee62b7', name: "trailing-input" }), this.error && (index.h("nv-icon", { key: '3f6d5f2ac11907170c57fffa8e080adaa9f2445d', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'f47db690daa520fe1611a72ef52bd4e8824843e0', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: '97d545f25f81e0089fadd33c53caf38aa8dbda85', class: "stepper" }, index.h("nv-iconbutton", { key: 'fa6e78061e8f90564aaed2416ee27996cbddf794', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), index.h("nv-iconbutton", { key: 'efca8a29e9c5af8136ab557744e9642b60717915', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), index.h("slot", { key: 'b99033fd0ecfbca1c791e1f0ad867fab41fc2716', name: "after-input" })), (this.description ||
|
|
176
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'fd843a1bb551f1d706de5045658356582667048d', class: "description" }, index.h("slot", { key: 'e9e1699a36a6485063eb4d90f920b1b48a03c280', name: "description" }, this.description))), (this.errorDescription ||
|
|
177
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '7216797fc4a37dee59086111e9160401f5567c09', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '93cee823eec935644372d062db6cd009a2f16357', name: "error-description" }, this.errorDescription)))));
|
|
178
178
|
}
|
|
179
179
|
static get formAssociated() { return true; }
|
|
180
180
|
get el() { return index.getElement(this); }
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-DXwd3F_r.js');
|
|
4
4
|
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
5
5
|
require('@stencil/react-output-target/runtime');
|
|
6
6
|
require('react');
|
|
7
7
|
require('react-dom');
|
|
8
8
|
|
|
9
|
-
const nvFieldpasswordCss = () => `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-fieldpassword{--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-fieldpassword[fluid]:not([fluid=false]){max-width:unset}nv-fieldpassword[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-fieldpassword[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-fieldpassword[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-fieldpassword[required]:not([required=false]) label::after,nv-fieldpassword[aria-required=true] label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldpassword 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-fieldpassword .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldpassword .input-wrapper .input-container:focus-within,nv-fieldpassword .input-wrapper .input-container:focus-within:hover,nv-fieldpassword .input-wrapper .input-container:focus,nv-fieldpassword .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-fieldpassword .input-wrapper .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container{position:relative}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container input:focus{outline:none}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container input{}nv-fieldpassword .input-wrapper .input-container input[type=password]::-ms-clear,nv-fieldpassword .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldpassword .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fieldpassword .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldpassword .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-fieldpassword .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)}`;
|
|
9
|
+
const nvFieldpasswordCss = () => `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-fieldpassword{--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-fieldpassword[fluid]:not([fluid=false]){max-width:unset}nv-fieldpassword[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-fieldpassword[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-fieldpassword[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-fieldpassword[required]:not([required=false]) label::after,nv-fieldpassword[aria-required=true] label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldpassword 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-fieldpassword .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldpassword .input-wrapper .input-container:focus-within,nv-fieldpassword .input-wrapper .input-container:focus-within:hover,nv-fieldpassword .input-wrapper .input-container:focus,nv-fieldpassword .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-fieldpassword .input-wrapper .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container{position:relative}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container input:focus{outline:none}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container input{}nv-fieldpassword .input-wrapper .input-container input[type=password]::-ms-clear,nv-fieldpassword .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldpassword .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fieldpassword .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldpassword .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-fieldpassword .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldpassword .error-description[hidden]{display:none}`;
|
|
10
10
|
|
|
11
11
|
const NvFieldpassword = class {
|
|
12
12
|
constructor(hostRef) {
|
|
@@ -148,11 +148,11 @@ const NvFieldpassword = class {
|
|
|
148
148
|
? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
|
|
149
149
|
: undefined;
|
|
150
150
|
const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
|
|
151
|
-
return (index.h(index.Host, { key: '
|
|
151
|
+
return (index.h(index.Host, { key: 'e24affee3586427a9d7b2dbf2205dc4ac62b7491' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '3ce9065dc2d72992d5c6e3e856df4c1447717ed2', htmlFor: this.inputId }, index.h("slot", { key: 'ed16a44bfdcf67f371d0a1f083bc0d6e6009350b', name: "label" }, this.label))), index.h("div", { key: 'b43e17d340383e0b70bcb4fb5fa061d479baf46a', class: "input-wrapper" }, index.h("slot", { key: '2f101c6bf63c88fc4a6ad8aee5622097c133245b', name: "before-input" }), index.h("div", { key: '37fe8f5efd8f4374b9a237f4f5d1ebe9af9f6e05', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '4ca0f2ce27bded082e2fe49598ef6310db1ac0b3', name: "leading-input" }), index.h("input", { key: '302e86558f7843f44486b47987d37df6ac7f50ac', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
|
|
152
152
|
'aria-required': String(ariaRequiredValue),
|
|
153
|
-
}), maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (index.h("nv-icon", { key: '
|
|
154
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
155
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
153
|
+
}), maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (index.h("nv-icon", { key: 'c8874ce153ceddb132f9be42178bd3ff150005d2', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (index.h("nv-iconbutton", { key: '90b7e1f592e67ea60194b581931fa842af695ef4', name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() }))), index.h("slot", { key: '71add973e9ce73cc172d074492a9dbb2c20caaf9', name: "after-input" })), (this.description ||
|
|
154
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'c2d8551e86c028619f2c7c810597353df24cf83a', class: "description" }, index.h("slot", { key: '8ebe471324eba4eb9734ccd5a3aa600cc44512d9', name: "description" }, this.description))), (this.errorDescription ||
|
|
155
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '71d0c4737a51c030ba8ca859d1fd0b26d5a48772', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '70e23fc8738958e2f2518079e0289a5a839903cd', name: "error-description" }, this.errorDescription)))));
|
|
156
156
|
}
|
|
157
157
|
static get formAssociated() { return true; }
|
|
158
158
|
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-DXwd3F_r.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');
|
|
@@ -88,9 +88,9 @@ const NvFieldradio = class {
|
|
|
88
88
|
/****************************************************************************/
|
|
89
89
|
//#region RENDER
|
|
90
90
|
render() {
|
|
91
|
-
return (index.h(index.Host, { key: '
|
|
92
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
93
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
91
|
+
return (index.h(index.Host, { key: '53e418bfab22c9019f8efae9e474e6e729532a73', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("input", { key: '85ab7c010dfa893e9e92bebd39b845a604ca0069', 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: '851587d22af2d0739e5531f361cbefe3e282b914', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '475cad34dea78bd00bf822ccafbfb18ddba4264a', htmlFor: this.inputId }, index.h("slot", { key: 'd6c84f56f1913d97e71ce79fd112362f4880acd0', name: "label" }, this.label))), (this.description ||
|
|
92
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '8e1f4d0e9cbd00630cadde99923f2952d4dd492c', class: "description" }, index.h("slot", { key: 'dea3d8661dc83a237a8d290e02b365ea47491b51', name: "description" }, this.description))), (this.errorDescription ||
|
|
93
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'f67d73864db0c32013605343ac22f451b37047e9', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'ebd467b48c874db8b3649ec940d950f0d2218417', name: "error-description" }, this.errorDescription))))));
|
|
94
94
|
}
|
|
95
95
|
static get formAssociated() { return true; }
|
|
96
96
|
get el() { return index.getElement(this); }
|