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

package/dist/cjs-dev/components/progress-bar/daikin-progress-bar.cjs

@@ -0,0 +1,152 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const variables_js = require("@daikin-oss/dds-tokens/js/daikin/Light/variables.js");
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const tailwind = require("../../tailwind.css.cjs");
+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 = classVarianceAuthority.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 = classVarianceAuthority.cva(["size-4"], {
+  variants: {
+    variant: {
+      inprogress: ["none"],
+      completed: ["i-daikin-status-positive"],
+      indeterminate: [],
+      error: ["i-daikin-status-negative"]
+    }
+  }
+});
+const cvaHelper = classVarianceAuthority.cva(["text-xs", "mt-2"], {
+  variants: {
+    variant: {
+      inprogress: [],
+      completed: [],
+      indeterminate: [],
+      error: ["text-[--colorFeedbackNegative]"]
+    }
+  }
+});
+exports.DaikinProgressBar = class DaikinProgressBar extends lit.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) {
+      {
+        console.warn(
+          `Invalid 'value' property: ${this.value}. Falling back to 0.`
+        );
+      }
+      this.value = 0;
+    }
+    if (typeof this.max !== "number" || this.max <= 0) {
+      {
+        console.warn(
+          `Invalid 'max' property: ${this.max}. Falling back to 100.`
+        );
+      }
+      this.max = 100;
+    }
+    if (this.value > this.max) {
+      {
+        console.warn(
+          `'value' property: ${this.value} exceeds 'max' property: ${this.max}. Clamping value to max.`
+        );
+      }
+      this.value = this.max;
+    }
+  }
+  render() {
+    const progressRatio = Math.min(Math.max(this.value / this.max, 0), 1);
+    return lit.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 ? lit.html`<span class=${cvaHelper({ variant: this.variant })}
+            >${this.helper}</span
+          >` : null}
+    </div>`;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("value") || changedProperties.has("max")) {
+      this._validateProperties();
+    }
+  }
+};
+exports.DaikinProgressBar.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      --colorFeedbackPositive: ${lit.unsafeCSS(variables_js.colorFeedbackPositive)};
+      --colorFeedbackNegative: ${lit.unsafeCSS(variables_js.colorFeedbackNegative)};
+
+      display: block;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: Number })
+], exports.DaikinProgressBar.prototype, "value", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinProgressBar.prototype, "variant", 2);
+__decorateClass([
+  decorators_js.property({ type: Number })
+], exports.DaikinProgressBar.prototype, "max", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinProgressBar.prototype, "helper", 2);
+exports.DaikinProgressBar = __decorateClass([
+  decorators_js.customElement("daikin-progress-bar")
+], exports.DaikinProgressBar);

package/dist/cjs-dev/components/progress-bar/daikin-progress-bar.d.ts

@@ -0,0 +1,47 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * The progress bar component is used to visually convey the progress to the user.
+ *
+ * There are four variants of the progress bar:
+ *
+ * - "inprogress": The default variant. Use this when you know the exact progress. The length of the bar is the ratio of `value` to `max`.
+ * - "indeterminate": Use this variant when you don't know the exact progress. In this variant, the `value` is ignored and the bar always animates from left to right with a constant length.
+ * - "completed": In addition to "inprogress", a completed icon is added. In this variant, the `value` is ignored and the bar always expands to the full width.
+ * - "error": In addition to "inprogress", an error icon is added and the color becomes red. In this variant, the `value` is ignored and the bar always expands to the full width.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-progress-bar value="40" helper="Progress bar helper">
+ *   Progress bar label
+ * </daikin-progress-bar>
+ * ```
+ */
+export declare class DaikinProgressBar extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Value of the progress bar
+     */
+    value: number;
+    /**
+     * Variant of the progress bar
+     */
+    variant: "inprogress" | "completed" | "indeterminate" | "error";
+    /**
+     * The max value of the progress bar
+     */
+    max: number;
+    /**
+     * Helper text
+     */
+    helper: string;
+    private _validateProperties;
+    render(): import('lit-html').TemplateResult<1>;
+    protected updated(changedProperties: PropertyValues): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-progress-bar": DaikinProgressBar;
+    }
+}
+export default DaikinProgressBar;

package/dist/cjs-dev/components/progress-bar/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinProgressBar = require("./daikin-progress-bar.cjs");
+Object.defineProperty(exports, "DaikinProgressBar", {
+  enumerable: true,
+  get: () => daikinProgressBar.DaikinProgressBar
+});

package/dist/cjs-dev/components/progress-bar/index.d.ts

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

package/dist/cjs-dev/components/radio/daikin-radio.cjs

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const tailwind = require("../../tailwind.css.cjs");
+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 cvaRadio = classVarianceAuthority.cva(
+  [
+    "appearance-none",
+    "relative",
+    "after:absolute",
+    "after:i-daikin-radio-unchecked",
+    "checked:after:i-daikin-radio-checked",
+    "enabled:after:text-[#8C8C8C]",
+    "enabled:checked:after:text-daikinBlue-500",
+    "aria-controllable:hover:after:i-daikin-radio-checked",
+    "aria-controllable:hover:after:text-daikinBlue-300",
+    "aria-controllable:active:after:i-daikin-radio-checked",
+    "aria-controllable:active:after:text-daikinBlue-500",
+    "focus-visible:outline-none",
+    "aria-controllable:focus-visible:after:i-daikin-radio-unchecked",
+    "aria-controllable:focus-visible:checked:after:i-daikin-radio-checked",
+    "aria-controllable:focus-visible:after:text-daikinBlue-700",
+    "disabled:after:text-daikinNeutral-200"
+  ],
+  {
+    variants: {
+      size: {
+        small: ["w-[14px]", "h-[14px]"],
+        large: ["w-4", "h-4"]
+      }
+    }
+  }
+);
+const cvaLabel = classVarianceAuthority.cva(
+  ["leading-8", "not-italic", "font-normal", "align-middle"],
+  {
+    variants: {
+      size: {
+        small: ["text-sm"],
+        large: ["text-base"]
+      }
+    }
+  }
+);
+exports.DaikinRadio = class DaikinRadio extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this._internals = this.attachInternals();
+    this.label = "";
+    this.size = "small";
+    this.labelPosition = "right";
+    this.disabled = false;
+    this.readonly = false;
+    this.checked = false;
+    this.name = "";
+    this.value = "";
+    this.error = false;
+  }
+  _handleClick(event) {
+    if (this.readonly || this.disabled) {
+      event.preventDefault();
+    }
+  }
+  _updateFormValue() {
+    this._internals.setFormValue(this.checked ? this.value : null);
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("checked")) {
+      this._updateFormValue();
+    }
+  }
+  _handleChange(event) {
+    var _a;
+    const input = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("input");
+    this.checked = input.checked;
+    this._updateFormValue();
+    const newEvent = new Event("change", event);
+    this.dispatchEvent(newEvent);
+  }
+  render() {
+    const labelClassName = cvaLabel({ size: this.size });
+    const radioClassName = cvaRadio({ size: this.size });
+    const labelText = this.label ? lit.html`<span class="${labelClassName}">${this.label}</span>` : lit.html``;
+    const inputTag = lit.html`<input
+      class=${radioClassName}
+      type="radio"
+      name=${this.name}
+      value=${this.value}
+      aria-readonly=${this.readonly}
+      ?disabled=${this.disabled}
+      .checked=${this.checked}
+      @click=${this._handleClick}
+      @change=${this._handleChange}
+    />`;
+    const inputArea = this.labelPosition === "left" ? lit.html`${labelText}${inputTag}` : lit.html`${inputTag}${labelText}`;
+    return lit.html`<label
+      class="inline-flex w-full h-full gap-[8px] items-center font-daikinSerif"
+      >${inputArea}</label
+    >`;
+  }
+};
+exports.DaikinRadio.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-block;
+    }
+  `;
+exports.DaikinRadio.formAssociated = true;
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinRadio.prototype, "label", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinRadio.prototype, "size", 2);
+__decorateClass([
+  decorators_js.property({ type: String, attribute: "label-position" })
+], exports.DaikinRadio.prototype, "labelPosition", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinRadio.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinRadio.prototype, "readonly", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinRadio.prototype, "checked", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinRadio.prototype, "name", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinRadio.prototype, "value", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinRadio.prototype, "error", 2);
+exports.DaikinRadio = __decorateClass([
+  decorators_js.customElement("daikin-radio")
+], exports.DaikinRadio);

package/dist/cjs-dev/components/radio/daikin-radio.d.ts

@@ -0,0 +1,75 @@
+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;
+declare const cvaLabel: (props?: ({
+    size?: "small" | "large" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type RadioVariantProps = MergeVariantProps<typeof cvaRadio | typeof cvaLabel>;
+/**
+ * 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;
+    private _handleClick;
+    static readonly formAssociated = true;
+    private _internals;
+    private _updateFormValue;
+    updated(changedProperties: Map<string, unknown>): void;
+    private _handleChange;
+    /**
+     * Specify the label text for the radio
+     */
+    label: string;
+    /**
+     * Specify the component size
+     */
+    size: RadioVariantProps["size"];
+    /**
+     * Specify the label position
+     * when `left` the label will be in left of radio, when `right` label will be in right of radio
+     */
+    labelPosition: "left" | "right";
+    /**
+     * Specify whether the Radio should be disabled
+     */
+    disabled: boolean;
+    /**
+     * Specify whether the radio is read only
+     */
+    readonly: boolean;
+    /**
+     * Specify whether the radio is be checked
+     */
+    checked: boolean;
+    /**
+     * The form name.
+     */
+    name: string;
+    /**
+     * The form value.
+     */
+    value: string;
+    /**
+     * Specify whether the Radio is in a error state
+     */
+    error: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-radio": DaikinRadio;
+    }
+}
+export {};

package/dist/cjs-dev/components/radio/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinRadio = require("./daikin-radio.cjs");
+Object.defineProperty(exports, "DaikinRadio", {
+  enumerable: true,
+  get: () => daikinRadio.DaikinRadio
+});

package/dist/cjs-dev/components/radio/index.d.ts

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

package/dist/cjs-dev/components/tab/daikin-tab.cjs

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const tailwind = require("../../tailwind.css.cjs");
+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 = classVarianceAuthority.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]"]
+      }
+    }
+  }
+);
+exports.DaikinTab = class DaikinTab extends lit.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 lit.html`
+      <button
+        class=${cn}
+        ?disabled=${this.disabled}
+        role="tab"
+        aria-selected=${!this.disabled && this.active}
+        tabindex=${this.active ? 0 : -1}
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+};
+exports.DaikinTab.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-block;
+      width: fit-content;
+      height: 48px;
+    }
+
+    :host([size="condensed"]) {
+      height: 40px;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinTab.prototype, "value", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinTab.prototype, "size", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTab.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinTab.prototype, "active", 2);
+exports.DaikinTab = __decorateClass([
+  decorators_js.customElement("daikin-tab")
+], exports.DaikinTab);

package/dist/cjs-dev/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/cjs-dev/components/tab/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinTab = require("./daikin-tab.cjs");
+Object.defineProperty(exports, "DaikinTab", {
+  enumerable: true,
+  get: () => daikinTab.DaikinTab
+});

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

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