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

package/dist/es-dev/components/panel-switcher/daikin-panel-switcher.js

@@ -0,0 +1,63 @@
+import { css, unsafeCSS, LitElement, html, nothing } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.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;
+};
+let DaikinPanelSwitcher = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.panels = [];
+    this.panelRole = null;
+  }
+  render() {
+    {
+      if (!this.panels.includes(this.value)) {
+        console.warn(
+          `[daikin-panel-switcher] No panel slot named "panel:${this.value}". Nothing will be rendered.`
+        );
+      }
+    }
+    return repeat(
+      this.panels,
+      (value) => html`<div
+          class=${this.value === value ? "contents" : "hidden"}
+          role=${// HACK: Workaround lit-analyzer not recognizing `nothing` (runem/lit-analyzer#207).
+      this.panelRole ?? nothing}
+          ?hidden=${this.value !== value}
+        >
+          <slot name=${`panel:${value}`}></slot>
+        </div>`
+    );
+  }
+};
+DaikinPanelSwitcher.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinPanelSwitcher.prototype, "value", 2);
+__decorateClass([
+  property({
+    type: Array,
+    hasChanged: (newValue, oldValue) => JSON.stringify(newValue) !== JSON.stringify(oldValue)
+  })
+], DaikinPanelSwitcher.prototype, "panels", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "panel-role" })
+], DaikinPanelSwitcher.prototype, "panelRole", 2);
+DaikinPanelSwitcher = __decorateClass([
+  customElement("daikin-panel-switcher")
+], DaikinPanelSwitcher);
+export {
+  DaikinPanelSwitcher
+};

package/dist/es-dev/components/panel-switcher/index.d.ts

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

package/dist/es-dev/components/panel-switcher/index.js

@@ -0,0 +1,4 @@
+import { DaikinPanelSwitcher } from "./daikin-panel-switcher.js";
+export {
+  DaikinPanelSwitcher
+};

package/dist/es-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/es-dev/components/progress-bar/daikin-progress-bar.js

@@ -0,0 +1,153 @@
+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) {
+      {
+        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 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-dev/components/progress-bar/index.d.ts

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

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

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

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

@@ -0,0 +1,151 @@
+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 cvaRadio = 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 = cva(
+  ["leading-8", "not-italic", "font-normal", "align-middle"],
+  {
+    variants: {
+      size: {
+        small: ["text-sm"],
+        large: ["text-base"]
+      }
+    }
+  }
+);
+let DaikinRadio = class extends 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 ? html`<span class="${labelClassName}">${this.label}</span>` : html``;
+    const inputTag = 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" ? html`${labelText}${inputTag}` : html`${inputTag}${labelText}`;
+    return html`<label
+      class="inline-flex w-full h-full gap-[8px] items-center font-daikinSerif"
+      >${inputArea}</label
+    >`;
+  }
+};
+DaikinRadio.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: inline-block;
+    }
+  `;
+DaikinRadio.formAssociated = true;
+__decorateClass([
+  property({ type: String })
+], DaikinRadio.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], DaikinRadio.prototype, "size", 2);
+__decorateClass([
+  property({ type: String, attribute: "label-position" })
+], DaikinRadio.prototype, "labelPosition", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinRadio.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinRadio.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinRadio.prototype, "checked", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinRadio.prototype, "name", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinRadio.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinRadio.prototype, "error", 2);
+DaikinRadio = __decorateClass([
+  customElement("daikin-radio")
+], DaikinRadio);
+export {
+  DaikinRadio
+};

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

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

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

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

package/dist/es-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;
+    }
+}