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

package/dist/es/components/table-header-cell/daikin-table-header-cell.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/components/text-field/daikin-text-field.d.ts

@@ -15,10 +15,18 @@ import { DaikinInputGroup } from "../input-group/index.js";
  * @fires toggle - Emitted when the user toggles the password mask.
  *
  * @slot left-icon - Specify the icon you want to use on the left. You can also use something other than `daikin-icon`.
- * Ignored if the type is "search" since the default icon is used.
+ * Available only if the type is one of:
+ * - `"text"`
+ * - `"number"`
+ * - `"password"`
+ * - `"email"`
+ * - `"tel"`
  *
  * @slot right-icon - Specify the icon you want to use on the right. You can also use something other than `daikin-icon`.
- * Ignored if the type is "search" since the default icon is used.
+ * Available only if the type is one of:
+ * - `"text"`
+ * - `"email"`
+ * - `"tel"`
  *
  * @example
  *
@@ -35,8 +43,15 @@ export declare class DaikinTextField extends DDSFormElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Type of field.
+     *
+     * - `"text"`: Basic text input with optional left and right icon slots.
+     * - `"number"`: Numeric input with increment/decrement buttons, arrow key support, and optional left icon slot.
+     * - `"password"`: Password input with show/hide toggle button to control mask of password and optional left icon slot.
+     * - `"email"`: Email input with optional left and right icon slots.
+     * - `"tel"`: Telephone input with optional left and right icon slots.
+     * - `"search"`: Search input with built-in search icon and clear button when value is present.
      */
-    type: "text" | "password" | "email" | "tel" | "search";
+    type: "text" | "number" | "password" | "email" | "tel" | "search";
     /**
      * Placeholder text.
      */
@@ -69,6 +84,18 @@ export declare class DaikinTextField extends DDSFormElement {
      * Maximum length of value.
      */
     maxlength: number | null;
+    /**
+     * Interval between values. This is valid when `type="number"`.
+     */
+    step: string | null;
+    /**
+     * The minimum value. This is valid when `type="number"`.
+     */
+    min: string | null;
+    /**
+     * The maximum value. This is valid when `type="number"`.
+     */
+    max: string | null;
     /**
      * The pattern of value.
      */
@@ -92,6 +119,8 @@ export declare class DaikinTextField extends DDSFormElement {
     private _handleSlotChange;
     private _handleInput;
     private _handleClearClick;
+    private _handleKeyDown;
+    private _updateNumberValue;
     private _createIcon;
     private _handleShowPasswordClick;
     render(): TemplateResult<1>;

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

@@ -7,7 +7,9 @@ import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import { DDSFormElement } from "../../base/dds-form-element.js";
 import tailwindStyles from "../../tailwind.css.js";
+import { isSimpleKeyEvent } from "../../utils/is-simple-key.js";
 import "../icon-button/daikin-icon-button.js";
+import { updateNumberValue } from "./number-utils.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -24,6 +26,8 @@ const cvaInput = cva(
     "items-center",
     "w-full",
     "h-full",
+    "pl-[--pl,1rem]",
+    "pr-[--pr,1rem]",
     "bg-ddt-color-common-background-default",
     "relative",
     "rounded",
@@ -62,21 +66,38 @@ const cvaInput = cva(
         true: ["enabled:var-color-ddt-color-common-danger-default/color-base"]
       },
       leftIcon: {
-        false: ["pl-4"],
-        true: ["pl-11"]
+        false: [],
+        true: []
       },
       rightIcon: {
-        false: ["pr-4"],
-        true: ["pr-11"]
+        false: [],
+        true: []
       },
       type: {
         text: [],
-        password: [],
+        number: ["[--pr:5.5rem]"],
+        password: ["[--pr:2.75rem]"],
         email: [],
         tel: [],
-        search: ["[&::-webkit-search-cancel-button]:appearance-none"]
+        search: [
+          "[&::-webkit-search-cancel-button]:appearance-none",
+          "[--pl:2.75rem]",
+          "[--pr:2.75rem]"
+        ]
       }
-    }
+    },
+    compoundVariants: [
+      {
+        type: ["text", "email", "tel", "number", "password"],
+        leftIcon: true,
+        class: ["[--pl:2.75rem]"]
+      },
+      {
+        type: ["text", "email", "tel"],
+        rightIcon: true,
+        class: ["[--pr:2.75rem]"]
+      }
+    ]
   }
 );
 const cvaIcon = cva(
@@ -113,6 +134,9 @@ let DaikinTextField = class extends DDSFormElement {
     this.error = false;
     this.minlength = null;
     this.maxlength = null;
+    this.step = null;
+    this.min = null;
+    this.max = null;
     this.pattern = null;
     this.showPassword = false;
     this._label = null;
@@ -137,26 +161,140 @@ let DaikinTextField = class extends DDSFormElement {
   }
   _handleInput(event) {
     this.value = event.target.value;
-    this.setFormValue(this.value);
   }
   _handleClearClick() {
     this.value = "";
+    this.dispatchEvent(
+      new Event("input", {
+        bubbles: true,
+        composed: true
+      })
+    );
+    this.dispatchEvent(
+      new Event("change", {
+        bubbles: true
+      })
+    );
+  }
+  _handleKeyDown(event) {
+    if (this.type === "number") {
+      if (isSimpleKeyEvent(event) && event.key.length === 1) {
+        const { value, selectionStart, selectionEnd } = event.target;
+        const selectionText = value.substring(
+          selectionStart ?? 0,
+          selectionEnd ?? 0
+        );
+        if (/^[0-9]$/.test(event.key)) {
+          return;
+        }
+        if (event.key === "-") {
+          if ((!value.includes("-") || selectionText.includes("-")) && selectionStart === 0) {
+            return;
+          }
+        }
+        if (event.key === ".") {
+          if (!value.includes(".") || selectionText.includes(".")) {
+            return;
+          }
+        }
+        event.preventDefault();
+        return;
+      }
+      const direction = {
+        ArrowUp: 1,
+        ArrowDown: -1
+      }[event.key];
+      if (direction != null) {
+        event.preventDefault();
+        this._updateNumberValue(direction);
+      }
+    }
+  }
+  _updateNumberValue(sign) {
+    const newValue = updateNumberValue(this.value || "0", sign, {
+      step: this.step,
+      min: this.min,
+      max: this.max
+    });
+    if (newValue === this.value) {
+      return;
+    }
+    this.value = newValue;
+    this.dispatchEvent(
+      new Event("input", {
+        bubbles: true,
+        composed: true
+      })
+    );
+    this.dispatchEvent(
+      new Event("change", {
+        bubbles: true
+      })
+    );
   }
   _createIcon() {
+    const leftIconSlot = html`<span
+      class=${cvaIcon({
+      icon: "left",
+      disabled: this.disabled
+    })}
+    >
+      <slot
+        name="left-icon"
+        class="icon-size-6"
+        @slotchange=${this._handleSlotChange}
+      ></slot>
+    </span>`;
+    const rightIconSlot = html`<span
+      class=${cvaIcon({
+      icon: "right",
+      disabled: this.disabled
+    })}
+    >
+      <slot
+        name="right-icon"
+        class="icon-size-6"
+        @slotchange=${this._handleSlotChange}
+      ></slot>
+    </span>`;
     switch (this.type) {
+      case "number":
+        return html`${leftIconSlot}
+          <span class="inline-flex items-center gap-1 absolute right-2">
+            <daikin-icon-button
+              color="neutral"
+              variant="ghost"
+              ?disabled=${this.disabled}
+              button-aria-label="Decrease"
+              tabindex="-1"
+              @click=${() => this._updateNumberValue(-1)}
+            >
+              <span class="i-daikin-number-minus icon-size-6"></span>
+            </daikin-icon-button>
+            <daikin-icon-button
+              color="neutral"
+              variant="ghost"
+              ?disabled=${this.disabled}
+              button-aria-label="Increase"
+              tabindex="-1"
+              @click=${() => this._updateNumberValue(1)}
+            >
+              <span class="i-daikin-number-plus icon-size-6"></span>
+            </daikin-icon-button>
+          </span>`;
       case "password":
-        return html`<daikin-icon-button
-          color="neutral"
-          variant="ghost"
-          ?disabled=${this.disabled}
-          button-aria-label=${this.showPassword ? "Hide password" : "Show password"}
-          class="absolute right-3"
-          @click=${this._handleShowPasswordClick}
-        >
-          <span
-            class=${cvaShowPasswordIcon({ showPassword: this.showPassword })}
-          ></span>
-        </daikin-icon-button>`;
+        return html`${leftIconSlot}<daikin-icon-button
+            color="neutral"
+            variant="ghost"
+            ?disabled=${this.disabled}
+            button-aria-label=${this.showPassword ? "Hide password" : "Show password"}
+            class="absolute right-3"
+            @click=${this._handleShowPasswordClick}
+          >
+            <span
+              class=${cvaShowPasswordIcon({ showPassword: this.showPassword })}
+            ></span>
+          </daikin-icon-button>`;
       case "search":
         return html`<span
             class=${cvaIcon({
@@ -177,30 +315,7 @@ let DaikinTextField = class extends DDSFormElement {
                 <span class="i-daikin-close"></span>
               </daikin-icon-button>` : nothing}`;
       default:
-        return html`<span
-            class=${cvaIcon({
-          icon: "left",
-          disabled: this.disabled
-        })}
-          >
-            <slot
-              name="left-icon"
-              class="icon-size-6"
-              @slotchange=${this._handleSlotChange}
-            ></slot>
-          </span>
-          <span
-            class=${cvaIcon({
-          icon: "right",
-          disabled: this.disabled
-        })}
-          >
-            <slot
-              name="right-icon"
-              class="icon-size-6"
-              @slotchange=${this._handleSlotChange}
-            ></slot>
-          </span>`;
+        return html`${leftIconSlot}${rightIconSlot}`;
     }
   }
   _handleShowPasswordClick() {
@@ -209,38 +324,49 @@ let DaikinTextField = class extends DDSFormElement {
   }
   render() {
     const error = !this.disabled && this.error;
-    const hasLeftSlot = this._hasLeftSlot;
-    const hasRightSlot = this._hasRightSlot;
-    const [leftIcon, rightIcon] = {
-      password: [false, true],
-      search: [true, !!this.value.length],
-      email: [hasLeftSlot, hasRightSlot],
-      tel: [hasLeftSlot, hasRightSlot],
-      text: [hasLeftSlot, hasRightSlot]
-    }[this.type];
-    const type = this.type === "password" && this.showPassword ? "text" : this.type;
+    const type = this.type === "password" && this.showPassword ? "text" : this.type === "number" ? "text" : this.type;
+    const role = this.type === "number" ? "spinbutton" : void 0;
+    const inputMode = this.type === "number" ? "numeric" : void 0;
     return html`<input
         class=${cvaInput({
       error,
-      leftIcon,
-      rightIcon,
+      leftIcon: this._hasLeftSlot,
+      rightIcon: this._hasRightSlot,
       type: this.type
     })}
+        role=${ifDefined(role)}
         type=${type}
+        inputmode=${ifDefined(inputMode)}
         placeholder=${ifDefined(this.placeholder ?? void 0)}
         name=${ifDefined(this.name)}
         minlength=${ifDefined(this.minlength ?? void 0)}
         maxlength=${ifDefined(this.maxlength ?? void 0)}
+        step=${ifDefined(
+      this.type === "number" && this.step != null ? (
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.step
+      ) : void 0
+    )}
         pattern=${ifDefined(this.pattern ?? void 0)}
         autocomplete=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
     ifDefined(this.autocomplete)}
         aria-label=${ifDefined(this._label ?? void 0)}
+        aria-valuemin=${ifDefined(
+      this.type === "number" && this.min != null ? this.min : void 0
+    )}
+        aria-valuemax=${ifDefined(
+      this.type === "number" && this.max != null ? this.max : void 0
+    )}
+        aria-valuenow=${ifDefined(
+      this.type === "number" ? this.value : void 0
+    )}
         .value=${this.value}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
         ?required=${this.required}
         @change=${this._handleChange}
         @input=${this._handleInput}
+        @keydown=${this._handleKeyDown}
       />
       ${this._createIcon()}`;
   }
@@ -304,6 +430,15 @@ __decorateClass([
 __decorateClass([
   property({ type: Number, reflect: true })
 ], DaikinTextField.prototype, "maxlength", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTextField.prototype, "step", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTextField.prototype, "min", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTextField.prototype, "max", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinTextField.prototype, "pattern", 2);

package/dist/es/components/text-field/number-utils.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Options for updating number values with step constraints.
+ */
+export interface NumberUpdateOptions {
+    /** Step increment/decrement amount */
+    step?: string | null;
+    /** Minimum allowed value */
+    min?: string | null;
+    /** Maximum allowed value */
+    max?: string | null;
+}
+/**
+ * Updates a number value according to step constraints and min/max bounds.
+ *
+ * Logic (compliant with Google Chrome behavior):
+ * 0. Valid output range: min <= value <= max, and (value - min) is a multiple of step, or value equals min/max
+ * 1. If max < min, direction up goes to min (max value), direction down goes to max (min value)
+ * 2. If value is out of range or not on step boundary, round to nearest step in the direction and finish
+ * 3. Otherwise, increment/decrement by step
+ *
+ * @param currentValue Current value as string
+ * @param direction Direction: 1 for increment, -1 for decrement
+ * @param options The update options
+ * @returns The new value as string
+ */
+export declare function updateNumberValue(currentValue: string, direction: 1 | -1, options: NumberUpdateOptions): string;

package/dist/es/components/text-field/number-utils.js

@@ -0,0 +1,61 @@
+import Big from "big.js";
+function updateNumberValue(currentValue, direction, options) {
+  const { step, min, max } = options;
+  try {
+    const current = new Big(currentValue || "0");
+    const stepBig = new Big(step || "1");
+    const minBig = min != null && min !== "" ? new Big(min) : null;
+    const maxBig = max != null && max !== "" ? new Big(max) : null;
+    if (minBig && maxBig && maxBig.lt(minBig)) {
+      return direction === 1 ? minBig.toString() : maxBig.toString();
+    }
+    const isOnStepBoundary = (value) => {
+      const diff = value.sub(minBig ?? 0);
+      return diff.mod(stepBig).eq(0);
+    };
+    const findNearestStepInDirection = (value, dir) => {
+      const base = minBig || new Big(0);
+      const offset = value.sub(base);
+      const steps = offset.div(stepBig);
+      let targetSteps;
+      if (dir === 1) {
+        targetSteps = steps.round(0, Big.roundUp);
+      } else {
+        targetSteps = steps.round(0, Big.roundDown);
+      }
+      return base.add(targetSteps.mul(stepBig));
+    };
+    const isInRange = (!minBig || current.gte(minBig)) && (!maxBig || current.lte(maxBig));
+    if (!isInRange || !isOnStepBoundary(current)) {
+      if (!isInRange) {
+        const isBelowMin = minBig && current.lt(minBig);
+        const isAboveMax = maxBig && current.gt(maxBig);
+        if (isBelowMin && direction === -1 || isAboveMax && direction === 1) {
+          return currentValue;
+        }
+      }
+      let nearestStep = findNearestStepInDirection(current, direction);
+      if (minBig && nearestStep.lt(minBig)) {
+        nearestStep = minBig;
+      }
+      if (maxBig && nearestStep.gt(maxBig)) {
+        nearestStep = maxBig;
+      }
+      return nearestStep.toString();
+    }
+    const newValue = direction === 1 ? current.add(stepBig) : current.sub(stepBig);
+    let result = newValue;
+    if (minBig && result.lt(minBig)) {
+      result = minBig;
+    }
+    if (maxBig && result.gt(maxBig)) {
+      result = maxBig;
+    }
+    return result.toString();
+  } catch (error) {
+    return currentValue;
+  }
+}
+export {
+  updateNumberValue
+};

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

@@ -0,0 +1,136 @@
+import { InputMask, FactoryOpts } from 'imask';
+import { PropertyValues, TemplateResult } from 'lit';
+import { DDSFormElement } from "../../base/dds-form-element.js";
+import { DaikinInputGroup } from "../input-group/index.js";
+export type { FactoryOpts, InputMask };
+/**
+ * The text masked field component is a UI element that allows users to input single-line text data with input masking support.
+ * 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 with masking functionality using IMask.js.
+ * Can be used within `daikin-input-group` component.
+ *
+ * Hierarchies:
+ * - `daikin-text-masked-field` (can be used solely)
+ * - `daikin-input-group` > `daikin-text-masked-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-masked-field/index.js";
+ * ```
+ *
+ * ```html
+ * <!-- See `daikin-input-group` component for complete example. -->
+ * <daikin-text-masked-field name="name"></daikin-text-masked-field>
+ *
+ * <script>
+ *   const textField = document.querySelector("daikin-text-masked-field");
+ *   textField.mask = "00/00/0000";
+ * </script>
+ * ```
+ */
+export declare class DaikinTextMaskedField extends DDSFormElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Placeholder text.
+     */
+    placeholder: string | null;
+    /**
+     * Whether the text masked field is readonly.
+     */
+    readonly: boolean;
+    /**
+     * Whether the text masked field is disabled.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    disabled: boolean;
+    /**
+     * Whether the text masked 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;
+    /**
+     * Minimum length of value.
+     */
+    minlength: number | null;
+    /**
+     * Maximum length of value.
+     */
+    maxlength: number | null;
+    /**
+     * The pattern of value.
+     */
+    pattern: string | null;
+    /**
+     * Input mask configuration. When provided as a string, it will be used as `{ mask: string, lazy: false }`.
+     * When provided as an object, it will be passed directly to IMask.
+     *
+     * Pattern symbols:
+     * - `0` - any digit
+     * - `a` - any letter
+     * - `*` - any char
+     * - `[]` - make input optional
+     * - `{}` - include fixed part in unmasked value
+     * - `` ` `` - prevent symbols shift back
+     * - Other chars are treated as fixed
+     * - Use `\\` to escape definition characters (e.g., `\\0`)
+     *
+     * Examples:
+     * - `"00/00/0000"` - date format (MM/DD/YYYY)
+     * - `"{#}000[aaa]/NIC-\`*[**]"` - complex pattern with optional parts
+     *
+     * For more details, see: https://imask.js.org/guide.html#masked-pattern
+     */
+    mask: string | FactoryOpts | null;
+    /**
+     * Value of `autocomplete` attribute of the internal `<input>`.
+     */
+    autocomplete?: HTMLInputElement["autocomplete"];
+    private _unmaskedValue;
+    /**
+     * The label text used as the value of aria-label.
+     * Set automatically by `reflectInputGroup` method.
+     */
+    private _label;
+    private _hasLeftSlot;
+    private _hasRightSlot;
+    private _inputRef;
+    private _maskInstance;
+    private _initializeMask;
+    private _destroyMask;
+    /**
+     * The unmasked value of the input.
+     */
+    get unmaskedValue(): string;
+    set unmaskedValue(value: string);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleChange;
+    private _handleSlotChange;
+    private _handleInput;
+    private _createIcon;
+    render(): TemplateResult<1>;
+    updated(changedProperties: PropertyValues<this>): void;
+    /**
+     * This method is used by `daikin-input-group` to reflect it's attributes to this component.
+     * @private
+     */
+    reflectInputGroup(inputGroup: DaikinInputGroup): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-text-masked-field": DaikinTextMaskedField;
+    }
+}