@daikin-oss/design-system-web-components 2.0.0 → 2.0.1-next.1

package/dist/cjs/components/text-field/daikin-text-field.cjs

@@ -1,264 +1,252 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classVarianceAuthority = require("class-variance-authority");
-const lit = require("lit");
-const decorators_js = require("lit/decorators.js");
-const ifDefined_js = require("lit/directives/if-defined.js");
-const ref_js = require("lit/directives/ref.js");
-require("../../base/dds-element.cjs");
-const ddsFormElement = require("../../base/dds-form-element.cjs");
-const ddsProperty = require("../../base/dds-property.cjs");
-const decorators = require("../../base/decorators.cjs");
-require("../../base/define.cjs");
-const tailwind = require("../../tailwind.css.cjs");
-const isSimpleKey = require("../../utils/is-simple-key.cjs");
+const require_dds_property = require("../../base/dds-property.cjs");
+const require_decorate = require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs");
+const require_dds_form_element = require("../../base/dds-form-element.cjs");
+const require_decorators = require("../../base/decorators.cjs");
+require("../../base/index.cjs");
+const require_tailwind = require("../../tailwind.css.cjs");
 require("../icon-button/daikin-icon-button.cjs");
-const numberUtils = require("./number-utils.cjs");
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators2, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators2[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const cvaInput = classVarianceAuthority.cva(
-  [
-    "flex",
-    "items-center",
-    "w-full",
-    "h-full",
-    "pl-(--pl,calc(var(--dds-padding-30)+0.25rem))",
-    "pr-(--pr,calc(var(--dds-padding-30)+0.25rem))",
-    "bg-ddt-color-common-background-default",
-    "relative",
-    "rounded-sm",
-    "overflow-hidden",
-    "text-(length:--dds-font-size-400)",
-    "outline-solid",
-    "outline-(--color-border)",
-    "outline-0",
-    "-outline-offset-2",
-    "placeholder:text-ddt-color-common-text-secondary",
-    // Define `--color-border` as a CSS variable that references `--color-state-focus` and `--color-base` in that order.
-    // `--color-base` indicates the color of the border when the element is normal, hovered, or disabled.
-    "[--color-border:var(--color-state-focus,var(--color-base))]",
-    "border",
-    "border-(--color-border)",
-    // Update `--color-base` depending on the state.
-    // The default `--color-base` and `--color-state-focus` values are defined in `variants.error` because they differ depending on whether or not the input has an error state.
-    "enabled:text-ddt-color-common-text-primary",
-    "enabled:hover:bg-ddt-color-common-surface-hover",
-    "enabled:active:bg-ddt-color-common-surface-press",
-    "focus-visible:outline-2",
-    "disabled:[--color-base:var(--dds-color-common-disabled)]",
-    "disabled:text-ddt-color-common-disabled",
-    "disabled:bg-ddt-color-common-background-default",
-    "disabled:placeholder:text-ddt-color-common-disabled"
-  ],
-  {
-    variants: {
-      error: {
-        false: [
-          "enabled:[--color-base:var(--dds-color-common-neutral-default)]",
-          "enabled:hover:[--color-base:var(--dds-color-common-neutral-hover)]",
-          "enabled:active:[--color-base:var(--dds-color-common-neutral-press)]",
-          "focus-visible:[--color-state-focus:var(--dds-color-common-border-focus)]"
-        ],
-        true: ["enabled:[--color-base:var(--dds-color-common-danger-default)]"]
-      },
-      leftIcon: {
-        false: [],
-        true: [
-          "[--pl:calc(var(--dds-padding-30)+var(--dds-icon)+var(--dds-gap-10)+var(--dds-space-100))]"
-        ]
-      },
-      rightIcon: {
-        false: [],
-        true: [
-          "[--pr:calc(var(--dds-padding-30)+var(--dds-icon)+var(--dds-gap-10))]"
-        ]
-      },
-      type: {
-        text: [],
-        number: [
-          "[--pr:calc(var(--dds-icon-button)*2+0.25rem+var(--dds-padding-20))]"
-        ],
-        password: [
-          "[--pr:calc(var(--dds-gap-20)+var(--dds-icon-button)+var(--dds-padding-20))]"
-        ],
-        email: [],
-        tel: [],
-        search: [
-          "[&::-webkit-search-cancel-button]:appearance-none",
-          "[--pl:calc(var(--dds-padding-30)+var(--dds-icon)+var(--dds-gap-10)+0.25rem)]",
-          "[--pr:calc(0.25rem+var(--dds-padding-30)+1.5rem)]"
-        ]
-      }
-    },
-    compoundVariants: [
-      {
-        type: ["text", "email", "tel", "number", "password"],
-        leftIcon: true,
-        class: ["[--pl:2.75rem]"]
-      },
-      {
-        type: ["text", "email", "tel"],
-        rightIcon: true,
-        class: ["[--pr:2.75rem]"]
-      }
-    ]
-  }
-);
-const cvaIcon = classVarianceAuthority.cva(
-  ["flex", "items-center", "absolute", "pointer-events-none"],
-  {
-    variants: {
-      icon: {
-        left: ["left-(--dds-padding-30)"],
-        right: ["right-(--dds-padding-30)"]
-      },
-      disabled: {
-        false: ["text-ddt-color-common-text-primary"],
-        true: ["text-ddt-color-common-disabled"]
-      }
+const require_is_simple_key = require("../../utils/is-simple-key.cjs");
+const require_number_utils = require("./number-utils.cjs");
+let lit = require("lit");
+let lit_decorators_js = require("lit/decorators.js");
+let class_variance_authority = require("class-variance-authority");
+let lit_directives_ref_js = require("lit/directives/ref.js");
+let lit_directives_if_defined_js = require("lit/directives/if-defined.js");
+//#region src/components/text-field/daikin-text-field.ts
+var cvaInput = (0, class_variance_authority.cva)([
+	"flex",
+	"items-center",
+	"w-full",
+	"h-full",
+	"pl-(--pl,calc(var(--dds-padding-30)+0.25rem))",
+	"pr-(--pr,calc(var(--dds-padding-30)+0.25rem))",
+	"bg-ddt-color-common-background-default",
+	"relative",
+	"rounded-sm",
+	"overflow-hidden",
+	"text-(length:--dds-font-size-400)",
+	"outline-solid",
+	"outline-(--color-border)",
+	"outline-0",
+	"-outline-offset-2",
+	"placeholder:text-ddt-color-common-text-secondary",
+	"[--color-border:var(--color-state-focus,var(--color-base))]",
+	"border",
+	"border-(--color-border)",
+	"enabled:text-ddt-color-common-text-primary",
+	"enabled:hover:bg-ddt-color-common-surface-hover",
+	"enabled:active:bg-ddt-color-common-surface-press",
+	"focus-visible:outline-2",
+	"disabled:[--color-base:var(--dds-color-common-disabled)]",
+	"disabled:text-ddt-color-common-disabled",
+	"disabled:bg-ddt-color-common-background-default",
+	"disabled:placeholder:text-ddt-color-common-disabled"
+], {
+	variants: {
+		error: {
+			false: [
+				"enabled:[--color-base:var(--dds-color-common-neutral-default)]",
+				"enabled:hover:[--color-base:var(--dds-color-common-neutral-hover)]",
+				"enabled:active:[--color-base:var(--dds-color-common-neutral-press)]",
+				"focus-visible:[--color-state-focus:var(--dds-color-common-border-focus)]"
+			],
+			true: ["enabled:[--color-base:var(--dds-color-common-danger-default)]"]
+		},
+		leftIcon: {
+			false: [],
+			true: ["[--pl:calc(var(--dds-padding-30)+var(--dds-icon)+var(--dds-gap-10)+var(--dds-space-100))]"]
+		},
+		rightIcon: {
+			false: [],
+			true: ["[--pr:calc(var(--dds-padding-30)+var(--dds-icon)+var(--dds-gap-10))]"]
+		},
+		type: {
+			text: [],
+			number: ["[--pr:calc(var(--dds-icon-button)*2+0.25rem+var(--dds-padding-20))]"],
+			password: ["[--pr:calc(var(--dds-gap-20)+var(--dds-icon-button)+var(--dds-padding-20))]"],
+			email: [],
+			tel: [],
+			search: [
+				"[&::-webkit-search-cancel-button]:appearance-none",
+				"[--pl:calc(var(--dds-padding-30)+var(--dds-icon)+var(--dds-gap-10)+0.25rem)]",
+				"[--pr:calc(0.25rem+var(--dds-padding-30)+1.5rem)]"
+			]
+		}
+	},
+	compoundVariants: [{
+		type: [
+			"text",
+			"email",
+			"tel",
+			"number",
+			"password"
+		],
+		leftIcon: true,
+		class: ["[--pl:2.75rem]"]
+	}, {
+		type: [
+			"text",
+			"email",
+			"tel"
+		],
+		rightIcon: true,
+		class: ["[--pr:2.75rem]"]
+	}]
+});
+var cvaIcon = (0, class_variance_authority.cva)([
+	"flex",
+	"items-center",
+	"absolute",
+	"pointer-events-none"
+], { variants: {
+	icon: {
+		left: ["left-(--dds-padding-30)"],
+		right: ["right-(--dds-padding-30)"]
+	},
+	disabled: {
+		false: ["text-ddt-color-common-text-primary"],
+		true: ["text-ddt-color-common-disabled"]
+	}
+} });
+var cvaShowPasswordIcon = (0, class_variance_authority.cva)(["size-(--dds-icon)"], { variants: { showPassword: {
+	false: ["icon-[daikin--password-hidden]"],
+	true: ["icon-[daikin--password-visible]"]
+} } });
+var DaikinTextField = class DaikinTextField extends require_dds_form_element.DDSFormElement {
+	constructor(..._args) {
+		super(..._args);
+		this.readonly = false;
+		this.disabled = false;
+		this.required = false;
+		this.error = false;
+		this.minlength = null;
+		this.maxlength = null;
+		this.step = null;
+		this.stepMode = "free";
+		this.min = null;
+		this.max = null;
+		this.pattern = null;
+		this.showPassword = false;
+		this._label = null;
+		this._hasLeftSlot = false;
+		this._hasRightSlot = false;
+		this._inputRef = (0, lit_directives_ref_js.createRef)();
+	}
+	static {
+		this.styles = lit.css`
+    ${(0, lit.unsafeCSS)(require_tailwind.default)}
+
+    :host {
+      display: flex;
+      align-items: center;
+      height: var(--dds-input-height, 3rem);
+      position: relative;
     }
-  }
-);
-const cvaShowPasswordIcon = classVarianceAuthority.cva(["size-(--dds-icon)"], {
-  variants: {
-    showPassword: {
-      false: ["icon-[daikin--password-hidden]"],
-      true: ["icon-[daikin--password-visible]"]
+
+    input::-ms-reveal {
+      display: none !important;
     }
-  }
-});
-exports.DaikinTextField = class DaikinTextField extends ddsFormElement.DDSFormElement {
-  constructor() {
-    super(...arguments);
-    this.readonly = false;
-    this.disabled = false;
-    this.required = false;
-    this.error = false;
-    this.minlength = null;
-    this.maxlength = null;
-    this.step = null;
-    this.stepMode = "free";
-    this.min = null;
-    this.max = null;
-    this.pattern = null;
-    this.showPassword = false;
-    this._label = null;
-    this._hasLeftSlot = false;
-    this._hasRightSlot = false;
-    this._inputRef = ref_js.createRef();
-  }
-  /**
-   * Focuses on the inner input.
-   * @param options focus options
-   */
-  focus(options) {
-    var _a;
-    (_a = this._inputRef.value) == null ? void 0 : _a.focus(options);
-  }
-  _handleChange(event) {
-    this.dispatchEvent(new Event("change", event));
-  }
-  _handleSlotChange(event) {
-    const target = event.target;
-    const name = target.name;
-    const hasIcon = !!target.assignedNodes().length;
-    switch (name) {
-      case "left-icon":
-        this._hasLeftSlot = hasIcon;
-        break;
-      case "right-icon":
-        this._hasRightSlot = hasIcon;
-        break;
+
+    input::-ms-clear {
+      display: none !important;
+    }
+
+    :host([readonly]:not([disabled])) input {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
     }
-  }
-  _handleInput(event) {
-    this.value = event.target.value;
-  }
-  _handleClearClick() {
-    this.value = "";
-    this.dispatchEvent(
-      new Event("input", {
-        bubbles: true,
-        composed: true
-      })
-    );
-    this.dispatchEvent(
-      new Event("change", {
-        bubbles: true
-      })
-    );
-  }
-  _handleKeyDown(event) {
-    if (this.type === "number") {
-      if (isSimpleKey.isSimpleKeyEvent(event) && event.key.length === 1) {
-        const { value, selectionStart, selectionEnd } = event.target;
-        const selectionText = value.substring(
-          selectionStart ?? 0,
-          selectionEnd ?? 0
-        );
-        if (/^[0-9]$/.test(event.key)) {
-          return;
-        }
-        if (event.key === "-") {
-          if ((!value.includes("-") || selectionText.includes("-")) && selectionStart === 0) {
-            return;
-          }
-        }
-        if (event.key === ".") {
-          if (!value.includes(".") || selectionText.includes(".")) {
-            return;
-          }
-        }
-        event.preventDefault();
-        return;
-      }
-      const direction = {
-        ArrowUp: 1,
-        ArrowDown: -1
-      }[event.key];
-      if (direction != null) {
-        event.preventDefault();
-        this._updateNumberValue(direction);
-      }
+
+    :host([readonly]:not([disabled])) input:hover,
+    :host([readonly]:not([disabled])) input:active {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
     }
-  }
-  _updateNumberValue(sign) {
-    const newValue = numberUtils.updateNumberValue(this.value, sign, {
-      step: this.step,
-      stepMode: this.stepMode,
-      min: this.min,
-      max: this.max
-    });
-    if (newValue === this.value) {
-      return;
+
+    :host([readonly][error]:not([disabled])) input,
+    :host([readonly][error]:not([disabled])) input:hover,
+    :host([readonly][error]:not([disabled])) input:active {
+      --color-base: var(--dds-color-common-danger-default);
     }
-    this.value = newValue;
-    this.dispatchEvent(
-      new Event("input", {
-        bubbles: true,
-        composed: true
-      })
-    );
-    this.dispatchEvent(
-      new Event("change", {
-        bubbles: true
-      })
-    );
-  }
-  _createIcon() {
-    const leftIconSlot = lit.html`<span
+  `;
+	}
+	/**
+	* Focuses on the inner input.
+	* @param options focus options
+	*/
+	focus(options) {
+		this._inputRef.value?.focus(options);
+	}
+	_handleChange(event) {
+		this.dispatchEvent(new Event("change", event));
+	}
+	_handleSlotChange(event) {
+		const target = event.target;
+		const name = target.name;
+		const hasIcon = !!target.assignedNodes().length;
+		switch (name) {
+			case "left-icon":
+				this._hasLeftSlot = hasIcon;
+				break;
+			case "right-icon": this._hasRightSlot = hasIcon;
+		}
+	}
+	_handleInput(event) {
+		this.value = event.target.value;
+	}
+	_handleClearClick() {
+		this.value = "";
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+	_handleKeyDown(event) {
+		if (this.type === "number") {
+			if (require_is_simple_key.isSimpleKeyEvent(event) && event.key.length === 1) {
+				const { value, selectionStart, selectionEnd } = event.target;
+				const selectionText = value.substring(selectionStart ?? 0, selectionEnd ?? 0);
+				if (/^[0-9]$/.test(event.key)) return;
+				if (event.key === "-") {
+					if ((!value.includes("-") || selectionText.includes("-")) && selectionStart === 0) return;
+				}
+				if (event.key === ".") {
+					if (!value.includes(".") || selectionText.includes(".")) return;
+				}
+				event.preventDefault();
+				return;
+			}
+			const direction = {
+				ArrowUp: 1,
+				ArrowDown: -1
+			}[event.key];
+			if (direction != null) {
+				event.preventDefault();
+				this._updateNumberValue(direction);
+			}
+		}
+	}
+	_updateNumberValue(sign) {
+		const newValue = require_number_utils.updateNumberValue(this.value, sign, {
+			step: this.step,
+			stepMode: this.stepMode,
+			min: this.min,
+			max: this.max
+		});
+		if (newValue === this.value) return;
+		this.value = newValue;
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+	_createIcon() {
+		const leftIconSlot = lit.html`<span
       class=${cvaIcon({
-      icon: "left",
-      disabled: this.disabled
-    })}
+			icon: "left",
+			disabled: this.disabled
+		})}
     >
       <slot
         name="left-icon"
@@ -266,11 +254,11 @@ exports.DaikinTextField = class DaikinTextField extends ddsFormElement.DDSFormEl
         @slotchange=${this._handleSlotChange}
       ></slot>
     </span>`;
-    const rightIconSlot = lit.html`<span
+		const rightIconSlot = lit.html`<span
       class=${cvaIcon({
-      icon: "right",
-      disabled: this.disabled
-    })}
+			icon: "right",
+			disabled: this.disabled
+		})}
     >
       <slot
         name="right-icon"
@@ -278,9 +266,8 @@ exports.DaikinTextField = class DaikinTextField extends ddsFormElement.DDSFormEl
         @slotchange=${this._handleSlotChange}
       ></slot>
     </span>`;
-    switch (this.type) {
-      case "number":
-        return lit.html`${leftIconSlot}
+		switch (this.type) {
+			case "number": return lit.html`${leftIconSlot}
         ${this.readonly && !this.disabled ? lit.nothing : lit.html`<span class="inline-flex items-center gap-1 absolute right-2">
               <daikin-icon-button
                 class="size-(--dds-icon-button)"
@@ -309,8 +296,7 @@ exports.DaikinTextField = class DaikinTextField extends ddsFormElement.DDSFormEl
                 ></span>
               </daikin-icon-button>
             </span>`}`;
-      case "password":
-        return lit.html`${leftIconSlot}${this.readonly && !this.disabled ? lit.nothing : lit.html`<daikin-icon-button
+			case "password": return lit.html`${leftIconSlot}${this.readonly && !this.disabled ? lit.nothing : lit.html`<daikin-icon-button
               color="neutral"
               variant="ghost"
               ?disabled=${this.disabled}
@@ -319,17 +305,14 @@ exports.DaikinTextField = class DaikinTextField extends ddsFormElement.DDSFormEl
               @click=${this._handleShowPasswordClick}
             >
               <span
-                class=${cvaShowPasswordIcon({
-          showPassword: this.showPassword
-        })}
+                class=${cvaShowPasswordIcon({ showPassword: this.showPassword })}
               ></span>
             </daikin-icon-button>`}`;
-      case "search":
-        return lit.html`<span
+			case "search": return lit.html`<span
             class=${cvaIcon({
-          icon: "left",
-          disabled: this.disabled
-        })}
+				icon: "left",
+				disabled: this.disabled
+			})}
           >
             <span class="icon-[daikin--search] size-(--dds-icon)"></span>
           </span>
@@ -343,44 +326,37 @@ exports.DaikinTextField = class DaikinTextField extends ddsFormElement.DDSFormEl
               >
                 <span class="icon-[daikin--close] size-(--dds-icon)"></span>
               </daikin-icon-button>` : lit.nothing}`;
-      default:
-        return lit.html`${leftIconSlot}${rightIconSlot}`;
-    }
-  }
-  _handleShowPasswordClick() {
-    this.showPassword = !this.showPassword;
-    this.dispatchEvent(new Event("toggle"));
-  }
-  render() {
-    const error = !this.disabled && this.error;
-    const type = this.type === "password" && this.showPassword ? "text" : this.type === "number" ? "text" : this.type;
-    const role = this.type === "number" ? "spinbutton" : void 0;
-    const inputMode = this.type === "number" ? "numeric" : void 0;
-    return lit.html`<input
-        ${ref_js.ref(this._inputRef)}
+			default: return lit.html`${leftIconSlot}${rightIconSlot}`;
+		}
+	}
+	_handleShowPasswordClick() {
+		this.showPassword = !this.showPassword;
+		this.dispatchEvent(new Event("toggle"));
+	}
+	render() {
+		const error = !this.disabled && this.error;
+		const type = this.type === "password" && this.showPassword ? "text" : this.type === "number" ? "text" : this.type;
+		const role = this.type === "number" ? "spinbutton" : void 0;
+		const inputMode = this.type === "number" ? "numeric" : void 0;
+		return lit.html`<input
+        ${(0, lit_directives_ref_js.ref)(this._inputRef)}
         class=${cvaInput({
-      error,
-      leftIcon: this._hasLeftSlot,
-      rightIcon: this._hasRightSlot,
-      type: this.type
-    })}
-        role=${ifDefined_js.ifDefined(role)}
+			error,
+			leftIcon: this._hasLeftSlot,
+			rightIcon: this._hasRightSlot,
+			type: this.type
+		})}
+        role=${(0, lit_directives_if_defined_js.ifDefined)(role)}
         type=${type}
-        inputmode=${ifDefined_js.ifDefined(inputMode)}
-        name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
-        placeholder=${ifDefined_js.ifDefined(this.getBackingProperty("placeholder"))}
-        minlength=${ifDefined_js.ifDefined(this.minlength)}
-        maxlength=${ifDefined_js.ifDefined(this.maxlength)}
-        step=${ifDefined_js.ifDefined(
-      this.type === "number" && this.step != null ? (
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.step
-      ) : void 0
-    )}
-        pattern=${ifDefined_js.ifDefined(this.pattern)}
-        autocomplete=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
-    ifDefined_js.ifDefined(this.autocomplete)}
-        aria-label=${ifDefined_js.ifDefined(this._label)}
+        inputmode=${(0, lit_directives_if_defined_js.ifDefined)(inputMode)}
+        name=${(0, lit_directives_if_defined_js.ifDefined)(this.getBackingProperty("name"))}
+        placeholder=${(0, lit_directives_if_defined_js.ifDefined)(this.getBackingProperty("placeholder"))}
+        minlength=${(0, lit_directives_if_defined_js.ifDefined)(this.minlength)}
+        maxlength=${(0, lit_directives_if_defined_js.ifDefined)(this.maxlength)}
+        step=${(0, lit_directives_if_defined_js.ifDefined)(this.type === "number" && this.step != null ? this.step : void 0)}
+        pattern=${(0, lit_directives_if_defined_js.ifDefined)(this.pattern)}
+        autocomplete=${(0, lit_directives_if_defined_js.ifDefined)(this.autocomplete)}
+        aria-label=${(0, lit_directives_if_defined_js.ifDefined)(this._label)}
         aria-valuemin=${this.type === "number" && this.min != null ? this.min : lit.nothing}
         aria-valuemax=${this.type === "number" && this.max != null ? this.max : lit.nothing}
         aria-valuenow=${this.type === "number" ? this.value : lit.nothing}
@@ -393,125 +369,99 @@ exports.DaikinTextField = class DaikinTextField extends ddsFormElement.DDSFormEl
         @keydown=${this._handleKeyDown}
       />
       ${this._createIcon()}`;
-  }
-  updated(changedProperties) {
-    if (!changedProperties.has("value")) {
-      return;
-    }
-    this.setFormValue(this.value);
-  }
-  /**
-   * This method is used by `daikin-input-group` to reflect it's attributes to this component.
-   * @private
-   */
-  reflectInputGroup(inputGroup) {
-    const isError = !inputGroup.disabled && !!inputGroup.error;
-    this.disabled = !!inputGroup.disabled;
-    this.readonly = !!inputGroup.readonly;
-    this.required = !!inputGroup.required;
-    this.error = isError;
-    this._label = inputGroup.label;
-  }
+	}
+	updated(changedProperties) {
+		if (!changedProperties.has("value")) return;
+		this.setFormValue(this.value);
+	}
+	/**
+	* This method is used by `daikin-input-group` to reflect it's attributes to this component.
+	* @private
+	*/
+	reflectInputGroup(inputGroup) {
+		const isError = !inputGroup.disabled && !!inputGroup.error;
+		this.disabled = !!inputGroup.disabled;
+		this.readonly = !!inputGroup.readonly;
+		this.required = !!inputGroup.required;
+		this.error = isError;
+		this._label = inputGroup.label;
+	}
 };
-exports.DaikinTextField.styles = lit.css`
-    ${lit.unsafeCSS(tailwind.default)}
-
-    :host {
-      display: flex;
-      align-items: center;
-      height: var(--dds-input-height, 3rem);
-      position: relative;
-    }
-
-    input::-ms-reveal {
-      display: none !important;
-    }
-
-    input::-ms-clear {
-      display: none !important;
-    }
-
-    :host([readonly]:not([disabled])) input {
-      --color-base: var(--dds-color-common-surface-secondary);
-      background-color: var(--dds-color-common-surface-secondary);
-    }
-
-    :host([readonly]:not([disabled])) input:hover,
-    :host([readonly]:not([disabled])) input:active {
-      --color-base: var(--dds-color-common-surface-secondary);
-      background-color: var(--dds-color-common-surface-secondary);
-    }
-
-    :host([readonly][error]:not([disabled])) input,
-    :host([readonly][error]:not([disabled])) input:hover,
-    :host([readonly][error]:not([disabled])) input:active {
-      --color-base: var(--dds-color-common-danger-default);
-    }
-  `;
-__decorateClass([
-  ddsProperty.property({ type: String, reflect: true, fallbackValue: "text" })
-], exports.DaikinTextField.prototype, "type", 2);
-__decorateClass([
-  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
-], exports.DaikinTextField.prototype, "placeholder", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinTextField.prototype, "readonly", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinTextField.prototype, "disabled", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinTextField.prototype, "required", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinTextField.prototype, "error", 2);
-__decorateClass([
-  ddsProperty.property({ type: Number, reflect: true })
-], exports.DaikinTextField.prototype, "minlength", 2);
-__decorateClass([
-  ddsProperty.property({ type: Number, reflect: true })
-], exports.DaikinTextField.prototype, "maxlength", 2);
-__decorateClass([
-  ddsProperty.property({ type: String, reflect: true })
-], exports.DaikinTextField.prototype, "step", 2);
-__decorateClass([
-  ddsProperty.property({
-    type: String,
-    reflect: true,
-    fallbackValue: "free",
-    isAllowedValue: ddsProperty.oneOf(["free", "snap"]),
-    attribute: "step-mode"
-  })
-], exports.DaikinTextField.prototype, "stepMode", 2);
-__decorateClass([
-  ddsProperty.property({ type: String, reflect: true })
-], exports.DaikinTextField.prototype, "min", 2);
-__decorateClass([
-  ddsProperty.property({ type: String, reflect: true })
-], exports.DaikinTextField.prototype, "max", 2);
-__decorateClass([
-  ddsProperty.property({ type: String, reflect: true })
-], exports.DaikinTextField.prototype, "pattern", 2);
-__decorateClass([
-  ddsProperty.property({
-    type: String,
-    reflect: true,
-    fallbackValue: ""
-  })
-], exports.DaikinTextField.prototype, "autocomplete", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true, attribute: "show-password" })
-], exports.DaikinTextField.prototype, "showPassword", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.DaikinTextField.prototype, "_label", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.DaikinTextField.prototype, "_hasLeftSlot", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.DaikinTextField.prototype, "_hasRightSlot", 2);
-exports.DaikinTextField = __decorateClass([
-  decorators.ddsElement("daikin-text-field")
-], exports.DaikinTextField);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: "text"
+})], DaikinTextField.prototype, "type", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: ""
+})], DaikinTextField.prototype, "placeholder", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinTextField.prototype, "readonly", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinTextField.prototype, "disabled", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinTextField.prototype, "required", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinTextField.prototype, "error", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Number,
+	reflect: true
+})], DaikinTextField.prototype, "minlength", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Number,
+	reflect: true
+})], DaikinTextField.prototype, "maxlength", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true
+})], DaikinTextField.prototype, "step", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: "free",
+	isAllowedValue: require_dds_property.oneOf(["free", "snap"]),
+	attribute: "step-mode"
+})], DaikinTextField.prototype, "stepMode", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true
+})], DaikinTextField.prototype, "min", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true
+})], DaikinTextField.prototype, "max", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true
+})], DaikinTextField.prototype, "pattern", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: ""
+})], DaikinTextField.prototype, "autocomplete", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true,
+	attribute: "show-password"
+})], DaikinTextField.prototype, "showPassword", void 0);
+require_decorate.default([(0, lit_decorators_js.state)()], DaikinTextField.prototype, "_label", void 0);
+require_decorate.default([(0, lit_decorators_js.state)()], DaikinTextField.prototype, "_hasLeftSlot", void 0);
+require_decorate.default([(0, lit_decorators_js.state)()], DaikinTextField.prototype, "_hasRightSlot", void 0);
+DaikinTextField = require_decorate.default([require_decorators.ddsElement("daikin-text-field")], DaikinTextField);
+//#endregion
+Object.defineProperty(exports, "DaikinTextField", {
+	enumerable: true,
+	get: function() {
+		return DaikinTextField;
+	}
+});