@ucalgary-design-system/text-input 1.0.6 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @ucalgary-design-system/text-input
 
+## 1.1.0
+
+### Minor Changes
+
+- d259b7c: Added type properties and testing
+
+### Patch Changes
+
+- a50dc9b: Updated dependencies
+
 ## 1.0.6
 
 ### Patch Changes

package/index.js

@@ -51,10 +51,10 @@ const M = (i) => new k(typeof i == "string" ? i : i + "", void 0, C), R = (i, t)
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: q, defineProperty: z, getOwnPropertyDescriptor: j, getOwnPropertyNames: D, getOwnPropertySymbols: I, getPrototypeOf: L } = Object, c = globalThis, P = c.trustedTypes, B = P ? P.emptyScript : "", v = c.reactiveElementPolyfillSupport, f = (i, t) => i, $ = { toAttribute(i, t) {
+const { is: q, defineProperty: z, getOwnPropertyDescriptor: j, getOwnPropertyNames: I, getOwnPropertySymbols: D, getPrototypeOf: L } = Object, p = globalThis, P = p.trustedTypes, N = P ? P.emptyScript : "", $ = p.reactiveElementPolyfillSupport, f = (i, t) => i, v = { toAttribute(i, t) {
   switch (t) {
     case Boolean:
-      i = i ? B : null;
+      i = i ? N : null;
       break;
     case Object:
     case Array:
@@ -79,8 +79,8 @@ const { is: q, defineProperty: z, getOwnPropertyDescriptor: j, getOwnPropertyNam
       }
   }
   return e;
-} }, _ = (i, t) => !q(i, t), x = { attribute: !0, type: String, converter: $, reflect: !1, useDefault: !1, hasChanged: _ };
-Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), c.litPropertyMetadata ?? (c.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+} }, _ = (i, t) => !q(i, t), x = { attribute: !0, type: String, converter: v, reflect: !1, useDefault: !1, hasChanged: _ };
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), p.litPropertyMetadata ?? (p.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 class u extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ?? (this.l = [])).push(t);
@@ -116,7 +116,7 @@ class u extends HTMLElement {
   static finalize() {
     if (this.hasOwnProperty(f("finalized"))) return;
     if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(f("properties"))) {
-      const e = this.properties, r = [...D(e), ...I(e)];
+      const e = this.properties, r = [...I(e), ...D(e)];
       for (const s of r) this.createProperty(s, e[s]);
     }
     const t = this[Symbol.metadata];
@@ -190,7 +190,7 @@ class u extends HTMLElement {
     var o;
     const r = this.constructor.elementProperties.get(t), s = this.constructor._$Eu(t, r);
     if (s !== void 0 && r.reflect === !0) {
-      const a = (((o = r.converter) == null ? void 0 : o.toAttribute) !== void 0 ? r.converter : $).toAttribute(e, r.type);
+      const a = (((o = r.converter) == null ? void 0 : o.toAttribute) !== void 0 ? r.converter : v).toAttribute(e, r.type);
       this._$Em = t, a == null ? this.removeAttribute(s) : this.setAttribute(s, a), this._$Em = null;
     }
   }
@@ -198,17 +198,17 @@ class u extends HTMLElement {
     var o, a;
     const r = this.constructor, s = r._$Eh.get(t);
     if (s !== void 0 && this._$Em !== s) {
-      const n = r.getPropertyOptions(s), d = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((o = n.converter) == null ? void 0 : o.fromAttribute) !== void 0 ? n.converter : $;
+      const n = r.getPropertyOptions(s), c = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((o = n.converter) == null ? void 0 : o.fromAttribute) !== void 0 ? n.converter : v;
       this._$Em = s;
-      const E = d.fromAttribute(e, n.type);
+      const E = c.fromAttribute(e, n.type);
       this[s] = E ?? ((a = this._$Ej) == null ? void 0 : a.get(s)) ?? E, this._$Em = null;
     }
   }
-  requestUpdate(t, e, r) {
-    var s;
+  requestUpdate(t, e, r, s = !1, o) {
+    var a;
     if (t !== void 0) {
-      const o = this.constructor, a = this[t];
-      if (r ?? (r = o.getPropertyOptions(t)), !((r.hasChanged ?? _)(a, e) || r.useDefault && r.reflect && a === ((s = this._$Ej) == null ? void 0 : s.get(t)) && !this.hasAttribute(o._$Eu(t, r)))) return;
+      const n = this.constructor;
+      if (s === !1 && (o = this[t]), r ?? (r = n.getPropertyOptions(t)), !((r.hasChanged ?? _)(o, e) || r.useDefault && r.reflect && o === ((a = this._$Ej) == null ? void 0 : a.get(t)) && !this.hasAttribute(n._$Eu(t, r)))) return;
       this.C(t, e, r);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$EP());
@@ -239,8 +239,8 @@ class u extends HTMLElement {
       }
       const s = this.constructor.elementProperties;
       if (s.size > 0) for (const [o, a] of s) {
-        const { wrapped: n } = a, d = this[o];
-        n !== !0 || this._$AL.has(o) || d === void 0 || this.C(o, void 0, a, d);
+        const { wrapped: n } = a, c = this[o];
+        n !== !0 || this._$AL.has(o) || c === void 0 || this.C(o, void 0, a, c);
       }
     }
     let t = !1;
@@ -284,20 +284,20 @@ class u extends HTMLElement {
   firstUpdated(t) {
   }
 }
-u.elementStyles = [], u.shadowRootOptions = { mode: "open" }, u[f("elementProperties")] = /* @__PURE__ */ new Map(), u[f("finalized")] = /* @__PURE__ */ new Map(), v == null || v({ ReactiveElement: u }), (c.reactiveElementVersions ?? (c.reactiveElementVersions = [])).push("2.1.1");
+u.elementStyles = [], u.shadowRootOptions = { mode: "open" }, u[f("elementProperties")] = /* @__PURE__ */ new Map(), u[f("finalized")] = /* @__PURE__ */ new Map(), $ == null || $({ ReactiveElement: u }), (p.reactiveElementVersions ?? (p.reactiveElementVersions = [])).push("2.1.2");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const N = { attribute: !0, type: String, converter: $, reflect: !1, hasChanged: _ }, V = (i = N, t, e) => {
+const V = { attribute: !0, type: String, converter: v, reflect: !1, hasChanged: _ }, B = (i = V, t, e) => {
   const { kind: r, metadata: s } = e;
   let o = globalThis.litPropertyMetadata.get(s);
   if (o === void 0 && globalThis.litPropertyMetadata.set(s, o = /* @__PURE__ */ new Map()), r === "setter" && ((i = Object.create(i)).wrapped = !0), o.set(e.name, i), r === "accessor") {
     const { name: a } = e;
     return { set(n) {
-      const d = t.get.call(this);
-      t.set.call(this, n), this.requestUpdate(a, d, i);
+      const c = t.get.call(this);
+      t.set.call(this, n), this.requestUpdate(a, c, i, !0, n);
     }, init(n) {
       return n !== void 0 && this.C(a, void 0, i, n), n;
     } };
@@ -305,27 +305,28 @@ const N = { attribute: !0, type: String, converter: $, reflect: !1, hasChanged:
   if (r === "setter") {
     const { name: a } = e;
     return function(n) {
-      const d = this[a];
-      t.call(this, n), this.requestUpdate(a, d, i);
+      const c = this[a];
+      t.call(this, n), this.requestUpdate(a, c, i, !0, n);
     };
   }
   throw Error("Unsupported decorator location: " + r);
 };
-function p(i) {
-  return (t, e) => typeof e == "object" ? V(i, t, e) : ((r, s, o) => {
+function d(i) {
+  return (t, e) => typeof e == "object" ? B(i, t, e) : ((r, s, o) => {
     const a = s.hasOwnProperty(o);
     return s.constructor.createProperty(o, r), a ? Object.getOwnPropertyDescriptor(s, o) : void 0;
   })(i, t, e);
 }
-const J = ":host{display:block}.form-text{display:flex;flex-direction:column;gap:var(--ucds-form-component-intra-spacing);align-items:start;max-width:var(--ucds-form-element-maxwidth)}.form-text input{display:block;height:var(--ucds-form-element-height);width:var(--ucds-form-element-width);padding-left:var(--ucds-form-element-horizontal-padding);padding-right:var(--ucds-form-element-horizontal-padding);line-height:16px;background-color:var(--ucds-color-forms-input-background-rest);border:var(--ucds-form-element-border-width) solid var(--ucds-color-forms-input-border-rest);border-radius:var(--ucds-form-element-border-radius);transition:border-color .5s ease;text-align:left}.form-text input::-moz-placeholder{font-style:italic;color:var(--ucds-color-text-secondary)}.form-text input::placeholder{font-style:italic;color:var(--ucds-color-text-secondary)}.form-text input[error]{background-color:var(--ucds-color-feedback-error-background-light);border-color:var(--ucds-color-feedback-error-light)}.form-text input:hover{border-color:var(--ucds-color-forms-input-border-hover)}.form-text input:focus-visible{outline:var(--ucds-color-action-focus) 2px solid;outline-offset:2px}.form-text.disabled input{color:var(--ucds-color-text-disabled);background-color:transparent;border-color:var(--ucds-color-forms-input-border-disabled)}.form-text.disabled input::-moz-placeholder{color:var(--ucds-color-text-disabled)}.form-text.disabled input::placeholder{color:var(--ucds-color-text-disabled)}";
-var K = Object.defineProperty, W = Object.getOwnPropertyDescriptor, h = (i, t, e, r) => {
-  for (var s = r > 1 ? void 0 : r ? W(t, e) : t, o = i.length - 1, a; o >= 0; o--)
+const F = ":host{display:block}.form-text{display:flex;flex-direction:column;gap:var(--ucds-form-component-intra-spacing);align-items:start;max-width:var(--ucds-form-element-maxwidth)}.form-text input{display:block;height:var(--ucds-form-element-height);width:var(--ucds-form-element-width);padding-left:var(--ucds-form-element-horizontal-padding);padding-right:var(--ucds-form-element-horizontal-padding);line-height:16px;background-color:var(--ucds-color-forms-input-background-rest);border:var(--ucds-form-element-border-width) solid var(--ucds-color-forms-input-border-rest);border-radius:var(--ucds-form-element-border-radius);transition:border-color .5s ease;text-align:left}.form-text input::-moz-placeholder{font-style:italic;color:var(--ucds-color-text-secondary)}.form-text input::placeholder{font-style:italic;color:var(--ucds-color-text-secondary)}.form-text input[error]{background-color:var(--ucds-color-feedback-error-background-light);border-color:var(--ucds-color-feedback-error-light)}.form-text input:hover{border-color:var(--ucds-color-forms-input-border-hover)}.form-text input:focus-visible{outline:var(--ucds-color-action-focus) 2px solid;outline-offset:2px}.form-text.disabled input{color:var(--ucds-color-text-disabled);background-color:transparent;border-color:var(--ucds-color-forms-input-border-disabled)}.form-text.disabled input::-moz-placeholder{color:var(--ucds-color-text-disabled)}.form-text.disabled input::placeholder{color:var(--ucds-color-text-disabled)}";
+var J = Object.defineProperty, K = Object.getOwnPropertyDescriptor, h = (i, t, e, r) => {
+  for (var s = r > 1 ? void 0 : r ? K(t, e) : t, o = i.length - 1, a; o >= 0; o--)
     (a = i[o]) && (s = (r ? a(t, e, s) : a(s)) || s);
-  return r && s && K(t, e, s), s;
+  return r && s && J(t, e, s), s;
 };
+const W = ["text", "email", "password", "tel"];
 let l = class extends U {
   constructor() {
-    super(), this.errorText = "", this.helpText = "", this.inputId = "", this.label = "", this._value = "", this.disabled = !1, this.error = !1, this.required = !1, this.internals = this.attachInternals();
+    super(), this.errorText = "", this.helpText = "", this.inputId = "", this.label = "", this.type = "text", this._value = "", this.disabled = !1, this.error = !1, this.required = !1, this.internals = this.attachInternals();
   }
   get value() {
     return this._value;
@@ -334,6 +335,9 @@ let l = class extends U {
     const t = this._value;
     i !== t && (this._value = i, this.requestUpdate("value", t), this.internals.setFormValue(this._value));
   }
+  willUpdate(i) {
+    i.has("type") && (!this.type || !W.includes(this.type)) && (console.warn(`Missing or Invalid input type provided. ${this.type} is not a valid input type. Falling back to 'text'.`), this.type = "text");
+  }
   updated(i) {
     i.has("label") && !this.label && console.error("Property 'label' is required and was not set.");
   }
@@ -358,7 +362,7 @@ let l = class extends U {
       <div class="form-text ${this.disabled ? "disabled" : ""} ${this.required ? "required" : ""}">
         ${this.label ? y`<form-label for="${this.inputId}" text="${this.label}" ?required="${this.required}" ?disabled="${this.disabled}"></form-label>` : m}
         <input
-          type="text" 
+          type="${this.type}"
           id="${this.inputId}"
           ?disabled=${this.disabled}
           ?required=${this.required}
@@ -374,32 +378,35 @@ let l = class extends U {
 };
 l.styles = [
   U.styles,
-  A(J)
+  A(F)
 ];
 l.formAssociated = !0;
 h([
-  p({ type: String, attribute: "error-text" })
+  d({ type: String, attribute: "error-text" })
 ], l.prototype, "errorText", 2);
 h([
-  p({ type: String, attribute: "help-text" })
+  d({ type: String, attribute: "help-text" })
 ], l.prototype, "helpText", 2);
 h([
-  p({ type: String, attribute: "input-id" })
+  d({ type: String, attribute: "input-id" })
 ], l.prototype, "inputId", 2);
 h([
-  p({ type: String })
+  d({ type: String })
 ], l.prototype, "label", 2);
 h([
-  p({ type: String, reflect: !0 })
+  d()
+], l.prototype, "type", 2);
+h([
+  d({ type: String, reflect: !0 })
 ], l.prototype, "placeholder", 2);
 h([
-  p({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], l.prototype, "disabled", 2);
 h([
-  p({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], l.prototype, "error", 2);
 h([
-  p({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], l.prototype, "required", 2);
 l = h([
   T("ucds-text-input")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucalgary-design-system/text-input",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "A web component for TextInput",
   "publishConfig": {
     "access": "public"
@@ -19,5 +19,8 @@
     "@ucalgary-design-system/helper-components": "^1.0.2",
     "@ucalgary-design-system/tokens": "^1.0.4",
     "lit": "^3.2.1"
+  },
+  "dependencies": {
+    "lerna": "^9.0.3"
   }
 }