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

package/dist/cjs-dev/components/modal-header/daikin-modal-header.d.cts

@@ -0,0 +1,43 @@
+import { DDSElement } from "../../base/index.cjs";
+/**
+ * `daikin-modal-header` is used to represent header of the modal component, and is used as a child element of the `daikin-modal` component.
+ *
+ * Hierarchy:
+ * - `daikin-modal` > `daikin-modal-header`
+ *
+ * @slot description - An optional slot for description.
+ * @slot - A slot for modal title.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/modal-header/index.js";
+ * ```
+ *
+ * ```html
+ * <!-- See `daikin-modal` component for complete example. -->
+ * <daikin-modal-header>
+ *   <span slot="description">Description</span>
+ *   <span>Modal Title</span>
+ * </daikin-modal-header>
+ * ```
+ */
+export declare class DaikinModalHeader extends DDSElement {
+    static styles: import('lit').CSSResult;
+    /**
+     * Whether the modal is open.
+     */
+    withCloseButton: boolean;
+    private _closeButton;
+    private _handleClick;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the header content area.
+     */
+    focusCloseButton(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-modal-header": DaikinModalHeader;
+    }
+}

package/dist/cjs-dev/components/modal-header/index.cjs

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

package/dist/cjs-dev/components/modal-header/index.d.cts

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

package/dist/cjs-dev/components/progress-bar/daikin-progress-bar.cjs

@@ -67,14 +67,14 @@ const cvaBarContainer = classVarianceAuthority.cva(
           "after:size-4",
           "after:flex-none",
           "after:bg-ddt-color-common-success",
-          "after:i-daikin-status-positive"
+          "after:i-daikin-success"
         ],
         indeterminate: [],
         error: [
           "after:size-4",
           "after:flex-none",
           "after:text-ddt-color-common-danger-default",
-          "after:i-daikin-status-error"
+          "after:i-daikin-error"
         ]
       }
     }

package/dist/cjs-dev/components/progress-indicator-item/daikin-progress-indicator-item.cjs

@@ -59,7 +59,7 @@ exports.DaikinProgressIndicatorItem = class DaikinProgressIndicatorItem extends
       ${this.status === "finished" ? lit.html`
             <span
               role="img"
-              class="flex-none size-4 i-daikin-status-positive text-ddt-color-common-brand-default"
+              class="flex-none size-4 i-daikin-success text-ddt-color-common-brand-default"
               aria-label="Completed"
             ></span>
           ` : lit.nothing}

package/dist/cjs-dev/components/radio/daikin-radio.cjs

@@ -4,9 +4,10 @@ const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
-const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
+const ddsFormElement = require("../../base/dds-form-element.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -54,24 +55,21 @@ const cvaLabel = classVarianceAuthority.cva([], {
     }
   }
 });
-exports.DaikinRadio = class DaikinRadio extends ddsElement.DDSElement {
+exports.DaikinRadio = class DaikinRadio extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
-    this.name = "";
-    this.value = "";
     this.label = "";
     this.labelPosition = "right";
     this.checked = false;
     this.disabled = false;
     this.disabledByParent = false;
     this.skipTab = false;
-    this._internals = this.attachInternals();
   }
   get _labelHidden() {
     return this.labelPosition === "hidden";
   }
   _updateFormValue() {
-    this._internals.setFormValue(this.checked ? this.value : null);
+    this.setFormValue(this.checked ? this.value : null);
   }
   _handleClick(event) {
     var _a;
@@ -143,13 +141,6 @@ exports.DaikinRadio.styles = lit.css`
       display: inline-block;
     }
   `;
-exports.DaikinRadio.formAssociated = true;
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinRadio.prototype, "name", 2);
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinRadio.prototype, "value", 2);
 __decorateClass([
   decorators_js.property({ type: String })
 ], exports.DaikinRadio.prototype, "label", 2);

package/dist/cjs-dev/components/radio/daikin-radio.d.cts

@@ -1,4 +1,4 @@
-import { DDSElement } from "../../base/index.cjs";
+import { DDSFormElement } from "../../base/dds-form-element.cjs";
 /**
  * The radio button component is a UI element that allows users to select one options from a set of choices.
  * It functions similarly to the HTML `<input type="radio">` tag. \
@@ -21,16 +21,8 @@ import { DDSElement } from "../../base/index.cjs";
  *  <daikin-radio name="name" value="value" label="Radio button label"></daikin-radio>
  * ```
  */
-export declare class DaikinRadio extends DDSElement {
+export declare class DaikinRadio extends DDSFormElement {
     static readonly styles: import('lit').CSSResult;
-    /**
-     * The form name, submitted as a name/value pair when submitting the form.
-     */
-    name: string;
-    /**
-     * The form value, submitted as a name/value pair when submitting the form.
-     */
-    value: string;
     /**
      * Label text for the radio button.
      */
@@ -62,9 +54,7 @@ export declare class DaikinRadio extends DDSElement {
      */
     skipTab: boolean;
     private _radio;
-    static readonly formAssociated = true;
     private get _labelHidden();
-    private _internals;
     private _updateFormValue;
     private _handleClick;
     private _handleChange;

package/dist/cjs-dev/components/radio-group/daikin-radio-group.cjs

@@ -19,7 +19,7 @@ var __decorateClass = (decorators2, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaRadioGroup = classVarianceAuthority.cva(["size-full", "flex", "gap-x-3", "gap-y-2"], {
+const cvaRadioGroup = classVarianceAuthority.cva(["size-full", "flex", "gap-x-8", "gap-y-2"], {
   variants: {
     orientation: {
       horizontal: ["flex-row", "flex-wrap"],

package/dist/cjs-dev/components/radio-group/daikin-radio-group.d.cts

@@ -40,7 +40,8 @@ export declare class DaikinRadioGroup extends DDSElement {
      */
     orientation: RadioGroupProps["orientation"];
     /**
-     * The form name.
+     * The form name, submitted as a name/value pair when submitting the form.
+     * When this value is set, all `daikin-radio` child components under it will be assigned this name.
      */
     name: string;
     /**

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

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

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

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

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

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

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

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

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

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

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

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