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

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

@@ -0,0 +1,127 @@
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { 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 cvaTab = cva(
+  [
+    "flex",
+    "w-full",
+    "h-full",
+    "items-center",
+    "justify-center",
+    "text-center",
+    "relative",
+    "font-daikinSerif",
+    "text-base",
+    "tracking-wide",
+    "whitespace-nowrap",
+    "contain-paint",
+    "disabled:cursor-default",
+    "after:content-['']",
+    "after:z-1",
+    "after:absolute",
+    "after:bottom-0",
+    "after:left-0",
+    "after:right-0",
+    "after:w-full",
+    "text-daikinBlue-500",
+    "hover:text-daikinBlue-400",
+    "active:text-daikinBlue-600",
+    "focus-visible:text-daikinBlue-700",
+    "disabled:text-daikinNeutral-300",
+    "aria-selected:after:h-1",
+    "aria-selected:after:bg-daikinBlue-500",
+    "hover:aria-selected:after:bg-daikinBlue-400",
+    "active:aria-selected:after:bg-daikinBlue-600",
+    "focus-visible:aria-selected:after:bg-daikinBlue-700",
+    "disabled:after:bg-daikinNeutral-300"
+  ],
+  {
+    variants: {
+      size: {
+        default: ["px-4"],
+        condensed: ["px-[10px]"]
+      }
+    }
+  }
+);
+let DaikinTab = class extends LitElement {
+  constructor() {
+    super();
+    this.value = "";
+    this.size = "default";
+    this.disabled = false;
+    this.active = false;
+    this.addEventListener("click", this._handleClick);
+  }
+  _handleClick(event) {
+    if (this.disabled) {
+      event.stopImmediatePropagation();
+    }
+  }
+  /**
+   * Focuses on the inner button.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a, _b;
+    (_b = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("button")) == null ? void 0 : _b.focus(options);
+  }
+  render() {
+    const cn = cvaTab({
+      size: this.size
+    });
+    return html`
+      <button
+        class=${cn}
+        ?disabled=${this.disabled}
+        role="tab"
+        aria-selected=${!this.disabled && this.active}
+        tabindex=${this.active ? 0 : -1}
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+};
+DaikinTab.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: inline-block;
+      width: fit-content;
+      height: 48px;
+    }
+
+    :host([size="condensed"]) {
+      height: 40px;
+    }
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTab.prototype, "value", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTab.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTab.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTab.prototype, "active", 2);
+DaikinTab = __decorateClass([
+  customElement("daikin-tab")
+], DaikinTab);
+export {
+  DaikinTab
+};

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

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

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

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

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

@@ -0,0 +1,104 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * The tab group component manages a group of tabs and switches the content displayed using the panel switcher component.
+ * It allows users to navigate between different sections of content by clicking on individual tabs.
+ * Tab groups do not provide styles; developers must apply styles to the wrapper of the tabs (`tablist` part) and to the panel switcher(s).
+ *
+ * > [!WARNING]
+ * > At least one tab must be available (that means, the tab must be present and enabled).
+ * > Otherwise, unexpected behavior may be encountered.
+ *
+ * Hierarchies:
+ * - `daikin-tab-group` > `daikin-tab`
+ * - `daikin-tab-group` > `daikin-panel-switcher` ("panels" slot)
+ *
+ * @fires beforechange - _Cancellable._ A custom event emitted when the current tab is about to be changed by user interaction.
+ * @fires change - A custom event emitted when the current tab is changed.
+ *
+ * @slot - A slot for tab buttons. Place `daikin-tab` elements here.
+ * @slot panels - A slot for a panel switcher component. Place `daikin-panel-switcher` element(s) here.
+ *
+ * @csspart tablist - The container element for the default (tab list) slot. Has "tablist" role.
+ *
+ * @example
+ *
+ * ```html
+ * <!-- See storybook for styling tab group. You'll need `::part(tablist)` to style the tab container. -->
+ * <daikin-tab-group value="foo">
+ *   <daikin-tab value="foo">Foo tab</daikin-tab>
+ *   <daikin-tab value="bar">Bar tab</daikin-tab>
+ *   <!-- At least one "daikin-panel-switcher" is needed to switch the content. -->
+ *   <daikin-panel-switcher slot="panels">
+ *     <!-- Mind the "panel:" prefix. -->
+ *     <p slot="panel:foo">Foo tab content.</p>
+ *     <p slot="panel:bar">Bar tab content.</p>
+ *   </daikin-panel-switcher>
+ * </daikin-tab-group>
+ * ```
+ */
+export declare class DaikinTabGroup extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * `value` of the currently selected tab (`daikin-tab`).
+     */
+    value: string;
+    /**
+     * Tab(s) in the default slot.
+     */
+    private _tabs;
+    /**
+     * Panel switcher(s) in the `panels` slot.
+     */
+    private _panelSwitchers;
+    /**
+     * 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.
+     */
+    private _emitBeforeChange;
+    /**
+     * Updates `this.value` and emit "change" event.
+     *
+     * @param newValue The `value` of the newly active tab.
+     */
+    private _updateValue;
+    /**
+     * Updates `daikin-tab` component(s)' properties in the slot.
+     *
+     * Invoke when:
+     * - `this.value` is changed.
+     * - the default slot's content is changed.
+     */
+    private _updateTabs;
+    /**
+     * 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.
+     */
+    private _updatePanelSwitcher;
+    /**
+     * Handles "click" event emitted by `daikin-tab` component.
+     */
+    private _handleTabClick;
+    /**
+     * Handles keyboard interactions in the tab list.
+     */
+    private _handleKeyDown;
+    private _handleSlotChange;
+    private _handlePanelSwitcherSlotChange;
+    render(): import('lit-html').TemplateResult<1>;
+    updated(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-tab-group": DaikinTabGroup;
+    }
+}

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