@nuralyui/input 0.0.6 → 0.0.8
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 +29 -11
- package/input.component.d.ts.map +1 -1
- package/input.component.js +181 -89
- package/input.component.js.map +1 -1
- package/input.style.d.ts.map +1 -1
- package/input.style.js +128 -11
- package/input.style.js.map +1 -1
- package/input.style.variable.d.ts.map +1 -1
- package/input.style.variable.js +53 -0
- package/input.style.variable.js.map +1 -1
- package/input.types.d.ts +20 -0
- package/input.types.d.ts.map +1 -1
- package/input.types.js.map +1 -1
- package/mixins/focus-mixin.d.ts +60 -0
- package/mixins/focus-mixin.d.ts.map +1 -0
- package/mixins/focus-mixin.js +65 -0
- package/mixins/focus-mixin.js.map +1 -0
- package/mixins/index.d.ts +9 -0
- package/mixins/index.d.ts.map +1 -0
- package/mixins/index.js +9 -0
- package/mixins/index.js.map +1 -0
- package/mixins/number-mixin.d.ts +51 -0
- package/mixins/number-mixin.d.ts.map +1 -0
- package/mixins/number-mixin.js +131 -0
- package/mixins/number-mixin.js.map +1 -0
- package/mixins/selection-mixin.d.ts +57 -0
- package/mixins/selection-mixin.d.ts.map +1 -0
- package/mixins/selection-mixin.js +80 -0
- package/mixins/selection-mixin.js.map +1 -0
- package/package.json +1 -1
- package/utils/input-renderers.d.ts +4 -0
- package/utils/input-renderers.d.ts.map +1 -1
- package/utils/input-renderers.js +17 -0
- package/utils/input-renderers.js.map +1 -1
package/input.style.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.style.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"input.style.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"AA8jBA,eAAO,MAAM,MAAM,2BAA+C,CAAC"}
|
package/input.style.js
CHANGED
|
@@ -114,6 +114,13 @@ const inputStyle = css `
|
|
|
114
114
|
cursor: pointer;
|
|
115
115
|
}
|
|
116
116
|
|
|
117
|
+
/* Clear functionality icon */
|
|
118
|
+
#clear-icon {
|
|
119
|
+
padding-right: var(--hybrid-input-clear-icon-padding-right, var(--hybrid-input-local-clear-icon-padding-right));
|
|
120
|
+
--hybrid-icon-color: var(--hybrid-input-clear-icon-color, var(--hybrid-input-local-clear-icon-color));
|
|
121
|
+
cursor: pointer;
|
|
122
|
+
}
|
|
123
|
+
|
|
117
124
|
/*
|
|
118
125
|
* Number input increment/decrement icons container
|
|
119
126
|
* Positioned absolutely for overlay on input
|
|
@@ -157,14 +164,16 @@ const inputStyle = css `
|
|
|
157
164
|
:host([disabled]) #warning-icon,
|
|
158
165
|
:host([disabled]) #number-icons,
|
|
159
166
|
:host([disabled]) #calendar-icon,
|
|
160
|
-
:host([disabled]) #copy-icon
|
|
167
|
+
:host([disabled]) #copy-icon,
|
|
168
|
+
:host([disabled]) #clear-icon {
|
|
161
169
|
opacity: var(--hybrid-input-disabled-icon-opacity, var(--hybrid-input-local-disabled-icon-opacity));
|
|
162
170
|
}
|
|
163
171
|
|
|
164
172
|
/* Disabled icons cursor override */
|
|
165
173
|
:host([disabled]) #password-icon,
|
|
166
174
|
:host([disabled]) #number-icons,
|
|
167
|
-
:host([disabled]) #copy-icon
|
|
175
|
+
:host([disabled]) #copy-icon,
|
|
176
|
+
:host([disabled]) #clear-icon {
|
|
168
177
|
cursor: not-allowed;
|
|
169
178
|
}
|
|
170
179
|
|
|
@@ -275,6 +284,90 @@ const inputStyle = css `
|
|
|
275
284
|
opacity: 0.6;
|
|
276
285
|
}
|
|
277
286
|
|
|
287
|
+
/* ========================================
|
|
288
|
+
* INPUT VARIANT STYLES
|
|
289
|
+
* ======================================== */
|
|
290
|
+
|
|
291
|
+
/*
|
|
292
|
+
* Outlined variant - full border around input
|
|
293
|
+
* Default: light border, focus: blue border
|
|
294
|
+
*/
|
|
295
|
+
:host([variant='outlined']) #input-container {
|
|
296
|
+
border: var(--hybrid-input-outlined-border, var(--hybrid-input-local-outlined-border));
|
|
297
|
+
border-radius: var(--hybrid-input-outlined-border-radius, var(--hybrid-input-local-outlined-border-radius));
|
|
298
|
+
background-color: var(--hybrid-input-outlined-background, var(--hybrid-input-local-outlined-background));
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
:host([variant='outlined']) .input-wrapper {
|
|
302
|
+
background-color: transparent;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
:host([variant='outlined']:not([state='error'])) #input-container:focus-within {
|
|
306
|
+
border: var(--hybrid-input-outlined-focus-border, var(--hybrid-input-local-outlined-focus-border));
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
/*
|
|
310
|
+
* Filled variant - background with bottom border only
|
|
311
|
+
* Subtle background with bottom border indication
|
|
312
|
+
*/
|
|
313
|
+
:host([variant='filled']) #input-container {
|
|
314
|
+
background-color: var(--hybrid-input-filled-background, var(--hybrid-input-local-filled-background));
|
|
315
|
+
border-radius: var(--hybrid-input-filled-border-radius, var(--hybrid-input-local-filled-border-radius));
|
|
316
|
+
border-bottom: var(--hybrid-input-filled-border-bottom, var(--hybrid-input-local-filled-border-bottom));
|
|
317
|
+
border-top: none;
|
|
318
|
+
border-left: none;
|
|
319
|
+
border-right: none;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
:host([variant='filled']) .input-wrapper {
|
|
323
|
+
background-color: transparent;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
:host([variant='filled']:not([state='error'])) #input-container:focus-within {
|
|
327
|
+
border-bottom: var(--hybrid-input-filled-focus-border-bottom, var(--hybrid-input-local-filled-focus-border-bottom));
|
|
328
|
+
border-top: none;
|
|
329
|
+
border-left: none;
|
|
330
|
+
border-right: none;
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
/*
|
|
334
|
+
* Borderless variant - no borders, focus with outline
|
|
335
|
+
* Clean appearance with focus indication via outline
|
|
336
|
+
*/
|
|
337
|
+
:host([variant='borderless']) #input-container {
|
|
338
|
+
background-color: var(--hybrid-input-borderless-background, var(--hybrid-input-local-borderless-background));
|
|
339
|
+
border: none;
|
|
340
|
+
border-radius: var(--hybrid-input-borderless-border-radius, var(--hybrid-input-local-borderless-border-radius));
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
:host([variant='borderless']) .input-wrapper {
|
|
344
|
+
background-color: transparent;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
:host([variant='borderless']:not([state='error'])) #input-container:focus-within {
|
|
348
|
+
outline: var(--hybrid-input-borderless-focus-outline, var(--hybrid-input-local-borderless-focus-outline));
|
|
349
|
+
border: none;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
/*
|
|
353
|
+
* Underlined variant - bottom border only (default/current behavior)
|
|
354
|
+
* Maintains existing behavior as default
|
|
355
|
+
*/
|
|
356
|
+
:host([variant='underlined']) #input-container {
|
|
357
|
+
border-bottom: var(--hybrid-input-underlined-border-bottom, var(--hybrid-input-local-underlined-border-bottom));
|
|
358
|
+
border-top: none;
|
|
359
|
+
border-left: none;
|
|
360
|
+
border-right: none;
|
|
361
|
+
border-radius: 0;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
:host([variant='underlined']:not([state='error'])) #input-container:focus-within {
|
|
365
|
+
border-bottom: var(--hybrid-input-underlined-focus-border-bottom, var(--hybrid-input-local-underlined-focus-border-bottom));
|
|
366
|
+
border-top: none;
|
|
367
|
+
border-left: none;
|
|
368
|
+
border-right: none;
|
|
369
|
+
}
|
|
370
|
+
|
|
278
371
|
/* ========================================
|
|
279
372
|
* INPUT ELEMENT STYLES
|
|
280
373
|
* ======================================== */
|
|
@@ -309,19 +402,26 @@ const inputStyle = css `
|
|
|
309
402
|
* ======================================== */
|
|
310
403
|
|
|
311
404
|
/*
|
|
312
|
-
* Error state styling
|
|
405
|
+
* Error state styling - works with all variants
|
|
313
406
|
* Applied when state='error' and not disabled
|
|
314
407
|
*/
|
|
315
|
-
:host(:not([disabled])[state='error'])
|
|
316
|
-
border: var(--hybrid-input-error-border, var(--hybrid-input-local-error-border));
|
|
408
|
+
:host(:not([disabled])[state='error']) #input-container {
|
|
409
|
+
border: var(--hybrid-input-error-border, var(--hybrid-input-local-error-border)) !important;
|
|
410
|
+
outline: none !important;
|
|
317
411
|
}
|
|
318
412
|
|
|
319
|
-
/*
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
413
|
+
/* Override variant-specific error state styling */
|
|
414
|
+
:host([variant='borderless'][state='error']) #input-container {
|
|
415
|
+
border: var(--hybrid-input-error-border, var(--hybrid-input-local-error-border)) !important;
|
|
416
|
+
outline: none !important;
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
:host([variant='underlined'][state='error']) #input-container,
|
|
420
|
+
:host([variant='filled'][state='error']) #input-container {
|
|
421
|
+
border-top: none !important;
|
|
422
|
+
border-left: none !important;
|
|
423
|
+
border-right: none !important;
|
|
424
|
+
border-bottom: var(--hybrid-input-error-border, var(--hybrid-input-local-error-border)) !important;
|
|
325
425
|
}
|
|
326
426
|
|
|
327
427
|
/*
|
|
@@ -450,6 +550,23 @@ const sizeInputStyle = css `
|
|
|
450
550
|
padding-left: var(--hybrid-input-small-padding-left, var(--hybrid-input-local-small-padding-left));
|
|
451
551
|
padding-right: var(--hybrid-input-small-padding-right, var(--hybrid-input-local-small-padding-right));
|
|
452
552
|
}
|
|
553
|
+
|
|
554
|
+
/*
|
|
555
|
+
* Character count display
|
|
556
|
+
* Shows character count and limit information
|
|
557
|
+
*/
|
|
558
|
+
.character-count {
|
|
559
|
+
font-size: var(--hybrid-input-character-count-font-size, var(--hybrid-input-local-character-count-font-size));
|
|
560
|
+
color: var(--hybrid-input-character-count-color, var(--hybrid-input-local-character-count-color));
|
|
561
|
+
text-align: right;
|
|
562
|
+
margin-top: var(--hybrid-input-character-count-margin-top, var(--hybrid-input-local-character-count-margin-top));
|
|
563
|
+
font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
/* Character count over limit styling */
|
|
567
|
+
.character-count[data-over-limit] {
|
|
568
|
+
color: var(--hybrid-input-character-count-over-limit-color, var(--hybrid-input-local-character-count-over-limit-color));
|
|
569
|
+
}
|
|
453
570
|
`;
|
|
454
571
|
export const styles = [inputStyle, sizeInputStyle, styleVariables];
|
|
455
572
|
//# sourceMappingURL=input.style.js.map
|
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,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"]}
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsfrB,CAAC;AAEF;;;GAGG;AACH,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CzB,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 /* Clear functionality icon */\n #clear-icon {\n padding-right: var(--hybrid-input-clear-icon-padding-right, var(--hybrid-input-local-clear-icon-padding-right));\n --hybrid-icon-color: var(--hybrid-input-clear-icon-color, var(--hybrid-input-local-clear-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 :host([disabled]) #clear-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 :host([disabled]) #clear-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 VARIANT STYLES\n * ======================================== */\n\n /* \n * Outlined variant - full border around input\n * Default: light border, focus: blue border\n */\n :host([variant='outlined']) #input-container {\n border: var(--hybrid-input-outlined-border, var(--hybrid-input-local-outlined-border));\n border-radius: var(--hybrid-input-outlined-border-radius, var(--hybrid-input-local-outlined-border-radius));\n background-color: var(--hybrid-input-outlined-background, var(--hybrid-input-local-outlined-background));\n }\n\n :host([variant='outlined']) .input-wrapper {\n background-color: transparent;\n }\n\n :host([variant='outlined']:not([state='error'])) #input-container:focus-within {\n border: var(--hybrid-input-outlined-focus-border, var(--hybrid-input-local-outlined-focus-border));\n }\n\n /* \n * Filled variant - background with bottom border only\n * Subtle background with bottom border indication\n */\n :host([variant='filled']) #input-container {\n background-color: var(--hybrid-input-filled-background, var(--hybrid-input-local-filled-background));\n border-radius: var(--hybrid-input-filled-border-radius, var(--hybrid-input-local-filled-border-radius));\n border-bottom: var(--hybrid-input-filled-border-bottom, var(--hybrid-input-local-filled-border-bottom));\n border-top: none;\n border-left: none;\n border-right: none;\n }\n\n :host([variant='filled']) .input-wrapper {\n background-color: transparent;\n }\n\n :host([variant='filled']:not([state='error'])) #input-container:focus-within {\n border-bottom: var(--hybrid-input-filled-focus-border-bottom, var(--hybrid-input-local-filled-focus-border-bottom));\n border-top: none;\n border-left: none;\n border-right: none;\n }\n\n /* \n * Borderless variant - no borders, focus with outline\n * Clean appearance with focus indication via outline\n */\n :host([variant='borderless']) #input-container {\n background-color: var(--hybrid-input-borderless-background, var(--hybrid-input-local-borderless-background));\n border: none;\n border-radius: var(--hybrid-input-borderless-border-radius, var(--hybrid-input-local-borderless-border-radius));\n }\n\n :host([variant='borderless']) .input-wrapper {\n background-color: transparent;\n }\n\n :host([variant='borderless']:not([state='error'])) #input-container:focus-within {\n outline: var(--hybrid-input-borderless-focus-outline, var(--hybrid-input-local-borderless-focus-outline));\n border: none;\n }\n\n /* \n * Underlined variant - bottom border only (default/current behavior)\n * Maintains existing behavior as default\n */\n :host([variant='underlined']) #input-container {\n border-bottom: var(--hybrid-input-underlined-border-bottom, var(--hybrid-input-local-underlined-border-bottom));\n border-top: none;\n border-left: none;\n border-right: none;\n border-radius: 0;\n }\n\n :host([variant='underlined']:not([state='error'])) #input-container:focus-within {\n border-bottom: var(--hybrid-input-underlined-focus-border-bottom, var(--hybrid-input-local-underlined-focus-border-bottom));\n border-top: none;\n border-left: none;\n border-right: none;\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 - works with all variants\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)) !important;\n outline: none !important;\n }\n\n /* Override variant-specific error state styling */\n :host([variant='borderless'][state='error']) #input-container {\n border: var(--hybrid-input-error-border, var(--hybrid-input-local-error-border)) !important;\n outline: none !important;\n }\n\n :host([variant='underlined'][state='error']) #input-container,\n :host([variant='filled'][state='error']) #input-container {\n border-top: none !important;\n border-left: none !important;\n border-right: none !important;\n border-bottom: var(--hybrid-input-error-border, var(--hybrid-input-local-error-border)) !important;\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 /* \n * Character count display\n * Shows character count and limit information\n */\n .character-count {\n font-size: var(--hybrid-input-character-count-font-size, var(--hybrid-input-local-character-count-font-size));\n color: var(--hybrid-input-character-count-color, var(--hybrid-input-local-character-count-color));\n text-align: right;\n margin-top: var(--hybrid-input-character-count-margin-top, var(--hybrid-input-local-character-count-margin-top));\n font-family: var(--hybrid-input-font-family, var(--hybrid-input-local-font-family));\n }\n\n /* Character count over limit styling */\n .character-count[data-over-limit] {\n color: var(--hybrid-input-character-count-over-limit-color, var(--hybrid-input-local-character-count-over-limit-color));\n }\n`;\n\nexport const styles = [inputStyle, sizeInputStyle, styleVariables];\n"]}
|
|
@@ -1 +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,
|
|
1
|
+
{"version":3,"file":"input.style.variable.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.style.variable.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBA2K1B,CAAC"}
|
package/input.style.variable.js
CHANGED
|
@@ -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;
|
|
@@ -82,6 +85,34 @@ export const styleVariables = css `
|
|
|
82
85
|
--hybrid-input-local-addon-background-color: #e8e8e8;
|
|
83
86
|
--hybrid-input-local-addon-color: #525252;
|
|
84
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;
|
|
85
116
|
}
|
|
86
117
|
|
|
87
118
|
/*
|
|
@@ -107,6 +138,7 @@ export const styleVariables = css `
|
|
|
107
138
|
--hybrid-input-local-number-icons-separator-color: #525252;
|
|
108
139
|
--hybrid-input-local-calendar-icon-color: #ffffff;
|
|
109
140
|
--hybrid-input-local-copy-icon-color: #ffffff;
|
|
141
|
+
--hybrid-input-local-clear-icon-color: #ffffff;
|
|
110
142
|
|
|
111
143
|
/* Dark theme prefix and suffix colors */
|
|
112
144
|
--hybrid-input-local-prefix-color: #c6c6c6;
|
|
@@ -116,6 +148,27 @@ export const styleVariables = css `
|
|
|
116
148
|
/* Dark theme addon colors */
|
|
117
149
|
--hybrid-input-local-addon-background-color: #525252;
|
|
118
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;
|
|
119
172
|
}
|
|
120
173
|
`;
|
|
121
174
|
//# sourceMappingURL=input.style.variable.js.map
|
|
@@ -1 +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
|
|
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
CHANGED
|
@@ -8,11 +8,31 @@ export declare const enum INPUT_SIZE {
|
|
|
8
8
|
Medium = "medium",
|
|
9
9
|
Small = "small"
|
|
10
10
|
}
|
|
11
|
+
export declare const enum INPUT_VARIANT {
|
|
12
|
+
Outlined = "outlined",
|
|
13
|
+
Filled = "filled",
|
|
14
|
+
Borderless = "borderless",
|
|
15
|
+
Underlined = "underlined"
|
|
16
|
+
}
|
|
11
17
|
export declare const enum INPUT_TYPE {
|
|
12
18
|
PASSWORD = "password",
|
|
13
19
|
TEXT = "text",
|
|
14
20
|
NUMBER = "number",
|
|
15
21
|
CALENDAR = "calendar"
|
|
16
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
|
+
}
|
|
17
37
|
export declare const EMPTY_STRING = "";
|
|
18
38
|
//# sourceMappingURL=input.types.d.ts.map
|
package/input.types.d.ts.map
CHANGED
|
@@ -1 +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"}
|
|
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.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.types.js","sourceRoot":"","sources":["../../../src/components/input/input.types.ts"],"names":[],"mappings":"
|
|
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"]}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
6
|
+
import { LitElement } from 'lit';
|
|
7
|
+
declare type Constructor<T = {}> = new (...args: any[]) => T;
|
|
8
|
+
/**
|
|
9
|
+
* Options for focus behavior
|
|
10
|
+
*/
|
|
11
|
+
export interface FocusOptions {
|
|
12
|
+
preventScroll?: boolean;
|
|
13
|
+
selectText?: boolean;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Options for blur behavior
|
|
17
|
+
*/
|
|
18
|
+
export interface BlurOptions {
|
|
19
|
+
relatedTarget?: Element | null;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Interface for components that support focus operations
|
|
23
|
+
*/
|
|
24
|
+
export interface FocusCapable {
|
|
25
|
+
/**
|
|
26
|
+
* Focus the input element
|
|
27
|
+
* @param options - Focus options
|
|
28
|
+
*/
|
|
29
|
+
focus(options?: FocusOptions): void;
|
|
30
|
+
/**
|
|
31
|
+
* Blur the input element
|
|
32
|
+
* @param options - Blur options
|
|
33
|
+
*/
|
|
34
|
+
blur(options?: BlurOptions): void;
|
|
35
|
+
/**
|
|
36
|
+
* Check if the input is currently focused
|
|
37
|
+
* @returns True if focused
|
|
38
|
+
*/
|
|
39
|
+
isFocused(): boolean;
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Mixin that provides focus management capabilities to input components
|
|
43
|
+
*
|
|
44
|
+
* @param superClass - The base class to extend
|
|
45
|
+
* @returns Enhanced class with focus capabilities
|
|
46
|
+
*
|
|
47
|
+
* @example
|
|
48
|
+
* ```typescript
|
|
49
|
+
* export class MyInput extends FocusMixin(LitElement) {
|
|
50
|
+
* @query('input') input!: HTMLInputElement;
|
|
51
|
+
*
|
|
52
|
+
* handleClick() {
|
|
53
|
+
* this.focus({ selectText: true });
|
|
54
|
+
* }
|
|
55
|
+
* }
|
|
56
|
+
* ```
|
|
57
|
+
*/
|
|
58
|
+
export declare const FocusMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<FocusCapable> & T;
|
|
59
|
+
export {};
|
|
60
|
+
//# sourceMappingURL=focus-mixin.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"focus-mixin.d.ts","sourceRoot":"","sources":["../../../../src/components/input/mixins/focus-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,aAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAChC;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAEpC;;;OAGG;IACH,IAAI,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAElC;;;OAGG;IACH,SAAS,IAAI,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,UAAU,qFA8CtB,CAAC"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* Mixin that provides focus management capabilities to input components
|
|
8
|
+
*
|
|
9
|
+
* @param superClass - The base class to extend
|
|
10
|
+
* @returns Enhanced class with focus capabilities
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```typescript
|
|
14
|
+
* export class MyInput extends FocusMixin(LitElement) {
|
|
15
|
+
* @query('input') input!: HTMLInputElement;
|
|
16
|
+
*
|
|
17
|
+
* handleClick() {
|
|
18
|
+
* this.focus({ selectText: true });
|
|
19
|
+
* }
|
|
20
|
+
* }
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
export const FocusMixin = (superClass) => {
|
|
24
|
+
class FocusMixinClass extends superClass {
|
|
25
|
+
/**
|
|
26
|
+
* Get the input element - must be implemented by the component
|
|
27
|
+
*/
|
|
28
|
+
get inputElement() {
|
|
29
|
+
var _a;
|
|
30
|
+
// Try to get from shadowRoot first (for custom elements)
|
|
31
|
+
const shadowInput = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#input, input, textarea');
|
|
32
|
+
if (shadowInput) {
|
|
33
|
+
return shadowInput;
|
|
34
|
+
}
|
|
35
|
+
// Fallback to light DOM
|
|
36
|
+
const input = this.querySelector('input, textarea');
|
|
37
|
+
if (!input) {
|
|
38
|
+
throw new Error('FocusMixin requires an input or textarea element');
|
|
39
|
+
}
|
|
40
|
+
return input;
|
|
41
|
+
}
|
|
42
|
+
focus(options = {}) {
|
|
43
|
+
const input = this.inputElement;
|
|
44
|
+
if (input) {
|
|
45
|
+
input.focus({ preventScroll: options.preventScroll });
|
|
46
|
+
if (options.selectText) {
|
|
47
|
+
input.select();
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
blur() {
|
|
52
|
+
const input = this.inputElement;
|
|
53
|
+
if (input) {
|
|
54
|
+
input.blur();
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
isFocused() {
|
|
58
|
+
const input = this.inputElement;
|
|
59
|
+
return input ? document.activeElement === input : false;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
// Cast return type to the superClass type passed in
|
|
63
|
+
return FocusMixinClass;
|
|
64
|
+
};
|
|
65
|
+
//# sourceMappingURL=focus-mixin.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"focus-mixin.js","sourceRoot":"","sources":["../../../../src/components/input/mixins/focus-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA4CH;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAoC,UAAa,EAAE,EAAE;IAC7E,MAAM,eAAgB,SAAQ,UAAU;QACtC;;WAEG;QACH,IAAc,YAAY;;YACxB,yDAAyD;YACzD,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,yBAAyB,CAA2C,CAAC;YACxH,IAAI,WAAW,EAAE;gBACf,OAAO,WAAW,CAAC;aACpB;YAED,wBAAwB;YACxB,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAA2C,CAAC;YAC9F,IAAI,CAAC,KAAK,EAAE;gBACV,MAAM,IAAI,KAAK,CAAC,kDAAkD,CAAC,CAAC;aACrE;YACD,OAAO,KAAK,CAAC;QACf,CAAC;QAEQ,KAAK,CAAC,UAAwB,EAAE;YACvC,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;YAChC,IAAI,KAAK,EAAE;gBACT,KAAK,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,OAAO,CAAC,aAAa,EAAE,CAAC,CAAC;gBAEtD,IAAI,OAAO,CAAC,UAAU,EAAE;oBACtB,KAAK,CAAC,MAAM,EAAE,CAAC;iBAChB;aACF;QACH,CAAC;QAEQ,IAAI;YACX,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;YAChC,IAAI,KAAK,EAAE;gBACT,KAAK,CAAC,IAAI,EAAE,CAAC;aACd;QACH,CAAC;QAED,SAAS;YACP,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;YAChC,OAAO,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;QAC1D,CAAC;KACF;IAED,oDAAoD;IACpD,OAAO,eAAgD,CAAC;AAC1D,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement } from 'lit';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\n/**\n * Options for focus behavior\n */\nexport interface FocusOptions {\n preventScroll?: boolean;\n selectText?: boolean;\n}\n\n/**\n * Options for blur behavior\n */\nexport interface BlurOptions {\n relatedTarget?: Element | null;\n}\n\n/**\n * Interface for components that support focus operations\n */\nexport interface FocusCapable {\n /**\n * Focus the input element\n * @param options - Focus options\n */\n focus(options?: FocusOptions): void;\n\n /**\n * Blur the input element\n * @param options - Blur options\n */\n blur(options?: BlurOptions): void;\n\n /**\n * Check if the input is currently focused\n * @returns True if focused\n */\n isFocused(): boolean;\n}\n\n/**\n * Mixin that provides focus management capabilities to input components\n * \n * @param superClass - The base class to extend\n * @returns Enhanced class with focus capabilities\n * \n * @example\n * ```typescript\n * export class MyInput extends FocusMixin(LitElement) {\n * @query('input') input!: HTMLInputElement;\n * \n * handleClick() {\n * this.focus({ selectText: true });\n * }\n * }\n * ```\n */\nexport const FocusMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n class FocusMixinClass extends superClass implements FocusCapable {\n /**\n * Get the input element - must be implemented by the component\n */\n protected get inputElement(): HTMLInputElement | HTMLTextAreaElement {\n // Try to get from shadowRoot first (for custom elements)\n const shadowInput = this.shadowRoot?.querySelector('#input, input, textarea') as HTMLInputElement | HTMLTextAreaElement;\n if (shadowInput) {\n return shadowInput;\n }\n \n // Fallback to light DOM\n const input = this.querySelector('input, textarea') as HTMLInputElement | HTMLTextAreaElement;\n if (!input) {\n throw new Error('FocusMixin requires an input or textarea element');\n }\n return input;\n }\n\n override focus(options: FocusOptions = {}): void {\n const input = this.inputElement;\n if (input) {\n input.focus({ preventScroll: options.preventScroll });\n \n if (options.selectText) {\n input.select();\n }\n }\n }\n\n override blur(): void {\n const input = this.inputElement;\n if (input) {\n input.blur();\n }\n }\n\n isFocused(): boolean {\n const input = this.inputElement;\n return input ? document.activeElement === input : false;\n }\n }\n\n // Cast return type to the superClass type passed in\n return FocusMixinClass as Constructor<FocusCapable> & T;\n};\n"]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
6
|
+
export { SelectionMixin, SelectionCapable } from './selection-mixin.js';
|
|
7
|
+
export { FocusMixin, FocusCapable, FocusOptions, BlurOptions } from './focus-mixin.js';
|
|
8
|
+
export { NumberMixin, NumberCapable } from './number-mixin.js';
|
|
9
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/input/mixins/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACvF,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC"}
|
package/mixins/index.js
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
6
|
+
export { SelectionMixin } from './selection-mixin.js';
|
|
7
|
+
export { FocusMixin } from './focus-mixin.js';
|
|
8
|
+
export { NumberMixin } from './number-mixin.js';
|
|
9
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/mixins/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,cAAc,EAAoB,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,UAAU,EAA2C,MAAM,kBAAkB,CAAC;AACvF,OAAO,EAAE,WAAW,EAAiB,MAAM,mBAAmB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nexport { SelectionMixin, SelectionCapable } from './selection-mixin.js';\nexport { FocusMixin, FocusCapable, FocusOptions, BlurOptions } from './focus-mixin.js';\nexport { NumberMixin, NumberCapable } from './number-mixin.js';\n"]}
|