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

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

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

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

package/dist/cjs/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;

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

@@ -1,5 +1,4 @@
 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.

package/dist/cjs/components/tab-group/daikin-tab-group.d.ts

@@ -1,5 +1,4 @@
 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.

package/dist/cjs/components/text-input/daikin-text-input.d.ts

@@ -1,5 +1,4 @@
 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.

package/dist/cjs/components/textarea/daikin-textarea.d.ts

@@ -1,5 +1,4 @@
 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.

package/dist/cjs/components/toggle/daikin-toggle.d.ts

@@ -1,6 +1,5 @@
 import { LitElement, PropertyValues } from 'lit';
 import { MergeVariantProps } from '../../type-utils';
-
 declare const cvaToggle: (props?: ({
     size?: "default" | "small" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/cjs/components/tooltip/daikin-tooltip.cjs

@@ -0,0 +1,223 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const dom = require("@floating-ui/dom");
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const ref_js = require("lit/directives/ref.js");
+const isClient = require("../../is-client.cjs");
+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 cvaTooltip = classVarianceAuthority.cva(
+  [
+    "absolute",
+    "p-3",
+    "justify-center",
+    "items-center",
+    "rounded",
+    "w-max",
+    "top-0",
+    "left-0",
+    "max-w-[312px]",
+    "text-sm",
+    "font-daikinSerif",
+    "font-normal",
+    "not-italic",
+    "leading-5"
+  ],
+  {
+    variants: {
+      variant: {
+        light: [
+          "border",
+          "border-solid",
+          "border-daikinNeutral-800",
+          "bg-white/90",
+          "text-black"
+        ],
+        dark: ["bg-daikinNeutral-800/90", "text-white"]
+      },
+      open: {
+        true: ["visible", "opacity-100"],
+        false: ["invisible", "opacity-0"]
+      }
+    }
+  }
+);
+const DEFAULT_TOOLTIP_SPACING = "20px";
+exports.DaikinTooltip = class DaikinTooltip extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.placement = "bottom";
+    this.variant = "light";
+    this.open = false;
+    this.description = "";
+    this.closeOnClick = false;
+    this.trigger = "hover";
+    this._tooltipRef = ref_js.createRef();
+    this._triggerRef = ref_js.createRef();
+    this._autoUpdateCleanup = null;
+    this._hostStyles = isClient.isClient ? window.getComputedStyle(this) : null;
+  }
+  static registerCSSCustomProperties() {
+    if (!isClient.isClient) {
+      return;
+    }
+    window.CSS.registerProperty({
+      name: "--dds-tooltip-spacing",
+      syntax: "<length>",
+      inherits: true,
+      initialValue: "0px"
+    });
+  }
+  _startAutoUpdate() {
+    var _a;
+    if (!isClient.isClient) {
+      return;
+    }
+    const reference = this._triggerRef.value;
+    const float = this._tooltipRef.value;
+    if (!reference || !float) {
+      return;
+    }
+    (_a = this._autoUpdateCleanup) == null ? void 0 : _a.call(this);
+    this._autoUpdateCleanup = dom.autoUpdate(reference, float, () => {
+      var _a2;
+      const spacing = parseInt(
+        ((_a2 = this._hostStyles) == null ? void 0 : _a2.getPropertyValue("--dds-tooltip-spacing")) || DEFAULT_TOOLTIP_SPACING,
+        10
+      );
+      dom.computePosition(reference, float, {
+        placement: this.placement,
+        middleware: [dom.offset({ mainAxis: spacing }), dom.flip(), dom.shift()]
+      }).then(({ x, y }) => {
+        Object.assign(float.style, {
+          left: `${x}px`,
+          top: `${y}px`
+        });
+      }).catch((e) => console.error(e));
+    });
+  }
+  _uninstallAutoUpdate() {
+    var _a;
+    this.open = false;
+    (_a = this._autoUpdateCleanup) == null ? void 0 : _a.call(this);
+    this._autoUpdateCleanup = null;
+  }
+  _changeOpenState(state) {
+    if (this.open === state) {
+      return;
+    }
+    if (!this.dispatchEvent(
+      new CustomEvent("beforetoggle", {
+        detail: { open: this.open },
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      })
+    )) {
+      return;
+    }
+    this.open = state;
+  }
+  _handleClick() {
+    if (this.closeOnClick) {
+      this._changeOpenState(false);
+    }
+  }
+  _handleMouseLeave() {
+    if (this.trigger === "hover") {
+      this._changeOpenState(false);
+    }
+  }
+  _handleMouseEnter() {
+    if (this.trigger === "hover") {
+      this._changeOpenState(true);
+    }
+  }
+  render() {
+    const tooltipClassName = cvaTooltip({
+      variant: this.variant,
+      open: this.open
+    });
+    return lit.html`<div class="relative inline-block">
+      <div
+        ${ref_js.ref(this._triggerRef)}
+        part="trigger"
+        @click=${this._handleClick}
+        @keydown=${this._handleClick}
+        @mouseleave=${this._handleMouseLeave}
+        @mouseenter=${this._handleMouseEnter}
+      >
+        <slot></slot>
+      </div>
+      <span ${ref_js.ref(this._tooltipRef)} part="tooltip" class=${tooltipClassName}>
+        <slot name="tooltip">
+          <span class="whitespace-pre-line">${this.description}</span>
+        </slot>
+      </span>
+    </div>`;
+  }
+  updated(changedProperties) {
+    var _a;
+    if (changedProperties.has("open")) {
+      if (this.open) {
+        this._startAutoUpdate();
+      } else {
+        (_a = this._autoUpdateCleanup) == null ? void 0 : _a.call(this);
+        this._autoUpdateCleanup = null;
+      }
+      this.dispatchEvent(
+        new CustomEvent("toggle", {
+          detail: { open: this.open },
+          bubbles: true,
+          composed: true,
+          cancelable: false
+        })
+      );
+    }
+  }
+  disconnectedCallback() {
+    this._uninstallAutoUpdate();
+  }
+};
+exports.DaikinTooltip.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-block;
+
+      --dds-tooltip-spacing: ${lit.unsafeCSS(DEFAULT_TOOLTIP_SPACING)};
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ reflect: true, type: String })
+], exports.DaikinTooltip.prototype, "placement", 2);
+__decorateClass([
+  decorators_js.property({ reflect: true, type: String })
+], exports.DaikinTooltip.prototype, "variant", 2);
+__decorateClass([
+  decorators_js.property({ reflect: true, type: Boolean })
+], exports.DaikinTooltip.prototype, "open", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinTooltip.prototype, "description", 2);
+__decorateClass([
+  decorators_js.property({ reflect: true, type: Boolean })
+], exports.DaikinTooltip.prototype, "closeOnClick", 2);
+__decorateClass([
+  decorators_js.property({ reflect: true, type: String })
+], exports.DaikinTooltip.prototype, "trigger", 2);
+exports.DaikinTooltip = __decorateClass([
+  decorators_js.customElement("daikin-tooltip")
+], exports.DaikinTooltip);
+exports.DaikinTooltip.registerCSSCustomProperties();

package/dist/cjs/components/tooltip/daikin-tooltip.d.ts

@@ -0,0 +1,76 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * A tooltip component is used to show brief information when a user interacts with an element.
+ *
+ * @fires beforetoggle - _Cancellable._ A custom event emitted when the tooltip is about to be opened or closed by user interaction.
+ * @fires toggle - A custom event emitted when the tooltip is opened or closed.
+ *
+ * @slot - A slot for the element to which the tooltip is attached (the trigger element).
+ * @slot tooltip - A slot for the tooltip content.
+ *
+ * @cssprop [--dds-tooltip-spacing=20px] - Spacing between the tooltip and the trigger
+ *
+ * @example
+ *
+ * ```html
+ * </daikin-tooltip>
+ *   <span slot="tooltip">This is a message</span>
+ *   <span>hover me</span>
+ * </daikin-tooltip>
+ * ```
+ *
+ * ```html
+ * </daikin-tooltip description="This is a message">
+ *   <span>hover me</span>
+ * </daikin-tooltip>
+ * ```
+ */
+export declare class DaikinTooltip extends LitElement {
+    static registerCSSCustomProperties(): void;
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Specifies the position of the tooltip relative to the trigger.
+     */
+    placement: "top" | "bottom" | "left" | "right";
+    /**
+     * Specifies the tooltip theme.
+     */
+    variant: "light" | "dark";
+    /**
+     * Whether the tooltip is open.
+     */
+    open: boolean;
+    /**
+     * Specifies the content of the tooltip.
+     * Ignored if the `tooltip` slot exists.
+     */
+    description: string;
+    /**
+     * if true, the tooltip will hide on click.
+     */
+    closeOnClick: boolean;
+    /**
+     * How the tooltip is controlled.
+     * - "hover": The tooltip is displayed when the mouse hovers over the trigger element, and hidden when the mouse is no longer hovering. (default)
+     * - "manual": The tooltip does not respond to user interaction. Use this to control the tooltip programmatically.
+     */
+    trigger: "hover" | "manual";
+    private _tooltipRef;
+    private _triggerRef;
+    private _autoUpdateCleanup;
+    private _hostStyles;
+    private _startAutoUpdate;
+    private _uninstallAutoUpdate;
+    private _changeOpenState;
+    private _handleClick;
+    private _handleMouseLeave;
+    private _handleMouseEnter;
+    render(): import('lit-html').TemplateResult<1>;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-tooltip": DaikinTooltip;
+    }
+}

package/dist/cjs/components/tooltip/index.cjs

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

package/dist/cjs/components/tooltip/index.d.ts

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

package/dist/cjs/index.cjs

@@ -3,18 +3,22 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const colors = require("./colors.cjs");
 const daikinAccordion = require("./components/accordion/daikin-accordion.cjs");
 const daikinAccordionItem = require("./components/accordion-item/daikin-accordion-item.cjs");
+const daikinBreadcrumb = require("./components/breadcrumb/daikin-breadcrumb.cjs");
+const daikinBreadcrumbItem = require("./components/breadcrumb-item/daikin-breadcrumb-item.cjs");
 const daikinButton = require("./components/button/daikin-button.cjs");
 const daikinCheckbox = require("./components/checkbox/daikin-checkbox.cjs");
 const daikinIcon = require("./components/icon/daikin-icon.cjs");
 const daikinInputGroup = require("./components/input-group/daikin-input-group.cjs");
 const daikinNotification = require("./components/notification/daikin-notification.cjs");
 const daikinPanelSwitcher = require("./components/panel-switcher/daikin-panel-switcher.cjs");
+const daikinProgressBar = require("./components/progress-bar/daikin-progress-bar.cjs");
 const daikinRadio = require("./components/radio/daikin-radio.cjs");
 const daikinTab = require("./components/tab/daikin-tab.cjs");
 const daikinTabGroup = require("./components/tab-group/daikin-tab-group.cjs");
 const daikinTextInput = require("./components/text-input/daikin-text-input.cjs");
 const daikinTextarea = require("./components/textarea/daikin-textarea.cjs");
 const daikinToggle = require("./components/toggle/daikin-toggle.cjs");
+const daikinTooltip = require("./components/tooltip/daikin-tooltip.cjs");
 exports.colors = colors.colors;
 Object.defineProperty(exports, "DaikinAccordion", {
   enumerable: true,
@@ -24,6 +28,14 @@ Object.defineProperty(exports, "DaikinAccordionItem", {
   enumerable: true,
   get: () => daikinAccordionItem.DaikinAccordionItem
 });
+Object.defineProperty(exports, "DaikinBreadcrumb", {
+  enumerable: true,
+  get: () => daikinBreadcrumb.DaikinBreadcrumb
+});
+Object.defineProperty(exports, "DaikinBreadcrumbItem", {
+  enumerable: true,
+  get: () => daikinBreadcrumbItem.DaikinBreadcrumbItem
+});
 Object.defineProperty(exports, "DaikinButton", {
   enumerable: true,
   get: () => daikinButton.DaikinButton
@@ -49,6 +61,10 @@ Object.defineProperty(exports, "DaikinPanelSwitcher", {
   enumerable: true,
   get: () => daikinPanelSwitcher.DaikinPanelSwitcher
 });
+Object.defineProperty(exports, "DaikinProgressBar", {
+  enumerable: true,
+  get: () => daikinProgressBar.DaikinProgressBar
+});
 Object.defineProperty(exports, "DaikinRadio", {
   enumerable: true,
   get: () => daikinRadio.DaikinRadio
@@ -73,3 +89,7 @@ Object.defineProperty(exports, "DaikinToggle", {
   enumerable: true,
   get: () => daikinToggle.DaikinToggle
 });
+Object.defineProperty(exports, "DaikinTooltip", {
+  enumerable: true,
+  get: () => daikinTooltip.DaikinTooltip
+});

package/dist/cjs/is-client.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const isClient = !lit.isServer && typeof window !== "undefined";
+exports.isClient = isClient;

package/dist/cjs/is-client.d.ts

@@ -0,0 +1 @@
+export declare const isClient: boolean;