@nova-design-system/nova-react 3.0.0-beta.47 → 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
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-Cn-oNJnW.js');
|
|
4
|
+
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
|
+
require('react');
|
|
6
|
+
|
|
7
|
+
const nvFieldnumberCss = "nv-fieldnumber {\n --nv-field-border-default: var(--components-form-field-border-default);\n --nv-field-border-hover: var(--components-form-field-border-hover);\n --nv-field-border-focus: var(--components-form-field-border-focus);\n --nv-field-border-disabled: var(--components-form-field-border-default);\n --nv-field-border-readonly: var(--components-form-field-border-default);\n --nv-field-focus-box-shadow: var(--color-focus-brand);\n --nv-field-background: var(--components-form-field-background-default);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--form-gap-y);\n box-sizing: border-box;\n max-width: 480px;\n}\nnv-fieldnumber[fluid]:not([fluid=false]) {\n max-width: unset;\n}\nnv-fieldnumber[readonly]:not([readonly=false]) {\n --nv-field-border-default: var(--components-form-field-border-readonly);\n --nv-field-border-hover: var(--nv-field-border-default);\n --nv-field-border-focus: var(--components-form-field-border-focus);\n --nv-field-border-disabled: var(--nv-field-border-default);\n --nv-field-border-readonly: var(--nv-field-border-default);\n --nv-field-background: var(--components-form-field-background-readonly);\n}\nnv-fieldnumber[error]:not([error=false]) {\n --nv-field-border-default: var(--components-form-field-border-error);\n --nv-field-border-hover: var(--nv-field-border-default);\n --nv-field-border-focus: var(--nv-field-border-default);\n --nv-field-border-disabled: var(--nv-field-border-default);\n --nv-field-border-readonly: var(--nv-field-border-default);\n --nv-field-focus-box-shadow: var(--color-focus-destructive);\n}\nnv-fieldnumber[success]:not([success=false]) {\n --nv-field-border-default: var(--components-form-field-border-success);\n --nv-field-border-hover: var(--nv-field-border-default);\n --nv-field-border-focus: var(--nv-field-border-default);\n --nv-field-border-disabled: var(--nv-field-border-default);\n --nv-field-border-readonly: var(--nv-field-border-default);\n --nv-field-focus-box-shadow: var(--color-focus-success);\n}\nnv-fieldnumber[required]:not([required=false]) label::after {\n content: \"*\";\n color: var(--components-form-text-required);\n font-weight: 700;\n}\nnv-fieldnumber label {\n display: flex;\n align-items: center;\n gap: var(--form-label-gap);\n align-self: stretch;\n color: var(--components-form-text-label-default);\n font-family: \"TT Norms Pro\", sans-serif;\n font-size: var(--form-label-font-size);\n font-style: normal;\n font-weight: 500;\n line-height: var(--form-label-line-height);\n}\nnv-fieldnumber .input-wrapper {\n display: flex;\n flex-wrap: wrap;\n gap: var(--form-gap-x);\n align-items: stretch;\n align-self: stretch;\n}\nnv-fieldnumber .input-wrapper .input-container {\n display: flex;\n flex-grow: 1;\n justify-content: center;\n align-items: center;\n align-self: stretch;\n border-radius: var(--form-field-radius);\n border-width: 1px;\n border-style: solid;\n border-color: var(--nv-field-border-default);\n opacity: var(--components-form-opacity-default, 1);\n background: var(--nv-field-background);\n transition: all 150ms ease-out;\n container-type: inline-size;\n container-name: field-number-input-container;\n overflow: hidden;\n position: relative;\n}\nnv-fieldnumber .input-wrapper .input-container:hover {\n border-color: var(--nv-field-border-hover);\n}\nnv-fieldnumber .input-wrapper .input-container:focus-within, nv-fieldnumber .input-wrapper .input-container:focus-within:hover, nv-fieldnumber .input-wrapper .input-container:focus, nv-fieldnumber .input-wrapper .input-container:focus:hover {\n border-color: var(--nv-field-border-focus);\n box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:read-only) {\n opacity: 0.5;\n background-color: var(--components-form-field-background-readonly);\n border-color: var(--nv-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:disabled) {\n opacity: 0.5;\n background-color: var(--components-form-field-background-disabled);\n border-color: var(--nv-field-border-disabled);\n}\nnv-fieldnumber .input-wrapper .input-container input {\n display: flex;\n align-items: center;\n flex: 1 0 0;\n overflow: hidden;\n background-color: transparent;\n color: var(--components-form-field-content-text);\n padding: var(--form-field-padding-y) var(--form-field-padding-x);\n font-size: var(--form-field-font-size);\n font-style: normal;\n font-weight: 500;\n line-height: var(--form-field-line-height);\n width: 100%;\n width: 100%;\n appearance: textfield;\n}\nnv-fieldnumber .input-wrapper .input-container input:focus {\n outline: none;\n}\nnv-fieldnumber .input-wrapper .input-container input::placeholder {\n overflow: hidden;\n color: var(--components-form-field-content-placeholder);\n text-overflow: ellipsis;\n font-family: \"TT Norms Pro\", sans-serif;\n font-size: var(--form-field-font-size);\n font-style: normal;\n font-weight: 400;\n line-height: var(--form-field-line-height);\n}\nnv-fieldnumber .input-wrapper .input-container input::-webkit-inner-spin-button, nv-fieldnumber .input-wrapper .input-container input::-webkit-outer-spin-button {\n appearance: none;\n margin: 0;\n}\nnv-fieldnumber .input-wrapper .input-container nv-icon.validation {\n color: var(--nv-field-border-default);\n margin-right: var(--form-field-gap);\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton {\n border: 0px;\n border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton:focus-visible {\n border-radius: var(--button-md-border-radius);\n outline-offset: -3px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper {\n display: flex;\n border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton {\n border: 0px;\n border-radius: 0px;\n border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton:focus-visible {\n border-radius: var(--button-md-border-radius);\n outline-offset: -3px;\n}\n@container field-number-input-container (width < 150px) {\n nv-fieldnumber .input-wrapper .input-container .stepper-spacer {\n display: none;\n }\n nv-fieldnumber .input-wrapper .input-container .stepper {\n display: none;\n }\n}\nnv-fieldnumber .description {\n align-self: stretch;\n color: var(--components-form-text-description-default);\n font-family: \"TT Norms Pro\", sans-serif;\n font-size: var(--form-description-font-size);\n font-style: normal;\n line-height: var(--form-description-line-height);\n}\nnv-fieldnumber .error-description {\n align-self: stretch;\n color: var(--components-form-text-description-default);\n font-family: \"TT Norms Pro\", sans-serif;\n font-size: var(--form-description-font-size);\n font-style: normal;\n line-height: var(--form-description-line-height);\n color: var(--components-form-text-description-error);\n}";
|
|
8
|
+
const NvFieldnumberStyle0 = nvFieldnumberCss;
|
|
9
|
+
|
|
10
|
+
const NvFieldnumber = class {
|
|
11
|
+
constructor(hostRef) {
|
|
12
|
+
index.registerInstance(this, hostRef);
|
|
13
|
+
this.valueChanged = index.createEvent(this, "valueChanged");
|
|
14
|
+
//#endregion DEPRECATED
|
|
15
|
+
/****************************************************************************/
|
|
16
|
+
//#region PROPERTIES
|
|
17
|
+
/**
|
|
18
|
+
* Sets the ID for the input element and the for attribute of the associated
|
|
19
|
+
* label. If no ID is provided, a random one will be automatically generated
|
|
20
|
+
* to ensure unique identification, facilitating proper label association and
|
|
21
|
+
* accessibility.
|
|
22
|
+
*/
|
|
23
|
+
this.inputId = v4A79185f4.v4();
|
|
24
|
+
/**
|
|
25
|
+
* The disabled prop lets you turn off the input field so that users can’t
|
|
26
|
+
* type in it. When disabled, the field is grayed out and won’t respond to#
|
|
27
|
+
* clicks or touches.
|
|
28
|
+
*/
|
|
29
|
+
this.disabled = false;
|
|
30
|
+
/**
|
|
31
|
+
* Display the input field’s content without allowing users to change it.
|
|
32
|
+
* Users can still click on it, select, and copy the text, but they won’t be
|
|
33
|
+
* able to type or delete anything.
|
|
34
|
+
*/
|
|
35
|
+
this.readonly = false;
|
|
36
|
+
/**
|
|
37
|
+
* Marks the input field as required, ensuring that the user must fill it out
|
|
38
|
+
* before submitting the form.
|
|
39
|
+
*/
|
|
40
|
+
this.required = false;
|
|
41
|
+
/**
|
|
42
|
+
* Alters the input field’s appearance to indicate an error, helping users
|
|
43
|
+
* identify fields that need correction.
|
|
44
|
+
* @validator error
|
|
45
|
+
*/
|
|
46
|
+
this.error = false;
|
|
47
|
+
/**
|
|
48
|
+
* Changes the input field’s appearance to indicate successful input or
|
|
49
|
+
* validation.
|
|
50
|
+
*/
|
|
51
|
+
this.success = false;
|
|
52
|
+
/**
|
|
53
|
+
* Define the increment value for the input field. It determines how much the
|
|
54
|
+
* value will increase or decrease when the user clicks the stepper buttons.
|
|
55
|
+
*/
|
|
56
|
+
this.step = 1;
|
|
57
|
+
/**
|
|
58
|
+
* Applies focus to the input field as soon as the component is mounted. This
|
|
59
|
+
* is equivalent to setting the native autofocus attribute on an <input>
|
|
60
|
+
* element.
|
|
61
|
+
*/
|
|
62
|
+
this.autofocus = false;
|
|
63
|
+
/**
|
|
64
|
+
* Allows the field to stretch and fill the entire width of its container.
|
|
65
|
+
*/
|
|
66
|
+
this.fluid = false;
|
|
67
|
+
//#endregion WATCHERS
|
|
68
|
+
/****************************************************************************/
|
|
69
|
+
//#region METHODS
|
|
70
|
+
this.handleInput = (event) => {
|
|
71
|
+
const input = event.target;
|
|
72
|
+
this.value = Number(input.value);
|
|
73
|
+
};
|
|
74
|
+
this.handleInputContainerClick = () => {
|
|
75
|
+
this.inputElement.focus();
|
|
76
|
+
};
|
|
77
|
+
this.handlePlus = () => {
|
|
78
|
+
this.inputElement.stepUp();
|
|
79
|
+
this.value = Number(this.inputElement.value);
|
|
80
|
+
};
|
|
81
|
+
this.handleMinus = () => {
|
|
82
|
+
this.inputElement.stepDown();
|
|
83
|
+
this.value = Number(this.inputElement.value);
|
|
84
|
+
};
|
|
85
|
+
// prevents text selection when clicking the buttons multiple times
|
|
86
|
+
this.preventSelection = (event) => {
|
|
87
|
+
event.preventDefault();
|
|
88
|
+
};
|
|
89
|
+
this.isMinValueReached = () => {
|
|
90
|
+
return this.min !== undefined && this.value <= this.min;
|
|
91
|
+
};
|
|
92
|
+
this.isMaxValueReached = () => {
|
|
93
|
+
return this.max !== undefined && this.value >= this.max;
|
|
94
|
+
};
|
|
95
|
+
}
|
|
96
|
+
//#endregion EVENTS
|
|
97
|
+
/****************************************************************************/
|
|
98
|
+
//#region WATCHERS
|
|
99
|
+
watchValueHandler(newValue) {
|
|
100
|
+
this.valueChanged.emit(newValue);
|
|
101
|
+
}
|
|
102
|
+
//#endregion METHODS
|
|
103
|
+
/****************************************************************************/
|
|
104
|
+
//#region LIFECYCLE
|
|
105
|
+
componentWillRender() {
|
|
106
|
+
if (this.message) {
|
|
107
|
+
this.description = this.message;
|
|
108
|
+
}
|
|
109
|
+
if (this.validation) {
|
|
110
|
+
this.errorDescription = this.validation;
|
|
111
|
+
this.error = true;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
//#endregion LIFECYCLE
|
|
115
|
+
/****************************************************************************/
|
|
116
|
+
//#region RENDER
|
|
117
|
+
render() {
|
|
118
|
+
return (index.h(index.Host, { key: 'ff097af3b023ea85fe549331219fd147aaf5d587' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'fbb5a460baf515c9f41068126db0dfc80f3aba64', htmlFor: this.inputId }, index.h("slot", { key: '27963c9e2f61213b1897e117a68a2cb0d56e7d0f', name: "label" }, this.label))), index.h("div", { key: 'f1f53b27aabd76cfe478ca0de182fd0d181e1c4b', class: "input-wrapper" }, index.h("slot", { key: 'f5f0fe6e8fbaa63bb961a5216eba0d0a10ca4cf7', name: "before-input" }), index.h("div", { key: '6d615f206e6b0ed3b228c75601fd7608b1aa4869', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'd4cbd09db77e7998020289b44d43be1c37c1197a', name: "leading-input" }), index.h("input", { key: 'fa8620fa422b1b96a05630da3f5bed20281b8d19', 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 }), this.error && (index.h("nv-icon", { key: '0787893a02fbebf2bec97f4285d4b396fc1a474d', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'd2d244b7a2280c3b7719927d6550a28c75743a48', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: 'ebe05dafe4b7ec67dbe59d5da612f2f5e6951e3f', class: "stepper" }, index.h("nv-iconbutton", { key: '3112ee0b6f5b3982290cd1ec006653d48d3db626', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), index.h("nv-iconbutton", { key: 'e3cdf3ca761ebd647e13f23df44c4e18879b8913', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), index.h("slot", { key: 'c6de7aaff35002e78e5a27d5f37fe06297b3693f', name: "after-input" })), (this.description ||
|
|
119
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'e2c1ea1eb866593cee0eb4218dba9665cd8a321c', class: "description" }, index.h("slot", { key: '1fd324333be676116f5d614bb2dc7448ecd7d3a1', name: "description" }, this.description))), (this.errorDescription ||
|
|
120
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'adb8565f5204849caff31758f739d732f2eb5a01', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '0f2ec09a50e98855cc3f2451c75bd6dca4a6baec', name: "error-description" }, this.errorDescription)))));
|
|
121
|
+
}
|
|
122
|
+
static get formAssociated() { return true; }
|
|
123
|
+
get el() { return index.getElement(this); }
|
|
124
|
+
static get watchers() { return {
|
|
125
|
+
"value": ["watchValueHandler"]
|
|
126
|
+
}; }
|
|
127
|
+
};
|
|
128
|
+
NvFieldnumber.style = NvFieldnumberStyle0;
|
|
129
|
+
|
|
130
|
+
exports.nv_fieldnumber = NvFieldnumber;
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-Cn-oNJnW.js');
|
|
4
|
+
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
|
+
require('react');
|
|
6
|
+
|
|
7
|
+
const nvFieldpasswordCss = "nv-fieldpassword{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldpassword[fluid]:not([fluid=false]){max-width:unset}nv-fieldpassword[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldpassword[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldpassword[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldpassword[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldpassword label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"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-fieldpassword .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldpassword .input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative}nv-fieldpassword .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldpassword .input-wrapper .input-container:focus-within,nv-fieldpassword .input-wrapper .input-container:focus-within:hover,nv-fieldpassword .input-wrapper .input-container:focus,nv-fieldpassword .input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldpassword .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldpassword .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldpassword .input-wrapper .input-container 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-fieldpassword .input-wrapper .input-container input:focus{outline:none}nv-fieldpassword .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"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-fieldpassword .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fieldpassword .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldpassword .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldpassword .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-fieldpassword .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
|
+
const NvFieldpasswordStyle0 = nvFieldpasswordCss;
|
|
9
|
+
|
|
10
|
+
const NvFieldpassword = class {
|
|
11
|
+
constructor(hostRef) {
|
|
12
|
+
index.registerInstance(this, hostRef);
|
|
13
|
+
this.valueChanged = index.createEvent(this, "valueChanged");
|
|
14
|
+
/****************************************************************************/
|
|
15
|
+
//#region PROPERTIES
|
|
16
|
+
/**
|
|
17
|
+
* Sets the ID for the input element and the for attribute of the associated
|
|
18
|
+
* label. If no ID is provided, a random one will be automatically generated
|
|
19
|
+
* to ensure unique identification, facilitating proper label association and
|
|
20
|
+
* accessibility.
|
|
21
|
+
*/
|
|
22
|
+
this.inputId = v4A79185f4.v4();
|
|
23
|
+
/**
|
|
24
|
+
* The disabled prop lets you turn off the input field so that users can’t
|
|
25
|
+
* type in it. When disabled, the field is grayed out and won’t respond to#
|
|
26
|
+
* clicks or touches.
|
|
27
|
+
*/
|
|
28
|
+
this.disabled = false;
|
|
29
|
+
/**
|
|
30
|
+
* Display the input field’s content without allowing users to change it.
|
|
31
|
+
* Users can still click on it, select, and copy the text, but they won’t be
|
|
32
|
+
* able to type or delete anything.
|
|
33
|
+
*/
|
|
34
|
+
this.readonly = false;
|
|
35
|
+
/**
|
|
36
|
+
* Marks the input field as required, ensuring that the user must fill it out
|
|
37
|
+
* before submitting the form.
|
|
38
|
+
*/
|
|
39
|
+
this.required = false;
|
|
40
|
+
/**
|
|
41
|
+
* Alters the input field’s appearance to indicate an error, helping users
|
|
42
|
+
* identify fields that need correction.
|
|
43
|
+
* @validator error
|
|
44
|
+
*/
|
|
45
|
+
this.error = false;
|
|
46
|
+
/**
|
|
47
|
+
* Changes the input field’s appearance to indicate successful input or
|
|
48
|
+
* validation.
|
|
49
|
+
*/
|
|
50
|
+
this.success = false;
|
|
51
|
+
/**
|
|
52
|
+
* Defines the type of the input.
|
|
53
|
+
* @default 'text'
|
|
54
|
+
*/
|
|
55
|
+
this.mode = 'text';
|
|
56
|
+
/**
|
|
57
|
+
* The autocomplete prop helps users fill out the input field faster by
|
|
58
|
+
* suggesting entries they’ve used before, like their email or address.
|
|
59
|
+
* You can turn it on to make forms more convenient or off to ensure users
|
|
60
|
+
* always type in fresh data.
|
|
61
|
+
*/
|
|
62
|
+
this.autocomplete = 'off';
|
|
63
|
+
/**
|
|
64
|
+
* Hide the button to show/hide the password.
|
|
65
|
+
*/
|
|
66
|
+
this.hidePasswordIcon = false;
|
|
67
|
+
/**
|
|
68
|
+
* Show/hide the password programmatically.
|
|
69
|
+
*/
|
|
70
|
+
this.showPassword = false;
|
|
71
|
+
/**
|
|
72
|
+
* Applies focus to the input field as soon as the component is mounted. This
|
|
73
|
+
* is equivalent to setting the native autofocus attribute on an <input>
|
|
74
|
+
* element.
|
|
75
|
+
*/
|
|
76
|
+
this.autofocus = false;
|
|
77
|
+
/**
|
|
78
|
+
* Allows the field to stretch and fill the entire width of its container.
|
|
79
|
+
*/
|
|
80
|
+
this.fluid = false;
|
|
81
|
+
//#endregion EVENTS
|
|
82
|
+
/****************************************************************************/
|
|
83
|
+
//#region METHODS
|
|
84
|
+
this.handleInputContainerClick = () => {
|
|
85
|
+
this.inputElement.focus();
|
|
86
|
+
};
|
|
87
|
+
this.togglePasswordVisibility = () => {
|
|
88
|
+
this.showPasswordState = !this.showPasswordState;
|
|
89
|
+
};
|
|
90
|
+
this.handleInput = (event) => {
|
|
91
|
+
const input = event.target;
|
|
92
|
+
this.value = input.value; // Update the input value without worrying about the space
|
|
93
|
+
this.valueChanged.emit(input.value);
|
|
94
|
+
};
|
|
95
|
+
}
|
|
96
|
+
handleShowPasswordChange(newValue) {
|
|
97
|
+
this.showPasswordState = newValue;
|
|
98
|
+
}
|
|
99
|
+
//#endregion METHODS
|
|
100
|
+
/****************************************************************************/
|
|
101
|
+
//#region LIFECYCLE
|
|
102
|
+
componentWillLoad() {
|
|
103
|
+
this.showPasswordState = this.showPassword;
|
|
104
|
+
}
|
|
105
|
+
//#endregion LIFECYCLE
|
|
106
|
+
/****************************************************************************/
|
|
107
|
+
//#region RENDER
|
|
108
|
+
render() {
|
|
109
|
+
return (index.h(index.Host, { key: '79c3035769b9053d53d62526b2e0d430d5f944ae' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '2341f2b9ae8c5acb8ce48e15caae8a629a1c0333', htmlFor: this.inputId }, index.h("slot", { key: 'ad2301f92adf58c460d4ca76681330b133db2f33', name: "label" }, this.label))), index.h("div", { key: 'c12f8401a41c6761686b74e725dd91911eaafbb0', class: "input-wrapper" }, index.h("slot", { key: 'badd6d65663029bc3252ef0818bb1c6220d01ddf', name: "before-input" }), index.h("div", { key: '0ffb2332657f893c00fe2ca68f4bbbd622bb31f1', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'afa1daa6fab0f2a46ab46f0c99e4e4cf10d7a1fe', name: "leading-input" }), index.h("input", { key: 'cc567c4a7fe51a24a99c7a471294d7f6086d8b2d', 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: '7087d6e35b30de786f3ded46fc74dc9987af6afa', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (index.h("nv-iconbutton", { key: '6fe5e3936ef42c79ed8a5b8a959a22ecbbe52fd6', 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: 'eab04665ad3394860ad30e366eaf18ae4aee445a', name: "after-input" })), (this.description ||
|
|
110
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '5bc5bd055301bf5fe1b801c2091cd3307c79104f', class: "description" }, index.h("slot", { key: '133ebfcb219aaa0c5fd64e4442c1125b26c623b4', name: "description" }, this.description))), (this.errorDescription ||
|
|
111
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '2a319732006d29becaa602ae16f2d8e885214931', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'e6e75fe487745820b1b8d3de1ed52df8aa9652d4', name: "error-description" }, this.errorDescription)))));
|
|
112
|
+
}
|
|
113
|
+
static get formAssociated() { return true; }
|
|
114
|
+
get el() { return index.getElement(this); }
|
|
115
|
+
static get watchers() { return {
|
|
116
|
+
"showPassword": ["handleShowPasswordChange"]
|
|
117
|
+
}; }
|
|
118
|
+
};
|
|
119
|
+
NvFieldpassword.style = NvFieldpasswordStyle0;
|
|
120
|
+
|
|
121
|
+
exports.nv_fieldpassword = NvFieldpassword;
|
|
@@ -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
|
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: '544fc138c91a08a1359ec0d30e89a9bda07eae94', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("input", { key: '479908232ade17970c3310f3fec173a86ccea67d', 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: '624094a1d3819f627bdd6f554ee07200ecd4d03f', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '8df4721447e7de7d5c1c51880eb5b5a62041910d', htmlFor: this.inputId }, index.h("slot", { key: '0e14392a7e6a87804d0975a38b6b011f519457ae', name: "label" }, this.label))), (this.description ||
|
|
91
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'ad635756eb65ebaa6e939d6e1870d196d3bafe2c', class: "description" }, index.h("slot", { key: '13f720591e43b8532dfc5367089c17dccd9c4e77', name: "description" }, this.description))), (this.errorDescription ||
|
|
92
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '597cee5e36cd63c209b60b8a533b4c6de8d5ba0e', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '49e1f0deac817a5c49738110862a7b081672510f', name: "error-description" }, this.errorDescription))))));
|
|
93
93
|
}
|
|
94
94
|
static get formAssociated() { return true; }
|
|
95
95
|
get el() { return index.getElement(this); }
|
|
@@ -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 nvFieldselectCss = "nv-fieldselect{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldselect[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldselect[display-value]:not([display-value=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldselect[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldselect[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldselect[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>.select-icons{top:var(--form-field-padding-y);right:var(--form-field-padding-x)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>select{height:100%;box-sizing:border-box}nv-fieldselect label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"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-fieldselect .select-wrapper{display:flex;flex-wrap:wrap;align-items:stretch;align-self:stretch}nv-fieldselect .select-wrapper .select-container{position:relative;display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldselect .select-wrapper .select-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldselect .select-wrapper .select-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldselect .select-wrapper .select-container:has(select:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldselect .select-wrapper .select-container>.select-icons{position:absolute;right:0;top:0;pointer-events:none}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton{border:0px;border-radius:0px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldselect .select-wrapper .select-container 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)}nv-fieldselect .select-wrapper .select-container input:focus{outline:none}nv-fieldselect .select-wrapper .select-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"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-fieldselect .select-wrapper .select-container input:read-only{opacity:0.5;background-color:var(--components-form-field-background-readonly, rgba(0, 0, 0, 0.1));border-color:var(--nv-field-border-readonly)}nv-fieldselect .select-wrapper .select-container select{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;height:var(--form-field-line-height);padding:var(--form-field-padding-y) var(--form-field-padding-x);box-sizing:content-box;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}nv-fieldselect .select-wrapper .select-container select:focus{outline:none}nv-fieldselect .select-wrapper .select-container select::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"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-fieldselect .select-wrapper .select-container select option{font-size:var(--form-field-font-size, 16px);font-style:normal;font-weight:500;line-height:var(--form-field-line-height, 24px)}nv-fieldselect .select-wrapper .select-container select.hidden{display:none}nv-fieldselect .select-wrapper .select-container nv-icon.readonly-icon{color:var(--nv-field-border-default)}nv-fieldselect .select-wrapper .select-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldselect .description{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-fieldselect .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 nvFieldselectCss = "nv-fieldselect{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldselect[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldselect[display-value]:not([display-value=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldselect[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldselect[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldselect[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>.select-icons{top:var(--form-field-padding-y);right:var(--form-field-padding-x)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>select{height:100%;box-sizing:border-box}nv-fieldselect label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"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-fieldselect .select-wrapper{display:flex;flex-wrap:wrap;align-items:stretch;align-self:stretch}nv-fieldselect .select-wrapper .select-container{position:relative;display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldselect .select-wrapper .select-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldselect .select-wrapper .select-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldselect .select-wrapper .select-container:has(select:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldselect .select-wrapper .select-container>.select-icons{position:absolute;right:0;top:0;pointer-events:none}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton{border:0px;border-radius:0px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldselect .select-wrapper .select-container 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-fieldselect .select-wrapper .select-container input:focus{outline:none}nv-fieldselect .select-wrapper .select-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"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-fieldselect .select-wrapper .select-container input:read-only{opacity:0.5;background-color:var(--components-form-field-background-readonly, rgba(0, 0, 0, 0.1));border-color:var(--nv-field-border-readonly)}nv-fieldselect .select-wrapper .select-container select{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;height:var(--form-field-line-height);padding:var(--form-field-padding-y) var(--form-field-padding-x);box-sizing:content-box;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}nv-fieldselect .select-wrapper .select-container select:focus{outline:none}nv-fieldselect .select-wrapper .select-container select::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"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-fieldselect .select-wrapper .select-container select option{font-size:var(--form-field-font-size, 16px);font-style:normal;font-weight:500;line-height:var(--form-field-line-height, 24px)}nv-fieldselect .select-wrapper .select-container select.hidden{display:none}nv-fieldselect .select-wrapper .select-container nv-icon.readonly-icon{color:var(--nv-field-border-default)}nv-fieldselect .select-wrapper .select-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldselect .description{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-fieldselect .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 NvFieldselectStyle0 = nvFieldselectCss;
|
|
9
9
|
|
|
10
10
|
const NvFieldselect = class {
|
|
@@ -80,6 +80,10 @@ const NvFieldselect = class {
|
|
|
80
80
|
* element.
|
|
81
81
|
*/
|
|
82
82
|
this.autofocus = false;
|
|
83
|
+
/**
|
|
84
|
+
* Allows the field to stretch and fill the entire width of its container.
|
|
85
|
+
*/
|
|
86
|
+
this.fluid = false;
|
|
83
87
|
//#endregion WATCHERS
|
|
84
88
|
/****************************************************************************/
|
|
85
89
|
//#region METHODS
|
|
@@ -343,13 +347,13 @@ const NvFieldselect = class {
|
|
|
343
347
|
* @returns {HTMLStencilElement} The HTML element to render.
|
|
344
348
|
*/
|
|
345
349
|
render() {
|
|
346
|
-
return (index.h(index.Host, { key: '
|
|
350
|
+
return (index.h(index.Host, { key: '06d38dd360011d4310d1c63851dc254e8ae47411' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'a0e46209c73e704d8d0f630baace2b1ce0eaed9c', htmlFor: this.inputId }, index.h("slot", { key: '6a43c979383647415044931d7a4e4d3a24f65921', name: "label" }, this.label))), index.h("div", { key: 'f2cee6021f85e64bd9d73d984e208903e3fda4c7', class: "select-wrapper" }, index.h("slot", { key: 'cae1c527e55c18f3e54d9c73390d6f17ccebce77', name: "before-input" }), index.h("div", { key: 'acb5dcbea269eb7dca558942f36b05c552924cbc', class: "select-container", onClick: this.handleSelectContainerClick }, index.h("slot", { key: 'e5c2a508a1297796f2693c76338c5b5f8e3e149e', name: "leading-input" }), this.internalReadonly && (index.h("input", { key: '28c38079050912f7d3b744de66ed48351dd890c3', 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
|
|
347
351
|
? `${this.inputId}-error`
|
|
348
|
-
: `${this.inputId}-description` })), index.h("select", { key: '
|
|
352
|
+
: `${this.inputId}-description` })), index.h("select", { key: 'c409a9e0a26797981640092eb67b949c7d8f0cff', 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
|
|
349
353
|
? `${this.inputId}-error`
|
|
350
|
-
: `${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: '
|
|
351
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
352
|
-
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: 'a2402ea8d832e5612510dce7a3f50148b4edf39f', class: "select-icons" }, this.error && (index.h("nv-icon", { key: 'e291bff25fa6f06d3b27c3aaa805b46f674e1614', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'ce98cb12347722926677d9c3fc6f02e35a9c84e4', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (index.h("nv-iconbutton", { key: 'e7fe760a5fa84ab0548ebd736a44da04908a4c07', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), index.h("slot", { key: 'd6253e2d56d4095bbe9ab12ca34ff28e06bd6b6d', name: "after-input" })), (this.description ||
|
|
355
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '703ad3ad8538ceab3c9eb03ae90c3552e1b6bf23', class: "description", id: `${this.inputId}-description` }, index.h("slot", { key: '010bbb23d2b947ed55c219ac64532f7dfd4f43cc', name: "description" }, this.description))), (this.errorDescription ||
|
|
356
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '70b696ec8f8badd4e064506eeba268755c9f2c09', class: "error-description", id: `${this.inputId}-error` }, index.h("slot", { key: '2ec5af60d2fca9a8f5baf59406a4661905aeab05', name: "error-description" }, this.errorDescription)))));
|
|
353
357
|
}
|
|
354
358
|
static get formAssociated() { return true; }
|
|
355
359
|
get el() { return index.getElement(this); }
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-Cn-oNJnW.js');
|
|
4
|
+
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
5
|
+
require('react');
|
|
6
|
+
|
|
7
|
+
const nvFieldtextCss = "nv-fieldtext{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldtext[fluid]:not([fluid=false]){max-width:unset}nv-fieldtext[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtext[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldtext[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtext[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldtext>label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"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-fieldtext>.input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtext>.input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtext>.input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtext>.input-wrapper .input-container:focus-within,nv-fieldtext>.input-wrapper .input-container:focus-within:hover,nv-fieldtext>.input-wrapper .input-container:focus,nv-fieldtext>.input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtext>.input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtext>.input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtext>.input-wrapper .input-container 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-fieldtext>.input-wrapper .input-container input:focus{outline:none}nv-fieldtext>.input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"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-fieldtext>.input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default);margin-right:var(--form-gap-x)}nv-fieldtext>.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-fieldtext>.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
|
+
const NvFieldtextStyle0 = nvFieldtextCss;
|
|
9
|
+
|
|
10
|
+
const NvFieldtext = class {
|
|
11
|
+
constructor(hostRef) {
|
|
12
|
+
index.registerInstance(this, hostRef);
|
|
13
|
+
this.valueChanged = index.createEvent(this, "valueChanged");
|
|
14
|
+
//#endregion DEPRECATED
|
|
15
|
+
/****************************************************************************/
|
|
16
|
+
//#region PROPERTIES
|
|
17
|
+
/**
|
|
18
|
+
* Sets the ID for the input element and the for attribute of the associated
|
|
19
|
+
* label. If no ID is provided, a random one will be automatically generated
|
|
20
|
+
* to ensure unique identification, facilitating proper label association and
|
|
21
|
+
* accessibility.
|
|
22
|
+
*/
|
|
23
|
+
this.inputId = v4A79185f4.v4();
|
|
24
|
+
/**
|
|
25
|
+
* The type prop lets you specify what kind of information the input field
|
|
26
|
+
* should accept. Choose 'text' for general words or sentences, 'tel' for
|
|
27
|
+
* phone numbers, or 'email' for email addresses. This makes sure users get
|
|
28
|
+
* the right keyboard and validation for what they need to enter.
|
|
29
|
+
*/
|
|
30
|
+
this.type = 'text';
|
|
31
|
+
/**
|
|
32
|
+
* The disabled prop lets you turn off the input field so that users can’t
|
|
33
|
+
* type in it. When disabled, the field is grayed out and won’t respond to
|
|
34
|
+
* clicks or touches.
|
|
35
|
+
*/
|
|
36
|
+
this.disabled = false;
|
|
37
|
+
/**
|
|
38
|
+
* Display the input field’s content without allowing users to change it.
|
|
39
|
+
* Users can still click on it, select, and copy the text, but they won’t be
|
|
40
|
+
* able to type or delete anything.
|
|
41
|
+
*/
|
|
42
|
+
this.readonly = false;
|
|
43
|
+
/**
|
|
44
|
+
* Marks the input field as required, ensuring that the user must fill it out
|
|
45
|
+
* before submitting the form.
|
|
46
|
+
*/
|
|
47
|
+
this.required = false;
|
|
48
|
+
/**
|
|
49
|
+
* Alters the input field’s appearance to indicate an error, helping users
|
|
50
|
+
* identify fields that need correction.
|
|
51
|
+
* @validator error
|
|
52
|
+
*/
|
|
53
|
+
this.error = false;
|
|
54
|
+
/**
|
|
55
|
+
* Changes the input field’s appearance to indicate successful input or
|
|
56
|
+
* validation.
|
|
57
|
+
*/
|
|
58
|
+
this.success = false;
|
|
59
|
+
/**
|
|
60
|
+
* When used with the email input type, this prop enables the field to accept
|
|
61
|
+
* multiple email addresses. Users can enter several addresses, separating
|
|
62
|
+
* each one with a comma, allowing the form to handle multiple recipients.
|
|
63
|
+
*/
|
|
64
|
+
this.multiple = false;
|
|
65
|
+
/**
|
|
66
|
+
* Applies focus to the input field as soon as the component is mounted. This
|
|
67
|
+
* is equivalent to setting the native autofocus attribute on an <input>
|
|
68
|
+
* element.
|
|
69
|
+
*/
|
|
70
|
+
this.autofocus = false;
|
|
71
|
+
/**
|
|
72
|
+
* Allows the field to stretch and fill the entire width of its container.
|
|
73
|
+
*/
|
|
74
|
+
this.fluid = false;
|
|
75
|
+
//#endregion EVENTS
|
|
76
|
+
/****************************************************************************/
|
|
77
|
+
//#region METHODS
|
|
78
|
+
/**
|
|
79
|
+
* Handles the input event on the input element.
|
|
80
|
+
* Emits the inputChanged event with the new value.
|
|
81
|
+
* @param {Event} event - Event object of the input event.
|
|
82
|
+
*/
|
|
83
|
+
this.handleInput = (event) => {
|
|
84
|
+
const input = event.target;
|
|
85
|
+
this.value = input.value;
|
|
86
|
+
this.valueChanged.emit(input.value);
|
|
87
|
+
};
|
|
88
|
+
/**
|
|
89
|
+
* Handles focus when the input container is clicked.
|
|
90
|
+
*/
|
|
91
|
+
this.handleInputContainerClick = () => {
|
|
92
|
+
this.inputElement.focus();
|
|
93
|
+
};
|
|
94
|
+
}
|
|
95
|
+
//#endregion METHODS
|
|
96
|
+
/****************************************************************************/
|
|
97
|
+
//#region LIFECYCLE
|
|
98
|
+
componentWillRender() {
|
|
99
|
+
if (this.textInputType) {
|
|
100
|
+
this.type = this.textInputType;
|
|
101
|
+
}
|
|
102
|
+
if (this.message) {
|
|
103
|
+
this.description = this.message;
|
|
104
|
+
}
|
|
105
|
+
if (this.validation) {
|
|
106
|
+
this.errorDescription = this.validation;
|
|
107
|
+
this.error = true;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
//#endregion LIFECYCLE
|
|
111
|
+
/****************************************************************************/
|
|
112
|
+
//#region RENDER
|
|
113
|
+
render() {
|
|
114
|
+
return (index.h(index.Host, { key: '665db2bee3d93ad7a21f641bc93b0c9d31bf9caf' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '96d2e16c149fdd538f56710ec8bae7a39e89de25', htmlFor: this.inputId }, index.h("slot", { key: '67b7b1d0419586aedf4fee36535b8f6cd1547c6a', name: "label" }, this.label))), index.h("div", { key: 'fe6fd071352f58280a472238578861869427c44b', class: "input-wrapper" }, index.h("slot", { key: '064dae2965497936609689003e6ee46b5f860951', name: "before-input" }), index.h("div", { key: '2488ba16be15c15652e79e0f1b977b8eae5cc01e', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '9100ed738f0ad58787aefdea48fe03c07903366b', name: "leading-input" }), index.h("input", { key: '82f96798277edfe64cc570c62b3cb42e034d7199', 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 }), this.error && (index.h("nv-icon", { key: 'e7502bb7e97f50ec5b768248b1656364c6dec78c', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '1d20db97498c253b7d537c2bd2b083aa7a3fb59a', name: "circle-check", class: "validation", size: "md" }))), index.h("slot", { key: 'f5c711f25dfc635b507b10db4b91bfa9910988d2', name: "after-input" })), (this.description ||
|
|
115
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '1eca7c8d8b44f2c58a42f3c82b328148b6922a36', class: "description" }, index.h("slot", { key: 'ab645d19fc865f3e45c1adc164c5ea47600e7cc5', name: "description" }, this.description))), (this.errorDescription ||
|
|
116
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '7e76601eab36ebfd9f17113f602f1070c2ac27cc', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '26b8af79934a57af720a1058f75c82fe51edf221', name: "error-description" }, this.errorDescription)))));
|
|
117
|
+
}
|
|
118
|
+
static get formAssociated() { return true; }
|
|
119
|
+
get el() { return index.getElement(this); }
|
|
120
|
+
};
|
|
121
|
+
NvFieldtext.style = NvFieldtextStyle0;
|
|
122
|
+
|
|
123
|
+
exports.nv_fieldtext = NvFieldtext;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Cn-oNJnW.js');
|
|
4
4
|
var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
|
|
5
5
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
6
6
|
require('react');
|
|
7
7
|
|
|
8
|
-
const nvFieldtextareaCss = "nv-fieldtextarea{--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-fieldtextarea[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-fieldtextarea[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-fieldtextarea[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-fieldtextarea[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldtextarea 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-fieldtextarea .textarea-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtextarea .textarea-wrapper .textarea-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtextarea .textarea-wrapper .textarea-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtextarea .textarea-wrapper .textarea-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea:focus{outline:none}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::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-fieldtextarea .textarea-wrapper .textarea-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldtextarea .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-fieldtextarea .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
|
+
const nvFieldtextareaCss = "nv-fieldtextarea{--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-fieldtextarea[fluid]:not([fluid=false]){max-width:unset}nv-fieldtextarea[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-fieldtextarea[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-fieldtextarea[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-fieldtextarea[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldtextarea 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-fieldtextarea .textarea-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtextarea .textarea-wrapper .textarea-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtextarea .textarea-wrapper .textarea-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtextarea .textarea-wrapper .textarea-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar{width:6px;height:6px}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldtextarea .textarea-wrapper .textarea-container textarea:focus{outline:none}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::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-fieldtextarea .textarea-wrapper .textarea-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldtextarea .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-fieldtextarea .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
9
|
const NvFieldtextareaStyle0 = nvFieldtextareaCss;
|
|
10
10
|
|
|
11
11
|
const NvFieldtextarea = class {
|
|
@@ -75,6 +75,10 @@ const NvFieldtextarea = class {
|
|
|
75
75
|
* element.
|
|
76
76
|
*/
|
|
77
77
|
this.autofocus = false;
|
|
78
|
+
/**
|
|
79
|
+
* Allows the field to stretch and fill the entire width of its container.
|
|
80
|
+
*/
|
|
81
|
+
this.fluid = false;
|
|
78
82
|
//#endregion WATCHERS
|
|
79
83
|
/****************************************************************************/
|
|
80
84
|
//#region METHODS
|
|
@@ -177,9 +181,9 @@ const NvFieldtextarea = class {
|
|
|
177
181
|
/****************************************************************************/
|
|
178
182
|
//#region RENDER
|
|
179
183
|
render() {
|
|
180
|
-
return (index.h(index.Host, { key: '
|
|
181
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
182
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
184
|
+
return (index.h(index.Host, { key: '26197bbab1a4b4571fdb55c8191e6b7879d58504' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'f3f9465b6917b669cd2f8a363bbe719259bda4c4', htmlFor: this.inputId }, index.h("slot", { key: '81cda2c75f3dbaeace4c0a713083ba1d71738334', name: "label" }, this.label))), index.h("div", { key: '7c8ce38e9ae3b5524205017add5470ba46cecc20', class: "textarea-wrapper" }, index.h("div", { key: 'c32da51694a84c55c092838a62801b4e57ab12ac', class: "textarea-container", onClick: this.handleTextareaContainerClick }, index.h("textarea", { key: '1b3d130b68595c7f49097494e98848e5523ba34d', 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: 'ed32145e5c6eb3b5c481835e578c264f24e7a576', class: "description" }, index.h("slot", { key: '9ca5a874ff2bb5deb377ce8d5fb91235ec754ab0', name: "description" }, this.description))), (this.errorDescription ||
|
|
186
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'e858235ef7f47e0849757a718617ebc2877f4ac7', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '91e053ef76274532046acad6db63e40787a3059f', name: "error-description" }, this.errorDescription)))));
|
|
183
187
|
}
|
|
184
188
|
static get formAssociated() { return true; }
|
|
185
189
|
get el() { return index.getElement(this); }
|