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

package/dist/es-dev/components/tab-group/daikin-tab-group.js

@@ -0,0 +1,222 @@
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { property, queryAssignedElements, customElement } from "lit/decorators.js";
+import tailwindStyles from "../../tailwind.css.js";
+import { scrollIntoViewOnlyParent } from "./scroller.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;
+};
+let DaikinTabGroup = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+  }
+  /**
+   * Emits `beforechange` event if necessary and returns whether we should proceed.
+   *
+   * 1. Check if `newValue` is different from `value`.
+   * 2. Emit "beforechange" event.
+   * 3. Check if the event is canceled.
+   *
+   * @param newValue The `value` of the newly active tab.
+   * @returns `true` if we should proceed (event is emitted and not canceled). `false` otherwise.
+   */
+  _emitBeforeChange(newValue) {
+    if (this.value === newValue) {
+      return false;
+    }
+    if (!this.dispatchEvent(
+      new CustomEvent("beforechange", {
+        detail: { oldValue: this.value, newValue },
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      })
+    )) {
+      return false;
+    }
+    return true;
+  }
+  /**
+   * Updates `this.value` and emit "change" event.
+   *
+   * @param newValue The `value` of the newly active tab.
+   */
+  _updateValue(newValue) {
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { oldValue: this.value, newValue },
+        bubbles: true,
+        composed: true,
+        cancelable: false
+      })
+    );
+    this.value = newValue;
+  }
+  /**
+   * Updates `daikin-tab` component(s)' properties in the slot.
+   *
+   * Invoke when:
+   * - `this.value` is changed.
+   * - the default slot's content is changed.
+   */
+  _updateTabs() {
+    const tabs = this._tabs;
+    let selectedTab;
+    for (const tab of tabs) {
+      const isActive = !selectedTab && !tab.disabled && tab.value === this.value;
+      tab.active = isActive;
+      if (isActive) {
+        selectedTab = tab;
+      }
+    }
+    if (!selectedTab) {
+      selectedTab = tabs.find((tab) => !tab.disabled);
+      if (selectedTab) {
+        selectedTab.active = true;
+        this._updateValue(selectedTab.value);
+      }
+    }
+    if (!selectedTab) {
+      {
+        console.warn(
+          `[daikin-tab-group] No tabs that can be activated! This may cause unexpected behavior.`
+        );
+      }
+      return;
+    }
+    scrollIntoViewOnlyParent(selectedTab);
+  }
+  /**
+   * Updates `daikin-panel-switcher` 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() {
+    const panelSwitchers = this._panelSwitchers;
+    const tabs = this._tabs;
+    const panels = Array.from(new Set(tabs.map((tab) => tab.value)));
+    for (const panelSwitcher of panelSwitchers) {
+      panelSwitcher.panelRole = "tabpanel";
+      panelSwitcher.panels = panels;
+      panelSwitcher.value = this.value;
+    }
+  }
+  /**
+   * Handles "click" event emitted by `daikin-tab` component.
+   */
+  _handleTabClick(event) {
+    const tabs = this._tabs;
+    const tab = event.target;
+    if (!tab || !tabs.includes(tab)) {
+      return;
+    }
+    event.stopImmediatePropagation();
+    if (this.value === tab.value) {
+      return;
+    }
+    if (!this._emitBeforeChange(tab.value)) {
+      return;
+    }
+    for (const element of tabs) {
+      element.active = element === tab;
+    }
+    this._updateValue(tab.value);
+  }
+  /**
+   * Handles keyboard interactions in the tab list.
+   */
+  _handleKeyDown(event) {
+    const moveOffset = {
+      ArrowRight: 1,
+      ArrowLeft: -1
+    }[event.key];
+    if (!moveOffset) {
+      return;
+    }
+    const tabs = this._tabs;
+    if (!tabs.some((tab) => !tab.disabled)) {
+      {
+        console.warn(
+          `[daikin-tab-group] No tabs that can be activated! This may cause unexpected behavior.`
+        );
+      }
+      return;
+    }
+    const activeElement = document.activeElement;
+    const focusedTabIndex = activeElement ? tabs.findIndex((tab) => tab.contains(activeElement)) : -1;
+    if (focusedTabIndex < 0) {
+      const activeTab = tabs.find((tab) => !tab.disabled && tab.active);
+      activeTab == null ? void 0 : activeTab.focus();
+      event.preventDefault();
+      return;
+    }
+    for (let i = 1; i <= tabs.length; i++) {
+      const index = (focusedTabIndex + moveOffset * i + tabs.length * i) % tabs.length;
+      const candidate = tabs[index];
+      if (candidate.disabled) {
+        continue;
+      }
+      candidate.focus();
+      event.preventDefault();
+      return;
+    }
+  }
+  _handleSlotChange() {
+    this._updateTabs();
+    this._updatePanelSwitcher();
+  }
+  _handlePanelSwitcherSlotChange() {
+    this._updatePanelSwitcher();
+  }
+  render() {
+    return html`
+      <div
+        part="tablist"
+        role="tablist"
+        @click=${this._handleTabClick}
+        @keydown=${this._handleKeyDown}
+      >
+        <slot @slotchange=${this._handleSlotChange}></slot>
+      </div>
+      <slot
+        name="panels"
+        @slotchange=${this._handlePanelSwitcherSlotChange}
+      ></slot>
+    `;
+  }
+  updated(changedProperties) {
+    if (!changedProperties.has("value")) {
+      return;
+    }
+    this._updateTabs();
+    this._updatePanelSwitcher();
+  }
+};
+DaikinTabGroup.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTabGroup.prototype, "value", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "daikin-tab" })
+], DaikinTabGroup.prototype, "_tabs", 2);
+__decorateClass([
+  queryAssignedElements({ slot: "panels", selector: "daikin-panel-switcher" })
+], DaikinTabGroup.prototype, "_panelSwitchers", 2);
+DaikinTabGroup = __decorateClass([
+  customElement("daikin-tab-group")
+], DaikinTabGroup);
+export {
+  DaikinTabGroup
+};

package/dist/es-dev/components/tab-group/index.d.ts

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

package/dist/es-dev/components/tab-group/index.js

@@ -0,0 +1,4 @@
+import { DaikinTabGroup } from "./daikin-tab-group.js";
+export {
+  DaikinTabGroup
+};

package/dist/es-dev/components/tab-group/scroller.d.ts

@@ -0,0 +1,25 @@
+export type Direction = "horizontal" | "vertical" | "either";
+/**
+ * Get practical parent element, with consideration for slots and shadow roots.
+ *
+ * @param element element
+ * @returns The parent element (if any)
+ */
+export declare function getEffectiveParentElement(element: HTMLElement): HTMLElement | null;
+/**
+ * Get the first scrollable ancestor element.
+ *
+ * @param element element
+ * @param direction scroll direction
+ * @returns the first scrollable ancestor element (if any)
+ */
+export declare function getFirstScrollableAncestor(element: HTMLElement, direction: Direction): HTMLElement | null;
+export declare function calcScrollIntoViewOffset(target: HTMLElement, container: HTMLElement): [x: number, y: number];
+/**
+ * An alternative `.scrollIntoView()` function which only scrolls the first scrollable ancestor element.
+ *
+ * @param target target element
+ * @param direction direction
+ * @returns `true` if success, `false` if scrollable parent not found
+ */
+export declare function scrollIntoViewOnlyParent(target: HTMLElement, direction: Direction): boolean;

package/dist/es-dev/components/tab-group/scroller.js

@@ -0,0 +1,65 @@
+function getEffectiveParentElement(element) {
+  var _a;
+  return element.assignedSlot || element.parentElement || ((_a = element.parentNode) == null ? void 0 : _a.host);
+}
+function getBooleanForDirection(horizontal, vertical, direction) {
+  return horizontal;
+}
+function isScrollableOverflowValue(overflow) {
+  return overflow !== "visible" && overflow !== "hidden" && overflow !== "clip";
+}
+function getFirstScrollableAncestor(element, direction) {
+  const parent = getEffectiveParentElement(element);
+  if (!parent) {
+    return null;
+  }
+  const overflow = getBooleanForDirection(
+    parent.scrollWidth > parent.clientWidth,
+    parent.scrollHeight > parent.clientHeight
+  );
+  if (overflow) {
+    const computedStyle = getComputedStyle(parent);
+    const scrollableOverflow = getBooleanForDirection(
+      isScrollableOverflowValue(computedStyle.overflowX),
+      isScrollableOverflowValue(computedStyle.overflowY)
+    );
+    if (scrollableOverflow) {
+      return parent;
+    }
+  }
+  return getFirstScrollableAncestor(parent);
+}
+function calcScrollIntoViewOffset(target, container) {
+  const bBoxContainer = container.getBoundingClientRect();
+  const bBoxTarget = target.getBoundingClientRect();
+  const scrollByX = (
+    // If the left end of the target is to the left of the container, align the left end of the target so that it is in the viewport.
+    Math.min(bBoxTarget.left - bBoxContainer.left, 0) || // If the right end of the target is to the right of the container, align the right end of the target so that it is in the viewport.
+    Math.max(bBoxTarget.right - bBoxContainer.right, 0)
+  );
+  const scrollByY = Math.min(bBoxTarget.top - bBoxContainer.top, 0) || Math.max(bBoxTarget.bottom - bBoxContainer.bottom, 0);
+  return [scrollByX, scrollByY];
+}
+function scrollIntoViewOnlyParent(target, direction) {
+  const scrollableParent = getFirstScrollableAncestor(target);
+  if (!scrollableParent) {
+    return false;
+  }
+  let [scrollByX, scrollByY] = calcScrollIntoViewOffset(
+    target,
+    scrollableParent
+  );
+  {
+    scrollByY = 0;
+  }
+  if (scrollByX || scrollByY) {
+    scrollableParent.scrollBy(scrollByX, scrollByY);
+  }
+  return true;
+}
+export {
+  calcScrollIntoViewOffset,
+  getEffectiveParentElement,
+  getFirstScrollableAncestor,
+  scrollIntoViewOnlyParent
+};

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

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

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,71 @@
+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;
+    }
+}