@greghowe79/the-lib 2.13.7 → 2.13.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 (9) hide show
  1. package/lib/components/button/button.qwik.cjs +2 -2
  2. package/lib/components/button/button.qwik.mjs +2 -2
  3. package/lib/components/input/input.qwik.cjs +19 -15
  4. package/lib/components/input/input.qwik.mjs +19 -15
  5. package/lib/components/input/styles.css.qwik.cjs +1 -1
  6. package/lib/components/input/styles.css.qwik.mjs +1 -1
  7. package/lib-types/components/button/button.d.ts +1 -1
  8. package/lib-types/components/input/input.d.ts +3 -0
  9. package/package.json +1 -1
package/lib/components/button/button.qwik.cjs CHANGED
@@ -5,7 +5,7 @@ const qwik = require("@builder.io/qwik");
5
5
  const styles = require("./styles.css.qwik.cjs");
6
6
  const loader = require("../loader/loader.qwik.cjs");
7
7
  const button_utils = require("./button.utils.qwik.cjs");
8
- const Button = qwik.component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", href, target, rel, className, onClick$, isLoading, active = false, customColors }) => {
8
+ const Button = qwik.component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", href, target, rel, class: customClass, onClick$, isLoading, active = false, customColors }) => {
9
9
  qwik.useStylesScoped$(styles);
10
10
  const loading = typeof isLoading === "object" && isLoading !== null && "value" in isLoading ? isLoading.value : isLoading;
11
11
  const hasCustomStyles = customColors && (customColors.bg || customColors.text || customColors.border || customColors.padding || customColors.width || customColors.height);
@@ -14,7 +14,7 @@ const Button = qwik.component$(({ id, label, variant = "primary", icon, disabled
14
14
  `button-${size}`,
15
15
  disabled && "button-disabled",
16
16
  active && "button-active",
17
- className
17
+ customClass
18
18
  ].filter(Boolean).join(" ");
19
19
  if (href) {
20
20
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
package/lib/components/button/button.qwik.mjs CHANGED
@@ -3,7 +3,7 @@ import { component$, useStylesScoped$ } from "@builder.io/qwik";
3
3
  import styles from "./styles.css.qwik.mjs";
4
4
  import { Loader } from "../loader/loader.qwik.mjs";
5
5
  import { generateCustomCSS } from "./button.utils.qwik.mjs";
6
- const Button = component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", href, target, rel, className, onClick$, isLoading, active = false, customColors }) => {
6
+ const Button = component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", href, target, rel, class: customClass, onClick$, isLoading, active = false, customColors }) => {
7
7
  useStylesScoped$(styles);
8
8
  const loading = typeof isLoading === "object" && isLoading !== null && "value" in isLoading ? isLoading.value : isLoading;
9
9
  const hasCustomStyles = customColors && (customColors.bg || customColors.text || customColors.border || customColors.padding || customColors.width || customColors.height);
@@ -12,7 +12,7 @@ const Button = component$(({ id, label, variant = "primary", icon, disabled = fa
12
12
  `button-${size}`,
13
13
  disabled && "button-disabled",
14
14
  active && "button-active",
15
- className
15
+ customClass
16
16
  ].filter(Boolean).join(" ");
17
17
  if (href) {
18
18
  return /* @__PURE__ */ jsxs(Fragment, {
package/lib/components/input/input.qwik.cjs CHANGED
@@ -25,7 +25,7 @@ const uploadImage = qwik.$(async (_event, input, currentFile, selectedFile, imag
25
25
  if (selectedFile) selectedFile.value = file.name;
26
26
  }
27
27
  });
28
- const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix, required = false, color, nameAttribute, label, selectedValue, imgUrl, autocomplete, iconPasswordShow, iconPasswordHide, labelShowPassword = "Show password", labelHidePassword = "Hide password", lowercaseOnBlur = false, maxLength }) => {
28
+ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix, required = false, color, nameAttribute, label, showLabel = false, selectedValue, imgUrl, autocomplete, iconPasswordShow, iconPasswordHide, labelShowPassword = "Show password", labelHidePassword = "Hide password", lowercaseOnBlur = false, maxLength, max, min }) => {
29
29
  qwik.useStylesScoped$(styles);
30
30
  const internalError = qwik.useSignal(null);
31
31
  const isPasswordVisible = qwik.useSignal(false);
@@ -52,11 +52,16 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
52
52
  return;
53
53
  }
54
54
  const num = parseInt(elem.value, 10);
55
- if (!isNaN(num) && num > 100) {
55
+ if (max !== void 0 && !isNaN(num) && num > max) {
56
56
  elem.value = elem.value.slice(0, -1);
57
57
  if (value) value.value = elem.value;
58
58
  return;
59
59
  }
60
+ if (min !== void 0 && !isNaN(num) && num < min) {
61
+ elem.value = min.toString();
62
+ if (value) value.value = elem.value;
63
+ return;
64
+ }
60
65
  }
61
66
  if (type === "tel") {
62
67
  if (!/^[0-9]*$/.test(elem.value)) {
@@ -76,6 +81,13 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
76
81
  }
77
82
  });
78
83
  const effectiveType = type === "password" && isPasswordVisible.value ? "text" : type;
84
+ const labelContent = label && showLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", {
85
+ class: "input-visible-label",
86
+ children: label
87
+ }) : label ? /* @__PURE__ */ jsxRuntime.jsx("span", {
88
+ class: "sr-only",
89
+ children: label
90
+ }) : null;
79
91
  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
80
92
  class: "input-container",
81
93
  children: [
@@ -120,10 +132,7 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
120
132
  class: `input-label ${bgLight ? "bg_light" : ""}`,
121
133
  for: id,
122
134
  children: [
123
- label && /* @__PURE__ */ jsxRuntime.jsx("span", {
124
- class: "sr-only",
125
- children: label
126
- }),
135
+ labelContent,
127
136
  /* @__PURE__ */ jsxRuntime.jsxs("div", {
128
137
  class: "input-wrapper",
129
138
  children: [
@@ -173,10 +182,7 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
173
182
  class: `input-label ${bgLight ? "bg_light" : ""}`,
174
183
  for: id,
175
184
  children: [
176
- label && /* @__PURE__ */ jsxRuntime.jsx("span", {
177
- class: "sr-only",
178
- children: label
179
- }),
185
+ labelContent,
180
186
  /* @__PURE__ */ jsxRuntime.jsxs("div", {
181
187
  class: "input-wrapper",
182
188
  children: [
@@ -208,13 +214,10 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
208
214
  })
209
215
  ]
210
216
  }) : /* @__PURE__ */ jsxRuntime.jsxs("label", {
211
- class: `input-label ${bgLight ? "bg_light" : ""}`,
217
+ class: `input-label ${bgLight ? "bg_light" : ""} ${showLabel ? "has-visible-label" : ""}`,
212
218
  for: id,
213
219
  children: [
214
- label && /* @__PURE__ */ jsxRuntime.jsx("span", {
215
- class: "sr-only",
216
- children: label
217
- }),
220
+ labelContent,
218
221
  /* @__PURE__ */ jsxRuntime.jsxs("div", {
219
222
  class: icon ? "input-wrapper" : "no_icon",
220
223
  children: [
@@ -227,6 +230,7 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
227
230
  id,
228
231
  name: id,
229
232
  type,
233
+ inputMode: type === "number" ? "numeric" : void 0,
230
234
  class: `input ${showError.value ? "error" : ""}`,
231
235
  placeholder,
232
236
  "bind:value": value,
package/lib/components/input/input.qwik.mjs CHANGED
@@ -23,7 +23,7 @@ const uploadImage = $(async (_event, input, currentFile, selectedFile, imageUrl)
23
23
  if (selectedFile) selectedFile.value = file.name;
24
24
  }
25
25
  });
26
- const Input = component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix, required = false, color, nameAttribute, label, selectedValue, imgUrl, autocomplete, iconPasswordShow, iconPasswordHide, labelShowPassword = "Show password", labelHidePassword = "Hide password", lowercaseOnBlur = false, maxLength }) => {
26
+ const Input = component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix, required = false, color, nameAttribute, label, showLabel = false, selectedValue, imgUrl, autocomplete, iconPasswordShow, iconPasswordHide, labelShowPassword = "Show password", labelHidePassword = "Hide password", lowercaseOnBlur = false, maxLength, max, min }) => {
27
27
  useStylesScoped$(styles);
28
28
  const internalError = useSignal(null);
29
29
  const isPasswordVisible = useSignal(false);
@@ -50,11 +50,16 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
50
50
  return;
51
51
  }
52
52
  const num = parseInt(elem.value, 10);
53
- if (!isNaN(num) && num > 100) {
53
+ if (max !== void 0 && !isNaN(num) && num > max) {
54
54
  elem.value = elem.value.slice(0, -1);
55
55
  if (value) value.value = elem.value;
56
56
  return;
57
57
  }
58
+ if (min !== void 0 && !isNaN(num) && num < min) {
59
+ elem.value = min.toString();
60
+ if (value) value.value = elem.value;
61
+ return;
62
+ }
58
63
  }
59
64
  if (type === "tel") {
60
65
  if (!/^[0-9]*$/.test(elem.value)) {
@@ -74,6 +79,13 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
74
79
  }
75
80
  });
76
81
  const effectiveType = type === "password" && isPasswordVisible.value ? "text" : type;
82
+ const labelContent = label && showLabel ? /* @__PURE__ */ jsx("span", {
83
+ class: "input-visible-label",
84
+ children: label
85
+ }) : label ? /* @__PURE__ */ jsx("span", {
86
+ class: "sr-only",
87
+ children: label
88
+ }) : null;
77
89
  return /* @__PURE__ */ jsxs("div", {
78
90
  class: "input-container",
79
91
  children: [
@@ -118,10 +130,7 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
118
130
  class: `input-label ${bgLight ? "bg_light" : ""}`,
119
131
  for: id,
120
132
  children: [
121
- label && /* @__PURE__ */ jsx("span", {
122
- class: "sr-only",
123
- children: label
124
- }),
133
+ labelContent,
125
134
  /* @__PURE__ */ jsxs("div", {
126
135
  class: "input-wrapper",
127
136
  children: [
@@ -171,10 +180,7 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
171
180
  class: `input-label ${bgLight ? "bg_light" : ""}`,
172
181
  for: id,
173
182
  children: [
174
- label && /* @__PURE__ */ jsx("span", {
175
- class: "sr-only",
176
- children: label
177
- }),
183
+ labelContent,
178
184
  /* @__PURE__ */ jsxs("div", {
179
185
  class: "input-wrapper",
180
186
  children: [
@@ -206,13 +212,10 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
206
212
  })
207
213
  ]
208
214
  }) : /* @__PURE__ */ jsxs("label", {
209
- class: `input-label ${bgLight ? "bg_light" : ""}`,
215
+ class: `input-label ${bgLight ? "bg_light" : ""} ${showLabel ? "has-visible-label" : ""}`,
210
216
  for: id,
211
217
  children: [
212
- label && /* @__PURE__ */ jsx("span", {
213
- class: "sr-only",
214
- children: label
215
- }),
218
+ labelContent,
216
219
  /* @__PURE__ */ jsxs("div", {
217
220
  class: icon ? "input-wrapper" : "no_icon",
218
221
  children: [
@@ -225,6 +228,7 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
225
228
  id,
226
229
  name: id,
227
230
  type,
231
+ inputMode: type === "number" ? "numeric" : void 0,
228
232
  class: `input ${showError.value ? "error" : ""}`,
229
233
  placeholder,
230
234
  "bind:value": value,
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: #00758a;\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@media (max-width: 480px) {\r\n .prev_wrap {\r\n width: 100%;\r\n }\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\ninput:-webkit-autofill,\r\ninput:-webkit-autofill:hover,\r\ninput:-webkit-autofill:focus,\r\ninput:-webkit-autofill:active {\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 letter-spacing: inherit !important;\r\n color: #333 !important;\r\n /* Trick: transition ENORME che blocca il background di Chrome */\r\n transition:\r\n background-color 600000s 0s,\r\n color 600000s 0s !important;\r\n}\r\n\r\n/* Background BIANCO per bg_light */\r\n.input-label.bg_light input:-webkit-autofill,\r\n.input-label.bg_light .input-wrapper input:-webkit-autofill {\r\n background-color: #ffffff !important;\r\n}\r\n\r\n/* Background GRIGIO per default */\r\n.input-label:not(.bg_light) input:-webkit-autofill,\r\n.input-label:not(.bg_light) .input-wrapper input:-webkit-autofill {\r\n background-color: #f5f5f5 !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}\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: #00758a;\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@media (max-width: 480px) {\r\n .prev_wrap {\r\n width: 100%;\r\n }\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\ninput:-webkit-autofill,\r\ninput:-webkit-autofill:hover,\r\ninput:-webkit-autofill:focus,\r\ninput:-webkit-autofill:active {\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 letter-spacing: inherit !important;\r\n color: #333 !important;\r\n\r\n transition:\r\n background-color 600000s 0s,\r\n color 600000s 0s !important;\r\n}\r\n\r\n.input-label.bg_light input:-webkit-autofill,\r\n.input-label.bg_light .input-wrapper input:-webkit-autofill {\r\n background-color: #ffffff !important;\r\n}\r\n\r\n.input-label:not(.bg_light) input:-webkit-autofill,\r\n.input-label:not(.bg_light) .input-wrapper input:-webkit-autofill {\r\n background-color: #f5f5f5 !important;\r\n} */\r\n\r\n.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-label.has-visible-label:not([type='checkbox']) {\r\n height: auto;\r\n flex-direction: column;\r\n padding-top: 0.25rem;\r\n}\r\n\r\n.input-label.has-visible-label .no_icon,\r\n.input-label.has-visible-label .input-wrapper {\r\n height: 2.75rem;\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.input-visible-label {\r\n display: block;\r\n font-size: 0.75rem;\r\n font-weight: 600;\r\n color: #6e6e73;\r\n padding: 0.25rem 0.9375rem 0;\r\n line-height: 1.2;\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: #00758a;\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@media (max-width: 480px) {\r\n .prev_wrap {\r\n width: 100%;\r\n }\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\ninput:-webkit-autofill,\r\ninput:-webkit-autofill:hover,\r\ninput:-webkit-autofill:focus,\r\ninput:-webkit-autofill:active {\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 letter-spacing: inherit !important;\r\n color: #333 !important;\r\n transition:\r\n background-color 600000s 0s,\r\n color 600000s 0s !important;\r\n}\r\n\r\n.input-label.bg_light input:-webkit-autofill,\r\n.input-label.bg_light .input-wrapper input:-webkit-autofill {\r\n background-color: #ffffff !important;\r\n}\r\n\r\n.input-label:not(.bg_light) input:-webkit-autofill,\r\n.input-label:not(.bg_light) .input-wrapper input:-webkit-autofill {\r\n background-color: #f5f5f5 !important;\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: #00758a;\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@media (max-width: 480px) {\r\n .prev_wrap {\r\n width: 100%;\r\n }\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\ninput:-webkit-autofill,\r\ninput:-webkit-autofill:hover,\r\ninput:-webkit-autofill:focus,\r\ninput:-webkit-autofill:active {\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 letter-spacing: inherit !important;\r\n color: #333 !important;\r\n /* Trick: transition ENORME che blocca il background di Chrome */\r\n transition:\r\n background-color 600000s 0s,\r\n color 600000s 0s !important;\r\n}\r\n\r\n/* Background BIANCO per bg_light */\r\n.input-label.bg_light input:-webkit-autofill,\r\n.input-label.bg_light .input-wrapper input:-webkit-autofill {\r\n background-color: #ffffff !important;\r\n}\r\n\r\n/* Background GRIGIO per default */\r\n.input-label:not(.bg_light) input:-webkit-autofill,\r\n.input-label:not(.bg_light) .input-wrapper input:-webkit-autofill {\r\n background-color: #f5f5f5 !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}\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: #00758a;\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@media (max-width: 480px) {\r\n .prev_wrap {\r\n width: 100%;\r\n }\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\ninput:-webkit-autofill,\r\ninput:-webkit-autofill:hover,\r\ninput:-webkit-autofill:focus,\r\ninput:-webkit-autofill:active {\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 letter-spacing: inherit !important;\r\n color: #333 !important;\r\n\r\n transition:\r\n background-color 600000s 0s,\r\n color 600000s 0s !important;\r\n}\r\n\r\n.input-label.bg_light input:-webkit-autofill,\r\n.input-label.bg_light .input-wrapper input:-webkit-autofill {\r\n background-color: #ffffff !important;\r\n}\r\n\r\n.input-label:not(.bg_light) input:-webkit-autofill,\r\n.input-label:not(.bg_light) .input-wrapper input:-webkit-autofill {\r\n background-color: #f5f5f5 !important;\r\n} */\r\n\r\n.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-label.has-visible-label:not([type='checkbox']) {\r\n height: auto;\r\n flex-direction: column;\r\n padding-top: 0.25rem;\r\n}\r\n\r\n.input-label.has-visible-label .no_icon,\r\n.input-label.has-visible-label .input-wrapper {\r\n height: 2.75rem;\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.input-visible-label {\r\n display: block;\r\n font-size: 0.75rem;\r\n font-weight: 600;\r\n color: #6e6e73;\r\n padding: 0.25rem 0.9375rem 0;\r\n line-height: 1.2;\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: #00758a;\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@media (max-width: 480px) {\r\n .prev_wrap {\r\n width: 100%;\r\n }\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\ninput:-webkit-autofill,\r\ninput:-webkit-autofill:hover,\r\ninput:-webkit-autofill:focus,\r\ninput:-webkit-autofill:active {\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 letter-spacing: inherit !important;\r\n color: #333 !important;\r\n transition:\r\n background-color 600000s 0s,\r\n color 600000s 0s !important;\r\n}\r\n\r\n.input-label.bg_light input:-webkit-autofill,\r\n.input-label.bg_light .input-wrapper input:-webkit-autofill {\r\n background-color: #ffffff !important;\r\n}\r\n\r\n.input-label:not(.bg_light) input:-webkit-autofill,\r\n.input-label:not(.bg_light) .input-wrapper input:-webkit-autofill {\r\n background-color: #f5f5f5 !important;\r\n}\r\n";
2
2
  export {
3
3
  styles as default
4
4
  };
package/lib-types/components/button/button.d.ts CHANGED
@@ -26,7 +26,7 @@ export interface ButtonProps {
26
26
  href?: string;
27
27
  target?: string;
28
28
  rel?: string;
29
- className?: string;
29
+ class?: string;
30
30
  onClick$?: QRL<() => void> | QRL<() => boolean> | QRL<() => Promise<void>> | QRL<(type: string | unknown) => Promise<void>>;
31
31
  isLoading?: boolean | Signal<boolean>;
32
32
  active?: boolean;
package/lib-types/components/input/input.d.ts CHANGED
@@ -20,6 +20,7 @@ export interface InputProps {
20
20
  color?: string;
21
21
  nameAttribute?: string;
22
22
  label?: string;
23
+ showLabel?: boolean;
23
24
  selectedValue?: Signal<string>;
24
25
  autocomplete?: AutoFill;
25
26
  iconPasswordShow?: JSXOutput | Component<unknown>;
@@ -28,6 +29,8 @@ export interface InputProps {
28
29
  labelHidePassword?: string;
29
30
  lowercaseOnBlur?: boolean;
30
31
  maxLength?: number;
32
+ max?: number;
33
+ min?: number;
31
34
  }
32
35
  export declare const displayLocalImage: QRL<(file: File, imageUrl?: Signal<string>) => void>;
33
36
  export declare const uploadImage: QRL<(_event: Event, input: HTMLInputElement, currentFile?: Signal<any>, selectedFile?: Signal<string>, imageUrl?: Signal<string>) => Promise<void>>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@greghowe79/the-lib",
3
- "version": "2.13.7",
3
+ "version": "2.13.9",
4
4
  "description": "Collection of fast components for Qwik",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",