@nova-design-system/nova-react 3.22.0 → 3.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/_commonjsHelpers-B85MJLTf-CFO10eej.js +7 -0
- package/dist/cjs/{collapse.animation-6e0b08df-AHWzNGm_.js → collapse.animation-DZDm0vSK-C2TOIhIK.js} +3 -3
- package/dist/cjs/events.utils-B6GgGra--01N__3wY.js +23 -0
- package/dist/cjs/{fade.animation-9b939939-DV--bM4S.js → fade.animation-DcRL9lcm-DAZeHoKN.js} +75 -75
- package/dist/cjs/generated/components.server.js +292 -50
- package/dist/cjs/{grow.animation-24ad5cf8-LUp_ITEx.js → grow.animation-D7ep_aVl-BuXEDSK-.js} +5 -26
- package/dist/cjs/i18n.utils-IlwlcG9l-ku0bScip.js +2494 -0
- package/dist/cjs/{index-WPRkQD3O.js → index-kU2nW5aN.js} +12692 -7009
- package/dist/cjs/{nv-dialog.entry-CDSK9pUH.js → index.esm-D3eWMME9-CG1TVKfu.js} +1 -296
- package/dist/cjs/index.js +15 -1
- package/dist/cjs/inputmask-CSo292ul-DlvupPk6.js +3758 -0
- package/dist/cjs/{nv-accordion-item.entry-BuTvA6w9.js → nv-accordion-item.entry-Bu1tAcCq.js} +11 -10
- package/dist/cjs/{nv-accordion.entry-Dtsfw6He.js → nv-accordion.entry-jWjLdX8w.js} +9 -11
- package/dist/cjs/{nv-alert.entry-TIdfdU7Y.js → nv-alert.entry-E9ZJay_K.js} +22 -23
- package/dist/cjs/{nv-avatar.entry-CaxrhPuw.js → nv-avatar.entry-CUX7u0kR.js} +11 -11
- package/dist/cjs/{nv-badge_2.entry-CfYvTZxX.js → nv-badge_2.entry-bxpV5gxE.js} +24 -24
- package/dist/cjs/{nv-breadcrumb.entry-BCZ4MmfD.js → nv-breadcrumb.entry-Cbbb9Qeh.js} +5 -5
- package/dist/cjs/{nv-breadcrumbs.entry-DwzCE7F6.js → nv-breadcrumbs.entry-BTqnp9zO.js} +3 -3
- package/dist/cjs/{nv-button.entry-Cr_86bcZ.js → nv-button.entry-upWH19y6.js} +12 -14
- package/dist/cjs/{nv-buttongroup.entry-CWjRoHY1.js → nv-buttongroup.entry-CuZCRsnV.js} +3 -3
- package/dist/cjs/{nv-calendar.entry-CXfwNt6G.js → nv-calendar.entry-CT3mASW6.js} +113 -97
- package/dist/cjs/{nv-col.entry-CJLDS3LY.js → nv-col.entry--pCxkaTh.js} +5 -5
- package/dist/cjs/{nv-datagrid.entry-Cns8XSud.js → nv-datagrid.entry-CGCEhO8C.js} +80 -85
- package/dist/cjs/{nv-datagridcolumn.entry-CFFAipHF.js → nv-datagridcolumn.entry-Fsqc7CT_.js} +2 -1
- package/dist/cjs/nv-dialog.entry-B6OYcZxQ.js +300 -0
- package/dist/cjs/{nv-dialogfooter_2.entry-To_dGUn4.js → nv-dialogfooter_2.entry-C4fP_n2-.js} +10 -11
- package/dist/cjs/nv-drawer.entry-C5O4KvHU.js +445 -0
- package/dist/cjs/nv-drawerfooter_2.entry-C-reYJXG.js +146 -0
- package/dist/cjs/nv-fieldcheckbox.entry-bk7UNQny.js +177 -0
- package/dist/cjs/{nv-fielddate.entry-C3pXtMHL.js → nv-fielddate.entry-dqZDBVmm.js} +89 -46
- package/dist/cjs/{nv-fielddaterange.entry-CjVVPEK_.js → nv-fielddaterange.entry-wNRasXky.js} +151 -103
- package/dist/cjs/nv-fielddropdown.entry-BA15piWa.js +678 -0
- package/dist/cjs/{nv-fielddropdownitem.entry-Dah-PaE8.js → nv-fielddropdownitem.entry-DEWaf9dC.js} +7 -7
- package/dist/cjs/{nv-fieldmultiselect.entry-BMLjhqoJ.js → nv-fieldmultiselect.entry-BWY5xOAd.js} +343 -236
- package/dist/cjs/nv-fieldnumber.entry-DoYORd0d.js +187 -0
- package/dist/cjs/nv-fieldpassword.entry-CPaLj9aD.js +165 -0
- package/dist/cjs/{nv-fieldradio.entry-X_2VT1Dj.js → nv-fieldradio.entry-CvUmEaCa.js} +11 -11
- package/dist/cjs/{nv-fieldselect.entry-pSp-2rNn.js → nv-fieldselect.entry-uUIZ6hmN.js} +52 -13
- package/dist/cjs/{nv-fieldslider.entry-pZf7zzLU.js → nv-fieldslider.entry-DnvmxxYY.js} +16 -31
- package/dist/cjs/nv-fieldtext.entry-BYAJp3n_.js +163 -0
- package/dist/cjs/{nv-fieldtextarea.entry-t3Ixxi23.js → nv-fieldtextarea.entry-DU2bWYeg.js} +52 -14
- package/dist/cjs/{nv-fieldtime.entry-DY7D5_6K.js → nv-fieldtime.entry-DlMNDTht.js} +128 -84
- package/dist/cjs/{nv-icon.entry-6oYPSf4c.js → nv-icon.entry-CnUkRzaA.js} +12 -12
- package/dist/cjs/{nv-iconbutton_2.entry-ChULGovr.js → nv-iconbutton_2.entry-hqp4AcRq.js} +10 -12
- package/dist/cjs/{nv-menu.entry-sd0tatWq.js → nv-menu.entry-Dc_FvIx7.js} +18 -32
- package/dist/cjs/{nv-menuitem.entry-CCOqR7UF.js → nv-menuitem.entry-DzMhx6c_.js} +6 -5
- package/dist/cjs/nv-notification-bullet.entry-BwhHCMQF.js +76 -0
- package/dist/cjs/{nv-notification.entry-Cc3zE3yY.js → nv-notification.entry-C3m5p5BL.js} +42 -128
- package/dist/cjs/{nv-notificationcontainer.entry-DV4D6oOH.js → nv-notificationcontainer.entry-DTRNn7VE.js} +4 -4
- package/dist/cjs/{nv-popover.entry-DQSwI2jT.js → nv-popover.entry-B0c-2rO4.js} +51 -47
- package/dist/cjs/{nv-row.entry-UUuMSAY5.js → nv-row.entry-CdcjVGZv.js} +4 -4
- package/dist/cjs/nv-sidebar.entry-CiN813gQ.js +177 -0
- package/dist/cjs/nv-sidebarcontent.entry-D9hpAhK8.js +22 -0
- package/dist/cjs/nv-sidebardivider.entry-B4EMyca5.js +22 -0
- package/dist/cjs/nv-sidebarfooter.entry-CHi4qOFe.js +22 -0
- package/dist/cjs/nv-sidebargroup.entry-RVqrsyIU.js +23 -0
- package/dist/cjs/nv-sidebarheader.entry-_7ch0O3G.js +22 -0
- package/dist/cjs/nv-sidebarlogo.entry-Ch9F-JnT.js +32 -0
- package/dist/cjs/nv-sidebarnavitem.entry-DVrafSMr.js +296 -0
- package/dist/cjs/nv-sidebarnavsubitem.entry-C0XDAzma.js +35 -0
- package/dist/cjs/{nv-split.entry-CYP2bTTM.js → nv-split.entry-0HTslRAX.js} +47 -45
- package/dist/cjs/{nv-stack.entry-D35-75Vw.js → nv-stack.entry-CqO7uTQf.js} +5 -5
- package/dist/cjs/{nv-table.entry-DevWJBnL.js → nv-table.entry-DH85n8Mc.js} +9 -11
- package/dist/cjs/{nv-tableheader.entry-Hs7nUSOC.js → nv-tableheader.entry-CKfocdxD.js} +7 -7
- package/dist/cjs/{nv-toggle.entry-Eje9d--6.js → nv-toggle.entry-BHUl76Im.js} +9 -9
- package/dist/cjs/nv-togglebutton.entry-D_9COjY-.js +67 -0
- package/dist/cjs/{nv-togglebuttongroup.entry-CWN_Ucry.js → nv-togglebuttongroup.entry-C0NLbsq7.js} +10 -8
- package/dist/cjs/{nv-tooltip.entry-BGkKDEFg.js → nv-tooltip.entry-BfViGE_U.js} +5 -5
- package/dist/cjs/slide.animation-CmH5d1of-BZuw607U.js +90 -0
- package/dist/cjs/{style-value-types.es-f5d10b79-D0QCM8OB.js → style-value-types.es-xlgmw4x8-B1vLqX9m.js} +6 -3
- package/dist/cjs/{v4-a79185f4-2n0dOd_Y.js → v4-BdYh22OP-C1vaJ4yP.js} +1 -1
- package/dist/components/NvDatatable/NvDatatable.js +40 -24
- package/dist/generated/components.js +107 -0
- package/dist/generated/components.server.js +260 -50
- package/dist/providers/NotificationProvider.js +3 -4
- package/dist/types/components/NvDatatable/NvDatatable.d.ts +1 -1
- package/dist/types/components/NvDatatable/types.d.ts +8 -3
- package/dist/types/generated/components.d.ts +46 -0
- package/dist/types/generated/components.server.d.ts +46 -0
- package/package.json +2 -2
- package/dist/cjs/_commonjsHelpers-1789f0cf-BJu3ubxk.js +0 -10
- package/dist/cjs/inputmask-edcad3c1-B9Omti4z.js +0 -3749
- package/dist/cjs/nv-fieldcheckbox.entry-fdonR07Z.js +0 -138
- package/dist/cjs/nv-fielddropdown.entry-C9mXuNNj.js +0 -392
- package/dist/cjs/nv-fieldnumber.entry-DBdJviXu.js +0 -148
- package/dist/cjs/nv-fieldpassword.entry-Cim_usSM.js +0 -122
- package/dist/cjs/nv-fieldtext.entry-DlI_ExaV.js +0 -124
- package/dist/cjs/nv-togglebutton.entry-LGI7pIeK.js +0 -56
- /package/dist/cjs/{clsx-297c1ffe-BtxeOLZW.js → clsx-ChV9xqsO-BtxeOLZW.js} +0 -0
- /package/dist/cjs/{constants-69bafca2-DpB_ghPF.js → constants-BReL3Lsa-DpB_ghPF.js} +0 -0
- /package/dist/cjs/{timeline.animation-79215cd4-KteJaZPb.js → timeline.animation-CgHCo_Ho-KteJaZPb.js} +0 -0
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
4
|
-
var
|
|
3
|
+
var index = require('./index-kU2nW5aN.js');
|
|
4
|
+
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
5
|
+
require('@stencil/react-output-target/runtime');
|
|
5
6
|
require('react');
|
|
6
7
|
require('react-dom');
|
|
7
8
|
|
|
8
|
-
const nvFieldselectCss = "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-fieldselect{--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-fieldselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldselect[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-fieldselect[display-value]:not([display-value=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-fieldselect[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-fieldselect[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-fieldselect[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>.select-icons{top:var(--form-field-padding-y);right:var(--form-field-padding-x)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>select{height:100%;box-sizing:border-box;background-color:var(--color-level-05-background);border-radius:var(--form-field-radius)}nv-fieldselect 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-fieldselect .select-wrapper{display:flex;flex-wrap:wrap;align-items:stretch;align-self:stretch}nv-fieldselect .select-wrapper .select-container{position:relative;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);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldselect .select-wrapper .select-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldselect .select-wrapper .select-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldselect .select-wrapper .select-container:has(select:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldselect .select-wrapper .select-container>.select-icons{position:absolute;right:0;top:0;pointer-events:none}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton{border:0px;border-radius:0px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fieldselect .select-wrapper .select-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) 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-fieldselect .select-wrapper .select-container input:focus{outline:none}nv-fieldselect .select-wrapper .select-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-fieldselect .select-wrapper .select-container input[type=password]::-ms-clear,nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldselect .select-wrapper .select-container input:read-only{opacity:0.5;background-color:var(--components-form-field-background-readonly, rgba(0, 0, 0, 0.1));border-color:var(--nv-field-border-readonly)}nv-fieldselect .select-wrapper .select-container select{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);height:var(--form-field-line-height);padding:var(--form-field-padding-y) var(--form-field-padding-x);box-sizing:content-box;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}nv-fieldselect .select-wrapper .select-container select:focus{outline:none}nv-fieldselect .select-wrapper .select-container select::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-fieldselect .select-wrapper .select-container select option{font-size:var(--form-field-font-size, 16px);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height, 24px);background-color:var(--color-level-05-background);color:var(--components-form-field-content-text)}nv-fieldselect .select-wrapper .select-container select.hidden{display:none}nv-fieldselect .select-wrapper .select-container nv-icon.readonly-icon{color:var(--nv-field-border-default)}nv-fieldselect .select-wrapper .select-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldselect .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-fieldselect .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 NvFieldselectStyle0 = nvFieldselectCss;
|
|
9
|
+
const nvFieldselectCss = "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-fieldselect{--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-fieldselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldselect[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-fieldselect[display-value]:not([display-value=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-fieldselect[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-fieldselect[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-fieldselect[required]:not([required=false]) label::after,nv-fieldselect[aria-required=true] label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>.select-icons{top:var(--form-field-padding-y);right:var(--form-field-padding-x)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>select{height:100%;box-sizing:border-box;background-color:var(--color-level-05-background);border-radius:var(--form-field-radius)}nv-fieldselect 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-fieldselect .select-wrapper{display:flex;flex-wrap:wrap;align-items:stretch;align-self:stretch}nv-fieldselect .select-wrapper .select-container{position:relative;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);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldselect .select-wrapper .select-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldselect .select-wrapper .select-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldselect .select-wrapper .select-container:has(select:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldselect .select-wrapper .select-container>.select-icons{position:absolute;right:0;top:0;pointer-events:none}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton{border:0px;border-radius:0px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fieldselect .select-wrapper .select-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-fieldselect .select-wrapper .select-container input:focus{outline:none}nv-fieldselect .select-wrapper .select-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-fieldselect .select-wrapper .select-container input{}nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-clear,nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldselect .select-wrapper .select-container input:read-only{opacity:0.5;background-color:var(--components-form-field-background-readonly, rgba(0, 0, 0, 0.1));border-color:var(--nv-field-border-readonly)}nv-fieldselect .select-wrapper .select-container select{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);height:var(--form-field-line-height);padding:var(--form-field-padding-y) var(--form-field-padding-x);box-sizing:content-box;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}nv-fieldselect .select-wrapper .select-container select:focus{outline:none}nv-fieldselect .select-wrapper .select-container select::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-fieldselect .select-wrapper .select-container select option{font-size:var(--form-field-font-size, 16px);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height, 24px);background-color:var(--color-level-05-background);color:var(--components-form-field-content-text)}nv-fieldselect .select-wrapper .select-container select.hidden{display:none}nv-fieldselect .select-wrapper .select-container nv-icon.readonly-icon{color:var(--nv-field-border-default)}nv-fieldselect .select-wrapper .select-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldselect .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-fieldselect .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
|
|
10
10
|
|
|
11
11
|
const NvFieldselect = class {
|
|
12
12
|
constructor(hostRef) {
|
|
13
13
|
index.registerInstance(this, hostRef);
|
|
14
|
-
this.valueChanged = index.createEvent(this, "valueChanged");
|
|
14
|
+
this.valueChanged = index.createEvent(this, "valueChanged", 3);
|
|
15
15
|
//#endregion DEPRECATED
|
|
16
16
|
/****************************************************************************/
|
|
17
17
|
//#region STATES
|
|
@@ -26,7 +26,7 @@ const NvFieldselect = class {
|
|
|
26
26
|
* to ensure unique identification, facilitating proper label association and
|
|
27
27
|
* accessibility.
|
|
28
28
|
*/
|
|
29
|
-
this.inputId =
|
|
29
|
+
this.inputId = v4BdYh22OP.v4();
|
|
30
30
|
/**
|
|
31
31
|
* The disabled prop lets you turn off the select field so that users can’t
|
|
32
32
|
* choose something. When disabled, the field is grayed out and won’t respond to
|
|
@@ -42,10 +42,20 @@ const NvFieldselect = class {
|
|
|
42
42
|
/**
|
|
43
43
|
* Marks the select field as required, ensuring that the user must fill it out
|
|
44
44
|
* before submitting the form.
|
|
45
|
+
* @note This uses the native HTML `required` attribute, which triggers browser validation.
|
|
45
46
|
*/
|
|
46
47
|
this.required = false;
|
|
47
48
|
/**
|
|
48
|
-
*
|
|
49
|
+
* Marks the select field as required for accessibility purposes without triggering
|
|
50
|
+
* native HTML validation. Use this when implementing custom validation logic.
|
|
51
|
+
* @note When set, this uses `aria-required` instead of the native `required` attribute.
|
|
52
|
+
* This allows developers to implement custom validation while maintaining accessibility.
|
|
53
|
+
* @note If this prop is not explicitly set, the component will check for the HTML attribute
|
|
54
|
+
* 'aria-required' directly to determine if it should be applied.
|
|
55
|
+
*/
|
|
56
|
+
this.ariaRequiredAttr = false;
|
|
57
|
+
/**
|
|
58
|
+
* Alters the select field's appearance to indicate an error, helping users
|
|
49
59
|
* identify fields that need correction.
|
|
50
60
|
* @validator error
|
|
51
61
|
*/
|
|
@@ -336,13 +346,42 @@ const NvFieldselect = class {
|
|
|
336
346
|
* @returns {HTMLStencilElement} The HTML element to render.
|
|
337
347
|
*/
|
|
338
348
|
render() {
|
|
339
|
-
|
|
349
|
+
// Check aria-required from multiple sources:
|
|
350
|
+
// 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set
|
|
351
|
+
// 2. JavaScript prop (when prop is explicitly set via JavaScript)
|
|
352
|
+
// We use hasAttribute to determine if the attribute was explicitly set by the user,
|
|
353
|
+
// since the prop now defaults to false (to maintain Blazor compatibility)
|
|
354
|
+
const hasAriaRequiredAttr = this.el.hasAttribute('aria-required') ||
|
|
355
|
+
this.el.hasAttribute('aria-required-attr');
|
|
356
|
+
const ariaRequiredFromAttr = hasAriaRequiredAttr
|
|
357
|
+
? this.el.getAttribute('aria-required') ||
|
|
358
|
+
this.el.getAttribute('aria-required-attr')
|
|
359
|
+
: null;
|
|
360
|
+
// Use aria-required if the attribute was explicitly set
|
|
361
|
+
// With reflect: true, setting the prop will also set the attribute
|
|
362
|
+
const useAriaRequired = hasAriaRequiredAttr;
|
|
363
|
+
// Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)
|
|
364
|
+
// If attribute doesn't exist, the prop was never set and we don't use aria-required
|
|
365
|
+
const ariaRequiredAttrValue = hasAriaRequiredAttr
|
|
366
|
+
? ariaRequiredFromAttr
|
|
367
|
+
: null;
|
|
368
|
+
// Determine which attributes to use
|
|
369
|
+
// If aria-required HTML attribute is present, use it (convert string to boolean)
|
|
370
|
+
// If required is set and aria-required is not "false", use native required
|
|
371
|
+
// If aria-required is "false", don't use native required even if required is set
|
|
372
|
+
const ariaRequiredValue = useAriaRequired
|
|
373
|
+
? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
|
|
374
|
+
: undefined;
|
|
375
|
+
const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
|
|
376
|
+
return (index.h(index.Host, { key: '40714f4af41b7d652d1a468e56849fe1debe8d60' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '3cbb3c5d86df0272ae035e4d55137b2abceed7df', htmlFor: this.inputId }, index.h("slot", { key: '91c991cc47389ff46346df6616733e205a5cbea7', name: "label" }, this.label))), index.h("div", { key: '42dfb725f9ff9caf8c00f4b1189f22d229269156', class: "select-wrapper" }, index.h("slot", { key: 'bbe11ade568532183c52ec56c9d2b8ab667e9d5c', name: "before-input" }), index.h("div", { key: '8cfe703cd711c2f4831655d616345f06a6f358b0', class: "select-container", onClick: this.handleSelectContainerClick }, index.h("slot", { key: '1c4194d8e9d98467e7c37400cf0434993e8ea91e', name: "leading-input" }), this.internalReadonly && (index.h("input", { key: '2c2caf1d45e6d68a644539ded3c7add991abf300', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
|
|
340
377
|
? `${this.inputId}-error`
|
|
341
|
-
: `${this.inputId}-description` })), index.h("select", { key: '
|
|
378
|
+
: `${this.inputId}-description` })), index.h("select", { key: '744913ecd27a2d33996b13f685679467fc837c30', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
|
|
379
|
+
'aria-required': String(ariaRequiredValue),
|
|
380
|
+
}), multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
|
|
342
381
|
? `${this.inputId}-error`
|
|
343
|
-
: `${this.inputId}-description` }, this.options && this.options.length > 0 ? (this.options.map(option => (index.h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (index.h("slot", null))), index.h("div", { key: '
|
|
344
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
345
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
382
|
+
: `${this.inputId}-description` }, this.options && this.options.length > 0 ? (this.options.map(option => (index.h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (index.h("slot", null))), index.h("div", { key: '891676c5a9d755b49fd375fba8f193c990d41cfa', class: "select-icons" }, this.error && (index.h("nv-icon", { key: '2d4528dba1eccbc1acc39d2bfb54a13d03913b9b', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '035768470154e3e529921741802ae74f1b56b29c', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (index.h("nv-iconbutton", { key: '23a1006cc1f1dfa9862af41e64d5d57539bff127', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), index.h("slot", { key: '5f899c5426e304c1d83b046317eaf732d919cb55', name: "after-input" })), (this.description ||
|
|
383
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '0f78de9aa808a625dc6a8f0148a43450992b787e', class: "description", id: `${this.inputId}-description` }, index.h("slot", { key: '72d96f2909d0b793dcd24fe939b58ebc5e9c7de1', name: "description" }, this.description))), (this.errorDescription ||
|
|
384
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'c10fdcc3592d36fea37f283835abcf8790a99010', class: "error-description", id: `${this.inputId}-error` }, index.h("slot", { key: 'c8783f8f94d1c9f082e60e38b061dae49e5b5584', name: "error-description" }, this.errorDescription)))));
|
|
346
385
|
}
|
|
347
386
|
static get formAssociated() { return true; }
|
|
348
387
|
get el() { return index.getElement(this); }
|
|
@@ -353,6 +392,6 @@ const NvFieldselect = class {
|
|
|
353
392
|
"options": ["handleOptionsChange"]
|
|
354
393
|
}; }
|
|
355
394
|
};
|
|
356
|
-
NvFieldselect.style =
|
|
395
|
+
NvFieldselect.style = nvFieldselectCss;
|
|
357
396
|
|
|
358
397
|
exports.nv_fieldselect = NvFieldselect;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
4
|
-
var
|
|
5
|
-
var
|
|
3
|
+
var index = require('./index-kU2nW5aN.js');
|
|
4
|
+
var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
|
|
5
|
+
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
6
|
+
require('@stencil/react-output-target/runtime');
|
|
6
7
|
require('react');
|
|
7
8
|
require('react-dom');
|
|
8
9
|
|
|
@@ -140,11 +141,7 @@ const SingleThumb = props => {
|
|
|
140
141
|
displayPosition = clamp(rawPosition, min, max);
|
|
141
142
|
}
|
|
142
143
|
const percent = valueToPercent(displayPosition, min, max);
|
|
143
|
-
return (index.h("div", { class: "thumb", style: { left: `${percent}%` }, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-disabled": disabled ? 'true' : undefined, "aria-readonly": readonly ? 'true' : undefined, tabindex: disabled ? -1 : 0, onKeyDown: onKeyDown },
|
|
144
|
-
index.h("div", { class: "thumb-tooltip" },
|
|
145
|
-
labelBeforeValue && (index.h("span", { class: "label-before" }, labelBeforeValue)),
|
|
146
|
-
formatValueForDisplay(value, step),
|
|
147
|
-
labelAfterValue && index.h("span", { class: "label-after" }, labelAfterValue))));
|
|
144
|
+
return (index.h("div", { class: "thumb", style: { left: `${percent}%` }, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-disabled": disabled ? 'true' : undefined, "aria-readonly": readonly ? 'true' : undefined, tabindex: disabled ? -1 : 0, onKeyDown: onKeyDown }, index.h("div", { class: "thumb-tooltip" }, labelBeforeValue && (index.h("span", { class: "label-before" }, labelBeforeValue)), formatValueForDisplay(value, step), labelAfterValue && index.h("span", { class: "label-after" }, labelAfterValue))));
|
|
148
145
|
};
|
|
149
146
|
|
|
150
147
|
/**
|
|
@@ -174,16 +171,8 @@ const RangeThumb = props => {
|
|
|
174
171
|
left: `${leftPercent}%`,
|
|
175
172
|
width: `${rightPercent - leftPercent}%`,
|
|
176
173
|
} }),
|
|
177
|
-
index.h("div", { class: "thumb thumb-left", style: { left: `${leftPercent}%` }, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": leftValue, "aria-disabled": disabled ? 'true' : undefined, "aria-readonly": readonly ? 'true' : undefined, "data-thumb": "left", tabindex: disabled ? -1 : 0, onKeyDown: onKeyDown },
|
|
178
|
-
|
|
179
|
-
labelBeforeValue && (index.h("span", { class: "label-before" }, labelBeforeValue)),
|
|
180
|
-
formatValueForDisplay(leftValue, step),
|
|
181
|
-
labelAfterValue && index.h("span", { class: "label-after" }, labelAfterValue))),
|
|
182
|
-
index.h("div", { class: "thumb thumb-right", style: { left: `${rightPercent}%` }, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": rightValue, "aria-disabled": disabled ? 'true' : undefined, "aria-readonly": readonly ? 'true' : undefined, "data-thumb": "right", tabindex: disabled ? -1 : 0, onKeyDown: onKeyDown },
|
|
183
|
-
index.h("div", { class: "thumb-tooltip" },
|
|
184
|
-
labelBeforeValue && (index.h("span", { class: "label-before" }, labelBeforeValue)),
|
|
185
|
-
formatValueForDisplay(rightValue, step),
|
|
186
|
-
labelAfterValue && index.h("span", { class: "label-after" }, labelAfterValue))),
|
|
174
|
+
index.h("div", { class: "thumb thumb-left", style: { left: `${leftPercent}%` }, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": leftValue, "aria-disabled": disabled ? 'true' : undefined, "aria-readonly": readonly ? 'true' : undefined, "data-thumb": "left", tabindex: disabled ? -1 : 0, onKeyDown: onKeyDown }, index.h("div", { class: "thumb-tooltip" }, labelBeforeValue && (index.h("span", { class: "label-before" }, labelBeforeValue)), formatValueForDisplay(leftValue, step), labelAfterValue && index.h("span", { class: "label-after" }, labelAfterValue))),
|
|
175
|
+
index.h("div", { class: "thumb thumb-right", style: { left: `${rightPercent}%` }, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": rightValue, "aria-disabled": disabled ? 'true' : undefined, "aria-readonly": readonly ? 'true' : undefined, "data-thumb": "right", tabindex: disabled ? -1 : 0, onKeyDown: onKeyDown }, index.h("div", { class: "thumb-tooltip" }, labelBeforeValue && (index.h("span", { class: "label-before" }, labelBeforeValue)), formatValueForDisplay(rightValue, step), labelAfterValue && index.h("span", { class: "label-after" }, labelAfterValue))),
|
|
187
176
|
];
|
|
188
177
|
};
|
|
189
178
|
|
|
@@ -241,31 +230,27 @@ const FieldInput = props => {
|
|
|
241
230
|
index: index$1,
|
|
242
231
|
});
|
|
243
232
|
};
|
|
244
|
-
return hasField ? (index.h("div", { class:
|
|
245
|
-
index.h("nv-fieldnumber", Object.assign({ id: inputId, value: fieldValue, min: min, max: max, step: step, disabled: disabled, readonly: readonly, name: inputName }, dataAttrs, { onInput: e => e.stopPropagation(), onValueChanged: handleValueChanged }),
|
|
246
|
-
labelBeforeValue && (index.h("span", { class: "label-before", slot: "leading-input" }, labelBeforeValue)),
|
|
247
|
-
labelAfterValue && (index.h("span", { class: "label-after", slot: "trailing-input" }, labelAfterValue))))) : (index.h("input", { id: inputId, type: "hidden", value: fieldValue, disabled: disabled, readonly: readonly, name: inputName }));
|
|
233
|
+
return hasField ? (index.h("div", { class: clsxChV9xqsO.clsx(!hasField && 'hidden-input') }, index.h("nv-fieldnumber", { id: inputId, value: fieldValue, min: min, max: max, step: step, disabled: disabled, readonly: readonly, name: inputName, ...dataAttrs, onInput: e => e.stopPropagation(), onValueChanged: handleValueChanged }, labelBeforeValue && (index.h("span", { class: "label-before", slot: "leading-input" }, labelBeforeValue)), labelAfterValue && (index.h("span", { class: "label-after", slot: "trailing-input" }, labelAfterValue))))) : (index.h("input", { id: inputId, type: "hidden", value: fieldValue, disabled: disabled, readonly: readonly, name: inputName }));
|
|
248
234
|
};
|
|
249
235
|
|
|
250
|
-
const nvFieldsliderCss = "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-fieldslider{--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-fieldslider .slider-container{width:100%;display:flex;flex-direction:row;align-items:center;gap:var(--form-gap-x)}nv-fieldslider .slider-container .track-container{position:relative;flex:1;height:calc(var(--slider-handler-size-min) + 0.25rem);padding:calc(var(--slider-handler-size-min) / 2) 0}nv-fieldslider .slider-container .track-container .track{position:relative;height:var(--slider-track-height);background:var(--components-slider-track-background);border-radius:var(--slider-track-radius);cursor:pointer;touch-action:none;user-select:none}nv-fieldslider .slider-container .track-container .track::after{content:\"\";position:absolute;top:calc(-13px + var(--slider-track-height) / 2);left:0;width:100%;height:26px;background:rgba(255, 255, 255, 0)}nv-fieldslider .slider-container .track-container .track .track-range{position:absolute;top:0;height:var(--slider-track-height);background:var(--components-slider-track-filled-default);border-radius:var(--slider-track-radius);pointer-events:none}nv-fieldslider .slider-container .track-container .track .thumb{position:absolute;top:50%;width:var(--slider-handler-size-min);height:var(--slider-handler-size-min);background:#ffffff;border:var(--slider-handler-stroke) solid var(--components-slider-track-filled-default);border-radius:50%;transform:translate(-50%, -50%);z-index:1;cursor:grab;touch-action:none;user-select:none;transition:width 0.2s, height 0.2s, box-shadow 0.2s, background-color 0.2s}nv-fieldslider .slider-container .track-container .track .thumb:after{content:\"\";position:absolute;top:-7px;left:-7px;width:calc(100% + 14px);height:calc(100% + 14px);background:rgba(255, 255, 255, 0)}nv-fieldslider .slider-container .track-container .track .thumb:hover{width:var(--slider-handler-size-max);height:var(--slider-handler-size-max);border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container .track .thumb:focus{width:var(--slider-handler-size-min);height:var(--slider-handler-size-min);border-color:var(--components-slider-track-filled-focus);outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1);transition:outline;background:var(--components-slider-handler-background-focus)}nv-fieldslider .slider-container .track-container .track .thumb:active{cursor:grabbing;background:var(--components-slider-handler-background-hover)}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip{position:absolute;top:25px;left:50%;background-color:var(--components-tooltip-background);color:var(--components-tooltip-text);padding:5px;border-radius:var(--tooltip-radius);font-size:var(--tooltip-font-size);z-index:10;pointer-events:none;user-select:none;opacity:0;transition:opacity 0.3s ease-in-out;transform:translateX(-50%);backface-visibility:hidden;-webkit-font-smoothing:antialiased;transform-style:preserve-3d}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip:after{content:\"\";background:var(--components-tooltip-background);box-shadow:none;border:none;position:absolute;border-bottom-color:transparent;border-right-color:transparent;width:6px;height:6px;transform:rotate(45deg);border-radius:1px;top:-3px;left:50%;margin-left:-3px;backface-visibility:hidden;will-change:transform, opacity}nv-fieldslider .slider-container .track-container .track .thumb:hover .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:active .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:focus .thumb-tooltip{opacity:1}nv-fieldslider .slider-container .track-container .track-ticks{position:relative;height:1rem;margin-top:0.25rem}nv-fieldslider .slider-container .track-container .track-ticks .track-tick{position:absolute;top:0;width:var(--slider-tick-height);height:var(--slider-tick-height);background:var(--components-form-field-border-default);border-radius:50%;transform:translate(-50%, 0);pointer-events:none}nv-fieldslider .slider-container .track-container .track-ticks .track-tick:first-of-type{transform:translate(0, 0)}nv-fieldslider .slider-container .track-container .track-ticks .track-tick:last-of-type{transform:translate(-100%, 0)}nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{position:absolute;top:calc(var(--slider-tick-height) + 0.25rem);left:50%;color:var(--components-form-field-border-default);transform:translateX(-50%);white-space:nowrap}.track-tick-first nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{left:0;transform:translateX(0)}.track-tick-last nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{left:100%;transform:translateX(-100%)}nv-fieldslider .slider-container .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;width:90px;flex-grow:unset}nv-fieldslider .slider-container .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldslider .slider-container .input-container:focus-within,nv-fieldslider .slider-container .input-container:focus-within:hover,nv-fieldslider .slider-container .input-container:focus,nv-fieldslider .slider-container .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-fieldslider .slider-container .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldslider .slider-container .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldslider .slider-container .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:var(--form-field-padding-y) 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-fieldslider .slider-container .input-container input:focus{outline:none}nv-fieldslider .slider-container .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-fieldslider .slider-container .input-container input[type=password]::-ms-clear,nv-fieldslider .slider-container .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldslider .slider-container .input-container .label-before{margin-left:var(--spacing-2);color:var(--components-form-field-icon-default)}nv-fieldslider .slider-container .input-container .label-after{margin-right:var(--spacing-2);color:var(--components-form-field-icon-default)}nv-fieldslider[fluid]:not([fluid=false]){max-width:unset}nv-fieldslider[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-fieldslider[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-fieldslider[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-fieldslider[readonly]:not([readonly=false]) .track,nv-fieldslider[readonly]:not([readonly=false]) .thumb{cursor:default}nv-fieldslider 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-fieldslider nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldslider[hide-label]:not([hide-label=false]) label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}nv-fieldslider[has-field]:not([has-field=false]) .thumb-tooltip{display:none}nv-fieldslider>.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-fieldslider>.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-fieldslider>.error-description[hidden]{display:none}";
|
|
251
|
-
const NvFieldsliderStyle0 = nvFieldsliderCss;
|
|
236
|
+
const nvFieldsliderCss = "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-fieldslider{--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-fieldslider .slider-container{width:100%;display:flex;flex-direction:row;align-items:center;gap:var(--form-gap-x)}nv-fieldslider .slider-container .track-container{position:relative;flex:1;height:calc(var(--slider-handler-size-min) + 0.25rem);padding:calc(var(--slider-handler-size-min) / 2) 0}nv-fieldslider .slider-container .track-container .track{position:relative;height:var(--slider-track-height);background:var(--components-slider-track-background);border-radius:var(--slider-track-radius);cursor:pointer;touch-action:none;user-select:none}nv-fieldslider .slider-container .track-container .track::after{content:\"\";position:absolute;top:calc(-13px + var(--slider-track-height) / 2);left:0;width:100%;height:26px;background:rgba(255, 255, 255, 0)}nv-fieldslider .slider-container .track-container .track .track-range{position:absolute;top:0;height:var(--slider-track-height);background:var(--components-slider-track-filled-default);border-radius:var(--slider-track-radius);pointer-events:none}nv-fieldslider .slider-container .track-container .track .thumb{position:absolute;top:50%;width:var(--slider-handler-size-min);height:var(--slider-handler-size-min);background:#ffffff;border:var(--slider-handler-stroke) solid var(--components-slider-track-filled-default);border-radius:50%;transform:translate(-50%, -50%);z-index:1;cursor:grab;touch-action:none;user-select:none;transition:width 0.2s, height 0.2s, box-shadow 0.2s, background-color 0.2s}nv-fieldslider .slider-container .track-container .track .thumb:after{content:\"\";position:absolute;top:-7px;left:-7px;width:calc(100% + 14px);height:calc(100% + 14px);background:rgba(255, 255, 255, 0)}nv-fieldslider .slider-container .track-container .track .thumb:hover{width:var(--slider-handler-size-max);height:var(--slider-handler-size-max);border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container .track .thumb:focus{width:var(--slider-handler-size-min);height:var(--slider-handler-size-min);border-color:var(--components-slider-track-filled-focus);outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1);transition:outline;background:var(--components-slider-handler-background-focus)}nv-fieldslider .slider-container .track-container .track .thumb:active{cursor:grabbing;background:var(--components-slider-handler-background-hover)}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip{position:absolute;top:25px;left:50%;background-color:var(--components-tooltip-background);color:var(--components-tooltip-text);padding:5px;border-radius:var(--tooltip-radius);font-size:var(--tooltip-font-size);z-index:10;pointer-events:none;user-select:none;opacity:0;transition:opacity 0.3s ease-in-out;transform:translateX(-50%);backface-visibility:hidden;-webkit-font-smoothing:antialiased;transform-style:preserve-3d}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip:after{content:\"\";background:var(--components-tooltip-background);box-shadow:none;border:none;position:absolute;border-bottom-color:transparent;border-right-color:transparent;width:6px;height:6px;transform:rotate(45deg);border-radius:1px;top:-3px;left:50%;margin-left:-3px;backface-visibility:hidden;will-change:transform, opacity}nv-fieldslider .slider-container .track-container .track .thumb:hover .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:active .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:focus .thumb-tooltip{opacity:1}nv-fieldslider .slider-container .track-container .track-ticks{position:relative;height:1rem;margin-top:0.25rem}nv-fieldslider .slider-container .track-container .track-ticks .track-tick{position:absolute;top:0;width:var(--slider-tick-height);height:var(--slider-tick-height);background:var(--components-form-field-border-default);border-radius:50%;transform:translate(-50%, 0);pointer-events:none}nv-fieldslider .slider-container .track-container .track-ticks .track-tick:first-of-type{transform:translate(0, 0)}nv-fieldslider .slider-container .track-container .track-ticks .track-tick:last-of-type{transform:translate(-100%, 0)}nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{position:absolute;top:calc(var(--slider-tick-height) + 0.25rem);left:50%;color:var(--components-form-field-border-default);transform:translateX(-50%);white-space:nowrap}.track-tick-first nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{left:0;transform:translateX(0)}.track-tick-last nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{left:100%;transform:translateX(-100%)}nv-fieldslider .slider-container .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-fieldslider .slider-container .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldslider .slider-container .input-container:focus-within,nv-fieldslider .slider-container .input-container:focus-within:hover,nv-fieldslider .slider-container .input-container:focus,nv-fieldslider .slider-container .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-fieldslider .slider-container .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldslider .slider-container .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldslider .slider-container .input-container{width:90px;flex-grow:unset}nv-fieldslider .slider-container .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-fieldslider .slider-container .input-container input:focus{outline:none}nv-fieldslider .slider-container .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-fieldslider .slider-container .input-container input{}nv-fieldslider .slider-container .input-container input[type=password]::-ms-clear,nv-fieldslider .slider-container .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldslider .slider-container .input-container .label-before{margin-left:var(--spacing-2);color:var(--components-form-field-icon-default)}nv-fieldslider .slider-container .input-container .label-after{margin-right:var(--spacing-2);color:var(--components-form-field-icon-default)}nv-fieldslider[fluid]:not([fluid=false]){max-width:unset}nv-fieldslider[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-fieldslider[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-fieldslider[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-fieldslider[readonly]:not([readonly=false]) .track,nv-fieldslider[readonly]:not([readonly=false]) .thumb{cursor:default}nv-fieldslider 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-fieldslider nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldslider[hide-label]:not([hide-label=false]) label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}nv-fieldslider[has-field]:not([has-field=false]) .thumb-tooltip{display:none}nv-fieldslider>.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-fieldslider>.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-fieldslider>.error-description[hidden]{display:none}";
|
|
252
237
|
|
|
253
238
|
const NvFieldslider = class {
|
|
254
239
|
constructor(hostRef) {
|
|
255
240
|
index.registerInstance(this, hostRef);
|
|
256
|
-
this.valueChanged = index.createEvent(this, "valueChanged");
|
|
241
|
+
this.valueChanged = index.createEvent(this, "valueChanged", 3);
|
|
257
242
|
/****************************************************************************/
|
|
258
243
|
//#region PROPERTIES
|
|
259
244
|
/**
|
|
260
245
|
* Sets the ID for the start input element and the for attribute of the associated
|
|
261
246
|
* label. If no ID is provided, a random one will be automatically generated.
|
|
262
247
|
*/
|
|
263
|
-
this.startInputId =
|
|
248
|
+
this.startInputId = v4BdYh22OP.v4();
|
|
264
249
|
/**
|
|
265
250
|
* Sets the ID for the end input element and the for attribute of the associated
|
|
266
251
|
* label. If no ID is provided, a random one will be automatically generated.
|
|
267
252
|
*/
|
|
268
|
-
this.endInputId =
|
|
253
|
+
this.endInputId = v4BdYh22OP.v4();
|
|
269
254
|
/**
|
|
270
255
|
* Keeps the interface clean by removing visible labels, but still announces
|
|
271
256
|
* the label to screen readers so users relying on assistive tech aren't left
|
|
@@ -706,11 +691,11 @@ const NvFieldslider = class {
|
|
|
706
691
|
/****************************************************************************/
|
|
707
692
|
//#region RENDER
|
|
708
693
|
render() {
|
|
709
|
-
return (index.h(index.Host, { key: '
|
|
694
|
+
return (index.h(index.Host, { key: '554f94dc79adf1edbfa80bdc17bb41af26da871c' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '98ffb9c9332a9fef9c37088b48b80eaec2930417', htmlFor: this.startInputId }, index.h("slot", { key: '084d8c1fbdc91d8bd26016489b6ef86a3c334a6b', name: "label" }, this.label))), index.h("div", { key: 'ce62bedafa8b20ce952944b61638f61585fc7044', class: "slider-container" }, this.range ? (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, index.h("div", { key: 'd4dd3f3cc00a19b166b27158c30f193096553127', class: "track-container" }, index.h("div", { key: 'd37bd4c7463d3a987d300082f2db4519af7fd652', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (index.h(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (index.h(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, step: this.step, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), index.h(TickMarks, { key: '0c3b4b90851cb8cf80b3803fbb5e85f8e3d98aed', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
|
|
710
695
|
this.description ||
|
|
711
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
696
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '7674d49cfe01b7ac5be21c3cbc2ff4e625c27298', class: "description" }, this.success && (index.h("nv-icon", { key: '7342bca8ef60d227cd630affc37815bafa9736f7', name: "circle-check", class: "validation", size: "md" })), index.h("slot", { key: 'c9221aadf6e2328bc5781d74c044b6911221dbe8', name: "description" }, this.description))), (this.error ||
|
|
712
697
|
this.errorDescription ||
|
|
713
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
698
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '34f339f8e25ffb2c481b2472939d9ef14292c2f9', class: "error-description", hidden: !this.error }, this.error && (index.h("nv-icon", { key: '6a941595fc494afb7e580a98f968a628371b1a33', name: "alert-circle", class: "validation", size: "md" })), index.h("slot", { key: 'c77b3881b302a65c43098479aa445751314c2714', name: "error-description" }, this.errorDescription)))));
|
|
714
699
|
}
|
|
715
700
|
static get formAssociated() { return true; }
|
|
716
701
|
get el() { return index.getElement(this); }
|
|
@@ -726,6 +711,6 @@ const NvFieldslider = class {
|
|
|
726
711
|
"range": ["onRangeChange"]
|
|
727
712
|
}; }
|
|
728
713
|
};
|
|
729
|
-
NvFieldslider.style =
|
|
714
|
+
NvFieldslider.style = nvFieldsliderCss;
|
|
730
715
|
|
|
731
716
|
exports.nv_fieldslider = NvFieldslider;
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-kU2nW5aN.js');
|
|
4
|
+
var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
|
|
5
|
+
require('@stencil/react-output-target/runtime');
|
|
6
|
+
require('react');
|
|
7
|
+
require('react-dom');
|
|
8
|
+
|
|
9
|
+
const nvFieldtextCss = "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-fieldtext{--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-fieldtext[fluid]:not([fluid=false]){max-width:unset}nv-fieldtext[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-fieldtext[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-fieldtext[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-fieldtext[required]:not([required=false]) label::after,nv-fieldtext[aria-required=true] label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldtext>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-fieldtext>.input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtext>.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-fieldtext>.input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtext>.input-wrapper .input-container:focus-within,nv-fieldtext>.input-wrapper .input-container:focus-within:hover,nv-fieldtext>.input-wrapper .input-container:focus,nv-fieldtext>.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-fieldtext>.input-wrapper .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtext>.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-fieldtext>.input-wrapper .input-container>[slot=leading-input]{display:block;margin-left:var(--form-field-padding-x)}nv-fieldtext>.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-fieldtext>.input-wrapper .input-container input:focus{outline:none}nv-fieldtext>.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-fieldtext>.input-wrapper .input-container input{}nv-fieldtext>.input-wrapper .input-container input[type=password]::-ms-clear,nv-fieldtext>.input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldtext>.input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default);margin-right:var(--form-gap-x)}nv-fieldtext>.input-wrapper .input-container>[slot=trailing-input]{display:block;margin-right:var(--form-field-padding-x)}nv-fieldtext>.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-fieldtext>.error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
|
|
10
|
+
|
|
11
|
+
const NvFieldtext = class {
|
|
12
|
+
constructor(hostRef) {
|
|
13
|
+
index.registerInstance(this, hostRef);
|
|
14
|
+
this.valueChanged = index.createEvent(this, "valueChanged", 3);
|
|
15
|
+
//#endregion DEPRECATED
|
|
16
|
+
/****************************************************************************/
|
|
17
|
+
//#region PROPERTIES
|
|
18
|
+
/**
|
|
19
|
+
* Sets the ID for the input element and the for attribute of the associated
|
|
20
|
+
* label. If no ID is provided, a random one will be automatically generated
|
|
21
|
+
* to ensure unique identification, facilitating proper label association and
|
|
22
|
+
* accessibility.
|
|
23
|
+
*/
|
|
24
|
+
this.inputId = v4BdYh22OP.v4();
|
|
25
|
+
/**
|
|
26
|
+
* The type prop lets you specify what kind of information the input field
|
|
27
|
+
* should accept. Choose 'text' for general words or sentences, 'tel' for
|
|
28
|
+
* phone numbers, or 'email' for email addresses. This makes sure users get
|
|
29
|
+
* the right keyboard and validation for what they need to enter.
|
|
30
|
+
*/
|
|
31
|
+
this.type = 'text';
|
|
32
|
+
/**
|
|
33
|
+
* The disabled prop lets you turn off the input field so that users can’t
|
|
34
|
+
* type in it. When disabled, the field is grayed out and won’t respond to
|
|
35
|
+
* clicks or touches.
|
|
36
|
+
*/
|
|
37
|
+
this.disabled = false;
|
|
38
|
+
/**
|
|
39
|
+
* Display the input field’s content without allowing users to change it.
|
|
40
|
+
* Users can still click on it, select, and copy the text, but they won’t be
|
|
41
|
+
* able to type or delete anything.
|
|
42
|
+
*/
|
|
43
|
+
this.readonly = false;
|
|
44
|
+
/**
|
|
45
|
+
* Marks the input field as required, ensuring that the user must fill it out
|
|
46
|
+
* before submitting the form.
|
|
47
|
+
* @note This uses the native HTML `required` attribute, which triggers browser validation.
|
|
48
|
+
*/
|
|
49
|
+
this.required = false;
|
|
50
|
+
/**
|
|
51
|
+
* Marks the input field as required for accessibility purposes without triggering
|
|
52
|
+
* native HTML validation. Use this when implementing custom validation logic.
|
|
53
|
+
* @note When set, this uses `aria-required` instead of the native `required` attribute.
|
|
54
|
+
* This allows developers to implement custom validation while maintaining accessibility.
|
|
55
|
+
* @note If this prop is not explicitly set, the component will check for the HTML attribute
|
|
56
|
+
* 'aria-required' directly to determine if it should be applied.
|
|
57
|
+
*/
|
|
58
|
+
this.ariaRequiredAttr = false;
|
|
59
|
+
/**
|
|
60
|
+
* Alters the input field’s appearance to indicate an error, helping users
|
|
61
|
+
* identify fields that need correction.
|
|
62
|
+
* @validator error
|
|
63
|
+
*/
|
|
64
|
+
this.error = false;
|
|
65
|
+
/**
|
|
66
|
+
* Changes the input field’s appearance to indicate successful input or
|
|
67
|
+
* validation.
|
|
68
|
+
*/
|
|
69
|
+
this.success = false;
|
|
70
|
+
/**
|
|
71
|
+
* When used with the email input type, this prop enables the field to accept
|
|
72
|
+
* multiple email addresses. Users can enter several addresses, separating
|
|
73
|
+
* each one with a comma, allowing the form to handle multiple recipients.
|
|
74
|
+
*/
|
|
75
|
+
this.multiple = false;
|
|
76
|
+
/**
|
|
77
|
+
* Applies focus to the input field as soon as the component is mounted. This
|
|
78
|
+
* is equivalent to setting the native autofocus attribute on an <input>
|
|
79
|
+
* element.
|
|
80
|
+
*/
|
|
81
|
+
this.autofocus = false;
|
|
82
|
+
/**
|
|
83
|
+
* Allows the field to stretch and fill the entire width of its container.
|
|
84
|
+
*/
|
|
85
|
+
this.fluid = false;
|
|
86
|
+
//#endregion EVENTS
|
|
87
|
+
/****************************************************************************/
|
|
88
|
+
//#region METHODS
|
|
89
|
+
/**
|
|
90
|
+
* Handles the input event on the input element.
|
|
91
|
+
* Emits the inputChanged event with the new value.
|
|
92
|
+
* @param {Event} event - Event object of the input event.
|
|
93
|
+
*/
|
|
94
|
+
this.handleInput = (event) => {
|
|
95
|
+
const input = event.target;
|
|
96
|
+
this.value = input.value;
|
|
97
|
+
this.valueChanged.emit(input.value);
|
|
98
|
+
};
|
|
99
|
+
/**
|
|
100
|
+
* Handles focus when the input container is clicked.
|
|
101
|
+
*/
|
|
102
|
+
this.handleInputContainerClick = () => {
|
|
103
|
+
this.inputElement.focus();
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
//#endregion METHODS
|
|
107
|
+
/****************************************************************************/
|
|
108
|
+
//#region LIFECYCLE
|
|
109
|
+
componentWillRender() {
|
|
110
|
+
if (this.textInputType) {
|
|
111
|
+
this.type = this.textInputType;
|
|
112
|
+
}
|
|
113
|
+
if (this.message) {
|
|
114
|
+
this.description = this.message;
|
|
115
|
+
}
|
|
116
|
+
if (this.validation) {
|
|
117
|
+
this.errorDescription = this.validation;
|
|
118
|
+
this.error = true;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
//#endregion LIFECYCLE
|
|
122
|
+
/****************************************************************************/
|
|
123
|
+
//#region RENDER
|
|
124
|
+
render() {
|
|
125
|
+
// Check aria-required from multiple sources:
|
|
126
|
+
// 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set
|
|
127
|
+
// 2. JavaScript prop (when prop is explicitly set via JavaScript)
|
|
128
|
+
// We use hasAttribute to determine if the attribute was explicitly set by the user,
|
|
129
|
+
// since the prop now defaults to false (to maintain Blazor compatibility)
|
|
130
|
+
const hasAriaRequiredAttr = this.el.hasAttribute('aria-required') ||
|
|
131
|
+
this.el.hasAttribute('aria-required-attr');
|
|
132
|
+
const ariaRequiredFromAttr = hasAriaRequiredAttr
|
|
133
|
+
? this.el.getAttribute('aria-required') ||
|
|
134
|
+
this.el.getAttribute('aria-required-attr')
|
|
135
|
+
: null;
|
|
136
|
+
// Use aria-required if the attribute was explicitly set
|
|
137
|
+
// With reflect: true, setting the prop will also set the attribute
|
|
138
|
+
const useAriaRequired = hasAriaRequiredAttr;
|
|
139
|
+
// Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)
|
|
140
|
+
// If attribute doesn't exist, the prop was never set and we don't use aria-required
|
|
141
|
+
const ariaRequiredAttrValue = hasAriaRequiredAttr
|
|
142
|
+
? ariaRequiredFromAttr
|
|
143
|
+
: null;
|
|
144
|
+
// Determine which attributes to use
|
|
145
|
+
// If aria-required HTML attribute is present, use it (convert string to boolean)
|
|
146
|
+
// If required is set and aria-required is not "false", use native required
|
|
147
|
+
// If aria-required is "false", don't use native required even if required is set
|
|
148
|
+
const ariaRequiredValue = useAriaRequired
|
|
149
|
+
? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
|
|
150
|
+
: undefined;
|
|
151
|
+
const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
|
|
152
|
+
return (index.h(index.Host, { key: '95643ae488ca32bc792ac572fd127f358f881894' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '35d52de7041b6297af9feca3c0b19f480cacac54', htmlFor: this.inputId }, index.h("slot", { key: 'd866c825300faf563ded34e1a9960f14522d201f', name: "label" }, this.label))), index.h("div", { key: '923c5a4f9f8c9c2bf269a58896f070e3dba2be08', class: "input-wrapper" }, index.h("slot", { key: '933e05c2a3e4ec0429c90dfd8fc799250b8c8fed', name: "before-input" }), index.h("div", { key: '7cde9f8dd874269ddfca691946de52764764cbb2', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '55a6c1302a71fc5c5ea75708e09751407e3dfd10', name: "leading-input" }), index.h("input", { key: '324c57a9c6c590edb178a8821444842b55f19f2e', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
|
|
153
|
+
'aria-required': String(ariaRequiredValue),
|
|
154
|
+
}), maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), index.h("slot", { key: 'cd9558b2939d1b935ac342eef24729a88425dcc9', name: "trailing-input" }), this.error && (index.h("nv-icon", { key: 'd7834369c4b8d7bd095f9f602e176fe8fea0a92e', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '3e6714d10d4d21d6cc4912ea074810e3c11fa0a9', name: "circle-check", class: "validation", size: "md" }))), index.h("slot", { key: 'db6e9212d31d2f8b0d4f1379df6d8c41da96d587', name: "after-input" })), (this.description ||
|
|
155
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '829f38f3fa67e7bed5d08f6c9f416fbe39e807b6', class: "description" }, index.h("slot", { key: 'a3c63f1903fcdc25be26725b1f0b0b09dabe54a5', name: "description" }, this.description))), (this.errorDescription ||
|
|
156
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'c2150b17c0385a5b2019db64eba7358ed07f62a4', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'a43078cd173e92fa7b17b0f72f302a3196acd1ba', name: "error-description" }, this.errorDescription)))));
|
|
157
|
+
}
|
|
158
|
+
static get formAssociated() { return true; }
|
|
159
|
+
get el() { return index.getElement(this); }
|
|
160
|
+
};
|
|
161
|
+
NvFieldtext.style = nvFieldtextCss;
|
|
162
|
+
|
|
163
|
+
exports.nv_fieldtext = NvFieldtext;
|