@nova-design-system/nova-react 3.0.0 → 3.2.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-B2jv2KXv.js} +2856 -1620
- package/dist/cjs/index.js +2 -1
- package/dist/cjs/{nv-alert.entry-BXY4KXbF.js → nv-alert.entry-pxBJfmIm.js} +11 -11
- package/dist/cjs/{nv-avatar.entry-BnPSKkJJ.js → nv-avatar.entry-CHtVctSK.js} +7 -7
- package/dist/cjs/nv-badge_2.entry-BO88KO1O.js +204 -0
- package/dist/cjs/{nv-breadcrumb.entry-D5vGHLOG.js → nv-breadcrumb.entry-7azRtyl5.js} +1 -1
- package/dist/cjs/{nv-breadcrumbs.entry-CsaqAsnb.js → nv-breadcrumbs.entry-DfZVMKpY.js} +1 -1
- package/dist/cjs/{nv-button.entry-DzZfGZGy.js → nv-button.entry-DW9SblsY.js} +7 -7
- package/dist/cjs/nv-calendar.entry-BeayRRor.js +1043 -0
- package/dist/cjs/{nv-col.entry-Cng8NaTW.js → nv-col.entry-C6oEkSbI.js} +1 -1
- package/dist/cjs/{nv-datagrid.entry-BbAOzpiO.js → nv-datagrid.entry-xhQP6JJP.js} +423 -94
- package/dist/cjs/{nv-datagridcolumn.entry-CRogHbVM.js → nv-datagridcolumn.entry-CjYmo4fM.js} +2 -2
- package/dist/cjs/{nv-dialog.entry-BSIZGYGF.js → nv-dialog.entry-mxETaZbc.js} +19 -13
- package/dist/cjs/{nv-dialogfooter_2.entry-Q4_li_QU.js → nv-dialogfooter_2.entry-DnLg2DHy.js} +3 -3
- package/dist/cjs/{nv-fieldcheckbox.entry-DmgzfmRd.js → nv-fieldcheckbox.entry-Be9__i15.js} +1 -1
- package/dist/cjs/{nv-fielddate.entry-qAvLX_Ru.js → nv-fielddate.entry-BlNily-X.js} +9 -18
- package/dist/cjs/nv-fielddaterange.entry-CycpKoJd.js +408 -0
- package/dist/cjs/{nv-fielddropdown.entry-DKXmoXeW.js → nv-fielddropdown.entry-BPwviyCp.js} +88 -57
- package/dist/cjs/{nv-fielddropdownitem.entry-BVLVXi0e.js → nv-fielddropdownitem.entry-BGuUR9KP.js} +2 -2
- package/dist/cjs/{nv-fieldmultiselect.entry-DrTbd3Dj.js → nv-fieldmultiselect.entry-Lrxr1gsi.js} +122 -104
- package/dist/cjs/nv-fieldnumber.entry-B1VySoWj.js +130 -0
- package/dist/cjs/nv-fieldpassword.entry-D7Qlx7Bh.js +121 -0
- package/dist/cjs/{nv-fieldradio.entry-CVEY4v6F.js → nv-fieldradio.entry-CDu8xs0p.js} +4 -4
- package/dist/cjs/{nv-fieldselect.entry-BrCUuRWa.js → nv-fieldselect.entry-NEdv8bQK.js} +11 -7
- package/dist/cjs/nv-fieldslider.entry-51gF9XPz.js +660 -0
- package/dist/cjs/nv-fieldtext.entry-Bug9zMgo.js +123 -0
- package/dist/cjs/{nv-fieldtextarea.entry-B4qiLmX1.js → nv-fieldtextarea.entry-D44HbsVQ.js} +9 -5
- package/dist/cjs/{nv-fieldtime.entry-Bp2IWjhN.js → nv-fieldtime.entry-MbaWbVtc.js} +71 -68
- package/dist/cjs/nv-icon.entry-BSSHr-ud.js +79 -0
- package/dist/cjs/{nv-iconbutton_2.entry-BRPAGl2S.js → nv-iconbutton_2.entry-DMaO-JWz.js} +3 -3
- package/dist/cjs/{nv-menu.entry-BiWiIZAm.js → nv-menu.entry-D5_lj9XB.js} +4 -2
- package/dist/cjs/{nv-menuitem.entry-CFkXoZ_r.js → nv-menuitem.entry-fhnYI91K.js} +2 -2
- package/dist/cjs/{nv-popover.entry-KT1iQUJk.js → nv-popover.entry-CYqBaVbr.js} +2 -2
- package/dist/cjs/{nv-row.entry-Cs2GDrcu.js → nv-row.entry-BUheLufV.js} +2 -2
- package/dist/cjs/{nv-stack.entry-Ci7pxGSo.js → nv-stack.entry-DNPce51E.js} +2 -2
- package/dist/cjs/{nv-table.entry-N4MV8Y6E.js → nv-table.entry-DXQM8l3t.js} +3 -3
- package/dist/cjs/{nv-tablecolumn.entry-CTz4jsZl.js → nv-tablecolumn.entry-DROQK_0c.js} +1 -1
- package/dist/cjs/{nv-toggle.entry-m10-ncYR.js → nv-toggle.entry-fMzTrdte.js} +3 -3
- package/dist/cjs/{nv-tooltip.entry-B6aRDto3.js → nv-tooltip.entry-yB2Ek1Cz.js} +3 -3
- package/dist/generated/components.js +12 -1
- package/dist/types/generated/components.d.ts +19 -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-fielddaterange.entry-DVB8Rwxk.js +0 -355
- 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,123 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('./index-B2jv2KXv.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-in-field)}nv-fieldtext[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtext[required]:not([required=false]) label::after{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>[slot=leading-input]{display:block;margin-left:var(--form-field-padding-x)}nv-fieldtext>.input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding: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>.input-wrapper .input-container>[slot=trailing-input]{display:block;margin-right:var(--form-field-padding-x)}nv-fieldtext>.description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"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{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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: '852a919f0fcf19b0b67ddf6b0cc2762fc41c9388' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '3c99f456e76ddbc6ec21d3390aea76f849d72b88', htmlFor: this.inputId }, index.h("slot", { key: '5a11c6f3f0f56b8ab05d0390fec6bd1b15763d02', name: "label" }, this.label))), index.h("div", { key: 'a305c2ffb63cfd66c70d0074fc62c823cce37f8e', class: "input-wrapper" }, index.h("slot", { key: '0efd115ea0805160dee0c4b58ad137be2aabc741', name: "before-input" }), index.h("div", { key: 'ccaaa74adf0df1667bc971eaedb4b9883061851d', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'f81025cb44b30e185b3057527cdc2a1662f5252a', name: "leading-input" }), index.h("input", { key: 'a8b2356d0b5372823f3da9f053d0de8e28bf8c08', 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: 'aa531021a4d3db52839c280cda21d06be6deaa79', name: "trailing-input" }), this.error && (index.h("nv-icon", { key: 'fc590ef5879887b2990912b16cc247db875af237', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '68023589dc8340647b1aa5fa07f1b9bda248049d', name: "circle-check", class: "validation", size: "md" }))), index.h("slot", { key: '3d0a53914d87559eab76f4d0b8165ad1d7e4eccf', name: "after-input" })), (this.description ||
|
|
115
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '8641ee0c8638ec43d5a3da0d08ed29991cedfc6a', class: "description" }, index.h("slot", { key: 'fe4ee537f946b69ef9908f1d086046b03c777f90', name: "description" }, this.description))), (this.errorDescription ||
|
|
116
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '865c34d486b86223fbbbc81f22cd3428e4110af8', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'ac80b543c58bed6db534b8f1571a70aabf811918', 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-B2jv2KXv.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-in-field)}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{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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: '405a8423bb391cc8c1e32d8d64ab587c71b355d1' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'dc5a90e0f9cde1946966cb5b2ad98050c6740869', htmlFor: this.inputId }, index.h("slot", { key: 'a2c78f23289fcdb742000fa949b98359441268dc', name: "label" }, this.label))), index.h("div", { key: 'be9840925f442ad964597e77d7c6b9b29b5bae0f', class: "textarea-wrapper" }, index.h("div", { key: '11b986940cfff801c6599f03850b1fc8c5cf2800', class: "textarea-container", onClick: this.handleTextareaContainerClick }, index.h("textarea", { key: 'b4d7bbec6ed6d38545935eef997fbc73499bdc15', 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: 'fc2b00df7fccc60ee9ff1f04cd81e059839b29c0', class: "description" }, index.h("slot", { key: '9cfaf267dfec3412a5a09ee8fe64b244fda69c7b', name: "description" }, this.description))), (this.errorDescription ||
|
|
186
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'a56439ef49efeffe303d13f56a0b00f648a7979d', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '5337f43770894cf6898fcbdc3b77f8a337061597', name: "error-description" }, this.errorDescription)))));
|
|
183
187
|
}
|
|
184
188
|
static get formAssociated() { return true; }
|
|
185
189
|
get el() { return index.getElement(this); }
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
4
|
-
var
|
|
3
|
+
var index = require('./index-B2jv2KXv.js');
|
|
4
|
+
var constantsB97e736d = require('./constants-b97e736d-BzFAKCkR.js');
|
|
5
5
|
var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
|
|
6
6
|
require('react');
|
|
7
7
|
|
|
@@ -19,7 +19,7 @@ function startsWithIgnoreCase(str, prefix) {
|
|
|
19
19
|
return str.toLowerCase().startsWith(prefix.toLowerCase());
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
const nvFieldtimeCss = "nv-fieldtime{--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-fieldtime[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-fieldtime[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-fieldtime[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-fieldtime[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldtime 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-fieldtime nv-popover{width:100%;display:block}nv-fieldtime nv-popover [data-scope=popover]{padding:var(--list-dropdown-padding);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:100%}nv-fieldtime .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldtime .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;display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;min-height:40px;gap:0;padding-left:var(--form-field-padding-x)}nv-fieldtime .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtime .input-container:focus-within,nv-fieldtime .input-container:focus-within:hover,nv-fieldtime .input-container:focus,nv-fieldtime .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-fieldtime .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-fieldtime .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtime .input-container input.time-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%;min-width:24px;flex:0 0 24px;text-align:center;padding:0;margin:0}nv-fieldtime .input-container input.time-input:focus{outline:none}nv-fieldtime .input-container input.time-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-fieldtime .input-container input.time-input::-webkit-inner-spin-button,nv-fieldtime .input-container input.time-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}nv-fieldtime .input-container span{width:100%;text-align:center;min-width:24px;flex:0 0 24px;padding:0 4px;color:var(--components-form-field-content-text)}nv-fieldtime .input-container>nv-iconbutton{border:0px;border-radius:0px;margin-left:auto}nv-fieldtime .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldtime .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px;top:50%;transform:translateY(-50%)}nv-fieldtime .input-container:focus,nv-fieldtime .input-container:focus-within{border-color:var(--color-focus-brand);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--color-focus-brand)}nv-fieldtime .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-fieldtime .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldtime hr{border:none;border-top:1px solid var(--dropdown-divider-color, #ccc);margin:0.5rem 0}nv-fieldtime .time-dropdown{width:100%}nv-fieldtime .time-dropdown .time-columns{display:flex;justify-content:flex-start;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column{flex:1;text-align:center;max-height:200px;overflow-y:auto;scroll-behavior:smooth}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar{width:
|
|
22
|
+
const nvFieldtimeCss = "nv-fieldtime{--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-fieldtime[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-fieldtime[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldtime[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-fieldtime[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldtime 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-fieldtime nv-popover{width:100%;display:block}nv-fieldtime nv-popover [data-scope=popover]{padding:var(--list-dropdown-padding);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:100%}nv-fieldtime .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldtime .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;display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;min-height:40px;gap:0;padding-left:var(--form-field-padding-x)}nv-fieldtime .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtime .input-container:focus-within,nv-fieldtime .input-container:focus-within:hover,nv-fieldtime .input-container:focus,nv-fieldtime .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-fieldtime .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-fieldtime .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtime .input-container input.time-input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;width:100%;min-width:24px;flex:0 0 24px;text-align:center;padding:0;margin:0}nv-fieldtime .input-container input.time-input:focus{outline:none}nv-fieldtime .input-container input.time-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-fieldtime .input-container input.time-input::-webkit-inner-spin-button,nv-fieldtime .input-container input.time-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}nv-fieldtime .input-container span{width:100%;text-align:center;min-width:24px;flex:0 0 24px;padding:0 4px;color:var(--components-form-field-content-text)}nv-fieldtime .input-container>nv-iconbutton{border:0px;border-radius:0px;margin-left:auto}nv-fieldtime .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldtime .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px;top:50%;transform:translateY(-50%)}nv-fieldtime .input-container:focus,nv-fieldtime .input-container:focus-within{border-color:var(--color-focus-brand);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--color-focus-brand)}nv-fieldtime .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);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-fieldtime .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldtime hr{border:none;border-top:1px solid var(--dropdown-divider-color, #ccc);margin:0.5rem 0}nv-fieldtime .time-dropdown{width:100%}nv-fieldtime .time-dropdown .time-columns{display:flex;justify-content:flex-start;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column{flex:1;text-align:center;padding-right:2px;max-height:200px;overflow-y:auto;scroll-behavior:smooth;scrollbar-gutter:stable both-edges}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar{width:6px;height:6px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column:last-child{border-right:none}nv-fieldtime .time-dropdown .time-columns .time-column .time-option{padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);text-align:center;cursor:pointer;transition:background-color 0.2s;height:40px;border-radius:var(--list-dropdown-item-radius);display:flex;justify-content:center;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:hover{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-list-dropdown-item-label-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus,nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus-within{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-list-dropdown-item-label-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.selected{background-color:var(--components-list-dropdown-item-background-active);color:var(--components-list-dropdown-item-label-active);border-width:1px;border-style:solid;border-color:var(--components-list-dropdown-item-border-active)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.highlighted{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}";
|
|
23
23
|
const NvFieldtimeStyle0 = nvFieldtimeCss;
|
|
24
24
|
|
|
25
25
|
const NvFieldtime = class {
|
|
@@ -29,7 +29,7 @@ const NvFieldtime = class {
|
|
|
29
29
|
// Input elements for hours, minutes, and seconds
|
|
30
30
|
this.inputElements = {};
|
|
31
31
|
this.inputZeroAdded = {};
|
|
32
|
-
this.typeFocused =
|
|
32
|
+
this.typeFocused = constantsB97e736d.TimeType.Hours;
|
|
33
33
|
/****************************************************************************/
|
|
34
34
|
//#region STATES
|
|
35
35
|
this.hours = '00';
|
|
@@ -101,7 +101,10 @@ const NvFieldtime = class {
|
|
|
101
101
|
/****************************************************************************/
|
|
102
102
|
//#region LISTENERS
|
|
103
103
|
handleOpenChanged(event) {
|
|
104
|
-
|
|
104
|
+
// Stop propagation to prevent the event from affecting parent components like dialogs
|
|
105
|
+
event.stopPropagation();
|
|
106
|
+
// Update `open` based on the popover state
|
|
107
|
+
this.open = event.detail;
|
|
105
108
|
}
|
|
106
109
|
handleKeyDown(event) {
|
|
107
110
|
var _a, _b, _c, _d;
|
|
@@ -139,20 +142,20 @@ const NvFieldtime = class {
|
|
|
139
142
|
else if (event.key === 'Enter' && currentIndex >= 0) {
|
|
140
143
|
event.preventDefault();
|
|
141
144
|
items[currentIndex].click();
|
|
142
|
-
if (this.typeFocused ===
|
|
143
|
-
(_a = this.inputElements[
|
|
144
|
-
(_b = this.inputElements[
|
|
145
|
+
if (this.typeFocused === constantsB97e736d.TimeType.Hours) {
|
|
146
|
+
(_a = this.inputElements[constantsB97e736d.TimeType.Minutes]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
147
|
+
(_b = this.inputElements[constantsB97e736d.TimeType.Minutes]) === null || _b === void 0 ? void 0 : _b.select();
|
|
145
148
|
}
|
|
146
|
-
else if (this.typeFocused ===
|
|
147
|
-
this.typeFocused ===
|
|
148
|
-
(_c = this.inputElements[
|
|
149
|
-
(_d = this.inputElements[
|
|
149
|
+
else if (this.typeFocused === constantsB97e736d.TimeType.Minutes ||
|
|
150
|
+
this.typeFocused === constantsB97e736d.TimeType.Seconds) {
|
|
151
|
+
(_c = this.inputElements[constantsB97e736d.TimeType.Seconds]) === null || _c === void 0 ? void 0 : _c.focus();
|
|
152
|
+
(_d = this.inputElements[constantsB97e736d.TimeType.Seconds]) === null || _d === void 0 ? void 0 : _d.select();
|
|
150
153
|
}
|
|
151
154
|
}
|
|
152
155
|
else if (event.key === 'Escape') {
|
|
153
156
|
event.preventDefault();
|
|
154
|
-
if (this.inputElements[
|
|
155
|
-
this.inputElements[
|
|
157
|
+
if (this.inputElements[constantsB97e736d.TimeType.Hours]) {
|
|
158
|
+
this.inputElements[constantsB97e736d.TimeType.Hours].blur();
|
|
156
159
|
}
|
|
157
160
|
}
|
|
158
161
|
}
|
|
@@ -170,13 +173,13 @@ const NvFieldtime = class {
|
|
|
170
173
|
const inputValue = inputElement.value.replace(/[^0-9]/g, ''); // Only keep numeric input
|
|
171
174
|
// Update the time value based on the type
|
|
172
175
|
switch (type) {
|
|
173
|
-
case
|
|
176
|
+
case constantsB97e736d.TimeType.Hours:
|
|
174
177
|
this.handleHoursChange(inputValue, type);
|
|
175
178
|
break;
|
|
176
|
-
case
|
|
179
|
+
case constantsB97e736d.TimeType.Minutes:
|
|
177
180
|
this.handleMinutesChange(inputValue, type);
|
|
178
181
|
break;
|
|
179
|
-
case
|
|
182
|
+
case constantsB97e736d.TimeType.Seconds:
|
|
180
183
|
this.handleSecondsChange(inputValue, type);
|
|
181
184
|
break;
|
|
182
185
|
}
|
|
@@ -332,12 +335,12 @@ const NvFieldtime = class {
|
|
|
332
335
|
if (this.hours.length === 2 &&
|
|
333
336
|
!this.inputZeroAdded[type] &&
|
|
334
337
|
!reputedToZero) {
|
|
335
|
-
(_a = this.inputElements[
|
|
336
|
-
(_b = this.inputElements[
|
|
338
|
+
(_a = this.inputElements[constantsB97e736d.TimeType.Minutes]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
339
|
+
(_b = this.inputElements[constantsB97e736d.TimeType.Minutes]) === null || _b === void 0 ? void 0 : _b.select();
|
|
337
340
|
}
|
|
338
341
|
else if (reputedToZero) {
|
|
339
|
-
(_c = this.inputElements[
|
|
340
|
-
(_d = this.inputElements[
|
|
342
|
+
(_c = this.inputElements[constantsB97e736d.TimeType.Hours]) === null || _c === void 0 ? void 0 : _c.focus();
|
|
343
|
+
(_d = this.inputElements[constantsB97e736d.TimeType.Hours]) === null || _d === void 0 ? void 0 : _d.select();
|
|
341
344
|
}
|
|
342
345
|
}
|
|
343
346
|
handleMinutesChange(inputValue, type) {
|
|
@@ -490,12 +493,12 @@ const NvFieldtime = class {
|
|
|
490
493
|
if (this.minutes.length === 2 &&
|
|
491
494
|
!this.inputZeroAdded[type] &&
|
|
492
495
|
!reputedToZero) {
|
|
493
|
-
(_c = this.inputElements[
|
|
494
|
-
(_d = this.inputElements[
|
|
496
|
+
(_c = this.inputElements[constantsB97e736d.TimeType.Seconds]) === null || _c === void 0 ? void 0 : _c.focus();
|
|
497
|
+
(_d = this.inputElements[constantsB97e736d.TimeType.Seconds]) === null || _d === void 0 ? void 0 : _d.select();
|
|
495
498
|
}
|
|
496
499
|
else if (reputedToZero) {
|
|
497
|
-
(_e = this.inputElements[
|
|
498
|
-
(_f = this.inputElements[
|
|
500
|
+
(_e = this.inputElements[constantsB97e736d.TimeType.Minutes]) === null || _e === void 0 ? void 0 : _e.focus();
|
|
501
|
+
(_f = this.inputElements[constantsB97e736d.TimeType.Minutes]) === null || _f === void 0 ? void 0 : _f.select();
|
|
499
502
|
}
|
|
500
503
|
}
|
|
501
504
|
handleSecondsChange(inputValue, type) {
|
|
@@ -623,8 +626,8 @@ const NvFieldtime = class {
|
|
|
623
626
|
}
|
|
624
627
|
}
|
|
625
628
|
if (reputedToZero) {
|
|
626
|
-
(_c = this.inputElements[
|
|
627
|
-
(_d = this.inputElements[
|
|
629
|
+
(_c = this.inputElements[constantsB97e736d.TimeType.Seconds]) === null || _c === void 0 ? void 0 : _c.focus();
|
|
630
|
+
(_d = this.inputElements[constantsB97e736d.TimeType.Seconds]) === null || _d === void 0 ? void 0 : _d.select();
|
|
628
631
|
}
|
|
629
632
|
}
|
|
630
633
|
// Parse a continuous time string (e.g., "123456") into hours, minutes, and seconds
|
|
@@ -678,26 +681,26 @@ const NvFieldtime = class {
|
|
|
678
681
|
if (this.disabled || this.readonly) {
|
|
679
682
|
return; // Do not toggle if disabled or read-only
|
|
680
683
|
}
|
|
681
|
-
if (this.open && this.inputElements[
|
|
684
|
+
if (this.open && this.inputElements[constantsB97e736d.TimeType.Hours]) {
|
|
682
685
|
this.open = false; // Close the popover if it is open
|
|
683
686
|
}
|
|
684
|
-
else if (this.open && this.inputElements[
|
|
687
|
+
else if (this.open && this.inputElements[constantsB97e736d.TimeType.Minutes]) {
|
|
685
688
|
this.open = false; // Close the popover if it is open
|
|
686
689
|
}
|
|
687
|
-
else if (this.open && this.inputElements[
|
|
690
|
+
else if (this.open && this.inputElements[constantsB97e736d.TimeType.Seconds]) {
|
|
688
691
|
this.open = false; // Close the popover if it is open
|
|
689
692
|
}
|
|
690
|
-
else if (!this.open && this.inputElements[
|
|
691
|
-
(_a = this.inputElements[
|
|
692
|
-
(_b = this.inputElements[
|
|
693
|
+
else if (!this.open && this.inputElements[constantsB97e736d.TimeType.Hours]) {
|
|
694
|
+
(_a = this.inputElements[constantsB97e736d.TimeType.Hours]) === null || _a === void 0 ? void 0 : _a.focus(); // Focus will open the popover
|
|
695
|
+
(_b = this.inputElements[constantsB97e736d.TimeType.Hours]) === null || _b === void 0 ? void 0 : _b.select();
|
|
693
696
|
}
|
|
694
|
-
else if (!this.open && this.inputElements[
|
|
695
|
-
(_c = this.inputElements[
|
|
696
|
-
(_d = this.inputElements[
|
|
697
|
+
else if (!this.open && this.inputElements[constantsB97e736d.TimeType.Minutes]) {
|
|
698
|
+
(_c = this.inputElements[constantsB97e736d.TimeType.Minutes]) === null || _c === void 0 ? void 0 : _c.focus(); // Focus will open the popover
|
|
699
|
+
(_d = this.inputElements[constantsB97e736d.TimeType.Minutes]) === null || _d === void 0 ? void 0 : _d.select();
|
|
697
700
|
}
|
|
698
|
-
else if (!this.open && this.inputElements[
|
|
699
|
-
(_e = this.inputElements[
|
|
700
|
-
(_f = this.inputElements[
|
|
701
|
+
else if (!this.open && this.inputElements[constantsB97e736d.TimeType.Seconds]) {
|
|
702
|
+
(_e = this.inputElements[constantsB97e736d.TimeType.Seconds]) === null || _e === void 0 ? void 0 : _e.focus(); // Focus will open the popover
|
|
703
|
+
(_f = this.inputElements[constantsB97e736d.TimeType.Seconds]) === null || _f === void 0 ? void 0 : _f.select();
|
|
701
704
|
}
|
|
702
705
|
else {
|
|
703
706
|
console.warn('nv-fieldtime -> No input elements found to focus or to blur');
|
|
@@ -719,13 +722,13 @@ const NvFieldtime = class {
|
|
|
719
722
|
}
|
|
720
723
|
handleTimeOptionClick(event, type) {
|
|
721
724
|
const option = parseInt(event.target.textContent || '0', 10);
|
|
722
|
-
if (type ===
|
|
725
|
+
if (type === constantsB97e736d.TimeType.Hours) {
|
|
723
726
|
this.hours = option.toString().padStart(2, '0');
|
|
724
727
|
}
|
|
725
|
-
else if (type ===
|
|
728
|
+
else if (type === constantsB97e736d.TimeType.Minutes) {
|
|
726
729
|
this.minutes = option.toString().padStart(2, '0');
|
|
727
730
|
}
|
|
728
|
-
else if (type ===
|
|
731
|
+
else if (type === constantsB97e736d.TimeType.Seconds) {
|
|
729
732
|
this.seconds = option.toString().padStart(2, '0');
|
|
730
733
|
}
|
|
731
734
|
const reconstructTime = this.reconstructTime();
|
|
@@ -776,11 +779,11 @@ const NvFieldtime = class {
|
|
|
776
779
|
}
|
|
777
780
|
// Generate the time options based on the type
|
|
778
781
|
switch (type) {
|
|
779
|
-
case
|
|
782
|
+
case constantsB97e736d.TimeType.Hours:
|
|
780
783
|
return this.generateHourOptions(stepInSeconds);
|
|
781
|
-
case
|
|
784
|
+
case constantsB97e736d.TimeType.Minutes:
|
|
782
785
|
return this.generateMinuteOptions(stepInSeconds);
|
|
783
|
-
case
|
|
786
|
+
case constantsB97e736d.TimeType.Seconds:
|
|
784
787
|
return this.generateSecondOptions(stepInSeconds);
|
|
785
788
|
default:
|
|
786
789
|
return [];
|
|
@@ -882,8 +885,8 @@ const NvFieldtime = class {
|
|
|
882
885
|
}
|
|
883
886
|
if (!this.open) {
|
|
884
887
|
if (this.inputElements) {
|
|
885
|
-
(_a = this.inputElements[
|
|
886
|
-
(_b = this.inputElements[
|
|
888
|
+
(_a = this.inputElements[constantsB97e736d.TimeType.Hours]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
889
|
+
(_b = this.inputElements[constantsB97e736d.TimeType.Hours]) === null || _b === void 0 ? void 0 : _b.select();
|
|
887
890
|
}
|
|
888
891
|
event.preventDefault();
|
|
889
892
|
}
|
|
@@ -973,32 +976,32 @@ const NvFieldtime = class {
|
|
|
973
976
|
RenderTimeOptionsColumn(type) {
|
|
974
977
|
return (index.h("div", { class: `time-column time-column-${type}`, onScroll: e => this.handleScroll(e, type) }, this.generateInfiniteTimeOptions(type).map((option, index$1) => (index.h("div", { class: {
|
|
975
978
|
'time-option': true,
|
|
976
|
-
'selected': (type ===
|
|
977
|
-
(type ===
|
|
978
|
-
(type ===
|
|
979
|
+
'selected': (type === constantsB97e736d.TimeType.Hours && option === this.hours) ||
|
|
980
|
+
(type === constantsB97e736d.TimeType.Minutes && option === this.minutes) ||
|
|
981
|
+
(type === constantsB97e736d.TimeType.Seconds && option === this.seconds),
|
|
979
982
|
}, key: `${option}-${index$1}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
|
|
980
983
|
}
|
|
981
984
|
render() {
|
|
982
|
-
return (index.h(index.Host, { key: '
|
|
983
|
-
index.h("input", { key: '
|
|
984
|
-
? `${
|
|
985
|
-
:
|
|
985
|
+
return (index.h(index.Host, { key: 'f2e316b464ef324043fca47a25d7511fed662fe9', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '738dd3f9ba307a21ad7f16f77eb09f4f9fed8ccb', htmlFor: this.inputId }, index.h("slot", { key: '8106132899c67bbc7e9ffb82caf575d599239b9a', name: "label" }, this.label))), index.h("nv-popover", { key: '8306d0204039862466d83c7e5e2f42b87ea331c4', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '0355aee332a5c5cd2492f22b7d820625273c74e6', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: 'a6aaeaba4901b4fe0b0266796c84531d57fbb719', name: "before-input" }), index.h("div", { key: 'ae78ff8fc1a857a0da7be6e3c29464dbc0b80771', class: "input-container" }, index.h("slot", { key: '6455a51b2f1edf565ac754e61ac773a920f319d4', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
|
|
986
|
+
index.h("input", { key: '9a48b8ea04698b9443774a2e2bf41383144ba29a', ref: el => (this.inputElements[constantsB97e736d.TimeType.Hours] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, constantsB97e736d.TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(constantsB97e736d.TimeType.Hours), name: this.name
|
|
987
|
+
? `${constantsB97e736d.TimeType.Hours}-${this.name}`
|
|
988
|
+
: constantsB97e736d.TimeType.Hours, id: this.inputId, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
|
|
986
989
|
], this.format.includes('mm') && [
|
|
987
|
-
index.h("span", { key: '
|
|
988
|
-
index.h("input", { key: '
|
|
989
|
-
? `${
|
|
990
|
-
:
|
|
990
|
+
index.h("span", { key: '5f75d09a90c0a8f6f106eb3e24f4f342fcc36d67' }, ":"),
|
|
991
|
+
index.h("input", { key: 'b3cc508705147ea07218a037f21f425deb9b94af', ref: el => (this.inputElements[constantsB97e736d.TimeType.Minutes] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, constantsB97e736d.TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(constantsB97e736d.TimeType.Minutes), name: this.name
|
|
992
|
+
? `${constantsB97e736d.TimeType.Minutes}-${this.name}`
|
|
993
|
+
: constantsB97e736d.TimeType.Minutes, id: `${this.inputId}-minutes`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
|
|
991
994
|
], this.format.includes('ss') && [
|
|
992
|
-
index.h("span", { key: '
|
|
993
|
-
index.h("input", { key: '
|
|
994
|
-
? `${
|
|
995
|
-
:
|
|
996
|
-
], index.h("nv-iconbutton", { key: '
|
|
997
|
-
this.RenderTimeOptionsColumn(
|
|
998
|
-
this.RenderTimeOptionsColumn(
|
|
999
|
-
this.RenderTimeOptionsColumn(
|
|
1000
|
-
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '
|
|
1001
|
-
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '
|
|
995
|
+
index.h("span", { key: '00b9320c275b027f9b2fbbebc1f56431783c874e' }, ":"),
|
|
996
|
+
index.h("input", { key: '3421fb11a4c9d9ba58bbf6f809070ce35d3d1ad6', ref: el => (this.inputElements[constantsB97e736d.TimeType.Seconds] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, constantsB97e736d.TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(constantsB97e736d.TimeType.Seconds), name: this.name
|
|
997
|
+
? `${constantsB97e736d.TimeType.Seconds}-${this.name}`
|
|
998
|
+
: constantsB97e736d.TimeType.Seconds, id: `${this.inputId}-seconds`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
|
|
999
|
+
], index.h("nv-iconbutton", { key: 'c61dc8780e1d668f2bf11ac2ace21b89ed460fdb', name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', "aria-pressed": this.open.toString(), onClick: () => this.HandleDropdownIconClick() }), this.error && (index.h("nv-icon", { key: '5963651793c9c1ec5d47be2a8cea9fed22490bb9', name: "alert-circle", class: "validation", size: "sm" })), this.success && (index.h("nv-icon", { key: '79953118d4206363f97ffb8d69dd76545795e419', name: "circle-check", class: "validation", size: "sm" }))), index.h("slot", { key: 'd0a8c104a671f997e6a9da223baa2a37dd3bf349', name: "after-input" })), index.h("div", { key: '7dec8335599d59e116065bdb0053a9096acaae88', class: "time-dropdown", slot: "content" }, index.h("div", { key: 'be7d3a3fa7b4def66a7ebdf2f29b489540fa5802', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
|
|
1000
|
+
this.RenderTimeOptionsColumn(constantsB97e736d.TimeType.Hours), this.format.includes('mm') &&
|
|
1001
|
+
this.RenderTimeOptionsColumn(constantsB97e736d.TimeType.Minutes), this.format.includes('ss') &&
|
|
1002
|
+
this.RenderTimeOptionsColumn(constantsB97e736d.TimeType.Seconds)))), (this.description ||
|
|
1003
|
+
this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'ec98cc31482efab33ace4e0bf62c6d5d82890df5', class: "description" }, index.h("slot", { key: '307b134933cca699d6f00d891a440281f2427d79', name: "description" }, this.description))), (this.errorDescription ||
|
|
1004
|
+
this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '71763de75be4e9f14e1cd1788ca06f2265a46d7e', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'dbe05c00515a5ccf1b4ba4736b943cfd8cefaaa0', name: "error-description" }, this.errorDescription)))));
|
|
1002
1005
|
}
|
|
1003
1006
|
static get formAssociated() { return true; }
|
|
1004
1007
|
get el() { return index.getElement(this); }
|