@greghowe79/the-lib 2.14.3 → 2.14.5

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 (5) hide show
  1. package/lib/components/text_area/styles.css.qwik.cjs +1 -1
  2. package/lib/components/text_area/styles.css.qwik.mjs +1 -1
  3. package/lib/components/text_area/text_area.qwik.cjs +1 -1
  4. package/lib/components/text_area/text_area.qwik.mjs +2 -2
  5. package/package.json +1 -1
package/lib/components/text_area/styles.css.qwik.cjs CHANGED
@@ -1,3 +1,3 @@
1
1
  "use strict";
2
- const styles = "/* .text-area-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.25rem;\r\n width: 100%;\r\n}\r\n\r\n.text-area-container label {\r\n font-size: 0.8125rem;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n padding-left: 0.25rem;\r\n}\r\n\r\n.text-area {\r\n border-radius: 0.75rem;\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: #333;\r\n background: rgba(0, 0, 0, 0.04);\r\n padding: 0.75rem 0.9375rem;\r\n resize: vertical;\r\n min-height: 3.29412rem;\r\n border: none;\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.text-area::placeholder {\r\n color: #6e6e73;\r\n}\r\n\r\n.text-area:focus {\r\n outline: none;\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n background: white;\r\n}\r\n.text-area.bg_light {\r\n background: white;\r\n box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.text-area.bg_light:focus {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\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\n.counter {\r\n text-align: right;\r\n font-size: 12px;\r\n color: #888;\r\n margin-top: 4px;\r\n}\r\n\r\n.counter-limit {\r\n color: #e53935;\r\n} */\r\n\r\n.text-area-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.25rem;\r\n width: 100%;\r\n}\r\n\r\n.text-area-container label {\r\n font-size: 0.8125rem;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n padding-left: 0.25rem;\r\n}\r\n\r\n.text-area {\r\n border-radius: 0.75rem;\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: #333;\r\n background: rgba(0, 0, 0, 0.04);\r\n padding: 0.75rem 1.5rem 0.75rem 0.9375rem;\r\n resize: vertical;\r\n min-height: 3.29412rem;\r\n border: none;\r\n outline: 1px solid transparent;\r\n outline-offset: -1px;\r\n transition:\r\n color 0.15s ease,\r\n outline-color 0.15s ease,\r\n background 0.15s ease;\r\n}\r\n\r\n.text-area::placeholder {\r\n color: #6e6e73;\r\n}\r\n\r\n.text-area:focus {\r\n outline: 2px solid #007aff;\r\n outline-offset: -2px;\r\n background: white;\r\n}\r\n\r\n.text-area.bg_light {\r\n background: white;\r\n outline: 1px solid #86868b;\r\n outline-offset: -1px;\r\n}\r\n\r\n.text-area.bg_light:focus {\r\n outline: 2px solid #007aff;\r\n outline-offset: -2px;\r\n}\r\n\r\n.text-area::-webkit-scrollbar {\r\n width: 6px;\r\n}\r\n\r\n.text-area::-webkit-scrollbar-track {\r\n background: transparent;\r\n margin: 0.75rem 0;\r\n}\r\n\r\n.text-area::-webkit-scrollbar-thumb {\r\n background: #3f3f46;\r\n border-radius: 3px;\r\n}\r\n\r\n.text-area::-webkit-scrollbar-button {\r\n display: none;\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\n.counter {\r\n text-align: right;\r\n font-size: 12px;\r\n color: #636b76;\r\n margin-top: 4px;\r\n}\r\n\r\n.counter-limit {\r\n color: #e53935;\r\n}\r\n";
2
+ const styles = "/* .text-area-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.25rem;\r\n width: 100%;\r\n}\r\n\r\n.text-area-container label {\r\n font-size: 0.8125rem;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n padding-left: 0.25rem;\r\n}\r\n\r\n.text-area {\r\n border-radius: 0.75rem;\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: #333;\r\n background: rgba(0, 0, 0, 0.04);\r\n padding: 0.75rem 0.9375rem;\r\n resize: vertical;\r\n min-height: 3.29412rem;\r\n border: none;\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.text-area::placeholder {\r\n color: #6e6e73;\r\n}\r\n\r\n.text-area:focus {\r\n outline: none;\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n background: white;\r\n}\r\n.text-area.bg_light {\r\n background: white;\r\n box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.text-area.bg_light:focus {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\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\n.counter {\r\n text-align: right;\r\n font-size: 12px;\r\n color: #888;\r\n margin-top: 4px;\r\n}\r\n\r\n.counter-limit {\r\n color: #e53935;\r\n} */\r\n\r\n.text-area-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.25rem;\r\n width: 100%;\r\n}\r\n\r\n.text-area-container label {\r\n font-size: 0.8125rem;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n padding-left: 0.25rem;\r\n}\r\n\r\n.text-area {\r\n border-radius: 0.75rem;\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: #333;\r\n background: rgba(0, 0, 0, 0.04);\r\n padding: 0.75rem 1.5rem 0.75rem 0.9375rem;\r\n resize: vertical;\r\n min-height: 3.29412rem;\r\n border: none;\r\n scrollbar-width: thin;\r\n scrollbar-color: #3f3f46 transparent;\r\n outline: 1px solid transparent;\r\n outline-offset: -1px;\r\n transition:\r\n color 0.15s ease,\r\n outline-color 0.15s ease,\r\n background 0.15s ease;\r\n}\r\n\r\n.text-area::placeholder {\r\n color: #6e6e73;\r\n}\r\n\r\n.text-area:focus {\r\n outline: 2px solid #007aff;\r\n outline-offset: -2px;\r\n background: white;\r\n}\r\n\r\n.text-area.bg_light {\r\n background: white;\r\n outline: 1px solid #86868b;\r\n outline-offset: -1px;\r\n}\r\n\r\n.text-area.bg_light:focus {\r\n outline: 2px solid #007aff;\r\n outline-offset: -2px;\r\n}\r\n\r\n.text-area::-webkit-scrollbar {\r\n width: 6px;\r\n}\r\n\r\n.text-area::-webkit-scrollbar-track {\r\n background: transparent;\r\n margin: 0.75rem 0;\r\n}\r\n\r\n.text-area::-webkit-scrollbar-thumb {\r\n background: #3f3f46;\r\n border-radius: 3px;\r\n}\r\n\r\n.text-area::-webkit-scrollbar-button {\r\n display: none;\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\n.counter {\r\n text-align: right;\r\n font-size: 12px;\r\n color: #636b76;\r\n margin-top: 4px;\r\n}\r\n\r\n.counter-limit {\r\n color: #e53935;\r\n}\r\n";
3
3
  module.exports = styles;
package/lib/components/text_area/styles.css.qwik.mjs CHANGED
@@ -1,4 +1,4 @@
1
- const styles = "/* .text-area-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.25rem;\r\n width: 100%;\r\n}\r\n\r\n.text-area-container label {\r\n font-size: 0.8125rem;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n padding-left: 0.25rem;\r\n}\r\n\r\n.text-area {\r\n border-radius: 0.75rem;\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: #333;\r\n background: rgba(0, 0, 0, 0.04);\r\n padding: 0.75rem 0.9375rem;\r\n resize: vertical;\r\n min-height: 3.29412rem;\r\n border: none;\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.text-area::placeholder {\r\n color: #6e6e73;\r\n}\r\n\r\n.text-area:focus {\r\n outline: none;\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n background: white;\r\n}\r\n.text-area.bg_light {\r\n background: white;\r\n box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.text-area.bg_light:focus {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\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\n.counter {\r\n text-align: right;\r\n font-size: 12px;\r\n color: #888;\r\n margin-top: 4px;\r\n}\r\n\r\n.counter-limit {\r\n color: #e53935;\r\n} */\r\n\r\n.text-area-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.25rem;\r\n width: 100%;\r\n}\r\n\r\n.text-area-container label {\r\n font-size: 0.8125rem;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n padding-left: 0.25rem;\r\n}\r\n\r\n.text-area {\r\n border-radius: 0.75rem;\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: #333;\r\n background: rgba(0, 0, 0, 0.04);\r\n padding: 0.75rem 1.5rem 0.75rem 0.9375rem;\r\n resize: vertical;\r\n min-height: 3.29412rem;\r\n border: none;\r\n outline: 1px solid transparent;\r\n outline-offset: -1px;\r\n transition:\r\n color 0.15s ease,\r\n outline-color 0.15s ease,\r\n background 0.15s ease;\r\n}\r\n\r\n.text-area::placeholder {\r\n color: #6e6e73;\r\n}\r\n\r\n.text-area:focus {\r\n outline: 2px solid #007aff;\r\n outline-offset: -2px;\r\n background: white;\r\n}\r\n\r\n.text-area.bg_light {\r\n background: white;\r\n outline: 1px solid #86868b;\r\n outline-offset: -1px;\r\n}\r\n\r\n.text-area.bg_light:focus {\r\n outline: 2px solid #007aff;\r\n outline-offset: -2px;\r\n}\r\n\r\n.text-area::-webkit-scrollbar {\r\n width: 6px;\r\n}\r\n\r\n.text-area::-webkit-scrollbar-track {\r\n background: transparent;\r\n margin: 0.75rem 0;\r\n}\r\n\r\n.text-area::-webkit-scrollbar-thumb {\r\n background: #3f3f46;\r\n border-radius: 3px;\r\n}\r\n\r\n.text-area::-webkit-scrollbar-button {\r\n display: none;\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\n.counter {\r\n text-align: right;\r\n font-size: 12px;\r\n color: #636b76;\r\n margin-top: 4px;\r\n}\r\n\r\n.counter-limit {\r\n color: #e53935;\r\n}\r\n";
1
+ const styles = "/* .text-area-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.25rem;\r\n width: 100%;\r\n}\r\n\r\n.text-area-container label {\r\n font-size: 0.8125rem;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n padding-left: 0.25rem;\r\n}\r\n\r\n.text-area {\r\n border-radius: 0.75rem;\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: #333;\r\n background: rgba(0, 0, 0, 0.04);\r\n padding: 0.75rem 0.9375rem;\r\n resize: vertical;\r\n min-height: 3.29412rem;\r\n border: none;\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.text-area::placeholder {\r\n color: #6e6e73;\r\n}\r\n\r\n.text-area:focus {\r\n outline: none;\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n background: white;\r\n}\r\n.text-area.bg_light {\r\n background: white;\r\n box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.text-area.bg_light:focus {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\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\n.counter {\r\n text-align: right;\r\n font-size: 12px;\r\n color: #888;\r\n margin-top: 4px;\r\n}\r\n\r\n.counter-limit {\r\n color: #e53935;\r\n} */\r\n\r\n.text-area-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.25rem;\r\n width: 100%;\r\n}\r\n\r\n.text-area-container label {\r\n font-size: 0.8125rem;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n padding-left: 0.25rem;\r\n}\r\n\r\n.text-area {\r\n border-radius: 0.75rem;\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: #333;\r\n background: rgba(0, 0, 0, 0.04);\r\n padding: 0.75rem 1.5rem 0.75rem 0.9375rem;\r\n resize: vertical;\r\n min-height: 3.29412rem;\r\n border: none;\r\n scrollbar-width: thin;\r\n scrollbar-color: #3f3f46 transparent;\r\n outline: 1px solid transparent;\r\n outline-offset: -1px;\r\n transition:\r\n color 0.15s ease,\r\n outline-color 0.15s ease,\r\n background 0.15s ease;\r\n}\r\n\r\n.text-area::placeholder {\r\n color: #6e6e73;\r\n}\r\n\r\n.text-area:focus {\r\n outline: 2px solid #007aff;\r\n outline-offset: -2px;\r\n background: white;\r\n}\r\n\r\n.text-area.bg_light {\r\n background: white;\r\n outline: 1px solid #86868b;\r\n outline-offset: -1px;\r\n}\r\n\r\n.text-area.bg_light:focus {\r\n outline: 2px solid #007aff;\r\n outline-offset: -2px;\r\n}\r\n\r\n.text-area::-webkit-scrollbar {\r\n width: 6px;\r\n}\r\n\r\n.text-area::-webkit-scrollbar-track {\r\n background: transparent;\r\n margin: 0.75rem 0;\r\n}\r\n\r\n.text-area::-webkit-scrollbar-thumb {\r\n background: #3f3f46;\r\n border-radius: 3px;\r\n}\r\n\r\n.text-area::-webkit-scrollbar-button {\r\n display: none;\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\n.counter {\r\n text-align: right;\r\n font-size: 12px;\r\n color: #636b76;\r\n margin-top: 4px;\r\n}\r\n\r\n.counter-limit {\r\n color: #e53935;\r\n}\r\n";
2
2
  export {
3
3
  styles as default
4
4
  };
package/lib/components/text_area/text_area.qwik.cjs CHANGED
@@ -4,7 +4,7 @@ const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
4
4
  const qwik = require("@builder.io/qwik");
5
5
  const styles = require("./styles.css.qwik.cjs");
6
6
  const TextArea = qwik.component$(({ id, title, content, required = false, placeholder, bgLight, maxLength, showCounter = false, rows = 5 }) => {
7
- qwik.useStylesScoped$(styles);
7
+ qwik.useStyles$(styles);
8
8
  const currentLength = content?.value?.length ?? 0;
9
9
  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
10
10
  class: "text-area-container",
package/lib/components/text_area/text_area.qwik.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
2
- import { component$, useStylesScoped$ } from "@builder.io/qwik";
2
+ import { component$, useStyles$ } from "@builder.io/qwik";
3
3
  import styles from "./styles.css.qwik.mjs";
4
4
  const TextArea = component$(({ id, title, content, required = false, placeholder, bgLight, maxLength, showCounter = false, rows = 5 }) => {
5
- useStylesScoped$(styles);
5
+ useStyles$(styles);
6
6
  const currentLength = content?.value?.length ?? 0;
7
7
  return /* @__PURE__ */ jsxs("div", {
8
8
  class: "text-area-container",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@greghowe79/the-lib",
3
- "version": "2.14.3",
3
+ "version": "2.14.5",
4
4
  "description": "Collection of fast components for Qwik",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",