@nova-design-system/nova-react 3.6.0 → 3.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -0
- package/dist/cjs/{index-E_eTmclZ.js → index-Cv7U-U85.js} +292 -241
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/{nv-accordion-item.entry-B9iMQoRk.js → nv-accordion-item.entry-BgDBJjHO.js} +3 -3
- package/dist/cjs/{nv-accordion.entry-2oOEkDVq.js → nv-accordion.entry-1dHBq_qo.js} +17 -44
- package/dist/cjs/{nv-alert.entry-CJcHACkm.js → nv-alert.entry-6J-BEBxl.js} +1 -1
- package/dist/cjs/{nv-avatar.entry-COkIaFDp.js → nv-avatar.entry-Lav6aVEw.js} +1 -1
- package/dist/cjs/{nv-badge_2.entry-CQHT-nck.js → nv-badge_2.entry-DaAOJgy_.js} +2 -2
- package/dist/cjs/{nv-breadcrumb.entry-DElOQJUD.js → nv-breadcrumb.entry-BKoLlkWC.js} +1 -1
- package/dist/cjs/{nv-breadcrumbs.entry-CDfxiMbp.js → nv-breadcrumbs.entry-BdGgzdxC.js} +1 -1
- package/dist/cjs/{nv-button.entry-CTJT4SzB.js → nv-button.entry-Pe2qJFy0.js} +1 -1
- package/dist/cjs/{nv-calendar.entry-BU2OBf6g.js → nv-calendar.entry-WRFrbZtz.js} +97 -76
- package/dist/cjs/{nv-col.entry-Bsz14pxY.js → nv-col.entry-C3IgKfxS.js} +1 -1
- package/dist/cjs/{nv-datagrid.entry-2DyB7G5f.js → nv-datagrid.entry-Bh1mgk8D.js} +1 -1
- package/dist/cjs/{nv-datagridcolumn.entry-DquF2Cc1.js → nv-datagridcolumn.entry-DopvtY6C.js} +1 -1
- package/dist/cjs/{nv-dialog.entry-QzImh4AV.js → nv-dialog.entry-D8oF5B-9.js} +1 -1
- package/dist/cjs/{nv-dialogfooter_2.entry-MikGtnGi.js → nv-dialogfooter_2.entry-QE1dFuOh.js} +1 -1
- package/dist/cjs/{nv-fieldcheckbox.entry-DKhH58rn.js → nv-fieldcheckbox.entry-BbC0JUWc.js} +5 -5
- package/dist/cjs/{nv-fielddate.entry-Dj_oMJ2a.js → nv-fielddate.entry-BIuQgdYW.js} +27 -6
- package/dist/cjs/{nv-fielddaterange.entry-CWwH83ug.js → nv-fielddaterange.entry-C82h1WUR.js} +33 -5
- package/dist/cjs/{nv-fielddropdown.entry-CPD-1tGj.js → nv-fielddropdown.entry-CWqg8M3_.js} +4 -4
- package/dist/cjs/{nv-fielddropdownitem.entry-CM5Fogll.js → nv-fielddropdownitem.entry-KuL1iVS4.js} +2 -2
- package/dist/cjs/{nv-fieldmultiselect.entry-DodoLrhv.js → nv-fieldmultiselect.entry-CAdWlUw2.js} +15 -7
- package/dist/cjs/{nv-fieldnumber.entry-063nS6p_.js → nv-fieldnumber.entry-Bbk2wO5k.js} +4 -4
- package/dist/cjs/{nv-fieldpassword.entry-CreA_Yx8.js → nv-fieldpassword.entry-BOtLqrGx.js} +4 -4
- package/dist/cjs/{nv-fieldradio.entry-Y8YSlQbK.js → nv-fieldradio.entry-CY4txacC.js} +4 -4
- package/dist/cjs/{nv-fieldselect.entry-B1X8kT8-.js → nv-fieldselect.entry-CRP6e7uq.js} +6 -6
- package/dist/cjs/{nv-fieldslider.entry-CJlQWgFy.js → nv-fieldslider.entry-BLO9yOcu.js} +4 -4
- package/dist/cjs/{nv-fieldtext.entry-Cib7Q9Wi.js → nv-fieldtext.entry-BqgV8SxD.js} +4 -4
- package/dist/cjs/{nv-fieldtextarea.entry-QYIEAbAM.js → nv-fieldtextarea.entry-dDaXddme.js} +4 -4
- package/dist/cjs/{nv-fieldtime.entry-D6jX_bbE.js → nv-fieldtime.entry-DAIYFHO7.js} +11 -11
- package/dist/cjs/{nv-icon.entry-DyYPxO1l.js → nv-icon.entry-CxE0uTUN.js} +2 -2
- package/dist/cjs/{nv-iconbutton_2.entry-BDpYysUa.js → nv-iconbutton_2.entry-DAWQjqvb.js} +3 -3
- package/dist/cjs/{nv-menu.entry-EY6i9-lW.js → nv-menu.entry-Fg1jfAeH.js} +2 -2
- package/dist/cjs/{nv-menuitem.entry-D3_V7wz6.js → nv-menuitem.entry-CGg4iJrd.js} +2 -2
- package/dist/cjs/{nv-popover.entry-VI0JSWEK.js → nv-popover.entry-DsKxPxfa.js} +2 -2
- package/dist/cjs/{nv-row.entry-Da5sYAGY.js → nv-row.entry-BsPFwLLA.js} +2 -2
- package/dist/cjs/{nv-stack.entry-CQ8A3wKB.js → nv-stack.entry-4Ec3nJml.js} +2 -2
- package/dist/cjs/{nv-table.entry-DkALs4J_.js → nv-table.entry-Bv0iDqou.js} +3 -3
- package/dist/cjs/{nv-tablecolumn.entry-C_9y9_Tk.js → nv-tablecolumn.entry-XJJCmUC2.js} +1 -1
- package/dist/cjs/{nv-toggle.entry-CPvuKc2f.js → nv-toggle.entry-C72c_569.js} +3 -3
- package/dist/cjs/{nv-tooltip.entry-dvTSw6dq.js → nv-tooltip.entry-BNvm30iV.js} +2 -2
- package/dist/generated/components.js +1 -1
- package/dist/generated/components.server.js +2 -5
- package/dist/types/generated/components.d.ts +1 -1
- package/dist/types/generated/components.server.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cv7U-U85.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
5
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
6
6
|
require('react');
|
|
@@ -118,13 +118,13 @@ const NvFieldcheckbox = class {
|
|
|
118
118
|
/****************************************************************************/
|
|
119
119
|
//#region RENDER
|
|
120
120
|
render() {
|
|
121
|
-
return (index.h(index.Host, { key: '
|
|
121
|
+
return (index.h(index.Host, { key: '46e0688340e1cda23f1fdbefb349fbaa8bb188f2', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("div", { key: '5769e3e61f69b7a9821864aab6338b13b46db4cc', class: "input-container" }, index.h("input", { key: '0acc841c8583ca1d0781135b95a038703b3be516', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !this.required, required: this.required, indeterminate: this.indeterminate, ref: el => {
|
|
122
122
|
if (el) {
|
|
123
123
|
el.indeterminate = this.indeterminate;
|
|
124
124
|
}
|
|
125
|
-
} }), index.h("span", { key: '
|
|
126
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
127
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
125
|
+
} }), index.h("span", { key: 'a2bdc7fa16b4cb5e266c1666746f88b462ef6bbc', class: "icon" }, this.checked && !this.indeterminate && (index.h("slot", { key: 'aa00b58bb2fb2132b4b355568bbecafbf14d9536', name: "checked-icon" }, index.h("svg", { key: '3d7e92b03fc0ebc0676a5f5a011e0a5f16bb06d9', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '28170c912acd9442af03c889afc10d348657a84b', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (index.h("slot", { key: '790eca10b1eea865ecde7be45c00ae3bbf65132b', name: "indeterminate-icon" }, index.h("svg", { key: 'a00b2e00c2e2038dd1d67c43aef4f30e5d7a27e7', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '6e7eb5f117a0244594392a52f932a91056093168', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("slot", { key: '4c11bb2b8078adc0d7d5f3c52c2525bc836ad075' }), index.h("div", { key: '323cab79ca6e047df5482d75490ba7288eef5e27', class: "text-container" }, index.h("slot", { key: '5bc6845d98ee06117b97588e71467ce106e1ab60', name: "main" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'ce639cb27b8ea446f2a0d73a36c3c9541bde9ab8', htmlFor: this.inputId, class: clsx297c1ffe.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: 'cd4b650b2f1b064b65211e90fdddff15b0d6f1f4', name: "label" }, this.label))), (this.description ||
|
|
126
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '7de730e025d5eeae626bbe64125479dc9ebb4332', class: "description" }, index.h("slot", { key: '2c2f6343838ffff29e1e920ae927d89e9a63f02e', name: "description" }, this.description)))), (this.errorDescription ||
|
|
127
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'b49fd559c3bf84e814da0093f9af64e62510725d', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'b15a968201d8ef5ea5e764beac553cf8ca0b87d3', name: "error-description" }, this.errorDescription))))));
|
|
128
128
|
}
|
|
129
129
|
static get formAssociated() { return true; }
|
|
130
130
|
get el() { return index.getElement(this); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cv7U-U85.js');
|
|
4
4
|
var inputmaskEdcad3c1 = require('./inputmask-edcad3c1-B9Omti4z.js');
|
|
5
5
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
6
6
|
require('react');
|
|
@@ -286,6 +286,27 @@ const NvFielddate = class {
|
|
|
286
286
|
};
|
|
287
287
|
return formatMap[format] || 'dd/mm/yyyy';
|
|
288
288
|
}
|
|
289
|
+
/**
|
|
290
|
+
* Clears the current selection and resets the field to its initial state.
|
|
291
|
+
* This method can be called programmatically to reset the field.
|
|
292
|
+
*/
|
|
293
|
+
async clear() {
|
|
294
|
+
// Reset internal state
|
|
295
|
+
this.singleValue = '';
|
|
296
|
+
this.value = '';
|
|
297
|
+
// Reset the input element value
|
|
298
|
+
if (this.inputElement) {
|
|
299
|
+
this.inputElement.value = '';
|
|
300
|
+
// Remove the input mask and reinitialize if needed
|
|
301
|
+
if (this.inputElement.inputmask) {
|
|
302
|
+
this.inputElement.inputmask.remove();
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
// Emit events to notify about the change
|
|
306
|
+
this.valueChanged.emit('');
|
|
307
|
+
// Close the popover if open
|
|
308
|
+
this.open = false;
|
|
309
|
+
}
|
|
289
310
|
//#endregion METHODS
|
|
290
311
|
/****************************************************************************/
|
|
291
312
|
//#region LIFECYCLE
|
|
@@ -351,12 +372,12 @@ const NvFielddate = class {
|
|
|
351
372
|
/****************************************************************************/
|
|
352
373
|
//#region RENDER
|
|
353
374
|
render() {
|
|
354
|
-
return (index.h(index.Host, { key: '
|
|
355
|
-
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '
|
|
375
|
+
return (index.h(index.Host, { key: '45af13d8290479c8ec171c0702d9d695c5047610' }, ((this.label && this.label.length > 0) ||
|
|
376
|
+
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'd30403c879f8ca0449d8d25d22bb401ece876758', htmlFor: this.inputId }, index.h("slot", { key: 'aec155a914cff6b7ea8170dbd1f0d9ee4f35172e', name: "label" }, this.label))), index.h("nv-popover", { key: '522969535f2b8340f1a9b425c4ea6291fc65cb7e', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: 'eb1d5ab314fe654b3642afb22d9e3fbc340de969', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '6c28354e914075c36db9bee659d140669a745cab', name: "before-input" }), index.h("div", { key: '68d3aa4a8afcec4042a8930678cea7046f3e31d7', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'ed7ada6913a6735af622369236b5f521f2e96aad', name: "leading-input" }), index.h("input", { key: '49607b25253233665544e8e85db3814734280fe0', id: this.inputId, ref: this.setInputRef, placeholder: this.currentPlaceholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.singleValue, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, "data-scope": "date" }), this.error && (index.h("nv-icon", { key: '35d06926d78f7c653fbf0424b59802fb4489004a', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '17ca631dca201fb412c921619223c1abc8777d2b', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'e08d735115cde3d22a657b986f4a7a5a0347d1af', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
|
|
356
377
|
,
|
|
357
|
-
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: '
|
|
358
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
359
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
378
|
+
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: '75cf593c7b9f2078f055522d6e43440dbe0cc522', name: "after-input" })), index.h("div", { key: '0df8cd2360a17f5cc786e6b29c67ded308c18104', slot: "content" }, index.h("nv-calendar", { key: '045a02370ef9dfe31ae3d0b2f702fafb25c7da8f', 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, onValueChanged: this.handleCalendarValueChanged }))), ((this.description && this.description.length > 0) ||
|
|
379
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'ecedbfe16857d9976349f3f3875be13f9ffc4b53', class: "description" }, index.h("slot", { key: 'e848d9e03e169c9ac57ce2fb7cdb00466f658c61', name: "description" }, this.description))), (this.errorDescription ||
|
|
380
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '028b4d496ba3ee5eefa0107da8a62c771709a3ed', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: 'd3b79a0ae56ec7eb444c28985b1ffcfd8a4e36a1' })));
|
|
360
381
|
}
|
|
361
382
|
get el() { return index.getElement(this); }
|
|
362
383
|
static get watchers() { return {
|
package/dist/cjs/{nv-fielddaterange.entry-CWwH83ug.js → nv-fielddaterange.entry-C82h1WUR.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cv7U-U85.js');
|
|
4
4
|
var inputmaskEdcad3c1 = require('./inputmask-edcad3c1-B9Omti4z.js');
|
|
5
5
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
6
6
|
require('react');
|
|
@@ -258,6 +258,34 @@ const NvFielddaterange = class {
|
|
|
258
258
|
*/
|
|
259
259
|
updateCalendarValue() {
|
|
260
260
|
}
|
|
261
|
+
/**
|
|
262
|
+
* Clears the current selection and resets the date range field to its initial state.
|
|
263
|
+
* This method can be called programmatically to reset the field.
|
|
264
|
+
*/
|
|
265
|
+
async clear() {
|
|
266
|
+
// Reset internal state
|
|
267
|
+
this.startValue = '';
|
|
268
|
+
this.endValue = '';
|
|
269
|
+
this.value = '';
|
|
270
|
+
// Reset both input elements
|
|
271
|
+
const inputs = this.el.querySelectorAll('.input-wrapper input');
|
|
272
|
+
inputs.forEach((input) => {
|
|
273
|
+
input.value = '';
|
|
274
|
+
// Remove input mask if exists
|
|
275
|
+
if (input.inputmask) {
|
|
276
|
+
input.inputmask.remove();
|
|
277
|
+
}
|
|
278
|
+
});
|
|
279
|
+
// Emit events to notify about the change
|
|
280
|
+
this.valueChanged.emit('');
|
|
281
|
+
this.dateRangeChange.emit({ start: '', end: '' });
|
|
282
|
+
// Close the popover if open
|
|
283
|
+
this.open = false;
|
|
284
|
+
// Clear the calendar if it exists
|
|
285
|
+
if (this.calendarElement) {
|
|
286
|
+
this.calendarElement.clear();
|
|
287
|
+
}
|
|
288
|
+
}
|
|
261
289
|
//#endregion METHODS
|
|
262
290
|
/****************************************************************************/
|
|
263
291
|
//#region LIFECYCLE
|
|
@@ -446,10 +474,10 @@ const NvFielddaterange = class {
|
|
|
446
474
|
/****************************************************************************/
|
|
447
475
|
//#region RENDER
|
|
448
476
|
render() {
|
|
449
|
-
return (index.h(index.Host, { key: '
|
|
450
|
-
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '
|
|
451
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
452
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
477
|
+
return (index.h(index.Host, { key: 'e2d5ce2c864dbc8ba478a1ce1353aa8e51e13ec1' }, ((this.label && this.label.length > 0) ||
|
|
478
|
+
this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '6e171200b763f8e7a907d305475bb7d4faa27979', htmlFor: this.startInputId }, index.h("slot", { key: '9f8b94e7491d4cd73e17f41ba290acda1fe73f3b', name: "label" }, this.label))), index.h("nv-popover", { key: '9bf5539eeceadb960c3438ddc05fe986f800d33b', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '58f7625d27c2266429ddc4f653d61efefed5bc66', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '206064a5c1be74082202849b96e46a8207377098', name: "before-input" }), index.h("div", { key: 'bd66fb676a5a749e17ede3f75c8a4404586c0c63', class: "input-container" }, index.h("slot", { key: '7c78a037f5189143ea32ca843e1c27b52d8f2d4b', name: "leading-input" }), index.h("div", { key: 'fbe89bc4502eca56e05029d65a45684484921433', class: "range-inputs" }, index.h("input", { key: '397e572e87dd7f01977008b44847469cabd06494', 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("div", { key: '378d2755919eafc9f4edd8ee451c01e49dc70cfe', class: "range-separator" }), index.h("input", { key: '2de8dcda3161667a543c04ae529a0f617f6598c6', 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: '5880e135764a7f9f87d92a4f7a84eba9f56b7d46', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '5d764360d3dbfc306962cb9e4b67d7d3c4bc09ed', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '1b09d57633f8e115cc3d92a82d35399c53be265b', 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: '7ec41f782b0343eeb427bee4d7f2ab1b549978b3', name: "after-input" })), index.h("div", { key: 'ea714333fe596af8a10c6f8a1e6c72935f8e5c91', slot: "content" }, index.h("nv-calendar", { key: 'ffaa70c5bc76c422396b233d3dc46fdeb2d06b10', ref: el => (this.calendarElement = el), dateFormat: this.dateFormat, value: this.value, 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", "data-prevent-navigation": "true" }))), ((this.description && this.description.length > 0) ||
|
|
479
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '7f4aa271c896234907d95cfe7660e1c41ab8ddf7', class: "description" }, index.h("slot", { key: 'fce93594f7af4d054f886ce3caf48cfffb6809aa', name: "description" }, this.description))), (this.errorDescription ||
|
|
480
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'f5a19b5d4c90c4319dc4eb09d1067f202ab229c9', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: '1d494e4c192b38c26e8cfe5482516382cacc13c6' })));
|
|
453
481
|
}
|
|
454
482
|
get el() { return index.getElement(this); }
|
|
455
483
|
static get watchers() { return {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cv7U-U85.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
@@ -356,9 +356,9 @@ const NvFielddropdown = class {
|
|
|
356
356
|
//#region RENDER
|
|
357
357
|
render() {
|
|
358
358
|
var _a;
|
|
359
|
-
return (index.h(index.Host, { key: '
|
|
360
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
361
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
359
|
+
return (index.h(index.Host, { key: '39025d9624475fa633e36c3ba44feed7f34f42e1', 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: '961a78a526a81e7fb0a219f1e46d6126880993db', htmlFor: this.inputId }, index.h("slot", { key: '9d6b7d6fa1cc80393f0e85819a437e8193bdf672', name: "label" }, this.label))), index.h("nv-popover", { key: '564fcf5fa2f263874b737fdf1bcc5a9aa9bc21d3', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '415ed0ee145ce9253380baed4a026afa018c59b7', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: 'ddbece3ddfa0bcd16a8587c4ee693f8c44b69356', name: "before-input" }), index.h("div", { key: '546fbc02d2051f47aea2a369ae479658c3c1d8dc', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '95bb574eeb43285f73fd731581d1426095f7538a', 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: '669c6b2e93a85789e747e3f384dfd7b940cda9a7', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (index.h("nv-icon", { key: '65f91d73115249ded5344e78f18ed7c37f8265b9', name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '05644dcc1dfdbb0aa625b49484fab299b5b58894', "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: 'd84d1936300877825adc9c61cc7d9ba773b92194', name: "after-input" })), index.h("div", { key: 'de5e6bb6f3b40fed39cf90d046e8361dcb2a4d8f', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, ((_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 ||
|
|
360
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '648b7fb9b7dade22d763f9afc468a4b48115a1a0', class: "description" }, index.h("slot", { key: 'b560fb630a56c3d42363c1b8f0fa494faefd00d6', name: "description" }, this.description))), (this.errorDescription ||
|
|
361
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'bcb614617bb1183f33d20d51304d8ff17d9c7381', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '5345cb01032f24b0527bf22d77116a77bb439969', name: "error-description" }, this.errorDescription)))));
|
|
362
362
|
}
|
|
363
363
|
static get formAssociated() { return true; }
|
|
364
364
|
get el() { return index.getElement(this); }
|
package/dist/cjs/{nv-fielddropdownitem.entry-CM5Fogll.js → nv-fielddropdownitem.entry-KuL1iVS4.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cv7U-U85.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: '486800fafd79ee133a459521e84b06c538f5585e', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, index.h("slot", { key: 'fd9c5c5aad8c585735ddbcaf0cb98ab26d89ec69' }), !this.composed && (index.h("div", { key: '145a6e02b2338f47235c3616a1af63bf5b0ea465', class: "text-wrapper" }, index.h("span", { key: 'bc013eaf7fe0d56c1d609c3fce846f25ef2cfbb3', "data-scope": "text" }, this.label))), this.selected && (index.h("nv-icon", { key: 'f7f6a4b2b27753d54eb92a77364329a29a3d6f08', 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-DodoLrhv.js → nv-fieldmultiselect.entry-CAdWlUw2.js}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cv7U-U85.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
@@ -143,6 +143,14 @@ const NvFieldmultiselect = class {
|
|
|
143
143
|
this.resetFilter();
|
|
144
144
|
}
|
|
145
145
|
};
|
|
146
|
+
/**
|
|
147
|
+
* Clear the filter text
|
|
148
|
+
*/
|
|
149
|
+
this.clearFilterText = () => {
|
|
150
|
+
this.filterText = '';
|
|
151
|
+
this.filterTextChanged.emit('');
|
|
152
|
+
this.resetFilter();
|
|
153
|
+
};
|
|
146
154
|
/**
|
|
147
155
|
* Handle input blur for options mode.
|
|
148
156
|
*/
|
|
@@ -151,9 +159,9 @@ const NvFieldmultiselect = class {
|
|
|
151
159
|
if (!this.el.contains(document.activeElement)) {
|
|
152
160
|
// Close the popover without affecting the divider
|
|
153
161
|
this.open = false;
|
|
154
|
-
//
|
|
162
|
+
// Clear filter text when focus is lost
|
|
155
163
|
if (this.filterable) {
|
|
156
|
-
this.
|
|
164
|
+
this.clearFilterText();
|
|
157
165
|
}
|
|
158
166
|
}
|
|
159
167
|
}, 150);
|
|
@@ -269,9 +277,9 @@ const NvFieldmultiselect = class {
|
|
|
269
277
|
if (!this.el.contains(document.activeElement)) {
|
|
270
278
|
// Close the popover without affecting the divider
|
|
271
279
|
this.open = false;
|
|
272
|
-
//
|
|
280
|
+
// Clear filter text when focus is lost
|
|
273
281
|
if (this.filterable) {
|
|
274
|
-
this.
|
|
282
|
+
this.clearFilterText();
|
|
275
283
|
}
|
|
276
284
|
}
|
|
277
285
|
}, 150);
|
|
@@ -302,14 +310,14 @@ const NvFieldmultiselect = class {
|
|
|
302
310
|
* @returns {any} The JSX for options mode
|
|
303
311
|
*/
|
|
304
312
|
this.renderOptionsMode = () => {
|
|
305
|
-
return (index.h(index.Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (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.value.length > 0 && (index.h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.value.length > 0, label: `${this.value.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.value.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.filterText, 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.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: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, index.h("ul", { role: "content" }, this.options.map(option => (index.h("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.value.includes(option.value), disabled: option.disabled }))), index.h("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
|
|
313
|
+
return (index.h(index.Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (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.value.length > 0 && (index.h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.value.length > 0, label: `${this.value.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.value.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.filterText, 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.placeholder))), this.error && (index.h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (index.h("nv-iconbutton", { "data-scope": "clear-filter", name: "x", size: "md", emphasis: "lower", tabindex: "-1", onClick: this.clearFilterText, "aria-label": "Clear filter text" })), 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: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, index.h("ul", { role: "content" }, this.options.map(option => (index.h("nv-fielddropdownitemcheck", { label: option.label, description: option.description, value: option.value, checked: this.value.includes(option.value), disabled: option.disabled }))), index.h("hr", { class: "multiselect-divider", style: { display: 'none' } })))), this.renderDescriptions()));
|
|
306
314
|
};
|
|
307
315
|
/**
|
|
308
316
|
* Renders the component in slots mode
|
|
309
317
|
* @returns {any} The JSX for slots mode
|
|
310
318
|
*/
|
|
311
319
|
this.renderSlotsMode = () => {
|
|
312
|
-
return (index.h(index.Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (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.value.length > 0 && (index.h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.value.length > 0, label: `${this.value.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.value.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.filterText, 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.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: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, index.h("slot", { name: "content" }))), this.renderDescriptions()));
|
|
320
|
+
return (index.h(index.Host, { "aria-label": this.label, "aria-expanded": this.open.toString() }, (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.value.length > 0 && (index.h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: this.value.length > 0, label: `${this.value.length} ${this.badgeLabel}`, "aria-label": `Clear all ${this.value.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.filterText, 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.placeholder))), this.error && (index.h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (index.h("nv-iconbutton", { name: "x", size: "md", emphasis: "lower", tabindex: "-1", onClick: this.clearFilterText, "aria-label": "Clear filter text" })), 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: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, index.h("slot", { name: "content" }))), this.renderDescriptions()));
|
|
313
321
|
};
|
|
314
322
|
}
|
|
315
323
|
//#endregion EVENTS
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cv7U-U85.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
@@ -115,9 +115,9 @@ const NvFieldnumber = class {
|
|
|
115
115
|
/****************************************************************************/
|
|
116
116
|
//#region RENDER
|
|
117
117
|
render() {
|
|
118
|
-
return (index.h(index.Host, { key: '
|
|
119
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
120
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
118
|
+
return (index.h(index.Host, { key: '0fcd74073e1c3f2c8de00c21e1ff782d4ed2fbe8' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'c4dc1dc4efd2150fb897f0602b07ab22643756e6', htmlFor: this.inputId }, index.h("slot", { key: 'a0aa360dd532e11fd0273c8ba8d5ded3adc45642', name: "label" }, this.label))), index.h("div", { key: 'c2ffeb70a8e5ffe43ec5061e035add48fd0f09a2', class: "input-wrapper" }, index.h("slot", { key: '62ef15b0961ae4af93940d3d2dd10fdb6a636d4d', name: "before-input" }), index.h("div", { key: '07be430ad207b6023ee969b7ad290d4946f4b6fe', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '69978ac5971a25cc8c0515250d741ac8a658c3bd', name: "leading-input" }), index.h("input", { key: '284f8da710438e470a26541b7cf72f89730ef3ab', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), index.h("slot", { key: 'd028cd632cff77f592429e97a81a1d45aeec621d', name: "trailing-input" }), this.error && (index.h("nv-icon", { key: '7de629b71971559c647ba4ad4885815124bb63b3', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '135e609c2e568174db3503633f389c70a2fceaba', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: '17a952157f55ff65911d852a4274de5db4241508', class: "stepper" }, index.h("nv-iconbutton", { key: '33d0412ea6ed883d92b64363b404628d610e2339', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), index.h("nv-iconbutton", { key: '68bf536a5fe5bb0b3c2c3bd5508324c050cb8764', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), index.h("slot", { key: '3922a559b4ca954bee9caea379c940e7b132f65f', name: "after-input" })), (this.description ||
|
|
119
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '8844bf48e0251717549d4e0079370fe2f590c616', class: "description" }, index.h("slot", { key: 'f35c77ffa2f01a66d72ef75a65c5c634b14bbdbc', name: "description" }, this.description))), (this.errorDescription ||
|
|
120
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'ce407c77dd30a235c7691727480c911ad6128392', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '7ffb85e03e5a9a949f022398537c74a812b8a12f', name: "error-description" }, this.errorDescription)))));
|
|
121
121
|
}
|
|
122
122
|
static get formAssociated() { return true; }
|
|
123
123
|
get el() { return index.getElement(this); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cv7U-U85.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
@@ -106,9 +106,9 @@ const NvFieldpassword = class {
|
|
|
106
106
|
/****************************************************************************/
|
|
107
107
|
//#region RENDER
|
|
108
108
|
render() {
|
|
109
|
-
return (index.h(index.Host, { key: '
|
|
110
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
111
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
109
|
+
return (index.h(index.Host, { key: 'b8d142f5a35087f977437af4d2094783e455d9a0' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'f26d2c14ee03d1ef80fe263a1849c0da03a39a8c', htmlFor: this.inputId }, index.h("slot", { key: '13dfa9e681e1b5a7244e7debc7d1c1af36bedd37', name: "label" }, this.label))), index.h("div", { key: '5a01c9cc4573543e0d6633f9b8fadfa1ad6b066a', class: "input-wrapper" }, index.h("slot", { key: '2ff066ad5da2d3fe0885ccc1a0c97f9817ff4bbe', name: "before-input" }), index.h("div", { key: '429535a2b55ea4af5374067948f5be1d16898694', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '00d8fa3cd0e8af41f1b9c46cefc256a29187db9d', name: "leading-input" }), index.h("input", { key: '7aa5db4e17d62e3a9c10e8b5e2dabe224033b2da', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (index.h("nv-icon", { key: '0c919def4c580387d87a2f500a663f4dba5874cb', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (index.h("nv-iconbutton", { key: '2b020de565c3311431c83c68a773731055c1c6c5', name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() }))), index.h("slot", { key: '938de4d9c513e3aef3de1e9a108e69558843b466', name: "after-input" })), (this.description ||
|
|
110
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '6150e4be7c79bf10a1a2db3b14334c4fd9d2396c', class: "description" }, index.h("slot", { key: 'de557936e4ed9e0798cbbb95f832fa6a831d63a9', name: "description" }, this.description))), (this.errorDescription ||
|
|
111
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '74e43aa5f463f8156d44d261d5641c0aafccc5fc', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '4956c95a870964a712524fb30d26e9fd500edef8', name: "error-description" }, this.errorDescription)))));
|
|
112
112
|
}
|
|
113
113
|
static get formAssociated() { return true; }
|
|
114
114
|
get el() { return index.getElement(this); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cv7U-U85.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
5
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
6
6
|
require('react');
|
|
@@ -87,9 +87,9 @@ const NvFieldradio = class {
|
|
|
87
87
|
/****************************************************************************/
|
|
88
88
|
//#region RENDER
|
|
89
89
|
render() {
|
|
90
|
-
return (index.h(index.Host, { key: '
|
|
91
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
92
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
90
|
+
return (index.h(index.Host, { key: '5721fd4ffd6d8b1392e65d0b8eaea4dea241be63', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("input", { key: 'c54d8952edb57e34016a85ba2b6b9c7fc2a20a37', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), index.h("div", { key: 'e80c6c12fbf461776822185109e05aea5a6c954b', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '0f89b274c7ee7ea7d2e3116a004575176d044b5b', htmlFor: this.inputId }, index.h("slot", { key: '04b04fbc8ad5a199def48e728c74f13e7230414d', name: "label" }, this.label))), (this.description ||
|
|
91
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'e5c5048c50d0089393a29f12eb09f0ae26aedcfc', class: "description" }, index.h("slot", { key: '6902044f273d508a79a66a3f185fc4a9ac48e94f', name: "description" }, this.description))), (this.errorDescription ||
|
|
92
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '8d388b64deccd2f398485dfa0b83d70b8c50ae47', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'c5237272b97c754d2745eb62a85519f2c14dfb27', name: "error-description" }, this.errorDescription))))));
|
|
93
93
|
}
|
|
94
94
|
static get formAssociated() { return true; }
|
|
95
95
|
get el() { return index.getElement(this); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cv7U-U85.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
@@ -347,13 +347,13 @@ const NvFieldselect = class {
|
|
|
347
347
|
* @returns {HTMLStencilElement} The HTML element to render.
|
|
348
348
|
*/
|
|
349
349
|
render() {
|
|
350
|
-
return (index.h(index.Host, { key: '
|
|
350
|
+
return (index.h(index.Host, { key: 'ff869c177289342a39ae292a530359af940a5669' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '10815f70059de9b1774ccc26b69d441d250e1833', htmlFor: this.inputId }, index.h("slot", { key: 'afe78cd3671151060fd1e2a37b77c164767908fa', name: "label" }, this.label))), index.h("div", { key: '064d8f512bc5f11831096d3a092afb00dcfeb1bc', class: "select-wrapper" }, index.h("slot", { key: 'c12d375bc5a558d25f1eb34343e2ad5fce784558', name: "before-input" }), index.h("div", { key: 'ffb39cfc0444edc49a4e2b6318990085009d7598', class: "select-container", onClick: this.handleSelectContainerClick }, index.h("slot", { key: 'd5fccac0e92fe0553b8478a6f5dc9be4591e8c23', name: "leading-input" }), this.internalReadonly && (index.h("input", { key: '94dc05d08de8120c78fa140df5eb3adc09ce97da', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
|
|
351
351
|
? `${this.inputId}-error`
|
|
352
|
-
: `${this.inputId}-description` })), index.h("select", { key: '
|
|
352
|
+
: `${this.inputId}-description` })), index.h("select", { key: '85ffba58429aaa393cc9178e0866a61f85d92103', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
|
|
353
353
|
? `${this.inputId}-error`
|
|
354
|
-
: `${this.inputId}-description` }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (index.h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (index.h("slot", null))), index.h("div", { key: '
|
|
355
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
356
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
354
|
+
: `${this.inputId}-description` }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (index.h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (index.h("slot", null))), index.h("div", { key: '694b0306ddaf671faea9dd863bb7f2917b567ffb', class: "select-icons" }, this.error && (index.h("nv-icon", { key: '4f86b0916dcbfefb24af5e5e2c0ca009ece6193b', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'f99ba37d4a70b7c352b4abb0be0b5eb85b4cc947', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (index.h("nv-iconbutton", { key: 'b152a3b110b0f780b29adcf1efb4aadf98cf81be', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), index.h("slot", { key: '63c6076165bae5d36732179c4a761d5b381076b5', name: "after-input" })), (this.description ||
|
|
355
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'dd3e41b62290c580e050eb5a4742aabc7395cbda', class: "description", id: `${this.inputId}-description` }, index.h("slot", { key: '87bedab511a8b3d07d6616e4937342b6d272c5f3', name: "description" }, this.description))), (this.errorDescription ||
|
|
356
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'd4cf69f5f2446fbbf8ed36910d89c3aa7ac2c826', class: "error-description", id: `${this.inputId}-error` }, index.h("slot", { key: '2fc8b58658bd406af834dcad378b3b00aca40b22', name: "error-description" }, this.errorDescription)))));
|
|
357
357
|
}
|
|
358
358
|
static get formAssociated() { return true; }
|
|
359
359
|
get el() { return index.getElement(this); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cv7U-U85.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
@@ -684,11 +684,11 @@ const NvFieldslider = class {
|
|
|
684
684
|
/****************************************************************************/
|
|
685
685
|
//#region RENDER
|
|
686
686
|
render() {
|
|
687
|
-
return (index.h(index.Host, { key: '
|
|
687
|
+
return (index.h(index.Host, { key: '688357b41179bb99a662b8ea22f2beb7454b0d8c' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '7628e9ac0f304aa792f7c68f3e0b9b96d84583e0', htmlFor: this.startInputId }, index.h("slot", { key: 'd876dc0602df8badadcfdf435d68356d382c8b25', name: "label" }, this.label))), index.h("div", { key: '4aedd7863c3d06e4ad7dec800b14f858568bcb79', class: "slider-container" }, this.range ? (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, index.h("div", { key: '74d455d904614092ed51daf34f73425571b7ca24', class: "track-container" }, index.h("div", { key: 'a53a1e0f1770006fece64a87ca03a511d0e4dd9d', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (index.h(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (index.h(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, step: this.step, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), index.h(TickMarks, { key: 'aafdd02a87071f214d8710d6a0678ee01668609d', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
|
|
688
688
|
this.description ||
|
|
689
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
689
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '10eb3eb2f7a903af08419df8476c11e27e9e575e', class: "description" }, this.success && (index.h("nv-icon", { key: 'ee312f8f0563e6dc920e9cbf886784df8c57e719', name: "circle-check", class: "validation", size: "md" })), index.h("slot", { key: '4ee31b6914ebae20404acd582c27b38b5ad64700', name: "description" }, this.description))), (this.error ||
|
|
690
690
|
this.errorDescription ||
|
|
691
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
691
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'e37e44dea94b691cbac98d16fb74c5c5cb280c5e', class: "error-description", hidden: !this.error }, this.error && (index.h("nv-icon", { key: 'c1b403a4848fdcf0e9f51f37ec7454224562ed5c', name: "alert-circle", class: "validation", size: "md" })), index.h("slot", { key: '87db18643f9473ae30e936fc1a316de95f06c107', name: "error-description" }, this.errorDescription)))));
|
|
692
692
|
}
|
|
693
693
|
static get formAssociated() { return true; }
|
|
694
694
|
get el() { return index.getElement(this); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cv7U-U85.js');
|
|
4
4
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
5
|
require('react');
|
|
6
6
|
|
|
@@ -111,9 +111,9 @@ const NvFieldtext = class {
|
|
|
111
111
|
/****************************************************************************/
|
|
112
112
|
//#region RENDER
|
|
113
113
|
render() {
|
|
114
|
-
return (index.h(index.Host, { key: '
|
|
115
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
116
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
114
|
+
return (index.h(index.Host, { key: '35382ab52aa48116fbedc7683aff4729f06f5969' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '6f849db1b7603fc4de4fb23075fd7daa72438dd2', htmlFor: this.inputId }, index.h("slot", { key: '24bc67fe3a8de24a8601a2cf3c5afd2532e17c4a', name: "label" }, this.label))), index.h("div", { key: '8ffd2d0f048082c71a76054842fffd22452b9ad2', class: "input-wrapper" }, index.h("slot", { key: '478020c16e29399dcc6566651f88acc8d88ef36d', name: "before-input" }), index.h("div", { key: '1aa0bac3947bdff209268619202ccc38da691761', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '369b5f0a4c4d1d16217ad5de9221273ece41e1f0', name: "leading-input" }), index.h("input", { key: '91446fe15f48f45693f56b3fd21926b8114c1dca', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), index.h("slot", { key: '505a9ed004c4492f8daaef9a92bcaf344e2a10fb', name: "trailing-input" }), this.error && (index.h("nv-icon", { key: 'c1e9ecd4f901862391daa6c9f5c75d3c1b81810f', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '15a452bdbbb386a51e4fe51370bd09521cc6f47f', name: "circle-check", class: "validation", size: "md" }))), index.h("slot", { key: '7e7e3969dd6f3d1b80eab00ac966f7ba9f13895c', name: "after-input" })), (this.description ||
|
|
115
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'b4ca95846a8fdf68e95d602968506bf009f9334f', class: "description" }, index.h("slot", { key: 'fce329e819b837318b2d9bf9e16a8ef886aa940a', name: "description" }, this.description))), (this.errorDescription ||
|
|
116
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'c3800ac457b5f0f87a3bdf9e9e37a36f5905786c', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'f77d02598ba261bf2b48b16ecfa3fc15fe221599', name: "error-description" }, this.errorDescription)))));
|
|
117
117
|
}
|
|
118
118
|
static get formAssociated() { return true; }
|
|
119
119
|
get el() { return index.getElement(this); }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cv7U-U85.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
5
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
6
6
|
require('react');
|
|
@@ -181,9 +181,9 @@ const NvFieldtextarea = class {
|
|
|
181
181
|
/****************************************************************************/
|
|
182
182
|
//#region RENDER
|
|
183
183
|
render() {
|
|
184
|
-
return (index.h(index.Host, { key: '
|
|
185
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
186
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
184
|
+
return (index.h(index.Host, { key: '2b054e4460ac1532cb2006feaa3930abc8e21505' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '5058a7c4a77a37336bcc58fd6b727f1f9564d7b2', htmlFor: this.inputId }, index.h("slot", { key: '0c5abb11d0c2377b702ae1614134e28e53a6e1e2', name: "label" }, this.label))), index.h("div", { key: 'e6d9981eaab913b3cf04fd99e0fbd07830fbebff', class: "textarea-wrapper" }, index.h("div", { key: '23392da0e927d2eb5720fa98499afd2fcb33d840', class: "textarea-container", onClick: this.handleTextareaContainerClick }, index.h("textarea", { key: '9b9521f4e033002ea346e3054118a114349dd7ee', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx297c1ffe.clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
|
|
185
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '27411a39625e1f03bbe23ae52ceadb04ab0afd4e', class: "description" }, index.h("slot", { key: '56a5e1a95376899525911e096ded708a4987711d', name: "description" }, this.description))), (this.errorDescription ||
|
|
186
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '2336848d28c0d67c95607da5bcab3348c4c15e0a', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'a200628a9ed75402395e415eab743afddf0a5d27', name: "error-description" }, this.errorDescription)))));
|
|
187
187
|
}
|
|
188
188
|
static get formAssociated() { return true; }
|
|
189
189
|
get el() { return index.getElement(this); }
|