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

package/dist/es/components/progress-bar/daikin-progress-bar.js

@@ -0,0 +1,138 @@
+import { colorFeedbackPositive, 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 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 cvaBar = cva(
+  [
+    "w-full",
+    "h-1",
+    "bg-daikinNeutral-200",
+    "overflow-hidden",
+    "relative",
+    "after:block",
+    "after:h-full",
+    "after:absolute",
+    "after:left-0"
+  ],
+  {
+    variants: {
+      variant: {
+        inprogress: ["after:w-[--bar-width]", "after:bg-daikinBlue-500"],
+        completed: ["after:w-full", "after:bg-[--colorFeedbackPositive]"],
+        indeterminate: [
+          "after:w-1/2",
+          "after:bg-daikinBlue-500",
+          "after:animate-[progress-bar-indeterminate_1200ms_linear_infinite]"
+        ],
+        error: ["after:w-full", "after:bg-[--colorFeedbackNegative]"]
+      }
+    }
+  }
+);
+const cvaIcon = cva(["size-4"], {
+  variants: {
+    variant: {
+      inprogress: ["none"],
+      completed: ["i-daikin-status-positive"],
+      indeterminate: [],
+      error: ["i-daikin-status-negative"]
+    }
+  }
+});
+const cvaHelper = cva(["text-xs", "mt-2"], {
+  variants: {
+    variant: {
+      inprogress: [],
+      completed: [],
+      indeterminate: [],
+      error: ["text-[--colorFeedbackNegative]"]
+    }
+  }
+});
+let DaikinProgressBar = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = 0;
+    this.variant = "inprogress";
+    this.max = 100;
+    this.helper = "";
+  }
+  // Validate the 'value' and 'max' properties to ensure they are valid
+  _validateProperties() {
+    if (typeof this.value !== "number" || this.value < 0) {
+      this.value = 0;
+    }
+    if (typeof this.max !== "number" || this.max <= 0) {
+      this.max = 100;
+    }
+    if (this.value > this.max) {
+      this.value = this.max;
+    }
+  }
+  render() {
+    const progressRatio = Math.min(Math.max(this.value / this.max, 0), 1);
+    return html`<div class="flex flex-col w-full font-daikinSerif">
+      <div class="flex justify-between items-center mb-2.5">
+        <span class="text-sm leading-[22px] font-medium"><slot></slot></span>
+        <span class=${cvaIcon({ variant: this.variant })}></span>
+      </div>
+      <div
+        class=${cvaBar({ variant: this.variant })}
+        role="progressbar"
+        aria-label=${this.textContent ?? ""}
+        aria-valuenow=${this.value}
+        aria-valuemin="0"
+        aria-valuemax=${this.max}
+        style=${`--bar-width:${progressRatio * 100}%`}
+      ></div>
+      ${this.helper ? html`<span class=${cvaHelper({ variant: this.variant })}
+            >${this.helper}</span
+          >` : null}
+    </div>`;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("value") || changedProperties.has("max")) {
+      this._validateProperties();
+    }
+  }
+};
+DaikinProgressBar.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      --colorFeedbackPositive: ${unsafeCSS(colorFeedbackPositive)};
+      --colorFeedbackNegative: ${unsafeCSS(colorFeedbackNegative)};
+
+      display: block;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  property({ type: Number })
+], DaikinProgressBar.prototype, "value", 2);
+__decorateClass([
+  property({ type: String })
+], DaikinProgressBar.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Number })
+], DaikinProgressBar.prototype, "max", 2);
+__decorateClass([
+  property({ type: String })
+], DaikinProgressBar.prototype, "helper", 2);
+DaikinProgressBar = __decorateClass([
+  customElement("daikin-progress-bar")
+], DaikinProgressBar);
+export {
+  DaikinProgressBar
+};

package/dist/es/components/progress-bar/index.d.ts

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

package/dist/es/components/progress-bar/index.js

@@ -0,0 +1,4 @@
+import { DaikinProgressBar } from "./daikin-progress-bar.js";
+export {
+  DaikinProgressBar
+};

package/dist/es/components/radio/daikin-radio.d.ts

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import { MergeVariantProps } from '../../type-utils';
-
 declare const cvaRadio: (props?: ({
     size?: "small" | "large" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -9,7 +8,17 @@ declare const cvaLabel: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type RadioVariantProps = MergeVariantProps<typeof cvaRadio | typeof cvaLabel>;
 /**
- * Primary UI component for user interaction
+ * 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. \
+ * Please note that **a radio group component is not yet available**, so you'll need to manually group radio buttons when using multiple instances.
+ *
+ * @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="radio">` element.
+ *
+ * @example
+ *
+ * ```html
+ *  <daikin-radio name="name" value="value" label="Radio button label"></daikin-radio>
+ * ```
  */
 export declare class DaikinRadio extends LitElement {
     static readonly styles: import('lit').CSSResult;

package/dist/es/components/radio/index.js

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

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

@@ -0,0 +1,54 @@
+import { LitElement } from 'lit';
+/**
+ * The tab component is a child element within the `daikin-tab-group` component, representing a clickable button or label that users interact with to switch between different panels of content.
+ * Each tab corresponds to a specific panel and is typically labeled to indicate the content it reveals.
+ *
+ * Hierarchy:
+ * - `daikin-tab-group` > `daikin-tab`
+ *
+ * @fires click - A retargeted event of a [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) emitted from the inner `<button>` element. Suppressed if `disabled` is true,
+ *
+ * @slot - A slot for the tab button content.
+ *
+ * @example
+ *
+ * ```html
+ * <!-- See `daikin-tab-group` component for complete example. -->
+ * <daikin-tab value="foo">Foo tab</daikin-tab>
+ * ```
+ */
+export declare class DaikinTab extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * A unique string that identifies a tab.
+     * Must be unique within the `daikin-tab-group` component.
+     */
+    value: string;
+    /**
+     * Size of tab
+     */
+    size: "default" | "condensed";
+    /**
+     * Whether to show the disabled state.
+     */
+    disabled: boolean;
+    /**
+     * Whether to show the active (selected) state.
+     * Ignored if `disabled` is `true`.
+     * Set automatically by `daikin-tab-group` component.
+     */
+    active: boolean;
+    private _handleClick;
+    constructor();
+    /**
+     * Focuses on the inner button.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions | undefined): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-tab": DaikinTab;
+    }
+}

package/dist/es/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/components/tab/index.d.ts

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

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

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

package/dist/es/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/components/tab-group/daikin-tab-group.js

@@ -0,0 +1,212 @@
+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) {
+      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)) {
+      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/components/tab-group/index.d.ts

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

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

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