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

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

@@ -0,0 +1,132 @@
+"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 cvaToggle = classVarianceAuthority.cva(
+  [
+    "appearance-none",
+    "cursor-pointer",
+    "relative",
+    "bg-daikinNeutral-200",
+    "rounded-3xl",
+    "transition-color",
+    "duration-300",
+    "disabled:bg-daikinNeutral-200",
+    "before:content-['']",
+    "before:absolute",
+    "before:rounded-full",
+    "before:transition",
+    "before:disabled:bg-daikinNeutral-400"
+  ],
+  {
+    variants: {
+      size: {
+        default: [
+          "w-[51px]",
+          "h-[31px]",
+          "checked:bg-daikinBlue-500",
+          "before:h-[27px]",
+          "before:w-[27px]",
+          "before:bg-white",
+          "before:top-[2px]",
+          "before:left-[2px]",
+          "before:checked:translate-x-5"
+        ],
+        small: [
+          "w-8",
+          "h-[14px]",
+          "checked:bg-daikinBlue-50",
+          "before:h-5",
+          "before:w-5",
+          "before:top-[-3px]",
+          "before:bg-daikinNeutral-600",
+          "before:checked:bg-daikinBlue-500",
+          "before:checked:translate-x-3"
+        ]
+      }
+    }
+  }
+);
+exports.DaikinToggle = class DaikinToggle extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this._internals = this.attachInternals();
+    this.size = "default";
+    this.disabled = false;
+    this.checked = false;
+    this.name = "";
+    this.value = "";
+    this.error = false;
+  }
+  _updateFormValue() {
+    this._internals.setFormValue(this.checked ? this.value : null);
+  }
+  _handleChange(event) {
+    if (!this._input) {
+      return;
+    }
+    this._updateFormValue();
+    this.dispatchEvent(new Event("change", event));
+  }
+  render() {
+    const toggleClassName = cvaToggle({ size: this.size });
+    return lit.html`<input
+      class=${toggleClassName}
+      type="checkbox"
+      name=${this.name}
+      value=${this.value}
+      .checked=${this.checked}
+      ?disabled=${this.disabled}
+      @change=${this._handleChange}
+    />`;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("checked")) {
+      this._updateFormValue();
+    }
+  }
+};
+exports.DaikinToggle.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-flex;
+    }
+  `;
+exports.DaikinToggle.formAssociated = true;
+__decorateClass([
+  decorators_js.query("input")
+], exports.DaikinToggle.prototype, "_input", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinToggle.prototype, "size", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinToggle.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinToggle.prototype, "checked", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinToggle.prototype, "name", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinToggle.prototype, "value", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinToggle.prototype, "error", 2);
+exports.DaikinToggle = __decorateClass([
+  decorators_js.customElement("daikin-toggle")
+], exports.DaikinToggle);

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

@@ -0,0 +1,60 @@
+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;
+type ToggleVariantProps = MergeVariantProps<typeof cvaToggle>;
+/**
+ * The toggle switch component is a UI element that allows users to switch between two states, typically "on" and "off".
+ * It functions similarly to a `daikin-checkbox` component but provides a more visually intuitive way to represent binary options.
+ * This component is ideal for scenarios where the binary choice has a significant or immediate effect, such as enabling or disabling a feature or setting.
+ * Unlike `daikin-checkbox`, this component doesn't have a label and a "indeterminate" state.
+ *
+ * @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="checkbox">` element.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-toggle name="name" value="value"></daikin-toggle>
+ * ```
+ */
+export declare class DaikinToggle extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    static readonly formAssociated = true;
+    private _internals;
+    private _updateFormValue;
+    private _input;
+    private _handleChange;
+    /**
+     * Specify the component size
+     */
+    size: ToggleVariantProps["size"];
+    /**
+     * Specify whether the Toggle should be disabled
+     */
+    disabled: boolean;
+    /**
+     * Specify whether the control is checked
+     */
+    checked: boolean;
+    /**
+     * The form name.
+     */
+    name: string;
+    /**
+     * The value.
+     */
+    value: string;
+    /**
+     * Specify whether the Toggle is in a error state
+     */
+    error: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+    updated(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-toggle": DaikinToggle;
+    }
+}
+export {};

package/dist/cjs/components/toggle/index.cjs

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

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

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

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

@@ -1,14 +1,41 @@
 "use strict";
 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,
+  get: () => daikinAccordion.DaikinAccordion
+});
+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
@@ -17,6 +44,11 @@ Object.defineProperty(exports, "DaikinCheckbox", {
   enumerable: true,
   get: () => daikinCheckbox.DaikinCheckbox
 });
+Object.defineProperty(exports, "DaikinIcon", {
+  enumerable: true,
+  get: () => daikinIcon.DaikinIcon
+});
+exports.iconList = daikinIcon.iconList;
 Object.defineProperty(exports, "DaikinInputGroup", {
   enumerable: true,
   get: () => daikinInputGroup.DaikinInputGroup
@@ -25,10 +57,26 @@ Object.defineProperty(exports, "DaikinNotification", {
   enumerable: true,
   get: () => daikinNotification.DaikinNotification
 });
+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
 });
+Object.defineProperty(exports, "DaikinTab", {
+  enumerable: true,
+  get: () => daikinTab.DaikinTab
+});
+Object.defineProperty(exports, "DaikinTabGroup", {
+  enumerable: true,
+  get: () => daikinTabGroup.DaikinTabGroup
+});
 Object.defineProperty(exports, "DaikinTextInput", {
   enumerable: true,
   get: () => daikinTextInput.DaikinTextInput
@@ -37,3 +85,11 @@ Object.defineProperty(exports, "DaikinTextarea", {
   enumerable: true,
   get: () => daikinTextarea.DaikinTextarea
 });
+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;