@luzmo/lucero 1.0.1-alpha.23 → 1.0.1-alpha.24

package/components/{text-field-BTEpwGFu.js → text-field-CQ8t9NU2.js}

@@ -15,23 +15,23 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { unsafeCSS as v, html as o, nothing as p } from "lit";
-import { state as m, property as l, query as y } from "lit/decorators.js";
+import { unsafeCSS as m, html as o, nothing as p } from "lit";
+import { state as c, property as s, query as v } from "lit/decorators.js";
 import { ifDefined as r } from "lit/directives/if-defined.js";
 import { live as f } from "lit/directives/live.js";
-import { luzmoIcon as c, luzmoAlert as g, luzmoCheck as $ } from "@luzmo/icons";
-import { F as x } from "./focusable-BjvsvVam.js";
-import { S as b } from "./sized-mixin-cJbo3PKR.js";
-import { M as S } from "./manage-help-text-C9sCHK3R.js";
-import { t as w } from "./text-field.module-C2KVUJcX.js";
-var _ = Object.defineProperty, E = Object.getOwnPropertyDescriptor, t = (h, e, s, a) => {
-  for (var n = a > 1 ? void 0 : a ? E(e, s) : e, u = h.length - 1, d; u >= 0; u--)
-    (d = h[u]) && (n = (a ? d(e, s, n) : d(n)) || n);
-  return a && n && _(e, s, n), n;
+import { luzmoIcon as y, luzmoAlert as g, luzmoCheck as $ } from "@luzmo/icons";
+import { F as b } from "./focusable-BjvsvVam.js";
+import { S as x } from "./sized-mixin-cJbo3PKR.js";
+import { M as w } from "./manage-help-text-C9sCHK3R.js";
+import { t as S } from "./text-field.module-C2KVUJcX.js";
+var E = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, t = (h, e, l, a) => {
+  for (var n = a > 1 ? void 0 : a ? _(e, l) : e, u = h.length - 1, d; u >= 0; u--)
+    (d = h[u]) && (n = (a ? d(e, l, n) : d(n)) || n);
+  return a && n && E(e, l, n), n;
 };
-const q = ["text", "url", "tel", "email", "password"];
-class i extends S(
-  b(x, {
+const K = ["text", "url", "tel", "email", "password"];
+class i extends w(
+  x(b, {
     noDefaultSize: !0
   })
 ) {
@@ -39,20 +39,20 @@ class i extends S(
     super(...arguments), this.allowedKeys = "", this.focused = !1, this.invalid = !1, this.label = "", this.placeholder = "", this._type = "text", this.grows = !1, this.maxlength = -1, this.minlength = -1, this.multiline = !1, this.readonly = !1, this.rows = -1, this.valid = !1, this._value = "", this.quiet = !1, this.required = !1;
   }
   static get styles() {
-    return [v(w)];
+    return [m(S)];
   }
   set type(e) {
-    const s = this._type;
-    this._type = e, this.requestUpdate("type", s);
+    const l = this._type;
+    this._type = e, this.requestUpdate("type", l);
   }
   get type() {
-    return q.find((e) => e === this._type) ?? "text";
+    return K.find((e) => e === this._type) ?? "text";
   }
   set value(e) {
     if (e === this.value)
       return;
-    const s = this._value;
-    this._value = e, this.requestUpdate("value", s);
+    const l = this._value;
+    this._value = e, this.requestUpdate("value", l);
   }
   get value() {
     return this._value;
@@ -70,10 +70,10 @@ class i extends S(
    * @param [selectionDirection="none"] A string indicating the direction in which the selection is considered to
    * have been performed.
    */
-  setSelectionRange(e, s, a = "none") {
+  setSelectionRange(e, l, a = "none") {
     this.inputElement.setSelectionRange(
       e,
-      s,
+      l,
       a
     );
   }
@@ -105,13 +105,27 @@ class i extends S(
   onBlur(e) {
     this.focused = !this.readonly && !1;
   }
+  handleKeyPress(e) {
+    this.dispatchEvent(
+      new KeyboardEvent("keypress", {
+        bubbles: !0,
+        composed: !0,
+        key: e.key,
+        code: e.code,
+        ctrlKey: e.ctrlKey,
+        shiftKey: e.shiftKey,
+        altKey: e.altKey,
+        metaKey: e.metaKey
+      })
+    );
+  }
   handleInputElementPointerdown() {
   }
   renderStateIcons() {
     return this.invalid ? o`
-        <div id="invalid" class="icon">${c(g)}</div>
+        <div id="invalid" class="icon">${y(g)}</div>
       ` : this.valid ? o`
-        <div id="valid" class="icon">${c($)}</div>
+        <div id="valid" class="icon">${y($)}</div>
       ` : p;
   }
   get displayValue() {
@@ -139,6 +153,7 @@ class i extends S(
         .value=${this.displayValue}
         @change=${this.handleChange}
         @input=${this.handleInput}
+        @keypress=${this.handleKeyPress}
         @focus=${this.onFocus}
         @blur=${this.onBlur}
         ?disabled=${this.disabled}
@@ -167,6 +182,7 @@ class i extends S(
         .value=${f(this.displayValue)}
         @change=${this.handleChange}
         @input=${this.handleInput}
+        @keypress=${this.handleKeyPress}
         @pointerdown=${this.handleInputElementPointerdown}
         @focus=${this.onFocus}
         @blur=${this.onBlur}
@@ -200,89 +216,89 @@ class i extends S(
   }
 }
 t([
-  m()
+  c()
 ], i.prototype, "appliedLabel", 2);
 t([
-  l({ attribute: "allowed-keys" })
+  s({ attribute: "allowed-keys" })
 ], i.prototype, "allowedKeys", 2);
 t([
-  l({ type: Boolean, reflect: !0 })
+  s({ type: Boolean, reflect: !0 })
 ], i.prototype, "focused", 2);
 t([
-  y(".input:not(#sizer)")
+  v(".input:not(#sizer)")
 ], i.prototype, "inputElement", 2);
 t([
-  l({ type: Boolean, reflect: !0 })
+  s({ type: Boolean, reflect: !0 })
 ], i.prototype, "invalid", 2);
 t([
-  l()
+  s()
 ], i.prototype, "label", 2);
 t([
-  l({ type: String, reflect: !0 })
+  s({ type: String, reflect: !0 })
 ], i.prototype, "name", 2);
 t([
-  l()
+  s()
 ], i.prototype, "placeholder", 2);
 t([
-  m()
+  c()
 ], i.prototype, "type", 1);
 t([
-  l({ attribute: "type", reflect: !0 })
+  s({ attribute: "type", reflect: !0 })
 ], i.prototype, "_type", 2);
 t([
-  l()
+  s()
 ], i.prototype, "pattern", 2);
 t([
-  l({ type: Boolean, reflect: !0 })
+  s({ type: Boolean, reflect: !0 })
 ], i.prototype, "grows", 2);
 t([
-  l({ type: Number })
+  s({ type: Number })
 ], i.prototype, "maxlength", 2);
 t([
-  l({ type: Number })
+  s({ type: Number })
 ], i.prototype, "minlength", 2);
 t([
-  l({ type: Boolean, reflect: !0 })
+  s({ type: Boolean, reflect: !0 })
 ], i.prototype, "multiline", 2);
 t([
-  l({ type: Boolean, reflect: !0 })
+  s({ type: Boolean, reflect: !0 })
 ], i.prototype, "readonly", 2);
 t([
-  l({ type: Number })
+  s({ type: Number })
 ], i.prototype, "rows", 2);
 t([
-  l({ type: Boolean, reflect: !0 })
+  s({ type: Boolean, reflect: !0 })
 ], i.prototype, "valid", 2);
 t([
-  l({ type: String })
+  s({ type: String })
 ], i.prototype, "value", 1);
 t([
-  l({ type: Boolean, reflect: !0 })
+  s({ type: Boolean, reflect: !0 })
 ], i.prototype, "quiet", 2);
 t([
-  l({ type: Boolean, reflect: !0 })
+  s({ type: Boolean, reflect: !0 })
 ], i.prototype, "required", 2);
 t([
-  l({ type: String, reflect: !0 })
+  s({ type: String, reflect: !0 })
 ], i.prototype, "autocomplete", 2);
-class B extends i {
+class q extends i {
   constructor() {
     super(...arguments), this._value = "";
   }
   set value(e) {
     if (e === this.value)
       return;
-    const s = this._value;
-    this._value = e, this.requestUpdate("value", s);
+    const l = this._value;
+    this._value = e, this.requestUpdate("value", l);
   }
   get value() {
     return this._value;
   }
 }
 t([
-  l({ type: String })
-], B.prototype, "value", 1);
+  s({ type: String })
+], q.prototype, "value", 1);
 export {
-  B as L,
+  q as L,
   i as a
 };