@daikin-oss/design-system-web-components 0.4.0 → 0.6.0

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

@@ -0,0 +1,130 @@
+import { LitElement, PropertyValues } from 'lit';
+export type HeaderType<T extends string = string> = {
+    key: T;
+    label: string;
+    alignment?: "left" | "right" | "center";
+    sortable: boolean;
+};
+/**
+ * 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.
+ *
+ * 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}`}``
+ *
+ * The table provides two functions: checkboxes and sorting, and you can select the functions you need.
+ *
+ * Hierarchy:
+ * - `daikin-table` > `daikin-table-cell`
+ * - `daikin-table` > `daikin-table-header-cell`
+ *
+ * @fires change-check - When the checkbox is operated, it returns the array of `id`s that are currently checked.
+ * @fires change-sort - When the sort is changed, it returns the current sort key and the order (ascending or descending).
+ *
+ * @slot header:${headers[i].key} - A slot for the header cell of a table. Use this when you want to display something other than text, such as an icon. Use `daikin-table-header-cell` for the wrapper.
+ * @slot cell:${rows[j].id}:${headers[i].key} - A slot for the data cell of a table. Use `daikin-table-cell` for the wrapper.
+ *
+ * @example
+ *
+ * ```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-cell slot="cell:1:name">
+ *     Apple
+ *     <span slot="subtitle">This is a autumn fruit.</span>
+ *   </daikin-table-cell>
+ *   <daikin-table-cell slot="cell:2:name">
+ *     Peach
+ *     <span slot="subtitle">This is a summer fruit.</span>
+ *   </daikin-table-cell>
+ *   <daikin-table-cell slot="cell:3:name">
+ *     Orange
+ *     <span slot="subtitle">This is a winter fruit.</span>
+ *   </daikin-table-cell>
+ *   <daikin-table-cell slot="cell:4:name">
+ *     Strawberry
+ *     <span slot="subtitle">This is a spring fruit.</span>
+ *   </daikin-table-cell>
+ * </daikin-table>
+ * ```
+ */
+export declare class DaikinTable<T extends {
+    id: string;
+} = any> extends LitElement {
+    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.
+     */
+    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.
+     */
+    rows: T[];
+    /**
+     * Whether or not to enable selection of rows.
+     * If `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.
+     */
+    sortable: boolean;
+    /**
+     * An array of `id`s for the `rows` that have been checked.
+     */
+    selection: string[];
+    /**
+     * Sort order of the table.
+     */
+    order: "asc" | "desc" | null;
+    /**
+     * The `key` of the currently sorted column.
+     */
+    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`.
+     */
+    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.
+     */
+    private _currentView;
+    private _updateCurrentView;
+    private _emitChangeCheckEvent;
+    private _handleHeaderCheckboxChange;
+    private _handleBodyCheckboxChange;
+    private _handleClickSort;
+    private _updateHeaderCheckboxState;
+    render(): import('lit-html').TemplateResult<1>;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-table": DaikinTable;
+    }
+}
+export default DaikinTable;

package/dist/cjs/components/table/index.cjs

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

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

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

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

@@ -0,0 +1,68 @@
+"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 tailwind = require("../../tailwind.css.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 cvaCell = classVarianceAuthority.cva(
+  [
+    "flex",
+    "flex-col",
+    "gap-1",
+    "justify-center",
+    "size-full",
+    "min-h-12",
+    "px-4",
+    "py-3",
+    "text-system-element-text-primary"
+  ],
+  {
+    variants: {
+      alignment: {
+        left: ["items-start", "text-left"],
+        right: ["items-end", "text-end"],
+        center: ["items-center", "text-center"]
+      }
+    }
+  }
+);
+exports.DaikinTableCell = class DaikinTableCell extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.alignment = "left";
+  }
+  render() {
+    return lit.html`<span class=${cvaCell({ alignment: this.alignment })}>
+      <slot></slot>
+      <slot
+        name="subtitle"
+        class="text-system-element-text-secondary text-xs"
+      ></slot>
+    </span>`;
+  }
+};
+exports.DaikinTableCell.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      width: 100%;
+      min-height: 3rem;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinTableCell.prototype, "alignment", 2);
+exports.DaikinTableCell = __decorateClass([
+  decorators_js.customElement("daikin-table-cell")
+], exports.DaikinTableCell);

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

@@ -0,0 +1,41 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from "../../type-utils.cjs";
+declare const cvaCell: (props?: ({
+    alignment?: "right" | "left" | "center" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type TableCellVariantProps = MergeVariantProps<typeof cvaCell>;
+/**
+ * This is a component that functions as an element to be placed on the daikin-table. When you want to insert a subtitle into a cell, or when you want to use something other than plain text (e.g. a button), you need to use this component.
+ *
+ * This is a component used as a slot in the daikin-table, but in order to do so, you need to specify the appropriate slot attribute. For more information, please check the daikin-table component.
+ *
+ * Hierarchy:
+ * - `daikin-table` > `daikin-table-cell`
+ *
+ * @slot - A slot for the table cell.
+ * @slot subtitle - This is a subtitle element that is inserted into a cell.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-table-cell slot="cell:key:id">
+ *   Table cell label
+ *   <span slot="subtitle">Table cell subtitle</span>
+ * </daikin-table-cell>
+ * ```
+ */
+export declare class DaikinTableCell extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Specify the direction of cell alignment.
+     * This is not normally something that users need to specify.
+     */
+    alignment: TableCellVariantProps["alignment"];
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-table-cell": DaikinTableCell;
+    }
+}
+export default DaikinTableCell;

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

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

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

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

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

@@ -0,0 +1,93 @@
+"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 tailwind = require("../../tailwind.css.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 cvaHeaderCell = classVarianceAuthority.cva(
+  [
+    "flex",
+    "items-center",
+    "gap-2",
+    "size-full",
+    "min-h-12",
+    "px-4",
+    "py-3",
+    "text-system-element-text-primary",
+    "font-bold"
+  ],
+  {
+    variants: {
+      alignment: {
+        left: ["justify-start", "text-left"],
+        right: ["justify-end", "text-end"],
+        center: ["justify-center", "text-center"]
+      },
+      sortable: {
+        false: [],
+        true: [
+          "hover:bg-system-background-surface-hover",
+          "active:bg-system-background-surface-press",
+          "focus-visible:outline",
+          "focus-visible:outline-2",
+          "focus-visible:-outline-offset-2",
+          "focus-visible:outline-system-state-focus",
+          "after:flex-none",
+          "after:size-6",
+          "after:text-system-element-text-primary",
+          "after:i-daikin-sort"
+        ]
+      }
+    }
+  }
+);
+exports.DaikinTableHeaderCell = class DaikinTableHeaderCell extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.alignment = "left";
+    this.sortable = false;
+  }
+  render() {
+    const headerCellCN = cvaHeaderCell({
+      alignment: this.alignment,
+      sortable: this.sortable
+    });
+    const content = lit.html`<slot name="left-icon" class="icon-size-6"></slot>
+      <slot></slot>`;
+    return this.sortable ? lit.html`<button
+          type="button"
+          class=${headerCellCN}
+          @click=${() => this.dispatchEvent(new Event("change-sort", { bubbles: true }))}
+        >
+          ${content}
+        </button>` : lit.html`<span class=${headerCellCN}>${content}</span>`;
+  }
+};
+exports.DaikinTableHeaderCell.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinTableHeaderCell.prototype, "alignment", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTableHeaderCell.prototype, "sortable", 2);
+exports.DaikinTableHeaderCell = __decorateClass([
+  decorators_js.customElement("daikin-table-header-cell")
+], exports.DaikinTableHeaderCell);

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

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from "../../type-utils.cjs";
+declare const cvaHeaderCell: (props?: ({
+    alignment?: "right" | "left" | "center" | null | undefined;
+    sortable?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type TableHeaderCellVariantProps = MergeVariantProps<typeof cvaHeaderCell>;
+/**
+ * `daikin-table-header-cell` is a component that functions as a cell in the header row of `daikin-table`.
+ * By assigning this component to a slot in `daikin-table`, you can display advanced content such as subtitles and icons.
+ *
+ * This component is created for `daikin-table` and requires the appropriate slot name to be specified to use it.
+ * For more information, please refer to the `daikin-table` component.
+ *
+ * Hierarchy:
+ * - `daikin-table` > `daikin-table-header-cell`
+ *
+ * @fires change-sort - Fires when the sort button is clicked. See `sortable` property for details.
+ *
+ * @slot - A slot for the table header cell.
+ * @slot left-icon - A slot for an icon to be placed to the left of the text. Place `daikin-icon` or something similar.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-table-header-cell slot="header:key">
+ *   Table header cell label
+ * </daikin-table-header-cell>
+ * ```
+ */
+export declare class DaikinTableHeaderCell extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Alignment of cell contents.
+     */
+    alignment: TableHeaderCellVariantProps["alignment"];
+    /**
+     * Whether to display as a sortable column or not.
+     * When set to `true`, it becomes clickable and the sort icon is displayed on the right.
+     * It also makes the component emit the `change-sort` event when clicked.
+     */
+    sortable: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-table-header-cell": DaikinTableHeaderCell;
+    }
+}
+export default DaikinTableHeaderCell;

package/dist/cjs/components/table-header-cell/index.cjs

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

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

@@ -0,0 +1 @@
+export * from "./daikin-table-header-cell.cjs";

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

@@ -170,7 +170,7 @@ exports.DaikinTabs = class DaikinTabs extends lit.LitElement {
   render() {
     return lit.html`
       <div
-        part="tablist"
+        class="flex flex-nowrap w-full p-[3px] overflow-auto relative before:absolute before:h-[1px] before:inset-[3px] before:top-auto before:bg-system-element-divider-secondary"
         role="tablist"
         @click=${this._handleTabClick}
         @keydown=${this._handleKeyDown}
@@ -190,6 +190,11 @@ exports.DaikinTabs = class DaikinTabs extends lit.LitElement {
 };
 exports.DaikinTabs.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
   `;
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })

package/dist/{cjs-dev/components/tabs/daikin-tabs.d.ts → cjs/components/tabs/daikin-tabs.d.cts}

@@ -2,7 +2,6 @@ import { LitElement, PropertyValues } from 'lit';
 /**
  * The tab group component manages a group of tabs and switches the content displayed using the panel switcher component.
  * It allows users to navigate between different sections of content by clicking on individual tabs.
- * Tab groups do not provide styles; developers must apply styles to the wrapper of the tabs (`tablist` part) and to the panel switcher(s).
  *
  * > [!WARNING]
  * > At least one tab must be available (that means, the tab must be present and enabled).
@@ -18,18 +17,15 @@ import { LitElement, PropertyValues } from 'lit';
  * @slot - A slot for tab buttons. Place `daikin-tab` elements here.
  * @slot panels - A slot for tab panels component. Place a `daikin-tab-panels` element here.
  *
- * @csspart tablist - The container element for the default (tab list) slot. Has "tablist" role.
- *
  * @example
  *
  * ```js
  * import "@daikin-oss/design-system-web-components/components/tab/index.js";
  * import "@daikin-oss/design-system-web-components/components/tab-group/index.js";
- * import "@daikin-oss/design-system-web-components/components/panel-switcher/index.js";
+ * import "@daikin-oss/design-system-web-components/components/tab-panels/index.js";
  * ```
  *
  * ```html
- * <!-- See storybook for styling tab group. You'll need `::part(tablist)` to style the tab container. -->
  * <daikin-tabs value="foo">
  *   <daikin-tab value="foo">Foo tab</daikin-tab>
  *   <daikin-tab value="bar">Bar tab</daikin-tab>

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

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

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

@@ -0,0 +1,164 @@
+"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 tailwind = require("../../tailwind.css.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 cvaTextArea = classVarianceAuthority.cva(
+  [
+    "w-full",
+    "h-full",
+    "px-4",
+    "py-3",
+    "rounded",
+    "font-daikinSerif",
+    "outline",
+    "outline-[--color-border]",
+    "outline-0",
+    "-outline-offset-2",
+    "placeholder:text-system-element-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.
+    "define-[--color-state-active,--color-state-focus,--color-base]/color-border",
+    "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-system-element-text-primary",
+    "enabled:hover:bg-system-background-surface-hover",
+    "enabled:active:bg-system-background-surface-press",
+    "focus-visible:outline-2",
+    "disabled:var-color-system-state-disabled/color-base",
+    "disabled:text-system-state-disabled",
+    "disabled:bg-white",
+    "disabled:placeholder:text-system-state-disabled"
+  ],
+  {
+    variants: {
+      error: {
+        false: [
+          "enabled:var-color-system-state-neutral-active/color-base",
+          "focus-visible:var-color-system-state-focus/color-state-focus"
+        ],
+        true: ["enabled:var-color-system-state-error-active/color-base"]
+      },
+      resize: {
+        false: ["resize-none"],
+        true: ["resize-vertical"]
+      }
+    }
+  }
+);
+exports.DaikinTextArea = class DaikinTextArea extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this._internals = this.attachInternals();
+    this.value = "";
+    this.name = "";
+    this.placeholder = null;
+    this.disabled = false;
+    this.readonly = false;
+    this.required = false;
+    this.error = false;
+    this.resizable = false;
+    this._label = null;
+  }
+  get count() {
+    return this.value.length;
+  }
+  _updateValue(value) {
+    this._internals.setFormValue(value);
+  }
+  _handleInput(e) {
+    this.value = e.target.value;
+    this._updateValue(this.value);
+  }
+  render() {
+    return lit.html`<textarea
+      class=${cvaTextArea({
+      error: !this.disabled && this.error,
+      resize: this.resizable
+    })}
+      placeholder=${ifDefined_js.ifDefined(this.placeholder ?? void 0)}
+      name=${this.name}
+      autocomplete=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined_js.ifDefined(this.autocomplete)}
+      aria-label=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined_js.ifDefined(this._label)}
+      .value=${this.value}
+      ?disabled=${this.disabled}
+      ?readonly=${this.readonly}
+      ?required=${this.required}
+      @change=${(e) => this.dispatchEvent(new Event("change", e))}
+      @input=${this._handleInput}
+      @keydown=${this._handleInput}
+    ></textarea>`;
+  }
+  updated(changedProperties) {
+    if (!changedProperties.has("value")) {
+      return;
+    }
+    this._updateValue(this.value);
+  }
+  reflectInputGroup(inputGroup) {
+    const isError = !inputGroup.disabled && !!inputGroup.error;
+    this.disabled = !!inputGroup.disabled;
+    this.required = !!inputGroup.required;
+    this.error = isError;
+    this._label = inputGroup.label;
+  }
+};
+exports.DaikinTextArea.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      height: 5.5rem;
+      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);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTextArea.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTextArea.prototype, "readonly", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTextArea.prototype, "required", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTextArea.prototype, "error", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinTextArea.prototype, "autocomplete", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTextArea.prototype, "resizable", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinTextArea.prototype, "_label", 2);
+exports.DaikinTextArea = __decorateClass([
+  decorators_js.customElement("daikin-text-area")
+], exports.DaikinTextArea);