@nuralyui/input 0.0.5 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/input.component.d.ts +70 -18
- package/input.component.d.ts.map +1 -1
- package/input.component.js +433 -139
- package/input.component.js.map +1 -1
- package/input.style.d.ts.map +1 -1
- package/input.style.js +246 -18
- package/input.style.js.map +1 -1
- package/{input.style.variable..d.ts → input.style.variable.d.ts} +1 -1
- package/input.style.variable.d.ts.map +1 -0
- package/{input.style.variable..js → input.style.variable.js} +78 -3
- package/input.style.variable.js.map +1 -0
- package/input.types.d.ts +38 -0
- package/input.types.d.ts.map +1 -0
- package/input.types.js +2 -0
- package/input.types.js.map +1 -0
- package/package.json +1 -1
- package/test/hy-input_test.js +1 -1
- package/test/hy-input_test.js.map +1 -1
- package/utils/index.d.ts +8 -0
- package/utils/index.d.ts.map +1 -0
- package/utils/index.js +8 -0
- package/utils/index.js.map +1 -0
- package/utils/input-renderers.d.ts +54 -0
- package/utils/input-renderers.d.ts.map +1 -0
- package/utils/input-renderers.js +174 -0
- package/utils/input-renderers.js.map +1 -0
- package/utils/input-validation.utils.d.ts +26 -0
- package/utils/input-validation.utils.d.ts.map +1 -0
- package/utils/input-validation.utils.js +105 -0
- package/utils/input-validation.utils.js.map +1 -0
- package/input.constant.d.ts +0 -18
- package/input.constant.d.ts.map +0 -1
- package/input.constant.js +0 -2
- package/input.constant.js.map +0 -1
- package/input.style.variable..d.ts.map +0 -1
- package/input.style.variable..js.map +0 -1
|
@@ -35,6 +35,9 @@ export const styleVariables = css `
|
|
|
35
35
|
--hybrid-input-local-password-icon-color: #000000;
|
|
36
36
|
--hybrid-input-local-calendar-icon-color: #000000;
|
|
37
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;
|
|
38
41
|
--hybrid-input-local-disabled-icon-opacity: 0.4;
|
|
39
42
|
--hybrid-input-local-number-icons-color: #000000;
|
|
40
43
|
--hybrid-input-local-password-icon-padding-left: 8px;
|
|
@@ -68,14 +71,55 @@ export const styleVariables = css `
|
|
|
68
71
|
--hybrid-input-local-small-padding-bottom: 4px;
|
|
69
72
|
--hybrid-input-local-small-padding-left: 9px;
|
|
70
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;
|
|
71
116
|
}
|
|
72
117
|
|
|
73
118
|
/*
|
|
74
|
-
* Dark theme styles using data-theme attribute on host element
|
|
75
119
|
* These override the light theme defaults when data-theme="dark" is applied
|
|
76
120
|
* This provides explicit theme control via JavaScript or HTML attributes
|
|
77
121
|
*/
|
|
78
|
-
|
|
122
|
+
.input-wrapper[data-theme="dark"] {
|
|
79
123
|
--hybrid-input-local-background-color: #393939;
|
|
80
124
|
--hybrid-input-local-focus-border: 2px solid #ffffff;
|
|
81
125
|
--hybrid-input-local-text-color: #ffffff;
|
|
@@ -94,6 +138,37 @@ export const styleVariables = css `
|
|
|
94
138
|
--hybrid-input-local-number-icons-separator-color: #525252;
|
|
95
139
|
--hybrid-input-local-calendar-icon-color: #ffffff;
|
|
96
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;
|
|
97
172
|
}
|
|
98
173
|
`;
|
|
99
|
-
//# sourceMappingURL=input.style.variable
|
|
174
|
+
//# sourceMappingURL=input.style.variable.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
export declare const enum INPUT_STATE {
|
|
2
|
+
Default = "default",
|
|
3
|
+
Error = "error",
|
|
4
|
+
Warning = "warning"
|
|
5
|
+
}
|
|
6
|
+
export declare const enum INPUT_SIZE {
|
|
7
|
+
Large = "large",
|
|
8
|
+
Medium = "medium",
|
|
9
|
+
Small = "small"
|
|
10
|
+
}
|
|
11
|
+
export declare const enum INPUT_VARIANT {
|
|
12
|
+
Outlined = "outlined",
|
|
13
|
+
Filled = "filled",
|
|
14
|
+
Borderless = "borderless",
|
|
15
|
+
Underlined = "underlined"
|
|
16
|
+
}
|
|
17
|
+
export declare const enum INPUT_TYPE {
|
|
18
|
+
PASSWORD = "password",
|
|
19
|
+
TEXT = "text",
|
|
20
|
+
NUMBER = "number",
|
|
21
|
+
CALENDAR = "calendar"
|
|
22
|
+
}
|
|
23
|
+
export interface FocusOptions {
|
|
24
|
+
preventScroll?: boolean;
|
|
25
|
+
cursor?: 'start' | 'end' | 'all' | number;
|
|
26
|
+
select?: boolean;
|
|
27
|
+
}
|
|
28
|
+
export interface BlurOptions {
|
|
29
|
+
preventScroll?: boolean;
|
|
30
|
+
restoreCursor?: boolean;
|
|
31
|
+
}
|
|
32
|
+
export interface FocusChangeEvent {
|
|
33
|
+
focused: boolean;
|
|
34
|
+
cursorPosition?: number;
|
|
35
|
+
selectedText?: string;
|
|
36
|
+
}
|
|
37
|
+
export declare const EMPTY_STRING = "";
|
|
38
|
+
//# sourceMappingURL=input.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
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/input.types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input.types.js","sourceRoot":"","sources":["../../../src/components/input/input.types.ts"],"names":[],"mappings":"AA2CA,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["export const enum INPUT_STATE {\n Default = 'default',\n Error = 'error',\n Warning = 'warning',\n}\n\nexport const enum INPUT_SIZE {\n Large = 'large',\n Medium = 'medium',\n Small = 'small',\n}\n\nexport const enum INPUT_VARIANT {\n Outlined = 'outlined',\n Filled = 'filled',\n Borderless = 'borderless',\n Underlined = 'underlined',\n}\n\nexport const enum INPUT_TYPE {\n PASSWORD = 'password',\n TEXT = 'text',\n NUMBER = 'number',\n CALENDAR = 'calendar',\n}\n\nexport interface FocusOptions {\n preventScroll?: boolean;\n cursor?: 'start' | 'end' | 'all' | number;\n select?: boolean;\n}\n\nexport interface BlurOptions {\n preventScroll?: boolean;\n restoreCursor?: boolean;\n}\n\nexport interface FocusChangeEvent {\n focused: boolean;\n cursorPosition?: number;\n selectedText?: string;\n}\n\nexport const EMPTY_STRING = '';\n"]}
|
package/package.json
CHANGED
package/test/hy-input_test.js
CHANGED
|
@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
8
8
|
});
|
|
9
9
|
};
|
|
10
10
|
import { html, fixture, expect } from '@open-wc/testing';
|
|
11
|
-
import { EMPTY_STRING } from '../input.
|
|
11
|
+
import { EMPTY_STRING } from '../input.types';
|
|
12
12
|
import '../input.component';
|
|
13
13
|
suite('NrInputElement', () => {
|
|
14
14
|
test('default properties', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-input_test.js","sourceRoot":"","sources":["../../../../src/components/input/test/hy-input_test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, fixture, expect } from '@open-wc/testing';\nimport { NrInputElement } from '../input.component';\nimport { INPUT_STATE, INPUT_SIZE, INPUT_TYPE, EMPTY_STRING } from '../input.constant';\nimport '../input.component';\nimport { HyIconElement } from '../../icon';\nsuite('NrInputElement', () => {\n test('default properties', async () => {\n const el: NrInputElement = await fixture(html`<nr-input> </nr-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n const input = el.shadowRoot!.querySelector('input')!;\n const slot = el.shadowRoot!.querySelector('slot');\n const assignedNode = slot!.assignedNodes();\n expect(el.disabled).to.be.false;\n expect(el.state).to.equal(INPUT_STATE.Default);\n expect(el.value).to.equal(EMPTY_STRING);\n expect(el.size).to.equal(INPUT_SIZE.Medium);\n expect(el.type).to.equal(INPUT_TYPE.TEXT);\n expect(el.placeholder).to.equal(EMPTY_STRING);\n expect(el.min).to.be.undefined;\n expect(el.max).to.be.undefined;\n expect(el.step).to.be.undefined;\n\n expect(input).to.not.have.attribute('min');\n expect(input).to.not.have.attribute('max');\n expect(input).to.not.have.attribute('step');\n expect(input.disabled).to.be.false;\n expect(input.type).to.equal(INPUT_TYPE.TEXT);\n expect(input.value).to.equal(EMPTY_STRING);\n expect(input.placeholder).to.equal(EMPTY_STRING);\n expect(inputContainer).to.have.attribute('data-size', INPUT_SIZE.Medium);\n expect(inputContainer.querySelector('#warning-icon')).to.be.null;\n expect(inputContainer.querySelector('#error-icon')).to.be.null;\n expect(inputContainer.querySelector('#password-icon')).to.be.null;\n expect(inputContainer.querySelector('#number-icons')).to.be.null;\n expect(assignedNode.length).to.equal(0);\n });\n\n test('input type password', async () => {\n const el: NrInputElement = await fixture(html`<nr-input type=\"password\"> </nr-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n let passwordIcon: HyIconElement = inputContainer.querySelector('#password-icon')!;\n expect(inputContainer.querySelector('#number-icons')).to.be.null;\n expect(passwordIcon).to.exist;\n expect(passwordIcon).to.have.attribute('name', 'eye');\n passwordIcon.click();\n await el.updateComplete;\n expect(el.inputType).to.equal('text');\n passwordIcon = inputContainer.querySelector('#password-icon')!;\n expect(passwordIcon).to.have.attribute('name', 'eye-slash');\n });\n\n suite('input type number', () => {\n test('init number input ', async () => {\n const step = 5;\n const min = 10;\n const max = 100;\n const el: NrInputElement = await fixture(\n html`<nr-input type=\"number\" step=${step} min=${min} max=${max}> </nr-input>`\n );\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n const input = el.shadowRoot!.querySelector('input')!;\n const passwordIcon: HyIconElement = inputContainer.querySelector('#password-icon')!;\n const numberIcon = inputContainer.querySelector('#number-icons');\n expect(passwordIcon).to.be.null;\n expect(numberIcon).to.exist;\n expect(input).to.have.attribute('min', min.toString());\n expect(input).to.have.attribute('max', max.toString());\n expect(input).to.have.attribute('step', step.toString());\n });\n test('increment number', async () => {\n const step = 5;\n const min = 10;\n const el: NrInputElement = await fixture(html`<nr-input type=\"number\" step=${step} min=${min}> </nr-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n const input = el.shadowRoot!.querySelector('input')!;\n const numberIcon = inputContainer.querySelector('#number-icons');\n const plusButton: HyIconElement = numberIcon!.querySelector(\"[name='plus']\")!;\n plusButton.click();\n expect(input.value).to.equal((min + step).toString());\n });\n test('decrement number', async () => {\n const step = 5;\n const el: NrInputElement = await fixture(html`<nr-input type=\"number\" step=${step}> </nr-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n const input = el.shadowRoot!.querySelector('input')!;\n const inputValue = input.value;\n const numberIcon = inputContainer.querySelector('#number-icons');\n const minusButton: HyIconElement = numberIcon!.querySelector(\"[name='minus']\")!;\n minusButton.click();\n expect(input.value).to.equal((+inputValue - step).toString());\n });\n });\n\n suite('input with state', () => {\n test('warning input', async () => {\n const inputState = INPUT_STATE.Warning;\n const el: NrInputElement = await fixture(html`<nr-input state=${inputState}> </nr-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n expect(inputContainer.querySelector('#warning-icon')).to.exist;\n expect(inputContainer.querySelector('#error-icon')).to.not.exist;\n });\n test('error input', async () => {\n const inputState = INPUT_STATE.Error;\n const el: NrInputElement = await fixture(html`<nr-input state=${inputState}> </nr-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n expect(inputContainer.querySelector('#warning-icon')).to.not.exist;\n expect(inputContainer.querySelector('#error-icon')).to.exist;\n });\n });\n suite('input with size', () => {\n test('large input', async () => {\n const inputSize = INPUT_SIZE.Large;\n const el: NrInputElement = await fixture(html`<nr-input size=${inputSize}> </nr-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n expect(inputContainer).to.have.attribute('data-size', inputSize);\n });\n test('medium input', async () => {\n const inputSize = INPUT_SIZE.Medium;\n const el: NrInputElement = await fixture(html`<nr-input size=${inputSize}> </nr-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n expect(inputContainer).to.have.attribute('data-size', inputSize);\n });\n });\n test('input with placeholder', async () => {\n const placeholder = 'text of placeholder';\n const el: NrInputElement = await fixture(html`<nr-input placeholder=${placeholder}> </nr-input>`);\n const input = el.shadowRoot!.querySelector('input')!;\n expect(input).to.have.attribute('placeholder', placeholder);\n });\n\n test('input with label', async () => {\n const inputLabel = 'input label';\n const el: NrInputElement = await fixture(html`<nr-input> <span slot=\"label\">${inputLabel}</span> </nr-input>`);\n const slot = el.shadowRoot!.querySelector('slot');\n const assignedNode = slot!.assignedNodes();\n expect(assignedNode[0]).to.have.attribute('slot', 'label');\n expect(assignedNode[0].textContent).to.equal(inputLabel);\n });\n\n test('input with helper text', async () => {\n const inputHelper = 'input helper';\n const el: NrInputElement = await fixture(\n html`<nr-input> <span slot=\"helper-text\">${inputHelper}</span> </nr-input>`\n );\n const slot = el.shadowRoot!.querySelectorAll('slot');\n const assignedNode = slot[1].assignedNodes();\n expect(assignedNode[0]).to.have.attribute('slot', 'helper-text');\n expect(assignedNode[0].textContent).to.equal(inputHelper);\n });\n\n test('input disabled', async () => {\n const el: NrInputElement = await fixture(html`<nr-input disabled></nr-input>`);\n const input = el.shadowRoot!.querySelector('input')!;\n expect(input.disabled).to.be.true;\n let inputFocus = false;\n input.addEventListener('focus', () => {\n inputFocus = true;\n });\n input.focus();\n\n expect(inputFocus).to.equal(false);\n });\n});\n"]}
|
|
1
|
+
{"version":3,"file":"hy-input_test.js","sourceRoot":"","sources":["../../../../src/components/input/test/hy-input_test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, fixture, expect } from '@open-wc/testing';\nimport { NrInputElement } from '../input.component';\nimport { INPUT_STATE, INPUT_SIZE, INPUT_TYPE, EMPTY_STRING } from '../input.types';\nimport '../input.component';\nimport { HyIconElement } from '../../icon';\nsuite('NrInputElement', () => {\n test('default properties', async () => {\n const el: NrInputElement = await fixture(html`<nr-input> </nr-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n const input = el.shadowRoot!.querySelector('input')!;\n const slot = el.shadowRoot!.querySelector('slot');\n const assignedNode = slot!.assignedNodes();\n expect(el.disabled).to.be.false;\n expect(el.state).to.equal(INPUT_STATE.Default);\n expect(el.value).to.equal(EMPTY_STRING);\n expect(el.size).to.equal(INPUT_SIZE.Medium);\n expect(el.type).to.equal(INPUT_TYPE.TEXT);\n expect(el.placeholder).to.equal(EMPTY_STRING);\n expect(el.min).to.be.undefined;\n expect(el.max).to.be.undefined;\n expect(el.step).to.be.undefined;\n\n expect(input).to.not.have.attribute('min');\n expect(input).to.not.have.attribute('max');\n expect(input).to.not.have.attribute('step');\n expect(input.disabled).to.be.false;\n expect(input.type).to.equal(INPUT_TYPE.TEXT);\n expect(input.value).to.equal(EMPTY_STRING);\n expect(input.placeholder).to.equal(EMPTY_STRING);\n expect(inputContainer).to.have.attribute('data-size', INPUT_SIZE.Medium);\n expect(inputContainer.querySelector('#warning-icon')).to.be.null;\n expect(inputContainer.querySelector('#error-icon')).to.be.null;\n expect(inputContainer.querySelector('#password-icon')).to.be.null;\n expect(inputContainer.querySelector('#number-icons')).to.be.null;\n expect(assignedNode.length).to.equal(0);\n });\n\n test('input type password', async () => {\n const el: NrInputElement = await fixture(html`<nr-input type=\"password\"> </nr-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n let passwordIcon: HyIconElement = inputContainer.querySelector('#password-icon')!;\n expect(inputContainer.querySelector('#number-icons')).to.be.null;\n expect(passwordIcon).to.exist;\n expect(passwordIcon).to.have.attribute('name', 'eye');\n passwordIcon.click();\n await el.updateComplete;\n expect(el.inputType).to.equal('text');\n passwordIcon = inputContainer.querySelector('#password-icon')!;\n expect(passwordIcon).to.have.attribute('name', 'eye-slash');\n });\n\n suite('input type number', () => {\n test('init number input ', async () => {\n const step = 5;\n const min = 10;\n const max = 100;\n const el: NrInputElement = await fixture(\n html`<nr-input type=\"number\" step=${step} min=${min} max=${max}> </nr-input>`\n );\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n const input = el.shadowRoot!.querySelector('input')!;\n const passwordIcon: HyIconElement = inputContainer.querySelector('#password-icon')!;\n const numberIcon = inputContainer.querySelector('#number-icons');\n expect(passwordIcon).to.be.null;\n expect(numberIcon).to.exist;\n expect(input).to.have.attribute('min', min.toString());\n expect(input).to.have.attribute('max', max.toString());\n expect(input).to.have.attribute('step', step.toString());\n });\n test('increment number', async () => {\n const step = 5;\n const min = 10;\n const el: NrInputElement = await fixture(html`<nr-input type=\"number\" step=${step} min=${min}> </nr-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n const input = el.shadowRoot!.querySelector('input')!;\n const numberIcon = inputContainer.querySelector('#number-icons');\n const plusButton: HyIconElement = numberIcon!.querySelector(\"[name='plus']\")!;\n plusButton.click();\n expect(input.value).to.equal((min + step).toString());\n });\n test('decrement number', async () => {\n const step = 5;\n const el: NrInputElement = await fixture(html`<nr-input type=\"number\" step=${step}> </nr-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n const input = el.shadowRoot!.querySelector('input')!;\n const inputValue = input.value;\n const numberIcon = inputContainer.querySelector('#number-icons');\n const minusButton: HyIconElement = numberIcon!.querySelector(\"[name='minus']\")!;\n minusButton.click();\n expect(input.value).to.equal((+inputValue - step).toString());\n });\n });\n\n suite('input with state', () => {\n test('warning input', async () => {\n const inputState = INPUT_STATE.Warning;\n const el: NrInputElement = await fixture(html`<nr-input state=${inputState}> </nr-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n expect(inputContainer.querySelector('#warning-icon')).to.exist;\n expect(inputContainer.querySelector('#error-icon')).to.not.exist;\n });\n test('error input', async () => {\n const inputState = INPUT_STATE.Error;\n const el: NrInputElement = await fixture(html`<nr-input state=${inputState}> </nr-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n expect(inputContainer.querySelector('#warning-icon')).to.not.exist;\n expect(inputContainer.querySelector('#error-icon')).to.exist;\n });\n });\n suite('input with size', () => {\n test('large input', async () => {\n const inputSize = INPUT_SIZE.Large;\n const el: NrInputElement = await fixture(html`<nr-input size=${inputSize}> </nr-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n expect(inputContainer).to.have.attribute('data-size', inputSize);\n });\n test('medium input', async () => {\n const inputSize = INPUT_SIZE.Medium;\n const el: NrInputElement = await fixture(html`<nr-input size=${inputSize}> </nr-input>`);\n const inputContainer = el.shadowRoot!.querySelector('#input-container')!;\n expect(inputContainer).to.have.attribute('data-size', inputSize);\n });\n });\n test('input with placeholder', async () => {\n const placeholder = 'text of placeholder';\n const el: NrInputElement = await fixture(html`<nr-input placeholder=${placeholder}> </nr-input>`);\n const input = el.shadowRoot!.querySelector('input')!;\n expect(input).to.have.attribute('placeholder', placeholder);\n });\n\n test('input with label', async () => {\n const inputLabel = 'input label';\n const el: NrInputElement = await fixture(html`<nr-input> <span slot=\"label\">${inputLabel}</span> </nr-input>`);\n const slot = el.shadowRoot!.querySelector('slot');\n const assignedNode = slot!.assignedNodes();\n expect(assignedNode[0]).to.have.attribute('slot', 'label');\n expect(assignedNode[0].textContent).to.equal(inputLabel);\n });\n\n test('input with helper text', async () => {\n const inputHelper = 'input helper';\n const el: NrInputElement = await fixture(\n html`<nr-input> <span slot=\"helper-text\">${inputHelper}</span> </nr-input>`\n );\n const slot = el.shadowRoot!.querySelectorAll('slot');\n const assignedNode = slot[1].assignedNodes();\n expect(assignedNode[0]).to.have.attribute('slot', 'helper-text');\n expect(assignedNode[0].textContent).to.equal(inputHelper);\n });\n\n test('input disabled', async () => {\n const el: NrInputElement = await fixture(html`<nr-input disabled></nr-input>`);\n const input = el.shadowRoot!.querySelector('input')!;\n expect(input.disabled).to.be.true;\n let inputFocus = false;\n input.addEventListener('focus', () => {\n inputFocus = true;\n });\n input.focus();\n\n expect(inputFocus).to.equal(false);\n });\n});\n"]}
|
package/utils/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/input/utils/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC"}
|
package/utils/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/utils/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nexport { InputValidationUtils } from './input-validation.utils.js';\nexport { InputRenderUtils } from './input-renderers.js';\n"]}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Google Laabidi Aymen
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
6
|
+
import { TemplateResult, nothing } from 'lit';
|
|
7
|
+
/**
|
|
8
|
+
* Rendering utilities for input component icons and elements
|
|
9
|
+
*/
|
|
10
|
+
export declare class InputRenderUtils {
|
|
11
|
+
/**
|
|
12
|
+
* Renders prefix slot content
|
|
13
|
+
*/
|
|
14
|
+
static renderPrefix(): TemplateResult;
|
|
15
|
+
/**
|
|
16
|
+
* Renders suffix slot content
|
|
17
|
+
*/
|
|
18
|
+
static renderSuffix(): TemplateResult;
|
|
19
|
+
/**
|
|
20
|
+
* Renders addon before slot content (outside input borders)
|
|
21
|
+
* Only renders if hasAddonBefore is true
|
|
22
|
+
*/
|
|
23
|
+
static renderAddonBefore(hasAddonBefore: boolean, onSlotChange: (e: Event) => void): TemplateResult | typeof nothing;
|
|
24
|
+
/**
|
|
25
|
+
* Renders addon after slot content (outside input borders)
|
|
26
|
+
* Only renders if hasAddonAfter is true
|
|
27
|
+
*/
|
|
28
|
+
static renderAddonAfter(hasAddonAfter: boolean, onSlotChange: (e: Event) => void): TemplateResult | typeof nothing;
|
|
29
|
+
/**
|
|
30
|
+
* Renders the copy icon when withCopy is enabled
|
|
31
|
+
*/
|
|
32
|
+
static renderCopyIcon(withCopy: boolean, disabled: boolean, readonly: boolean, onCopy: () => void, onKeydown: (e: KeyboardEvent) => void): TemplateResult | typeof nothing;
|
|
33
|
+
/**
|
|
34
|
+
* Renders the clear icon when allowClear is enabled and there's content
|
|
35
|
+
*/
|
|
36
|
+
static renderClearIcon(allowClear: boolean, value: string, disabled: boolean, readonly: boolean, onClear: () => void, onKeydown: (e: KeyboardEvent) => void): TemplateResult | typeof nothing;
|
|
37
|
+
/**
|
|
38
|
+
* Renders state-based icons (warning, error)
|
|
39
|
+
*/
|
|
40
|
+
static renderStateIcon(state: string): TemplateResult | typeof nothing;
|
|
41
|
+
/**
|
|
42
|
+
* Renders the calendar icon for calendar input type
|
|
43
|
+
*/
|
|
44
|
+
static renderCalendarIcon(state: string, type: string): TemplateResult | typeof nothing;
|
|
45
|
+
/**
|
|
46
|
+
* Renders password toggle icon
|
|
47
|
+
*/
|
|
48
|
+
static renderPasswordIcon(type: string, inputType: string, disabled: boolean, readonly: boolean, onToggle: () => void, onKeydown: (e: KeyboardEvent) => void): TemplateResult | typeof nothing;
|
|
49
|
+
/**
|
|
50
|
+
* Renders number input increment/decrement icons
|
|
51
|
+
*/
|
|
52
|
+
static renderNumberIcons(type: string, state: string, disabled: boolean, readonly: boolean, onIncrement: () => void, onDecrement: () => void, onKeydown: (e: KeyboardEvent) => void): TemplateResult | typeof nothing;
|
|
53
|
+
}
|
|
54
|
+
//# sourceMappingURL=input-renderers.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input-renderers.d.ts","sourceRoot":"","sources":["../../../../src/components/input/utils/input-renderers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAQ,cAAc,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpD;;GAEG;AACH,qBAAa,gBAAgB;IAE3B;;OAEG;IACH,MAAM,CAAC,YAAY,IAAI,cAAc;IAQrC;;OAEG;IACH,MAAM,CAAC,YAAY,IAAI,cAAc;IAQrC;;;OAGG;IACH,MAAM,CAAC,iBAAiB,CAAC,cAAc,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,GAAG,cAAc,GAAG,OAAO,OAAO;IAUpH;;;OAGG;IACH,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,GAAG,cAAc,GAAG,OAAO,OAAO;IAUlH;;OAEG;IACH,MAAM,CAAC,cAAc,CACnB,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,EACjB,MAAM,EAAE,MAAM,IAAI,EAClB,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,GACpC,cAAc,GAAG,OAAO,OAAO;IAelC;;OAEG;IACH,MAAM,CAAC,eAAe,CACpB,UAAU,EAAE,OAAO,EACnB,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,EACjB,OAAO,EAAE,MAAM,IAAI,EACnB,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,GACpC,cAAc,GAAG,OAAO,OAAO;IAelC;;OAEG;IACH,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,GAAG,OAAO,OAAO;IAWtE;;OAEG;IACH,MAAM,CAAC,kBAAkB,CACvB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,GACX,cAAc,GAAG,OAAO,OAAO;IAQlC;;OAEG;IACH,MAAM,CAAC,kBAAkB,CACvB,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,MAAM,IAAI,EACpB,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,GACpC,cAAc,GAAG,OAAO,OAAO;IA4BlC;;OAEG;IACH,MAAM,CAAC,iBAAiB,CACtB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,EACjB,WAAW,EAAE,MAAM,IAAI,EACvB,WAAW,EAAE,MAAM,IAAI,EACvB,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,GACpC,cAAc,GAAG,OAAO,OAAO;CA0BnC"}
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Google Laabidi Aymen
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
6
|
+
import { html, nothing } from 'lit';
|
|
7
|
+
/**
|
|
8
|
+
* Rendering utilities for input component icons and elements
|
|
9
|
+
*/
|
|
10
|
+
export class InputRenderUtils {
|
|
11
|
+
/**
|
|
12
|
+
* Renders prefix slot content
|
|
13
|
+
*/
|
|
14
|
+
static renderPrefix() {
|
|
15
|
+
return html `
|
|
16
|
+
<div class="input-prefix">
|
|
17
|
+
<slot name="prefix"></slot>
|
|
18
|
+
</div>
|
|
19
|
+
`;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Renders suffix slot content
|
|
23
|
+
*/
|
|
24
|
+
static renderSuffix() {
|
|
25
|
+
return html `
|
|
26
|
+
<div class="input-suffix">
|
|
27
|
+
<slot name="suffix"></slot>
|
|
28
|
+
</div>
|
|
29
|
+
`;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* Renders addon before slot content (outside input borders)
|
|
33
|
+
* Only renders if hasAddonBefore is true
|
|
34
|
+
*/
|
|
35
|
+
static renderAddonBefore(hasAddonBefore, onSlotChange) {
|
|
36
|
+
if (!hasAddonBefore)
|
|
37
|
+
return nothing;
|
|
38
|
+
return html `
|
|
39
|
+
<div class="input-addon-before">
|
|
40
|
+
<slot name="addon-before" @slotchange=${onSlotChange}></slot>
|
|
41
|
+
</div>
|
|
42
|
+
`;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Renders addon after slot content (outside input borders)
|
|
46
|
+
* Only renders if hasAddonAfter is true
|
|
47
|
+
*/
|
|
48
|
+
static renderAddonAfter(hasAddonAfter, onSlotChange) {
|
|
49
|
+
if (!hasAddonAfter)
|
|
50
|
+
return nothing;
|
|
51
|
+
return html `
|
|
52
|
+
<div class="input-addon-after">
|
|
53
|
+
<slot name="addon-after" @slotchange=${onSlotChange}></slot>
|
|
54
|
+
</div>
|
|
55
|
+
`;
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* Renders the copy icon when withCopy is enabled
|
|
59
|
+
*/
|
|
60
|
+
static renderCopyIcon(withCopy, disabled, readonly, onCopy, onKeydown) {
|
|
61
|
+
if (!withCopy)
|
|
62
|
+
return nothing;
|
|
63
|
+
return html `<hy-icon
|
|
64
|
+
name="copy"
|
|
65
|
+
type="regular"
|
|
66
|
+
id="copy-icon"
|
|
67
|
+
role="button"
|
|
68
|
+
aria-label="Copy input value"
|
|
69
|
+
tabindex="0"
|
|
70
|
+
@click=${!disabled && !readonly ? onCopy : nothing}
|
|
71
|
+
@keydown=${onKeydown}
|
|
72
|
+
></hy-icon>`;
|
|
73
|
+
}
|
|
74
|
+
/**
|
|
75
|
+
* Renders the clear icon when allowClear is enabled and there's content
|
|
76
|
+
*/
|
|
77
|
+
static renderClearIcon(allowClear, value, disabled, readonly, onClear, onKeydown) {
|
|
78
|
+
if (!allowClear || !value || disabled || readonly)
|
|
79
|
+
return nothing;
|
|
80
|
+
return html `<hy-icon
|
|
81
|
+
name="times-circle"
|
|
82
|
+
type="regular"
|
|
83
|
+
id="clear-icon"
|
|
84
|
+
role="button"
|
|
85
|
+
aria-label="Clear input value"
|
|
86
|
+
tabindex="0"
|
|
87
|
+
@click=${onClear}
|
|
88
|
+
@keydown=${onKeydown}
|
|
89
|
+
></hy-icon>`;
|
|
90
|
+
}
|
|
91
|
+
/**
|
|
92
|
+
* Renders state-based icons (warning, error)
|
|
93
|
+
*/
|
|
94
|
+
static renderStateIcon(state) {
|
|
95
|
+
switch (state) {
|
|
96
|
+
case "warning" /* INPUT_STATE.Warning */:
|
|
97
|
+
return html `<hy-icon name="warning" id="warning-icon"></hy-icon>`;
|
|
98
|
+
case "error" /* INPUT_STATE.Error */:
|
|
99
|
+
return html `<hy-icon name="exclamation-circle" id="error-icon"></hy-icon>`;
|
|
100
|
+
default:
|
|
101
|
+
return nothing;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
/**
|
|
105
|
+
* Renders the calendar icon for calendar input type
|
|
106
|
+
*/
|
|
107
|
+
static renderCalendarIcon(state, type) {
|
|
108
|
+
if (state !== "default" /* INPUT_STATE.Default */ || type !== "calendar" /* INPUT_TYPE.CALENDAR */) {
|
|
109
|
+
return nothing;
|
|
110
|
+
}
|
|
111
|
+
return html `<hy-icon name="calendar" type="regular" id="calendar-icon"></hy-icon>`;
|
|
112
|
+
}
|
|
113
|
+
/**
|
|
114
|
+
* Renders password toggle icon
|
|
115
|
+
*/
|
|
116
|
+
static renderPasswordIcon(type, inputType, disabled, readonly, onToggle, onKeydown) {
|
|
117
|
+
if (type !== "password" /* INPUT_TYPE.PASSWORD */)
|
|
118
|
+
return nothing;
|
|
119
|
+
if (inputType === "text" /* INPUT_TYPE.TEXT */) {
|
|
120
|
+
return html `<hy-icon
|
|
121
|
+
name="eye-slash"
|
|
122
|
+
type="regular"
|
|
123
|
+
id="password-icon"
|
|
124
|
+
role="button"
|
|
125
|
+
aria-label="Hide password"
|
|
126
|
+
tabindex="0"
|
|
127
|
+
@click=${!disabled && !readonly ? onToggle : nothing}
|
|
128
|
+
@keydown=${onKeydown}
|
|
129
|
+
></hy-icon>`;
|
|
130
|
+
}
|
|
131
|
+
else {
|
|
132
|
+
return html `<hy-icon
|
|
133
|
+
name="eye"
|
|
134
|
+
type="regular"
|
|
135
|
+
id="password-icon"
|
|
136
|
+
role="button"
|
|
137
|
+
aria-label="Show password"
|
|
138
|
+
tabindex="0"
|
|
139
|
+
@click=${!disabled && !readonly ? onToggle : nothing}
|
|
140
|
+
@keydown=${onKeydown}
|
|
141
|
+
></hy-icon>`;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
/**
|
|
145
|
+
* Renders number input increment/decrement icons
|
|
146
|
+
*/
|
|
147
|
+
static renderNumberIcons(type, state, disabled, readonly, onIncrement, onDecrement, onKeydown) {
|
|
148
|
+
if (type !== "number" /* INPUT_TYPE.NUMBER */)
|
|
149
|
+
return nothing;
|
|
150
|
+
return html `
|
|
151
|
+
<div id="number-icons">
|
|
152
|
+
${state !== "default" /* INPUT_STATE.Default */ ? html `<span id="icons-separator">|</span>` : nothing}
|
|
153
|
+
<hy-icon
|
|
154
|
+
name="minus"
|
|
155
|
+
aria-label="Decrease value"
|
|
156
|
+
role="button"
|
|
157
|
+
tabindex="0"
|
|
158
|
+
@click=${!disabled && !readonly ? onDecrement : nothing}
|
|
159
|
+
@keydown=${onKeydown}
|
|
160
|
+
></hy-icon>
|
|
161
|
+
<span id="icons-separator">|</span>
|
|
162
|
+
<hy-icon
|
|
163
|
+
name="plus"
|
|
164
|
+
aria-label="Increase value"
|
|
165
|
+
role="button"
|
|
166
|
+
tabindex="0"
|
|
167
|
+
@click=${!disabled && !readonly ? onIncrement : nothing}
|
|
168
|
+
@keydown=${onKeydown}
|
|
169
|
+
></hy-icon>
|
|
170
|
+
</div>
|
|
171
|
+
`;
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
//# sourceMappingURL=input-renderers.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input-renderers.js","sourceRoot":"","sources":["../../../../src/components/input/utils/input-renderers.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, TemplateResult, nothing } from 'lit';\nimport { INPUT_TYPE, INPUT_STATE } from '../input.types.js';\n\n/**\n * Rendering utilities for input component icons and elements\n */\nexport class InputRenderUtils {\n\n /**\n * Renders prefix slot content\n */\n static renderPrefix(): TemplateResult {\n return html`\n <div class=\"input-prefix\">\n <slot name=\"prefix\"></slot>\n </div>\n `;\n }\n\n /**\n * Renders suffix slot content \n */\n static renderSuffix(): TemplateResult {\n return html`\n <div class=\"input-suffix\">\n <slot name=\"suffix\"></slot>\n </div>\n `;\n }\n\n /**\n * Renders addon before slot content (outside input borders)\n * Only renders if hasAddonBefore is true\n */\n static renderAddonBefore(hasAddonBefore: boolean, onSlotChange: (e: Event) => void): TemplateResult | typeof nothing {\n if (!hasAddonBefore) return nothing;\n \n return html`\n <div class=\"input-addon-before\">\n <slot name=\"addon-before\" @slotchange=${onSlotChange}></slot>\n </div>\n `;\n }\n\n /**\n * Renders addon after slot content (outside input borders) \n * Only renders if hasAddonAfter is true\n */\n static renderAddonAfter(hasAddonAfter: boolean, onSlotChange: (e: Event) => void): TemplateResult | typeof nothing {\n if (!hasAddonAfter) return nothing;\n \n return html`\n <div class=\"input-addon-after\">\n <slot name=\"addon-after\" @slotchange=${onSlotChange}></slot>\n </div>\n `;\n }\n\n /**\n * Renders the copy icon when withCopy is enabled\n */\n static renderCopyIcon(\n withCopy: boolean,\n disabled: boolean,\n readonly: boolean,\n onCopy: () => void,\n onKeydown: (e: KeyboardEvent) => void\n ): TemplateResult | typeof nothing {\n if (!withCopy) return nothing;\n \n return html`<hy-icon\n name=\"copy\"\n type=\"regular\"\n id=\"copy-icon\"\n role=\"button\"\n aria-label=\"Copy input value\"\n tabindex=\"0\"\n @click=${!disabled && !readonly ? onCopy : nothing}\n @keydown=${onKeydown}\n ></hy-icon>`;\n }\n\n /**\n * Renders the clear icon when allowClear is enabled and there's content\n */\n static renderClearIcon(\n allowClear: boolean,\n value: string,\n disabled: boolean,\n readonly: boolean,\n onClear: () => void,\n onKeydown: (e: KeyboardEvent) => void\n ): TemplateResult | typeof nothing {\n if (!allowClear || !value || disabled || readonly) return nothing;\n \n return html`<hy-icon\n name=\"times-circle\"\n type=\"regular\"\n id=\"clear-icon\"\n role=\"button\"\n aria-label=\"Clear input value\"\n tabindex=\"0\"\n @click=${onClear}\n @keydown=${onKeydown}\n ></hy-icon>`;\n }\n\n /**\n * Renders state-based icons (warning, error)\n */\n static renderStateIcon(state: string): TemplateResult | typeof nothing {\n switch (state) {\n case INPUT_STATE.Warning:\n return html`<hy-icon name=\"warning\" id=\"warning-icon\"></hy-icon>`;\n case INPUT_STATE.Error:\n return html`<hy-icon name=\"exclamation-circle\" id=\"error-icon\"></hy-icon>`;\n default:\n return nothing;\n }\n }\n\n /**\n * Renders the calendar icon for calendar input type\n */\n static renderCalendarIcon(\n state: string,\n type: string\n ): TemplateResult | typeof nothing {\n if (state !== INPUT_STATE.Default || type !== INPUT_TYPE.CALENDAR) {\n return nothing;\n }\n \n return html`<hy-icon name=\"calendar\" type=\"regular\" id=\"calendar-icon\"></hy-icon>`;\n }\n\n /**\n * Renders password toggle icon\n */\n static renderPasswordIcon(\n type: string,\n inputType: string,\n disabled: boolean,\n readonly: boolean,\n onToggle: () => void,\n onKeydown: (e: KeyboardEvent) => void\n ): TemplateResult | typeof nothing {\n if (type !== INPUT_TYPE.PASSWORD) return nothing;\n \n if (inputType === INPUT_TYPE.TEXT) {\n return html`<hy-icon\n name=\"eye-slash\"\n type=\"regular\"\n id=\"password-icon\"\n role=\"button\"\n aria-label=\"Hide password\"\n tabindex=\"0\"\n @click=${!disabled && !readonly ? onToggle : nothing}\n @keydown=${onKeydown}\n ></hy-icon>`;\n } else {\n return html`<hy-icon\n name=\"eye\"\n type=\"regular\"\n id=\"password-icon\"\n role=\"button\"\n aria-label=\"Show password\"\n tabindex=\"0\"\n @click=${!disabled && !readonly ? onToggle : nothing}\n @keydown=${onKeydown}\n ></hy-icon>`;\n }\n }\n\n /**\n * Renders number input increment/decrement icons\n */\n static renderNumberIcons(\n type: string,\n state: string,\n disabled: boolean,\n readonly: boolean,\n onIncrement: () => void,\n onDecrement: () => void,\n onKeydown: (e: KeyboardEvent) => void\n ): TemplateResult | typeof nothing {\n if (type !== INPUT_TYPE.NUMBER) return nothing;\n \n return html`\n <div id=\"number-icons\">\n ${state !== INPUT_STATE.Default ? html`<span id=\"icons-separator\">|</span>` : nothing}\n <hy-icon \n name=\"minus\" \n aria-label=\"Decrease value\"\n role=\"button\"\n tabindex=\"0\"\n @click=${!disabled && !readonly ? onDecrement : nothing}\n @keydown=${onKeydown}\n ></hy-icon>\n <span id=\"icons-separator\">|</span>\n <hy-icon \n name=\"plus\" \n aria-label=\"Increase value\"\n role=\"button\"\n tabindex=\"0\"\n @click=${!disabled && !readonly ? onIncrement : nothing}\n @keydown=${onKeydown}\n ></hy-icon>\n </div>\n `;\n }\n}\n"]}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Google Laabidi Aymen
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* Validation utilities for input components
|
|
8
|
+
*/
|
|
9
|
+
export declare class InputValidationUtils {
|
|
10
|
+
/**
|
|
11
|
+
* Validates numeric properties (min, max, step) to ensure they are valid numbers
|
|
12
|
+
*/
|
|
13
|
+
static validateNumericProperties(type: string, min?: string, max?: string, step?: string): void;
|
|
14
|
+
/**
|
|
15
|
+
* Prevents non-numeric characters from being typed in number inputs
|
|
16
|
+
*/
|
|
17
|
+
static preventNonNumericInput(keyDownEvent: KeyboardEvent, min?: string): void;
|
|
18
|
+
/**
|
|
19
|
+
* Validates a numeric value against min/max constraints
|
|
20
|
+
*/
|
|
21
|
+
static validateNumericValue(value: string, min?: string, max?: string): {
|
|
22
|
+
isValid: boolean;
|
|
23
|
+
warnings: string[];
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
//# sourceMappingURL=input-validation.utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input-validation.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/input/utils/input-validation.utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH;;GAEG;AACH,qBAAa,oBAAoB;IAE/B;;OAEG;IACH,MAAM,CAAC,yBAAyB,CAC9B,IAAI,EAAE,MAAM,EACZ,GAAG,CAAC,EAAE,MAAM,EACZ,GAAG,CAAC,EAAE,MAAM,EACZ,IAAI,CAAC,EAAE,MAAM,GACZ,IAAI;IAiBP;;OAEG;IACH,MAAM,CAAC,sBAAsB,CAC3B,YAAY,EAAE,aAAa,EAC3B,GAAG,CAAC,EAAE,MAAM,GACX,IAAI;IAyDP;;OAEG;IACH,MAAM,CAAC,oBAAoB,CACzB,KAAK,EAAE,MAAM,EACb,GAAG,CAAC,EAAE,MAAM,EACZ,GAAG,CAAC,EAAE,MAAM,GACX;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,EAAE,CAAA;KAAE;CA0B5C"}
|