@nuralyui/input 0.0.5 → 0.0.6

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 (35) hide show
  1. package/input.component.d.ts +23 -18
  2. package/input.component.d.ts.map +1 -1
  3. package/input.component.js +205 -139
  4. package/input.component.js.map +1 -1
  5. package/input.style.d.ts.map +1 -1
  6. package/input.style.js +118 -7
  7. package/input.style.js.map +1 -1
  8. package/{input.style.variable..d.ts → input.style.variable.d.ts} +1 -1
  9. package/input.style.variable.d.ts.map +1 -0
  10. package/{input.style.variable..js → input.style.variable.js} +25 -3
  11. package/input.style.variable.js.map +1 -0
  12. package/{input.constant.d.ts → input.types.d.ts} +1 -1
  13. package/input.types.d.ts.map +1 -0
  14. package/input.types.js +2 -0
  15. package/input.types.js.map +1 -0
  16. package/package.json +1 -1
  17. package/test/hy-input_test.js +1 -1
  18. package/test/hy-input_test.js.map +1 -1
  19. package/utils/index.d.ts +8 -0
  20. package/utils/index.d.ts.map +1 -0
  21. package/utils/index.js +8 -0
  22. package/utils/index.js.map +1 -0
  23. package/utils/input-renderers.d.ts +50 -0
  24. package/utils/input-renderers.d.ts.map +1 -0
  25. package/utils/input-renderers.js +157 -0
  26. package/utils/input-renderers.js.map +1 -0
  27. package/utils/input-validation.utils.d.ts +26 -0
  28. package/utils/input-validation.utils.d.ts.map +1 -0
  29. package/utils/input-validation.utils.js +105 -0
  30. package/utils/input-validation.utils.js.map +1 -0
  31. package/input.constant.d.ts.map +0 -1
  32. package/input.constant.js +0 -2
  33. package/input.constant.js.map +0 -1
  34. package/input.style.variable..d.ts.map +0 -1
  35. package/input.style.variable..js.map +0 -1
package/input.style.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { css } from 'lit';
2
- import { styleVariables } from './input.style.variable..js';
2
+ import { styleVariables } from './input.style.variable.js';
3
3
  /**
4
4
  * Input component styles for the Hybrid UI Library
5
5
  *
@@ -27,22 +27,29 @@ const inputStyle = css `
27
27
  }
28
28
 
29
29
  /*
30
- * Base input container and input element styles
30
+ * Base input wrapper and input element styles
31
+ * Background applied to wrapper to cover entire container including addons
31
32
  * Uses CSS custom properties with fallbacks for comprehensive theming support
32
33
  * Properties follow the pattern: --hybrid-input-{property}, --hybrid-input-local-{property}
33
34
  */
34
- :host > #input-container,
35
- #input-container > input {
35
+ .input-wrapper {
36
36
  background-color: var(--hybrid-input-background-color, var(--hybrid-input-local-background-color));
37
37
  }
38
38
 
39
+ #input-container > input {
40
+ background-color: transparent;
41
+ }
42
+
39
43
  /*
40
- * Disabled state styles for container and input
44
+ * Disabled state styles for wrapper and input
41
45
  * Applied when input is disabled - removes interactivity and applies muted colors
42
46
  */
43
- :host([disabled]) > #input-container,
44
- :host([disabled]) > #input-container > input {
47
+ :host([disabled]) .input-wrapper {
45
48
  background-color: var(--hybrid-input-disabled-background-color, var(--hybrid-input-local-disabled-background-color));
49
+ }
50
+
51
+ :host([disabled]) #input-container > input {
52
+ background-color: transparent;
46
53
  cursor: not-allowed;
47
54
  }
48
55
 
@@ -165,6 +172,72 @@ const inputStyle = css `
165
172
  * INPUT CONTAINER STYLES
166
173
  * ======================================== */
167
174
 
175
+ /*
176
+ * Input wrapper - contains addons and input container
177
+ * Provides horizontal layout for addon before/after elements
178
+ */
179
+ .input-wrapper {
180
+ display: flex;
181
+ align-items: stretch;
182
+ width: 100%;
183
+ }
184
+
185
+ /*
186
+ * Addon before element - content before input (outside borders)
187
+ * Styled to visually connect with input
188
+ */
189
+ .input-addon-before {
190
+ background-color: var(--hybrid-input-addon-background-color, var(--hybrid-input-local-addon-background-color));
191
+ border: var(--hybrid-input-border, var(--hybrid-input-local-border));
192
+ border-right: none;
193
+ border-top-left-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));
194
+ border-bottom-left-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));
195
+ padding: var(--hybrid-input-addon-padding, var(--hybrid-input-local-addon-padding));
196
+ display: flex;
197
+ align-items: center;
198
+ color: var(--hybrid-input-addon-color, var(--hybrid-input-local-addon-color));
199
+ font-size: var(--hybrid-input-font-size, var(--hybrid-input-local-font-size));
200
+ white-space: nowrap;
201
+ min-width: 0; /* Allow shrinking */
202
+ flex-shrink: 0; /* Prevent shrinking */
203
+ }
204
+
205
+ /*
206
+ * Addon after element - content after input (outside borders)
207
+ * Styled to visually connect with input
208
+ */
209
+ .input-addon-after {
210
+ background-color: var(--hybrid-input-addon-background-color, var(--hybrid-input-local-addon-background-color));
211
+ border: var(--hybrid-input-border, var(--hybrid-input-local-border));
212
+ border-left: none;
213
+ border-top-right-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));
214
+ border-bottom-right-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));
215
+ padding: var(--hybrid-input-addon-padding, var(--hybrid-input-local-addon-padding));
216
+ display: flex;
217
+ align-items: center;
218
+ color: var(--hybrid-input-addon-color, var(--hybrid-input-local-addon-color));
219
+ font-size: var(--hybrid-input-font-size, var(--hybrid-input-local-font-size));
220
+ white-space: nowrap;
221
+ min-width: 0; /* Allow shrinking */
222
+ flex-shrink: 0; /* Prevent shrinking */
223
+ }
224
+
225
+ /*
226
+ * Input container border radius adjustments when addons are present
227
+ * Removes border radius on sides where addons are attached
228
+ */
229
+ .input-wrapper:has(.input-addon-before) #input-container {
230
+ border-top-left-radius: 0;
231
+ border-bottom-left-radius: 0;
232
+ border-left: none;
233
+ }
234
+
235
+ .input-wrapper:has(.input-addon-after) #input-container {
236
+ border-top-right-radius: 0;
237
+ border-bottom-right-radius: 0;
238
+ border-right: none;
239
+ }
240
+
168
241
  /*
169
242
  * Main input container element
170
243
  * Uses CSS custom properties for comprehensive border and layout control
@@ -186,6 +259,8 @@ const inputStyle = css `
186
259
  /* Layout */
187
260
  display: flex;
188
261
  position: relative;
262
+ flex: 1; /* Take available space in wrapper */
263
+ min-width: 0; /* Allow shrinking below content size */
189
264
  }
190
265
 
191
266
  /*
@@ -306,6 +381,42 @@ const inputStyle = css `
306
381
  :host([disabled]) ::slotted([slot='label']) {
307
382
  color: var(--hybrid-input-disabled-label-color, var(--hybrid-input-local-disabled-label-color));
308
383
  }
384
+
385
+ /*
386
+ * Prefix slot styling
387
+ * Applied to slotted prefix content (icons, text, etc.)
388
+ */
389
+ ::slotted([slot='prefix']) {
390
+ display: flex;
391
+ align-items: center;
392
+ padding-right: var(--hybrid-input-prefix-padding-right, var(--hybrid-input-local-prefix-padding-right));
393
+ color: var(--hybrid-input-prefix-color, var(--hybrid-input-local-prefix-color));
394
+ font-size: var(--hybrid-input-prefix-font-size, var(--hybrid-input-local-prefix-font-size));
395
+ flex-shrink: 0;
396
+ }
397
+
398
+ /*
399
+ * Suffix slot styling
400
+ * Applied to slotted suffix content (icons, text, etc.)
401
+ */
402
+ ::slotted([slot='suffix']) {
403
+ display: flex;
404
+ align-items: center;
405
+ padding-left: var(--hybrid-input-suffix-padding-left, var(--hybrid-input-local-suffix-padding-left));
406
+ color: var(--hybrid-input-suffix-color, var(--hybrid-input-local-suffix-color));
407
+ font-size: var(--hybrid-input-suffix-font-size, var(--hybrid-input-local-suffix-font-size));
408
+ flex-shrink: 0;
409
+ }
410
+
411
+ /*
412
+ * Disabled state for prefix and suffix slots
413
+ * Applied when input is disabled
414
+ */
415
+ :host([disabled]) ::slotted([slot='prefix']),
416
+ :host([disabled]) ::slotted([slot='suffix']) {
417
+ opacity: var(--hybrid-input-disabled-icon-opacity, var(--hybrid-input-local-disabled-icon-opacity));
418
+ color: var(--hybrid-input-disabled-prefix-suffix-color, var(--hybrid-input-local-disabled-prefix-suffix-color));
419
+ }
309
420
  `;
310
421
  /**
311
422
  * Size variation styles for the input component
package/input.style.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"input.style.js","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5D;;;;;;;;;;;;;;GAcG;AAEH,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmSrB,CAAC;AAEF;;;GAGG;AACH,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BzB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,UAAU,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { styleVariables } from './input.style.variable..js';\n\n/**\n * Input component styles for the Hybrid UI Library\n * \n * This file contains all the styling for the nr-input component, including:\n * - Base input styles with CSS custom properties for theming\n * - Multiple input states (default, warning, error)\n * - Size variations (small, medium, large)\n * - Different input types (text, password, number, calendar)\n * - Icon positioning and styling\n * - Focus, disabled, and validation states\n * - Dark theme support\n * \n * The styling system uses CSS custom properties with fallbacks to allow\n * for both global and local customization of input appearance.\n */\n\nconst inputStyle = css`\n /* \n * Host element base styles\n * Container for the input component with flexible layout\n */\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));\n }\n\n /* \n * Base input container and input element styles\n * Uses CSS custom properties with fallbacks for comprehensive theming support\n * Properties follow the pattern: --hybrid-input-{property}, --hybrid-input-local-{property}\n */\n :host > #input-container,\n #input-container > input {\n background-color: var(--hybrid-input-background-color, var(--hybrid-input-local-background-color));\n }\n\n /* \n * Disabled state styles for container and input\n * Applied when input is disabled - removes interactivity and applies muted colors\n */\n :host([disabled]) > #input-container,\n :host([disabled]) > #input-container > input {\n background-color: var(--hybrid-input-disabled-background-color, var(--hybrid-input-local-disabled-background-color));\n cursor: not-allowed;\n }\n\n /* \n * Icon base styles\n * Common styling for all icons within the input component\n */\n hy-icon {\n display: flex;\n align-items: center;\n }\n\n /* \n * Placeholder styling\n * Customizable placeholder text appearance\n */\n ::placeholder {\n color: var(--hybrid-input-placeholder-color, var(--hybrid-input-local-placeholder-color));\n font-size: var(--hybrid-input-placeholder-font-size, var(--hybrid-input-local-placeholder-font-size));\n font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));\n }\n\n /* \n * Disabled placeholder styling\n * Applied when input is disabled\n */\n :host([disabled]) ::placeholder {\n color: var(--hybrid-input-disabled-placeholder-color, var(--hybrid-input-local-disabled-placeholder-color));\n }\n\n /* ========================================\n * ICON VARIANTS AND STATES\n * ======================================== */\n\n /* Warning state icon */\n #warning-icon {\n --hybrid-icon-color: var(--hybrid-input-warning-icon-color, var(--hybrid-input-local-warning-icon-color));\n }\n\n /* Error state icon */\n #error-icon {\n --hybrid-icon-color: var(--hybrid-input-error-icon-color, var(--hybrid-input-local-error-icon-color));\n }\n\n /* Calendar input type icon */\n #calendar-icon {\n --hybrid-icon-color: var(--hybrid-input-calendar-icon-color, var(--hybrid-input-local-calendar-icon-color));\n }\n\n /* Password toggle icon */\n #password-icon {\n padding-left: var(--hybrid-input-password-icon-padding-left, var(--hybrid-input-local-password-icon-padding-left));\n padding-right: var(--hybrid-input-password-icon-padding-right, var(--hybrid-input-local-password-icon-padding-right));\n cursor: pointer;\n --hybrid-icon-color: var(--hybrid-input-password-icon-color, var(--hybrid-input-local-password-icon-color));\n }\n\n /* Copy functionality icon */\n #copy-icon {\n padding-right: var(--hybrid-input-copy-icon-padding-right, var(--hybrid-input-local-copy-icon-padding-right));\n --hybrid-icon-color: var(--hybrid-input-copy-icon-color, var(--hybrid-input-local-copy-icon-color));\n cursor: pointer;\n }\n\n /* \n * Number input increment/decrement icons container\n * Positioned absolutely for overlay on input\n */\n #number-icons {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n width: var(--hybrid-input-number-icons-container-width, var(--hybrid-input-local-number-icons-container-width));\n padding-right: var(--hybrid-input-number-icons-container-padding-right, var(--hybrid-input-local-number-icons-container-padding-right));\n }\n\n /* Individual number icons styling */\n #number-icons hy-icon {\n --hybrid-icon-color: var(--hybrid-input-number-icons-color, var(--hybrid-input-local-number-icons-color));\n padding-left: var(--hybrid-input-number-icons-padding-left, var(--hybrid-input-local-number-icons-padding-left));\n padding-right: var(--hybrid-input-number-icons-padding-right, var(--hybrid-input-local-number-icons-padding-right));\n width: var(--hybrid-input-number-icons-width, var(--hybrid-input-local-number-icons-width));\n height: var(--hybrid-input-number-icons-height, var(--hybrid-input-local-number-icons-height));\n }\n\n /* Number icons separator styling */\n #icons-separator {\n color: var(--hybrid-input-number-icons-separator-color, var(--hybrid-input-local-number-icons-separator-color));\n padding-bottom: var(--hybrid-input-number-icons-separator-padding-bottom, var(--hybrid-input-local-number-icons-separator-padding-bottom));\n padding-left: var(--hybrid-input-number-icons-separator-padding-left, var(--hybrid-input-local-number-icons-separator-padding-left));\n padding-right: var(--hybrid-input-number-icons-separator-padding-right, var(--hybrid-input-local-number-icons-separator-padding-right));\n }\n\n /* \n * Disabled state for all icons\n * Applied when input is disabled - reduces opacity and disables interaction\n */\n :host([disabled]) #password-icon,\n :host([disabled]) #error-icon,\n :host([disabled]) #warning-icon,\n :host([disabled]) #number-icons,\n :host([disabled]) #calendar-icon,\n :host([disabled]) #copy-icon {\n opacity: var(--hybrid-input-disabled-icon-opacity, var(--hybrid-input-local-disabled-icon-opacity));\n }\n\n /* Disabled icons cursor override */\n :host([disabled]) #password-icon,\n :host([disabled]) #number-icons,\n :host([disabled]) #copy-icon {\n cursor: not-allowed;\n }\n\n /* ========================================\n * INPUT CONTAINER STYLES\n * ======================================== */\n\n /* \n * Main input container element\n * Uses CSS custom properties for comprehensive border and layout control\n */\n #input-container {\n /* Border properties - individual sides for granular control */\n border-bottom: var(--hybrid-input-border-bottom, var(--hybrid-input-local-border-bottom));\n border-top: var(--hybrid-input-border-top, var(--hybrid-input-local-border-top));\n border-left: var(--hybrid-input-border-left, var(--hybrid-input-local-border-left));\n border-right: var(--hybrid-input-border-right, var(--hybrid-input-local-border-right));\n \n /* Border radius - individual corners for design flexibility */\n border-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius)); \n border-top-left-radius: var(--hybrid-input-border-top-left-radius, var(--hybrid-input-local-border-top-left-radius));\n border-top-right-radius: var(--hybrid-input-border-top-right-radius, var(--hybrid-input-local-border-top-right-radius));\n border-bottom-left-radius: var(--hybrid-input-border-bottom-left-radius, var(--hybrid-input-local-border-bottom-left-radius));\n border-bottom-right-radius: var(--hybrid-input-border-bottom-right-radius, var(--hybrid-input-local-border-bottom-right-radius));\n \n /* Layout */\n display: flex;\n position: relative;\n }\n\n /* \n * Disabled container border styles\n * Applied when input is disabled\n */\n :host([disabled]) #input-container {\n border-bottom: var(--hybrid-input-disabled-border-bottom, var(--hybrid-input-local-disabled-border-bottom));\n border-top: var(--hybrid-input-disabled-border-top, var(--hybrid-input-local-disabled-border-top));\n border-left: var(--hybrid-input-disabled-border-left, var(--hybrid-input-local-disabled-border-left));\n border-right: var(--hybrid-input-disabled-border-right, var(--hybrid-input-local-disabled-border-right));\n opacity: 0.6;\n }\n\n /* ========================================\n * INPUT ELEMENT STYLES\n * ======================================== */\n\n /* \n * Base input element styling\n * Full width with no default borders, using container for styling\n */\n input {\n width: 100%;\n border: none;\n outline: none;\n color: var(--hybrid-input-text-color, var(--hybrid-input-local-text-color));\n font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));\n font-size: var(--hybrid-input-font-size, var(--hybrid-input-local-font-size));\n }\n\n /* Remove default number input spinners */\n /* Chrome, Safari, Edge, Opera */\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n \n /* Firefox */\n input[type='number'] {\n -moz-appearance: textfield;\n }\n\n /* ========================================\n * STATE STYLES\n * ======================================== */\n\n /* \n * Error state styling\n * Applied when state='error' and not disabled\n */\n :host(:not([disabled])[state='error']) > #input-container {\n border: var(--hybrid-input-error-border, var(--hybrid-input-local-error-border));\n }\n\n /* \n * Focus state styling\n * Applied when input receives focus and not in error state\n */\n :host(:not([state='error'])) > #input-container:focus-within {\n border: var(--hybrid-input-focus-border, var(--hybrid-input-local-focus-border));\n }\n\n /* \n * Number input icon positioning adjustments for error/warning states\n * When validation states are present, adjust icon positioning\n */\n :host([state='error']) input[type='number'] ~ #number-icons,\n :host([state='warning']) input[type='number'] ~ #number-icons {\n position: static;\n padding-left: var(--hybrid-input-number-icons-container-padding-left, var(--hybrid-input-local-number-icons-container-padding-left));\n }\n\n /* ========================================\n * SLOTTED CONTENT STYLES\n * ======================================== */\n\n /* \n * Label slot styling\n * Applied to slotted label elements\n */\n ::slotted([slot='label']) {\n color: var(--hybrid-input-label-color, var(--hybrid-input-local-label-color));\n font-size: var(--hybrid-input-label-font-size, var(--hybrid-input-local-label-font-size));\n padding-bottom: var(--hybrid-input-label-padding-bottom, var(--hybrid-input-local-label-padding-bottom));\n }\n\n /* \n * Helper text slot styling\n * Applied to slotted helper text elements\n */\n ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-helper-text-color, var(--hybrid-input-local-helper-text-color));\n font-size: var(--hybrid-input-helper-text-font-size, var(--hybrid-input-local-helper-text-font-size));\n padding-top: var(--hybrid-input-helper-text-padding-top, var(--hybrid-input-local-helper-text-padding-top));\n }\n\n /* \n * State-specific helper text colors\n * Override helper text color based on validation state\n */\n :host([state='error']) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-error-helper-text-color, var(--hybrid-input-local-error-helper-text-color));\n }\n\n :host([state='warning']) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-warning-helper-text-color, var(--hybrid-input-local-warning-helper-text-color));\n }\n\n /* \n * Disabled state for slotted content\n * Applied when input is disabled\n */\n :host([disabled]) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-disabled-helper-text-color, var(--hybrid-input-local-disabled-helper-text-color));\n }\n\n :host([disabled]) ::slotted([slot='label']) {\n color: var(--hybrid-input-disabled-label-color, var(--hybrid-input-local-disabled-label-color));\n }\n`;\n\n/**\n * Size variation styles for the input component\n * Defines padding and spacing for different input sizes\n */\nconst sizeInputStyle = css`\n /* ========================================\n * SIZE VARIATIONS\n * ======================================== */\n\n /* Large input size variant */\n div[data-size='large'] {\n padding-top: var(--hybrid-input-large-padding-top, var(--hybrid-input-local-large-padding-top));\n padding-bottom: var(--hybrid-input-large-padding-bottom, var(--hybrid-input-local-large-padding-bottom));\n padding-left: var(--hybrid-input-large-padding-left, var(--hybrid-input-local-large-padding-left));\n padding-right: var(--hybrid-input-large-padding-right, var(--hybrid-input-local-large-padding-right));\n }\n\n /* Medium input size variant (default) */\n div[data-size='medium'] {\n padding-top: var(--hybrid-input-medium-padding-top, var(--hybrid-input-local-medium-padding-top));\n padding-bottom: var(--hybrid-input-medium-padding-bottom, var(--hybrid-input-local-medium-padding-bottom));\n padding-left: var(--hybrid-input-medium-padding-left, var(--hybrid-input-local-medium-padding-left));\n padding-right: var(--hybrid-input-medium-padding-right, var(--hybrid-input-local-medium-padding-right));\n }\n\n /* Small input size variant */\n div[data-size='small'] {\n padding-top: var(--hybrid-input-small-padding-top, var(--hybrid-input-local-small-padding-top));\n padding-bottom: var(--hybrid-input-small-padding-bottom, var(--hybrid-input-local-small-padding-bottom));\n padding-left: var(--hybrid-input-small-padding-left, var(--hybrid-input-local-small-padding-left));\n padding-right: var(--hybrid-input-small-padding-right, var(--hybrid-input-local-small-padding-right));\n }\n`;\n\nexport const styles = [inputStyle, sizeInputStyle, styleVariables];\n"]}
1
+ {"version":3,"file":"input.style.js","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D;;;;;;;;;;;;;;GAcG;AAEH,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkZrB,CAAC;AAEF;;;GAGG;AACH,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BzB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,UAAU,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { styleVariables } from './input.style.variable.js';\n\n/**\n * Input component styles for the Hybrid UI Library\n * \n * This file contains all the styling for the nr-input component, including:\n * - Base input styles with CSS custom properties for theming\n * - Multiple input states (default, warning, error)\n * - Size variations (small, medium, large)\n * - Different input types (text, password, number, calendar)\n * - Icon positioning and styling\n * - Focus, disabled, and validation states\n * - Dark theme support\n * \n * The styling system uses CSS custom properties with fallbacks to allow\n * for both global and local customization of input appearance.\n */\n\nconst inputStyle = css`\n /* \n * Host element base styles\n * Container for the input component with flexible layout\n */\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));\n }\n\n /* \n * Base input wrapper and input element styles\n * Background applied to wrapper to cover entire container including addons\n * Uses CSS custom properties with fallbacks for comprehensive theming support\n * Properties follow the pattern: --hybrid-input-{property}, --hybrid-input-local-{property}\n */\n .input-wrapper {\n background-color: var(--hybrid-input-background-color, var(--hybrid-input-local-background-color));\n }\n\n #input-container > input {\n background-color: transparent;\n }\n\n /* \n * Disabled state styles for wrapper and input\n * Applied when input is disabled - removes interactivity and applies muted colors\n */\n :host([disabled]) .input-wrapper {\n background-color: var(--hybrid-input-disabled-background-color, var(--hybrid-input-local-disabled-background-color));\n }\n\n :host([disabled]) #input-container > input {\n background-color: transparent;\n cursor: not-allowed;\n }\n\n /* \n * Icon base styles\n * Common styling for all icons within the input component\n */\n hy-icon {\n display: flex;\n align-items: center;\n }\n\n /* \n * Placeholder styling\n * Customizable placeholder text appearance\n */\n ::placeholder {\n color: var(--hybrid-input-placeholder-color, var(--hybrid-input-local-placeholder-color));\n font-size: var(--hybrid-input-placeholder-font-size, var(--hybrid-input-local-placeholder-font-size));\n font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));\n }\n\n /* \n * Disabled placeholder styling\n * Applied when input is disabled\n */\n :host([disabled]) ::placeholder {\n color: var(--hybrid-input-disabled-placeholder-color, var(--hybrid-input-local-disabled-placeholder-color));\n }\n\n /* ========================================\n * ICON VARIANTS AND STATES\n * ======================================== */\n\n /* Warning state icon */\n #warning-icon {\n --hybrid-icon-color: var(--hybrid-input-warning-icon-color, var(--hybrid-input-local-warning-icon-color));\n }\n\n /* Error state icon */\n #error-icon {\n --hybrid-icon-color: var(--hybrid-input-error-icon-color, var(--hybrid-input-local-error-icon-color));\n }\n\n /* Calendar input type icon */\n #calendar-icon {\n --hybrid-icon-color: var(--hybrid-input-calendar-icon-color, var(--hybrid-input-local-calendar-icon-color));\n }\n\n /* Password toggle icon */\n #password-icon {\n padding-left: var(--hybrid-input-password-icon-padding-left, var(--hybrid-input-local-password-icon-padding-left));\n padding-right: var(--hybrid-input-password-icon-padding-right, var(--hybrid-input-local-password-icon-padding-right));\n cursor: pointer;\n --hybrid-icon-color: var(--hybrid-input-password-icon-color, var(--hybrid-input-local-password-icon-color));\n }\n\n /* Copy functionality icon */\n #copy-icon {\n padding-right: var(--hybrid-input-copy-icon-padding-right, var(--hybrid-input-local-copy-icon-padding-right));\n --hybrid-icon-color: var(--hybrid-input-copy-icon-color, var(--hybrid-input-local-copy-icon-color));\n cursor: pointer;\n }\n\n /* \n * Number input increment/decrement icons container\n * Positioned absolutely for overlay on input\n */\n #number-icons {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n width: var(--hybrid-input-number-icons-container-width, var(--hybrid-input-local-number-icons-container-width));\n padding-right: var(--hybrid-input-number-icons-container-padding-right, var(--hybrid-input-local-number-icons-container-padding-right));\n }\n\n /* Individual number icons styling */\n #number-icons hy-icon {\n --hybrid-icon-color: var(--hybrid-input-number-icons-color, var(--hybrid-input-local-number-icons-color));\n padding-left: var(--hybrid-input-number-icons-padding-left, var(--hybrid-input-local-number-icons-padding-left));\n padding-right: var(--hybrid-input-number-icons-padding-right, var(--hybrid-input-local-number-icons-padding-right));\n width: var(--hybrid-input-number-icons-width, var(--hybrid-input-local-number-icons-width));\n height: var(--hybrid-input-number-icons-height, var(--hybrid-input-local-number-icons-height));\n }\n\n /* Number icons separator styling */\n #icons-separator {\n color: var(--hybrid-input-number-icons-separator-color, var(--hybrid-input-local-number-icons-separator-color));\n padding-bottom: var(--hybrid-input-number-icons-separator-padding-bottom, var(--hybrid-input-local-number-icons-separator-padding-bottom));\n padding-left: var(--hybrid-input-number-icons-separator-padding-left, var(--hybrid-input-local-number-icons-separator-padding-left));\n padding-right: var(--hybrid-input-number-icons-separator-padding-right, var(--hybrid-input-local-number-icons-separator-padding-right));\n }\n\n /* \n * Disabled state for all icons\n * Applied when input is disabled - reduces opacity and disables interaction\n */\n :host([disabled]) #password-icon,\n :host([disabled]) #error-icon,\n :host([disabled]) #warning-icon,\n :host([disabled]) #number-icons,\n :host([disabled]) #calendar-icon,\n :host([disabled]) #copy-icon {\n opacity: var(--hybrid-input-disabled-icon-opacity, var(--hybrid-input-local-disabled-icon-opacity));\n }\n\n /* Disabled icons cursor override */\n :host([disabled]) #password-icon,\n :host([disabled]) #number-icons,\n :host([disabled]) #copy-icon {\n cursor: not-allowed;\n }\n\n /* ========================================\n * INPUT CONTAINER STYLES\n * ======================================== */\n\n /* \n * Input wrapper - contains addons and input container\n * Provides horizontal layout for addon before/after elements\n */\n .input-wrapper {\n display: flex;\n align-items: stretch;\n width: 100%;\n }\n\n /* \n * Addon before element - content before input (outside borders)\n * Styled to visually connect with input\n */\n .input-addon-before {\n background-color: var(--hybrid-input-addon-background-color, var(--hybrid-input-local-addon-background-color));\n border: var(--hybrid-input-border, var(--hybrid-input-local-border));\n border-right: none;\n border-top-left-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));\n border-bottom-left-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));\n padding: var(--hybrid-input-addon-padding, var(--hybrid-input-local-addon-padding));\n display: flex;\n align-items: center;\n color: var(--hybrid-input-addon-color, var(--hybrid-input-local-addon-color));\n font-size: var(--hybrid-input-font-size, var(--hybrid-input-local-font-size));\n white-space: nowrap;\n min-width: 0; /* Allow shrinking */\n flex-shrink: 0; /* Prevent shrinking */\n }\n\n /* \n * Addon after element - content after input (outside borders)\n * Styled to visually connect with input\n */\n .input-addon-after {\n background-color: var(--hybrid-input-addon-background-color, var(--hybrid-input-local-addon-background-color));\n border: var(--hybrid-input-border, var(--hybrid-input-local-border));\n border-left: none;\n border-top-right-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));\n border-bottom-right-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius));\n padding: var(--hybrid-input-addon-padding, var(--hybrid-input-local-addon-padding));\n display: flex;\n align-items: center;\n color: var(--hybrid-input-addon-color, var(--hybrid-input-local-addon-color));\n font-size: var(--hybrid-input-font-size, var(--hybrid-input-local-font-size));\n white-space: nowrap;\n min-width: 0; /* Allow shrinking */\n flex-shrink: 0; /* Prevent shrinking */\n }\n\n /* \n * Input container border radius adjustments when addons are present\n * Removes border radius on sides where addons are attached\n */\n .input-wrapper:has(.input-addon-before) #input-container {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-left: none;\n }\n\n .input-wrapper:has(.input-addon-after) #input-container {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n }\n\n /* \n * Main input container element\n * Uses CSS custom properties for comprehensive border and layout control\n */\n #input-container {\n /* Border properties - individual sides for granular control */\n border-bottom: var(--hybrid-input-border-bottom, var(--hybrid-input-local-border-bottom));\n border-top: var(--hybrid-input-border-top, var(--hybrid-input-local-border-top));\n border-left: var(--hybrid-input-border-left, var(--hybrid-input-local-border-left));\n border-right: var(--hybrid-input-border-right, var(--hybrid-input-local-border-right));\n \n /* Border radius - individual corners for design flexibility */\n border-radius: var(--hybrid-input-border-radius, var(--hybrid-input-local-border-radius)); \n border-top-left-radius: var(--hybrid-input-border-top-left-radius, var(--hybrid-input-local-border-top-left-radius));\n border-top-right-radius: var(--hybrid-input-border-top-right-radius, var(--hybrid-input-local-border-top-right-radius));\n border-bottom-left-radius: var(--hybrid-input-border-bottom-left-radius, var(--hybrid-input-local-border-bottom-left-radius));\n border-bottom-right-radius: var(--hybrid-input-border-bottom-right-radius, var(--hybrid-input-local-border-bottom-right-radius));\n \n /* Layout */\n display: flex;\n position: relative;\n flex: 1; /* Take available space in wrapper */\n min-width: 0; /* Allow shrinking below content size */\n }\n\n /* \n * Disabled container border styles\n * Applied when input is disabled\n */\n :host([disabled]) #input-container {\n border-bottom: var(--hybrid-input-disabled-border-bottom, var(--hybrid-input-local-disabled-border-bottom));\n border-top: var(--hybrid-input-disabled-border-top, var(--hybrid-input-local-disabled-border-top));\n border-left: var(--hybrid-input-disabled-border-left, var(--hybrid-input-local-disabled-border-left));\n border-right: var(--hybrid-input-disabled-border-right, var(--hybrid-input-local-disabled-border-right));\n opacity: 0.6;\n }\n\n /* ========================================\n * INPUT ELEMENT STYLES\n * ======================================== */\n\n /* \n * Base input element styling\n * Full width with no default borders, using container for styling\n */\n input {\n width: 100%;\n border: none;\n outline: none;\n color: var(--hybrid-input-text-color, var(--hybrid-input-local-text-color));\n font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));\n font-size: var(--hybrid-input-font-size, var(--hybrid-input-local-font-size));\n }\n\n /* Remove default number input spinners */\n /* Chrome, Safari, Edge, Opera */\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n \n /* Firefox */\n input[type='number'] {\n -moz-appearance: textfield;\n }\n\n /* ========================================\n * STATE STYLES\n * ======================================== */\n\n /* \n * Error state styling\n * Applied when state='error' and not disabled\n */\n :host(:not([disabled])[state='error']) > #input-container {\n border: var(--hybrid-input-error-border, var(--hybrid-input-local-error-border));\n }\n\n /* \n * Focus state styling\n * Applied when input receives focus and not in error state\n */\n :host(:not([state='error'])) > #input-container:focus-within {\n border: var(--hybrid-input-focus-border, var(--hybrid-input-local-focus-border));\n }\n\n /* \n * Number input icon positioning adjustments for error/warning states\n * When validation states are present, adjust icon positioning\n */\n :host([state='error']) input[type='number'] ~ #number-icons,\n :host([state='warning']) input[type='number'] ~ #number-icons {\n position: static;\n padding-left: var(--hybrid-input-number-icons-container-padding-left, var(--hybrid-input-local-number-icons-container-padding-left));\n }\n\n /* ========================================\n * SLOTTED CONTENT STYLES\n * ======================================== */\n\n /* \n * Label slot styling\n * Applied to slotted label elements\n */\n ::slotted([slot='label']) {\n color: var(--hybrid-input-label-color, var(--hybrid-input-local-label-color));\n font-size: var(--hybrid-input-label-font-size, var(--hybrid-input-local-label-font-size));\n padding-bottom: var(--hybrid-input-label-padding-bottom, var(--hybrid-input-local-label-padding-bottom));\n }\n\n /* \n * Helper text slot styling\n * Applied to slotted helper text elements\n */\n ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-helper-text-color, var(--hybrid-input-local-helper-text-color));\n font-size: var(--hybrid-input-helper-text-font-size, var(--hybrid-input-local-helper-text-font-size));\n padding-top: var(--hybrid-input-helper-text-padding-top, var(--hybrid-input-local-helper-text-padding-top));\n }\n\n /* \n * State-specific helper text colors\n * Override helper text color based on validation state\n */\n :host([state='error']) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-error-helper-text-color, var(--hybrid-input-local-error-helper-text-color));\n }\n\n :host([state='warning']) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-warning-helper-text-color, var(--hybrid-input-local-warning-helper-text-color));\n }\n\n /* \n * Disabled state for slotted content\n * Applied when input is disabled\n */\n :host([disabled]) ::slotted([slot='helper-text']) {\n color: var(--hybrid-input-disabled-helper-text-color, var(--hybrid-input-local-disabled-helper-text-color));\n }\n\n :host([disabled]) ::slotted([slot='label']) {\n color: var(--hybrid-input-disabled-label-color, var(--hybrid-input-local-disabled-label-color));\n }\n\n /* \n * Prefix slot styling\n * Applied to slotted prefix content (icons, text, etc.)\n */\n ::slotted([slot='prefix']) {\n display: flex;\n align-items: center;\n padding-right: var(--hybrid-input-prefix-padding-right, var(--hybrid-input-local-prefix-padding-right));\n color: var(--hybrid-input-prefix-color, var(--hybrid-input-local-prefix-color));\n font-size: var(--hybrid-input-prefix-font-size, var(--hybrid-input-local-prefix-font-size));\n flex-shrink: 0;\n }\n\n /* \n * Suffix slot styling\n * Applied to slotted suffix content (icons, text, etc.)\n */\n ::slotted([slot='suffix']) {\n display: flex;\n align-items: center;\n padding-left: var(--hybrid-input-suffix-padding-left, var(--hybrid-input-local-suffix-padding-left));\n color: var(--hybrid-input-suffix-color, var(--hybrid-input-local-suffix-color));\n font-size: var(--hybrid-input-suffix-font-size, var(--hybrid-input-local-suffix-font-size));\n flex-shrink: 0;\n }\n\n /* \n * Disabled state for prefix and suffix slots\n * Applied when input is disabled\n */\n :host([disabled]) ::slotted([slot='prefix']),\n :host([disabled]) ::slotted([slot='suffix']) {\n opacity: var(--hybrid-input-disabled-icon-opacity, var(--hybrid-input-local-disabled-icon-opacity));\n color: var(--hybrid-input-disabled-prefix-suffix-color, var(--hybrid-input-local-disabled-prefix-suffix-color));\n }\n`;\n\n/**\n * Size variation styles for the input component\n * Defines padding and spacing for different input sizes\n */\nconst sizeInputStyle = css`\n /* ========================================\n * SIZE VARIATIONS\n * ======================================== */\n\n /* Large input size variant */\n div[data-size='large'] {\n padding-top: var(--hybrid-input-large-padding-top, var(--hybrid-input-local-large-padding-top));\n padding-bottom: var(--hybrid-input-large-padding-bottom, var(--hybrid-input-local-large-padding-bottom));\n padding-left: var(--hybrid-input-large-padding-left, var(--hybrid-input-local-large-padding-left));\n padding-right: var(--hybrid-input-large-padding-right, var(--hybrid-input-local-large-padding-right));\n }\n\n /* Medium input size variant (default) */\n div[data-size='medium'] {\n padding-top: var(--hybrid-input-medium-padding-top, var(--hybrid-input-local-medium-padding-top));\n padding-bottom: var(--hybrid-input-medium-padding-bottom, var(--hybrid-input-local-medium-padding-bottom));\n padding-left: var(--hybrid-input-medium-padding-left, var(--hybrid-input-local-medium-padding-left));\n padding-right: var(--hybrid-input-medium-padding-right, var(--hybrid-input-local-medium-padding-right));\n }\n\n /* Small input size variant */\n div[data-size='small'] {\n padding-top: var(--hybrid-input-small-padding-top, var(--hybrid-input-local-small-padding-top));\n padding-bottom: var(--hybrid-input-small-padding-bottom, var(--hybrid-input-local-small-padding-bottom));\n padding-left: var(--hybrid-input-small-padding-left, var(--hybrid-input-local-small-padding-left));\n padding-right: var(--hybrid-input-small-padding-right, var(--hybrid-input-local-small-padding-right));\n }\n`;\n\nexport const styles = [inputStyle, sizeInputStyle, styleVariables];\n"]}
package/{input.style.variable..d.ts → input.style.variable.d.ts} RENAMED
@@ -1,2 +1,2 @@
1
1
  export declare const styleVariables: import("lit").CSSResult;
2
- //# sourceMappingURL=input.style.variable..d.ts.map
2
+ //# sourceMappingURL=input.style.variable.d.ts.map
package/input.style.variable.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"input.style.variable.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.style.variable.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAsH1B,CAAC"}
package/{input.style.variable..js → input.style.variable.js} RENAMED
@@ -68,14 +68,27 @@ export const styleVariables = css `
68
68
  --hybrid-input-local-small-padding-bottom: 4px;
69
69
  --hybrid-input-local-small-padding-left: 9px;
70
70
  --hybrid-input-local-small-padding-right: 4px;
71
+
72
+ /* Prefix and Suffix styling variables */
73
+ --hybrid-input-local-prefix-color: #525252;
74
+ --hybrid-input-local-prefix-font-size: 13px;
75
+ --hybrid-input-local-prefix-padding-right: 8px;
76
+ --hybrid-input-local-suffix-color: #525252;
77
+ --hybrid-input-local-suffix-font-size: 13px;
78
+ --hybrid-input-local-suffix-padding-left: 8px;
79
+ --hybrid-input-local-disabled-prefix-suffix-color: #c6c6c6;
80
+
81
+ /* Addon Before/After styling variables */
82
+ --hybrid-input-local-addon-background-color: #e8e8e8;
83
+ --hybrid-input-local-addon-color: #525252;
84
+ --hybrid-input-local-addon-padding: 8px 12px;
71
85
  }
72
86
 
73
87
  /*
74
- * Dark theme styles using data-theme attribute on host element
75
88
  * These override the light theme defaults when data-theme="dark" is applied
76
89
  * This provides explicit theme control via JavaScript or HTML attributes
77
90
  */
78
- :host([data-theme="dark"]) {
91
+ .input-wrapper[data-theme="dark"] {
79
92
  --hybrid-input-local-background-color: #393939;
80
93
  --hybrid-input-local-focus-border: 2px solid #ffffff;
81
94
  --hybrid-input-local-text-color: #ffffff;
@@ -94,6 +107,15 @@ export const styleVariables = css `
94
107
  --hybrid-input-local-number-icons-separator-color: #525252;
95
108
  --hybrid-input-local-calendar-icon-color: #ffffff;
96
109
  --hybrid-input-local-copy-icon-color: #ffffff;
110
+
111
+ /* Dark theme prefix and suffix colors */
112
+ --hybrid-input-local-prefix-color: #c6c6c6;
113
+ --hybrid-input-local-suffix-color: #c6c6c6;
114
+ --hybrid-input-local-disabled-prefix-suffix-color: #6f6f6f;
115
+
116
+ /* Dark theme addon colors */
117
+ --hybrid-input-local-addon-background-color: #525252;
118
+ --hybrid-input-local-addon-color: #c6c6c6;
97
119
  }
98
120
  `;
99
- //# sourceMappingURL=input.style.variable..js.map
121
+ //# sourceMappingURL=input.style.variable.js.map
package/input.style.variable.js.map ADDED
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsHhC,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-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\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 \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`;\n"]}
package/{input.constant.d.ts → input.types.d.ts} RENAMED
@@ -15,4 +15,4 @@ export declare const enum INPUT_TYPE {
15
15
  CALENDAR = "calendar"
16
16
  }
17
17
  export declare const EMPTY_STRING = "";
18
- //# sourceMappingURL=input.constant.d.ts.map
18
+ //# sourceMappingURL=input.types.d.ts.map
package/input.types.d.ts.map ADDED
@@ -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,UAAU;IAC1B,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB;AAED,eAAO,MAAM,YAAY,KAAK,CAAC"}
package/input.types.js ADDED
@@ -0,0 +1,2 @@
1
+ export const EMPTY_STRING = '';
2
+ //# sourceMappingURL=input.types.js.map
package/input.types.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"input.types.js","sourceRoot":"","sources":["../../../src/components/input/input.types.ts"],"names":[],"mappings":"AAmBA,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_TYPE {\n PASSWORD = 'password',\n TEXT = 'text',\n NUMBER = 'number',\n CALENDAR = 'calendar',\n}\n\nexport const EMPTY_STRING = '';\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuralyui/input",
3
- "version": "0.0.5",
3
+ "version": "0.0.6",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "type": "module",
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.constant';
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* () {
package/test/hy-input_test.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"hy-input_test.js","sourceRoot":"","sources":["../../../../src/components/input/test/hy-input_test.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAuC,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtF,OAAO,oBAAoB,CAAC;AAE5B,KAAK,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC3B,IAAI,CAAC,oBAAoB,EAAE,GAAS,EAAE;QACpC,MAAM,EAAE,GAAmB,MAAM,OAAO,CAAC,IAAI,CAAA,wBAAwB,CAAC,CAAC;QACvE,MAAM,cAAc,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,kBAAkB,CAAE,CAAC;QACzE,MAAM,KAAK,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC;QACrD,MAAM,IAAI,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAClD,MAAM,YAAY,GAAG,IAAK,CAAC,aAAa,EAAE,CAAC;QAC3C,MAAM,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAChC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,qCAAqB,CAAC;QAC/C,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;QACxC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,kCAAmB,CAAC;QAC5C,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,8BAAiB,CAAC;QAC1C,MAAM,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;QAC9C,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC;QAC/B,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC;QAC/B,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC;QAEhC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QAC3C,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QAC3C,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;QAC5C,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QACnC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,8BAAiB,CAAC;QAC7C,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;QAC3C,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;QACjD,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,mCAAoB,CAAC;QACzE,MAAM,CAAC,cAAc,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QACjE,MAAM,CAAC,cAAc,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAC/D,MAAM,CAAC,cAAc,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAClE,MAAM,CAAC,cAAc,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QACjE,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC1C,CAAC,CAAA,CAAC,CAAC;IAEH,IAAI,CAAC,qBAAqB,EAAE,GAAS,EAAE;QACrC,MAAM,EAAE,GAAmB,MAAM,OAAO,CAAC,IAAI,CAAA,wCAAwC,CAAC,CAAC;QACvF,MAAM,cAAc,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,kBAAkB,CAAE,CAAC;QACzE,IAAI,YAAY,GAAkB,cAAc,CAAC,aAAa,CAAC,gBAAgB,CAAE,CAAC;QAClF,MAAM,CAAC,cAAc,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QACjE,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC9B,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QACtD,YAAY,CAAC,KAAK,EAAE,CAAC;QACrB,MAAM,EAAE,CAAC,cAAc,CAAC;QACxB,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACtC,YAAY,GAAG,cAAc,CAAC,aAAa,CAAC,gBAAgB,CAAE,CAAC;QAC/D,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAC9D,CAAC,CAAA,CAAC,CAAC;IAEH,KAAK,CAAC,mBAAmB,EAAE,GAAG,EAAE;QAC9B,IAAI,CAAC,oBAAoB,EAAE,GAAS,EAAE;YACpC,MAAM,IAAI,GAAG,CAAC,CAAC;YACf,MAAM,GAAG,GAAG,EAAE,CAAC;YACf,MAAM,GAAG,GAAG,GAAG,CAAC;YAChB,MAAM,EAAE,GAAmB,MAAM,OAAO,CACtC,IAAI,CAAA,gCAAgC,IAAI,QAAQ,GAAG,QAAQ,GAAG,eAAe,CAC9E,CAAC;YACF,MAAM,cAAc,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,kBAAkB,CAAE,CAAC;YACzE,MAAM,KAAK,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC;YACrD,MAAM,YAAY,GAAkB,cAAc,CAAC,aAAa,CAAC,gBAAgB,CAAE,CAAC;YACpF,MAAM,UAAU,GAAG,cAAc,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;YACjE,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;YAChC,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;YAC5B,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;YACvD,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;YACvD,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC3D,CAAC,CAAA,CAAC,CAAC;QACH,IAAI,CAAC,kBAAkB,EAAE,GAAS,EAAE;YAClC,MAAM,IAAI,GAAG,CAAC,CAAC;YACf,MAAM,GAAG,GAAG,EAAE,CAAC;YACf,MAAM,EAAE,GAAmB,MAAM,OAAO,CAAC,IAAI,CAAA,gCAAgC,IAAI,QAAQ,GAAG,eAAe,CAAC,CAAC;YAC7G,MAAM,cAAc,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,kBAAkB,CAAE,CAAC;YACzE,MAAM,KAAK,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC;YACrD,MAAM,UAAU,GAAG,cAAc,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;YACjE,MAAM,UAAU,GAAkB,UAAW,CAAC,aAAa,CAAC,eAAe,CAAE,CAAC;YAC9E,UAAU,CAAC,KAAK,EAAE,CAAC;YACnB,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACxD,CAAC,CAAA,CAAC,CAAC;QACH,IAAI,CAAC,kBAAkB,EAAE,GAAS,EAAE;YAClC,MAAM,IAAI,GAAG,CAAC,CAAC;YACf,MAAM,EAAE,GAAmB,MAAM,OAAO,CAAC,IAAI,CAAA,gCAAgC,IAAI,eAAe,CAAC,CAAC;YAClG,MAAM,cAAc,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,kBAAkB,CAAE,CAAC;YACzE,MAAM,KAAK,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC;YACrD,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC;YAC/B,MAAM,UAAU,GAAG,cAAc,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;YACjE,MAAM,WAAW,GAAkB,UAAW,CAAC,aAAa,CAAC,gBAAgB,CAAE,CAAC;YAChF,WAAW,CAAC,KAAK,EAAE,CAAC;YACpB,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QAChE,CAAC,CAAA,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,kBAAkB,EAAE,GAAG,EAAE;QAC7B,IAAI,CAAC,eAAe,EAAE,GAAS,EAAE;YAC/B,MAAM,UAAU,sCAAsB,CAAC;YACvC,MAAM,EAAE,GAAmB,MAAM,OAAO,CAAC,IAAI,CAAA,mBAAmB,UAAU,eAAe,CAAC,CAAC;YAC3F,MAAM,cAAc,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,kBAAkB,CAAE,CAAC;YACzE,MAAM,CAAC,cAAc,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;YAC/D,MAAM,CAAC,cAAc,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;QACnE,CAAC,CAAA,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,EAAE,GAAS,EAAE;YAC7B,MAAM,UAAU,kCAAoB,CAAC;YACrC,MAAM,EAAE,GAAmB,MAAM,OAAO,CAAC,IAAI,CAAA,mBAAmB,UAAU,eAAe,CAAC,CAAC;YAC3F,MAAM,cAAc,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,kBAAkB,CAAE,CAAC;YACzE,MAAM,CAAC,cAAc,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;YACnE,MAAM,CAAC,cAAc,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC/D,CAAC,CAAA,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IACH,KAAK,CAAC,iBAAiB,EAAE,GAAG,EAAE;QAC5B,IAAI,CAAC,aAAa,EAAE,GAAS,EAAE;YAC7B,MAAM,SAAS,iCAAmB,CAAC;YACnC,MAAM,EAAE,GAAmB,MAAM,OAAO,CAAC,IAAI,CAAA,kBAAkB,SAAS,eAAe,CAAC,CAAC;YACzF,MAAM,cAAc,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,kBAAkB,CAAE,CAAC;YACzE,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QACnE,CAAC,CAAA,CAAC,CAAC;QACH,IAAI,CAAC,cAAc,EAAE,GAAS,EAAE;YAC9B,MAAM,SAAS,mCAAoB,CAAC;YACpC,MAAM,EAAE,GAAmB,MAAM,OAAO,CAAC,IAAI,CAAA,kBAAkB,SAAS,eAAe,CAAC,CAAC;YACzF,MAAM,cAAc,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,kBAAkB,CAAE,CAAC;YACzE,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QACnE,CAAC,CAAA,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,wBAAwB,EAAE,GAAS,EAAE;QACxC,MAAM,WAAW,GAAG,qBAAqB,CAAC;QAC1C,MAAM,EAAE,GAAmB,MAAM,OAAO,CAAC,IAAI,CAAA,yBAAyB,WAAW,eAAe,CAAC,CAAC;QAClG,MAAM,KAAK,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC;QACrD,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;IAC9D,CAAC,CAAA,CAAC,CAAC;IAEH,IAAI,CAAC,kBAAkB,EAAE,GAAS,EAAE;QAClC,MAAM,UAAU,GAAG,aAAa,CAAC;QACjC,MAAM,EAAE,GAAmB,MAAM,OAAO,CAAC,IAAI,CAAA,iCAAiC,UAAU,qBAAqB,CAAC,CAAC;QAC/G,MAAM,IAAI,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAClD,MAAM,YAAY,GAAG,IAAK,CAAC,aAAa,EAAE,CAAC;QAC3C,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAC3D,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IAC3D,CAAC,CAAA,CAAC,CAAC;IAEH,IAAI,CAAC,wBAAwB,EAAE,GAAS,EAAE;QACxC,MAAM,WAAW,GAAG,cAAc,CAAC;QACnC,MAAM,EAAE,GAAmB,MAAM,OAAO,CACtC,IAAI,CAAA,uCAAuC,WAAW,qBAAqB,CAC5E,CAAC;QACF,MAAM,IAAI,GAAG,EAAE,CAAC,UAAW,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;QACrD,MAAM,YAAY,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC;QAC7C,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;QACjE,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IAC5D,CAAC,CAAA,CAAC,CAAC;IAEH,IAAI,CAAC,gBAAgB,EAAE,GAAS,EAAE;QAChC,MAAM,EAAE,GAAmB,MAAM,OAAO,CAAC,IAAI,CAAA,gCAAgC,CAAC,CAAC;QAC/E,MAAM,KAAK,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC;QACrD,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAClC,IAAI,UAAU,GAAG,KAAK,CAAC;QACvB,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YACnC,UAAU,GAAG,IAAI,CAAC;QACpB,CAAC,CAAC,CAAC;QACH,KAAK,CAAC,KAAK,EAAE,CAAC;QAEd,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","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,8 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2023 Google Laabidi Aymen
4
+ * SPDX-License-Identifier: MIT
5
+ */
6
+ export { InputValidationUtils } from './input-validation.utils.js';
7
+ export { InputRenderUtils } from './input-renderers.js';
8
+ //# sourceMappingURL=index.d.ts.map
package/utils/index.d.ts.map 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,8 @@
1
+ /**
2
+ * @license
3
+ * Copyright 2023 Google Laabidi Aymen
4
+ * SPDX-License-Identifier: MIT
5
+ */
6
+ export { InputValidationUtils } from './input-validation.utils.js';
7
+ export { InputRenderUtils } from './input-renderers.js';
8
+ //# sourceMappingURL=index.js.map
package/utils/index.js.map 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"]}
package/utils/input-renderers.d.ts ADDED
@@ -0,0 +1,50 @@
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 state-based icons (warning, error)
35
+ */
36
+ static renderStateIcon(state: string): TemplateResult | typeof nothing;
37
+ /**
38
+ * Renders the calendar icon for calendar input type
39
+ */
40
+ static renderCalendarIcon(state: string, type: string): TemplateResult | typeof nothing;
41
+ /**
42
+ * Renders password toggle icon
43
+ */
44
+ static renderPasswordIcon(type: string, inputType: string, disabled: boolean, readonly: boolean, onToggle: () => void, onKeydown: (e: KeyboardEvent) => void): TemplateResult | typeof nothing;
45
+ /**
46
+ * Renders number input increment/decrement icons
47
+ */
48
+ static renderNumberIcons(type: string, state: string, disabled: boolean, readonly: boolean, onIncrement: () => void, onDecrement: () => void, onKeydown: (e: KeyboardEvent) => void): TemplateResult | typeof nothing;
49
+ }
50
+ //# sourceMappingURL=input-renderers.d.ts.map
package/utils/input-renderers.d.ts.map ADDED
@@ -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,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"}