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

package/dist/es-dev/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;
+    }
+}

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

@@ -0,0 +1,313 @@
+import { cva } from "class-variance-authority";
+import IMask from "imask";
+import { unsafeCSS, css, 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 "../../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;
+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 cvaInput = cva(
+  [
+    "flex",
+    "items-center",
+    "w-full",
+    "h-full",
+    "bg-ddt-color-common-background-default",
+    "relative",
+    "rounded",
+    "overflow-hidden",
+    "font-daikinSerif",
+    "outline",
+    "outline-[--color-border]",
+    "outline-0",
+    "-outline-offset-2",
+    "placeholder:text-ddt-color-common-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-focus,--color-base]/color-border",
+    "border",
+    "border-[--color-border]",
+    "enabled:text-ddt-color-common-text-primary",
+    "enabled:data-[empty]:text-ddt-color-common-text-secondary",
+    "enabled:hover:bg-ddt-color-common-surface-hover",
+    "enabled:active:bg-ddt-color-common-surface-press",
+    "focus-visible:outline-2",
+    "disabled:var-color-ddt-color-common-disabled/color-base",
+    "disabled:text-ddt-color-common-disabled",
+    "disabled:bg-ddt-color-common-background-default",
+    "disabled:placeholder:text-ddt-color-common-disabled"
+  ],
+  {
+    variants: {
+      error: {
+        false: [
+          "enabled:var-color-ddt-color-common-neutral-default/color-base",
+          "enabled:hover:var-color-ddt-color-common-neutral-hover/color-base",
+          "enabled:active:var-color-ddt-color-common-neutral-press/color-base",
+          "focus-visible:var-color-ddt-color-common-border-focus/color-state-focus"
+        ],
+        true: ["enabled:var-color-ddt-color-common-danger-default/color-base"]
+      },
+      leftIcon: {
+        false: ["pl-4"],
+        true: ["pl-11"]
+      },
+      rightIcon: {
+        false: ["pr-4"],
+        true: ["pr-11"]
+      }
+    }
+  }
+);
+const cvaIcon = cva(
+  ["flex", "items-center", "absolute", "pointer-events-none"],
+  {
+    variants: {
+      icon: {
+        left: ["left-3"],
+        right: ["right-3"]
+      },
+      disabled: {
+        false: ["text-ddt-color-common-text-primary"],
+        true: ["text-ddt-color-common-disabled"]
+      }
+    }
+  }
+);
+let DaikinTextMaskedField = class extends DDSFormElement {
+  constructor() {
+    super(...arguments);
+    this.placeholder = null;
+    this.readonly = false;
+    this.disabled = false;
+    this.required = false;
+    this.error = false;
+    this.minlength = null;
+    this.maxlength = null;
+    this.pattern = null;
+    this.mask = null;
+    this._unmaskedValue = "";
+    this._label = null;
+    this._hasLeftSlot = false;
+    this._hasRightSlot = false;
+    this._inputRef = createRef();
+    this._maskInstance = null;
+  }
+  _initializeMask() {
+    if (!this._inputRef.value || !this.mask) {
+      return;
+    }
+    this._destroyMask();
+    const maskOptions = typeof this.mask === "string" ? { mask: this.mask, lazy: false, placeholderChar: "X" } : this.mask;
+    this._maskInstance = IMask(this._inputRef.value, maskOptions);
+    this._maskInstance.on("accept", () => {
+      if (this._maskInstance) {
+        this._unmaskedValue = this._maskInstance.unmaskedValue;
+        this.value = this._maskInstance.value;
+      }
+    });
+  }
+  _destroyMask() {
+    var _a;
+    (_a = this._maskInstance) == null ? void 0 : _a.destroy();
+    this._maskInstance = null;
+  }
+  /**
+   * The unmasked value of the input.
+   */
+  get unmaskedValue() {
+    return this._unmaskedValue;
+  }
+  set unmaskedValue(value) {
+    if (this._maskInstance) {
+      this._maskInstance.unmaskedValue = value;
+      this.value = this._maskInstance.value;
+      this._unmaskedValue = this._maskInstance.unmaskedValue;
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._initializeMask();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._destroyMask();
+  }
+  _handleChange(event) {
+    this.dispatchEvent(new Event("change", event));
+  }
+  _handleSlotChange(event) {
+    const target = event.target;
+    const name = target.name;
+    const hasIcon = !!target.assignedNodes().length;
+    switch (name) {
+      case "left-icon":
+        this._hasLeftSlot = hasIcon;
+        break;
+      case "right-icon":
+        this._hasRightSlot = hasIcon;
+        break;
+    }
+  }
+  _handleInput(event) {
+    this.value = event.target.value;
+  }
+  _createIcon() {
+    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>`;
+  }
+  render() {
+    const error = !this.disabled && this.error;
+    const hasLeftSlot = this._hasLeftSlot;
+    const hasRightSlot = this._hasRightSlot;
+    const leftIcon = hasLeftSlot;
+    const rightIcon = hasRightSlot;
+    return html`<input
+        ${ref(this._inputRef)}
+        class=${cvaInput({
+      error,
+      leftIcon,
+      rightIcon
+    })}
+        type="text"
+        placeholder=${ifDefined(this.placeholder ?? void 0)}
+        name=${ifDefined(this.name)}
+        minlength=${ifDefined(this.minlength ?? void 0)}
+        maxlength=${ifDefined(this.maxlength ?? 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)}
+        .value=${this.value}
+        ?data-empty=${!this._unmaskedValue}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?required=${this.required}
+        @change=${this._handleChange}
+        @input=${this._handleInput}
+      />
+      ${this._createIcon()}`;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("mask")) {
+      this._destroyMask();
+      this._initializeMask();
+    }
+    if (!changedProperties.has("value")) {
+      return;
+    }
+    this.setFormValue(this.value);
+  }
+  /**
+   * This method is used by `daikin-input-group` to reflect it's attributes to this component.
+   * @private
+   */
+  reflectInputGroup(inputGroup) {
+    const isError = !inputGroup.disabled && !!inputGroup.error;
+    this.disabled = !!inputGroup.disabled;
+    this.required = !!inputGroup.required;
+    this.error = isError;
+    this._label = inputGroup.label;
+  }
+};
+DaikinTextMaskedField.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: flex;
+      align-items: center;
+      height: 3rem;
+      position: relative;
+    }
+
+    input::-ms-reveal {
+      display: none !important;
+    }
+
+    input::-ms-clear {
+      display: none !important;
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], DaikinTextMaskedField.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTextMaskedField.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTextMaskedField.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTextMaskedField.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTextMaskedField.prototype, "error", 2);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], DaikinTextMaskedField.prototype, "minlength", 2);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], DaikinTextMaskedField.prototype, "maxlength", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTextMaskedField.prototype, "pattern", 2);
+__decorateClass([
+  property({ attribute: false })
+], DaikinTextMaskedField.prototype, "mask", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTextMaskedField.prototype, "autocomplete", 2);
+__decorateClass([
+  state()
+], DaikinTextMaskedField.prototype, "_unmaskedValue", 2);
+__decorateClass([
+  state()
+], DaikinTextMaskedField.prototype, "_label", 2);
+__decorateClass([
+  state()
+], DaikinTextMaskedField.prototype, "_hasLeftSlot", 2);
+__decorateClass([
+  state()
+], DaikinTextMaskedField.prototype, "_hasRightSlot", 2);
+DaikinTextMaskedField = __decorateClass([
+  ddsElement("daikin-text-masked-field")
+], DaikinTextMaskedField);
+export {
+  DaikinTextMaskedField
+};

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

@@ -0,0 +1 @@
+export * from "./daikin-text-masked-field.js";

package/dist/es-dev/components/text-masked-field/index.js

@@ -0,0 +1,4 @@
+import { DaikinTextMaskedField } from "./daikin-text-masked-field.js";
+export {
+  DaikinTextMaskedField
+};

package/dist/es-dev/components/time-picker/daikin-time-picker.d.ts

@@ -0,0 +1,165 @@
+import { PropertyValues } from 'lit';
+import { DDSFormElement } from "../../base/dds-form-element.js";
+import { default as DaikinInputGroup } from "../input-group/daikin-input-group.js";
+/**
+ * Represents the hour and minute parts of a time value.
+ * The `hour` and `minute` values can be placeholder strings ('hh', 'mm') or numeric strings representing time values.
+ */
+type TimeParts = {
+    hour: string;
+    minute: string;
+};
+/**
+ * Type for time input item: hour or minute.
+ */
+type TimeItem = "hour" | "minute";
+/**
+ * Converts a 12-hour time string and AM/PM to 24-hour format (e.g. "02:30", "PM" => "14:30").
+ */
+export declare function to24HourFormat(time: string, meridiem: "AM" | "PM"): string;
+/**
+ * Converts a 24-hour time string to 12-hour format and AM/PM (e.g. "14:30" => { time: "02:30", meridiem: "PM" }).
+ */
+export declare function from24HourFormat(time: string): {
+    time: string;
+    meridiem: "AM" | "PM";
+};
+/**
+ * Validates if a time string matches the 24-hour format.
+ */
+export declare function isValidValueTime(str: string): boolean;
+/**
+ * Checks if a time is out of the given range.
+ */
+export declare function isTimeOutOfRange(time: string, min: string, max: string): boolean;
+/**
+ * Formats a time object as a UI display string (HH:MM).
+ * The hour/minute values do not have to be valid.
+ */
+export declare function formatPartsForUI({ hour, minute, }: Readonly<TimeParts>): string;
+/**
+ * Parses a UI time string (HH:MM) and returns an hour/minute object.
+ * The result is not guaranteed to be valid.
+ */
+export declare function parsePartsFromUIValue(value: string): TimeParts;
+/**
+ * Attempts to parse a valid time string from a UI value (HH:MM).
+ * Returns null if invalid.
+ */
+export declare function tryParseTimeFromUIValue(value: string): string | null;
+/**
+ * Formats a valid time string as a UI display string (HH:MM).
+ */
+export declare function formatTimeForUI(timeString: string): string;
+/**
+ * Determines whether the current selection is on the hour or minute part.
+ * Returns null if no match.
+ */
+export declare function getTimeItemInSelection(selectionStart: number, selectionEnd: number): TimeItem | null;
+/**
+ * Calculate digit key input, returns new time parts and whether input is complete.
+ * @returns { parts, done } or null
+ */
+export declare function calcDigitInput(parts: Readonly<TimeParts>, item: TimeItem, digit: string, hourDigitIndex: number): {
+    parts: TimeParts;
+    done: boolean;
+} | null;
+/**
+ * The time picker provides a time input field and a dropdown button for selecting AM/PM, allowing users to quickly enter a specific time in 12-hour format.
+ * Please note that while the value displayed on the UI is in 12-hour format, the value you get from the component's value property will be automatically converted to 24-hour format.
+ *
+ * @fires change - A custom event emitted when the value of component changed. Validation errors will not trigger this event.
+ * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event). Triggered when user type value to input area and change the value of component. change dropdown or validation errors will not trigger this event.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/time-picker/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-time-picker></daikin-time-picker>
+ * ```
+ */
+export declare class DaikinTimePicker extends DDSFormElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Placeholder text.
+     */
+    placeholder: string | null;
+    /**
+     * Minimum time (00:00 - 23:59). If the user's input value is less than this value, the component will display an error state.
+     * Please note that while the UI displays time in a 12-hour format (AM/PM), the component's value is stored in a 24-hour format. The `min` property must also be provided in 24-hour format.
+     */
+    min: string;
+    /**
+     * Maximum time (00:00 - 23:59). If the user's input value is more than this value, the component will display an error state.
+     * Please note that while the UI displays time in a 12-hour format (AM/PM), the component's value is stored in a 24-hour format. The `max` property must also be provided in 24-hour format.
+     */
+    max: string;
+    /**
+     * Whether the field is disabled. Controlled by daikin-input-group.
+     */
+    disabled: boolean;
+    /**
+     * Whether the field is required. Controlled by daikin-input-group.
+     */
+    required: boolean;
+    /**
+     * Whether to show error state. Controlled by daikin-input-group. Ignored if disabled.
+     */
+    error: boolean;
+    /**
+     * Minutes step. Specify the step size for the minutes when using the up and down arrow keys.
+     */
+    minutesStep: string;
+    private _label;
+    private _inputValue;
+    private _currentSelection;
+    private _meridiem;
+    private _timeInputElement;
+    /**
+     * Tracks the current digit index for hour input (0: first digit, 1: second digit).
+     */
+    private _hourDigitIndex;
+    /**
+     * Returns the value to display in the input field (from _inputValue state).
+     */
+    private get _timeValue();
+    /**
+     * Syncs the AM/PM value with the current value (24-hour) if value changes externally.
+     */
+    private _syncMeridiemWithValue;
+    private get _min();
+    private get _max();
+    private _convertZeroHourToTwelve;
+    private _handleFocusIn;
+    private _handleFocusOut;
+    private _handleChange;
+    private _handleMouseUp;
+    private _handleDigitInput;
+    private _handleKeyDown;
+    private _updateTimeByOffset;
+    private _handleBeforeInput;
+    /**
+     * Updates the value in 24-hour format if the input is valid, keeps UI in 12-hour format.
+     */
+    private _updateValue;
+    private _updateInputSelection;
+    private _updateSelection;
+    private _handleDropdownChange;
+    render(): import('lit-html').TemplateResult<1>;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected 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-time-picker": DaikinTimePicker;
+    }
+}
+export {};