@greghowe79/the-lib 0.7.3 → 0.7.4

package/lib/components/input/input.qwik.cjs

@@ -26,7 +26,7 @@ const uploadImage = qwik.$(async (_event, input, currentFile, selectedFile, imag
     if (selectedFile) selectedFile.value = file.name;
   }
 });
-const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile }) => {
+const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon }) => {
   qwik.useStylesScoped$(styles);
   const internalError = qwik.useSignal(null);
   const showError = error ?? internalError;
@@ -82,15 +82,25 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
         })
       }) : /* @__PURE__ */ jsxRuntime.jsx("label", {
         class: `input-label ${bgLight ? "bg_light" : ""}`,
-        children: /* @__PURE__ */ jsxRuntime.jsx("input", {
-          id,
-          type,
-          class: `input ${showError.value ? "error" : ""}`,
-          placeholder,
-          "bind:value": value,
-          onInput$: inputHandler,
-          onBlur$: inputHandler,
-          required: true
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          class: icon ? "input-wrapper" : "no_icon",
+          children: [
+            icon && /* @__PURE__ */ jsxRuntime.jsx("span", {
+              class: "input-icon",
+              "aria-hidden": "true",
+              children: typeof icon === "function" ? icon({}, null, 0) : icon
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx("input", {
+              id,
+              type,
+              class: `input ${showError.value ? "error" : ""}`,
+              placeholder,
+              "bind:value": value,
+              onInput$: inputHandler,
+              onBlur$: inputHandler,
+              required: true
+            })
+          ]
         })
       }),
       showError.value && /* @__PURE__ */ jsxRuntime.jsx("div", {

package/lib/components/input/input.qwik.mjs

@@ -24,7 +24,7 @@ const uploadImage = $(async (_event, input, currentFile, selectedFile, imageUrl)
     if (selectedFile) selectedFile.value = file.name;
   }
 });
-const Input = component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile }) => {
+const Input = component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon }) => {
   useStylesScoped$(styles);
   const internalError = useSignal(null);
   const showError = error ?? internalError;
@@ -80,15 +80,25 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
         })
       }) : /* @__PURE__ */ jsx("label", {
         class: `input-label ${bgLight ? "bg_light" : ""}`,
-        children: /* @__PURE__ */ jsx("input", {
-          id,
-          type,
-          class: `input ${showError.value ? "error" : ""}`,
-          placeholder,
-          "bind:value": value,
-          onInput$: inputHandler,
-          onBlur$: inputHandler,
-          required: true
+        children: /* @__PURE__ */ jsxs("div", {
+          class: icon ? "input-wrapper" : "no_icon",
+          children: [
+            icon && /* @__PURE__ */ jsx("span", {
+              class: "input-icon",
+              "aria-hidden": "true",
+              children: typeof icon === "function" ? icon({}, null, 0) : icon
+            }),
+            /* @__PURE__ */ jsx("input", {
+              id,
+              type,
+              class: `input ${showError.value ? "error" : ""}`,
+              placeholder,
+              "bind:value": value,
+              onInput$: inputHandler,
+              onBlur$: inputHandler,
+              required: true
+            })
+          ]
         })
       }),
       showError.value && /* @__PURE__ */ jsx("div", {

package/lib/components/input/styles.css.qwik.cjs

@@ -1,3 +1,3 @@
 "use strict";
-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  border-radius: 0.5rem;\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.125rem;\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.3s ease,\r\n    box-shadow 0.3s ease,\r\n    background 0.3s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n  background: white;\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  opacity: 0.4;\r\n}\r\n\r\n.input:focus {\r\n  outline: none;\r\n  opacity: 1;\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.5rem 0 0 0.5rem;\r\n  height: 3.4375rem;\r\n  background-color: #0095ae;\r\n}\r\n\r\n.preview_container {\r\n  height: 3.4375rem;\r\n  display: flex;\r\n  align-items: center;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  border-radius: 0 0.5rem 0.5rem 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";
+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  border-radius: 0.5rem;\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.125rem;\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.3s ease,\r\n    box-shadow 0.3s ease,\r\n    background 0.3s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n  background: white;\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  opacity: 0.4;\r\n  width: calc(100% - 0.9375rem * 2);\r\n}\r\n\r\n.input:focus {\r\n  outline: none;\r\n  opacity: 1;\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.5rem 0 0 0.5rem;\r\n  height: 3.4375rem;\r\n  background-color: #0095ae;\r\n}\r\n\r\n.preview_container {\r\n  height: 3.4375rem;\r\n  display: flex;\r\n  align-items: center;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  border-radius: 0 0.5rem 0.5rem 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";
 module.exports = styles;

package/lib/components/input/styles.css.qwik.mjs

@@ -1,4 +1,4 @@
-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  border-radius: 0.5rem;\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.125rem;\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.3s ease,\r\n    box-shadow 0.3s ease,\r\n    background 0.3s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n  background: white;\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  opacity: 0.4;\r\n}\r\n\r\n.input:focus {\r\n  outline: none;\r\n  opacity: 1;\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.5rem 0 0 0.5rem;\r\n  height: 3.4375rem;\r\n  background-color: #0095ae;\r\n}\r\n\r\n.preview_container {\r\n  height: 3.4375rem;\r\n  display: flex;\r\n  align-items: center;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  border-radius: 0 0.5rem 0.5rem 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";
+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  border-radius: 0.5rem;\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.125rem;\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.3s ease,\r\n    box-shadow 0.3s ease,\r\n    background 0.3s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n  background: white;\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  opacity: 0.4;\r\n  width: calc(100% - 0.9375rem * 2);\r\n}\r\n\r\n.input:focus {\r\n  outline: none;\r\n  opacity: 1;\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.5rem 0 0 0.5rem;\r\n  height: 3.4375rem;\r\n  background-color: #0095ae;\r\n}\r\n\r\n.preview_container {\r\n  height: 3.4375rem;\r\n  display: flex;\r\n  align-items: center;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  border-radius: 0 0.5rem 0.5rem 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";
 export {
   styles as default
 };

package/lib-types/components/input/input.d.ts

@@ -1,4 +1,4 @@
-import { QRL, Signal } from '@builder.io/qwik';
+import { Component, JSXOutput, QRL, Signal } from '@builder.io/qwik';
 import '@fontsource/roboto-condensed/500.css';
 export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'hidden' | 'checkbox' | 'radio' | 'file';
 export interface InputProps {
@@ -12,7 +12,8 @@ export interface InputProps {
     bgLight?: boolean;
     currentFile?: Signal<any>;
     selectedFile?: Signal<string>;
+    icon?: JSXOutput | Component<unknown>;
 }
 export declare const displayLocalImage: QRL<(file: File, imageUrl?: Signal<string>) => void>;
 export declare const uploadImage: QRL<(_event: Event, input: HTMLInputElement, currentFile?: Signal<any>, selectedFile?: Signal<string>, imageUrl?: Signal<string>) => Promise<void>>;
-export declare const Input: import("@builder.io/qwik").Component<InputProps>;
+export declare const Input: Component<InputProps>;

package/lib-types/stories/input.stories.d.ts

@@ -5,4 +5,5 @@ export default meta;
 type Story = StoryObj<InputProps>;
 export declare const Email: Story;
 export declare const InputLightBackground: Story;
+export declare const InputWithIcon: Story;
 export declare const FileUpload: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greghowe79/the-lib",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "Collection of fast components for Qwik",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",