@daikin-oss/design-system-web-components 0.3.2 → 0.5.0

package/dist/es/components/{tab-group/daikin-tab-group.js → tabs/daikin-tabs.js}

@@ -12,7 +12,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let DaikinTabGroup = class extends LitElement {
+let DaikinTabs = class extends LitElement {
   constructor() {
     super(...arguments);
     this.value = "";
@@ -20,22 +20,21 @@ let DaikinTabGroup = class extends LitElement {
   /**
    * Emits `beforechange` event if necessary and returns whether we should proceed.
    *
-   * 1. Check if `newValue` is different from `value`.
+   * 1. Check if `newTab.value` is different from `value`.
    * 2. Emit "beforechange" event.
-   * 3. Check if the event is canceled.
+   * 3. Check and return whether the event is canceled.
    *
-   * @param newValue The `value` of the newly active tab.
+   * @param newTab The newly active tab element.
    * @returns `true` if we should proceed (event is emitted and not canceled). `false` otherwise.
    */
-  _emitBeforeChange(newValue) {
-    if (this.value === newValue) {
+  _emitBeforeChange(newTab) {
+    if (this.value === newTab.value) {
       return false;
     }
     if (!this.dispatchEvent(
       new CustomEvent("beforechange", {
-        detail: { oldValue: this.value, newValue },
+        detail: { newTab },
         bubbles: true,
-        composed: true,
         cancelable: true
       })
     )) {
@@ -46,18 +45,16 @@ let DaikinTabGroup = class extends LitElement {
   /**
    * Updates `this.value` and emit "change" event.
    *
-   * @param newValue The `value` of the newly active tab.
+   * @param newTab The newly active tab element.
    */
-  _updateValue(newValue) {
+  _updateValue(newTab) {
+    this.value = newTab.value;
     this.dispatchEvent(
-      new CustomEvent("change", {
-        detail: { oldValue: this.value, newValue },
+      new Event("change", {
         bubbles: true,
-        composed: true,
         cancelable: false
       })
     );
-    this.value = newValue;
   }
   /**
    * Updates `daikin-tab` component(s)' properties in the slot.
@@ -80,7 +77,7 @@ let DaikinTabGroup = class extends LitElement {
       selectedTab = tabs.find((tab) => !tab.disabled);
       if (selectedTab) {
         selectedTab.active = true;
-        this._updateValue(selectedTab.value);
+        this._updateValue(selectedTab);
       }
     }
     if (!selectedTab) {
@@ -89,14 +86,14 @@ let DaikinTabGroup = class extends LitElement {
     scrollIntoViewOnlyParent(selectedTab);
   }
   /**
-   * Updates `daikin-panel-switcher` component(s)' properties in the slot.
+   * Updates `daikin-tab-panels` component(s)' properties in the slot.
    *
    * Invoke when:
    * - `this.value` is changed.
    * - the default slot's content is changed.
    * - the panel slot's content is changed.
    */
-  _updatePanelSwitcher() {
+  _updateTabPanels() {
     const panelSwitchers = this._panelSwitchers;
     const tabs = this._tabs;
     const panels = Array.from(new Set(tabs.map((tab) => tab.value)));
@@ -119,13 +116,13 @@ let DaikinTabGroup = class extends LitElement {
     if (this.value === tab.value) {
       return;
     }
-    if (!this._emitBeforeChange(tab.value)) {
+    if (!this._emitBeforeChange(tab)) {
       return;
     }
     for (const element of tabs) {
       element.active = element === tab;
     }
-    this._updateValue(tab.value);
+    this._updateValue(tab);
   }
   /**
    * Handles keyboard interactions in the tab list.
@@ -163,25 +160,22 @@ let DaikinTabGroup = class extends LitElement {
   }
   _handleSlotChange() {
     this._updateTabs();
-    this._updatePanelSwitcher();
+    this._updateTabPanels();
   }
-  _handlePanelSwitcherSlotChange() {
-    this._updatePanelSwitcher();
+  _handleTabPanelsSlotChange() {
+    this._updateTabPanels();
   }
   render() {
     return 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}
       >
         <slot @slotchange=${this._handleSlotChange}></slot>
       </div>
-      <slot
-        name="panels"
-        @slotchange=${this._handlePanelSwitcherSlotChange}
-      ></slot>
+      <slot name="panels" @slotchange=${this._handleTabPanelsSlotChange}></slot>
     `;
   }
   updated(changedProperties) {
@@ -189,24 +183,29 @@ let DaikinTabGroup = class extends LitElement {
       return;
     }
     this._updateTabs();
-    this._updatePanelSwitcher();
+    this._updateTabPanels();
   }
 };
-DaikinTabGroup.styles = css`
+DaikinTabs.styles = css`
     ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
   `;
 __decorateClass([
   property({ type: String, reflect: true })
-], DaikinTabGroup.prototype, "value", 2);
+], DaikinTabs.prototype, "value", 2);
 __decorateClass([
   queryAssignedElements({ selector: "daikin-tab" })
-], DaikinTabGroup.prototype, "_tabs", 2);
+], DaikinTabs.prototype, "_tabs", 2);
 __decorateClass([
-  queryAssignedElements({ slot: "panels", selector: "daikin-panel-switcher" })
-], DaikinTabGroup.prototype, "_panelSwitchers", 2);
-DaikinTabGroup = __decorateClass([
-  customElement("daikin-tab-group")
-], DaikinTabGroup);
+  queryAssignedElements({ slot: "panels", selector: "daikin-tab-panels" })
+], DaikinTabs.prototype, "_panelSwitchers", 2);
+DaikinTabs = __decorateClass([
+  customElement("daikin-tabs")
+], DaikinTabs);
 export {
-  DaikinTabGroup
+  DaikinTabs
 };

package/dist/es/components/tabs/index.d.ts

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

package/dist/es/components/tabs/index.js

@@ -0,0 +1,4 @@
+import { DaikinTabs } from "./daikin-tabs.js";
+export {
+  DaikinTabs
+};

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

@@ -0,0 +1,82 @@
+import { LitElement, PropertyValues } from 'lit';
+import { DaikinInputGroup } from '../input-group';
+/**
+ * The text area component is designed for multiline text input, similar to the HTML `<textarea>` tag.
+ * It is ideal for situations where users need to enter longer pieces of text, such as comments, descriptions, or messages.
+ * Can be used within `daikin-input-group` component.
+ *
+ * Hierarchies:
+ * - `daikin-text-area` (can be used solely)
+ * - `daikin-input-group` > `daikin-text-area`
+ *
+ * @fires change - A cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<textarea>` 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/text-area/index.js";
+ * ```
+ *
+ * ```html
+ * <!-- See `daikin-input-group` component for complete example. -->
+ * <daikin-text-area name="name"></daikin-text-area>
+ * ```
+ */
+export declare class DaikinTextArea extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    static readonly formAssociated = true;
+    private _internals;
+    /**
+     * Value of the text area.
+     */
+    value: string;
+    /**
+     * Form name of the text area.
+     */
+    name: string;
+    /**
+     * Placeholder text.
+     */
+    placeholder: string | null;
+    /**
+     * Whether the text area is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether the text area is readonly.
+     */
+    readonly: boolean;
+    /**
+     * Whether the text area is required.
+     */
+    required: boolean;
+    /**
+     * Error state. Ignored if the `disabled` is `true`.
+     */
+    error: boolean;
+    /**
+     * Value of `autocomplete` attribute of the internal `<textarea>`.
+     */
+    autocomplete?: HTMLInputElement["autocomplete"];
+    /**
+     * Whether to allow resizing of the text area.
+     */
+    resizable: boolean;
+    /**
+     * The label text used as the value of aria-label.
+     * Set automatically by `reflectInputGroup` method.
+     */
+    private _label;
+    get count(): number;
+    private _updateValue;
+    private _handleInput;
+    render(): import('lit-html').TemplateResult<1>;
+    updated(changedProperties: PropertyValues<this>): void;
+    reflectInputGroup(inputGroup: DaikinInputGroup): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-text-area": DaikinTextArea;
+    }
+}

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

@@ -0,0 +1,165 @@
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import tailwindStyles from "../../tailwind.css.js";
+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 = cva(
+  [
+    "w-full",
+    "h-full",
+    "px-4",
+    "py-3",
+    "rounded-md",
+    "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-hover/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"]
+      }
+    }
+  }
+);
+let DaikinTextArea = class extends 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 html`<textarea
+      class=${cvaTextArea({
+      error: !this.disabled && this.error,
+      resize: this.resizable
+    })}
+      .value=${this.value}
+      placeholder=${ifDefined(this.placeholder ?? void 0)}
+      name=${this.name}
+      autocomplete=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined(this.autocomplete)}
+      aria-label=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined(this._label)}
+      ?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;
+  }
+};
+DaikinTextArea.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      height: 87px;
+      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);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTextArea.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTextArea.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTextArea.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTextArea.prototype, "error", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTextArea.prototype, "autocomplete", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTextArea.prototype, "resizable", 2);
+__decorateClass([
+  state()
+], DaikinTextArea.prototype, "_label", 2);
+DaikinTextArea = __decorateClass([
+  customElement("daikin-text-area")
+], DaikinTextArea);
+export {
+  DaikinTextArea
+};

package/dist/es/components/text-area/index.d.ts

@@ -0,0 +1 @@
+export * from './daikin-text-area';

package/dist/es/components/text-area/index.js

@@ -0,0 +1,4 @@
+import { DaikinTextArea } from "./daikin-text-area.js";
+export {
+  DaikinTextArea
+};

package/dist/es/components/text-field/daikin-text-field.d.ts

@@ -0,0 +1,94 @@
+import { LitElement, PropertyValues } from 'lit';
+import { DaikinInputGroup } from '../input-group';
+/**
+ * The text field component is a UI element that allows users to input single-line text data.
+ * It functions similarly to the HTML `<input type="text">` tag, providing a simple and efficient way for users to enter and edit short pieces of texts, such as names, email addresses, or search queries.
+ * Can be used within `daikin-input-group` component.
+ *
+ * Hierarchies:
+ * - `daikin-text-field` (can be used solely)
+ * - `daikin-input-group` > `daikin-text-field`
+ *
+ * @fires change - A cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input>` element.
+ * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).
+ *
+ * @slot left-icon - Specify the icon you want to use on the left. You can also use something other than `daikin-icon`.
+ * @slot right-icon - Specify the icon you want to use on the right. You can also use something other than `daikin-icon`.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/text-field/index.js";
+ * ```
+ *
+ * ```html
+ * <!-- See `daikin-input-group` component for complete example. -->
+ * <daikin-text-field name="name"></daikin-text-field>
+ * ```
+ */
+export declare class DaikinTextField extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    static readonly formAssociated = true;
+    private _internals;
+    /**
+     * Type of the text field.
+     */
+    type: "text" | "email" | "tel" | "search";
+    /**
+     * Value of the text field.
+     */
+    value: string;
+    /**
+     * Form name of the text field.
+     */
+    name: string;
+    /**
+     * Placeholder text.
+     */
+    placeholder: string | null;
+    /**
+     * Whether the text field is readonly.
+     */
+    readonly: boolean;
+    /**
+     * Whether the text field is disabled.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    disabled: boolean;
+    /**
+     * Whether the text field is required.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    required: boolean;
+    /**
+     * Whether or not to display error states.
+     * Ignored if the `disabled` is `true`.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    error: boolean;
+    /**
+     * Maximum length of value.
+     */
+    maxlength?: number;
+    /**
+     * Value of `autocomplete` attribute of the internal `<input>`.
+     */
+    autocomplete?: HTMLInputElement["autocomplete"];
+    /**
+     * The label text used as the value of aria-label.
+     * Set automatically by `reflectInputGroup` method.
+     */
+    private _label;
+    private _hasLeftIcon;
+    private _hasRightIcon;
+    private _handleSlotChange;
+    private _handleInput;
+    render(): import('lit-html').TemplateResult<1>;
+    updated(changedProperties: PropertyValues<this>): void;
+    reflectInputGroup(inputGroup: DaikinInputGroup): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-text-field": DaikinTextField;
+    }
+}