@daikin-oss/design-system-web-components 1.1.0 → 1.2.0

package/dist/cjs/components/slider/daikin-slider.cjs

@@ -0,0 +1,263 @@
+"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 ref_js = require("lit/directives/ref.js");
+const ddsFormElement = require("../../base/dds-form-element.cjs");
+const tailwind = require("../../tailwind.css.cjs");
+const sliderUtils = require("./slider-utils.cjs");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const cvaSliderThumb = classVarianceAuthority.cva(
+  [
+    "absolute",
+    "top-1/2",
+    "-translate-x-1/2",
+    "-translate-y-1/2",
+    "w-4",
+    "h-4",
+    "rounded-full",
+    "left-[--slider-ratio]"
+  ],
+  {
+    variants: {
+      disabled: {
+        false: [
+          "cursor-pointer",
+          "[&:not([data-dragging])]:bg-ddt-color-common-brand-default",
+          "[&:not([data-dragging])]:hover:bg-ddt-color-common-brand-hover",
+          "[&:not([data-dragging])]:active:bg-ddt-color-common-brand-press",
+          "data-[dragging]:bg-ddt-color-common-brand-press",
+          "focus-visible:outline",
+          "focus-visible:outline-2",
+          "focus-visible:outline-offset-2",
+          "focus-visible:outline-ddt-color-common-border-focus"
+        ],
+        true: ["bg-ddt-color-common-disabled", "pointer-events-none"]
+      }
+    }
+  }
+);
+const cvaSliderTrack = classVarianceAuthority.cva(
+  [
+    "absolute",
+    "top-1/2",
+    "-translate-y-1/2",
+    "left-0",
+    "h-1",
+    "w-[--slider-ratio]"
+  ],
+  {
+    variants: {
+      disabled: {
+        false: ["bg-ddt-color-common-brand-default"],
+        true: ["bg-ddt-color-common-border-empty"]
+      }
+    }
+  }
+);
+exports.DaikinSlider = class DaikinSlider extends ddsFormElement.DDSFormElement {
+  constructor() {
+    super();
+    this.min = "1";
+    this.max = "100";
+    this.step = "1";
+    this.disabled = false;
+    this.sliderAriaLabel = "slider";
+    this._dragging = false;
+    this._sliderRef = ref_js.createRef();
+    this._thumbRef = ref_js.createRef();
+    this.value = this.min;
+  }
+  _updateFormValue() {
+    if (this.disabled) {
+      return;
+    }
+    this.setFormValue(this.value);
+    this.dispatchEvent(
+      new Event("change", {
+        bubbles: true,
+        composed: true
+      })
+    );
+    this.dispatchEvent(
+      new Event("input", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  get _progress() {
+    const min = parseFloat(this.min);
+    const max = parseFloat(this.max);
+    const clampedValue = Math.max(min, Math.min(parseFloat(this.value), max));
+    return (clampedValue - min) / (max - min) * 100;
+  }
+  _handleDrag(event) {
+    const leftDistance = this._calcMousePositionRatio(event);
+    if (leftDistance == null) {
+      return;
+    }
+    const value = sliderUtils.getValueFromRatio(this, leftDistance);
+    this.value = value;
+  }
+  // This function is called when an arrow key is pressed while the thumb is focused.
+  _handleKeyDown(event) {
+    if (this.disabled) {
+      return;
+    }
+    const value = sliderUtils.getValueByKeydown(this, event.key);
+    if (value == null) {
+      return;
+    }
+    this.value = value;
+    event.preventDefault();
+  }
+  /**
+   * Returns a normalized value of the mouse position on the slider, in the range 0 to 1.
+   *
+   * @param event A MouseEvent.
+   * @returns The mouse's X coordinate normalized to a range of 0 to 1. The left end and beyond of the slider is 0, and the right end and beyond is 1.
+   */
+  _calcMousePositionRatio(event) {
+    var _a;
+    const box = (_a = this._sliderRef.value) == null ? void 0 : _a.getBoundingClientRect();
+    if (box == null) {
+      return;
+    }
+    const x = event instanceof MouseEvent ? event.clientX : event.targetTouches[0].clientX;
+    const relativeX = x - box.left;
+    return Math.max(0, Math.min(relativeX / box.width, 1));
+  }
+  // This function will triggered when the slider thumb button start dragging.
+  _startDrag(event) {
+    var _a;
+    event.preventDefault();
+    if (this.disabled) {
+      return;
+    }
+    const controller = new AbortController();
+    const { signal } = controller;
+    this._dragging = true;
+    document.addEventListener(
+      "mousemove",
+      (event2) => {
+        this._handleDrag(event2);
+      },
+      { signal }
+    );
+    document.addEventListener(
+      "mouseup",
+      () => {
+        this._dragging = false;
+        controller.abort();
+      },
+      { once: true }
+    );
+    (_a = this._thumbRef.value) == null ? void 0 : _a.focus();
+    this._handleDrag(event);
+  }
+  // This function will triggered when the slider thumb button start dragging.
+  _startTouch(event) {
+    var _a;
+    event.preventDefault();
+    if (this.disabled) {
+      return;
+    }
+    const controller = new AbortController();
+    const { signal } = controller;
+    this._dragging = true;
+    document.addEventListener(
+      "touchmove",
+      (event2) => {
+        this._handleDrag(event2);
+      },
+      { signal }
+    );
+    document.addEventListener(
+      "touchend",
+      () => {
+        this._dragging = false;
+        controller.abort();
+      },
+      { once: true }
+    );
+    (_a = this._thumbRef.value) == null ? void 0 : _a.focus();
+    this._handleDrag(event);
+  }
+  render() {
+    const progress = this._progress;
+    return lit.html`
+      <span
+        ${ref_js.ref(this._sliderRef)}
+        class="w-full h-6 relative"
+        style="--slider-ratio:${progress}%"
+        @mousedown=${this._startDrag}
+        @touchstart=${this._startTouch}
+      >
+        <span
+          class="w-full absolute top-1/2 -translate-y-1/2 left-0 h-1 bg-ddt-color-common-border-empty"
+        ></span>
+        <span class=${cvaSliderTrack({ disabled: this.disabled })}></span>
+        <span
+          ${ref_js.ref(this._thumbRef)}
+          class=${cvaSliderThumb({ disabled: this.disabled })}
+          tabindex=${this.disabled ? -1 : 0}
+          role="slider"
+          ?data-dragging=${this._dragging}
+          aria-valuenow=${this.value}
+          aria-valuemin=${this.min}
+          aria-valuemax=${this.max}
+          aria-label=${this.sliderAriaLabel}
+          aria-disabled=${this.disabled}
+          @mousedown=${this._startDrag}
+          @keydown=${this._handleKeyDown}
+        ></span>
+      </span>
+    `;
+  }
+  updated(changedProperties) {
+    if (!changedProperties.has("value")) {
+      return;
+    }
+    this._updateFormValue();
+  }
+};
+exports.DaikinSlider.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-flex;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinSlider.prototype, "min", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinSlider.prototype, "max", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinSlider.prototype, "step", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinSlider.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "slider-aria-label" })
+], exports.DaikinSlider.prototype, "sliderAriaLabel", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinSlider.prototype, "_dragging", 2);
+exports.DaikinSlider = __decorateClass([
+  decorators_js.customElement("daikin-slider")
+], exports.DaikinSlider);

package/dist/cjs/components/slider/daikin-slider.d.cts

@@ -0,0 +1,67 @@
+import { PropertyValues } from 'lit';
+import { DDSFormElement } from "../../base/dds-form-element.cjs";
+/**
+ * The slider component is a control that allows users to input numerical values within a specific range intuitively.
+ * It functions similarly to the HTML `<input type="range">` tag, allows you to set the range of values.
+ *
+ * @fires change - A retargeted event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input type="range">` element.
+ * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/slider/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-slider name="name" value="1" min="1" max="100" step="1"></daikin-slider>
+ * ```
+ */
+export declare class DaikinSlider extends DDSFormElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * The smallest value in the range of permitted values.
+     */
+    min: string;
+    /**
+     * The largest value in the range of permitted values.
+     */
+    max: string;
+    /**
+     * The step attribute is a number that specifies the granularity that the value must adhere to.
+     */
+    step: string;
+    /**
+     * Specify the slider disabled state.
+     */
+    disabled: boolean;
+    /**
+     * The aria-label of the slider.
+     * You should specify this value based on the slider's use case, such as "air conditioner temperature".
+     */
+    sliderAriaLabel: string;
+    constructor();
+    private _dragging;
+    private _sliderRef;
+    private _thumbRef;
+    private _updateFormValue;
+    private get _progress();
+    private _handleDrag;
+    private _handleKeyDown;
+    /**
+     * Returns a normalized value of the mouse position on the slider, in the range 0 to 1.
+     *
+     * @param event A MouseEvent.
+     * @returns The mouse's X coordinate normalized to a range of 0 to 1. The left end and beyond of the slider is 0, and the right end and beyond is 1.
+     */
+    private _calcMousePositionRatio;
+    private _startDrag;
+    private _startTouch;
+    render(): import('lit-html').TemplateResult<1>;
+    updated(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-slider": DaikinSlider;
+    }
+}

package/dist/cjs/components/slider/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinSlider = require("./daikin-slider.cjs");
+Object.defineProperty(exports, "DaikinSlider", {
+  enumerable: true,
+  get: () => daikinSlider.DaikinSlider
+});

package/dist/cjs/components/slider/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-slider.cjs";

package/dist/cjs/components/slider/slider-utils.cjs

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function normalizeNumberString(str) {
+  return str.replace(new RegExp("(?:\\.0*|(?<=\\.\\d*?)0+)$"), "").replace(new RegExp("(?<=-|^)0+(?=[1-9]|0\\.|0)"), "").replace(/^-0$/, "0");
+}
+function formatValue(value, step) {
+  var _a, _b;
+  const decimals = ((_b = (_a = /\.(\d*?)0*$/.exec(step)) == null ? void 0 : _a[1]) == null ? void 0 : _b.length) ?? 0;
+  const formattedValue = value.toFixed(decimals);
+  return normalizeNumberString(formattedValue);
+}
+function getValueFromRatio(slider, ratio) {
+  const minFloat = parseFloat(slider.min);
+  const maxFloat = parseFloat(slider.max);
+  const stepFloat = parseFloat(slider.step);
+  const rawValue = ratio * (maxFloat - minFloat) + minFloat;
+  const steppedValue = Math.round(rawValue / stepFloat) * stepFloat;
+  if (steppedValue <= minFloat) {
+    return normalizeNumberString(slider.min);
+  }
+  if (steppedValue >= maxFloat) {
+    return normalizeNumberString(slider.max);
+  }
+  return formatValue(steppedValue, slider.step);
+}
+function getValueByKeydown(slider, key) {
+  if (key === "Home") {
+    return slider.min;
+  }
+  if (key === "End") {
+    return slider.max;
+  }
+  const offset = {
+    ArrowLeft: -1,
+    ArrowDown: -1,
+    ArrowRight: 1,
+    ArrowUp: 1,
+    PageDown: -10,
+    PageUp: 10
+  }[key];
+  if (!offset) {
+    return;
+  }
+  const minFloat = parseFloat(slider.min);
+  const maxFloat = parseFloat(slider.max);
+  const stepFloat = parseFloat(slider.step);
+  const valueFloat = parseFloat(slider.value);
+  const clampedValue = Math.max(
+    minFloat,
+    Math.min(maxFloat, valueFloat + stepFloat * offset)
+  );
+  return formatValue(clampedValue, slider.step);
+}
+exports.formatValue = formatValue;
+exports.getValueByKeydown = getValueByKeydown;
+exports.getValueFromRatio = getValueFromRatio;
+exports.normalizeNumberString = normalizeNumberString;

package/dist/cjs/components/slider/slider-utils.d.cts

@@ -0,0 +1,37 @@
+import { DaikinSlider } from "./daikin-slider.cjs";
+/**
+ * Returns a normalized numerical representation.
+ *
+ * - Removes trailing zeros from the decimal part.
+ * - Removes the decimal point if it becomes the last character.
+ * - Removes leading zeros from the integer part.
+ *
+ * @param str A numeric string.
+ * @returns Formatted value.
+ */
+export declare function normalizeNumberString(str: string): string;
+/**
+ * This function is used to handle floating-point errors in calculations.
+ * Ensuring that the number of decimal places matches the decimal places of the step value.
+ *
+ * @param value The current value.
+ * @param step The step value.
+ * @returns Formatted current value.
+ */
+export declare function formatValue(value: number, step: string): string;
+/**
+ * Get the current value and track bar's progress percentage from the distance to the left.
+ *
+ * @param slider The daikin-slider instance.
+ * @param ratio The ratio of the slider value (0-1).
+ * @returns Current value.
+ */
+export declare function getValueFromRatio(slider: DaikinSlider, ratio: number): string;
+/**
+ * Get the current value and track bar's progress percentage when use keyboard.
+ *
+ * @param slider The daikin-slider instance.
+ * @param moveOffset The number of thumb icon's move offset.
+ * @returns Current value.
+ */
+export declare function getValueByKeydown(slider: DaikinSlider, key: string): string | undefined;

package/dist/cjs/components/table/daikin-table.cjs

@@ -4,6 +4,7 @@ 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");
 const repeat_js = require("lit/directives/repeat.js");
 const ddsElement = require("../../base/dds-element.cjs");
 const decorators = require("../../base/decorators.cjs");
@@ -35,10 +36,14 @@ const cvaRow = classVarianceAuthority.cva(
   {
     variants: {
       selected: {
-        false: ["hover:bg-ddt-color-common-surface-hover"],
+        false: [
+          "group-[:not([data-hover])]:media-hover:bg-ddt-color-common-surface-hover",
+          "data-[hover]:bg-ddt-color-common-surface-hover"
+        ],
         true: [
           "bg-ddt-color-common-surface-selected-default",
-          "hover:bg-ddt-color-common-surface-selected-hover"
+          "group-[:not([data-hover])]:media-hover:bg-ddt-color-common-surface-selected-hover",
+          "data-[hover]:bg-ddt-color-common-surface-selected-hover"
         ]
       }
     }
@@ -57,6 +62,8 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
     this.sortFunction = null;
     this._bulkRowsCheckState = "unchecked";
     this._currentView = [];
+    this._currentTouchHoverRowId = null;
+    this._tableRef = ref_js.createRef();
   }
   _updateCurrentView() {
     var _a;
@@ -104,6 +111,23 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
     }
     this.dispatchEvent(new Event("change-sort"));
   }
+  _handleTouchMove(event) {
+    var _a;
+    const touch = event.touches[0];
+    const row = touch && ((_a = (this.shadowRoot ?? document).elementsFromPoint(touch.clientX, touch.clientY).find(
+      (element) => {
+        var _a2;
+        return ((_a2 = this._tableRef.value) == null ? void 0 : _a2.contains(element)) && element.closest("tr");
+      }
+    )) == null ? void 0 : _a.closest("tr"));
+    this._currentTouchHoverRowId = (row == null ? void 0 : row.dataset.id) ?? null;
+  }
+  _handleTouchStart(event) {
+    this._handleTouchMove(event);
+  }
+  _handleTouchEnd() {
+    this._currentTouchHoverRowId = null;
+  }
   _updateHeaderCheckboxState() {
     const rowIdSet = new Set(this.rows.map(({ id }) => id));
     this.selection = this.selection.filter((id) => rowIdSet.has(id));
@@ -145,7 +169,11 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
           </td>`
     );
     return lit.html`<div class="flex flex-col gap-6 w-full font-daikinSerif">
-      <table class="w-full">
+      <table
+        ${ref_js.ref(this._tableRef)}
+        class="w-full group"
+        ?data-hover=${this._currentTouchHoverRowId != null}
+      >
         <thead>
           <tr class="border-b border-b-ddt-color-divider">
             ${this.selectable ? lit.html`<td class="w-12 p-0">
@@ -164,7 +192,11 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
             ${createHeaderRow()}
           </tr>
         </thead>
-        <tbody>
+        <tbody
+          @touchstart=${this._handleTouchStart}
+          @touchmove=${this._handleTouchMove}
+          @touchend=${this._handleTouchEnd}
+        >
           ${repeat_js.repeat(
       this._currentView,
       ({ id }) => id,
@@ -172,6 +204,8 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
                 class=${cvaRow({
         selected: this.selectable && !!this.selection.find((id) => id === row.id)
       })}
+                data-id=${row.id}
+                ?data-hover=${this._currentTouchHoverRowId === row.id}
               >
                 ${this.selectable ? lit.html`<td class="w-12 p-0">
                       <span
@@ -214,6 +248,7 @@ exports.DaikinTable.styles = lit.css`
     :host {
       display: block;
       width: 100%;
+      overflow: scroll;
     }
   `;
 __decorateClass([
@@ -246,6 +281,9 @@ __decorateClass([
 __decorateClass([
   decorators_js.state()
 ], exports.DaikinTable.prototype, "_currentView", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinTable.prototype, "_currentTouchHoverRowId", 2);
 exports.DaikinTable = __decorateClass([
   decorators.ddsElement("daikin-table")
 ], exports.DaikinTable);

package/dist/cjs/components/table/daikin-table.d.cts

@@ -119,11 +119,16 @@ export declare class DaikinTable<T extends {
      * Currently this is a sorted `rows`, but pagination may be considered in the future.
      */
     private _currentView;
+    private _currentTouchHoverRowId;
+    private _tableRef;
     private _updateCurrentView;
     private _emitChangeCheckEvent;
     private _handleHeaderCheckboxChange;
     private _handleBodyCheckboxChange;
     private _handleClickSort;
+    private _handleTouchMove;
+    private _handleTouchStart;
+    private _handleTouchEnd;
     private _updateHeaderCheckboxState;
     render(): import('lit-html').TemplateResult<1>;
     protected willUpdate(changedProperties: PropertyValues<this>): void;

package/dist/cjs/components/table-cell/daikin-table-cell.cjs

@@ -27,7 +27,8 @@ const cvaCell = classVarianceAuthority.cva(
     "min-h-12",
     "px-4",
     "py-3",
-    "text-ddt-color-common-text-primary"
+    "text-ddt-color-common-text-primary",
+    "break-all"
   ],
   {
     variants: {

package/dist/cjs/components/table-cell/daikin-table-cell.d.cts

@@ -1,7 +1,7 @@
 import { DDSElement } from "../../base/index.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaCell: (props?: ({
-    alignment?: "right" | "left" | "center" | null | undefined;
+    alignment?: "center" | "right" | "left" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type TableCellVariantProps = MergeVariantProps<typeof cvaCell>;
 /**

package/dist/cjs/components/table-header-cell/daikin-table-header-cell.d.cts

@@ -1,7 +1,7 @@
 import { DDSElement } from "../../base/index.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaHeaderCell: (props?: ({
-    alignment?: "right" | "left" | "center" | null | undefined;
+    alignment?: "center" | "right" | "left" | null | undefined;
     sortable?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type TableHeaderCellVariantProps = MergeVariantProps<typeof cvaHeaderCell>;

package/dist/cjs/components/tabs/daikin-tabs.cjs

@@ -6,7 +6,7 @@ const ddsElement = require("../../base/dds-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
-const scroller = require("./scroller.cjs");
+const scroller = require("../../utils/scroller.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators2, target, key, kind) => {
@@ -89,7 +89,7 @@ exports.DaikinTabs = class DaikinTabs extends ddsElement.DDSElement {
     if (!selectedTab) {
       return;
     }
-    scroller.scrollIntoViewOnlyParent(selectedTab);
+    scroller.scrollIntoViewOnlyParent(selectedTab, "horizontal", false);
   }
   _updateTabStyle() {
     const tabs = this._tabs;

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

@@ -4,9 +4,10 @@ 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 ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
+const ddsFormElement = require("../../base/dds-form-element.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -67,12 +68,9 @@ const cvaTextArea = classVarianceAuthority.cva(
     }
   }
 );
-exports.DaikinTextArea = class DaikinTextArea extends ddsElement.DDSElement {
+exports.DaikinTextArea = class DaikinTextArea extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
-    this._internals = this.attachInternals();
-    this.value = "";
-    this.name = "";
     this.placeholder = null;
     this.disabled = false;
     this.readonly = false;
@@ -85,7 +83,7 @@ exports.DaikinTextArea = class DaikinTextArea extends ddsElement.DDSElement {
     return this.value.length;
   }
   _updateValue(value) {
-    this._internals.setFormValue(value);
+    this.setFormValue(value);
   }
   _handleInput(e) {
     this.value = e.target.value;
@@ -139,13 +137,6 @@ exports.DaikinTextArea.styles = lit.css`
       position: relative;
     }
   `;
-exports.DaikinTextArea.formAssociated = true;
-__decorateClass([
-  decorators_js.property({ type: String })
-], exports.DaikinTextArea.prototype, "value", 2);
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinTextArea.prototype, "name", 2);
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinTextArea.prototype, "placeholder", 2);