@universal-material/web 3.0.92 → 3.0.93

package/text-field/text-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../src/text-field/text-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAMxD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAE/E,qBACa,WAAY,SAAQ,eAAe;;IAE9C,OAAgB,MAAM,EAAE,cAAc,CAGpC;IAIF,IACI,KAAK,IAGQ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAItB;IAEW,IAAI,EAAE,MAAM,CAAU;IACI,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,YAAY,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,CAAC;IACvC,cAAc,EAAG,MAAM,CAAC;IAE5C,KAAK,EAAG,gBAAgB,CAAC;IAEhC,KAAK;cAIK,aAAa,IAAI,kBAAkB;CA8BvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
+{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../src/text-field/text-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAMxD,OAAO,EAAE,wBAAwB,EAAE,MAAM,8DAA8D,CAAC;AAGxG,qBACa,WAAY,SAAQ,wBAAwB;IACvD,OAAgB,MAAM,EAAE,cAAc,CAAoC;IAE9D,IAAI,EAAE,MAAM,CAAU;IACM,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,cAAc,EAAG,MAAM,CAAC;IAE9C,KAAK,EAAG,gBAAgB,CAAC;cAEtB,aAAa,IAAI,kBAAkB;CA2BvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/text-field/text-field.js

@@ -8,29 +8,14 @@ import { html, nothing } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
 import { styles } from './text-field.styles.js';
+import { UmNativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
 import { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';
-let UmTextField = class UmTextField extends UmTextFieldBase {
+let UmTextField = class UmTextField extends UmNativeTextFieldWrapper {
     constructor() {
         super(...arguments);
-        this.#value = '';
         this.type = 'text';
     }
-    static { this.styles = [
-        UmTextFieldBase.styles,
-        styles
-    ]; }
-    #value;
-    get value() {
-        return this.#value;
-    }
-    set value(value) {
-        this.#value = value;
-        this.empty = !value;
-        this.elementInternals.setFormValue(value);
-    }
-    focus() {
-        this.input.focus();
-    }
+    static { this.styles = [UmTextFieldBase.styles, styles]; }
     renderControl() {
         return html `
       <slot class="prefix" name="prefix">
@@ -44,25 +29,21 @@ let UmTextField = class UmTextField extends UmTextFieldBase {
           aria-labelledby="label"
           aria-describedBy="supporting-text"
           ?disabled=${this.disabled}
-          placeholder=${this.placeholder || nothing}
           spellcheck=${this.spellcheck}
           autocomplete=${this.autocomplete}
           autocapitalize=${this.autocapitalize}
           role=${this.role}
-          .value=${live(this.#value)}
-          @input=${this.#handleInput} />
+          maxlength=${this.maxlength ?? nothing}
+          .placeholder=${this.placeholder}
+          .value=${live(this._value)}
+          @input=${this._handleInput} />
       </div>
       <slot class="suffix" name="suffix">
         <span>${this.suffixText}</span>
-      </slot>`;
-    }
-    #handleInput() {
-        this.value = this.input.value;
+      </slot>
+    `;
     }
 };
-__decorate([
-    property()
-], UmTextField.prototype, "value", null);
 __decorate([
     property()
 ], UmTextField.prototype, "type", void 0);
@@ -72,9 +53,6 @@ __decorate([
 __decorate([
     property({ attribute: 'suffix-text' })
 ], UmTextField.prototype, "suffixText", void 0);
-__decorate([
-    property({ reflect: true })
-], UmTextField.prototype, "autocomplete", void 0);
 __decorate([
     property({ reflect: true })
 ], UmTextField.prototype, "autocapitalize", void 0);

package/text-field/text-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../src/text-field/text-field.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,IAAI,EAAsB,OAAO,EAAE,MAAM,KAAK,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAGxE,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,eAAe;IAAzC;;QAOL,WAAM,GAAW,EAAE,CAAC;QAYR,SAAI,GAAW,MAAM,CAAC;IA0CpC,CAAC;aA3DiB,WAAM,GAAmB;QACvC,eAAe,CAAC,MAAM;QACtB,MAAM;KACP,AAHqB,CAGpB;IAEF,MAAM,CAAc;IAGpB,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IACD,IAAI,KAAK,CAAC,KAAa;QACrB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC;QACpB,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAUQ,KAAK;QACZ,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC;IAEkB,aAAa;QAE9B,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,UAAU;;;;iBAId,IAAI,CAAC,IAAI;;eAEX,IAAI,CAAC,EAAE,IAAI,OAAO;;;sBAGX,IAAI,CAAC,QAAQ;wBACX,IAAI,CAAC,WAAW,IAAI,OAAO;uBAC5B,IAAI,CAAC,UAAU;yBACb,IAAI,CAAC,YAAY;2BACf,IAAI,CAAC,cAAc;iBAC7B,IAAI,CAAC,IAAI;mBACP,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;mBACjB,IAAI,CAAC,YAAY;;;gBAGpB,IAAI,CAAC,UAAU;cACjB,CAAC;IACb,CAAC;IAED,YAAY;QACV,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAChC,CAAC;;AAlDD;IADC,QAAQ,EAAE;wCAGV;AAOW;IAAX,QAAQ,EAAE;yCAAuB;AACI;IAArC,QAAQ,CAAC,EAAC,SAAS,EAAE,aAAa,EAAC,CAAC;+CAAgC;AAC/B;IAArC,QAAQ,CAAC,EAAC,SAAS,EAAE,aAAa,EAAC,CAAC;+CAAgC;AAC1C;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;iDAAiD;AACvC;IAAnC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;mDAAkC;AAE5C;IAAf,KAAK,CAAC,OAAO,CAAC;0CAA0B;AAzB9B,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA6DvB","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\nimport { html, HTMLTemplateResult, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { styles } from './text-field.styles.js';\n\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';\n\n@customElement('u-text-field')\nexport class UmTextField extends UmTextFieldBase {\n\n  static override styles: CSSResultGroup = [\n    UmTextFieldBase.styles,\n    styles\n  ];\n\n  #value: string = '';\n\n  @property()\n  get value() {\n    return this.#value;\n  }\n  set value(value: string) {\n    this.#value = value;\n    this.empty = !value;\n    this.elementInternals.setFormValue(value);\n  }\n\n  @property() type: string = 'text';\n  @property({attribute: 'prefix-text'}) prefixText: string | undefined;\n  @property({attribute: 'suffix-text'}) suffixText: string | undefined;\n  @property({reflect: true}) autocomplete: 'on' | 'off' | string | undefined;\n  @property({reflect: true}) override autocapitalize!: string;\n\n  @query('input') input!: HTMLInputElement;\n\n  override focus() {\n    this.input.focus();\n  }\n\n  protected override renderControl(): HTMLTemplateResult {\n\n    return html`\n      <slot class=\"prefix\" name=\"prefix\">\n        <span>${this.prefixText}</span>\n      </slot>\n      <div class=\"input\">\n        <input\n          type=${this.type}\n          part=\"input\"\n          id=${this.id || nothing}\n          aria-labelledby=\"label\"\n          aria-describedBy=\"supporting-text\"\n          ?disabled=${this.disabled}\n          placeholder=${this.placeholder || nothing}\n          spellcheck=${this.spellcheck}\n          autocomplete=${this.autocomplete}\n          autocapitalize=${this.autocapitalize}\n          role=${this.role}\n          .value=${live(this.#value)}\n          @input=${this.#handleInput} />\n      </div>\n      <slot class=\"suffix\" name=\"suffix\">\n        <span>${this.suffixText}</span>\n      </slot>`;\n  }\n\n  #handleInput() {\n    this.value = this.input.value;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-text-field': UmTextField;\n  }\n}\n"]}
+{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../src/text-field/text-field.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,IAAI,EAAsB,OAAO,EAAE,MAAM,KAAK,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,EAAE,wBAAwB,EAAE,MAAM,8DAA8D,CAAC;AACxG,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAGxE,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,wBAAwB;IAAlD;;QAGO,SAAI,GAAW,MAAM,CAAC;IAkCpC,CAAC;aApCiB,WAAM,GAAmB,CAAC,eAAe,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnD,CAAoD;IASvD,aAAa;QAC9B,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,UAAU;;;;iBAId,IAAI,CAAC,IAAI;;eAEX,IAAI,CAAC,EAAE,IAAI,OAAO;;;sBAGX,IAAI,CAAC,QAAQ;uBACZ,IAAI,CAAC,UAAU;yBACb,IAAI,CAAC,YAAY;2BACf,IAAI,CAAC,cAAc;iBAC7B,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,SAAS,IAAI,OAAO;yBACtB,IAAI,CAAC,WAAW;mBACtB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;mBACjB,IAAI,CAAC,YAAY;;;gBAGpB,IAAI,CAAC,UAAU;;KAE1B,CAAC;IACJ,CAAC;;AAjCW;IAAX,QAAQ,EAAE;yCAAuB;AACM;IAAvC,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAAgC;AAC/B;IAAvC,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAAgC;AACjC;IAArC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAkC;AAE9C;IAAf,KAAK,CAAC,OAAO,CAAC;0CAA0B;AAR9B,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAqCvB","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\nimport { html, HTMLTemplateResult, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { styles } from './text-field.styles.js';\n\nimport { UmNativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';\n\n@customElement('u-text-field')\nexport class UmTextField extends UmNativeTextFieldWrapper {\n  static override styles: CSSResultGroup = [UmTextFieldBase.styles, styles];\n\n  @property() type: string = 'text';\n  @property({ attribute: 'prefix-text' }) prefixText: string | undefined;\n  @property({ attribute: 'suffix-text' }) suffixText: string | undefined;\n  @property({ reflect: true }) override autocapitalize!: string;\n\n  @query('input') input!: HTMLInputElement;\n\n  protected override renderControl(): HTMLTemplateResult {\n    return html`\n      <slot class=\"prefix\" name=\"prefix\">\n        <span>${this.prefixText}</span>\n      </slot>\n      <div class=\"input\">\n        <input\n          type=${this.type}\n          part=\"input\"\n          id=${this.id || nothing}\n          aria-labelledby=\"label\"\n          aria-describedBy=\"supporting-text\"\n          ?disabled=${this.disabled}\n          spellcheck=${this.spellcheck}\n          autocomplete=${this.autocomplete}\n          autocapitalize=${this.autocapitalize}\n          role=${this.role}\n          maxlength=${this.maxlength ?? nothing}\n          .placeholder=${this.placeholder}\n          .value=${live(this._value)}\n          @input=${this._handleInput} />\n      </div>\n      <slot class=\"suffix\" name=\"suffix\">\n        <span>${this.suffixText}</span>\n      </slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-text-field': UmTextField;\n  }\n}\n"]}

package/text-field/text-field.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.styles.d.ts","sourceRoot":"","sources":["../../src/text-field/text-field.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAwBlB,CAAC"}
+{"version":3,"file":"text-field.styles.d.ts","sourceRoot":"","sources":["../../src/text-field/text-field.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAsClB,CAAC"}

package/text-field/text-field.styles.js

@@ -1,5 +1,11 @@
 import { css } from 'lit';
 export const styles = css `
+  .prefix::slotted(*),
+  .prefix span,
+  .suffix::slotted(*),
+  .suffix span {
+    transition: opacity 150ms 100ms;
+  }
   .prefix span:empty,
   .suffix span:empty {
     display: none;
@@ -23,5 +29,13 @@ export const styles = css `
   :host([disabled]) .suffix span, :host([disabled]) .suffix::slotted(*) {
     color: var(--u-text-field-suffix-color, var(--u-text-field-affix-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, 0.38))));
   }
+
+  :host([empty]:not(:focus-within)) .container:not(.no-label) .suffix::slotted(*),
+  :host([empty]:not(:focus-within)) .container:not(.no-label) .suffix span,
+  :host([empty]:not(:focus-within)) .container:not(.no-label) .prefix::slotted(*),
+  :host([empty]:not(:focus-within)) .container:not(.no-label) .prefix span {
+    opacity: 0;
+    transition: opacity 150ms;
+  }
 `;
 //# sourceMappingURL=text-field.styles.js.map

package/text-field/text-field.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.styles.js","sourceRoot":"","sources":["../../src/text-field/text-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;CAwBzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  .prefix span:empty,\n  .suffix span:empty {\n    display: none;\n  }\n\n  .prefix::slotted(*),\n  .prefix span {\n    color: var(--u-field-prefix-color, var(--u-field-affix-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));\n    margin-inline-end: var(--u-prefix-margin, var(--u-affix-margin, 2px));\n  }\n\n  .suffix::slotted(*),\n  .suffix span {\n    color: var(--u-field-suffix-color, var(--u-field-affix-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));\n    margin-inline-start: var(--u-suffix-margin, var(--u-affix-margin, 2px));\n  }\n\n  :host([disabled]) .prefix span, :host([disabled]) .prefix::slotted(*) {\n    color: var(--u-text-field-prefix-color, var(--u-text-field-affix-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, 0.38))));\n  }\n  :host([disabled]) .suffix span, :host([disabled]) .suffix::slotted(*) {\n    color: var(--u-text-field-suffix-color, var(--u-text-field-affix-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, 0.38))));\n  }\n`;\n"]}
+{"version":3,"file":"text-field.styles.js","sourceRoot":"","sources":["../../src/text-field/text-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  .prefix::slotted(*),\n  .prefix span,\n  .suffix::slotted(*),\n  .suffix span {\n    transition: opacity 150ms 100ms;\n  }\n  .prefix span:empty,\n  .suffix span:empty {\n    display: none;\n  }\n\n  .prefix::slotted(*),\n  .prefix span {\n    color: var(--u-field-prefix-color, var(--u-field-affix-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));\n    margin-inline-end: var(--u-prefix-margin, var(--u-affix-margin, 2px));\n  }\n\n  .suffix::slotted(*),\n  .suffix span {\n    color: var(--u-field-suffix-color, var(--u-field-affix-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));\n    margin-inline-start: var(--u-suffix-margin, var(--u-affix-margin, 2px));\n  }\n\n  :host([disabled]) .prefix span, :host([disabled]) .prefix::slotted(*) {\n    color: var(--u-text-field-prefix-color, var(--u-text-field-affix-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, 0.38))));\n  }\n  :host([disabled]) .suffix span, :host([disabled]) .suffix::slotted(*) {\n    color: var(--u-text-field-suffix-color, var(--u-text-field-affix-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, 0.38))));\n  }\n\n  :host([empty]:not(:focus-within)) .container:not(.no-label) .suffix::slotted(*),\n  :host([empty]:not(:focus-within)) .container:not(.no-label) .suffix span,\n  :host([empty]:not(:focus-within)) .container:not(.no-label) .prefix::slotted(*),\n  :host([empty]:not(:focus-within)) .container:not(.no-label) .prefix span {\n    opacity: 0;\n    transition: opacity 150ms;\n  }\n`;\n"]}