@francofantomius/material-components 1.1.1 → 1.2.0

package/dist/chunks/{text-field-hN6-2HQy.js → text-field-MifFD7uk.js}

@@ -1,10 +1,11 @@
-import { t as e } from "./decorate-DXuynaiA.js";
-import { t as s } from "./form-associated-Cty_ZaS9.js";
-import "./ripple-squbKHhj.js";
-import "./icon-DrNqcNEL.js";
-import { css as h, html as o, nothing as a } from "lit";
-import { customElement as d, property as i, query as p, queryAssignedElements as c, state as u } from "lit/decorators.js";
-var f = h`
+import { t as e } from "./decorate-DknOJ8FJ.js";
+import { t } from "./form-associated-Do5uXckv.js";
+import "./ripple-CBOKeVfm.js";
+import "./icon-FvKeXi61.js";
+import { css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o, query as s, queryAssignedElements as c, state as l } from "lit/decorators.js";
+//#region src/components/text-field/text-field.css.ts
+var u = n`
   :host {
     display: inline-flex;
     flex-direction: column;
@@ -200,56 +201,56 @@ var f = h`
   :host([error]) .supporting-text {
     color: var(--md-sys-color-error, #B3261E);
   }
-`, t = class extends s {
-  constructor(...r) {
-    super(...r), this.variant = "filled", this.label = "", this.value = "", this.placeholder = "", this.type = "text", this.readonly = !1, this.error = !1, this.errorText = "", this.supportingText = "", this.prefixText = "", this.suffixText = "", this.maxLength = -1, this.pattern = "", this.leadingIcon = "", this.trailingIcon = "", this.focused = !1, this.handleFocus = () => {
-      this.focused = !0, this.toggleAttribute("focused", !0);
-    }, this.handleBlur = () => {
-      this.focused = !1, this.toggleAttribute("focused", !1), this.validateInput();
-    }, this.handleInput = (l) => {
-      const n = l.target;
-      this.value = n.value, this.setFormValue(this.value), this.emitEvent("input", { value: this.value });
-    }, this.handleChange = () => {
-      this.emitEvent("change", { value: this.value });
-    };
-  }
-  static {
-    this.styles = [s.styles, f];
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.setFormValue(this.value), this.toggleAttribute("has-value", !!this.value), this.toggleAttribute("has-placeholder", !!this.placeholder), this.toggleAttribute("has-leading-icon", !!this.leadingIcon);
-  }
-  firstUpdated(r) {
-    super.firstUpdated(r), this.handleSlotChange();
-  }
-  willUpdate(r) {
-    super.willUpdate(r), r.has("value") && (this.setFormValue(this.value), this.toggleAttribute("has-value", !!this.value), this.validateInput()), r.has("placeholder") && this.toggleAttribute("has-placeholder", !!this.placeholder), r.has("leadingIcon") && this.toggleAttribute("has-leading-icon", !!this.leadingIcon);
-  }
-  formResetCallback() {
-    this.value = "", this.error = !1, this.toggleAttribute("has-value", !1), this.setFormValue(null);
-  }
-  validateInput() {
-    this.inputElement && (this.required && !this.value ? (this.setValidity({ valueMissing: !0 }, this.errorText || "This field is required"), this.error = !0) : this.pattern && !new RegExp(this.pattern).test(this.value) ? (this.setValidity({ patternMismatch: !0 }, this.errorText || "Invalid format"), this.error = !0) : (this.setValidity({}), this.errorText || (this.error = !1)));
-  }
-  handleSlotChange() {
-    const r = !!(this.leadingIcon || this.assignedLeadingIcons && this.assignedLeadingIcons.length > 0);
-    this.toggleAttribute("has-leading-icon", r);
-  }
-  render() {
-    const r = this.error ? this.errorText || this.supportingText : this.supportingText;
-    return o`
+`, d = class extends t {
+	constructor(...e) {
+		super(...e), this.variant = "filled", this.label = "", this.value = "", this.placeholder = "", this.type = "text", this.readonly = !1, this.error = !1, this.errorText = "", this.supportingText = "", this.prefixText = "", this.suffixText = "", this.maxLength = -1, this.pattern = "", this.leadingIcon = "", this.trailingIcon = "", this.focused = !1, this.handleFocus = () => {
+			this.focused = !0, this.toggleAttribute("focused", !0);
+		}, this.handleBlur = () => {
+			this.focused = !1, this.toggleAttribute("focused", !1), this.validateInput();
+		}, this.handleInput = (e) => {
+			let t = e.target;
+			this.value = t.value, this.setFormValue(this.value), this.emitEvent("input", { value: this.value });
+		}, this.handleChange = () => {
+			this.emitEvent("change", { value: this.value });
+		};
+	}
+	static {
+		this.styles = [t.styles, u];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setFormValue(this.value), this.toggleAttribute("has-value", !!this.value), this.toggleAttribute("has-placeholder", !!this.placeholder), this.toggleAttribute("has-leading-icon", !!this.leadingIcon);
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.handleSlotChange();
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("value") && (this.setFormValue(this.value), this.toggleAttribute("has-value", !!this.value), this.validateInput()), e.has("placeholder") && this.toggleAttribute("has-placeholder", !!this.placeholder), e.has("leadingIcon") && this.toggleAttribute("has-leading-icon", !!this.leadingIcon);
+	}
+	formResetCallback() {
+		this.value = "", this.error = !1, this.toggleAttribute("has-value", !1), this.setFormValue(null);
+	}
+	validateInput() {
+		this.inputElement && (this.required && !this.value ? (this.setValidity({ valueMissing: !0 }, this.errorText || "This field is required"), this.error = !0) : this.pattern && !new RegExp(this.pattern).test(this.value) ? (this.setValidity({ patternMismatch: !0 }, this.errorText || "Invalid format"), this.error = !0) : (this.setValidity({}), this.errorText || (this.error = !1)));
+	}
+	handleSlotChange() {
+		let e = !!(this.leadingIcon || this.assignedLeadingIcons && this.assignedLeadingIcons.length > 0);
+		this.toggleAttribute("has-leading-icon", e);
+	}
+	render() {
+		let e = this.error && this.errorText || this.supportingText;
+		return r`
       <div class="container" @click=${() => this.inputElement?.focus()}>
-        ${this.variant === "filled" ? o`<md-ripple ?disabled=${this.disabled}></md-ripple>` : a}
+        ${this.variant === "filled" ? r`<md-ripple ?disabled=${this.disabled}></md-ripple>` : i}
 
         <span class="icon-slot leading-icon">
           <slot name="leading-icon" @slotchange=${this.handleSlotChange}>
-            ${this.leadingIcon ? o`<md-icon name=${this.leadingIcon}></md-icon>` : a}
+            ${this.leadingIcon ? r`<md-icon name=${this.leadingIcon}></md-icon>` : i}
           </slot>
         </span>
 
         <div class="input-wrapper">
-          ${this.label ? o`<label class="label">${this.label}</label>` : a}
-          ${this.prefixText ? o`<span class="affix prefix">${this.prefixText}</span>` : a}
+          ${this.label ? r`<label class="label">${this.label}</label>` : i}
+          ${this.prefixText ? r`<span class="affix prefix">${this.prefixText}</span>` : i}
           <input
             type=${this.type}
             .value=${this.value}
@@ -257,82 +258,63 @@ var f = h`
             ?disabled=${this.disabled}
             ?readonly=${this.readonly}
             ?required=${this.required}
-            maxlength=${this.maxLength > 0 ? this.maxLength : a}
+            maxlength=${this.maxLength > 0 ? this.maxLength : i}
             @focus=${this.handleFocus}
             @blur=${this.handleBlur}
             @input=${this.handleInput}
             @change=${this.handleChange}
           />
-          ${this.suffixText ? o`<span class="affix suffix">${this.suffixText}</span>` : a}
+          ${this.suffixText ? r`<span class="affix suffix">${this.suffixText}</span>` : i}
         </div>
 
         <span class="icon-slot trailing-icon">
           <slot name="trailing-icon">
-            ${this.error ? o`<md-icon name="error" filled></md-icon>` : this.trailingIcon ? o`<md-icon name=${this.trailingIcon}></md-icon>` : a}
+            ${this.error ? r`<md-icon name="error" filled></md-icon>` : this.trailingIcon ? r`<md-icon name=${this.trailingIcon}></md-icon>` : i}
           </slot>
         </span>
       </div>
 
-      ${r || this.maxLength > 0 ? o`
+      ${e || this.maxLength > 0 ? r`
             <div class="supporting-text">
-              <span>${r}</span>
-              ${this.maxLength > 0 ? o`<span>${this.value.length} / ${this.maxLength}</span>` : a}
+              <span>${e}</span>
+              ${this.maxLength > 0 ? r`<span>${this.value.length} / ${this.maxLength}</span>` : i}
             </div>
-          ` : a}
+          ` : i}
     `;
-  }
-};
-e([i({
-  type: String,
-  reflect: !0
-})], t.prototype, "variant", void 0);
-e([i({ type: String })], t.prototype, "label", void 0);
-e([i({ type: String })], t.prototype, "value", void 0);
-e([i({ type: String })], t.prototype, "placeholder", void 0);
-e([i({ type: String })], t.prototype, "type", void 0);
-e([i({
-  type: Boolean,
-  reflect: !0
-})], t.prototype, "readonly", void 0);
-e([i({
-  type: Boolean,
-  reflect: !0
-})], t.prototype, "error", void 0);
-e([i({
-  type: String,
-  attribute: "error-text"
-})], t.prototype, "errorText", void 0);
-e([i({
-  type: String,
-  attribute: "supporting-text"
-})], t.prototype, "supportingText", void 0);
-e([i({
-  type: String,
-  attribute: "prefix-text"
-})], t.prototype, "prefixText", void 0);
-e([i({
-  type: String,
-  attribute: "suffix-text"
-})], t.prototype, "suffixText", void 0);
-e([i({
-  type: Number,
-  attribute: "maxlength"
-})], t.prototype, "maxLength", void 0);
-e([i({ type: String })], t.prototype, "pattern", void 0);
-e([i({
-  type: String,
-  attribute: "leading-icon"
-})], t.prototype, "leadingIcon", void 0);
-e([i({
-  type: String,
-  attribute: "trailing-icon"
-})], t.prototype, "trailingIcon", void 0);
-e([u()], t.prototype, "focused", void 0);
-e([p("input")], t.prototype, "inputElement", void 0);
-e([c({ slot: "leading-icon" })], t.prototype, "assignedLeadingIcons", void 0);
-t = e([d("md-text-field")], t);
-export {
-  t
+	}
 };
+e([o({
+	type: String,
+	reflect: !0
+})], d.prototype, "variant", void 0), e([o({ type: String })], d.prototype, "label", void 0), e([o({ type: String })], d.prototype, "value", void 0), e([o({ type: String })], d.prototype, "placeholder", void 0), e([o({ type: String })], d.prototype, "type", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "readonly", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "error", void 0), e([o({
+	type: String,
+	attribute: "error-text"
+})], d.prototype, "errorText", void 0), e([o({
+	type: String,
+	attribute: "supporting-text"
+})], d.prototype, "supportingText", void 0), e([o({
+	type: String,
+	attribute: "prefix-text"
+})], d.prototype, "prefixText", void 0), e([o({
+	type: String,
+	attribute: "suffix-text"
+})], d.prototype, "suffixText", void 0), e([o({
+	type: Number,
+	attribute: "maxlength"
+})], d.prototype, "maxLength", void 0), e([o({ type: String })], d.prototype, "pattern", void 0), e([o({
+	type: String,
+	attribute: "leading-icon"
+})], d.prototype, "leadingIcon", void 0), e([o({
+	type: String,
+	attribute: "trailing-icon"
+})], d.prototype, "trailingIcon", void 0), e([l()], d.prototype, "focused", void 0), e([s("input")], d.prototype, "inputElement", void 0), e([c({ slot: "leading-icon" })], d.prototype, "assignedLeadingIcons", void 0), d = e([a("md-text-field")], d);
+//#endregion
+export { d as t };
 
-//# sourceMappingURL=text-field-hN6-2HQy.js.map
+//# sourceMappingURL=text-field-MifFD7uk.js.map

package/dist/chunks/{text-field-hN6-2HQy.js.map → text-field-MifFD7uk.js.map}

@@ -1 +1 @@
-{"version":3,"file":"text-field-hN6-2HQy.js","names":[],"sources":["../../src/components/text-field/text-field.css.ts","../../src/components/text-field/text-field.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const textFieldStyles = css`\n  :host {\n    display: inline-flex;\n    flex-direction: column;\n    min-width: 240px;\n    vertical-align: top;\n    align-self: flex-start;\n    box-sizing: border-box;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  .container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    min-height: 56px;\n    padding: 0 16px;\n    box-sizing: border-box;\n    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),\n                border-color 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  /* --- Filled Variant (Default) --- */\n  :host(:not([variant])) .container,\n  :host([variant=\"filled\"]) .container {\n    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n    border-radius: var(--md-sys-shape-corner-extra-small, 4px) var(--md-sys-shape-corner-extra-small, 4px) 0 0;\n    border-bottom: 1px solid var(--md-sys-color-on-surface-variant, #49454F);\n  }\n\n  :host(:not([variant])[focused]) .container,\n  :host([variant=\"filled\"][focused]) .container {\n    border-bottom: 2px solid var(--md-sys-color-primary, #6750A4);\n  }\n\n  :host(:not([variant])[error]) .container,\n  :host([variant=\"filled\"][error]) .container {\n    border-bottom-color: var(--md-sys-color-error, #B3261E);\n  }\n\n  /* --- Outlined Variant --- */\n  :host([variant=\"outlined\"]) .container {\n    background-color: transparent;\n    border: 1px solid var(--md-sys-color-outline, #79747E);\n    border-radius: var(--md-sys-shape-corner-extra-small, 4px);\n  }\n\n  :host([variant=\"outlined\"][focused]) .container {\n    border: 2px solid var(--md-sys-color-primary, #6750A4);\n    padding: 0 15px; /* Offset for 2px border */\n  }\n\n  :host([variant=\"outlined\"][error]) .container {\n    border-color: var(--md-sys-color-error, #B3261E);\n  }\n\n  /* Floating Label */\n  .label {\n    position: absolute;\n    left: 16px;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 16px;\n    line-height: 16px;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    pointer-events: none;\n    transition: transform 150ms cubic-bezier(0.2, 0, 0, 1),\n                font-size 150ms cubic-bezier(0.2, 0, 0, 1),\n                color 150ms cubic-bezier(0.2, 0, 0, 1),\n                left 150ms cubic-bezier(0.2, 0, 0, 1),\n                top 150ms cubic-bezier(0.2, 0, 0, 1);\n    transform-origin: top left;\n    white-space: nowrap;\n    max-width: calc(100% - 32px);\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  :host([has-leading-icon]) .label {\n    left: 52px;\n    max-width: calc(100% - 68px);\n  }\n\n  /* Filled Variant Floating Label */\n  :host(:not([variant])[focused]) .label,\n  :host(:not([variant])[has-value]) .label,\n  :host(:not([variant])[has-placeholder]) .label,\n  :host([variant=\"filled\"][focused]) .label,\n  :host([variant=\"filled\"][has-value]) .label,\n  :host([variant=\"filled\"][has-placeholder]) .label {\n    top: 8px;\n    transform: translateY(0) scale(0.75);\n    transform-origin: top left;\n  }\n\n  /* Outlined Variant Floating Label */\n  :host([variant=\"outlined\"][focused]) .label,\n  :host([variant=\"outlined\"][has-value]) .label,\n  :host([variant=\"outlined\"][has-placeholder]) .label {\n    top: 0;\n    left: 12px;\n    transform: translateY(-50%) scale(0.75);\n    transform-origin: left center;\n    background-color: var(--md-sys-color-surface, #FEF7FF);\n    padding: 0 4px;\n    max-width: calc(100% - 24px);\n    z-index: 1;\n  }\n\n  :host([focused]) .label {\n    color: var(--md-sys-color-primary, #6750A4);\n  }\n\n  :host([error]) .label {\n    color: var(--md-sys-color-error, #B3261E);\n  }\n\n  .input-wrapper {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    height: 100%;\n    min-width: 0;\n  }\n\n  :host(:not([variant])) .input-wrapper,\n  :host([variant=\"filled\"]) .input-wrapper {\n    padding-top: 18px;\n  }\n\n  input {\n    flex: 1;\n    width: 100%;\n    border: none;\n    outline: none;\n    background: transparent;\n    font-family: inherit;\n    font-size: 16px;\n    line-height: 24px;\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    padding: 0;\n  }\n\n  input::placeholder {\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    opacity: 0.6;\n  }\n\n  .affix {\n    font-size: 16px;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    user-select: none;\n    transition: opacity 150ms ease;\n  }\n\n  :host(:not([focused]):not([has-value]):not([has-placeholder])) .affix {\n    opacity: 0;\n  }\n\n  .prefix { margin-right: 4px; }\n  .suffix { margin-left: 4px; }\n\n  .icon-slot {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    flex-shrink: 0;\n  }\n\n  .leading-icon { margin-right: 12px; }\n  .trailing-icon { margin-left: 12px; }\n\n  :host([error]) .trailing-icon {\n    color: var(--md-sys-color-error, #B3261E);\n  }\n\n  /* Supporting / Error text */\n  .supporting-text {\n    display: flex;\n    justify-content: space-between;\n    padding: 4px 16px 0;\n    font-size: 12px;\n    line-height: 16px;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n  }\n\n  :host([error]) .supporting-text {\n    color: var(--md-sys-color-error, #B3261E);\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property, state, query, queryAssignedElements } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { MdFormAssociatedElement } from '../../internal/form-associated.js';\nimport '../../internal/ripple/ripple.js';\nimport '../icon/icon.js';\nimport { textFieldStyles } from './text-field.css.js';\n\nexport type TextFieldVariant = 'filled' | 'outlined';\n\n@customElement('md-text-field')\nexport class MdTextField extends MdFormAssociatedElement {\n  static override styles = [MdFormAssociatedElement.styles, textFieldStyles];\n\n  @property({ type: String, reflect: true })\n  variant: TextFieldVariant = 'filled';\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ type: String })\n  type = 'text';\n\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  @property({ type: Boolean, reflect: true })\n  error = false;\n\n  @property({ type: String, attribute: 'error-text' })\n  errorText = '';\n\n  @property({ type: String, attribute: 'supporting-text' })\n  supportingText = '';\n\n  @property({ type: String, attribute: 'prefix-text' })\n  prefixText = '';\n\n  @property({ type: String, attribute: 'suffix-text' })\n  suffixText = '';\n\n  @property({ type: Number, attribute: 'maxlength' })\n  maxLength = -1;\n\n  @property({ type: String })\n  pattern = '';\n\n  @property({ type: String, attribute: 'leading-icon' })\n  leadingIcon = '';\n\n  @property({ type: String, attribute: 'trailing-icon' })\n  trailingIcon = '';\n\n  @state()\n  private focused = false;\n\n  @query('input')\n  private inputElement?: HTMLInputElement;\n\n  @queryAssignedElements({ slot: 'leading-icon' })\n  private assignedLeadingIcons!: HTMLElement[];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setFormValue(this.value);\n    this.toggleAttribute('has-value', Boolean(this.value));\n    this.toggleAttribute('has-placeholder', Boolean(this.placeholder));\n    this.toggleAttribute('has-leading-icon', Boolean(this.leadingIcon));\n  }\n\n  override firstUpdated(changedProperties: Map<string, unknown>) {\n    super.firstUpdated(changedProperties);\n    this.handleSlotChange();\n  }\n\n  override willUpdate(changedProperties: Map<string, unknown>) {\n    super.willUpdate(changedProperties);\n    if (changedProperties.has('value')) {\n      this.setFormValue(this.value);\n      this.toggleAttribute('has-value', Boolean(this.value));\n      this.validateInput();\n    }\n    if (changedProperties.has('placeholder')) {\n      this.toggleAttribute('has-placeholder', Boolean(this.placeholder));\n    }\n    if (changedProperties.has('leadingIcon')) {\n      this.toggleAttribute('has-leading-icon', Boolean(this.leadingIcon));\n    }\n  }\n\n  override formResetCallback() {\n    this.value = '';\n    this.error = false;\n    this.toggleAttribute('has-value', false);\n    this.setFormValue(null);\n  }\n\n  private handleFocus = () => {\n    this.focused = true;\n    this.toggleAttribute('focused', true);\n  };\n\n  private handleBlur = () => {\n    this.focused = false;\n    this.toggleAttribute('focused', false);\n    this.validateInput();\n  };\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.setFormValue(this.value);\n    this.emitEvent('input', { value: this.value });\n  };\n\n  private handleChange = () => {\n    this.emitEvent('change', { value: this.value });\n  };\n\n  private validateInput() {\n    if (!this.inputElement) return;\n\n    if (this.required && !this.value) {\n      this.setValidity({ valueMissing: true }, this.errorText || 'This field is required');\n      this.error = true;\n    } else if (this.pattern && !new RegExp(this.pattern).test(this.value)) {\n      this.setValidity({ patternMismatch: true }, this.errorText || 'Invalid format');\n      this.error = true;\n    } else {\n      this.setValidity({});\n      if (!this.errorText) {\n        this.error = false;\n      }\n    }\n  }\n\n  private handleSlotChange() {\n    const hasLeading = Boolean(this.leadingIcon || (this.assignedLeadingIcons && this.assignedLeadingIcons.length > 0));\n    this.toggleAttribute('has-leading-icon', hasLeading);\n  }\n\n  override render() {\n    const displayText = this.error ? (this.errorText || this.supportingText) : this.supportingText;\n\n    return html`\n      <div class=\"container\" @click=${() => this.inputElement?.focus()}>\n        ${this.variant === 'filled' ? html`<md-ripple ?disabled=${this.disabled}></md-ripple>` : nothing}\n\n        <span class=\"icon-slot leading-icon\">\n          <slot name=\"leading-icon\" @slotchange=${this.handleSlotChange}>\n            ${this.leadingIcon ? html`<md-icon name=${this.leadingIcon}></md-icon>` : nothing}\n          </slot>\n        </span>\n\n        <div class=\"input-wrapper\">\n          ${this.label ? html`<label class=\"label\">${this.label}</label>` : nothing}\n          ${this.prefixText ? html`<span class=\"affix prefix\">${this.prefixText}</span>` : nothing}\n          <input\n            type=${this.type}\n            .value=${this.value}\n            placeholder=${this.focused || !this.label ? this.placeholder : ''}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            maxlength=${this.maxLength > 0 ? this.maxLength : nothing}\n            @focus=${this.handleFocus}\n            @blur=${this.handleBlur}\n            @input=${this.handleInput}\n            @change=${this.handleChange}\n          />\n          ${this.suffixText ? html`<span class=\"affix suffix\">${this.suffixText}</span>` : nothing}\n        </div>\n\n        <span class=\"icon-slot trailing-icon\">\n          <slot name=\"trailing-icon\">\n            ${this.error ? html`<md-icon name=\"error\" filled></md-icon>` : (this.trailingIcon ? html`<md-icon name=${this.trailingIcon}></md-icon>` : nothing)}\n          </slot>\n        </span>\n      </div>\n\n      ${displayText || (this.maxLength > 0)\n        ? html`\n            <div class=\"supporting-text\">\n              <span>${displayText}</span>\n              ${this.maxLength > 0 ? html`<span>${this.value.length} / ${this.maxLength}</span>` : nothing}\n            </div>\n          `\n        : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-text-field': MdTextField;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"text-field-MifFD7uk.js","names":[],"sources":["../../src/components/text-field/text-field.css.ts","../../src/components/text-field/text-field.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const textFieldStyles = css`\n  :host {\n    display: inline-flex;\n    flex-direction: column;\n    min-width: 240px;\n    vertical-align: top;\n    align-self: flex-start;\n    box-sizing: border-box;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  .container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    min-height: 56px;\n    padding: 0 16px;\n    box-sizing: border-box;\n    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),\n                border-color 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  /* --- Filled Variant (Default) --- */\n  :host(:not([variant])) .container,\n  :host([variant=\"filled\"]) .container {\n    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n    border-radius: var(--md-sys-shape-corner-extra-small, 4px) var(--md-sys-shape-corner-extra-small, 4px) 0 0;\n    border-bottom: 1px solid var(--md-sys-color-on-surface-variant, #49454F);\n  }\n\n  :host(:not([variant])[focused]) .container,\n  :host([variant=\"filled\"][focused]) .container {\n    border-bottom: 2px solid var(--md-sys-color-primary, #6750A4);\n  }\n\n  :host(:not([variant])[error]) .container,\n  :host([variant=\"filled\"][error]) .container {\n    border-bottom-color: var(--md-sys-color-error, #B3261E);\n  }\n\n  /* --- Outlined Variant --- */\n  :host([variant=\"outlined\"]) .container {\n    background-color: transparent;\n    border: 1px solid var(--md-sys-color-outline, #79747E);\n    border-radius: var(--md-sys-shape-corner-extra-small, 4px);\n  }\n\n  :host([variant=\"outlined\"][focused]) .container {\n    border: 2px solid var(--md-sys-color-primary, #6750A4);\n    padding: 0 15px; /* Offset for 2px border */\n  }\n\n  :host([variant=\"outlined\"][error]) .container {\n    border-color: var(--md-sys-color-error, #B3261E);\n  }\n\n  /* Floating Label */\n  .label {\n    position: absolute;\n    left: 16px;\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 16px;\n    line-height: 16px;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    pointer-events: none;\n    transition: transform 150ms cubic-bezier(0.2, 0, 0, 1),\n                font-size 150ms cubic-bezier(0.2, 0, 0, 1),\n                color 150ms cubic-bezier(0.2, 0, 0, 1),\n                left 150ms cubic-bezier(0.2, 0, 0, 1),\n                top 150ms cubic-bezier(0.2, 0, 0, 1);\n    transform-origin: top left;\n    white-space: nowrap;\n    max-width: calc(100% - 32px);\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  :host([has-leading-icon]) .label {\n    left: 52px;\n    max-width: calc(100% - 68px);\n  }\n\n  /* Filled Variant Floating Label */\n  :host(:not([variant])[focused]) .label,\n  :host(:not([variant])[has-value]) .label,\n  :host(:not([variant])[has-placeholder]) .label,\n  :host([variant=\"filled\"][focused]) .label,\n  :host([variant=\"filled\"][has-value]) .label,\n  :host([variant=\"filled\"][has-placeholder]) .label {\n    top: 8px;\n    transform: translateY(0) scale(0.75);\n    transform-origin: top left;\n  }\n\n  /* Outlined Variant Floating Label */\n  :host([variant=\"outlined\"][focused]) .label,\n  :host([variant=\"outlined\"][has-value]) .label,\n  :host([variant=\"outlined\"][has-placeholder]) .label {\n    top: 0;\n    left: 12px;\n    transform: translateY(-50%) scale(0.75);\n    transform-origin: left center;\n    background-color: var(--md-sys-color-surface, #FEF7FF);\n    padding: 0 4px;\n    max-width: calc(100% - 24px);\n    z-index: 1;\n  }\n\n  :host([focused]) .label {\n    color: var(--md-sys-color-primary, #6750A4);\n  }\n\n  :host([error]) .label {\n    color: var(--md-sys-color-error, #B3261E);\n  }\n\n  .input-wrapper {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    height: 100%;\n    min-width: 0;\n  }\n\n  :host(:not([variant])) .input-wrapper,\n  :host([variant=\"filled\"]) .input-wrapper {\n    padding-top: 18px;\n  }\n\n  input {\n    flex: 1;\n    width: 100%;\n    border: none;\n    outline: none;\n    background: transparent;\n    font-family: inherit;\n    font-size: 16px;\n    line-height: 24px;\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    padding: 0;\n  }\n\n  input::placeholder {\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    opacity: 0.6;\n  }\n\n  .affix {\n    font-size: 16px;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    user-select: none;\n    transition: opacity 150ms ease;\n  }\n\n  :host(:not([focused]):not([has-value]):not([has-placeholder])) .affix {\n    opacity: 0;\n  }\n\n  .prefix { margin-right: 4px; }\n  .suffix { margin-left: 4px; }\n\n  .icon-slot {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    flex-shrink: 0;\n  }\n\n  .leading-icon { margin-right: 12px; }\n  .trailing-icon { margin-left: 12px; }\n\n  :host([error]) .trailing-icon {\n    color: var(--md-sys-color-error, #B3261E);\n  }\n\n  /* Supporting / Error text */\n  .supporting-text {\n    display: flex;\n    justify-content: space-between;\n    padding: 4px 16px 0;\n    font-size: 12px;\n    line-height: 16px;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n  }\n\n  :host([error]) .supporting-text {\n    color: var(--md-sys-color-error, #B3261E);\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property, state, query, queryAssignedElements } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { MdFormAssociatedElement } from '../../internal/form-associated.js';\nimport '../../internal/ripple/ripple.js';\nimport '../icon/icon.js';\nimport { textFieldStyles } from './text-field.css.js';\n\nexport type TextFieldVariant = 'filled' | 'outlined';\n\n@customElement('md-text-field')\nexport class MdTextField extends MdFormAssociatedElement {\n  static override styles = [MdFormAssociatedElement.styles, textFieldStyles];\n\n  @property({ type: String, reflect: true })\n  variant: TextFieldVariant = 'filled';\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ type: String })\n  type = 'text';\n\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  @property({ type: Boolean, reflect: true })\n  error = false;\n\n  @property({ type: String, attribute: 'error-text' })\n  errorText = '';\n\n  @property({ type: String, attribute: 'supporting-text' })\n  supportingText = '';\n\n  @property({ type: String, attribute: 'prefix-text' })\n  prefixText = '';\n\n  @property({ type: String, attribute: 'suffix-text' })\n  suffixText = '';\n\n  @property({ type: Number, attribute: 'maxlength' })\n  maxLength = -1;\n\n  @property({ type: String })\n  pattern = '';\n\n  @property({ type: String, attribute: 'leading-icon' })\n  leadingIcon = '';\n\n  @property({ type: String, attribute: 'trailing-icon' })\n  trailingIcon = '';\n\n  @state()\n  private focused = false;\n\n  @query('input')\n  private inputElement?: HTMLInputElement;\n\n  @queryAssignedElements({ slot: 'leading-icon' })\n  private assignedLeadingIcons!: HTMLElement[];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setFormValue(this.value);\n    this.toggleAttribute('has-value', Boolean(this.value));\n    this.toggleAttribute('has-placeholder', Boolean(this.placeholder));\n    this.toggleAttribute('has-leading-icon', Boolean(this.leadingIcon));\n  }\n\n  override firstUpdated(changedProperties: Map<string, unknown>) {\n    super.firstUpdated(changedProperties);\n    this.handleSlotChange();\n  }\n\n  override willUpdate(changedProperties: Map<string, unknown>) {\n    super.willUpdate(changedProperties);\n    if (changedProperties.has('value')) {\n      this.setFormValue(this.value);\n      this.toggleAttribute('has-value', Boolean(this.value));\n      this.validateInput();\n    }\n    if (changedProperties.has('placeholder')) {\n      this.toggleAttribute('has-placeholder', Boolean(this.placeholder));\n    }\n    if (changedProperties.has('leadingIcon')) {\n      this.toggleAttribute('has-leading-icon', Boolean(this.leadingIcon));\n    }\n  }\n\n  override formResetCallback() {\n    this.value = '';\n    this.error = false;\n    this.toggleAttribute('has-value', false);\n    this.setFormValue(null);\n  }\n\n  private handleFocus = () => {\n    this.focused = true;\n    this.toggleAttribute('focused', true);\n  };\n\n  private handleBlur = () => {\n    this.focused = false;\n    this.toggleAttribute('focused', false);\n    this.validateInput();\n  };\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.setFormValue(this.value);\n    this.emitEvent('input', { value: this.value });\n  };\n\n  private handleChange = () => {\n    this.emitEvent('change', { value: this.value });\n  };\n\n  private validateInput() {\n    if (!this.inputElement) return;\n\n    if (this.required && !this.value) {\n      this.setValidity({ valueMissing: true }, this.errorText || 'This field is required');\n      this.error = true;\n    } else if (this.pattern && !new RegExp(this.pattern).test(this.value)) {\n      this.setValidity({ patternMismatch: true }, this.errorText || 'Invalid format');\n      this.error = true;\n    } else {\n      this.setValidity({});\n      if (!this.errorText) {\n        this.error = false;\n      }\n    }\n  }\n\n  private handleSlotChange() {\n    const hasLeading = Boolean(this.leadingIcon || (this.assignedLeadingIcons && this.assignedLeadingIcons.length > 0));\n    this.toggleAttribute('has-leading-icon', hasLeading);\n  }\n\n  override render() {\n    const displayText = this.error ? (this.errorText || this.supportingText) : this.supportingText;\n\n    return html`\n      <div class=\"container\" @click=${() => this.inputElement?.focus()}>\n        ${this.variant === 'filled' ? html`<md-ripple ?disabled=${this.disabled}></md-ripple>` : nothing}\n\n        <span class=\"icon-slot leading-icon\">\n          <slot name=\"leading-icon\" @slotchange=${this.handleSlotChange}>\n            ${this.leadingIcon ? html`<md-icon name=${this.leadingIcon}></md-icon>` : nothing}\n          </slot>\n        </span>\n\n        <div class=\"input-wrapper\">\n          ${this.label ? html`<label class=\"label\">${this.label}</label>` : nothing}\n          ${this.prefixText ? html`<span class=\"affix prefix\">${this.prefixText}</span>` : nothing}\n          <input\n            type=${this.type}\n            .value=${this.value}\n            placeholder=${this.focused || !this.label ? this.placeholder : ''}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            maxlength=${this.maxLength > 0 ? this.maxLength : nothing}\n            @focus=${this.handleFocus}\n            @blur=${this.handleBlur}\n            @input=${this.handleInput}\n            @change=${this.handleChange}\n          />\n          ${this.suffixText ? html`<span class=\"affix suffix\">${this.suffixText}</span>` : nothing}\n        </div>\n\n        <span class=\"icon-slot trailing-icon\">\n          <slot name=\"trailing-icon\">\n            ${this.error ? html`<md-icon name=\"error\" filled></md-icon>` : (this.trailingIcon ? html`<md-icon name=${this.trailingIcon}></md-icon>` : nothing)}\n          </slot>\n        </span>\n      </div>\n\n      ${displayText || (this.maxLength > 0)\n        ? html`\n            <div class=\"supporting-text\">\n              <span>${displayText}</span>\n              ${this.maxLength > 0 ? html`<span>${this.value.length} / ${this.maxLength}</span>` : nothing}\n            </div>\n          `\n        : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-text-field': MdTextField;\n  }\n}\n"],"mappings":"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"}