@nova-design-system/nova-react 3.0.0 → 3.1.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/{constants-98e2dcc2-C0SBCapP.js → constants-b97e736d-BzFAKCkR.js} +11 -0
- package/dist/cjs/{index-Byv3Vmev.js → index-Cn-oNJnW.js} +1839 -1420
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/{nv-alert.entry-BXY4KXbF.js → nv-alert.entry-BFwufSUQ.js} +11 -11
- package/dist/cjs/{nv-avatar.entry-BnPSKkJJ.js → nv-avatar.entry-Do1K4s3s.js} +7 -7
- package/dist/cjs/nv-badge_2.entry-NTGHyFdg.js +204 -0
- package/dist/cjs/{nv-breadcrumb.entry-D5vGHLOG.js → nv-breadcrumb.entry-oPVGJYlk.js} +1 -1
- package/dist/cjs/{nv-breadcrumbs.entry-CsaqAsnb.js → nv-breadcrumbs.entry-BsOw153b.js} +1 -1
- package/dist/cjs/{nv-button.entry-DzZfGZGy.js → nv-button.entry-13tdBiRr.js} +7 -7
- package/dist/cjs/nv-calendar.entry-u9MgGb83.js +1064 -0
- package/dist/cjs/{nv-col.entry-Cng8NaTW.js → nv-col.entry-DFhv-GI7.js} +1 -1
- package/dist/cjs/{nv-datagrid.entry-BbAOzpiO.js → nv-datagrid.entry-BoB17gvI.js} +377 -40
- package/dist/cjs/{nv-datagridcolumn.entry-CRogHbVM.js → nv-datagridcolumn.entry-C3MYBmfS.js} +1 -1
- package/dist/cjs/{nv-dialog.entry-BSIZGYGF.js → nv-dialog.entry-OA3qL3Tx.js} +19 -13
- package/dist/cjs/{nv-dialogfooter_2.entry-Q4_li_QU.js → nv-dialogfooter_2.entry-LAQYSiGV.js} +3 -3
- package/dist/cjs/{nv-fieldcheckbox.entry-DmgzfmRd.js → nv-fieldcheckbox.entry-CP7SDzVO.js} +1 -1
- package/dist/cjs/{nv-fielddate.entry-qAvLX_Ru.js → nv-fielddate.entry-CD7PX6yA.js} +9 -18
- package/dist/cjs/{nv-fielddaterange.entry-DVB8Rwxk.js → nv-fielddaterange.entry-BVBVGmly.js} +27 -29
- package/dist/cjs/{nv-fielddropdown.entry-DKXmoXeW.js → nv-fielddropdown.entry-Nwric1vT.js} +13 -6
- package/dist/cjs/{nv-fielddropdownitem.entry-BVLVXi0e.js → nv-fielddropdownitem.entry-CiqSw5VL.js} +2 -2
- package/dist/cjs/{nv-fieldmultiselect.entry-DrTbd3Dj.js → nv-fieldmultiselect.entry-QKNIBcW1.js} +11 -5
- package/dist/cjs/nv-fieldnumber.entry-DfHcI-sO.js +130 -0
- package/dist/cjs/nv-fieldpassword.entry-b2pUmS8F.js +121 -0
- package/dist/cjs/{nv-fieldradio.entry-CVEY4v6F.js → nv-fieldradio.entry-Dxc6ZCyb.js} +4 -4
- package/dist/cjs/{nv-fieldselect.entry-BrCUuRWa.js → nv-fieldselect.entry-Cys0KRyG.js} +11 -7
- package/dist/cjs/nv-fieldtext.entry-DCZWLFFp.js +123 -0
- package/dist/cjs/{nv-fieldtextarea.entry-B4qiLmX1.js → nv-fieldtextarea.entry-DEeRdtZ7.js} +9 -5
- package/dist/cjs/{nv-fieldtime.entry-Bp2IWjhN.js → nv-fieldtime.entry-BqxiFlLI.js} +71 -68
- package/dist/cjs/nv-icon.entry-CzEdUDdA.js +79 -0
- package/dist/cjs/{nv-iconbutton_2.entry-BRPAGl2S.js → nv-iconbutton_2.entry-BLNrQz9Q.js} +3 -3
- package/dist/cjs/{nv-menu.entry-BiWiIZAm.js → nv-menu.entry-7IDfPmZ8.js} +4 -2
- package/dist/cjs/{nv-menuitem.entry-CFkXoZ_r.js → nv-menuitem.entry-B9cjy7O8.js} +2 -2
- package/dist/cjs/{nv-popover.entry-KT1iQUJk.js → nv-popover.entry-ChLYZ3zY.js} +2 -2
- package/dist/cjs/{nv-row.entry-Cs2GDrcu.js → nv-row.entry-DiLY8Vbc.js} +2 -2
- package/dist/cjs/{nv-stack.entry-Ci7pxGSo.js → nv-stack.entry-MpPzmg5_.js} +2 -2
- package/dist/cjs/{nv-table.entry-N4MV8Y6E.js → nv-table.entry-cME3Zuq2.js} +3 -3
- package/dist/cjs/{nv-tablecolumn.entry-CTz4jsZl.js → nv-tablecolumn.entry-DSctDxCS.js} +1 -1
- package/dist/cjs/{nv-toggle.entry-m10-ncYR.js → nv-toggle.entry-EBWm3Xy5.js} +3 -3
- package/dist/cjs/{nv-tooltip.entry-B6aRDto3.js → nv-tooltip.entry-q6rJLq1C.js} +2 -2
- package/dist/generated/components.js +4 -1
- package/dist/types/generated/components.d.ts +14 -7
- package/package.json +1 -1
- package/dist/cjs/nv-badge_2.entry-BsI3B8Rr.js +0 -195
- package/dist/cjs/nv-calendar.entry-CGKv_-gO.js +0 -1065
- package/dist/cjs/nv-fieldnumber.entry-DegbEHRL.js +0 -126
- package/dist/cjs/nv-fieldpassword.entry-gqjlEl7a.js +0 -117
- package/dist/cjs/nv-fieldtext.entry-q9NnqL5c.js +0 -119
- package/dist/cjs/nv-icon.entry-B1ax9cJS.js +0 -79
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cn-oNJnW.js');
|
|
4
4
|
var events_utilsFe1d907f = require('./events.utils-fe1d907f-01N__3wY.js');
|
|
5
5
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
6
|
-
var
|
|
6
|
+
var constantsB97e736d = require('./constants-b97e736d-BzFAKCkR.js');
|
|
7
7
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
8
8
|
require('react');
|
|
9
9
|
|
|
@@ -541,7 +541,7 @@ var tabbable = function tabbable(container, options) {
|
|
|
541
541
|
return sortByOrder(candidates);
|
|
542
542
|
};
|
|
543
543
|
|
|
544
|
-
const nvDialogCss = "dialog{border-radius:var(--radius-rounded-2xl);background:var(--color-level-00-background);min-width:400px;width:fit-content;max-width:960px;margin:auto;box-shadow:0px var(--shadow-y-axis-2xl) var(--shadow-blur-2xl) var(--shadow-spread-2xl) var(--shadow-color-opacity-3) var(--shadow-color-opacity-3)}dialog.full{width:90vw}dialog::backdrop{opacity:var(--components-overlay-opacity);background:var(--components-overlay-background)}dialog .content{display:flex;flex-direction:column;align-items:flex-start}dialog .content nv-button.close-button{position:absolute;top:var(--dialog-dismissible-position-top);right:var(--dialog-dismissible-position-right);display:flex;padding:var(--button-sm-icon-button-padding);justify-content:flex-end;align-items:flex-start;gap:10px}dialog .content .content-body{padding:var(--dialog-body-padding-y) var(--dialog-body-padding-x);
|
|
544
|
+
const nvDialogCss = "dialog{border-radius:var(--radius-rounded-2xl);background:var(--color-level-00-background);min-width:400px;width:fit-content;max-width:clamp(90vw, min(90vw, 960px), 960px);margin:auto;max-height:90vh;overflow:hidden;box-shadow:0px var(--shadow-y-axis-2xl) var(--shadow-blur-2xl) var(--shadow-spread-2xl) var(--shadow-color-opacity-3) var(--shadow-color-opacity-3)}dialog.full{width:90vw}dialog::backdrop{opacity:var(--components-overlay-opacity);background:var(--components-overlay-background)}dialog .content{display:flex;flex-direction:column;align-items:flex-start;height:fit-content;max-height:90vh;overflow:hidden}dialog .content nv-button.close-button{position:absolute;top:var(--dialog-dismissible-position-top);right:var(--dialog-dismissible-position-right);display:flex;padding:var(--button-sm-icon-button-padding);justify-content:flex-end;align-items:flex-start;gap:10px}dialog .content .content-body{overflow:auto;box-sizing:border-box;padding:var(--dialog-body-padding-y) var(--dialog-body-padding-x);scrollbar-gutter:stable both-edges;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--font-size-md);font-style:normal;font-weight:400;line-height:var(--line-height-base);color:var(--color-content-medium-text)}dialog .content .content-body::-webkit-scrollbar{width:6px;height:6px}dialog .content .content-body::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}dialog .content .content-body::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}";
|
|
545
545
|
const NvDialogStyle0 = nvDialogCss;
|
|
546
546
|
|
|
547
547
|
const NvDialog = class {
|
|
@@ -582,6 +582,17 @@ const NvDialog = class {
|
|
|
582
582
|
this.handleCancelButton = () => {
|
|
583
583
|
this.close();
|
|
584
584
|
};
|
|
585
|
+
/**
|
|
586
|
+
* Checks for and sets up form ID if a form is present
|
|
587
|
+
*/
|
|
588
|
+
this.checkForForm = () => {
|
|
589
|
+
if (!this.form) {
|
|
590
|
+
const formElement = this.el.querySelector('form');
|
|
591
|
+
if (formElement) {
|
|
592
|
+
this.form = this.ensureFormId(formElement);
|
|
593
|
+
}
|
|
594
|
+
}
|
|
595
|
+
};
|
|
585
596
|
/**
|
|
586
597
|
* Handles the native dialog close event.
|
|
587
598
|
*/
|
|
@@ -741,15 +752,8 @@ const NvDialog = class {
|
|
|
741
752
|
return (child.getAttribute('slot') === 'footer' ||
|
|
742
753
|
child.tagName.toLowerCase() === 'nv-dialogfooter');
|
|
743
754
|
});
|
|
744
|
-
//
|
|
745
|
-
|
|
746
|
-
const formElement = Array.from(this.el.children).find(child => {
|
|
747
|
-
return child.tagName.toLowerCase() === 'form';
|
|
748
|
-
});
|
|
749
|
-
if (formElement) {
|
|
750
|
-
this.form = this.ensureFormId(formElement);
|
|
751
|
-
}
|
|
752
|
-
}
|
|
755
|
+
// Initial form check
|
|
756
|
+
this.checkForForm();
|
|
753
757
|
}
|
|
754
758
|
componentWillUpdate() {
|
|
755
759
|
this.attachEventListeners();
|
|
@@ -763,6 +767,8 @@ const NvDialog = class {
|
|
|
763
767
|
this.setAutofocus();
|
|
764
768
|
}
|
|
765
769
|
this.attachEventListeners();
|
|
770
|
+
// Additional form check in case form was added after initial load
|
|
771
|
+
this.checkForForm();
|
|
766
772
|
}
|
|
767
773
|
disconnectedCallback() {
|
|
768
774
|
if (this.triggerElement && !this.eventsAttached && !this.controlled) {
|
|
@@ -776,7 +782,7 @@ const NvDialog = class {
|
|
|
776
782
|
//#region RENDER
|
|
777
783
|
render() {
|
|
778
784
|
const hasForm = this.form || this.el.querySelector('form');
|
|
779
|
-
return (index.h(index.Host, { key: '
|
|
785
|
+
return (index.h(index.Host, { key: 'c1eb9b79f52028c3ef7a57bad99260a45b678eb5' }, index.h("slot", { key: '65a624853aa7242dc849a1196c6b5b8c331d426f', name: "trigger" }), index.h("dialog", { key: '17369b9be014e9136d77f99628b4bc8184d36370', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsx297c1ffe.clsx({ full: this.full }) }, index.h("div", { key: '8a17cd8deff162b333e2ac90c487454743d76f3d', class: "content" }, !this.undismissable && (index.h("nv-button", { key: 'd61a63785ce284ce2039be5c62d6e2bcce2a9b44', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleCloseButton, "aria-label": "Close dialog" }, index.h("nv-icon", { key: '5a0adb449785bc684c41d0e35aad08ccb725386a', name: "x", size: "sm" }))), this.headerElement ? (index.h("slot", { name: "header" })) : (index.h("nv-dialogheader", { id: "dialog-header" })), index.h("div", { key: '7c39e52d8fe6fc9ab2fdc2574a0c105d790bbfbe', class: "content-body", id: "dialog-content" }, index.h("slot", { key: '038d9f3623177af5d996631dd9ae25fec49fd778' })), this.footerElement ? (index.h("slot", { name: "footer" })) : (index.h("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? constantsB97e736d.ButtonType.Submit : constantsB97e736d.ButtonType.Button, onDialogCanceled: this.handleCancelButton, undismissable: this.undismissable }))))));
|
|
780
786
|
}
|
|
781
787
|
get el() { return index.getElement(this); }
|
|
782
788
|
static get watchers() { return {
|
package/dist/cjs/{nv-dialogfooter_2.entry-Q4_li_QU.js → nv-dialogfooter_2.entry-LAQYSiGV.js}
RENAMED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
4
|
-
var
|
|
3
|
+
var index = require('./index-Cn-oNJnW.js');
|
|
4
|
+
var constantsB97e736d = require('./constants-b97e736d-BzFAKCkR.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
7
7
|
const nvDialogfooterCss = "nv-dialogfooter{display:flex;padding:var(--dialog-footer-padding-top) var(--dialog-footer-padding-x) var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);justify-content:flex-end;align-items:flex-end;gap:var(--dialog-footer-gap-y);align-self:stretch}";
|
|
@@ -54,7 +54,7 @@ const NvDialogfooter = class {
|
|
|
54
54
|
/**
|
|
55
55
|
* Sets the type of the primary button.
|
|
56
56
|
*/
|
|
57
|
-
this.primaryButtonType =
|
|
57
|
+
this.primaryButtonType = constantsB97e736d.ButtonType.Button;
|
|
58
58
|
//#endregion EVENTS
|
|
59
59
|
/****************************************************************************/
|
|
60
60
|
//#region METHODS
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cn-oNJnW.js');
|
|
4
4
|
var inputmaskEdcad3c1 = require('./inputmask-edcad3c1-B9Omti4z.js');
|
|
5
5
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('./_commonjsHelpers-1789f0cf-BJu3ubxk.js');
|
|
8
8
|
|
|
9
|
-
const nvFielddateCss = "nv-fielddate{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fielddate[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddate[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fielddate[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fielddate[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddate label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fielddate nv-popover{width:100%;display:block}nv-fielddate nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto}nv-fielddate nv-popover [slot=content]{display:block;width:100%}nv-fielddate .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;display:flex;align-items:center;gap:8px}nv-fielddate .input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fielddate .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddate .input-wrapper .input-container:focus-within,nv-fielddate .input-wrapper .input-container:focus-within:hover,nv-fielddate .input-wrapper .input-container:focus,nv-fielddate .input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddate .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddate .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddate .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%}nv-fielddate .input-wrapper .input-container input:focus{outline:none}nv-fielddate .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddate .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddate .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddate .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddate .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddate .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", 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 nvFielddateCss = "nv-fielddate{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fielddate[fluid]:not([fluid=false]){max-width:unset}nv-fielddate[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddate[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fielddate[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fielddate[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddate label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fielddate nv-popover{width:100%;display:block}nv-fielddate nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto}nv-fielddate nv-popover [slot=content]{display:block;width:100%}nv-fielddate nv-popover .datepicker-container{border:none}nv-fielddate .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;display:flex;align-items:center;gap:8px}nv-fielddate .input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fielddate .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddate .input-wrapper .input-container:focus-within,nv-fielddate .input-wrapper .input-container:focus-within:hover,nv-fielddate .input-wrapper .input-container:focus,nv-fielddate .input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddate .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddate .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddate .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%}nv-fielddate .input-wrapper .input-container input:focus{outline:none}nv-fielddate .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddate .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddate .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddate .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddate .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddate .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", 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
|
const NvFielddateStyle0 = nvFielddateCss;
|
|
11
11
|
|
|
12
12
|
const NvFielddate = class {
|
|
@@ -96,18 +96,9 @@ const NvFielddate = class {
|
|
|
96
96
|
*/
|
|
97
97
|
this.showActions = false;
|
|
98
98
|
/**
|
|
99
|
-
*
|
|
100
|
-
* JSON array of objects with the following properties:
|
|
101
|
-
* - label: string
|
|
102
|
-
* - onClick: function
|
|
103
|
-
* @default '[]'
|
|
99
|
+
* Allows the field to stretch and fill the entire width of its container.
|
|
104
100
|
*/
|
|
105
|
-
this.
|
|
106
|
-
/**
|
|
107
|
-
* Disabled dates ISO string array
|
|
108
|
-
* @default '[]'
|
|
109
|
-
*/
|
|
110
|
-
this.disabledDates = '[]';
|
|
101
|
+
this.fluid = false;
|
|
111
102
|
/**
|
|
112
103
|
* Closes the popover when a click is detected outside the component.
|
|
113
104
|
* @param {MouseEvent} event - The click event.
|
|
@@ -261,12 +252,12 @@ const NvFielddate = class {
|
|
|
261
252
|
/****************************************************************************/
|
|
262
253
|
//#region RENDER
|
|
263
254
|
render() {
|
|
264
|
-
return (index.h(index.Host, { key: '
|
|
265
|
-
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '
|
|
255
|
+
return (index.h(index.Host, { key: 'e59d967d20d9f1ab584058795f30a52e50ec2933' }, ((this.label && this.label.length > 0) ||
|
|
256
|
+
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'e159c6731265e73b436093b1aceaf354451245c9', htmlFor: this.inputId }, index.h("slot", { key: '9fc823ee41ec9fc7c8f9a42021277b4729ff0544', name: "label" }, this.label))), index.h("nv-popover", { key: 'cd0e133d5c62b00d4ade7a08184942e0bacc54fe', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '66b96d21779fd6a8f335af3d2d2bc4df117516d8', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: 'e2c0e7c249cc4b213afc858281db0a84ab9c4827', name: "before-input" }), index.h("div", { key: '585283bf8880c4d8be911167d27abe34c2f4e21f', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '9c15ffe741369e54fca3a8aeb844e4fbcc93fd5d', name: "leading-input" }), index.h("input", { key: 'bca0e7c19b1081a2849a2a36843628c6f65a4eb2', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.singleValue, onInput: this.handleInput, onFocus: this.handleFocus, "data-scope": "date" }), this.error && (index.h("nv-icon", { key: 'd610fdea33086a737ef99ab4e4ed69f09dd40045', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'cce665f259ef8134cc8737f8077c05915b4f7dcc', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'd27bcd437f35f5445fb9994fd7283c2339bc7ea8', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
|
|
266
257
|
,
|
|
267
|
-
size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '
|
|
268
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
269
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
258
|
+
size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '7708b24f9f569094b6f4f850413edd46e210b7e8', name: "after-input" })), index.h("div", { key: '194a99a83c9978691130d17e981c61be742315cf', slot: "content" }, index.h("nv-calendar", { key: '4dc6b2afb3890c5bfb08f070f5b5daac07a76929', dateFormat: this.dateFormat, singleValue: this.singleValue, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates }))), ((this.description && this.description.length > 0) ||
|
|
259
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '623af8e048bfb7aef8919fa64a0f1baf04608b69', class: "description" }, index.h("slot", { key: 'cd3eecb2488e19ba1faf139ab4546e6db10468d2', name: "description" }, this.description))), (this.errorDescription ||
|
|
260
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'eafcfc3c9bb584c78d7f8d6437bbfab269fdaca9', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '4b5c23e00f8edb7c0d0d40a5ae89bbb322190c5d' })));
|
|
270
261
|
}
|
|
271
262
|
get el() { return index.getElement(this); }
|
|
272
263
|
static get watchers() { return {
|
package/dist/cjs/{nv-fielddaterange.entry-DVB8Rwxk.js → nv-fielddaterange.entry-BVBVGmly.js}
RENAMED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cn-oNJnW.js');
|
|
4
4
|
var inputmaskEdcad3c1 = require('./inputmask-edcad3c1-B9Omti4z.js');
|
|
5
5
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('./_commonjsHelpers-1789f0cf-BJu3ubxk.js');
|
|
8
8
|
|
|
9
|
-
const nvFielddaterangeCss = "nv-fielddaterange{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fielddaterange[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddaterange[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fielddaterange[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fielddaterange[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddaterange label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fielddaterange nv-popover{width:100%;display:block}nv-fielddaterange nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto}nv-fielddaterange nv-popover [slot=content]{display:block;width:100%}nv-fielddaterange .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;display:flex;align-items:center;gap:8px}nv-fielddaterange .input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out
|
|
9
|
+
const nvFielddaterangeCss = "nv-fielddaterange{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fielddaterange[fluid]:not([fluid=false]){max-width:unset}nv-fielddaterange[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddaterange[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fielddaterange[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fielddaterange[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddaterange label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fielddaterange nv-popover{width:100%;display:block}nv-fielddaterange nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto}nv-fielddaterange nv-popover [slot=content]{display:block;width:100%}nv-fielddaterange .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;display:flex;align-items:center;gap:8px}nv-fielddaterange .input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fielddaterange .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddaterange .input-wrapper .input-container:focus-within,nv-fielddaterange .input-wrapper .input-container:focus-within:hover,nv-fielddaterange .input-wrapper .input-container:focus,nv-fielddaterange .input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddaterange .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddaterange .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddaterange .input-wrapper .input-container 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:500;line-height:var(--form-field-line-height);width:100%;width:100%}nv-fielddaterange .input-wrapper .input-container input:focus{outline:none}nv-fielddaterange .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddaterange .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddaterange .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddaterange .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fielddaterange .range-inputs{display:flex;align-items:center;gap:8px}nv-fielddaterange .range-inputs input{flex:1;border:none;outline:none;padding:0;font-size:var(--form-field-font-size);color:var(--components-form-field-content-text);background:transparent;min-width:0;text-align:center}nv-fielddaterange .range-inputs input::placeholder{color:var(--components-form-field-content-placeholder)}nv-fielddaterange .range-inputs input:disabled{cursor:not-allowed;color:var(--components-form-field-content-text);background-color:var(--components-form-field-background-disabled)}";
|
|
10
10
|
const NvFielddaterangeStyle0 = nvFielddaterangeCss;
|
|
11
11
|
|
|
12
12
|
const NvFielddaterange = class {
|
|
@@ -49,7 +49,7 @@ const NvFielddaterange = class {
|
|
|
49
49
|
/**
|
|
50
50
|
* Autofocus the start input when the component is mounted.
|
|
51
51
|
*/
|
|
52
|
-
this.
|
|
52
|
+
this.autofocus = false;
|
|
53
53
|
/**
|
|
54
54
|
* The initial value of the date range (in string format).
|
|
55
55
|
*/
|
|
@@ -103,24 +103,9 @@ const NvFielddaterange = class {
|
|
|
103
103
|
*/
|
|
104
104
|
this.showActions = false;
|
|
105
105
|
/**
|
|
106
|
-
*
|
|
107
|
-
* JSON array of objects with the following properties:
|
|
108
|
-
* - label: string
|
|
109
|
-
* - onClick: function
|
|
110
|
-
* @default '[]'
|
|
106
|
+
* Allows the field to stretch and fill the entire width of its container.
|
|
111
107
|
*/
|
|
112
|
-
this.
|
|
113
|
-
/**
|
|
114
|
-
* Show week numbers
|
|
115
|
-
* @default true
|
|
116
|
-
*/
|
|
117
|
-
// eslint-disable-next-line @stencil-community/ban-default-true
|
|
118
|
-
this.showWeekNumbers = true;
|
|
119
|
-
/**
|
|
120
|
-
* Disabled dates ISO string array
|
|
121
|
-
* @default '[]'
|
|
122
|
-
*/
|
|
123
|
-
this.disabledDates = '[]';
|
|
108
|
+
this.fluid = false;
|
|
124
109
|
/**
|
|
125
110
|
* Closes the popover when a click is detected outside the component.
|
|
126
111
|
* @param {MouseEvent} event - The mouse event
|
|
@@ -142,6 +127,7 @@ const NvFielddaterange = class {
|
|
|
142
127
|
const input = event.target;
|
|
143
128
|
this.startValue = input.value;
|
|
144
129
|
this.dateRangeChange.emit({ start: input.value, end: this.endValue });
|
|
130
|
+
this.updateCalendarValue();
|
|
145
131
|
};
|
|
146
132
|
/**
|
|
147
133
|
* Handles the input event on the end input element.
|
|
@@ -155,6 +141,7 @@ const NvFielddaterange = class {
|
|
|
155
141
|
const input = event.target;
|
|
156
142
|
this.endValue = input.value;
|
|
157
143
|
this.dateRangeChange.emit({ start: this.startValue, end: input.value });
|
|
144
|
+
this.updateCalendarValue();
|
|
158
145
|
};
|
|
159
146
|
/**
|
|
160
147
|
* Handles focus events on the input elements.
|
|
@@ -188,11 +175,10 @@ const NvFielddaterange = class {
|
|
|
188
175
|
* @returns {string} The converted format for Inputmask
|
|
189
176
|
*/
|
|
190
177
|
convertToInputmaskFormat(format) {
|
|
191
|
-
//
|
|
178
|
+
// If the format is not specified, use the default format YYYY-MM-DD
|
|
192
179
|
if (!format) {
|
|
193
180
|
return 'dd/mm/yyyy';
|
|
194
181
|
}
|
|
195
|
-
// Conversion des formats
|
|
196
182
|
const formatMap = {
|
|
197
183
|
'YYYY-MM-DD': 'yyyy-mm-dd',
|
|
198
184
|
'DD/MM/YYYY': 'dd/mm/yyyy',
|
|
@@ -202,6 +188,18 @@ const NvFielddaterange = class {
|
|
|
202
188
|
};
|
|
203
189
|
return formatMap[format] || 'dd/mm/yyyy';
|
|
204
190
|
}
|
|
191
|
+
/**
|
|
192
|
+
* Update the calendar's rangeValue property
|
|
193
|
+
*/
|
|
194
|
+
updateCalendarValue() {
|
|
195
|
+
const calendar = this.el.querySelector('nv-calendar');
|
|
196
|
+
if (calendar && this.startValue && this.endValue) {
|
|
197
|
+
calendar.rangeValue = {
|
|
198
|
+
start: this.startValue,
|
|
199
|
+
end: this.endValue,
|
|
200
|
+
};
|
|
201
|
+
}
|
|
202
|
+
}
|
|
205
203
|
//#endregion METHODS
|
|
206
204
|
/****************************************************************************/
|
|
207
205
|
//#region LIFECYCLE
|
|
@@ -335,15 +333,15 @@ const NvFielddaterange = class {
|
|
|
335
333
|
/****************************************************************************/
|
|
336
334
|
//#region RENDER
|
|
337
335
|
render() {
|
|
338
|
-
return (index.h(index.Host, { key: '
|
|
339
|
-
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '
|
|
340
|
-
?
|
|
336
|
+
return (index.h(index.Host, { key: '9a86c3e67127ffdbfd67bf3d1ed7231ff1953c20' }, ((this.label && this.label.length > 0) ||
|
|
337
|
+
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '2e289da417fe9056d7a411382d8cf7413a2584f7', htmlFor: this.startInputId }, index.h("slot", { key: 'dded9fc8dc9ee2bc37547daf4d72c51ff6fa05b4', name: "label" }, this.label))), index.h("nv-popover", { key: 'a683217e7c21aa85091656f6e88834a6f1ba9d2b', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '659a3bdc6f008c3b38cdbac18727a2c44d81ca30', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '127890f146a8c959fb48b86e05991984c1d48cdb', name: "before-input" }), index.h("div", { key: '244b4809da40407e2fe6b80b51236277deb92233', class: "input-container" }, index.h("slot", { key: '7098d56dc45d7aa20995c412910463485559bc60', name: "leading-input" }), index.h("div", { key: 'dae09fc6e139301d1de4378fbee3e3e98b17ee56', class: "range-inputs" }, index.h("input", { key: '5fd4543e2ce1fbd157d80a8ad1e9ddba2d907b84', id: this.startInputId, type: "text", placeholder: this.startPlaceholder, name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), index.h("svg", { key: '1e8bd37b3cb4a7755ab79603baf359f1710a133e', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "icon icon-tabler icons-tabler-outline icon-tabler-arrows-move-horizontal" }, index.h("path", { key: 'a2d7c5e4ecd18264625b7a23bee25f079e74bd68', stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), index.h("path", { key: '3aae4cbe301f41b5f4baddf97763c6e25990d8f0', d: "M18 9l3 3l-3 3" }), index.h("path", { key: 'e7d2051a2cfb213943284b1344ab2410367a94cf', d: "M15 12h6" }), index.h("path", { key: '5a010518ec9fa67a9cd57fddfde943e0b1e1bc87', d: "M6 9l-3 3l3 3" }), index.h("path", { key: 'd306b27327ffb3d3e2f56183eff389c5dfab9a74', d: "M3 12h6" })), index.h("input", { key: '21db190063ebbba0952d0a505ed50b30f5990022', id: this.endInputId, type: "text", placeholder: this.endPlaceholder, name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (index.h("nv-icon", { key: '9e13cae015f7514fffc1f300417c9b2ce8821834', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '437d6a83af2b88feb9aac140bf5fd24d40fd4737', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '1e601ef8c2fd9017bc2ae7b2a5aee16bcb3f8484', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', "aria-pressed": this.open.toString(), onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '03f8321ba62c537d6f0ed57a787d637deebc13ad', name: "after-input" })), index.h("div", { key: '02f20014c5ea3220f89e1789330b4b75f14a929e', slot: "content" }, index.h("nv-calendar", { key: '94d69454bdb2d86252ac809bd6d3bbfa38ff5059', dateFormat: this.dateFormat, rangeValue: this.startValue && this.endValue
|
|
338
|
+
? {
|
|
341
339
|
start: this.startValue,
|
|
342
340
|
end: this.endValue,
|
|
343
|
-
}
|
|
344
|
-
:
|
|
345
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
346
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
341
|
+
}
|
|
342
|
+
: null, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, selectionType: "range" }))), ((this.description && this.description.length > 0) ||
|
|
343
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'af16ac5b05633198fcd91f4ad1513b981ceca4db', class: "description" }, index.h("slot", { key: 'affaa713de178e9d8e8d4e9b210166a9502f5685', name: "description" }, this.description))), (this.errorDescription ||
|
|
344
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '5dfb1d255607efdb7290ffaace2ce18eedf1f123', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '89a4cef668960f0e205916142b6cb192e18cab4c' })));
|
|
347
345
|
}
|
|
348
346
|
get el() { return index.getElement(this); }
|
|
349
347
|
static get watchers() { return {
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cn-oNJnW.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
7
|
-
const nvFielddropdownCss = "nv-fielddropdown{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fielddropdown[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddropdown[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fielddropdown[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddropdown[hidden]:not([hidden=false]) label{display:none}nv-fielddropdown label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown nv-popover [data-scope=popover]{width:100%;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fielddropdown nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fielddropdown nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative;width:100%;min-height:40px}nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container:focus-within,nv-fielddropdown .input-container:focus-within:hover,nv-fielddropdown .input-container:focus,nv-fielddropdown .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddropdown .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container input[type=search]::-webkit-search-decoration,nv-fielddropdown .input-container input[type=search]::-webkit-search-cancel-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}nv-fielddropdown .input-container input,nv-fielddropdown .input-container p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddropdown .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddropdown .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddropdown .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:500;line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fielddropdown .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fielddropdown .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddropdown .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", 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)}";
|
|
7
|
+
const nvFielddropdownCss = "nv-fielddropdown{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fielddropdown[fluid]:not([fluid=false]){max-width:unset}nv-fielddropdown[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddropdown[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fielddropdown[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddropdown[hidden]:not([hidden=false]) label{display:none}nv-fielddropdown label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown nv-popover [data-scope=popover]{width:100%;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fielddropdown nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fielddropdown nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative;width:100%;min-height:40px}nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container:focus-within,nv-fielddropdown .input-container:focus-within:hover,nv-fielddropdown .input-container:focus,nv-fielddropdown .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddropdown .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container input[type=search]::-webkit-search-decoration,nv-fielddropdown .input-container input[type=search]::-webkit-search-cancel-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}nv-fielddropdown .input-container input,nv-fielddropdown .input-container p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%}nv-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddropdown .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddropdown .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddropdown .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:500;line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fielddropdown .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fielddropdown .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddropdown .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", 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)}";
|
|
8
8
|
const NvFielddropdownStyle0 = nvFielddropdownCss;
|
|
9
9
|
|
|
10
10
|
const NvFielddropdown = class {
|
|
@@ -69,6 +69,10 @@ const NvFielddropdown = class {
|
|
|
69
69
|
* element.
|
|
70
70
|
*/
|
|
71
71
|
this.autofocus = false;
|
|
72
|
+
/**
|
|
73
|
+
* Allows the field to stretch and fill the entire width of its container.
|
|
74
|
+
*/
|
|
75
|
+
this.fluid = false;
|
|
72
76
|
//#endregion PROPERTIES
|
|
73
77
|
/****************************************************************************/
|
|
74
78
|
//#region STATE
|
|
@@ -157,7 +161,10 @@ const NvFielddropdown = class {
|
|
|
157
161
|
this.open = false;
|
|
158
162
|
}
|
|
159
163
|
handleOpenChanged(event) {
|
|
160
|
-
|
|
164
|
+
// Stop propagation to prevent the event from affecting parent components like dialogs
|
|
165
|
+
event.stopPropagation();
|
|
166
|
+
// Update `open` based on the popover state
|
|
167
|
+
this.open = event.detail;
|
|
161
168
|
}
|
|
162
169
|
watchValueHandler(newValue) {
|
|
163
170
|
this.valueChanged.emit(newValue);
|
|
@@ -325,9 +332,9 @@ const NvFielddropdown = class {
|
|
|
325
332
|
//#region RENDER
|
|
326
333
|
render() {
|
|
327
334
|
var _a;
|
|
328
|
-
return (index.h(index.Host, { key: '
|
|
329
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
330
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
335
|
+
return (index.h(index.Host, { key: 'cf5547bf05355ee548804c697fd6a3524d68c1ba', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '76d23fc85b18e8bf4288d4f7bcf47a4af283fc23', htmlFor: this.inputId }, index.h("slot", { key: 'fe4faee394762bb88feeaea26ae508981cf25f95', name: "label" }, this.label))), index.h("nv-popover", { key: '477a08c8898de641e707bf34fc1584ad217f8beb', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '4154ac008b7868eb231eb951e88dd6feba4a758a', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: 'c59d39d2f18c2a5a8a40c2c796ca564f4356168c', name: "before-input" }), index.h("div", { key: '4eb6163061b5daf3aa4d6afe64970e0e5bf551d6', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'b183868757274f389a00a4cd8f745a137d6ead44', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (index.h("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.getSelectedLabel(), required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onClick: this.handleInputFocus, onKeyDown: this.handleKeyDown })) : (index.h("p", { "data-scope": "focusable", id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && this.open && (index.h("nv-iconbutton", { key: 'ca073047dfa1cf558c77fbae2d84e77fd5ae33bf', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (index.h("nv-icon", { key: 'b847592deb061bcc9c2ec6649ba66290da54e1d0', name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'f30ddb81d582840918866bdaa8055fcf30cdf9dc', "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopover, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '023464c8dc5c2d502abff1e5738d861eccb31cd7', name: "after-input" })), index.h("div", { key: '7143961a33d624d653e066e5dc3f74865171303f', slot: "content" }, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (index.h("ul", null, this.options.map(option => (index.h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (index.h("slot", { name: "content" })))), (this.description ||
|
|
336
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'afee31c96dade12087ea2a476ef51dd235c34ad7', class: "description" }, index.h("slot", { key: '53ca646ce1abc0d2d96764b7e7cf08dcdf908909', name: "description" }, this.description))), (this.errorDescription ||
|
|
337
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'f282d962255459043b865d18c95a328cd5c7b2e8', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'c01c9c62d1fb43c469b271f1e5f5ac5c401b112e', name: "error-description" }, this.errorDescription)))));
|
|
331
338
|
}
|
|
332
339
|
static get formAssociated() { return true; }
|
|
333
340
|
get el() { return index.getElement(this); }
|
package/dist/cjs/{nv-fielddropdownitem.entry-BVLVXi0e.js → nv-fielddropdownitem.entry-CiqSw5VL.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cn-oNJnW.js');
|
|
4
4
|
require('react');
|
|
5
5
|
|
|
6
6
|
const nvFielddropdownitemCss = "nv-fielddropdownitem{display:flex;gap:var(--spacing-2);flex-wrap:wrap;align-items:center;width:100%;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);font-weight:var(--menu-contextual-item-font-weight);font-size:var(--list-dropdown-font-size);line-height:var(--list-dropdown-line-height);color:var(--components-list-dropdown-item-label-default);border-radius:var(--list-dropdown-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem .text-wrapper{display:flex;flex-grow:1;align-items:center;justify-content:space-between}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem nv-icon[data-scope=selected]{color:var(--components-list-dropdown-item-label-default);align-self:center;margin-left:auto}";
|
|
@@ -59,7 +59,7 @@ const NvFielddropdownitem = class {
|
|
|
59
59
|
/****************************************************************************/
|
|
60
60
|
//#region RENDER
|
|
61
61
|
render() {
|
|
62
|
-
return (index.h(index.Host, { key: '
|
|
62
|
+
return (index.h(index.Host, { key: '645ff9487464e30c9f0fc4510301fb1e0f919c1f', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, index.h("slot", { key: '4cc5ec9d61f0b0dd63d273af23623434dae0b2c3' }), !this.composed && (index.h("div", { key: '2b64690c51959e71482603c530d954db0cf4186e', class: "text-wrapper" }, index.h("span", { key: '5c49245a50249f51ff023d33ccfe541b4684152a', "data-scope": "text" }, this.label))), this.selected && (index.h("nv-icon", { key: 'ca97f75940f804e5ac3a9152aaee38a9a69e10f8', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
|
|
63
63
|
}
|
|
64
64
|
get el() { return index.getElement(this); }
|
|
65
65
|
};
|
package/dist/cjs/{nv-fieldmultiselect.entry-DrTbd3Dj.js → nv-fieldmultiselect.entry-QKNIBcW1.js}
RENAMED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cn-oNJnW.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
7
|
-
const nvFieldmultiselectCss = "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}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)}nv-fieldmultiselect[required]:not([required=false])>label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}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:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldmultiselect nv-popover{width:100%;display:block}nv-fieldmultiselect nv-popover [data-scope=popover]{width:100%;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 .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;position:relative;width:100%;min-height:40px;}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){opacity:0.5;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>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:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}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:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}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-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:500;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{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldmultiselect .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", 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{text-align:center;padding:10px;color:var(--components-form-text-description-error)}.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}";
|
|
7
|
+
const nvFieldmultiselectCss = "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)}nv-fieldmultiselect[required]:not([required=false])>label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}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:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldmultiselect nv-popover{width:100%;display:block}nv-fieldmultiselect nv-popover [data-scope=popover]{width:100%;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 div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fieldmultiselect div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldmultiselect div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}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;position:relative;width:100%;min-height:40px;}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){opacity:0.5;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>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:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;width:100%;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}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:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}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-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:500;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{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldmultiselect .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", 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{text-align:center;padding:10px;color:var(--components-form-text-description-error)}.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}";
|
|
8
8
|
const NvFieldmultiselectStyle0 = nvFieldmultiselectCss;
|
|
9
9
|
|
|
10
10
|
const NvFieldmultiselect = class {
|
|
@@ -87,6 +87,10 @@ const NvFieldmultiselect = class {
|
|
|
87
87
|
* element.
|
|
88
88
|
*/
|
|
89
89
|
this.autofocus = false;
|
|
90
|
+
/**
|
|
91
|
+
* Allows the field to stretch and fill the entire width of its container.
|
|
92
|
+
*/
|
|
93
|
+
this.fluid = false;
|
|
90
94
|
/**
|
|
91
95
|
* Handle badge close for options mode.
|
|
92
96
|
*/
|
|
@@ -296,14 +300,14 @@ const NvFieldmultiselect = class {
|
|
|
296
300
|
* @returns {any} The JSX for options mode
|
|
297
301
|
*/
|
|
298
302
|
this.renderOptionsMode = () => {
|
|
299
|
-
return (index.h(index.Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { htmlFor: this.inputId }, index.h("slot", { name: "label" }, this.label))), index.h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, index.h("slot", { name: "before-input" }), index.h("div", { class: "input-container-multiselect" }, index.h("slot", { name: "leading-input" }), this.selectedValues.length > 0 && (index.h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions })), this.filterable || this.disabled || this.readonly ? (index.h("input", { type: "text", id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown })) : (index.h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, role: "combobox", "aria-expanded": this.open }, index.h("span", null, this.value || this.placeholder))), this.error && (index.h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverOptions })), index.h("slot", { name: "after-input" })), index.h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, index.h("ul", { role: "content" }, this.options.map(option => (index.h("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.selectedValues.includes(option.value), disabled: option.disabled }))), index.h("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
|
|
303
|
+
return (index.h(index.Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { htmlFor: this.inputId }, index.h("slot", { name: "label" }, this.label))), index.h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, index.h("slot", { name: "before-input" }), index.h("div", { class: "input-container-multiselect" }, index.h("slot", { name: "leading-input" }), this.selectedValues.length > 0 && (index.h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions })), this.filterable || this.disabled || this.readonly ? (index.h("input", { type: "text", id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown, "data-scope": "focusable" })) : (index.h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, role: "combobox", "aria-expanded": this.open, "data-scope": "focusable" }, index.h("span", null, this.value || this.placeholder))), this.error && (index.h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverOptions })), index.h("slot", { name: "after-input" })), index.h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, index.h("ul", { role: "content" }, this.options.map(option => (index.h("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.selectedValues.includes(option.value), disabled: option.disabled }))), index.h("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
|
|
300
304
|
};
|
|
301
305
|
/**
|
|
302
306
|
* Renders the component in slots mode
|
|
303
307
|
* @returns {any} The JSX for slots mode
|
|
304
308
|
*/
|
|
305
309
|
this.renderSlotsMode = () => {
|
|
306
|
-
return (index.h(index.Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { htmlFor: this.inputId }, index.h("slot", { name: "label" }, this.label))), index.h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, index.h("slot", { name: "before-input" }), index.h("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, index.h("slot", { name: "leading-input" }), this.selectedValues.length > 0 && (index.h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots })), this.filterable || this.disabled || this.readonly ? (index.h("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDown })) : (index.h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, role: "combobox", "aria-expanded": this.open }, index.h("span", null, this.value || this.placeholder))), this.error && (index.h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverSlots })), index.h("slot", { name: "after-input" })), index.h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, index.h("slot", { name: "content" }))), this.renderDescriptions()));
|
|
310
|
+
return (index.h(index.Host, null, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { htmlFor: this.inputId }, index.h("slot", { name: "label" }, this.label))), index.h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, index.h("slot", { name: "before-input" }), index.h("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, index.h("slot", { name: "leading-input" }), this.selectedValues.length > 0 && (index.h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.selectedValues.length > 0, label: `${this.selectedValues.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.selectedValues.length} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots })), this.filterable || this.disabled || this.readonly ? (index.h("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.value, required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDown, "data-scope": "focusable" })) : (index.h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, role: "combobox", "aria-expanded": this.open, "data-scope": "focusable" }, index.h("span", null, this.value || this.placeholder))), this.error && (index.h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopoverSlots })), index.h("slot", { name: "after-input" })), index.h("div", { slot: "content", role: "listbox", "aria-multiselectable": "true", style: { 'max-height': this.maxHeight, 'overflow-y': 'auto' } }, index.h("slot", { name: "content" }))), this.renderDescriptions()));
|
|
307
311
|
};
|
|
308
312
|
}
|
|
309
313
|
//#endregion PROPERTIES
|
|
@@ -371,7 +375,9 @@ const NvFieldmultiselect = class {
|
|
|
371
375
|
* @param {CustomEvent<boolean>} event - The event object containing the focus state.
|
|
372
376
|
*/
|
|
373
377
|
handleOpenChanged(event) {
|
|
374
|
-
//
|
|
378
|
+
// Stop propagation to prevent the event from affecting parent components like dialogs
|
|
379
|
+
event.stopPropagation();
|
|
380
|
+
// Update `open` based on the popover state
|
|
375
381
|
this.open = event.detail;
|
|
376
382
|
if (this.open) {
|
|
377
383
|
// Filter items only if there is filter text
|