@covalent/components 11.4.1 → 11.4.3-beta.1

package/textfield.js

@@ -1,3 +1,18 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./query-assigned-elements-8EurZY45.js"),r=require("./textfield-Byf2gP_G.js");var u=Object.getOwnPropertyDescriptor,d=(t,n,a,i)=>{for(var e=i>1?void 0:i?u(n,a):n,l=t.length-1,o;l>=0;l--)(o=t[l])&&(e=o(e)||e);return e};exports.CovalentTextField=class extends r.TextFieldBase{constructor(){super(...arguments),this.outlined=!0}};exports.CovalentTextField.styles=[r.styles,s.i`
-      ${s.r(r.styles$1)}
-    `];exports.CovalentTextField=d([s.e("cv-textfield")],exports.CovalentTextField);const v=exports.CovalentTextField;exports.default=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("./query-assigned-elements-8EurZY45.js"),c=require("./property-DYTC_2-m.js"),o=require("./textfield-lDKLLJ_h.js");require("./circular-progress.js");const h=require("./class-map-DTzB8z-1.js");var u=Object.defineProperty,x=Object.getOwnPropertyDescriptor,a=(n,e,i,r)=>{for(var t=r>1?void 0:r?x(e,i):e,s=n.length-1,d;s>=0;s--)(d=n[s])&&(t=(r?d(e,i,t):d(t))||t);return r&&t&&u(e,i,t),t};exports.CovalentTextField=class extends o.TextFieldBase{constructor(){super(...arguments),this.loading=!1,this.loaderDensity=-6,this.outlined=!0}render(){const e=this.charCounter&&this.maxLength!==-1,i=!!this.helper||!!this.validationMessage||e,r={"mdc-text-field--disabled":this.disabled,"mdc-text-field--no-label":!this.label,"mdc-text-field--filled":!this.outlined,"mdc-text-field--outlined":this.outlined,"mdc-text-field--with-leading-icon":this.icon,"mdc-text-field--with-trailing-icon":this.iconTrailing,"mdc-text-field--end-aligned":this.endAligned,"cv-text-field--loading":this.loading};return l.x`
+      <label class="mdc-text-field ${h.o(r)}">
+        ${this.renderRipple()}
+        ${this.outlined?this.renderOutline():this.renderLabel()}
+        ${this.renderLeadingIcon()} ${this.renderPrefix()}
+        ${this.renderInput(i)} ${this.renderSuffix()}
+        ${this.renderTrailingIcon()} ${this.renderLineRipple()}
+      </label>
+      ${this.renderHelperText(i,e)}
+    `}renderTrailingIcon(){return this.loading?l.x`<cv-circular-progress
+        class="text-field-loading"
+        indeterminate
+        progress="0"
+        density="${this.loaderDensity}"
+      >
+      </cv-circular-progress>`:this.iconTrailing?this.renderIcon(this.iconTrailing,!0):""}};exports.CovalentTextField.styles=[o.styles,l.i`
+      ${l.r(o.styles$1)}
+    `];a([c.n({type:Boolean,reflect:!0})],exports.CovalentTextField.prototype,"loading",2);a([c.n({type:Number})],exports.CovalentTextField.prototype,"loaderDensity",2);exports.CovalentTextField=a([l.e("cv-textfield")],exports.CovalentTextField);const p=exports.CovalentTextField;exports.default=p;

package/textfield.mjs

@@ -1,26 +1,70 @@
-import { r as i, i as u, e as v } from "./query-assigned-elements-D930kELM.mjs";
-import { s as c, a as p, T as d } from "./textfield-vzZ-4E3g.mjs";
-var f = Object.getOwnPropertyDescriptor, x = (r, l, n, a) => {
-  for (var e = a > 1 ? void 0 : a ? f(l, n) : l, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (e = o(e) || e);
-  return e;
+import { r as h, i as p, x as a, e as f } from "./query-assigned-elements-D930kELM.mjs";
+import { n as c } from "./property-DJzm_oB9.mjs";
+import { s as u, a as g, T as x } from "./textfield-umYQ5oiz.mjs";
+import "./circular-progress.mjs";
+import { o as m } from "./class-map-DPUylGZM.mjs";
+var $ = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (r, e, s, l) => {
+  for (var t = l > 1 ? void 0 : l ? v(e, s) : e, n = r.length - 1, d; n >= 0; n--)
+    (d = r[n]) && (t = (l ? d(e, s, t) : d(t)) || t);
+  return l && t && $(e, s, t), t;
 };
-let t = class extends d {
+let i = class extends x {
   constructor() {
-    super(...arguments), this.outlined = !0;
+    super(...arguments), this.loading = !1, this.loaderDensity = -6, this.outlined = !0;
+  }
+  /**
+   * This method is identical to the base implementation,
+   * with the only difference being the addition of a class to handle the loading state.
+   */
+  render() {
+    const r = this.charCounter && this.maxLength !== -1, e = !!this.helper || !!this.validationMessage || r, s = {
+      "mdc-text-field--disabled": this.disabled,
+      "mdc-text-field--no-label": !this.label,
+      "mdc-text-field--filled": !this.outlined,
+      "mdc-text-field--outlined": this.outlined,
+      "mdc-text-field--with-leading-icon": this.icon,
+      "mdc-text-field--with-trailing-icon": this.iconTrailing,
+      "mdc-text-field--end-aligned": this.endAligned,
+      "cv-text-field--loading": this.loading
+    };
+    return a`
+      <label class="mdc-text-field ${m(s)}">
+        ${this.renderRipple()}
+        ${this.outlined ? this.renderOutline() : this.renderLabel()}
+        ${this.renderLeadingIcon()} ${this.renderPrefix()}
+        ${this.renderInput(e)} ${this.renderSuffix()}
+        ${this.renderTrailingIcon()} ${this.renderLineRipple()}
+      </label>
+      ${this.renderHelperText(e, r)}
+    `;
+  }
+  renderTrailingIcon() {
+    return this.loading ? a`<cv-circular-progress
+        class="text-field-loading"
+        indeterminate
+        progress="0"
+        density="${this.loaderDensity}"
+      >
+      </cv-circular-progress>` : this.iconTrailing ? this.renderIcon(this.iconTrailing, !0) : "";
   }
 };
-t.styles = [
-  c,
-  u`
-      ${i(p)}
+i.styles = [
+  u,
+  p`
+      ${h(g)}
     `
 ];
-t = x([
-  v("cv-textfield")
-], t);
-const T = t;
+o([
+  c({ type: Boolean, reflect: !0 })
+], i.prototype, "loading", 2);
+o([
+  c({ type: Number })
+], i.prototype, "loaderDensity", 2);
+i = o([
+  f("cv-textfield")
+], i);
+const D = i;
 export {
-  t as CovalentTextField,
-  T as default
+  i as CovalentTextField,
+  D as default
 };