@greghowe79/the-lib 1.6.7 → 1.6.9

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 (3) hide show
  1. package/lib/components/input/styles.css.qwik.cjs +1 -1
  2. package/lib/components/input/styles.css.qwik.mjs +1 -1
  3. package/package.json +1 -1
package/lib/components/input/styles.css.qwik.cjs CHANGED
@@ -1,3 +1,3 @@
1
1
  "use strict";
2
- const styles = ".input-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n font-size: 0.8125rem;\r\n line-height: 1.85;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n position: relative;\r\n height: 3.29412rem;\r\n display: flex;\r\n min-width: 0;\r\n background: rgba(0, 0, 0, 0.04);\r\n transition:\r\n color 0.15s ease,\r\n box-shadow 0.15s ease,\r\n background 0.15s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n background: white;\r\n box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']):focus-within {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input {\r\n background: transparent;\r\n padding: 0 0.9375rem;\r\n flex: 1;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: inherit;\r\n height: 100%;\r\n border: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n width: calc(100% - 0.9375rem * 2);\r\n}\r\n\r\n.input::placeholder {\r\n color: #6e6e73;\r\n}\r\n\r\n.input:focus {\r\n outline: none;\r\n opacity: 1;\r\n}\r\n\r\n.input-label {\r\n border-radius: 0.75rem;\r\n transition: box-shadow 0.15s ease;\r\n}\r\n\r\n.input-label:focus-within {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.error-message {\r\n color: #e74c3c;\r\n font-size: 0.875rem;\r\n margin-top: 0.25rem;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n display: inline-flex;\r\n align-items: center;\r\n border-radius: 0.75rem 0 0 0.75rem;\r\n height: 3.29412rem;\r\n background-color: #0095ae;\r\n}\r\n\r\n.preview_container {\r\n height: 3.29412rem;\r\n display: flex;\r\n align-items: center;\r\n background: rgba(0, 0, 0, 0.04);\r\n border-radius: 0 0.75rem 0.75rem 0;\r\n color: #333;\r\n letter-spacing: 0.0625rem;\r\n font-size: 0.875rem;\r\n width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: calc(100% - 6.25rem);\r\n}\r\n\r\n.preview {\r\n margin: 0;\r\n border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n position: absolute;\r\n width: 0.0625rem;\r\n height: 0.0625rem;\r\n padding: 0;\r\n margin: -0.0625rem;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n}\r\n\r\n.input-label {\r\n cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n cursor: pointer;\r\n width: 6.25rem;\r\n color: #fff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.input-wrapper {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n padding: 0 0.9375rem;\r\n}\r\n\r\n.input-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n pointer-events: none;\r\n}\r\n\r\n.input.with-icon {\r\n padding-left: 2.5rem;\r\n}\r\n.no_icon {\r\n width: 100%;\r\n}\r\n\r\n.sr-only {\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n padding: 0;\r\n margin: -1px;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n white-space: nowrap;\r\n border: 0;\r\n}\r\n\r\ninput[type='number']::-webkit-outer-spin-button,\r\ninput[type='number']::-webkit-inner-spin-button {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n}\r\n\r\ninput[type='number'] {\r\n -moz-appearance: textfield;\r\n appearance: textfield;\r\n}\r\n\r\n.password-toggle-btn {\r\n position: absolute;\r\n right: 12px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 4px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: inherit;\r\n opacity: 0.6;\r\n transition: opacity 0.2s;\r\n}\r\n\r\n.password-toggle-btn:focus {\r\n outline: none;\r\n}\r\n\r\n.input-wrapper {\r\n position: relative;\r\n}\r\n\r\n/* Stili per l'autofill di Chrome - VERSIONE FINALE CORRETTA */\r\n\r\n/* Autofill per background bianco (bg_light) con input-wrapper - NON in focus */\r\n.input-label.bg_light .input-wrapper .input:-webkit-autofill:not(:focus),\r\n.input-label.bg_light .input-wrapper .input:-webkit-autofill:hover:not(:focus),\r\n.input-label.bg_light .input-wrapper .input:-webkit-autofill:active:not(:focus) {\r\n -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n transition: background-color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n/* Quando IN FOCUS - rimuovi box-shadow per mostrare il bordo blu */\r\n.input-label.bg_light .input-wrapper .input:-webkit-autofill:focus {\r\n -webkit-box-shadow: none !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n background-color: transparent !important;\r\n}\r\n\r\n/* Autofill per background grigio (default) con input-wrapper - NON in focus */\r\n.input-label:not(.bg_light) .input-wrapper .input:-webkit-autofill:not(:focus),\r\n.input-label:not(.bg_light) .input-wrapper .input:-webkit-autofill:hover:not(:focus),\r\n.input-label:not(.bg_light) .input-wrapper .input:-webkit-autofill:active:not(:focus) {\r\n -webkit-box-shadow: 0 0 0 1000px #f5f5f5 inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n transition: background-color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n/* Quando IN FOCUS */\r\n.input-label:not(.bg_light) .input-wrapper .input:-webkit-autofill:focus {\r\n -webkit-box-shadow: none !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n background-color: transparent !important;\r\n}\r\n\r\n/* Autofill per input senza wrapper (caso .no_icon) - bg_light - NON in focus */\r\n.input-label.bg_light .input:-webkit-autofill:not(:focus),\r\n.input-label.bg_light .input:-webkit-autofill:hover:not(:focus),\r\n.input-label.bg_light .input:-webkit-autofill:active:not(:focus) {\r\n -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n transition: background-color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n/* Quando IN FOCUS */\r\n.input-label.bg_light .input:-webkit-autofill:focus {\r\n -webkit-box-shadow: none !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n background-color: transparent !important;\r\n}\r\n\r\n/* Autofill per input senza wrapper (caso .no_icon) - default - NON in focus */\r\n.input-label:not(.bg_light) .input:-webkit-autofill:not(:focus),\r\n.input-label:not(.bg_light) .input:-webkit-autofill:hover:not(:focus),\r\n.input-label:not(.bg_light) .input:-webkit-autofill:active:not(:focus) {\r\n -webkit-box-shadow: 0 0 0 1000px #f5f5f5 inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n transition: background-color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n/* Quando IN FOCUS */\r\n.input-label:not(.bg_light) .input:-webkit-autofill:focus {\r\n -webkit-box-shadow: none !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n background-color: transparent !important;\r\n}\r\n";
2
+ const styles = ".input-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n font-size: 0.8125rem;\r\n line-height: 1.85;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n position: relative;\r\n height: 3.29412rem;\r\n display: flex;\r\n min-width: 0;\r\n background: rgba(0, 0, 0, 0.04);\r\n transition:\r\n color 0.15s ease,\r\n box-shadow 0.15s ease,\r\n background 0.15s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n background: white;\r\n box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']):focus-within {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input {\r\n background: transparent;\r\n padding: 0 0.9375rem;\r\n flex: 1;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: inherit;\r\n height: 100%;\r\n border: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n width: calc(100% - 0.9375rem * 2);\r\n border-radius: 0.75rem;\r\n}\r\n\r\n.input::placeholder {\r\n color: #6e6e73;\r\n}\r\n\r\n.input:focus {\r\n outline: none;\r\n opacity: 1;\r\n}\r\n\r\n.input-label {\r\n border-radius: 0.75rem;\r\n transition: box-shadow 0.15s ease;\r\n}\r\n\r\n.input-label:focus-within {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.error-message {\r\n color: #e74c3c;\r\n font-size: 0.875rem;\r\n margin-top: 0.25rem;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n display: inline-flex;\r\n align-items: center;\r\n border-radius: 0.75rem 0 0 0.75rem;\r\n height: 3.29412rem;\r\n background-color: #0095ae;\r\n}\r\n\r\n.preview_container {\r\n height: 3.29412rem;\r\n display: flex;\r\n align-items: center;\r\n background: rgba(0, 0, 0, 0.04);\r\n border-radius: 0 0.75rem 0.75rem 0;\r\n color: #333;\r\n letter-spacing: 0.0625rem;\r\n font-size: 0.875rem;\r\n width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: calc(100% - 6.25rem);\r\n}\r\n\r\n.preview {\r\n margin: 0;\r\n border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n position: absolute;\r\n width: 0.0625rem;\r\n height: 0.0625rem;\r\n padding: 0;\r\n margin: -0.0625rem;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n}\r\n\r\n.input-label {\r\n cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n cursor: pointer;\r\n width: 6.25rem;\r\n color: #fff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.input-wrapper {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n padding: 0 0.9375rem;\r\n}\r\n\r\n.input-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n pointer-events: none;\r\n}\r\n\r\n.input.with-icon {\r\n padding-left: 2.5rem;\r\n}\r\n.no_icon {\r\n width: 100%;\r\n}\r\n\r\n.sr-only {\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n padding: 0;\r\n margin: -1px;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n white-space: nowrap;\r\n border: 0;\r\n}\r\n\r\ninput[type='number']::-webkit-outer-spin-button,\r\ninput[type='number']::-webkit-inner-spin-button {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n}\r\n\r\ninput[type='number'] {\r\n -moz-appearance: textfield;\r\n appearance: textfield;\r\n}\r\n\r\n.password-toggle-btn {\r\n position: absolute;\r\n right: 12px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 4px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: inherit;\r\n opacity: 0.6;\r\n transition: opacity 0.2s;\r\n}\r\n\r\n.password-toggle-btn:focus {\r\n outline: none;\r\n}\r\n\r\n.input-wrapper {\r\n position: relative;\r\n}\r\n\r\n/* .input-label.bg_light:not(:focus-within) .input-wrapper input.input:-webkit-autofill,\r\n.input-label.bg_light:not(:focus-within) .input-wrapper input.input:-webkit-autofill:hover,\r\n.input-label.bg_light:not(:focus-within) .input-wrapper input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 9999px #ffffff inset !important;\r\n box-shadow: 0 0 0 9999px #ffffff inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n transition:\r\n background-color 5000s ease-in-out 0s,\r\n color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n\r\n.input-label.bg_light:focus-within .input-wrapper input.input:-webkit-autofill,\r\n.input-label.bg_light:focus-within .input-wrapper input.input:-webkit-autofill:hover,\r\n.input-label.bg_light:focus-within .input-wrapper input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: none !important;\r\n box-shadow: none !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n}\r\n\r\n\r\n.input-label:not(.bg_light):not(:focus-within) .input-wrapper input.input:-webkit-autofill,\r\n.input-label:not(.bg_light):not(:focus-within) .input-wrapper input.input:-webkit-autofill:hover,\r\n.input-label:not(.bg_light):not(:focus-within) .input-wrapper input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 9999px #f5f5f5 inset !important;\r\n box-shadow: 0 0 0 9999px #f5f5f5 inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n transition:\r\n background-color 5000s ease-in-out 0s,\r\n color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n\r\n.input-label:not(.bg_light):focus-within .input-wrapper input.input:-webkit-autofill,\r\n.input-label:not(.bg_light):focus-within .input-wrapper input.input:-webkit-autofill:hover,\r\n.input-label:not(.bg_light):focus-within .input-wrapper input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: none !important;\r\n box-shadow: none !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n}\r\n\r\n\r\n.input-label.bg_light:not(:focus-within) input.input:-webkit-autofill,\r\n.input-label.bg_light:not(:focus-within) input.input:-webkit-autofill:hover,\r\n.input-label.bg_light:not(:focus-within) input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 9999px #ffffff inset !important;\r\n box-shadow: 0 0 0 9999px #ffffff inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n transition:\r\n background-color 5000s ease-in-out 0s,\r\n color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n\r\n.input-label.bg_light:focus-within input.input:-webkit-autofill,\r\n.input-label.bg_light:focus-within input.input:-webkit-autofill:hover,\r\n.input-label.bg_light:focus-within input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: none !important;\r\n box-shadow: none !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n}\r\n\r\n\r\n.input-label:not(.bg_light):not(:focus-within) input.input:-webkit-autofill,\r\n.input-label:not(.bg_light):not(:focus-within) input.input:-webkit-autofill:hover,\r\n.input-label:not(.bg_light):not(:focus-within) input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 9999px #f5f5f5 inset !important;\r\n box-shadow: 0 0 0 9999px #f5f5f5 inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n transition:\r\n background-color 5000s ease-in-out 0s,\r\n color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n\r\n.input-label:not(.bg_light):focus-within input.input:-webkit-autofill,\r\n.input-label:not(.bg_light):focus-within input.input:-webkit-autofill:hover,\r\n.input-label:not(.bg_light):focus-within input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: none !important;\r\n box-shadow: none !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n} */\r\n\r\n/* ===== PATCH CHROME AUTOFILL - VERSIONE STABILE 2025 ===== */\r\n\r\n/* Rimuove lo sfondo giallo/azzurro Chrome e mantiene i colori personalizzati */\r\ninput.input:-webkit-autofill,\r\ninput.input:-webkit-autofill:hover,\r\ninput.input:-webkit-autofill:focus,\r\ninput.input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 1000px transparent inset !important;\r\n box-shadow: 0 0 0 1000px transparent inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n background-clip: content-box !important;\r\n -webkit-background-clip: content-box !important;\r\n border-radius: 0.75rem !important;\r\n caret-color: #333 !important;\r\n appearance: none !important;\r\n -webkit-appearance: none !important;\r\n transition:\r\n background-color 0s,\r\n color 0s !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n}\r\n\r\n/* Gestione background coerente con i tuoi due temi (bianco e grigio) */\r\n.input-label.bg_light input.input:-webkit-autofill {\r\n background-color: #ffffff !important;\r\n}\r\n\r\n.input-label:not(.bg_light) input.input:-webkit-autofill {\r\n background-color: #f5f5f5 !important;\r\n}\r\n\r\n/* Mantieni il bordo di focus anche quando l’icona è cliccata */\r\n.input-label:focus-within {\r\n box-shadow: inset 0 0 0 1.5px #007aff !important;\r\n background-color: inherit !important;\r\n}\r\n\r\n/* Forza input type password a non ricevere il bg azzurro Chrome */\r\ninput[type='password'] {\r\n background-color: transparent !important;\r\n -webkit-text-security: disc;\r\n}\r\n";
3
3
  module.exports = styles;
package/lib/components/input/styles.css.qwik.mjs CHANGED
@@ -1,4 +1,4 @@
1
- const styles = ".input-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n font-size: 0.8125rem;\r\n line-height: 1.85;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n position: relative;\r\n height: 3.29412rem;\r\n display: flex;\r\n min-width: 0;\r\n background: rgba(0, 0, 0, 0.04);\r\n transition:\r\n color 0.15s ease,\r\n box-shadow 0.15s ease,\r\n background 0.15s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n background: white;\r\n box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']):focus-within {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input {\r\n background: transparent;\r\n padding: 0 0.9375rem;\r\n flex: 1;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: inherit;\r\n height: 100%;\r\n border: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n width: calc(100% - 0.9375rem * 2);\r\n}\r\n\r\n.input::placeholder {\r\n color: #6e6e73;\r\n}\r\n\r\n.input:focus {\r\n outline: none;\r\n opacity: 1;\r\n}\r\n\r\n.input-label {\r\n border-radius: 0.75rem;\r\n transition: box-shadow 0.15s ease;\r\n}\r\n\r\n.input-label:focus-within {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.error-message {\r\n color: #e74c3c;\r\n font-size: 0.875rem;\r\n margin-top: 0.25rem;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n display: inline-flex;\r\n align-items: center;\r\n border-radius: 0.75rem 0 0 0.75rem;\r\n height: 3.29412rem;\r\n background-color: #0095ae;\r\n}\r\n\r\n.preview_container {\r\n height: 3.29412rem;\r\n display: flex;\r\n align-items: center;\r\n background: rgba(0, 0, 0, 0.04);\r\n border-radius: 0 0.75rem 0.75rem 0;\r\n color: #333;\r\n letter-spacing: 0.0625rem;\r\n font-size: 0.875rem;\r\n width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: calc(100% - 6.25rem);\r\n}\r\n\r\n.preview {\r\n margin: 0;\r\n border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n position: absolute;\r\n width: 0.0625rem;\r\n height: 0.0625rem;\r\n padding: 0;\r\n margin: -0.0625rem;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n}\r\n\r\n.input-label {\r\n cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n cursor: pointer;\r\n width: 6.25rem;\r\n color: #fff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.input-wrapper {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n padding: 0 0.9375rem;\r\n}\r\n\r\n.input-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n pointer-events: none;\r\n}\r\n\r\n.input.with-icon {\r\n padding-left: 2.5rem;\r\n}\r\n.no_icon {\r\n width: 100%;\r\n}\r\n\r\n.sr-only {\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n padding: 0;\r\n margin: -1px;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n white-space: nowrap;\r\n border: 0;\r\n}\r\n\r\ninput[type='number']::-webkit-outer-spin-button,\r\ninput[type='number']::-webkit-inner-spin-button {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n}\r\n\r\ninput[type='number'] {\r\n -moz-appearance: textfield;\r\n appearance: textfield;\r\n}\r\n\r\n.password-toggle-btn {\r\n position: absolute;\r\n right: 12px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 4px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: inherit;\r\n opacity: 0.6;\r\n transition: opacity 0.2s;\r\n}\r\n\r\n.password-toggle-btn:focus {\r\n outline: none;\r\n}\r\n\r\n.input-wrapper {\r\n position: relative;\r\n}\r\n\r\n/* Stili per l'autofill di Chrome - VERSIONE FINALE CORRETTA */\r\n\r\n/* Autofill per background bianco (bg_light) con input-wrapper - NON in focus */\r\n.input-label.bg_light .input-wrapper .input:-webkit-autofill:not(:focus),\r\n.input-label.bg_light .input-wrapper .input:-webkit-autofill:hover:not(:focus),\r\n.input-label.bg_light .input-wrapper .input:-webkit-autofill:active:not(:focus) {\r\n -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n transition: background-color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n/* Quando IN FOCUS - rimuovi box-shadow per mostrare il bordo blu */\r\n.input-label.bg_light .input-wrapper .input:-webkit-autofill:focus {\r\n -webkit-box-shadow: none !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n background-color: transparent !important;\r\n}\r\n\r\n/* Autofill per background grigio (default) con input-wrapper - NON in focus */\r\n.input-label:not(.bg_light) .input-wrapper .input:-webkit-autofill:not(:focus),\r\n.input-label:not(.bg_light) .input-wrapper .input:-webkit-autofill:hover:not(:focus),\r\n.input-label:not(.bg_light) .input-wrapper .input:-webkit-autofill:active:not(:focus) {\r\n -webkit-box-shadow: 0 0 0 1000px #f5f5f5 inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n transition: background-color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n/* Quando IN FOCUS */\r\n.input-label:not(.bg_light) .input-wrapper .input:-webkit-autofill:focus {\r\n -webkit-box-shadow: none !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n background-color: transparent !important;\r\n}\r\n\r\n/* Autofill per input senza wrapper (caso .no_icon) - bg_light - NON in focus */\r\n.input-label.bg_light .input:-webkit-autofill:not(:focus),\r\n.input-label.bg_light .input:-webkit-autofill:hover:not(:focus),\r\n.input-label.bg_light .input:-webkit-autofill:active:not(:focus) {\r\n -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n transition: background-color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n/* Quando IN FOCUS */\r\n.input-label.bg_light .input:-webkit-autofill:focus {\r\n -webkit-box-shadow: none !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n background-color: transparent !important;\r\n}\r\n\r\n/* Autofill per input senza wrapper (caso .no_icon) - default - NON in focus */\r\n.input-label:not(.bg_light) .input:-webkit-autofill:not(:focus),\r\n.input-label:not(.bg_light) .input:-webkit-autofill:hover:not(:focus),\r\n.input-label:not(.bg_light) .input:-webkit-autofill:active:not(:focus) {\r\n -webkit-box-shadow: 0 0 0 1000px #f5f5f5 inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n transition: background-color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n/* Quando IN FOCUS */\r\n.input-label:not(.bg_light) .input:-webkit-autofill:focus {\r\n -webkit-box-shadow: none !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n background-color: transparent !important;\r\n}\r\n";
1
+ const styles = ".input-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n font-size: 0.8125rem;\r\n line-height: 1.85;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n position: relative;\r\n height: 3.29412rem;\r\n display: flex;\r\n min-width: 0;\r\n background: rgba(0, 0, 0, 0.04);\r\n transition:\r\n color 0.15s ease,\r\n box-shadow 0.15s ease,\r\n background 0.15s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n background: white;\r\n box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']):focus-within {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input {\r\n background: transparent;\r\n padding: 0 0.9375rem;\r\n flex: 1;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: inherit;\r\n height: 100%;\r\n border: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n width: calc(100% - 0.9375rem * 2);\r\n border-radius: 0.75rem;\r\n}\r\n\r\n.input::placeholder {\r\n color: #6e6e73;\r\n}\r\n\r\n.input:focus {\r\n outline: none;\r\n opacity: 1;\r\n}\r\n\r\n.input-label {\r\n border-radius: 0.75rem;\r\n transition: box-shadow 0.15s ease;\r\n}\r\n\r\n.input-label:focus-within {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.error-message {\r\n color: #e74c3c;\r\n font-size: 0.875rem;\r\n margin-top: 0.25rem;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n display: inline-flex;\r\n align-items: center;\r\n border-radius: 0.75rem 0 0 0.75rem;\r\n height: 3.29412rem;\r\n background-color: #0095ae;\r\n}\r\n\r\n.preview_container {\r\n height: 3.29412rem;\r\n display: flex;\r\n align-items: center;\r\n background: rgba(0, 0, 0, 0.04);\r\n border-radius: 0 0.75rem 0.75rem 0;\r\n color: #333;\r\n letter-spacing: 0.0625rem;\r\n font-size: 0.875rem;\r\n width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: calc(100% - 6.25rem);\r\n}\r\n\r\n.preview {\r\n margin: 0;\r\n border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n position: absolute;\r\n width: 0.0625rem;\r\n height: 0.0625rem;\r\n padding: 0;\r\n margin: -0.0625rem;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n}\r\n\r\n.input-label {\r\n cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n cursor: pointer;\r\n width: 6.25rem;\r\n color: #fff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.input-wrapper {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n padding: 0 0.9375rem;\r\n}\r\n\r\n.input-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n pointer-events: none;\r\n}\r\n\r\n.input.with-icon {\r\n padding-left: 2.5rem;\r\n}\r\n.no_icon {\r\n width: 100%;\r\n}\r\n\r\n.sr-only {\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n padding: 0;\r\n margin: -1px;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n white-space: nowrap;\r\n border: 0;\r\n}\r\n\r\ninput[type='number']::-webkit-outer-spin-button,\r\ninput[type='number']::-webkit-inner-spin-button {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n}\r\n\r\ninput[type='number'] {\r\n -moz-appearance: textfield;\r\n appearance: textfield;\r\n}\r\n\r\n.password-toggle-btn {\r\n position: absolute;\r\n right: 12px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 4px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: inherit;\r\n opacity: 0.6;\r\n transition: opacity 0.2s;\r\n}\r\n\r\n.password-toggle-btn:focus {\r\n outline: none;\r\n}\r\n\r\n.input-wrapper {\r\n position: relative;\r\n}\r\n\r\n/* .input-label.bg_light:not(:focus-within) .input-wrapper input.input:-webkit-autofill,\r\n.input-label.bg_light:not(:focus-within) .input-wrapper input.input:-webkit-autofill:hover,\r\n.input-label.bg_light:not(:focus-within) .input-wrapper input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 9999px #ffffff inset !important;\r\n box-shadow: 0 0 0 9999px #ffffff inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n transition:\r\n background-color 5000s ease-in-out 0s,\r\n color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n\r\n.input-label.bg_light:focus-within .input-wrapper input.input:-webkit-autofill,\r\n.input-label.bg_light:focus-within .input-wrapper input.input:-webkit-autofill:hover,\r\n.input-label.bg_light:focus-within .input-wrapper input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: none !important;\r\n box-shadow: none !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n}\r\n\r\n\r\n.input-label:not(.bg_light):not(:focus-within) .input-wrapper input.input:-webkit-autofill,\r\n.input-label:not(.bg_light):not(:focus-within) .input-wrapper input.input:-webkit-autofill:hover,\r\n.input-label:not(.bg_light):not(:focus-within) .input-wrapper input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 9999px #f5f5f5 inset !important;\r\n box-shadow: 0 0 0 9999px #f5f5f5 inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n transition:\r\n background-color 5000s ease-in-out 0s,\r\n color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n\r\n.input-label:not(.bg_light):focus-within .input-wrapper input.input:-webkit-autofill,\r\n.input-label:not(.bg_light):focus-within .input-wrapper input.input:-webkit-autofill:hover,\r\n.input-label:not(.bg_light):focus-within .input-wrapper input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: none !important;\r\n box-shadow: none !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n}\r\n\r\n\r\n.input-label.bg_light:not(:focus-within) input.input:-webkit-autofill,\r\n.input-label.bg_light:not(:focus-within) input.input:-webkit-autofill:hover,\r\n.input-label.bg_light:not(:focus-within) input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 9999px #ffffff inset !important;\r\n box-shadow: 0 0 0 9999px #ffffff inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n transition:\r\n background-color 5000s ease-in-out 0s,\r\n color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n\r\n.input-label.bg_light:focus-within input.input:-webkit-autofill,\r\n.input-label.bg_light:focus-within input.input:-webkit-autofill:hover,\r\n.input-label.bg_light:focus-within input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: none !important;\r\n box-shadow: none !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n}\r\n\r\n\r\n.input-label:not(.bg_light):not(:focus-within) input.input:-webkit-autofill,\r\n.input-label:not(.bg_light):not(:focus-within) input.input:-webkit-autofill:hover,\r\n.input-label:not(.bg_light):not(:focus-within) input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 9999px #f5f5f5 inset !important;\r\n box-shadow: 0 0 0 9999px #f5f5f5 inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n transition:\r\n background-color 5000s ease-in-out 0s,\r\n color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n\r\n.input-label:not(.bg_light):focus-within input.input:-webkit-autofill,\r\n.input-label:not(.bg_light):focus-within input.input:-webkit-autofill:hover,\r\n.input-label:not(.bg_light):focus-within input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: none !important;\r\n box-shadow: none !important;\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n} */\r\n\r\n/* ===== PATCH CHROME AUTOFILL - VERSIONE STABILE 2025 ===== */\r\n\r\n/* Rimuove lo sfondo giallo/azzurro Chrome e mantiene i colori personalizzati */\r\ninput.input:-webkit-autofill,\r\ninput.input:-webkit-autofill:hover,\r\ninput.input:-webkit-autofill:focus,\r\ninput.input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 1000px transparent inset !important;\r\n box-shadow: 0 0 0 1000px transparent inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n background-clip: content-box !important;\r\n -webkit-background-clip: content-box !important;\r\n border-radius: 0.75rem !important;\r\n caret-color: #333 !important;\r\n appearance: none !important;\r\n -webkit-appearance: none !important;\r\n transition:\r\n background-color 0s,\r\n color 0s !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n}\r\n\r\n/* Gestione background coerente con i tuoi due temi (bianco e grigio) */\r\n.input-label.bg_light input.input:-webkit-autofill {\r\n background-color: #ffffff !important;\r\n}\r\n\r\n.input-label:not(.bg_light) input.input:-webkit-autofill {\r\n background-color: #f5f5f5 !important;\r\n}\r\n\r\n/* Mantieni il bordo di focus anche quando l’icona è cliccata */\r\n.input-label:focus-within {\r\n box-shadow: inset 0 0 0 1.5px #007aff !important;\r\n background-color: inherit !important;\r\n}\r\n\r\n/* Forza input type password a non ricevere il bg azzurro Chrome */\r\ninput[type='password'] {\r\n background-color: transparent !important;\r\n -webkit-text-security: disc;\r\n}\r\n";
2
2
  export {
3
3
  styles as default
4
4
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@greghowe79/the-lib",
3
- "version": "1.6.7",
3
+ "version": "1.6.9",
4
4
  "description": "Collection of fast components for Qwik",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",