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

package/dist/es-dev/components/text-input/daikin-text-input.js

@@ -0,0 +1,138 @@
+import { colorFeedbackNegative } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { property, 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 cvaInput = cva(
+  [
+    "w-[340px]",
+    "h-12",
+    "text-daikinNeutral-900",
+    "border",
+    "border-solid",
+    "px-[9px]",
+    "rounded-[6px]",
+    "font-daikinSerif",
+    "placeholder:text-daikinNeutral-200",
+    "enabled:hover:outline",
+    "enabled:hover:outline-2",
+    "enabled:hover:outline-[--text-input-outline-color-hover]",
+    "enabled:active:outline",
+    "enabled:active:outline-2",
+    "enabled:active:outline-[--text-input-outline-color-active]",
+    "focus-visible:outline",
+    "focus-visible:outline-2",
+    "focus-visible:outline-[--text-input-outline-color-active]",
+    "disabled:text-[--text-input-outline-color-disabled]",
+    "disabled:bg-[--text-input-background-color]",
+    "disabled:border-[--text-input-outline-color-disabled]"
+  ],
+  {
+    variants: {
+      variant: {
+        normal: ["border-daikinNeutral-600"],
+        error: ["bg-daikinRed-50", "border-[--text-input-border-color-error]"]
+      }
+    }
+  }
+);
+let DaikinTextInput = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._internals = this.attachInternals();
+    this.value = "";
+    this.type = "text";
+    this.placeholder = "";
+    this.disabled = false;
+    this.readonly = false;
+    this.error = false;
+  }
+  _handleInput(e) {
+    this.value = e.target.value;
+    this._internals.setFormValue(this.value);
+  }
+  render() {
+    const textInputInputClassName = cvaInput({
+      variant: !this.disabled && this.error ? "error" : "normal"
+    });
+    return html`<input
+      class=${textInputInputClassName}
+      type=${this.type}
+      value=${this.value}
+      placeholder=${this.placeholder}
+      name=${ifDefined(this.name)}
+      maxlength=${ifDefined(this.maxlength)}
+      autocomplete=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined(this.autocomplete)}
+      ?disabled=${this.disabled}
+      ?readonly=${this.readonly}
+      @change=${(e) => this.dispatchEvent(new Event("change", e))}
+      @input=${this._handleInput}
+    />`;
+  }
+  updated(changedProperties) {
+    if (!changedProperties.has("value")) {
+      return;
+    }
+    this._internals.setFormValue(this.value);
+  }
+};
+DaikinTextInput.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      --text-input-background-color: #ffffff;
+      --text-input-border-color-error: ${unsafeCSS(colorFeedbackNegative)};
+      --text-input-outline-color-disabled: #dcdcdc;
+      --text-input-outline-color-active: #cecece;
+      --text-input-outline-color-hover: #54c3f1;
+
+      display: block;
+      width: max-content;
+    }
+  `;
+DaikinTextInput.formAssociated = true;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTextInput.prototype, "value", 2);
+__decorateClass([
+  property({ type: String })
+], DaikinTextInput.prototype, "type", 2);
+__decorateClass([
+  property({ type: String })
+], DaikinTextInput.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTextInput.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTextInput.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTextInput.prototype, "name", 2);
+__decorateClass([
+  property({ type: Number })
+], DaikinTextInput.prototype, "maxlength", 2);
+__decorateClass([
+  property({ type: String })
+], DaikinTextInput.prototype, "autocomplete", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTextInput.prototype, "error", 2);
+DaikinTextInput = __decorateClass([
+  customElement("daikin-text-input")
+], DaikinTextInput);
+export {
+  DaikinTextInput
+};

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

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

package/dist/es-dev/components/text-input/index.js

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

package/dist/es-dev/components/textarea/daikin-textarea.d.ts

@@ -0,0 +1,70 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * The textarea 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-textarea` (can be used solely)
+ * - `daikin-input-group` > `daikin-textarea`
+ *
+ * @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.
+ *
+ * @example
+ *
+ * ```html
+ * <!-- See `daikin-input-group` component for complete example. -->
+ * <daikin-textarea name="name"></daikin-textarea>
+ * ```
+ */
+export declare class DaikinTextarea extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    static readonly formAssociated = true;
+    private _internals;
+    /**
+     * Field value
+     */
+    value: string;
+    /**
+     * Placeholder text
+     */
+    placeholder: string;
+    /**
+     * Whether the field is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the field is required
+     */
+    required: boolean;
+    /**
+     * Whether the field is readonly
+     */
+    readonly: boolean;
+    /**
+     * Maximum length in field values
+     */
+    maxlength: number;
+    /**
+     * Specify auto-completion values
+     */
+    autocomplete?: HTMLInputElement["autocomplete"];
+    /**
+     * Error state. Ignored if the `disabled` is `true`.
+     */
+    error: boolean;
+    /**
+     * Whether to display a counter at the top of the text area
+     */
+    counter: boolean;
+    protected _textareaCounter: number;
+    private _updateValueAndCounter;
+    private _handleInput;
+    render(): import('lit-html').TemplateResult<1>;
+    updated(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-textarea": DaikinTextarea;
+    }
+}

package/dist/es-dev/components/textarea/daikin-textarea.js

@@ -0,0 +1,169 @@
+import { colorFeedbackNegative } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
+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-[340px]",
+    "h-[120px]",
+    "text-daikinNeutral-900",
+    "border",
+    "border-solid",
+    "px-[9px]",
+    "py-1",
+    "font-daikinSerif",
+    "rounded-[6px]",
+    "placeholder:text-daikinNeutral-200",
+    "enabled:hover:outline",
+    "enabled:hover:outline-2",
+    "enabled:hover:outline-[--text-input-outline-color-hover]",
+    "enabled:active:outline",
+    "enabled:active:outline-2",
+    "enabled:active:outline-[--text-input-outline-color-active]",
+    "focus-visible:outline",
+    "focus-visible:outline-2",
+    "focus-visible:outline-[--text-input-outline-color-active]",
+    "disabled:text-[--text-input-outline-color-disabled]",
+    "disabled:bg-[--text-input-background-color]",
+    "disabled:border-[--text-input-outline-color-disabled]"
+  ],
+  {
+    variants: {
+      variant: {
+        normal: ["border-daikinNeutral-600"],
+        error: ["bg-daikinRed-50", "border-[--text-input-border-color-error]"]
+      }
+    }
+  }
+);
+const cvaCounter = cva(
+  ["absolute", "top-[-24px]", "right-0", "text-[12px]", "font-daikinSerif"],
+  {
+    variants: {
+      variant: {
+        normal: ["text-daikinNeutral-900"],
+        disabled: ["text-[--text-input-outline-color-disabled]"]
+      }
+    }
+  }
+);
+let DaikinTextarea = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._internals = this.attachInternals();
+    this.value = "";
+    this.placeholder = "";
+    this.disabled = false;
+    this.required = false;
+    this.readonly = false;
+    this.maxlength = 100;
+    this.error = false;
+    this.counter = false;
+    this._textareaCounter = 0;
+  }
+  _updateValueAndCounter(value) {
+    this._internals.setFormValue(value);
+    this._textareaCounter = [...value].length;
+  }
+  _handleInput(e) {
+    this.value = e.target.value;
+    this._updateValueAndCounter(this.value);
+  }
+  render() {
+    const textareaClassName = cvaTextarea({
+      variant: !this.disabled && this.error ? "error" : "normal"
+    });
+    const textareaCounterClassName = cvaCounter({
+      variant: this.disabled ? "disabled" : "normal"
+    });
+    return html`<textarea
+        class=${textareaClassName}
+        .value=${this.value}
+        placeholder=${this.placeholder}
+        maxlength=${this.maxlength}
+        autocomplete=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined(this.autocomplete)}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        @change=${(e) => this.dispatchEvent(new Event("change", e))}
+        @input=${this._handleInput}
+        @keydown=${this._handleInput}
+      ></textarea>
+      ${this.counter ? html`
+            <span class=${textareaCounterClassName}
+              >${this._textareaCounter}/${this.maxlength}</span
+            >
+          ` : null}`;
+  }
+  updated(changedProperties) {
+    if (!changedProperties.has("value")) {
+      return;
+    }
+    this._updateValueAndCounter(this.value);
+  }
+};
+DaikinTextarea.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      --text-input-border-color-error: ${unsafeCSS(colorFeedbackNegative)};
+      --text-input-outline-color-hover: #54c3f1;
+      --text-input-outline-color-disabled: #dcdcdc;
+      --text-input-outline-color-active: #cecece;
+      --text-input-background-color: #ffffff;
+
+      display: block;
+      width: max-content;
+      height: 120px;
+      position: relative;
+    }
+  `;
+DaikinTextarea.formAssociated = true;
+__decorateClass([
+  property({ type: String })
+], DaikinTextarea.prototype, "value", 2);
+__decorateClass([
+  property({ type: String })
+], DaikinTextarea.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTextarea.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTextarea.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTextarea.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], DaikinTextarea.prototype, "maxlength", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTextarea.prototype, "autocomplete", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTextarea.prototype, "error", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTextarea.prototype, "counter", 2);
+__decorateClass([
+  state()
+], DaikinTextarea.prototype, "_textareaCounter", 2);
+DaikinTextarea = __decorateClass([
+  customElement("daikin-textarea")
+], DaikinTextarea);
+export {
+  DaikinTextarea
+};

package/dist/es-dev/components/textarea/index.d.ts

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

package/dist/es-dev/components/textarea/index.js

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

package/dist/es-dev/components/toggle/daikin-toggle.d.ts

@@ -0,0 +1,60 @@
+import { LitElement, PropertyValues } from 'lit';
+import { MergeVariantProps } from '../../type-utils';
+declare const cvaToggle: (props?: ({
+    size?: "default" | "small" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type ToggleVariantProps = MergeVariantProps<typeof cvaToggle>;
+/**
+ * The toggle switch component is a UI element that allows users to switch between two states, typically "on" and "off".
+ * It functions similarly to a `daikin-checkbox` component but provides a more visually intuitive way to represent binary options.
+ * This component is ideal for scenarios where the binary choice has a significant or immediate effect, such as enabling or disabling a feature or setting.
+ * Unlike `daikin-checkbox`, this component doesn't have a label and a "indeterminate" state.
+ *
+ * @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 type="checkbox">` element.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-toggle name="name" value="value"></daikin-toggle>
+ * ```
+ */
+export declare class DaikinToggle extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    static readonly formAssociated = true;
+    private _internals;
+    private _updateFormValue;
+    private _input;
+    private _handleChange;
+    /**
+     * Specify the component size
+     */
+    size: ToggleVariantProps["size"];
+    /**
+     * Specify whether the Toggle should be disabled
+     */
+    disabled: boolean;
+    /**
+     * Specify whether the control is checked
+     */
+    checked: boolean;
+    /**
+     * The form name.
+     */
+    name: string;
+    /**
+     * The value.
+     */
+    value: string;
+    /**
+     * Specify whether the Toggle is in a error state
+     */
+    error: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+    updated(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-toggle": DaikinToggle;
+    }
+}
+export {};

package/dist/es-dev/components/toggle/daikin-toggle.js

@@ -0,0 +1,133 @@
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { query, property, customElement } from "lit/decorators.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 cvaToggle = cva(
+  [
+    "appearance-none",
+    "cursor-pointer",
+    "relative",
+    "bg-daikinNeutral-200",
+    "rounded-3xl",
+    "transition-color",
+    "duration-300",
+    "disabled:bg-daikinNeutral-200",
+    "before:content-['']",
+    "before:absolute",
+    "before:rounded-full",
+    "before:transition",
+    "before:disabled:bg-daikinNeutral-400"
+  ],
+  {
+    variants: {
+      size: {
+        default: [
+          "w-[51px]",
+          "h-[31px]",
+          "checked:bg-daikinBlue-500",
+          "before:h-[27px]",
+          "before:w-[27px]",
+          "before:bg-white",
+          "before:top-[2px]",
+          "before:left-[2px]",
+          "before:checked:translate-x-5"
+        ],
+        small: [
+          "w-8",
+          "h-[14px]",
+          "checked:bg-daikinBlue-50",
+          "before:h-5",
+          "before:w-5",
+          "before:top-[-3px]",
+          "before:bg-daikinNeutral-600",
+          "before:checked:bg-daikinBlue-500",
+          "before:checked:translate-x-3"
+        ]
+      }
+    }
+  }
+);
+let DaikinToggle = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._internals = this.attachInternals();
+    this.size = "default";
+    this.disabled = false;
+    this.checked = false;
+    this.name = "";
+    this.value = "";
+    this.error = false;
+  }
+  _updateFormValue() {
+    this._internals.setFormValue(this.checked ? this.value : null);
+  }
+  _handleChange(event) {
+    if (!this._input) {
+      return;
+    }
+    this._updateFormValue();
+    this.dispatchEvent(new Event("change", event));
+  }
+  render() {
+    const toggleClassName = cvaToggle({ size: this.size });
+    return html`<input
+      class=${toggleClassName}
+      type="checkbox"
+      name=${this.name}
+      value=${this.value}
+      .checked=${this.checked}
+      ?disabled=${this.disabled}
+      @change=${this._handleChange}
+    />`;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("checked")) {
+      this._updateFormValue();
+    }
+  }
+};
+DaikinToggle.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: inline-flex;
+    }
+  `;
+DaikinToggle.formAssociated = true;
+__decorateClass([
+  query("input")
+], DaikinToggle.prototype, "_input", 2);
+__decorateClass([
+  property({ type: String })
+], DaikinToggle.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinToggle.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinToggle.prototype, "checked", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinToggle.prototype, "name", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinToggle.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinToggle.prototype, "error", 2);
+DaikinToggle = __decorateClass([
+  customElement("daikin-toggle")
+], DaikinToggle);
+export {
+  DaikinToggle
+};

package/dist/es-dev/components/toggle/index.d.ts

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

package/dist/es-dev/components/toggle/index.js

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

package/dist/es-dev/components/tooltip/daikin-tooltip.d.ts

@@ -0,0 +1,76 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * A tooltip component is used to show brief information when a user interacts with an element.
+ *
+ * @fires beforetoggle - _Cancellable._ A custom event emitted when the tooltip is about to be opened or closed by user interaction.
+ * @fires toggle - A custom event emitted when the tooltip is opened or closed.
+ *
+ * @slot - A slot for the element to which the tooltip is attached (the trigger element).
+ * @slot tooltip - A slot for the tooltip content.
+ *
+ * @cssprop [--dds-tooltip-spacing=20px] - Spacing between the tooltip and the trigger
+ *
+ * @example
+ *
+ * ```html
+ * </daikin-tooltip>
+ *   <span slot="tooltip">This is a message</span>
+ *   <span>hover me</span>
+ * </daikin-tooltip>
+ * ```
+ *
+ * ```html
+ * </daikin-tooltip description="This is a message">
+ *   <span>hover me</span>
+ * </daikin-tooltip>
+ * ```
+ */
+export declare class DaikinTooltip extends LitElement {
+    static registerCSSCustomProperties(): void;
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Specifies the position of the tooltip relative to the trigger.
+     */
+    placement: "top" | "bottom" | "left" | "right";
+    /**
+     * Specifies the tooltip theme.
+     */
+    variant: "light" | "dark";
+    /**
+     * Whether the tooltip is open.
+     */
+    open: boolean;
+    /**
+     * Specifies the content of the tooltip.
+     * Ignored if the `tooltip` slot exists.
+     */
+    description: string;
+    /**
+     * if true, the tooltip will hide on click.
+     */
+    closeOnClick: boolean;
+    /**
+     * How the tooltip is controlled.
+     * - "hover": The tooltip is displayed when the mouse hovers over the trigger element, and hidden when the mouse is no longer hovering. (default)
+     * - "manual": The tooltip does not respond to user interaction. Use this to control the tooltip programmatically.
+     */
+    trigger: "hover" | "manual";
+    private _tooltipRef;
+    private _triggerRef;
+    private _autoUpdateCleanup;
+    private _hostStyles;
+    private _startAutoUpdate;
+    private _uninstallAutoUpdate;
+    private _changeOpenState;
+    private _handleClick;
+    private _handleMouseLeave;
+    private _handleMouseEnter;
+    render(): import('lit-html').TemplateResult<1>;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-tooltip": DaikinTooltip;
+    }
+}