@nuralyui/input 0.0.9 → 0.0.11

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 (56) hide show
  1. package/bundle.js +1348 -0
  2. package/input.component.d.ts +118 -26
  3. package/input.component.js +230 -229
  4. package/input.component.js.map +1 -1
  5. package/input.style.js +433 -128
  6. package/input.style.js.map +1 -1
  7. package/input.types.d.ts +90 -1
  8. package/input.types.js +73 -0
  9. package/input.types.js.map +1 -1
  10. package/package.json +16 -2
  11. package/demo/input-demo.d.ts +0 -19
  12. package/demo/input-demo.d.ts.map +0 -1
  13. package/demo/input-demo.js +0 -339
  14. package/demo/input-demo.js.map +0 -1
  15. package/index.d.ts.map +0 -1
  16. package/input.component.d.ts.map +0 -1
  17. package/input.style.d.ts.map +0 -1
  18. package/input.style.variable.d.ts +0 -2
  19. package/input.style.variable.d.ts.map +0 -1
  20. package/input.style.variable.js +0 -174
  21. package/input.style.variable.js.map +0 -1
  22. package/input.types.d.ts.map +0 -1
  23. package/mixins/focus-mixin.d.ts +0 -60
  24. package/mixins/focus-mixin.d.ts.map +0 -1
  25. package/mixins/focus-mixin.js +0 -65
  26. package/mixins/focus-mixin.js.map +0 -1
  27. package/mixins/index.d.ts +0 -9
  28. package/mixins/index.d.ts.map +0 -1
  29. package/mixins/index.js +0 -9
  30. package/mixins/index.js.map +0 -1
  31. package/mixins/number-mixin.d.ts +0 -51
  32. package/mixins/number-mixin.d.ts.map +0 -1
  33. package/mixins/number-mixin.js +0 -131
  34. package/mixins/number-mixin.js.map +0 -1
  35. package/mixins/selection-mixin.d.ts +0 -57
  36. package/mixins/selection-mixin.d.ts.map +0 -1
  37. package/mixins/selection-mixin.js +0 -80
  38. package/mixins/selection-mixin.js.map +0 -1
  39. package/react.d.ts.map +0 -1
  40. package/test/hy-input_test.d.ts +0 -2
  41. package/test/hy-input_test.d.ts.map +0 -1
  42. package/test/hy-input_test.js +0 -159
  43. package/test/hy-input_test.js.map +0 -1
  44. package/utils/index.d.ts +0 -8
  45. package/utils/index.d.ts.map +0 -1
  46. package/utils/index.js +0 -8
  47. package/utils/index.js.map +0 -1
  48. package/utils/input-renderers.d.ts +0 -54
  49. package/utils/input-renderers.d.ts.map +0 -1
  50. package/utils/input-renderers.js +0 -174
  51. package/utils/input-renderers.js.map +0 -1
  52. package/utils/input-validation.utils.d.ts +0 -26
  53. package/utils/input-validation.utils.d.ts.map +0 -1
  54. package/utils/input-validation.utils.js +0 -105
  55. package/utils/input-validation.utils.js.map +0 -1
  56. package/validation.d.ts.map +0 -1
package/demo/input-demo.js DELETED
@@ -1,339 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2023 Google Laabidi Aymen
4
- * SPDX-License-Identifier: MIT
5
- */
6
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
7
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
8
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
9
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
10
- return c > 3 && r && Object.defineProperty(target, key, r), r;
11
- };
12
- import { LitElement, html } from 'lit';
13
- import { customElement } from 'lit/decorators.js';
14
- import '../input.component';
15
- let ElButtonDemoElement = class ElButtonDemoElement extends LitElement {
16
- _changeHandler(_e) {
17
- console.log(_e);
18
- }
19
- _focusHandler(_e) {
20
- console.log('e', _e);
21
- }
22
- enterPressedHandler(e) {
23
- console.log('e ', e.detail.value);
24
- }
25
- render() {
26
- return html ` <div>
27
- <h3>Text input</h3>
28
- <nr-input
29
- placeholder="Enter your FullName"
30
- size="large"
31
- @nr-input=${this._changeHandler}
32
- @nr-focus=${this._focusHandler}
33
- @nr-enter=${this.enterPressedHandler}
34
- >
35
- <span slot="label">Large input</span>
36
- <span slot="helper-text">helper</span>
37
- </nr-input>
38
- <br />
39
- <br />
40
-
41
- <nr-input
42
- placeholder="Enter your FullName"
43
- ?withCopy=${true}
44
- size="large"
45
- @nr-input=${this._changeHandler}
46
- @nr-focus=${this._focusHandler}
47
- >
48
- <span slot="label">Text input with copy</span>
49
- <span slot="helper-text">helper</span>
50
- </nr-input>
51
- <br />
52
- <br />
53
- <nr-input
54
- placeholder="Enter your FullName"
55
- size="medium"
56
- @nr-input=${this._changeHandler}
57
- @nr-focus=${this._focusHandler}
58
- >
59
- <span slot="label">Medium input</span>
60
- <span slot="helper-text">helper</span>
61
- </nr-input>
62
- <br />
63
- <br />
64
- <nr-input
65
- placeholder="Enter your FullName"
66
- size="small"
67
- @nr-input=${this._changeHandler}
68
- @nr-focus=${this._focusHandler}
69
- >
70
- <span slot="label">Small input</span>
71
- <span slot="helper-text">helper</span>
72
- </nr-input>
73
- <br />
74
- <br />
75
- <nr-input size="small" @nr-input=${this._changeHandler} @nr-focus=${this._focusHandler}>
76
- <span slot="label">without placeholder</span>
77
- </nr-input>
78
- <br />
79
- <br />
80
- <nr-input
81
- placeholder="Enter your FullName"
82
- state="error"
83
- size="large"
84
- @nr-input=${this._changeHandler}
85
- @nr-focus=${this._focusHandler}
86
- >
87
- <span slot="label">Error input</span>
88
- <span slot="helper-text">Error input helper</span>
89
- </nr-input>
90
- <br />
91
- <br />
92
- <nr-input
93
- placeholder="Enter your FullName"
94
- state="error"
95
- size="large"
96
- @nr-input=${this._changeHandler}
97
- @nr-focus=${this._focusHandler}
98
- >
99
- <span slot="label">Error input without helper</span>
100
- </nr-input>
101
- <br />
102
- <br />
103
- <nr-input
104
- placeholder="Enter your FullName"
105
- state="warning"
106
- size="large"
107
- @nr-input=${this._changeHandler}
108
- @nr-focus=${this._focusHandler}
109
- >
110
- <span slot="label">Warning input</span>
111
- <span slot="helper-text">Warning input helper</span>
112
- </nr-input>
113
- <br />
114
- <br />
115
- <nr-input
116
- placeholder="Enter your FullName"
117
- state="warning"
118
- size="large"
119
- @nr-input=${this._changeHandler}
120
- @nr-focus=${this._focusHandler}
121
- >
122
- <span slot="label">Warning input without helper</span>
123
- </nr-input>
124
- <br />
125
- <br />
126
- <nr-input
127
- placeholder="Enter your FullName"
128
- disabled
129
- state="error"
130
- size="large"
131
- @nr-input=${this._changeHandler}
132
- @nr-focus=${this._focusHandler}
133
- >
134
- <span slot="label">disabled input error </span>
135
- <span slot="helper-text">helper</span>
136
- </nr-input>
137
- <br />
138
- <br />
139
- <nr-input
140
- placeholder="Enter your FullName"
141
- disabled
142
- state="warning"
143
- size="large"
144
- @nr-input=${this._changeHandler}
145
- @nr-focus=${this._focusHandler}
146
- >
147
- <span slot="label">disabled input warning </span>
148
- <span slot="helper-text">helper</span>
149
- </nr-input>
150
- <br />
151
- <br />
152
- <nr-input
153
- placeholder="Enter your FullName"
154
- size="large"
155
- @nr-input=${this._changeHandler}
156
- @nr-focus=${this._focusHandler}
157
- >
158
- <span slot="helper-text">without label</span>
159
- </nr-input>
160
- <br /><br />
161
- <nr-input
162
- placeholder="Enter your FullName"
163
- size="large"
164
- @nr-input=${this._changeHandler}
165
- @nr-focus=${this._focusHandler}
166
- >
167
- </nr-input>
168
- <br /><br />
169
-
170
- <nr-input
171
- ?disabled=${true}
172
- placeholder="Enter your FullName"
173
- size="large"
174
- @nr-input=${this._changeHandler}
175
- @nr-focus=${this._focusHandler}
176
- >
177
- <span slot="label">Disabled input</span>
178
- </nr-input>
179
-
180
- <br /><br />
181
- <nr-input
182
- placeholder="Enter your FullName"
183
- ?disabled=${true}
184
- size="large"
185
- @nr-input=${this._changeHandler}
186
- @nr-focus=${this._focusHandler}
187
- >
188
- <span slot="label">Disabled input with label and helper</span>
189
- <span slot="helper-text">helper</span>
190
- </nr-input>
191
-
192
- <br /><br />
193
- <h3>Password input</h3>
194
-
195
- <nr-input
196
- placeholder="your password please"
197
- size="large"
198
- type="password"
199
- @nr-input=${this._changeHandler}
200
- @nr-focus=${this._focusHandler}
201
- >
202
- <span slot="label">Password input</span>
203
- </nr-input>
204
- <br /><br />
205
- <nr-input
206
- disabled
207
- placeholder="your password please"
208
- size="large"
209
- type="password"
210
- @nr-input=${this._changeHandler}
211
- @nr-focus=${this._focusHandler}
212
- >
213
- <span slot="label">Password input disabled</span>
214
- </nr-input>
215
- <br /><br />
216
- <nr-input
217
- placeholder="your password please"
218
- size="large"
219
- type="password"
220
- state="error"
221
- @nr-input=${this._changeHandler}
222
- @nr-focus=${this._focusHandler}
223
- >
224
- <span slot="label">Password input error</span>
225
- </nr-input>
226
- <br /><br />
227
- <nr-input
228
- placeholder="your password please"
229
- disabled
230
- size="large"
231
- type="password"
232
- state="error"
233
- @nr-input=${this._changeHandler}
234
- @nr-focus=${this._focusHandler}
235
- >
236
- <span slot="label">Password input error disabled</span>
237
- </nr-input>
238
- <br /><br />
239
- <nr-input
240
- placeholder="your password please"
241
- size="large"
242
- type="password"
243
- state="warning"
244
- @nr-input=${this._changeHandler}
245
- @nr-focus=${this._focusHandler}
246
- >
247
- <span slot="label">Password input warning </span>
248
- </nr-input>
249
- <br /><br />
250
- <nr-input
251
- placeholder="your password please"
252
- disabled
253
- size="large"
254
- type="password"
255
- state="warning"
256
- @nr-input=${this._changeHandler}
257
- @nr-focus=${this._focusHandler}
258
- >
259
- <span slot="label">Password input warning disabled</span>
260
- </nr-input>
261
- <br /><br />
262
- <h3>Number input</h3>
263
-
264
- <nr-input
265
- placeholder="Enter your age"
266
- size="large"
267
- type="number"
268
- @nr-input=${this._changeHandler}
269
- @nr-focus=${this._focusHandler}
270
- >
271
- <span slot="label">Default number input </span>
272
- </nr-input>
273
-
274
- <br /><br />
275
- <nr-input
276
- state="error"
277
- placeholder="Enter your age"
278
- size="large"
279
- type="number"
280
- @nr-input=${this._changeHandler}
281
- @nr-focus=${this._focusHandler}
282
- >
283
- <span slot="label">Number input error </span>
284
- </nr-input>
285
- <br /><br />
286
- <nr-input
287
- disabled
288
- state="error"
289
- placeholder="Enter your age"
290
- size="large"
291
- type="number"
292
- @nr-input=${this._changeHandler}
293
- @nr-focus=${this._focusHandler}
294
- >
295
- <span slot="label">Number input error disabled</span>
296
- </nr-input>
297
- <br /><br />
298
- <nr-input
299
- state="warning"
300
- placeholder="Enter your age"
301
- size="large"
302
- type="number"
303
- @nr-input=${this._changeHandler}
304
- @nr-focus=${this._focusHandler}
305
- >
306
- <span slot="label">Number input warning </span>
307
- </nr-input>
308
- <br /><br />
309
- <nr-input
310
- disabled
311
- state="warning"
312
- placeholder="Enter your age"
313
- size="large"
314
- type="number"
315
- @nr-input=${this._changeHandler}
316
- @nr-focus=${this._focusHandler}
317
- >
318
- <span slot="label">Number input warning disabled </span>
319
- </nr-input>
320
- <br /><br />
321
- <nr-input
322
- min="15"
323
- max="100"
324
- step="25"
325
- size="large"
326
- type="number"
327
- @nr-input=${this._changeHandler}
328
- @nr-focus=${this._focusHandler}
329
- >
330
- <span slot="label">Number input with steps of 25, max 100 and min 15 </span>
331
- </nr-input>
332
- </div>`;
333
- }
334
- };
335
- ElButtonDemoElement = __decorate([
336
- customElement('nr-inputs-demo')
337
- ], ElButtonDemoElement);
338
- export { ElButtonDemoElement };
339
- //# sourceMappingURL=input-demo.js.map
package/demo/input-demo.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"input-demo.js","sourceRoot":"","sources":["../../../../src/components/input/demo/input-demo.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport '../input.component';\n@customElement('nr-inputs-demo')\nexport class ElButtonDemoElement extends LitElement {\n _changeHandler(_e: unknown) {\n console.log(_e);\n }\n\n _focusHandler(_e: unknown) {\n console.log('e', _e);\n }\n\n enterPressedHandler(e:CustomEvent){\n console.log('e ',e.detail.value)\n }\n override render() {\n return html` <div>\n <h3>Text input</h3>\n <nr-input\n placeholder=\"Enter your FullName\"\n size=\"large\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n @nr-enter=${this.enterPressedHandler}\n >\n <span slot=\"label\">Large input</span>\n <span slot=\"helper-text\">helper</span>\n </nr-input>\n <br />\n <br />\n\n <nr-input\n placeholder=\"Enter your FullName\"\n ?withCopy=${true}\n size=\"large\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Text input with copy</span>\n <span slot=\"helper-text\">helper</span>\n </nr-input>\n <br />\n <br />\n <nr-input\n placeholder=\"Enter your FullName\"\n size=\"medium\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Medium input</span>\n <span slot=\"helper-text\">helper</span>\n </nr-input>\n <br />\n <br />\n <nr-input\n placeholder=\"Enter your FullName\"\n size=\"small\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Small input</span>\n <span slot=\"helper-text\">helper</span>\n </nr-input>\n <br />\n <br />\n <nr-input size=\"small\" @nr-input=${this._changeHandler} @nr-focus=${this._focusHandler}>\n <span slot=\"label\">without placeholder</span>\n </nr-input>\n <br />\n <br />\n <nr-input\n placeholder=\"Enter your FullName\"\n state=\"error\"\n size=\"large\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Error input</span>\n <span slot=\"helper-text\">Error input helper</span>\n </nr-input>\n <br />\n <br />\n <nr-input\n placeholder=\"Enter your FullName\"\n state=\"error\"\n size=\"large\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Error input without helper</span>\n </nr-input>\n <br />\n <br />\n <nr-input\n placeholder=\"Enter your FullName\"\n state=\"warning\"\n size=\"large\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Warning input</span>\n <span slot=\"helper-text\">Warning input helper</span>\n </nr-input>\n <br />\n <br />\n <nr-input\n placeholder=\"Enter your FullName\"\n state=\"warning\"\n size=\"large\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Warning input without helper</span>\n </nr-input>\n <br />\n <br />\n <nr-input\n placeholder=\"Enter your FullName\"\n disabled\n state=\"error\"\n size=\"large\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">disabled input error </span>\n <span slot=\"helper-text\">helper</span>\n </nr-input>\n <br />\n <br />\n <nr-input\n placeholder=\"Enter your FullName\"\n disabled\n state=\"warning\"\n size=\"large\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">disabled input warning </span>\n <span slot=\"helper-text\">helper</span>\n </nr-input>\n <br />\n <br />\n <nr-input\n placeholder=\"Enter your FullName\"\n size=\"large\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"helper-text\">without label</span>\n </nr-input>\n <br /><br />\n <nr-input\n placeholder=\"Enter your FullName\"\n size=\"large\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n </nr-input>\n <br /><br />\n\n <nr-input\n ?disabled=${true}\n placeholder=\"Enter your FullName\"\n size=\"large\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Disabled input</span>\n </nr-input>\n\n <br /><br />\n <nr-input\n placeholder=\"Enter your FullName\"\n ?disabled=${true}\n size=\"large\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Disabled input with label and helper</span>\n <span slot=\"helper-text\">helper</span>\n </nr-input>\n\n <br /><br />\n <h3>Password input</h3>\n\n <nr-input\n placeholder=\"your password please\"\n size=\"large\"\n type=\"password\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Password input</span>\n </nr-input>\n <br /><br />\n <nr-input\n disabled\n placeholder=\"your password please\"\n size=\"large\"\n type=\"password\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Password input disabled</span>\n </nr-input>\n <br /><br />\n <nr-input\n placeholder=\"your password please\"\n size=\"large\"\n type=\"password\"\n state=\"error\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Password input error</span>\n </nr-input>\n <br /><br />\n <nr-input\n placeholder=\"your password please\"\n disabled\n size=\"large\"\n type=\"password\"\n state=\"error\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Password input error disabled</span>\n </nr-input>\n <br /><br />\n <nr-input\n placeholder=\"your password please\"\n size=\"large\"\n type=\"password\"\n state=\"warning\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Password input warning </span>\n </nr-input>\n <br /><br />\n <nr-input\n placeholder=\"your password please\"\n disabled\n size=\"large\"\n type=\"password\"\n state=\"warning\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Password input warning disabled</span>\n </nr-input>\n <br /><br />\n <h3>Number input</h3>\n\n <nr-input\n placeholder=\"Enter your age\"\n size=\"large\"\n type=\"number\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Default number input </span>\n </nr-input>\n\n <br /><br />\n <nr-input\n state=\"error\"\n placeholder=\"Enter your age\"\n size=\"large\"\n type=\"number\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Number input error </span>\n </nr-input>\n <br /><br />\n <nr-input\n disabled\n state=\"error\"\n placeholder=\"Enter your age\"\n size=\"large\"\n type=\"number\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Number input error disabled</span>\n </nr-input>\n <br /><br />\n <nr-input\n state=\"warning\"\n placeholder=\"Enter your age\"\n size=\"large\"\n type=\"number\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Number input warning </span>\n </nr-input>\n <br /><br />\n <nr-input\n disabled\n state=\"warning\"\n placeholder=\"Enter your age\"\n size=\"large\"\n type=\"number\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Number input warning disabled </span>\n </nr-input>\n <br /><br />\n <nr-input\n min=\"15\"\n max=\"100\"\n step=\"25\"\n size=\"large\"\n type=\"number\"\n @nr-input=${this._changeHandler}\n @nr-focus=${this._focusHandler}\n >\n <span slot=\"label\">Number input with steps of 25, max 100 and min 15 </span>\n </nr-input>\n </div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-inputs-demo': ElButtonDemoElement;\n }\n}\n"]}
package/index.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,OAAO,KAAK,WAAW,MAAM,iBAAiB,CAAC"}
package/input.component.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"input.component.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGvD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAkC,MAAM,kBAAkB,CAAC;AAKtH,QAAA,MAAM,cAAc,ggBAAyE,CAAC;AAC9F,qBACa,cAAe,SAAQ,cAAc;IAChD,OAAgB,MAAM,4BAAU;IAOhC,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,KAAK,cAAuB;IAG5B,KAAK,SAAgB;IAGrB,IAAI,aAAqB;IAGzB,OAAO,gBAA4B;IAGnC,IAAI,aAAmB;IAGvB,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,WAAW,SAAgB;IAG3B,YAAY,SAAS;IAGrB,QAAQ,UAAS;IAGjB,UAAU,UAAS;IAGnB,SAAS,UAAS;IAGlB,SAAS,CAAC,EAAE,MAAM,CAAC;IAOnB,SAAS,SAAgB;IAGzB,cAAc,UAAS;IAGvB,aAAa,UAAS;IAGtB,OAAO,UAAS;IAGhB,OAAO,KAAK,MAAM,GAEjB;IAMD;;OAEG;IACH,IAAI,qBAAqB,IAAI,MAAM,CAMlC;IAED;;OAEG;IACH,IAAI,oBAAoB,IAAI,OAAO,CAElC;IAMD;;OAEG;IACH,SAAS,KAAK,KAAK,IAAI,gBAAgB,CAEtC;IAED;;OAEG;IACH,SAAS,KAAK,YAAY,IAAI,gBAAgB,CAE7C;IAMD;;OAEG;IACM,kBAAkB,WAAe;IAE1C;;OAEG;IACM,iBAAiB;IAIjB,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAwBpD,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAkBjD,YAAY,IAAI,IAAI;IAQ7B;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAUhC;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAuBzB,OAAO,CAAC,cAAc;IAgCtB,OAAO,CAAC,YAAY;IA8CpB,OAAO,CAAC,WAAW;IA0BnB,OAAO,CAAC,UAAU;IAkBlB,OAAO,CAAC,kBAAkB;YAqBZ,OAAO;IAerB,OAAO,CAAC,QAAQ;IAgChB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,mBAAmB;IAelB,MAAM;CAoEhB"}
package/input.style.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"input.style.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"AA8jBA,eAAO,MAAM,MAAM,2BAA+C,CAAC"}
package/input.style.variable.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export declare const styleVariables: import("lit").CSSResult;
2
- //# sourceMappingURL=input.style.variable.d.ts.map
package/input.style.variable.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"input.style.variable.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.style.variable.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBA2K1B,CAAC"}
package/input.style.variable.js DELETED
@@ -1,174 +0,0 @@
1
- import { css } from 'lit';
2
- export const styleVariables = css `
3
- :host {
4
- --hybrid-input-local-background-color: #f4f4f4;
5
- --hybrid-input-local-text-color: #000000;
6
- --hybrid-input-local-font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, SFProLocalRange;
7
- --hybrid-input-local-font-size:13px;
8
- --hybrid-input-local-label-color: #525252;
9
- --hybrid-input-local-placeholder-color: #a8a8a8;
10
- --hybrid-input-local-border-bottom: 2px solid #a8a8a8;
11
- --hybrid-input-local-border-top: 2px solid transparent;
12
- --hybrid-input-local-border-left: 2px solid transparent;
13
- --hybrid-input-local-border-right: 2px solid transparent;
14
- --hybrid-input-local-disabled-border-bottom: none;
15
- --hybrid-input-local-disabled-border-top: none;
16
- --hybrid-input-local-disabled-border-left: none;
17
- --hybrid-input-local-disabled-border-right: none;
18
- --hybrid-input-local-focus-border: 2px solid #0f62fe;
19
- --hybrid-input-local-border-radius: 0px;
20
- --hybrid-input-local-label-font-size: 13px;
21
- --hybrid-input-local-helper-text-color: #525252;
22
- --hybrid-input-local-helper-text-font-size: 13px;
23
- --hybrid-input-local-placeholder-font-size: 13px;
24
- --hybrid-input-label-padding-bottom: 5px;
25
- --hybrid-input-local-helper-text-padding-top: 5px;
26
- --hybrid-input-local-disabled-background-color: #f4f4f4;
27
- --hybrid-input-local-disabled-placeholder-color: #c6c6c6;
28
- --hybrid-input-local-error-helper-text-color: #da1e28;
29
- --hybrid-input-local-error-border: 2px solid #da1e28;
30
- --hybrid-input-local-warning-helper-text-color: #161616;
31
- --hybrid-input-local-disabled-helper-text-color: #c6c6c6;
32
- --hybrid-input-local-disabled-label-color: #c6c6c6;
33
- --hybrid-input-local-warning-icon-color: #f0c300;
34
- --hybrid-input-local-error-icon-color: #da1e28;
35
- --hybrid-input-local-password-icon-color: #000000;
36
- --hybrid-input-local-calendar-icon-color: #000000;
37
- --hybrid-input-local-copy-icon-color: #000000;
38
- --hybrid-input-local-copy-icon-padding-right:5px;
39
- --hybrid-input-local-clear-icon-color: #000000;
40
- --hybrid-input-local-clear-icon-padding-right: 5px;
41
- --hybrid-input-local-disabled-icon-opacity: 0.4;
42
- --hybrid-input-local-number-icons-color: #000000;
43
- --hybrid-input-local-password-icon-padding-left: 8px;
44
- --hybrid-input-local-password-icon-padding-right: 8px;
45
- --hybrid-input-local-number-icons-separator-color: #e0e0e0;
46
- --hybrid-input-local-number-icons-separator-padding-bottom: 4px;
47
- --hybrid-input-local-number-icons-separator-padding-left: 5px;
48
- --hybrid-input-local-number-icons-separator-padding-right: 5px;
49
- --hybrid-input-local-copy-icon-padding-right:5px;
50
-
51
- --hybrid-input-local-number-icons-container-width: 70px;
52
- --hybrid-input-local-number-icons-container-padding-left: 5px;
53
- --hybrid-input-local-number-icons-container-padding-right: 5px;
54
- --hybrid-input-local-number-icons-width: 12px;
55
- --hybrid-input-local-number-icons-height: 12px;
56
-
57
- --hybrid-input-local-number-icons-padding-left: 4px;
58
- --hybrid-input-local-number-icons-padding-right: 4px;
59
-
60
- --hybrid-input-local-large-padding-top: 10px;
61
- --hybrid-input-local-large-padding-bottom: 10px;
62
- --hybrid-input-local-large-padding-left: 9px;
63
- --hybrid-input-local-large-padding-right: 4px;
64
-
65
- --hybrid-input-local-medium-padding-top: 7px;
66
- --hybrid-input-local-medium-padding-bottom: 7px;
67
- --hybrid-input-local-medium-padding-left: 9px;
68
- --hybrid-input-local-medium-padding-right: 4px;
69
-
70
- --hybrid-input-local-small-padding-top: 4px;
71
- --hybrid-input-local-small-padding-bottom: 4px;
72
- --hybrid-input-local-small-padding-left: 9px;
73
- --hybrid-input-local-small-padding-right: 4px;
74
-
75
- /* Prefix and Suffix styling variables */
76
- --hybrid-input-local-prefix-color: #525252;
77
- --hybrid-input-local-prefix-font-size: 13px;
78
- --hybrid-input-local-prefix-padding-right: 8px;
79
- --hybrid-input-local-suffix-color: #525252;
80
- --hybrid-input-local-suffix-font-size: 13px;
81
- --hybrid-input-local-suffix-padding-left: 8px;
82
- --hybrid-input-local-disabled-prefix-suffix-color: #c6c6c6;
83
-
84
- /* Addon Before/After styling variables */
85
- --hybrid-input-local-addon-background-color: #e8e8e8;
86
- --hybrid-input-local-addon-color: #525252;
87
- --hybrid-input-local-addon-padding: 8px 12px;
88
-
89
- /* Character count styling variables */
90
- --hybrid-input-local-character-count-font-size: 12px;
91
- --hybrid-input-local-character-count-color: #8c8c8c;
92
- --hybrid-input-local-character-count-margin-top: 4px;
93
- --hybrid-input-local-character-count-over-limit-color: #da1e28;
94
-
95
- /* Input Variant Variables */
96
- /* Outlined variant - full border */
97
- --hybrid-input-local-outlined-border: 1px solid #d0d0d0;
98
- --hybrid-input-local-outlined-border-radius: 6px;
99
- --hybrid-input-local-outlined-focus-border: 2px solid #0f62fe;
100
- --hybrid-input-local-outlined-background: #ffffff;
101
-
102
- /* Filled variant - background with subtle border */
103
- --hybrid-input-local-filled-background: #f4f4f4;
104
- --hybrid-input-local-filled-border-bottom: 2px solid transparent;
105
- --hybrid-input-local-filled-focus-border-bottom: 2px solid #0f62fe;
106
- --hybrid-input-local-filled-border-radius: 6px 6px 0 0;
107
-
108
- /* Borderless variant - no borders */
109
- --hybrid-input-local-borderless-background: transparent;
110
- --hybrid-input-local-borderless-focus-outline: 2px solid #0f62fe;
111
- --hybrid-input-local-borderless-border-radius: 6px;
112
-
113
- /* Underlined variant - bottom border only (current default) */
114
- --hybrid-input-local-underlined-border-bottom: 2px solid #a8a8a8;
115
- --hybrid-input-local-underlined-focus-border-bottom: 2px solid #0f62fe;
116
- }
117
-
118
- /*
119
- * These override the light theme defaults when data-theme="dark" is applied
120
- * This provides explicit theme control via JavaScript or HTML attributes
121
- */
122
- .input-wrapper[data-theme="dark"] {
123
- --hybrid-input-local-background-color: #393939;
124
- --hybrid-input-local-focus-border: 2px solid #ffffff;
125
- --hybrid-input-local-text-color: #ffffff;
126
- --hybrid-input-local-error-border: 2px solid #fa4d56;
127
- --hybrid-input-local-error-helper-text-color: #ffb3b8;
128
- --hybrid-input-local-disabled-background-color: #393939;
129
- --hybrid-input-local-disabled-placeholder-color: #6f6f6f;
130
- --hybrid-input-local-disabled-helper-text-color: #6f6f6f;
131
- --hybrid-input-local-disabled-label-color: #6f6f6f;
132
- --hybrid-input-local-warning-icon-color: #f0c300;
133
- --hybrid-input-local-error-icon-color: #da1e28;
134
- --hybrid-input-local-password-icon-color: #ffffff;
135
- --hybrid-input-local-number-icons-color: #ffffff;
136
- --hybrid-input-local-label-color: #c6c6c6;
137
- --hybrid-input-local-helper-text-color: #c6c6c6;
138
- --hybrid-input-local-number-icons-separator-color: #525252;
139
- --hybrid-input-local-calendar-icon-color: #ffffff;
140
- --hybrid-input-local-copy-icon-color: #ffffff;
141
- --hybrid-input-local-clear-icon-color: #ffffff;
142
-
143
- /* Dark theme prefix and suffix colors */
144
- --hybrid-input-local-prefix-color: #c6c6c6;
145
- --hybrid-input-local-suffix-color: #c6c6c6;
146
- --hybrid-input-local-disabled-prefix-suffix-color: #6f6f6f;
147
-
148
- /* Dark theme addon colors */
149
- --hybrid-input-local-addon-background-color: #525252;
150
- --hybrid-input-local-addon-color: #c6c6c6;
151
-
152
- /* Dark theme character count colors */
153
- --hybrid-input-local-character-count-color: #8c8c8c;
154
- --hybrid-input-local-character-count-over-limit-color: #fa4d56;
155
-
156
- /* Dark theme input variant variables */
157
- /* Outlined variant - dark theme */
158
- --hybrid-input-local-outlined-border: 1px solid #525252;
159
- --hybrid-input-local-outlined-focus-border: 2px solid #ffffff;
160
- --hybrid-input-local-outlined-background: #393939;
161
-
162
- /* Filled variant - dark theme */
163
- --hybrid-input-local-filled-background: #525252;
164
- --hybrid-input-local-filled-focus-border-bottom: 2px solid #ffffff;
165
-
166
- /* Borderless variant - dark theme */
167
- --hybrid-input-local-borderless-background: transparent;
168
- --hybrid-input-local-borderless-focus-outline: 2px solid #ffffff;
169
-
170
- /* Underlined variant - dark theme */
171
- --hybrid-input-local-underlined-focus-border-bottom: 2px solid #ffffff;
172
- }
173
- `;
174
- //# sourceMappingURL=input.style.variable.js.map
package/input.style.variable.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"input.style.variable.js","sourceRoot":"","sources":["../../../src/components/input/input.style.variable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2KhC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styleVariables = css`\n :host {\n --hybrid-input-local-background-color: #f4f4f4;\n --hybrid-input-local-text-color: #000000;\n --hybrid-input-local-font-family: Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, SFProLocalRange;\n --hybrid-input-local-font-size:13px;\n --hybrid-input-local-label-color: #525252;\n --hybrid-input-local-placeholder-color: #a8a8a8;\n --hybrid-input-local-border-bottom: 2px solid #a8a8a8;\n --hybrid-input-local-border-top: 2px solid transparent;\n --hybrid-input-local-border-left: 2px solid transparent;\n --hybrid-input-local-border-right: 2px solid transparent;\n --hybrid-input-local-disabled-border-bottom: none;\n --hybrid-input-local-disabled-border-top: none;\n --hybrid-input-local-disabled-border-left: none;\n --hybrid-input-local-disabled-border-right: none;\n --hybrid-input-local-focus-border: 2px solid #0f62fe;\n --hybrid-input-local-border-radius: 0px;\n --hybrid-input-local-label-font-size: 13px;\n --hybrid-input-local-helper-text-color: #525252;\n --hybrid-input-local-helper-text-font-size: 13px;\n --hybrid-input-local-placeholder-font-size: 13px;\n --hybrid-input-label-padding-bottom: 5px;\n --hybrid-input-local-helper-text-padding-top: 5px;\n --hybrid-input-local-disabled-background-color: #f4f4f4;\n --hybrid-input-local-disabled-placeholder-color: #c6c6c6;\n --hybrid-input-local-error-helper-text-color: #da1e28;\n --hybrid-input-local-error-border: 2px solid #da1e28;\n --hybrid-input-local-warning-helper-text-color: #161616;\n --hybrid-input-local-disabled-helper-text-color: #c6c6c6;\n --hybrid-input-local-disabled-label-color: #c6c6c6;\n --hybrid-input-local-warning-icon-color: #f0c300;\n --hybrid-input-local-error-icon-color: #da1e28;\n --hybrid-input-local-password-icon-color: #000000;\n --hybrid-input-local-calendar-icon-color: #000000;\n --hybrid-input-local-copy-icon-color: #000000;\n --hybrid-input-local-copy-icon-padding-right:5px;\n --hybrid-input-local-clear-icon-color: #000000;\n --hybrid-input-local-clear-icon-padding-right: 5px;\n --hybrid-input-local-disabled-icon-opacity: 0.4;\n --hybrid-input-local-number-icons-color: #000000;\n --hybrid-input-local-password-icon-padding-left: 8px;\n --hybrid-input-local-password-icon-padding-right: 8px;\n --hybrid-input-local-number-icons-separator-color: #e0e0e0;\n --hybrid-input-local-number-icons-separator-padding-bottom: 4px;\n --hybrid-input-local-number-icons-separator-padding-left: 5px;\n --hybrid-input-local-number-icons-separator-padding-right: 5px;\n --hybrid-input-local-copy-icon-padding-right:5px;\n\n --hybrid-input-local-number-icons-container-width: 70px;\n --hybrid-input-local-number-icons-container-padding-left: 5px;\n --hybrid-input-local-number-icons-container-padding-right: 5px;\n --hybrid-input-local-number-icons-width: 12px;\n --hybrid-input-local-number-icons-height: 12px;\n\n --hybrid-input-local-number-icons-padding-left: 4px;\n --hybrid-input-local-number-icons-padding-right: 4px;\n\n --hybrid-input-local-large-padding-top: 10px;\n --hybrid-input-local-large-padding-bottom: 10px;\n --hybrid-input-local-large-padding-left: 9px;\n --hybrid-input-local-large-padding-right: 4px;\n\n --hybrid-input-local-medium-padding-top: 7px;\n --hybrid-input-local-medium-padding-bottom: 7px;\n --hybrid-input-local-medium-padding-left: 9px;\n --hybrid-input-local-medium-padding-right: 4px;\n\n --hybrid-input-local-small-padding-top: 4px;\n --hybrid-input-local-small-padding-bottom: 4px;\n --hybrid-input-local-small-padding-left: 9px;\n --hybrid-input-local-small-padding-right: 4px;\n\n /* Prefix and Suffix styling variables */\n --hybrid-input-local-prefix-color: #525252;\n --hybrid-input-local-prefix-font-size: 13px;\n --hybrid-input-local-prefix-padding-right: 8px;\n --hybrid-input-local-suffix-color: #525252;\n --hybrid-input-local-suffix-font-size: 13px;\n --hybrid-input-local-suffix-padding-left: 8px;\n --hybrid-input-local-disabled-prefix-suffix-color: #c6c6c6;\n\n /* Addon Before/After styling variables */\n --hybrid-input-local-addon-background-color: #e8e8e8;\n --hybrid-input-local-addon-color: #525252;\n --hybrid-input-local-addon-padding: 8px 12px;\n\n /* Character count styling variables */\n --hybrid-input-local-character-count-font-size: 12px;\n --hybrid-input-local-character-count-color: #8c8c8c;\n --hybrid-input-local-character-count-margin-top: 4px;\n --hybrid-input-local-character-count-over-limit-color: #da1e28;\n\n /* Input Variant Variables */\n /* Outlined variant - full border */\n --hybrid-input-local-outlined-border: 1px solid #d0d0d0;\n --hybrid-input-local-outlined-border-radius: 6px;\n --hybrid-input-local-outlined-focus-border: 2px solid #0f62fe;\n --hybrid-input-local-outlined-background: #ffffff;\n\n /* Filled variant - background with subtle border */\n --hybrid-input-local-filled-background: #f4f4f4;\n --hybrid-input-local-filled-border-bottom: 2px solid transparent;\n --hybrid-input-local-filled-focus-border-bottom: 2px solid #0f62fe;\n --hybrid-input-local-filled-border-radius: 6px 6px 0 0;\n\n /* Borderless variant - no borders */\n --hybrid-input-local-borderless-background: transparent;\n --hybrid-input-local-borderless-focus-outline: 2px solid #0f62fe;\n --hybrid-input-local-borderless-border-radius: 6px;\n\n /* Underlined variant - bottom border only (current default) */\n --hybrid-input-local-underlined-border-bottom: 2px solid #a8a8a8;\n --hybrid-input-local-underlined-focus-border-bottom: 2px solid #0f62fe;\n }\n\n /* \n * These override the light theme defaults when data-theme=\"dark\" is applied\n * This provides explicit theme control via JavaScript or HTML attributes\n */\n .input-wrapper[data-theme=\"dark\"] {\n --hybrid-input-local-background-color: #393939;\n --hybrid-input-local-focus-border: 2px solid #ffffff;\n --hybrid-input-local-text-color: #ffffff;\n --hybrid-input-local-error-border: 2px solid #fa4d56;\n --hybrid-input-local-error-helper-text-color: #ffb3b8;\n --hybrid-input-local-disabled-background-color: #393939;\n --hybrid-input-local-disabled-placeholder-color: #6f6f6f;\n --hybrid-input-local-disabled-helper-text-color: #6f6f6f;\n --hybrid-input-local-disabled-label-color: #6f6f6f;\n --hybrid-input-local-warning-icon-color: #f0c300;\n --hybrid-input-local-error-icon-color: #da1e28;\n --hybrid-input-local-password-icon-color: #ffffff;\n --hybrid-input-local-number-icons-color: #ffffff;\n --hybrid-input-local-label-color: #c6c6c6;\n --hybrid-input-local-helper-text-color: #c6c6c6;\n --hybrid-input-local-number-icons-separator-color: #525252;\n --hybrid-input-local-calendar-icon-color: #ffffff;\n --hybrid-input-local-copy-icon-color: #ffffff;\n --hybrid-input-local-clear-icon-color: #ffffff;\n \n /* Dark theme prefix and suffix colors */\n --hybrid-input-local-prefix-color: #c6c6c6;\n --hybrid-input-local-suffix-color: #c6c6c6;\n --hybrid-input-local-disabled-prefix-suffix-color: #6f6f6f;\n\n /* Dark theme addon colors */\n --hybrid-input-local-addon-background-color: #525252;\n --hybrid-input-local-addon-color: #c6c6c6;\n\n /* Dark theme character count colors */\n --hybrid-input-local-character-count-color: #8c8c8c;\n --hybrid-input-local-character-count-over-limit-color: #fa4d56;\n\n /* Dark theme input variant variables */\n /* Outlined variant - dark theme */\n --hybrid-input-local-outlined-border: 1px solid #525252;\n --hybrid-input-local-outlined-focus-border: 2px solid #ffffff;\n --hybrid-input-local-outlined-background: #393939;\n\n /* Filled variant - dark theme */\n --hybrid-input-local-filled-background: #525252;\n --hybrid-input-local-filled-focus-border-bottom: 2px solid #ffffff;\n\n /* Borderless variant - dark theme */\n --hybrid-input-local-borderless-background: transparent;\n --hybrid-input-local-borderless-focus-outline: 2px solid #ffffff;\n\n /* Underlined variant - dark theme */\n --hybrid-input-local-underlined-focus-border-bottom: 2px solid #ffffff;\n }\n`;\n"]}
package/input.types.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"input.types.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.types.ts"],"names":[],"mappings":"AAAA,0BAAkB,WAAW;IAC3B,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;CACpB;AAED,0BAAkB,UAAU;IAC1B,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,0BAAkB,aAAa;IAC7B,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,UAAU,eAAe;IACzB,UAAU,eAAe;CAC1B;AAED,0BAAkB,UAAU;IAC1B,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,WAAW;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,KAAK,CAAC"}
package/mixins/focus-mixin.d.ts DELETED
@@ -1,60 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2023 Nuraly, Laabidi Aymen
4
- * SPDX-License-Identifier: MIT
5
- */
6
- import { LitElement } from 'lit';
7
- declare type Constructor<T = {}> = new (...args: any[]) => T;
8
- /**
9
- * Options for focus behavior
10
- */
11
- export interface FocusOptions {
12
- preventScroll?: boolean;
13
- selectText?: boolean;
14
- }
15
- /**
16
- * Options for blur behavior
17
- */
18
- export interface BlurOptions {
19
- relatedTarget?: Element | null;
20
- }
21
- /**
22
- * Interface for components that support focus operations
23
- */
24
- export interface FocusCapable {
25
- /**
26
- * Focus the input element
27
- * @param options - Focus options
28
- */
29
- focus(options?: FocusOptions): void;
30
- /**
31
- * Blur the input element
32
- * @param options - Blur options
33
- */
34
- blur(options?: BlurOptions): void;
35
- /**
36
- * Check if the input is currently focused
37
- * @returns True if focused
38
- */
39
- isFocused(): boolean;
40
- }
41
- /**
42
- * Mixin that provides focus management capabilities to input components
43
- *
44
- * @param superClass - The base class to extend
45
- * @returns Enhanced class with focus capabilities
46
- *
47
- * @example
48
- * ```typescript
49
- * export class MyInput extends FocusMixin(LitElement) {
50
- * @query('input') input!: HTMLInputElement;
51
- *
52
- * handleClick() {
53
- * this.focus({ selectText: true });
54
- * }
55
- * }
56
- * ```
57
- */
58
- export declare const FocusMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<FocusCapable> & T;
59
- export {};
60
- //# sourceMappingURL=focus-mixin.d.ts.map
package/mixins/focus-mixin.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"focus-mixin.d.ts","sourceRoot":"","sources":["../../../../src/components/input/mixins/focus-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,aAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAChC;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAEpC;;;OAGG;IACH,IAAI,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAElC;;;OAGG;IACH,SAAS,IAAI,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,UAAU,qFA8CtB,CAAC"}