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

package/dist/cjs-dev/components/accordion-item/daikin-accordion-item.d.ts

@@ -0,0 +1,56 @@
+import { LitElement, PropertyValues } from 'lit';
+
+/**
+ * The accordion item component is a child element within the `daikin-accordion` component.
+ * It functions similarly to the HTML `<details>` and `<summary>` tag, allowing users to expand or collapse the associated content by clicking on the header.
+ * This component is responsible for displaying the specific content within the accordion and allowing users to interact with each section independently.
+ *
+ * Hierarchy:
+ * - `daikin-accordion` > `daikin-accordion-item`
+ *
+ * @slot - A slot for the accordion item content.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-accordion-item title="The first accordion item">
+ *   Accordion 1 content.
+ * </daikin-accordion-item>
+ * ```
+ */
+export declare class DaikinAccordionItem extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    private _contentRef;
+    /**
+     * Heading of accordion
+     */
+    title: string;
+    /**
+     * Whether the accordion is open
+     */
+    open: boolean;
+    /**
+     * Whether the accordion is disabled
+     */
+    disabled: boolean;
+    /**
+     * Open attribute of the actual details element
+     *
+     * The default `open` attribute of the default details element does not allow the display of content to have transitions.
+     * To solve this, the `open` property that `daikin-accordion-item` receives manages the opening and closing of items independently of the open attribute.
+     *
+     * The `open` attribute, which should be present, is taken over by `_detailsOpen`.
+     */
+    private _detailsOpen;
+    private _contentAnimate;
+    private _handleSummaryClick;
+    render(): import('lit-html').TemplateResult<1>;
+    protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-accordion-item": DaikinAccordionItem;
+    }
+}
+export default DaikinAccordionItem;

package/dist/cjs-dev/components/accordion-item/index.cjs

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

package/dist/cjs-dev/components/accordion-item/index.d.ts

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

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

@@ -0,0 +1,215 @@
+"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");
+require("../icon/daikin-icon.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 BUTTON_ICON_SIZE_MAP = {
+  default: "m",
+  condensed: "s"
+};
+const cvaButton = classVarianceAuthority.cva(
+  [
+    "inline-flex",
+    "justify-center",
+    "items-center",
+    "gap-2",
+    "font-daikinSerif",
+    "font-bold",
+    "rounded-lg",
+    "tracking-wide",
+    "text-nowrap",
+    "disabled:cursor-default",
+    "w-full",
+    "h-full"
+  ],
+  {
+    variants: {
+      intent: {
+        primary: [
+          "text-white",
+          "bg-[--buttonColorBackgroundPrimaryActive]",
+          "enabled:focus-visible:bg-[--buttonColorBackgroundPrimaryFocus]",
+          "enabled:hover:bg-[--buttonColorBackgroundPrimaryHover]",
+          "enabled:active:bg-[--buttonColorBackgroundPrimaryPress]",
+          "disabled:bg-[--buttonColorBackgroundPrimaryDisabled]",
+          "focus-visible:outline-none"
+        ],
+        secondary: [
+          "border-2",
+          "bg-white",
+          "text-daikinBlue-500",
+          "border-daikinBlue-500",
+          "enabled:hover:text-daikinBlue-300",
+          "enabled:hover:border-daikinBlue-300",
+          "enabled:active:text-daikinBlue-600",
+          "enabled:active:border-daikinBlue-600",
+          "enabled:focus-visible:text-daikinBlue-700",
+          "enabled:focus-visible:border-daikinBlue-700",
+          "disabled:border-daikinNeutral-300",
+          "disabled:text-daikinNeutral-400",
+          "disabled:border",
+          "focus-visible:outline-none"
+        ],
+        tertiary: [
+          "text-daikinBlue-400",
+          "bg-none",
+          "border-none",
+          "shadow-none",
+          "enabled:hover:bg-daikinNeutral-100",
+          "disabled:bg-transparent",
+          "disabled:text-daikinNeutral-400"
+        ],
+        primaryDanger: [
+          "bg-daikinRed",
+          "text-white",
+          "enabled:hover:bg-daikinRed-400",
+          "enabled:focus-visible:bg-daikinRed-700",
+          "enabled:active:bg-daikinRed-700",
+          "disabled:bg-daikinNeutral-300",
+          "focus-visible:outline-none"
+        ]
+      },
+      size: {
+        default: ["px-4", "text-[14px]"],
+        condensed: ["px-[10px]", "text-[12px]"]
+      }
+    },
+    defaultVariants: {
+      intent: "primary",
+      size: "condensed"
+    }
+  }
+);
+exports.DaikinButton = class DaikinButton extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "primary";
+    this.disabled = false;
+    this.rightIcon = null;
+    this.leftIcon = null;
+    this.href = "";
+    this.size = "default";
+    this.type = "button";
+    this.role = "button";
+    this.isLoading = false;
+  }
+  render() {
+    const buttonClassName = cvaButton({
+      intent: this.variant,
+      size: this.size
+    });
+    const content = lit.html`
+      ${this.leftIcon ? lit.html`<daikin-icon
+            icon=${this.leftIcon}
+            size=${BUTTON_ICON_SIZE_MAP[this.size]}
+            color="current"
+          ></daikin-icon>` : null}
+      <slot></slot>
+      ${this.rightIcon ? lit.html`<daikin-icon
+            icon=${this.rightIcon}
+            size=${BUTTON_ICON_SIZE_MAP[this.size]}
+            color="current"
+          ></daikin-icon>` : null}
+    `;
+    if (this.href) {
+      return lit.html`<a
+        href="${this.href}"
+        class="${buttonClassName}"
+        role="${this.role}"
+      >
+        ${content}
+      </a>`;
+    }
+    return lit.html`
+      <button
+        class="${buttonClassName}"
+        ?disabled="${this.disabled}"
+        type="${this.type}"
+        role="${this.role}"
+      >
+        ${content}
+      </button>
+    `;
+  }
+  /**
+   * 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);
+  }
+};
+exports.DaikinButton.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      --buttonColorBackgroundPrimaryActive: ${lit.unsafeCSS(
+  variables_js.buttonColorBackgroundPrimaryActive
+)};
+      --buttonColorBackgroundPrimaryFocus: ${lit.unsafeCSS(
+  variables_js.buttonColorBackgroundPrimaryFocus
+)};
+      --buttonColorBackgroundPrimaryHover: ${lit.unsafeCSS(
+  variables_js.buttonColorBackgroundPrimaryHover
+)};
+      --buttonColorBackgroundPrimaryPress: ${lit.unsafeCSS(
+  variables_js.buttonColorBackgroundPrimaryPress
+)};
+      --buttonColorBackgroundPrimaryDisabled: ${lit.unsafeCSS(
+  variables_js.buttonColorBackgroundPrimaryDisabled
+)};
+
+      display: inline-block;
+      width: fit-content;
+      min-height: 42px;
+      height: 1px;
+    }
+
+    :host([size="condensed"]) {
+      min-height: 32px;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinButton.prototype, "variant", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinButton.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinButton.prototype, "rightIcon", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinButton.prototype, "leftIcon", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinButton.prototype, "href", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinButton.prototype, "size", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinButton.prototype, "type", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinButton.prototype, "role", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean })
+], exports.DaikinButton.prototype, "isLoading", 2);
+exports.DaikinButton = __decorateClass([
+  decorators_js.customElement("daikin-button")
+], exports.DaikinButton);

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

@@ -0,0 +1,77 @@
+import { LitElement } from 'lit';
+import { ARIARole } from '../../lit-analyzer-types';
+import { MergeVariantProps } from '../../type-utils';
+import { IconType } from '../icon/daikin-icon';
+
+declare const cvaButton: (props?: ({
+    intent?: "primary" | "secondary" | "tertiary" | "primaryDanger" | null | undefined;
+    size?: "default" | "condensed" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type ButtonVariantProps = MergeVariantProps<typeof cvaButton>;
+/**
+ * The button component is a versatile UI element that triggers actions or submits forms when clicked.
+ * It functions similarly to the HTML `<button>` tag, allowing users to initiate various operations such as submitting data, opening dialogs, or navigating to different sections of an application.
+ *
+ * @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 button content.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-button>
+ *   Button label
+ * </daikin-button>
+ * ```
+ */
+export declare class DaikinButton extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Type of variant.
+     */
+    variant: ButtonVariantProps["intent"];
+    /**
+     * `true` if the button should be disabled.
+     */
+    disabled: boolean;
+    /**
+     * Set a icon in the right of button label.
+     */
+    rightIcon: IconType | null;
+    /**
+     * Set a icon in the left of button label.
+     */
+    leftIcon: IconType | null;
+    /**
+     * Link `href`. If present, this button is rendered as `<a>`.
+     */
+    href: string;
+    /**
+     * Specify the button size.
+     */
+    size: ButtonVariantProps["size"];
+    /**
+     * Specify the button type.
+     */
+    type: "button" | "submit" | "reset";
+    /**
+     * Specify the button role.
+     */
+    role: ARIARole;
+    /**
+     * Specify whether the button is loading.
+     */
+    isLoading: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the inner button.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions | undefined): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-button": DaikinButton;
+    }
+}
+export {};

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

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

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

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

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

@@ -0,0 +1,183 @@
+"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 cvaCheckbox = classVarianceAuthority.cva(
+  [
+    "appearance-none",
+    "inline-block",
+    "relative",
+    "rounded-sm",
+    "border-solid",
+    "border-2",
+    "after:absolute",
+    "after:text-white",
+    "checked:after:i-daikin-checkbox-checked",
+    "indeterminate:after:i-daikin-checkbox-indeterminate",
+    "focus-visible:outline-none",
+    "border-daikinNeutral-400",
+    "enabled:indeterminate:border-daikinBlue-600",
+    "enabled:indeterminate:bg-daikinBlue-600",
+    "enabled:checked:border-daikinBlue-600",
+    "enabled:checked:bg-daikinBlue-600",
+    "aria-controllable:focus-visible:border-daikinBlue-700",
+    "aria-controllable:hover:border-daikinBlue-300",
+    "aria-controllable:active:border-daikinBlue-600",
+    "aria-controllable:checked:focus-visible:border-daikinBlue-700",
+    "aria-controllable:checked:focus-visible:border-daikinBlue-700",
+    "aria-controllable:checked:focus-visible:bg-daikinBlue-700",
+    "aria-controllable:checked:focus-visible:bg-daikinBlue-700",
+    "aria-controllable:checked:hover:border-daikinBlue-300",
+    "aria-controllable:checked:hover:bg-daikinBlue-300",
+    "aria-controllable:checked:active:border-daikinBlue-600",
+    "aria-controllable:checked:active:bg-daikinBlue-600",
+    "aria-controllable:indeterminate:active:border-daikinBlue-600",
+    "aria-controllable:indeterminate:active:bg-daikinBlue-600",
+    "aria-controllable:indeterminate:hover:border-daikinBlue-300",
+    "aria-controllable:indeterminate:hover:bg-daikinBlue-300",
+    "aria-controllable:indeterminate:focus-visible:border-daikinBlue-700",
+    "aria-controllable:indeterminate:focus-visible:bg-daikinBlue-700",
+    "disabled:border-daikinNeutral-200",
+    "disabled:bg-white",
+    "disabled:indeterminate:bg-daikinNeutral-200",
+    "disabled:checked:bg-daikinNeutral-200"
+  ],
+  {
+    variants: {
+      size: {
+        small: ["w-[18px]", "h-[18px]"],
+        large: ["w-5", "h-5"]
+      }
+    }
+  }
+);
+const cvaLabel = classVarianceAuthority.cva(
+  ["leading-8", "not-italic", "font-normal", "align-middle"],
+  {
+    variants: {
+      size: {
+        small: ["text-sm"],
+        large: ["text-base"]
+      }
+    },
+    defaultVariants: {
+      size: "small"
+    }
+  }
+);
+exports.DaikinCheckbox = class DaikinCheckbox 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.checkState = "unchecked";
+    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);
+  }
+  get checked() {
+    return this.checkState === "checked";
+  }
+  _handleChange(event) {
+    if (!this._input) {
+      return;
+    }
+    this.checkState = this._input.checked ? "checked" : "unchecked";
+    this._updateFormValue();
+    this.dispatchEvent(new Event("change", event));
+  }
+  render() {
+    const checkboxClassName = cvaCheckbox({ size: this.size });
+    const labelClassName = cvaLabel({ size: this.size });
+    const isIndeterminate = this.checkState === "indeterminate";
+    const labelText = this.label ? lit.html`<span class=${labelClassName}>${this.label}</span>` : lit.html``;
+    const inputTag = lit.html`<input
+      class=${checkboxClassName}
+      type="checkbox"
+      name=${this.name}
+      value=${this.value}
+      aria-readonly=${this.readonly}
+      .indeterminate=${isIndeterminate}
+      .checked=${this.checked}
+      ?readonly=${this.readonly}
+      ?disabled=${this.disabled}
+      @change=${this._handleChange}
+      @click=${this._handleClick}
+    />`;
+    const content = this.labelPosition === "left" ? lit.html`${labelText}${inputTag}` : lit.html`${inputTag}${labelText}`;
+    return lit.html`<label
+      class="inline-flex gap-[10px] items-center font-daikinSerif"
+      >${content}</label
+    >`;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("checkState")) {
+      this._updateFormValue();
+    }
+  }
+};
+exports.DaikinCheckbox.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-block;
+    }
+  `;
+exports.DaikinCheckbox.formAssociated = true;
+__decorateClass([
+  decorators_js.query("input")
+], exports.DaikinCheckbox.prototype, "_input", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinCheckbox.prototype, "label", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinCheckbox.prototype, "size", 2);
+__decorateClass([
+  decorators_js.property({ type: String, attribute: "label-position" })
+], exports.DaikinCheckbox.prototype, "labelPosition", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinCheckbox.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinCheckbox.prototype, "readonly", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "check-state" })
+], exports.DaikinCheckbox.prototype, "checkState", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinCheckbox.prototype, "name", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinCheckbox.prototype, "value", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinCheckbox.prototype, "error", 2);
+exports.DaikinCheckbox = __decorateClass([
+  decorators_js.customElement("daikin-checkbox")
+], exports.DaikinCheckbox);

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

@@ -0,0 +1,78 @@
+import { LitElement, PropertyValues } from 'lit';
+import { MergeVariantProps } from '../../type-utils';
+
+declare const cvaCheckbox: (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 CheckboxVariantProps = MergeVariantProps<typeof cvaCheckbox | typeof cvaLabel>;
+/**
+ * The checkbox component is a UI element that allows users to select one or more options from a list of choices.
+ * It functions similarly to the HTML `<input type="checkbox">` tag, enabling users to toggle the selection of each option independently.
+ * This component is ideal for cases where multiple selections are allowed or required.
+ *
+ * @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-checkbox label="Checkbox label" name="name" value="value"></daikin-checkbox>
+ * ```
+ */
+export declare class DaikinCheckbox extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    private _handleClick;
+    static readonly formAssociated = true;
+    private _internals;
+    private _updateFormValue;
+    private _input;
+    get checked(): boolean;
+    private _handleChange;
+    /**
+     * Specify the label text for check box
+     */
+    label: string;
+    /**
+     * Specify the component size
+     */
+    size: CheckboxVariantProps["size"];
+    /**
+     * Specify the label position
+     * when `left` the label will be in left of checkbox, when `right` label will be in right of checkbox
+     */
+    labelPosition: "left" | "right";
+    /**
+     * Specify whether the Checkbox should be disabled
+     */
+    disabled: boolean;
+    /**
+     * Specify whether the checkbox is read only
+     */
+    readonly: boolean;
+    /**
+     * Specify whether the checkbox is be checked
+     */
+    checkState: "unchecked" | "indeterminate" | "checked";
+    /**
+     * The form name.
+     */
+    name: string;
+    /**
+     * The value.
+     */
+    value: string;
+    /**
+     * Specify whether the Checkbox is in a error state
+     */
+    error: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+    updated(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-checkbox": DaikinCheckbox;
+    }
+}
+export {};

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

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

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

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