@daikin-oss/design-system-web-components 1.1.0 → 1.3.0-next.2

package/dist/es-dev/components/table/daikin-table.d.ts

@@ -9,9 +9,11 @@ export type HeaderType<T extends string = string> = {
 /**
  * The table component is a component that can display multiple data objects in a tabular format.
  *
- * It is modeled on the HTML `<table>` element. However, unlike a normal `<table>` element, this component does not require its child elements to have cells. Instead, it can be made to function as a table by giving the properties `headers` and `rows` appropriate arrays.
+ * It is modeled on the HTML `<table>` element. However, unlike a normal `<table>` element, this component generates table structure automatically from data. You must provide the `headers` and `rows` properties to define the table structure and content. You can also customize table cell content by providing custom content in slots.
  *
- * If the contents of the table are plain text only, give them to the `rows` property. However, if you want to give contents other than text, such as buttons or images, you will need to prepare a element with the corresponding `slot` attribute. The value of this attribute must be structured as follows: ``slot=${`cell:${headers[i].key}:${rows[i].id}`}``
+ * By specifying the `rows` property, you can only display plain text content. If you need to display richer content within the row cells, such as an icon or a button, provide custom content using the cell slot pattern: ``slot=${`cell:${rows[j].id}:${headers[i].key}`}``
+ *
+ * By specifying the headers property, you can only display plain text, define text alignment and sorting buttons. If you need to display richer content within the header cells, such as an icon or a button, provide custom content using the cell slot pattern: ``slot=${`header:${headers[i].key}`}``
  *
  * The table provides two functions: checkboxes and sorting, and you can select the functions you need.
  *
@@ -34,19 +36,8 @@ export type HeaderType<T extends string = string> = {
  * ```
  *
  * ```html
- * <daikin-table
- *   .headers="[
- *     { key: 'name', label: 'Name', sortable: true },
- *     { key: 'season', label: 'Season', sortable: true },
- *     { key: 'price', label: 'Price', alignment: 'right', sortable: false },
- *   ]"
- *   .rows="[
- *     { id: '1', name: 'Apple', season: 'Autumn', price: '$2' },
- *     { id: '2', name: 'Peach', season: 'Summer', price: '$4' },
- *     { id: '3', name: 'Orange', season: 'Winter', price: '$1' },
- *     { id: '4', name: 'Strawberry', season: 'Spring', price: '$4' },
- *   ]"
- * >
+ * <daikin-table>
+ *   <!-- By using a slot, you can add a subtitle below the content in the name column for each row. -->
  *   <daikin-table-cell slot="cell:1:name">
  *     Apple
  *     <span slot="subtitle">This is a autumn fruit.</span>
@@ -64,6 +55,22 @@ export type HeaderType<T extends string = string> = {
  *     <span slot="subtitle">This is a spring fruit.</span>
  *   </daikin-table-cell>
  * </daikin-table>
+ *
+ * <script>
+ *   // Set up the table data
+ *   const tableElement = document.querySelector('daikin-table');
+ *   tableElement.headers = [
+ *     { key: 'name', label: 'Name', sortable: true },
+ *     { key: 'season', label: 'Season', sortable: true },
+ *     { key: 'price', label: 'Price', alignment: 'right', sortable: false },
+ *   ];
+ *   tableElement.rows = [
+ *     { id: '1', name: 'Apple', season: 'Autumn', price: '$2' },
+ *     { id: '2', name: 'Peach', season: 'Summer', price: '$4' },
+ *     { id: '3', name: 'Orange', season: 'Winter', price: '$1' },
+ *     { id: '4', name: 'Strawberry', season: 'Spring', price: '$4' },
+ *   ];
+ * </script>
  * ```
  */
 export declare class DaikinTable<T extends {
@@ -72,59 +79,90 @@ export declare class DaikinTable<T extends {
     static readonly styles: import('lit').CSSResult;
     /**
      * Headers of the table.
-     * - key: The value of `key` corresponds to the key, excluding the id of rows. As a whole array, the value of `key` must be unique. Also, only use alphanumeric characters, `$`, and `_` in the `key`.
-     * - label: This is the text that is displayed in the header cells.
-     * - alignment: The direction in which the characters are aligned can be omitted. If it is omitted, the characters will be aligned to the left.
-     * - sortable: If sortable (`sortable = true`), this specifies whether sorting is performed on this column.
+     * An array of header configuration objects that define the table columns.
+     * Each object must have a unique `key` (used to match row data) and a `label` (displayed text).
+     *
+     * - key: The `key` value corresponds to the property name in the row data (excluding `id`). All `key` values must be unique within the headers array. Use only alphanumeric characters, `$`, and `_` in the `key`.
+     * - label: The text displayed in the header cells.
+     * - alignment: The text alignment direction. Defaults to left alignment if omitted.
+     * - sortable: When `sortable = true`, enables sorting for this column.
+     *
+     * @example
+     * [
+     *   { key: 'name', label: 'Name', sortable: true },
+     *   { key: 'price', label: 'Price', alignment: 'right', sortable: false },
+     * ]
      */
     headers: readonly HeaderType<Extract<keyof T, string>>[];
     /**
      * Rows of the table.
-     * An array that uses the element `key` in the column as the key and stores the corresponding value.
-     * As a whole array, the value of `id` should be unique.
+     * An array of data objects where each object represents a table row.
+     * Each object must have a unique `id` property and properties that match the `key` values defined in `headers`.
+     *
+     * @example
+     * [
+     *   { id: '1', name: 'Apple', price: '$2' },
+     *   { id: '2', name: 'Orange', price: '$1' },
+     * ]
      */
     rows: T[];
     /**
-     * Whether or not to enable selection of rows.
-     * If `true`, a checkbox will be displayed to the left of each row.
+     * Whether to enable row selection.
+     * When `true`, a checkbox will be displayed to the left of each row.
      */
     selectable: boolean;
     /**
-     * Whether or not to enable sorting of the rows.
-     * If `true`, a button for sorting will be displayed to the right of each header cell text.
+     * Whether to enable row sorting.
+     * When `true`, a sort button will be displayed to the right of each sortable header cell.
      */
     sortable: boolean;
     /**
-     * An array of `id`s for the `rows` that have been checked.
+     * An array of `id` values for the selected rows.
      */
     selection: string[];
-    /**
-     * Sort order of the table.
-     */
-    order: "asc" | "desc" | null;
     /**
      * The `key` of the currently sorted column.
+     * Used with the `order` property to determine which column is sorted and in which direction.
+     *
+     * For example, if `sort = "name"` and `order = "asc"`, the table will be sorted by the "name" column in ascending order.
      */
     sort: keyof T | null;
     /**
-     * Specify this when you want to customize the sort function.
-     * The function must be ascending, and the return value must be `0`, `1` or `-1`.
+     * The sort order of the table.
+     * Used with the `sort` property.
+     *
+     * - "asc": ascending order
+     * - "desc": descending order
+     *
+     * For example, if `sort = "price"` and `order = "desc"`, the table will be sorted by the "price" column in descending order.
+     */
+    order: "asc" | "desc" | null;
+    /**
+     * Custom sort function for table columns.
+     * The function should return a comparison result for ascending order: `0`, `1`, or `-1`.
      */
     sortFunction: {
         [key in keyof T]?: (a: T, b: T, key: key) => number;
     } | ((a: T, b: T, key: keyof T) => number) | false | null;
     private _bulkRowsCheckState;
     /**
-     * The rows displayed in the current table.
-     * Currently this is a sorted `rows`, but pagination may be considered in the future.
+     * The rows currently displayed in the table.
+     * This is a sorted version of `rows`. Pagination may be added 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;
+    private _reflectSlotProperties;
+    private _handleSlotChange;
     render(): import('lit-html').TemplateResult<1>;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected updated(changedProperties: PropertyValues<this>): void;

package/dist/es-dev/components/table/daikin-table.js

@@ -1,7 +1,8 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html, nothing } from "lit";
+import { unsafeCSS, css, nothing, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import { repeat } from "lit/directives/repeat.js";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
@@ -33,10 +34,14 @@ const cvaRow = 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"
         ]
       }
     }
@@ -50,11 +55,13 @@ let DaikinTable = class extends DDSElement {
     this.selectable = false;
     this.sortable = false;
     this.selection = [];
-    this.order = null;
     this.sort = null;
+    this.order = null;
     this.sortFunction = null;
     this._bulkRowsCheckState = "unchecked";
     this._currentView = [];
+    this._currentTouchHoverRowId = null;
+    this._tableRef = createRef();
   }
   _updateCurrentView() {
     var _a;
@@ -102,34 +109,70 @@ let DaikinTable = class extends 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));
     const selectionCount = this.selection.length;
     this._bulkRowsCheckState = this._currentView.length === selectionCount ? "checked" : selectionCount ? "indeterminate" : "unchecked";
   }
+  _reflectSlotProperties() {
+    var _a;
+    for (const { key } of this.headers) {
+      const headerCell = (_a = (this.shadowRoot ?? this).querySelector(
+        `slot[name="header:${CSS.escape(String(key))}"]`
+      )) == null ? void 0 : _a.assignedElements()[0];
+      if ((headerCell == null ? void 0 : headerCell.tagName) !== "DAIKIN-TABLE-HEADER-CELL") {
+        continue;
+      }
+      headerCell.order = this.sort === key ? this.order : null;
+    }
+  }
+  _handleSlotChange() {
+    this._reflectSlotProperties();
+  }
   render() {
     const createHeaderRow = () => repeat(
       this.headers,
       ({ key }) => key,
-      ({ key, label, alignment, sortable }) => html`<th
+      ({ key, label, alignment, sortable }) => {
+        const currentSort = this.sortable && this.sort === key ? this.order === "asc" ? "ascending" : "descending" : void 0;
+        return html`<th
             class="h-full p-0"
-            aria-sort=${ifDefined(
-        this.sortable && this.sort === key ? this.order === "asc" ? "ascending" : "descending" : void 0
-      )}
+            aria-sort=${ifDefined(currentSort)}
           >
             <slot
               name=${`header:${key}`}
+              data-key=${key}
               @change-sort=${(event) => this._handleClickSort(event, key)}
+              @slotchange=${this._handleSlotChange}
             >
               <daikin-table-header-cell
                 alignment=${alignment ?? "left"}
                 ?sortable=${this.sortable && sortable}
+                order=${ifDefined(currentSort && this.order)}
               >
                 ${label}
               </daikin-table-header-cell>
             </slot>
-          </th>`
+          </th>`;
+      }
     );
     const createRow = (item) => repeat(
       this.headers,
@@ -143,7 +186,11 @@ let DaikinTable = class extends DDSElement {
           </td>`
     );
     return html`<div class="flex flex-col gap-6 w-full font-daikinSerif">
-      <table class="w-full">
+      <table
+        ${ref(this._tableRef)}
+        class="w-full group"
+        ?data-hover=${this._currentTouchHoverRowId != null}
+      >
         <thead>
           <tr class="border-b border-b-ddt-color-divider">
             ${this.selectable ? html`<td class="w-12 p-0">
@@ -162,7 +209,11 @@ let DaikinTable = class extends DDSElement {
             ${createHeaderRow()}
           </tr>
         </thead>
-        <tbody>
+        <tbody
+          @touchstart=${this._handleTouchStart}
+          @touchmove=${this._handleTouchMove}
+          @touchend=${this._handleTouchEnd}
+        >
           ${repeat(
       this._currentView,
       ({ id }) => id,
@@ -170,6 +221,8 @@ let DaikinTable = class extends 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 ? html`<td class="w-12 p-0">
                       <span
@@ -192,7 +245,7 @@ let DaikinTable = class extends DDSElement {
     </div>`;
   }
   willUpdate(changedProperties) {
-    const viewChanged = changedProperties.has("rows") || changedProperties.has("sort") || changedProperties.has("order") || changedProperties.has("sortFunction");
+    const viewChanged = changedProperties.has("headers") || changedProperties.has("rows") || changedProperties.has("sort") || changedProperties.has("order") || changedProperties.has("sortFunction");
     const selectionChanged = changedProperties.has("selection");
     if (viewChanged) {
       this._updateCurrentView();
@@ -202,20 +255,22 @@ let DaikinTable = class extends DDSElement {
     }
   }
   updated(changedProperties) {
-    if (changedProperties.has("headers")) {
-      {
+    {
+      if (changedProperties.has("headers")) {
         if (this.headers.length !== [...new Set(this.headers.map(({ key }) => key))].length) {
           console.warn("The `key` values in `headers` are duplicated");
         }
       }
-    }
-    if (changedProperties.has("rows")) {
-      {
+      if (changedProperties.has("rows")) {
         if (this.rows.length !== [...new Set(this.rows.map(({ id }) => id))].length) {
           console.warn("The `id` values in `rows` are duplicated");
         }
       }
     }
+    const sortChanged = changedProperties.has("headers") || changedProperties.has("sort") || changedProperties.has("order");
+    if (sortChanged) {
+      this._reflectSlotProperties();
+    }
   }
 };
 DaikinTable.styles = css`
@@ -224,6 +279,7 @@ DaikinTable.styles = css`
     :host {
       display: block;
       width: 100%;
+      overflow: auto;
     }
   `;
 __decorateClass([
@@ -243,10 +299,10 @@ __decorateClass([
 ], DaikinTable.prototype, "selection", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], DaikinTable.prototype, "order", 2);
+], DaikinTable.prototype, "sort", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], DaikinTable.prototype, "sort", 2);
+], DaikinTable.prototype, "order", 2);
 __decorateClass([
   property({ attribute: false })
 ], DaikinTable.prototype, "sortFunction", 2);
@@ -256,6 +312,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], DaikinTable.prototype, "_currentView", 2);
+__decorateClass([
+  state()
+], DaikinTable.prototype, "_currentTouchHoverRowId", 2);
 DaikinTable = __decorateClass([
   ddsElement("daikin-table")
 ], DaikinTable);

package/dist/es-dev/components/table-cell/daikin-table-cell.d.ts

@@ -1,7 +1,7 @@
 import { DDSElement } from "../../base/index.js";
 import { MergeVariantProps } from "../../type-utils.js";
 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/es-dev/components/table-cell/daikin-table-cell.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
@@ -25,7 +25,8 @@ const cvaCell = 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/es-dev/components/table-header-cell/daikin-table-header-cell.d.ts

@@ -1,8 +1,9 @@
 import { DDSElement } from "../../base/index.js";
 import { MergeVariantProps } from "../../type-utils.js";
 declare const cvaHeaderCell: (props?: ({
-    alignment?: "right" | "left" | "center" | null | undefined;
+    alignment?: "center" | "right" | "left" | null | undefined;
     sortable?: boolean | null | undefined;
+    order?: "desc" | "asc" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type TableHeaderCellVariantProps = MergeVariantProps<typeof cvaHeaderCell>;
 /**
@@ -44,6 +45,12 @@ export declare class DaikinTableHeaderCell extends DDSElement {
      * It also makes the component emit the `change-sort` event when clicked.
      */
     sortable: boolean;
+    /**
+     * The current sort order of the column.
+     * Can be "asc", "desc", or null if not sorted.
+     * Controlled by `daikin-table`.
+     */
+    order: TableHeaderCellVariantProps["order"] | null;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/es-dev/components/table-header-cell/daikin-table-header-cell.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
@@ -44,11 +44,31 @@ const cvaHeaderCell = cva(
           "focus-visible:-outline-offset-2",
           "focus-visible:outline-ddt-color-common-border-focus",
           "after:flex-none",
-          "after:size-6",
-          "after:i-daikin-sort"
+          "after:size-6"
         ]
+      },
+      order: {
+        asc: [],
+        desc: []
       }
-    }
+    },
+    compoundVariants: [
+      {
+        sortable: true,
+        order: null,
+        class: ["after:i-daikin-sort"]
+      },
+      {
+        sortable: true,
+        order: "asc",
+        class: ["after:i-daikin-chevron-up"]
+      },
+      {
+        sortable: true,
+        order: "desc",
+        class: ["after:i-daikin-chevron-up", "after:rotate-180"]
+      }
+    ]
   }
 );
 let DaikinTableHeaderCell = class extends DDSElement {
@@ -56,14 +76,16 @@ let DaikinTableHeaderCell = class extends DDSElement {
     super(...arguments);
     this.alignment = "left";
     this.sortable = false;
+    this.order = null;
   }
   render() {
     const headerCellCN = cvaHeaderCell({
       alignment: this.alignment,
-      sortable: this.sortable
+      sortable: this.sortable,
+      order: this.order === "asc" || this.order === "desc" ? this.order : null
     });
-    const content = html`<slot name="left-icon" class="icon-size-6"></slot>
-      <slot></slot>`;
+    const content = html`<slot name="left-icon" class="icon-size-6"></slot
+      ><slot></slot>`;
     return this.sortable ? html`<button
           type="button"
           class=${headerCellCN}
@@ -88,6 +110,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinTableHeaderCell.prototype, "sortable", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTableHeaderCell.prototype, "order", 2);
 DaikinTableHeaderCell = __decorateClass([
   ddsElement("daikin-table-header-cell")
 ], DaikinTableHeaderCell);

package/dist/es-dev/components/tabs/daikin-tabs.js

@@ -1,10 +1,10 @@
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, queryAssignedElements } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
-import { scrollIntoViewOnlyParent } from "./scroller.js";
+import { scrollIntoViewOnlyParent } from "../../utils/scroller.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -92,7 +92,7 @@ let DaikinTabs = class extends DDSElement {
       }
       return;
     }
-    scrollIntoViewOnlyParent(selectedTab);
+    scrollIntoViewOnlyParent(selectedTab, "horizontal", false);
   }
   _updateTabStyle() {
     const tabs = this._tabs;

package/dist/es-dev/components/text-area/daikin-text-area.d.ts

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { DDSElement } from "../../base/index.js";
+import { DDSFormElement } from "../../base/dds-form-element.js";
 import { DaikinInputGroup } from "../input-group/index.js";
 /**
  * The text area component is designed for multiline text input, similar to the HTML `<textarea>` tag.
@@ -24,18 +24,8 @@ import { DaikinInputGroup } from "../input-group/index.js";
  * <daikin-text-area name="name"></daikin-text-area>
  * ```
  */
-export declare class DaikinTextArea extends DDSElement {
+export declare class DaikinTextArea extends DDSFormElement {
     static readonly styles: import('lit').CSSResult;
-    static readonly formAssociated = true;
-    private _internals;
-    /**
-     * The current value of the input, submitted as a name/value pair with form data.
-     */
-    value: string;
-    /**
-     * The name of the input, submitted as a name/value pair with form data.
-     */
-    name: string;
     /**
      * Placeholder text.
      */

package/dist/es-dev/components/text-area/daikin-text-area.js

@@ -1,10 +1,11 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
+import { DDSFormElement } from "../../base/dds-form-element.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -65,12 +66,9 @@ const cvaTextArea = cva(
     }
   }
 );
-let DaikinTextArea = class extends DDSElement {
+let DaikinTextArea = class extends DDSFormElement {
   constructor() {
     super(...arguments);
-    this._internals = this.attachInternals();
-    this.value = "";
-    this.name = "";
     this.placeholder = null;
     this.disabled = false;
     this.readonly = false;
@@ -83,7 +81,7 @@ let DaikinTextArea = class extends DDSElement {
     return this.value.length;
   }
   _updateValue(value) {
-    this._internals.setFormValue(value);
+    this.setFormValue(value);
   }
   _handleInput(e) {
     this.value = e.target.value;
@@ -137,13 +135,6 @@ DaikinTextArea.styles = css`
       position: relative;
     }
   `;
-DaikinTextArea.formAssociated = true;
-__decorateClass([
-  property({ type: String })
-], DaikinTextArea.prototype, "value", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinTextArea.prototype, "name", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinTextArea.prototype, "placeholder", 2);