@nuralyui/input 0.0.1

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 (37) hide show
  1. package/demo/input-demo.d.ts +19 -0
  2. package/demo/input-demo.d.ts.map +1 -0
  3. package/demo/input-demo.js +339 -0
  4. package/demo/input-demo.js.map +1 -0
  5. package/index.d.ts +3 -0
  6. package/index.d.ts.map +1 -0
  7. package/index.js +3 -0
  8. package/index.js.map +1 -0
  9. package/input.component.d.ts +43 -0
  10. package/input.component.d.ts.map +1 -0
  11. package/input.component.js +189 -0
  12. package/input.component.js.map +1 -0
  13. package/input.constant.d.ts +18 -0
  14. package/input.constant.d.ts.map +1 -0
  15. package/input.constant.js +2 -0
  16. package/input.constant.js.map +1 -0
  17. package/input.style.d.ts +2 -0
  18. package/input.style.d.ts.map +1 -0
  19. package/input.style.js +199 -0
  20. package/input.style.js.map +1 -0
  21. package/package.json +12 -0
  22. package/react.d.ts +6 -0
  23. package/react.d.ts.map +1 -0
  24. package/react.js +13 -0
  25. package/react.js.map +1 -0
  26. package/test/hy-input_test.d.ts +2 -0
  27. package/test/hy-input_test.d.ts.map +1 -0
  28. package/test/hy-input_test.js +159 -0
  29. package/test/hy-input_test.js.map +1 -0
  30. package/validation.d.ts +3 -0
  31. package/validation.d.ts.map +1 -0
  32. package/validation.js +3 -0
  33. package/validation.js.map +1 -0
  34. package/variables.style.d.ts +2 -0
  35. package/variables.style.d.ts.map +1 -0
  36. package/variables.style.js +96 -0
  37. package/variables.style.js.map +1 -0
package/variables.style.js ADDED
@@ -0,0 +1,96 @@
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: IBM Plex Sans;
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: 1px solid #a8a8a8;
11
+ --hybrid-input-local-border-top: 3px 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-disabled-icon-opacity: 0.4;
39
+ --hybrid-input-local-number-icons-color: #000000;
40
+ --hybrid-input-local-password-icon-padding-left: 8px;
41
+ --hybrid-input-local-password-icon-padding-right: 8px;
42
+ --hybrid-input-local-number-icons-sperator-color: #e0e0e0;
43
+ --hybrid-input-local-number-icons-sperator-padding-bottom: 4px;
44
+ --hybrid-input-local-number-icons-sperator-padding-left: 5px;
45
+ --hybrid-input-local-number-icons-sperator-padding-right: 5px;
46
+ --hybrid-input-local-copy-icon-padding-right:5px;
47
+
48
+ --hybrid-input-local-number-icons-container-width: 70px;
49
+ --hybrid-input-local-number-icons-container-padding-left: 5px;
50
+ --hybrid-input-local-number-icons-container-padding-right: 5px;
51
+ --hybrid-input-local-number-icons-width: 12px;
52
+ --hybrid-input-local-number-icons-height: 12px;
53
+
54
+ --hybrid-input-local-number-icons-padding-left: 4px;
55
+ --hybrid-input-local-number-icons-padding-right: 4px;
56
+
57
+ --hybrid-input-local-large-padding-top: 10px;
58
+ --hybrid-input-local-large-padding-bottom: 10px;
59
+ --hybrid-input-local-large-padding-left: 9px;
60
+ --hybrid-input-local-large-padding-right: 4px;
61
+
62
+ --hybrid-input-local-medium-padding-top: 7px;
63
+ --hybrid-input-local-medium-padding-bottom: 7px;
64
+ --hybrid-input-local-medium-padding-left: 9px;
65
+ --hybrid-input-local-medium-padding-right: 4px;
66
+
67
+ --hybrid-input-local-small-padding-top: 4px;
68
+ --hybrid-input-local-small-padding-bottom: 4px;
69
+ --hybrid-input-local-small-padding-left: 9px;
70
+ --hybrid-input-local-small-padding-right: 4px;
71
+ }
72
+
73
+ @media (prefers-color-scheme: dark) {
74
+ :host {
75
+ --hybrid-input-local-background-color: #393939;
76
+ --hybrid-input-local-focus-border: 2px solid #ffffff;
77
+ --hybrid-input-local-text-color: #ffffff;
78
+ --hybrid-input-local-error-border: 2px solid #fa4d56;
79
+ --hybrid-input-local-error-helper-text-color: #ffb3b8;
80
+ --hybrid-input-local-disabled-background-color: #393939;
81
+ --hybrid-input-local-disabled-placeholder-color: #6f6f6f;
82
+ --hybrid-input-local-disabled-helper-text-color: #6f6f6f;
83
+ --hybrid-input-local-disabled-label-color: #6f6f6f;
84
+ --hybrid-input-local-warning-icon-color: #f0c300;
85
+ --hybrid-input-local-error-icon-color: #da1e28;
86
+ --hybrid-input-local-password-icon-color: #ffffff;
87
+ --hybrid-input-local-number-icons-color: #ffffff;
88
+ --hybrid-input-local-label-color: #c6c6c6;
89
+ --hybrid-input-local-helper-text-color: #c6c6c6;
90
+ --hybrid-input-local-number-icon-sperator-color: #525252;
91
+ --hybrid-input-local-calendar-icon-color: #ffffff;
92
+ --hybrid-input-local-copy-icon-color: #ffffff;
93
+ }
94
+ }
95
+ `;
96
+ //# sourceMappingURL=variables.style.js.map
package/variables.style.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"variables.style.js","sourceRoot":"","sources":["../../../src/components/input/variables.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FhC,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: IBM Plex Sans;\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: 1px solid #a8a8a8;\n --hybrid-input-local-border-top: 3px 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-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-sperator-color: #e0e0e0;\n --hybrid-input-local-number-icons-sperator-padding-bottom: 4px;\n --hybrid-input-local-number-icons-sperator-padding-left: 5px;\n --hybrid-input-local-number-icons-sperator-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\n @media (prefers-color-scheme: dark) {\n :host {\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-icon-sperator-color: #525252;\n --hybrid-input-local-calendar-icon-color: #ffffff;\n --hybrid-input-local-copy-icon-color: #ffffff;\n }\n }\n`;\n"]}