@nuralyui/textarea 0.1.3 → 0.1.4

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.
Files changed (2) hide show
  1. package/bundle.js +400 -3
  2. package/package.json +1 -1
package/bundle.js CHANGED
@@ -1,4 +1,330 @@
1
- import{css as t,LitElement as e,html as r}from"lit";import{query as a,property as i,state as o,customElement as s}from"lit/decorators.js";import{NuralyUIBaseMixin as n}from"@nuralyui/common/mixins";const l=t`:host{display:block;position:relative;font-family:var(--nuraly-font-family-textarea, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif)}.textarea-container{display:flex;flex-direction:column;gap:var(--nuraly-spacing-textarea-gap,8px);width:100%}.textarea-label{display:flex;align-items:center;gap:4px;font-size:var(--nuraly-font-size-textarea,16px);font-weight:500;color:var(--nuraly-color-textarea-label,#262626);line-height:var(--nuraly-line-height-textarea,1.5)}.required-indicator{color:var(--nuraly-color-textarea-error,#ef4444);font-weight:600}.textarea-wrapper{display:flex;align-items:flex-start;gap:var(--nuraly-spacing-textarea-gap,8px);position:relative}.addon-after,.addon-before{display:flex;align-items:flex-start;padding-top:var(--nuraly-padding-textarea,12px)}.textarea-input-container{position:relative;flex:1;display:flex;align-items:flex-start}.textarea-element{width:100%;min-height:80px;padding:var(--nuraly-padding-textarea,12px);border-top:var(--nuraly-border-width-textarea,1px) solid var(--nuraly-color-textarea-border,#d9d9d9);border-left:var(--nuraly-border-width-textarea,1px) solid var(--nuraly-color-textarea-border,#d9d9d9);border-right:var(--nuraly-border-width-textarea,1px) solid var(--nuraly-color-textarea-border,#d9d9d9);border-bottom:var(--nuraly-border-width-textarea,1px) solid var(--nuraly-color-textarea-border-bottom,var(--nuraly-color-textarea-border,#d9d9d9));border-radius:var(--nuraly-border-radius-textarea,6px);background-color:var(--nuraly-color-textarea-background,#fff);color:var(--nuraly-color-textarea-text,#262626);font-family:var(--nuraly-font-family-textarea, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif);font-size:var(--nuraly-font-size-textarea,16px);line-height:var(--nuraly-line-height-textarea,1.5);outline:0;transition:border-color .2s ease-in-out;box-sizing:border-box}.textarea-element::placeholder{color:var(--nuraly-color-textarea-placeholder,#8c8c8c)}.textarea-element:hover:not(:disabled):not(:focus){border-top-color:var(--nuraly-color-textarea-border-hover,#7c3aed);border-left-color:var(--nuraly-color-textarea-border-hover,#7c3aed);border-right-color:var(--nuraly-color-textarea-border-hover,#7c3aed);border-bottom-color:var(--nuraly-color-textarea-border-hover,#7c3aed)}.textarea-element:focus{border-top-color:var(--nuraly-color-textarea-border-focus,#7c3aed);border-left-color:var(--nuraly-color-textarea-border-focus,#7c3aed);border-right-color:var(--nuraly-color-textarea-border-focus,#7c3aed);border-bottom-color:var(--nuraly-color-textarea-border-focus,#7c3aed);box-shadow:0 0 0 1px var(--nuraly-color-textarea-border-focus,#7c3aed)}.textarea-element:disabled{background-color:var(--nuraly-color-surface-disabled,#f5f5f5);color:var(--nuraly-color-text-disabled,#8c8c8c);border-color:var(--nuraly-color-border-disabled,#d9d9d9);cursor:not-allowed;resize:none}.textarea-element:disabled{background-color:var(--nuraly-color-surface-disabled,#f5f5f5);color:var(--nuraly-color-text-disabled,#8c8c8c);border-color:var(--nuraly-color-border-disabled,#d9d9d9);cursor:not-allowed;resize:none}.textarea-element:read-only{background-color:var(--nuraly-color-surface-readonly,#f9f9f9);cursor:default}.size-small .textarea-element{font-size:var(--nuraly-font-size-textarea-small,14px);padding:calc(var(--nuraly-padding-textarea,12px) * .75);min-height:60px}.size-large .textarea-element{font-size:var(--nuraly-font-size-textarea-large,18px);padding:calc(var(--nuraly-padding-textarea,12px) * 1.25);min-height:100px}.variant-outlined .textarea-element{border:var(--nuraly-border-width-textarea,1px) solid var(--nuraly-color-textarea-border,#d9d9d9);background-color:var(--nuraly-color-textarea-background,#fff)}.variant-filled .textarea-element{border:var(--nuraly-border-width-textarea,1px) solid transparent;background-color:var(--nuraly-color-surface-secondary,#f5f5f5)}.variant-filled .textarea-element:focus{background-color:var(--nuraly-color-textarea-background,#fff);border-color:var(--nuraly-color-textarea-border-focus,#7c3aed)}.variant-borderless .textarea-element{border:none;background-color:transparent;padding-left:0;padding-right:0}.variant-underlined .textarea-element{border:none;border-bottom:var(--nuraly-border-width-textarea,1px) solid var(--nuraly-color-textarea-border,#d9d9d9);border-radius:0;background-color:transparent;padding-left:0;padding-right:0}.variant-underlined .textarea-element:focus{border-bottom-color:var(--nuraly-color-textarea-border-focus,#7c3aed);box-shadow:none}.state-error .textarea-element,.validation-error .textarea-element{border-color:var(--nuraly-color-textarea-error,#ef4444)}.state-error .textarea-element:focus,.validation-error .textarea-element:focus{border-color:var(--nuraly-color-textarea-error,#ef4444);box-shadow:0 0 0 1px var(--nuraly-color-textarea-error,#ef4444)}.state-warning .textarea-element,.validation-warning .textarea-element{border-color:var(--nuraly-color-textarea-warning,#f59e0b)}.state-warning .textarea-element:focus,.validation-warning .textarea-element:focus{border-color:var(--nuraly-color-textarea-warning,#f59e0b);box-shadow:0 0 0 1px var(--nuraly-color-textarea-warning,#f59e0b)}.clear-button,.validation-icon{position:absolute;top:var(--nuraly-padding-textarea,12px);right:var(--nuraly-padding-textarea,12px);z-index:1}.validation-icon{color:var(--nuraly-color-textarea-icon,#8c8c8c);pointer-events:none}.validation-icon.error{color:var(--nuraly-color-textarea-error,#ef4444)}.validation-icon.warning{color:var(--nuraly-color-textarea-warning,#f59e0b)}.validation-icon.success{color:var(--nuraly-color-textarea-success,#10b981)}.clear-button{display:flex;align-items:center;justify-content:center;background:0 0;border:none;cursor:pointer;color:var(--nuraly-color-textarea-icon,#8c8c8c);padding:2px;border-radius:4px;transition:color .2s ease-in-out,background-color .2s ease-in-out}.clear-button:hover{color:var(--nuraly-color-textarea-icon-hover,#7c3aed);background-color:var(--nuraly-color-surface-hover,rgba(0,0,0,.05))}.clear-button:active{color:var(--nuraly-color-textarea-icon-active,#6d28d9)}:host([allow-clear]) .textarea-element,:host([has-feedback]) .textarea-element{padding-right:calc(var(--nuraly-padding-textarea,12px) + 16px + 8px)}.textarea-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--nuraly-spacing-textarea-gap,8px);min-height:20px}.helper-text{flex:1;font-size:var(--nuraly-font-size-textarea-small,14px);line-height:1.4;color:var(--nuraly-color-textarea-helper-text,#666)}.validation-message{margin-bottom:4px}.validation-message:last-child{margin-bottom:0}.validation-message.error{color:var(--nuraly-color-textarea-error,#ef4444)}.validation-message.warning{color:var(--nuraly-color-textarea-warning,#f59e0b)}.validation-message.success{color:var(--nuraly-color-textarea-success,#10b981)}.character-count{font-size:var(--nuraly-font-size-textarea-small,14px);color:var(--nuraly-color-textarea-counter,#666);white-space:nowrap;line-height:1.4}.character-count.over-limit{color:var(--nuraly-color-textarea-counter-over,#ef4444);font-weight:500}@media (max-width:640px){.textarea-footer{flex-direction:column;align-items:stretch}.character-count{text-align:right}}.textarea-element:focus-visible{outline:2px solid var(--nuraly-color-textarea-border-focus,#7c3aed);outline-offset:2px}@media (prefers-contrast:high){.textarea-element{border-width:2px}.textarea-element:focus{box-shadow:0 0 0 2px var(--nuraly-color-textarea-border-focus,#7c3aed)}}@media (prefers-reduced-motion:reduce){.clear-button,.textarea-element{transition:none}}`,d=3,h=50;
1
+ import{css as t,LitElement as e,html as r}from"lit";import{query as a,property as i,state as o,customElement as s}from"lit/decorators.js";import{NuralyUIBaseMixin as n}from"@nuralyui/common/mixins";const l=t`
2
+ :host {
3
+ display: block;
4
+ position: relative;
5
+ font-family: var(--nuraly-font-family-textarea, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif);
6
+ }
7
+
8
+ .textarea-container {
9
+ display: flex;
10
+ flex-direction: column;
11
+ gap: var(--nuraly-spacing-textarea-gap, 8px);
12
+ width: 100%;
13
+ }
14
+
15
+ .textarea-label {
16
+ display: flex;
17
+ align-items: center;
18
+ gap: 4px;
19
+ font-size: var(--nuraly-font-size-textarea, 16px);
20
+ font-weight: 500;
21
+ color: var(--nuraly-color-textarea-label, #262626);
22
+ line-height: var(--nuraly-line-height-textarea, 1.5);
23
+ }
24
+
25
+ .required-indicator {
26
+ color: var(--nuraly-color-textarea-error, #ef4444);
27
+ font-weight: 600;
28
+ }
29
+
30
+ .textarea-wrapper {
31
+ display: flex;
32
+ align-items: flex-start;
33
+ gap: var(--nuraly-spacing-textarea-gap, 8px);
34
+ position: relative;
35
+ }
36
+
37
+ .addon-before,
38
+ .addon-after {
39
+ display: flex;
40
+ align-items: flex-start;
41
+ padding-top: var(--nuraly-padding-textarea, 12px);
42
+ }
43
+
44
+ .textarea-input-container {
45
+ position: relative;
46
+ flex: 1;
47
+ display: flex;
48
+ align-items: flex-start;
49
+ }
50
+
51
+ .textarea-element {
52
+ width: 100%;
53
+ min-height: 80px;
54
+ padding: var(--nuraly-padding-textarea, 12px);
55
+ border-top: var(--nuraly-border-width-textarea, 1px) solid var(--nuraly-color-textarea-border, #d9d9d9);
56
+ border-left: var(--nuraly-border-width-textarea, 1px) solid var(--nuraly-color-textarea-border, #d9d9d9);
57
+ border-right: var(--nuraly-border-width-textarea, 1px) solid var(--nuraly-color-textarea-border, #d9d9d9);
58
+ border-bottom: var(--nuraly-border-width-textarea, 1px) solid var(--nuraly-color-textarea-border-bottom, var(--nuraly-color-textarea-border, #d9d9d9));
59
+ border-radius: var(--nuraly-border-radius-textarea, 6px);
60
+ background-color: var(--nuraly-color-textarea-background, #ffffff);
61
+ color: var(--nuraly-color-textarea-text, #262626);
62
+ font-family: var(--nuraly-font-family-textarea, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif);
63
+ font-size: var(--nuraly-font-size-textarea, 16px);
64
+ line-height: var(--nuraly-line-height-textarea, 1.5);
65
+ outline: none;
66
+ transition: border-color 0.2s ease-in-out;
67
+ box-sizing: border-box;
68
+ }
69
+
70
+ .textarea-element::placeholder {
71
+ color: var(--nuraly-color-textarea-placeholder, #8c8c8c);
72
+ }
73
+
74
+ .textarea-element:hover:not(:disabled):not(:focus) {
75
+ border-top-color: var(--nuraly-color-textarea-border-hover, #7c3aed);
76
+ border-left-color: var(--nuraly-color-textarea-border-hover, #7c3aed);
77
+ border-right-color: var(--nuraly-color-textarea-border-hover, #7c3aed);
78
+ border-bottom-color: var(--nuraly-color-textarea-border-hover, #7c3aed);
79
+ }
80
+
81
+ .textarea-element:focus {
82
+ border-top-color: var(--nuraly-color-textarea-border-focus, #7c3aed);
83
+ border-left-color: var(--nuraly-color-textarea-border-focus, #7c3aed);
84
+ border-right-color: var(--nuraly-color-textarea-border-focus, #7c3aed);
85
+ border-bottom-color: var(--nuraly-color-textarea-border-focus, #7c3aed);
86
+ box-shadow: 0 0 0 1px var(--nuraly-color-textarea-border-focus, #7c3aed);
87
+ }
88
+
89
+ .textarea-element:disabled {
90
+ background-color: var(--nuraly-color-surface-disabled, #f5f5f5);
91
+ color: var(--nuraly-color-text-disabled, #8c8c8c);
92
+ border-color: var(--nuraly-color-border-disabled, #d9d9d9);
93
+ cursor: not-allowed;
94
+ resize: none;
95
+ }
96
+
97
+ .textarea-element:disabled {
98
+ background-color: var(--nuraly-color-surface-disabled, #f5f5f5);
99
+ color: var(--nuraly-color-text-disabled, #8c8c8c);
100
+ border-color: var(--nuraly-color-border-disabled, #d9d9d9);
101
+ cursor: not-allowed;
102
+ resize: none;
103
+ }
104
+
105
+ .textarea-element:read-only {
106
+ background-color: var(--nuraly-color-surface-readonly, #f9f9f9);
107
+ cursor: default;
108
+ }
109
+
110
+ /* Size variants */
111
+ .size-small .textarea-element {
112
+ font-size: var(--nuraly-font-size-textarea-small, 14px);
113
+ padding: calc(var(--nuraly-padding-textarea, 12px) * 0.75);
114
+ min-height: 60px;
115
+ }
116
+
117
+ .size-large .textarea-element {
118
+ font-size: var(--nuraly-font-size-textarea-large, 18px);
119
+ padding: calc(var(--nuraly-padding-textarea, 12px) * 1.25);
120
+ min-height: 100px;
121
+ }
122
+
123
+ /* Variant styles */
124
+ .variant-outlined .textarea-element {
125
+ border: var(--nuraly-border-width-textarea, 1px) solid var(--nuraly-color-textarea-border, #d9d9d9);
126
+ background-color: var(--nuraly-color-textarea-background, #ffffff);
127
+ }
128
+
129
+ .variant-filled .textarea-element {
130
+ border: var(--nuraly-border-width-textarea, 1px) solid transparent;
131
+ background-color: var(--nuraly-color-surface-secondary, #f5f5f5);
132
+ }
133
+
134
+ .variant-filled .textarea-element:focus {
135
+ background-color: var(--nuraly-color-textarea-background, #ffffff);
136
+ border-color: var(--nuraly-color-textarea-border-focus, #7c3aed);
137
+ }
138
+
139
+ .variant-borderless .textarea-element {
140
+ border: none;
141
+ background-color: transparent;
142
+ padding-left: 0;
143
+ padding-right: 0;
144
+ }
145
+
146
+ .variant-underlined .textarea-element {
147
+ border: none;
148
+ border-bottom: var(--nuraly-border-width-textarea, 1px) solid var(--nuraly-color-textarea-border, #d9d9d9);
149
+ border-radius: 0;
150
+ background-color: transparent;
151
+ padding-left: 0;
152
+ padding-right: 0;
153
+ }
154
+
155
+ .variant-underlined .textarea-element:focus {
156
+ border-bottom-color: var(--nuraly-color-textarea-border-focus, #7c3aed);
157
+ box-shadow: none;
158
+ }
159
+
160
+ /* State styles */
161
+ .state-error .textarea-element,
162
+ .validation-error .textarea-element {
163
+ border-color: var(--nuraly-color-textarea-error, #ef4444);
164
+ }
165
+
166
+ .state-error .textarea-element:focus,
167
+ .validation-error .textarea-element:focus {
168
+ border-color: var(--nuraly-color-textarea-error, #ef4444);
169
+ box-shadow: 0 0 0 1px var(--nuraly-color-textarea-error, #ef4444);
170
+ }
171
+
172
+ .state-warning .textarea-element,
173
+ .validation-warning .textarea-element {
174
+ border-color: var(--nuraly-color-textarea-warning, #f59e0b);
175
+ }
176
+
177
+ .state-warning .textarea-element:focus,
178
+ .validation-warning .textarea-element:focus {
179
+ border-color: var(--nuraly-color-textarea-warning, #f59e0b);
180
+ box-shadow: 0 0 0 1px var(--nuraly-color-textarea-warning, #f59e0b);
181
+ }
182
+
183
+ /* Icons */
184
+ .validation-icon,
185
+ .clear-button {
186
+ position: absolute;
187
+ top: var(--nuraly-padding-textarea, 12px);
188
+ right: var(--nuraly-padding-textarea, 12px);
189
+ z-index: 1;
190
+ }
191
+
192
+ .validation-icon {
193
+ color: var(--nuraly-color-textarea-icon, #8c8c8c);
194
+ pointer-events: none;
195
+ }
196
+
197
+ .validation-icon.error {
198
+ color: var(--nuraly-color-textarea-error, #ef4444);
199
+ }
200
+
201
+ .validation-icon.warning {
202
+ color: var(--nuraly-color-textarea-warning, #f59e0b);
203
+ }
204
+
205
+ .validation-icon.success {
206
+ color: var(--nuraly-color-textarea-success, #10b981);
207
+ }
208
+
209
+ .clear-button {
210
+ display: flex;
211
+ align-items: center;
212
+ justify-content: center;
213
+ background: none;
214
+ border: none;
215
+ cursor: pointer;
216
+ color: var(--nuraly-color-textarea-icon, #8c8c8c);
217
+ padding: 2px;
218
+ border-radius: 4px;
219
+ transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
220
+ }
221
+
222
+ .clear-button:hover {
223
+ color: var(--nuraly-color-textarea-icon-hover, #7c3aed);
224
+ background-color: var(--nuraly-color-surface-hover, rgba(0, 0, 0, 0.05));
225
+ }
226
+
227
+ .clear-button:active {
228
+ color: var(--nuraly-color-textarea-icon-active, #6d28d9);
229
+ }
230
+
231
+ /* Adjust textarea padding when icons are present */
232
+ :host([allow-clear]) .textarea-element,
233
+ :host([has-feedback]) .textarea-element {
234
+ padding-right: calc(var(--nuraly-padding-textarea, 12px) + 16px + 8px);
235
+ }
236
+
237
+ /* Footer */
238
+ .textarea-footer {
239
+ display: flex;
240
+ justify-content: space-between;
241
+ align-items: flex-start;
242
+ gap: var(--nuraly-spacing-textarea-gap, 8px);
243
+ min-height: 20px;
244
+ }
245
+
246
+ .helper-text {
247
+ flex: 1;
248
+ font-size: var(--nuraly-font-size-textarea-small, 14px);
249
+ line-height: 1.4;
250
+ color: var(--nuraly-color-textarea-helper-text, #666666);
251
+ }
252
+
253
+ .validation-message {
254
+ margin-bottom: 4px;
255
+ }
256
+
257
+ .validation-message:last-child {
258
+ margin-bottom: 0;
259
+ }
260
+
261
+ .validation-message.error {
262
+ color: var(--nuraly-color-textarea-error, #ef4444);
263
+ }
264
+
265
+ .validation-message.warning {
266
+ color: var(--nuraly-color-textarea-warning, #f59e0b);
267
+ }
268
+
269
+ .validation-message.success {
270
+ color: var(--nuraly-color-textarea-success, #10b981);
271
+ }
272
+
273
+ .character-count {
274
+ font-size: var(--nuraly-font-size-textarea-small, 14px);
275
+ color: var(--nuraly-color-textarea-counter, #666666);
276
+ white-space: nowrap;
277
+ line-height: 1.4;
278
+ }
279
+
280
+ .character-count.over-limit {
281
+ color: var(--nuraly-color-textarea-counter-over, #ef4444);
282
+ font-weight: 500;
283
+ }
284
+
285
+ /* Responsive adjustments */
286
+ @media (max-width: 640px) {
287
+ .textarea-footer {
288
+ flex-direction: column;
289
+ align-items: stretch;
290
+ }
291
+
292
+ .character-count {
293
+ text-align: right;
294
+ }
295
+ }
296
+
297
+ /* Focus-visible for accessibility */
298
+ .textarea-element:focus-visible {
299
+ outline: 2px solid var(--nuraly-color-textarea-border-focus, #7c3aed);
300
+ outline-offset: 2px;
301
+ }
302
+
303
+ /* High contrast mode support */
304
+ @media (prefers-contrast: high) {
305
+ .textarea-element {
306
+ border-width: 2px;
307
+ }
308
+
309
+ .textarea-element:focus {
310
+ box-shadow: 0 0 0 2px var(--nuraly-color-textarea-border-focus, #7c3aed);
311
+ }
312
+ }
313
+
314
+ /* Reduced motion support */
315
+ @media (prefers-reduced-motion: reduce) {
316
+ .textarea-element,
317
+ .clear-button {
318
+ transition: none;
319
+ }
320
+ }
321
+
322
+ /* ========================================
323
+ * THEME SPECIFIC OVERRIDES
324
+ * ======================================== */
325
+
326
+ /* No theme-specific overrides - themes handle styling through CSS variables */
327
+ `,d=3,h=50;
2
328
  /**
3
329
  * @license
4
330
  * Copyright 2023 Nuraly, Laabidi Aymen
@@ -14,9 +340,80 @@ class c{constructor(t){this._host=t,this._host.addController(this)}get host(){re
14
340
  * @license
15
341
  * Copyright 2023 Nuraly, Laabidi Aymen
16
342
  * SPDX-License-Identifier: MIT
17
- */class b extends c{constructor(t){super(t),this._hasFocus=!1,this._inputDebounceMs=150}get eventHost(){return this._host}get hasFocus(){return this._hasFocus}setInputDebounce(t){this._inputDebounceMs=t}hostConnected(){super.hostConnected(),this.setupEventListeners()}hostDisconnected(){super.hostDisconnected(),this.cleanupEventListeners()}setupEventListeners(){this.safeExecute((()=>{var t,e;const r=this._host;this._textareaElement=null===(t=r.shadowRoot)||void 0===t?void 0:t.querySelector("textarea"),this._clearButtonElement=null===(e=r.shadowRoot)||void 0===e?void 0:e.querySelector(".clear-button"),this._textareaElement&&this.addTextareaEventListeners(),this._clearButtonElement&&this.eventHost.clearable&&this.addClearButtonEventListeners()}),"setupEventListeners")}cleanupEventListeners(){this._inputTimeout&&(clearTimeout(this._inputTimeout),this._inputTimeout=void 0)}handleInput(t){if(this.eventHost.readonly||this.eventHost.disabled)return;const e=t.target,r=e.value;this._inputTimeout&&clearTimeout(this._inputTimeout),this.eventHost.value=r,this.eventHost.autoResize&&this.handleAutoResize(e),this._inputTimeout=setTimeout((()=>{this.dispatchInputEvent(r,t)}),this._inputDebounceMs),this.requestHostUpdate()}handleFocus(t){this.eventHost.disabled||(this._hasFocus=!0,this.requestHostUpdate(),this.dispatchFocusEvent(t))}handleBlur(t){this._hasFocus=!1,this.requestHostUpdate(),this.dispatchBlurEvent(t)}handleKeyDown(t){if(this.eventHost.readonly||this.eventHost.disabled)return;const{key:e,ctrlKey:r,metaKey:a}=t;"Escape"!==e?"Enter"!==e||!r&&!a?this.dispatchKeydownEvent(t):this.handleSubmit(t):this.handleEscape(t)}handleKeyUp(t){this.dispatchKeyupEvent(t)}handlePaste(t){this.eventHost.readonly||this.eventHost.disabled?t.preventDefault():this.dispatchPasteEvent(t)}handleClear(t){if(this.eventHost.readonly||this.eventHost.disabled)return;const e=this.eventHost.value;this.eventHost.value="",this._textareaElement&&this._textareaElement.focus(),this.requestHostUpdate(),this.dispatchClearEvent(e,t)}handleAutoResize(t){if(!this.eventHost.autoResize)return;const e=t||this._textareaElement;e&&this.safeExecute((()=>{e.style.height="auto",e.style.height=`${e.scrollHeight}px`}),"handleAutoResize")}focus(){this.safeExecute((()=>{var t;null===(t=this._textareaElement)||void 0===t||t.focus()}),"focus")}blur(){this.safeExecute((()=>{var t;null===(t=this._textareaElement)||void 0===t||t.blur()}),"blur")}selectAll(){this.safeExecute((()=>{var t;null===(t=this._textareaElement)||void 0===t||t.select()}),"selectAll")}setCursorPosition(t){this.safeExecute((()=>{this._textareaElement&&this._textareaElement.setSelectionRange(t,t)}),"setCursorPosition")}getCursorPosition(){var t,e;return null!==(e=null===(t=this._textareaElement)||void 0===t?void 0:t.selectionStart)&&void 0!==e?e:0}addTextareaEventListeners(){if(!this._textareaElement)return;const t=this._textareaElement;t.addEventListener("input",this.handleInput.bind(this)),t.addEventListener("focus",this.handleFocus.bind(this)),t.addEventListener("blur",this.handleBlur.bind(this)),t.addEventListener("keydown",this.handleKeyDown.bind(this)),t.addEventListener("keyup",this.handleKeyUp.bind(this)),t.addEventListener("paste",this.handlePaste.bind(this))}addClearButtonEventListeners(){this._clearButtonElement&&this._clearButtonElement.addEventListener("click",this.handleClear.bind(this))}handleEscape(t){this.blur(),this.dispatchEscapeEvent(t)}handleSubmit(t){this.dispatchSubmitEvent(t)}dispatchInputEvent(t,e){const r=new CustomEvent("textarea-input",{detail:{value:t,originalEvent:e,cursorPosition:this.getCursorPosition()},bubbles:!0,composed:!0});this.safeExecute((()=>this._host.dispatchEvent(r)),"dispatchInputEvent")}dispatchFocusEvent(t){const e=new CustomEvent("textarea-focus",{detail:{originalEvent:t,value:this.eventHost.value},bubbles:!0,composed:!0});this.safeExecute((()=>this._host.dispatchEvent(e)),"dispatchFocusEvent")}dispatchBlurEvent(t){const e=new CustomEvent("textarea-blur",{detail:{originalEvent:t,value:this.eventHost.value},bubbles:!0,composed:!0});this.safeExecute((()=>this._host.dispatchEvent(e)),"dispatchBlurEvent")}dispatchKeydownEvent(t){const e=new CustomEvent("textarea-keydown",{detail:{originalEvent:t,key:t.key,ctrlKey:t.ctrlKey,metaKey:t.metaKey,value:this.eventHost.value},bubbles:!0,composed:!0});this.safeExecute((()=>this._host.dispatchEvent(e)),"dispatchKeydownEvent")}dispatchKeyupEvent(t){const e=new CustomEvent("textarea-keyup",{detail:{originalEvent:t,key:t.key,value:this.eventHost.value},bubbles:!0,composed:!0});this.safeExecute((()=>this._host.dispatchEvent(e)),"dispatchKeyupEvent")}dispatchPasteEvent(t){const e=new CustomEvent("textarea-paste",{detail:{originalEvent:t,value:this.eventHost.value},bubbles:!0,composed:!0});this.safeExecute((()=>this._host.dispatchEvent(e)),"dispatchPasteEvent")}dispatchClearEvent(t,e){const r=new CustomEvent("textarea-clear",{detail:{previousValue:t,originalEvent:e,value:this.eventHost.value},bubbles:!0,composed:!0});this.safeExecute((()=>this._host.dispatchEvent(r)),"dispatchClearEvent")}dispatchEscapeEvent(t){const e=new CustomEvent("textarea-escape",{detail:{originalEvent:t,value:this.eventHost.value},bubbles:!0,composed:!0});this.safeExecute((()=>this._host.dispatchEvent(e)),"dispatchEscapeEvent")}dispatchSubmitEvent(t){const e=new CustomEvent("textarea-submit",{detail:{originalEvent:t,value:this.eventHost.value},bubbles:!0,composed:!0});this.safeExecute((()=>this._host.dispatchEvent(e)),"dispatchSubmitEvent")}}
343
+ */class p extends c{constructor(t){super(t),this._hasFocus=!1,this._inputDebounceMs=150}get eventHost(){return this._host}get hasFocus(){return this._hasFocus}setInputDebounce(t){this._inputDebounceMs=t}hostConnected(){super.hostConnected(),this.setupEventListeners()}hostDisconnected(){super.hostDisconnected(),this.cleanupEventListeners()}setupEventListeners(){this.safeExecute((()=>{var t,e;const r=this._host;this._textareaElement=null===(t=r.shadowRoot)||void 0===t?void 0:t.querySelector("textarea"),this._clearButtonElement=null===(e=r.shadowRoot)||void 0===e?void 0:e.querySelector(".clear-button"),this._textareaElement&&this.addTextareaEventListeners(),this._clearButtonElement&&this.eventHost.clearable&&this.addClearButtonEventListeners()}),"setupEventListeners")}cleanupEventListeners(){this._inputTimeout&&(clearTimeout(this._inputTimeout),this._inputTimeout=void 0)}handleInput(t){if(this.eventHost.readonly||this.eventHost.disabled)return;const e=t.target,r=e.value;this._inputTimeout&&clearTimeout(this._inputTimeout),this.eventHost.value=r,this.eventHost.autoResize&&this.handleAutoResize(e),this._inputTimeout=setTimeout((()=>{this.dispatchInputEvent(r,t)}),this._inputDebounceMs),this.requestHostUpdate()}handleFocus(t){this.eventHost.disabled||(this._hasFocus=!0,this.requestHostUpdate(),this.dispatchFocusEvent(t))}handleBlur(t){this._hasFocus=!1,this.requestHostUpdate(),this.dispatchBlurEvent(t)}handleKeyDown(t){if(this.eventHost.readonly||this.eventHost.disabled)return;const{key:e,ctrlKey:r,metaKey:a}=t;"Escape"!==e?"Enter"!==e||!r&&!a?this.dispatchKeydownEvent(t):this.handleSubmit(t):this.handleEscape(t)}handleKeyUp(t){this.dispatchKeyupEvent(t)}handlePaste(t){this.eventHost.readonly||this.eventHost.disabled?t.preventDefault():this.dispatchPasteEvent(t)}handleClear(t){if(this.eventHost.readonly||this.eventHost.disabled)return;const e=this.eventHost.value;this.eventHost.value="",this._textareaElement&&this._textareaElement.focus(),this.requestHostUpdate(),this.dispatchClearEvent(e,t)}handleAutoResize(t){if(!this.eventHost.autoResize)return;const e=t||this._textareaElement;e&&this.safeExecute((()=>{e.style.height="auto",e.style.height=`${e.scrollHeight}px`}),"handleAutoResize")}focus(){this.safeExecute((()=>{var t;null===(t=this._textareaElement)||void 0===t||t.focus()}),"focus")}blur(){this.safeExecute((()=>{var t;null===(t=this._textareaElement)||void 0===t||t.blur()}),"blur")}selectAll(){this.safeExecute((()=>{var t;null===(t=this._textareaElement)||void 0===t||t.select()}),"selectAll")}setCursorPosition(t){this.safeExecute((()=>{this._textareaElement&&this._textareaElement.setSelectionRange(t,t)}),"setCursorPosition")}getCursorPosition(){var t,e;return null!==(e=null===(t=this._textareaElement)||void 0===t?void 0:t.selectionStart)&&void 0!==e?e:0}addTextareaEventListeners(){if(!this._textareaElement)return;const t=this._textareaElement;t.addEventListener("input",this.handleInput.bind(this)),t.addEventListener("focus",this.handleFocus.bind(this)),t.addEventListener("blur",this.handleBlur.bind(this)),t.addEventListener("keydown",this.handleKeyDown.bind(this)),t.addEventListener("keyup",this.handleKeyUp.bind(this)),t.addEventListener("paste",this.handlePaste.bind(this))}addClearButtonEventListeners(){this._clearButtonElement&&this._clearButtonElement.addEventListener("click",this.handleClear.bind(this))}handleEscape(t){this.blur(),this.dispatchEscapeEvent(t)}handleSubmit(t){this.dispatchSubmitEvent(t)}dispatchInputEvent(t,e){const r=new CustomEvent("textarea-input",{detail:{value:t,originalEvent:e,cursorPosition:this.getCursorPosition()},bubbles:!0,composed:!0});this.safeExecute((()=>this._host.dispatchEvent(r)),"dispatchInputEvent")}dispatchFocusEvent(t){const e=new CustomEvent("textarea-focus",{detail:{originalEvent:t,value:this.eventHost.value},bubbles:!0,composed:!0});this.safeExecute((()=>this._host.dispatchEvent(e)),"dispatchFocusEvent")}dispatchBlurEvent(t){const e=new CustomEvent("textarea-blur",{detail:{originalEvent:t,value:this.eventHost.value},bubbles:!0,composed:!0});this.safeExecute((()=>this._host.dispatchEvent(e)),"dispatchBlurEvent")}dispatchKeydownEvent(t){const e=new CustomEvent("textarea-keydown",{detail:{originalEvent:t,key:t.key,ctrlKey:t.ctrlKey,metaKey:t.metaKey,value:this.eventHost.value},bubbles:!0,composed:!0});this.safeExecute((()=>this._host.dispatchEvent(e)),"dispatchKeydownEvent")}dispatchKeyupEvent(t){const e=new CustomEvent("textarea-keyup",{detail:{originalEvent:t,key:t.key,value:this.eventHost.value},bubbles:!0,composed:!0});this.safeExecute((()=>this._host.dispatchEvent(e)),"dispatchKeyupEvent")}dispatchPasteEvent(t){const e=new CustomEvent("textarea-paste",{detail:{originalEvent:t,value:this.eventHost.value},bubbles:!0,composed:!0});this.safeExecute((()=>this._host.dispatchEvent(e)),"dispatchPasteEvent")}dispatchClearEvent(t,e){const r=new CustomEvent("textarea-clear",{detail:{previousValue:t,originalEvent:e,value:this.eventHost.value},bubbles:!0,composed:!0});this.safeExecute((()=>this._host.dispatchEvent(r)),"dispatchClearEvent")}dispatchEscapeEvent(t){const e=new CustomEvent("textarea-escape",{detail:{originalEvent:t,value:this.eventHost.value},bubbles:!0,composed:!0});this.safeExecute((()=>this._host.dispatchEvent(e)),"dispatchEscapeEvent")}dispatchSubmitEvent(t){const e=new CustomEvent("textarea-submit",{detail:{originalEvent:t,value:this.eventHost.value},bubbles:!0,composed:!0});this.safeExecute((()=>this._host.dispatchEvent(e)),"dispatchSubmitEvent")}}
18
344
  /**
19
345
  * @license
20
346
  * Copyright 2023 Nuraly, Laabidi Aymen
21
347
  * SPDX-License-Identifier: MIT
22
- */var x=function(t,e,r,a){for(var i,o=arguments.length,s=o<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,r):a,n=t.length-1;n>=0;n--)(i=t[n])&&(s=(o<3?i(s):o>3?i(e,r,s):i(e,r))||s);return o>3&&s&&Object.defineProperty(e,r,s),s},p=function(t,e,r,a){return new(r||(r=Promise))((function(i,o){function s(t){try{l(a.next(t))}catch(t){o(t)}}function n(t){try{l(a.throw(t))}catch(t){o(t)}}function l(t){var e;t.done?i(t.value):(e=t.value,e instanceof r?e:new r((function(t){t(e)}))).then(s,n)}l((a=a.apply(t,e||[])).next())}))};let f=class extends(n(e)){constructor(){super(),this.validationController=new v(this),this.eventController=new b(this),this.disabled=!1,this.readonly=!1,this.state="default",this.value="",this.size="medium",this.variant="underlined",this.resize="vertical",this.rows=d,this.cols=h,this.placeholder="",this.autocomplete="off",this.allowClear=!1,this.showCount=!1,this.autoResize=!1,this.rules=[],this.validateOnChange=!0,this.validateOnBlur=!0,this.hasFeedback=!1,this.isFocused=!1,this.characterCount=0,this.characterCount=this.value.length,this.setupControllerListeners()}get clearable(){return this.allowClear}setupControllerListeners(){this.addEventListener("textarea-validation",(t=>{this.validationResult=t.detail.validationResult})),this.addEventListener("textarea-input",(t=>{this.handleControllerInput(t.detail.value)})),this.addEventListener("textarea-focus",(()=>{this.isFocused=!0})),this.addEventListener("textarea-blur",(()=>{this.isFocused=!1,this.validateOnBlur&&this.validationController.validateOnBlurIfEnabled()})),this.addEventListener("textarea-clear",(t=>{this.handleControllerClear(t.detail.previousValue)}))}handleControllerInput(t){this.maxLength&&t.length>this.maxLength?this.value=t.slice(0,this.maxLength):this.value=t,this.characterCount=this.value.length,this.autoResizeIfNeeded(),this.dispatchChangeEvent(),this.validateOnChange&&this.validationController.validateOnChangeIfEnabled(this.value)}handleControllerClear(t){this.characterCount=0,this.dispatchChangeEvent(),this.dispatchEvent(new CustomEvent("nr-clear",{detail:{value:this.value,previousValue:t},bubbles:!0}))}connectedCallback(){super.connectedCallback(),this.setupResizeObserver()}disconnectedCallback(){super.disconnectedCallback(),this.cleanupResizeObserver()}firstUpdated(t){super.firstUpdated(t),this.updateTextareaValue(),this.autoResizeIfNeeded(),this.resizeObserver&&this.textareaElement&&this.resizeObserver.observe(this.textareaElement),this.eventController.setupEventListeners()}updated(t){super.updated(t),t.has("value")&&(this.characterCount=this.value.length,this.updateTextareaValue(),this.autoResizeIfNeeded()),t.has("autoResize")&&this.autoResizeIfNeeded(),t.has("rules")&&(this.validationController.clearValidation(),this.rules.length>0&&this.value&&this.validationController.validate(this.value))}setupResizeObserver(){"undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver((t=>{for(const e of t){const{width:t,height:r}=e.contentRect;this.dispatchResizeEvent(t,r)}})))}cleanupResizeObserver(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=void 0)}updateTextareaValue(){this.textareaElement&&this.textareaElement.value!==this.value&&(this.textareaElement.value=this.value)}autoResizeIfNeeded(){if(!this.autoResize||!this.textareaElement)return;this.textareaElement.style.height="auto";let t=this.textareaElement.scrollHeight;this.minHeight&&t<this.minHeight&&(t=this.minHeight),this.maxHeight&&t>this.maxHeight&&(t=this.maxHeight),this.textareaElement.style.height=`${t}px`}handleInput(t){this.eventController.handleInput(t)}handleFocus(t){this.eventController.handleFocus(t),this.dispatchEvent(new CustomEvent("nr-focus",{detail:{focused:!0,originalEvent:t},bubbles:!0}))}handleBlur(t){this.eventController.handleBlur(t),this.dispatchEvent(new CustomEvent("nr-blur",{detail:{focused:!1,originalEvent:t},bubbles:!0}))}handleClear(){this.eventController.handleClear()}dispatchChangeEvent(){const t={value:this.value,length:this.characterCount,exceedsMaxLength:!!this.maxLength&&this.characterCount>this.maxLength,validation:this.validationResult};this.dispatchEvent(new CustomEvent("nr-textarea-change",{detail:t,bubbles:!0}))}dispatchResizeEvent(t,e){const r={width:t,height:e,direction:this.resize};this.dispatchEvent(new CustomEvent("nr-resize",{detail:r,bubbles:!0}))}focus(t){this.eventController.focus(),(void 0!==(null==t?void 0:t.cursor)||(null==t?void 0:t.select))&&setTimeout((()=>{this.textareaElement&&(void 0!==(null==t?void 0:t.cursor)?"number"==typeof t.cursor?this.eventController.setCursorPosition(t.cursor):"start"===t.cursor?this.eventController.setCursorPosition(0):"end"===t.cursor?this.eventController.setCursorPosition(this.value.length):"all"===t.cursor&&this.eventController.selectAll():(null==t?void 0:t.select)&&this.eventController.selectAll())}))}blur(){this.eventController.blur()}getValidationResult(){return this.validationController.validationResult}validate(){return p(this,void 0,void 0,(function*(){return(yield this.validationController.validate(this.value)).isValid}))}clearValidation(){this.validationController.clearValidation()}clear(){this.eventController.handleClear()}addRule(t){this.validationController.addRule(t)}removeRule(t){this.validationController.removeRule(t)}clearRules(){this.validationController.clearRules()}getValidationStatus(){var t;const e=this.validationController.validationResult;return{isValid:null===(t=null==e?void 0:e.isValid)||void 0===t||t,errors:"error"===(null==e?void 0:e.level)?e.messages:[],warnings:"warning"===(null==e?void 0:e.level)?e.messages:[]}}isValid(){return this.validationController.isValid()}checkValidity(){return this.validationController.isValid()}reportValidity(){const t=this.validationController.isValid();return t||this.validationController.validate(this.value),t}setCustomValidity(t){t?this.validationController.addRule({validator:()=>!1,message:t,level:"error",blocking:!0}):this.validationController.removeRule((e=>e.message===t))}validateTextarea(){return p(this,void 0,void 0,(function*(){return(yield this.validationController.validate(this.value)).isValid}))}setValidationStatus(t){this.validationResult=t,"error"===t.level?this.state="error":"warning"===t.level?this.state="warning":t.isValid&&(this.state="success"),this.requestUpdate()}renderLabel(){return r`<div class="textarea-label"><slot name="label"></slot>${this.required?r`<span class="required-indicator">*</span>`:""}</div>`}renderTextarea(){return r`<textarea class="textarea-element" .value="${this.value}" .disabled="${this.disabled}" .readOnly="${this.readonly}" .required="${this.required||!1}" .rows="${this.rows}" .cols="${this.cols}" .placeholder="${this.placeholder}" .autocomplete="${this.autocomplete}" .name="${this.name||""}" maxlength="${this.maxLength||""}" style="resize:${this.resize}" @input="${this.handleInput}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea>`}renderValidationIcon(){if(!this.hasFeedback||!this.validationResult)return"";const t="error"===this.validationResult.level?"error":"warning"===this.validationResult.level?"warning":"check-circle";return r`<nr-icon class="validation-icon ${this.validationResult.level}" name="${t}" size="small"></nr-icon>`}renderClearButton(){return!this.allowClear||!this.value||this.disabled||this.readonly?"":r`<button class="clear-button" type="button" @click="${this.handleClear}" aria-label="Clear textarea"><nr-icon name="x" size="small"></nr-icon></button>`}renderCharacterCount(){if(!this.showCount)return"";const t=this.maxLength?` / ${this.maxLength}`:"",e=this.maxLength&&this.characterCount>this.maxLength;return r`<div class="character-count ${e?"over-limit":""}">${this.characterCount}${t}</div>`}renderHelperText(){var t,e;const a=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector('slot[name="helper-text"]'),i=null==a?void 0:a.assignedNodes().length,o=null===(e=this.validationResult)||void 0===e?void 0:e.messages.length;return i||o?r`<div class="helper-text">${o?this.validationResult.messages.map((t=>r`<div class="validation-message ${this.validationResult.level}">${t}</div>`)):r`<slot name="helper-text"></slot>`}</div>`:""}render(){const t=["textarea-container",`size-${this.size}`,`variant-${this.variant}`,`state-${this.state}`,this.isFocused?"focused":"",this.disabled?"disabled":"",this.readonly?"readonly":"",this.validationResult?`validation-${this.validationResult.level}`:""].filter(Boolean).join(" ");return r`<div class="${t}">${this.renderLabel()}<div class="textarea-wrapper"><div class="addon-before"><slot name="addon-before"></slot></div><div class="textarea-input-container">${this.renderTextarea()} ${this.renderValidationIcon()} ${this.renderClearButton()}</div><div class="addon-after"><slot name="addon-after"></slot></div></div><div class="textarea-footer">${this.renderHelperText()} ${this.renderCharacterCount()}</div></div>`}};f.styles=l,x([a("textarea")],f.prototype,"textareaElement",void 0),x([i({type:Boolean,reflect:!0})],f.prototype,"disabled",void 0),x([i({type:Boolean,reflect:!0})],f.prototype,"readonly",void 0),x([i({type:String,reflect:!0})],f.prototype,"state",void 0),x([i({type:String})],f.prototype,"value",void 0),x([i({type:String})],f.prototype,"size",void 0),x([i({type:String,reflect:!0})],f.prototype,"variant",void 0),x([i({type:String})],f.prototype,"resize",void 0),x([i({type:Number})],f.prototype,"rows",void 0),x([i({type:Number})],f.prototype,"cols",void 0),x([i({type:String})],f.prototype,"placeholder",void 0),x([i({type:String})],f.prototype,"autocomplete",void 0),x([i({type:String})],f.prototype,"name",void 0),x([i({type:Boolean})],f.prototype,"required",void 0),x([i({type:Boolean,reflect:!0})],f.prototype,"allowClear",void 0),x([i({type:Boolean,reflect:!0})],f.prototype,"showCount",void 0),x([i({type:Number})],f.prototype,"maxLength",void 0),x([i({type:Number})],f.prototype,"minHeight",void 0),x([i({type:Number})],f.prototype,"maxHeight",void 0),x([i({type:Boolean})],f.prototype,"autoResize",void 0),x([i({type:Array})],f.prototype,"rules",void 0),x([i({type:Boolean,attribute:"validate-on-change"})],f.prototype,"validateOnChange",void 0),x([i({type:Boolean,attribute:"validate-on-blur"})],f.prototype,"validateOnBlur",void 0),x([i({type:Boolean,attribute:"has-feedback"})],f.prototype,"hasFeedback",void 0),x([i({type:String,attribute:"validation-message"})],f.prototype,"validationMessage",void 0),x([o()],f.prototype,"isFocused",void 0),x([o()],f.prototype,"validationResult",void 0),x([o()],f.prototype,"characterCount",void 0),f=x([s("nr-textarea")],f);export{f as NrTextareaElement};
348
+ */var b=function(t,e,r,a){for(var i,o=arguments.length,s=o<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,r):a,n=t.length-1;n>=0;n--)(i=t[n])&&(s=(o<3?i(s):o>3?i(e,r,s):i(e,r))||s);return o>3&&s&&Object.defineProperty(e,r,s),s},x=function(t,e,r,a){return new(r||(r=Promise))((function(i,o){function s(t){try{l(a.next(t))}catch(t){o(t)}}function n(t){try{l(a.throw(t))}catch(t){o(t)}}function l(t){var e;t.done?i(t.value):(e=t.value,e instanceof r?e:new r((function(t){t(e)}))).then(s,n)}l((a=a.apply(t,e||[])).next())}))};let f=class extends(n(e)){constructor(){super(),this.validationController=new v(this),this.eventController=new p(this),this.disabled=!1,this.readonly=!1,this.state="default",this.value="",this.size="medium",this.variant="underlined",this.resize="vertical",this.rows=d,this.cols=h,this.placeholder="",this.autocomplete="off",this.allowClear=!1,this.showCount=!1,this.autoResize=!1,this.rules=[],this.validateOnChange=!0,this.validateOnBlur=!0,this.hasFeedback=!1,this.isFocused=!1,this.characterCount=0,this.characterCount=this.value.length,this.setupControllerListeners()}get clearable(){return this.allowClear}setupControllerListeners(){this.addEventListener("textarea-validation",(t=>{this.validationResult=t.detail.validationResult})),this.addEventListener("textarea-input",(t=>{this.handleControllerInput(t.detail.value)})),this.addEventListener("textarea-focus",(()=>{this.isFocused=!0})),this.addEventListener("textarea-blur",(()=>{this.isFocused=!1,this.validateOnBlur&&this.validationController.validateOnBlurIfEnabled()})),this.addEventListener("textarea-clear",(t=>{this.handleControllerClear(t.detail.previousValue)}))}handleControllerInput(t){this.maxLength&&t.length>this.maxLength?this.value=t.slice(0,this.maxLength):this.value=t,this.characterCount=this.value.length,this.autoResizeIfNeeded(),this.dispatchChangeEvent(),this.validateOnChange&&this.validationController.validateOnChangeIfEnabled(this.value)}handleControllerClear(t){this.characterCount=0,this.dispatchChangeEvent(),this.dispatchEvent(new CustomEvent("nr-clear",{detail:{value:this.value,previousValue:t},bubbles:!0}))}connectedCallback(){super.connectedCallback(),this.setupResizeObserver()}disconnectedCallback(){super.disconnectedCallback(),this.cleanupResizeObserver()}firstUpdated(t){super.firstUpdated(t),this.updateTextareaValue(),this.autoResizeIfNeeded(),this.resizeObserver&&this.textareaElement&&this.resizeObserver.observe(this.textareaElement),this.eventController.setupEventListeners()}updated(t){super.updated(t),t.has("value")&&(this.characterCount=this.value.length,this.updateTextareaValue(),this.autoResizeIfNeeded()),t.has("autoResize")&&this.autoResizeIfNeeded(),t.has("rules")&&(this.validationController.clearValidation(),this.rules.length>0&&this.value&&this.validationController.validate(this.value))}setupResizeObserver(){"undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver((t=>{for(const e of t){const{width:t,height:r}=e.contentRect;this.dispatchResizeEvent(t,r)}})))}cleanupResizeObserver(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=void 0)}updateTextareaValue(){this.textareaElement&&this.textareaElement.value!==this.value&&(this.textareaElement.value=this.value)}autoResizeIfNeeded(){if(!this.autoResize||!this.textareaElement)return;this.textareaElement.style.height="auto";let t=this.textareaElement.scrollHeight;this.minHeight&&t<this.minHeight&&(t=this.minHeight),this.maxHeight&&t>this.maxHeight&&(t=this.maxHeight),this.textareaElement.style.height=`${t}px`}handleInput(t){this.eventController.handleInput(t)}handleFocus(t){this.eventController.handleFocus(t),this.dispatchEvent(new CustomEvent("nr-focus",{detail:{focused:!0,originalEvent:t},bubbles:!0}))}handleBlur(t){this.eventController.handleBlur(t),this.dispatchEvent(new CustomEvent("nr-blur",{detail:{focused:!1,originalEvent:t},bubbles:!0}))}handleClear(){this.eventController.handleClear()}dispatchChangeEvent(){const t={value:this.value,length:this.characterCount,exceedsMaxLength:!!this.maxLength&&this.characterCount>this.maxLength,validation:this.validationResult};this.dispatchEvent(new CustomEvent("nr-textarea-change",{detail:t,bubbles:!0}))}dispatchResizeEvent(t,e){const r={width:t,height:e,direction:this.resize};this.dispatchEvent(new CustomEvent("nr-resize",{detail:r,bubbles:!0}))}focus(t){this.eventController.focus(),(void 0!==(null==t?void 0:t.cursor)||(null==t?void 0:t.select))&&setTimeout((()=>{this.textareaElement&&(void 0!==(null==t?void 0:t.cursor)?"number"==typeof t.cursor?this.eventController.setCursorPosition(t.cursor):"start"===t.cursor?this.eventController.setCursorPosition(0):"end"===t.cursor?this.eventController.setCursorPosition(this.value.length):"all"===t.cursor&&this.eventController.selectAll():(null==t?void 0:t.select)&&this.eventController.selectAll())}))}blur(){this.eventController.blur()}getValidationResult(){return this.validationController.validationResult}validate(){return x(this,void 0,void 0,(function*(){return(yield this.validationController.validate(this.value)).isValid}))}clearValidation(){this.validationController.clearValidation()}clear(){this.eventController.handleClear()}addRule(t){this.validationController.addRule(t)}removeRule(t){this.validationController.removeRule(t)}clearRules(){this.validationController.clearRules()}getValidationStatus(){var t;const e=this.validationController.validationResult;return{isValid:null===(t=null==e?void 0:e.isValid)||void 0===t||t,errors:"error"===(null==e?void 0:e.level)?e.messages:[],warnings:"warning"===(null==e?void 0:e.level)?e.messages:[]}}isValid(){return this.validationController.isValid()}checkValidity(){return this.validationController.isValid()}reportValidity(){const t=this.validationController.isValid();return t||this.validationController.validate(this.value),t}setCustomValidity(t){t?this.validationController.addRule({validator:()=>!1,message:t,level:"error",blocking:!0}):this.validationController.removeRule((e=>e.message===t))}validateTextarea(){return x(this,void 0,void 0,(function*(){return(yield this.validationController.validate(this.value)).isValid}))}setValidationStatus(t){this.validationResult=t,"error"===t.level?this.state="error":"warning"===t.level?this.state="warning":t.isValid&&(this.state="success"),this.requestUpdate()}renderLabel(){return r`
349
+ <div class="textarea-label">
350
+ <slot name="label"></slot>
351
+ ${this.required?r`<span class="required-indicator">*</span>`:""}
352
+ </div>
353
+ `}renderTextarea(){return r`
354
+ <textarea
355
+ class="textarea-element"
356
+ .value=${this.value}
357
+ .disabled=${this.disabled}
358
+ .readOnly=${this.readonly}
359
+ .required=${this.required||!1}
360
+ .rows=${this.rows}
361
+ .cols=${this.cols}
362
+ .placeholder=${this.placeholder}
363
+ .autocomplete=${this.autocomplete}
364
+ .name=${this.name||""}
365
+ maxlength=${this.maxLength||""}
366
+ style="resize: ${this.resize}"
367
+ @input=${this.handleInput}
368
+ @focus=${this.handleFocus}
369
+ @blur=${this.handleBlur}
370
+ ></textarea>
371
+ `}renderValidationIcon(){if(!this.hasFeedback||!this.validationResult)return"";const t="error"===this.validationResult.level?"error":"warning"===this.validationResult.level?"warning":"check-circle";return r`
372
+ <nr-icon
373
+ class="validation-icon ${this.validationResult.level}"
374
+ name="${t}"
375
+ size="small"
376
+ ></nr-icon>
377
+ `}renderClearButton(){return!this.allowClear||!this.value||this.disabled||this.readonly?"":r`
378
+ <button
379
+ class="clear-button"
380
+ type="button"
381
+ @click=${this.handleClear}
382
+ aria-label="Clear textarea"
383
+ >
384
+ <nr-icon name="x" size="small"></nr-icon>
385
+ </button>
386
+ `}renderCharacterCount(){if(!this.showCount)return"";const t=this.maxLength?` / ${this.maxLength}`:"",e=this.maxLength&&this.characterCount>this.maxLength;return r`
387
+ <div class="character-count ${e?"over-limit":""}">
388
+ ${this.characterCount}${t}
389
+ </div>
390
+ `}renderHelperText(){var t,e;const a=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector('slot[name="helper-text"]'),i=null==a?void 0:a.assignedNodes().length,o=null===(e=this.validationResult)||void 0===e?void 0:e.messages.length;return i||o?r`
391
+ <div class="helper-text">
392
+ ${o?this.validationResult.messages.map((t=>r`<div class="validation-message ${this.validationResult.level}">${t}</div>`)):r`<slot name="helper-text"></slot>`}
393
+ </div>
394
+ `:""}render(){const t=["textarea-container",`size-${this.size}`,`variant-${this.variant}`,`state-${this.state}`,this.isFocused?"focused":"",this.disabled?"disabled":"",this.readonly?"readonly":"",this.validationResult?`validation-${this.validationResult.level}`:""].filter(Boolean).join(" ");return r`
395
+ <div class="${t}">
396
+ ${this.renderLabel()}
397
+
398
+ <div class="textarea-wrapper">
399
+ <div class="addon-before">
400
+ <slot name="addon-before"></slot>
401
+ </div>
402
+
403
+ <div class="textarea-input-container">
404
+ ${this.renderTextarea()}
405
+ ${this.renderValidationIcon()}
406
+ ${this.renderClearButton()}
407
+ </div>
408
+
409
+ <div class="addon-after">
410
+ <slot name="addon-after"></slot>
411
+ </div>
412
+ </div>
413
+
414
+ <div class="textarea-footer">
415
+ ${this.renderHelperText()}
416
+ ${this.renderCharacterCount()}
417
+ </div>
418
+ </div>
419
+ `}};f.styles=l,b([a("textarea")],f.prototype,"textareaElement",void 0),b([i({type:Boolean,reflect:!0})],f.prototype,"disabled",void 0),b([i({type:Boolean,reflect:!0})],f.prototype,"readonly",void 0),b([i({type:String,reflect:!0})],f.prototype,"state",void 0),b([i({type:String})],f.prototype,"value",void 0),b([i({type:String})],f.prototype,"size",void 0),b([i({type:String,reflect:!0})],f.prototype,"variant",void 0),b([i({type:String})],f.prototype,"resize",void 0),b([i({type:Number})],f.prototype,"rows",void 0),b([i({type:Number})],f.prototype,"cols",void 0),b([i({type:String})],f.prototype,"placeholder",void 0),b([i({type:String})],f.prototype,"autocomplete",void 0),b([i({type:String})],f.prototype,"name",void 0),b([i({type:Boolean})],f.prototype,"required",void 0),b([i({type:Boolean,reflect:!0})],f.prototype,"allowClear",void 0),b([i({type:Boolean,reflect:!0})],f.prototype,"showCount",void 0),b([i({type:Number})],f.prototype,"maxLength",void 0),b([i({type:Number})],f.prototype,"minHeight",void 0),b([i({type:Number})],f.prototype,"maxHeight",void 0),b([i({type:Boolean})],f.prototype,"autoResize",void 0),b([i({type:Array})],f.prototype,"rules",void 0),b([i({type:Boolean,attribute:"validate-on-change"})],f.prototype,"validateOnChange",void 0),b([i({type:Boolean,attribute:"validate-on-blur"})],f.prototype,"validateOnBlur",void 0),b([i({type:Boolean,attribute:"has-feedback"})],f.prototype,"hasFeedback",void 0),b([i({type:String,attribute:"validation-message"})],f.prototype,"validationMessage",void 0),b([o()],f.prototype,"isFocused",void 0),b([o()],f.prototype,"validationResult",void 0),b([o()],f.prototype,"characterCount",void 0),f=b([s("nr-textarea")],f);export{f as NrTextareaElement};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuralyui/textarea",
3
- "version": "0.1.3",
3
+ "version": "0.1.4",
4
4
  "description": "Textarea component for Nuraly UI Library with validation, resize options, and interactive features",
5
5
  "main": "index.js",
6
6
  "type": "module",