@daikin-oss/design-system-web-components 1.0.0 → 1.2.0

package/dist/es/components/menu/daikin-menu.js

@@ -0,0 +1,206 @@
+import { offset, flip, shift } from "@floating-ui/dom";
+import { cva } from "class-variance-authority";
+import { unsafeCSS, css, html } from "lit";
+import { queryAssignedElements, property } from "lit/decorators.js";
+import { guard } from "lit/directives/guard.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
+import { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";
+import { isClient } from "../../is-client.js";
+import tailwindStyles from "../../tailwind.css.js";
+import { reDispatch } from "../../utils/re-dispatch.js";
+import { DaikinAvatar } from "../avatar/daikin-avatar.js";
+import { DaikinButton } from "../button/daikin-button.js";
+import { DaikinIconButton } from "../icon-button/daikin-icon-button.js";
+import DaikinListItem from "../list-item/daikin-list-item.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 cvaMenu = cva([
+  "left-[--floating-x,0]",
+  "top-[--floating-y,0]",
+  "w-max",
+  "py-2",
+  "border",
+  "rounded-lg",
+  "font-daikinSerif",
+  "absolute",
+  "floating-unready:hidden",
+  "bg-ddt-color-common-background-default",
+  "border-ddt-color-divider"
+]);
+const DEFAULT_MENU_SPACING = "0px";
+let DaikinMenu = class extends DDSElement {
+  constructor() {
+    super(...arguments);
+    this.placement = "bottom";
+    this.open = false;
+    this.popoverValue = "auto";
+    this.trigger = "click";
+    this._autoUpdateController = new FloatingUIAutoUpdateController(this);
+    this._hostStyles = isClient ? window.getComputedStyle(this) : null;
+  }
+  static registerCSSCustomProperties() {
+    if (!isClient) {
+      return;
+    }
+    window.CSS.registerProperty({
+      name: "--ddc-menu-spacing",
+      syntax: "<length>",
+      inherits: true,
+      initialValue: "0px"
+    });
+  }
+  /**
+   * Reflects static attributes (e.g. ARIA roles) to slot components.
+   * These are typically set once when the slot changes and do not change frequently.
+   */
+  _reflectStaticProperties() {
+    for (const control of this._controls) {
+      if (control instanceof DaikinButton || control instanceof DaikinIconButton && control.type === "button") {
+        control.buttonAriaHaspopup = "menu";
+      } else if (control instanceof DaikinAvatar && control.type === "button") {
+        control.avatarAriaHaspopup = "menu";
+      }
+    }
+    for (const daikinList of this._lists) {
+      daikinList.listRole = "menu";
+    }
+  }
+  /**
+   * Reflects dynamic attributes (e.g. `open`, `disabled`) to slot components.
+   * These may changed when properties are updated.
+   */
+  _reflectDynamicProperties() {
+    for (const control of this._controls) {
+      if (control instanceof DaikinButton || control instanceof DaikinIconButton && control.type === "button") {
+        control.buttonAriaExpanded = this.open;
+      } else if (control instanceof DaikinAvatar && control.type === "button") {
+        control.avatarAriaExpanded = this.open;
+      }
+    }
+  }
+  _handleSlotChange() {
+    this._reflectStaticProperties();
+  }
+  _handleTriggerClick(event) {
+    if (this.trigger === "click") {
+      event.preventDefault();
+      this.open = !this.open;
+      if (this.open) {
+        setTimeout(() => {
+          this._lists[0].focusFirstItem();
+        });
+      }
+    }
+  }
+  _handleClick(event) {
+    event.preventDefault();
+    if (event.target instanceof DaikinListItem && !event.target.disabled) {
+      this.open = false;
+    }
+  }
+  _handleBeforeToggle(event) {
+    reDispatch(this, event, new ToggleEvent("beforetoggle", event));
+  }
+  _handleToggle(event) {
+    if (reDispatch(this, event, new ToggleEvent("toggle", event))) {
+      this.open = event.newState === "open";
+    }
+  }
+  render() {
+    var _a;
+    const spacing = parseInt(
+      ((_a = this._hostStyles) == null ? void 0 : _a.getPropertyValue("--ddc-menu-spacing")) || DEFAULT_MENU_SPACING,
+      10
+    );
+    return html`<div
+      class="relative inline-block text-ddt-color-common-text-primary font-daikinSerif"
+    >
+      <div
+        id="trigger"
+        aria-labelledby="trigger"
+        aria-describedby="menu"
+        ${this._autoUpdateController.refReference()}
+      >
+        <slot @click=${this._handleTriggerClick}></slot>
+      </div>
+      <span
+        id="menu"
+        aria-labelledby="menu"
+        part="menu"
+        class=${cvaMenu()}
+        popover=${this.popoverValue}
+        @click=${this._handleClick}
+        @beforetoggle=${this._handleBeforeToggle}
+        @toggle=${this._handleToggle}
+        ${this._autoUpdateController.refFloating()}
+      >
+        <slot name="menu" @slotchange=${this._handleSlotChange}></slot>
+      </span>
+      ${// Activate auto update only when the menu is open.
+    // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
+    guard(
+      [this.open, this.placement, spacing],
+      () => this._autoUpdateController.directive(
+        {
+          placement: this.placement,
+          middleware: [offset({ mainAxis: spacing }), flip(), shift()]
+        },
+        this.open
+      )
+    )}
+    </div>`;
+  }
+  updated(changedProperties) {
+    var _a;
+    if (changedProperties.has("open")) {
+      this._reflectDynamicProperties();
+      (_a = this._autoUpdateController.floatingElement) == null ? void 0 : _a.togglePopover(this.open);
+    }
+  }
+};
+DaikinMenu.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: inline-block;
+
+      --ddc-menu-spacing: ${unsafeCSS(DEFAULT_MENU_SPACING)};
+    }
+  `;
+__decorateClass([
+  queryAssignedElements({ slot: "menu", selector: "daikin-list" })
+], DaikinMenu.prototype, "_lists", 2);
+__decorateClass([
+  queryAssignedElements({
+    selector: "daikin-button,daikin-icon-button,daikin-avatar"
+  })
+], DaikinMenu.prototype, "_controls", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinMenu.prototype, "placement", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinMenu.prototype, "open", 2);
+__decorateClass([
+  property({ type: String, attribute: "popover-value" })
+], DaikinMenu.prototype, "popoverValue", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinMenu.prototype, "trigger", 2);
+DaikinMenu = __decorateClass([
+  ddsElement("daikin-menu")
+], DaikinMenu);
+DaikinMenu.registerCSSCustomProperties();
+export {
+  DaikinMenu
+};

package/dist/es/components/menu/index.d.ts

@@ -0,0 +1 @@
+export * from "./daikin-menu.js";

package/dist/es/components/menu/index.js

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

package/dist/es/components/modal/daikin-modal.d.ts

@@ -0,0 +1,61 @@
+import { DDSElement } from "../../base/index.js";
+/**
+ * `daikin-modal` is an interactive overlay that appears on top of the main content to prompt user input or display important information, temporarily blocking interaction with the rest of the page. It's crucial for capturing user attention and guiding specific actions.
+ *
+ * Hierarchy:
+ * - `daikin-modal` > `daikin-modal-header`
+ * - `daikin-modal` > `daikin-modal-footer`
+ *
+ * @slot - A slot for modal header, body, modal footer. Place `daikin-modal-header`, custom body content, `daikin-modal-footer` here in order.
+ *
+ * @fires close - A custom event emitted when a user clicks the close button in the header.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/modal/index.js";
+ * import "@daikin-oss/design-system-web-components/components/modal-footer/index.js";
+ * import "@daikin-oss/design-system-web-components/components/modal-header/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-modal>
+ *   <daikin-modal-header>
+ *     <span slot="description">Description</span>
+ *     <span>Modal Title</span>
+ *   </daikin-modal-header>
+ *   <p>Modal body.</p>
+ *   <daikin-modal-footer>
+ *     <daikin-button size="small">Button</daikin-button>
+ *   </daikin-modal-footer>
+ * </daikin-modal>
+ * ```
+ */
+export declare class DaikinModal extends DDSElement {
+    static styles: import('lit').CSSResult;
+    /**
+     * Whether the modal is open.
+     */
+    open: boolean;
+    /**
+     * ARIA role of the modal. Choose the appropriate role for your modal based on its usage scenario.
+     */
+    modalRole: "dialog" | "alertdialog";
+    /**
+     * The aria-label of the modal.
+     */
+    modalAriaLabel: string | null;
+    /**
+     * If this property set by `true`, you can't close modal by clicking outside of modal or Escape key.
+     * In this case, please ensure you provide users with a method to close the modal, such as a close button in the header or a close button in the footer.
+     */
+    persistent: boolean;
+    private readonly _handleClose;
+    private readonly _focusTrapController;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-modal": DaikinModal;
+    }
+}

package/dist/es/components/modal/daikin-modal.js

@@ -0,0 +1,116 @@
+import { cva } from "class-variance-authority";
+import { unsafeCSS, css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { guard } from "lit/directives/guard.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
+import { FocusTrapController } from "../../controllers/focus-trap.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 PANEL = cva([
+  "flex",
+  "flex-col",
+  "gap-4",
+  "top-[50%]",
+  "left-[50%]",
+  "w-full",
+  "sm:max-w-[50%]",
+  "z-[10000]",
+  "p-4",
+  "rounded-lg",
+  "bg-ddt-color-common-background-default"
+])();
+const cvaBackDrop = cva(
+  [
+    "fixed",
+    "flex",
+    "px-4",
+    "inset-0",
+    "z-[9999]",
+    "items-center",
+    "justify-center",
+    "bg-black/50"
+  ],
+  {
+    variants: {
+      open: {
+        false: ["hidden", "pointer-events-none"],
+        true: []
+      }
+    }
+  }
+);
+let DaikinModal = class extends DDSElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.modalRole = "dialog";
+    this.modalAriaLabel = null;
+    this.persistent = false;
+    this._handleClose = () => {
+      this.open = false;
+      this.dispatchEvent(
+        new CustomEvent("close", { composed: true, bubbles: true })
+      );
+    };
+    this._focusTrapController = new FocusTrapController(
+      this,
+      this._handleClose
+    );
+  }
+  render() {
+    return html`<div class=${cvaBackDrop({ open: this.open })}>
+        <div
+          class=${PANEL}
+          role=${this.modalRole}
+          aria-modal=${ifDefined(this.open ? "true" : void 0)}
+          aria-label=${ifDefined(this.modalAriaLabel ?? void 0)}
+          ${this._focusTrapController.refContainer()}
+        >
+          <slot
+            class="text-ddt-color-common-text-primary"
+            @close=${this._handleClose}
+          ></slot>
+        </div>
+      </div>
+      ${guard(
+      [this.open, this.persistent],
+      () => (
+        // open or persistent change will trigger the re-rendering and directive.
+        this._focusTrapController.directive(this.open, this.persistent)
+      )
+    )}`;
+  }
+};
+DaikinModal.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+  `;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinModal.prototype, "open", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "modal-role" })
+], DaikinModal.prototype, "modalRole", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "modal-aria-label" })
+], DaikinModal.prototype, "modalAriaLabel", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DaikinModal.prototype, "persistent", 2);
+DaikinModal = __decorateClass([
+  ddsElement("daikin-modal")
+], DaikinModal);
+export {
+  DaikinModal
+};

package/dist/es/components/modal/index.d.ts

@@ -0,0 +1 @@
+export * from "./daikin-modal.js";

package/dist/es/components/modal/index.js

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

package/dist/es/components/modal-footer/daikin-modal-footer.d.ts

@@ -0,0 +1,33 @@
+import { DDSElement } from "../../base/index.js";
+/**
+ * `daikin-modal-footer` is used to represent footer of the modal component, and is used as a child element of the `daikin-modal` component.
+ *
+ * Hierarchy:
+ * - `daikin-modal` > `daikin-modal-footer`
+ *
+ * @slot A slot for modal footer action element. Place a `daikin-button` or `daikin-link` element here.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/modal-footer/index.js";
+ * ```
+ *
+ * ```html
+ * <!-- See `daikin-modal` component for complete example. -->
+ * <daikin-modal-footer>
+ *  <daikin-button size="small" color="default">
+ *    Button
+ *  </daikin-button>
+ * </daikin-modal-footer>
+ * ```
+ */
+export declare class DaikinModalFooter extends DDSElement {
+    static styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-modal-footer": DaikinModalFooter;
+    }
+}

package/dist/es/components/modal-footer/daikin-modal-footer.js

@@ -0,0 +1,41 @@
+import { unsafeCSS, css, html } from "lit";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
+import tailwindStyles from "../../tailwind.css.js";
+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 = decorator(result) || result;
+  return result;
+};
+let DaikinModalFooter = class extends DDSElement {
+  render() {
+    return html`<div class="flex flex-wrap justify-end w-full gap-4">
+      <slot></slot>
+    </div>`;
+  }
+};
+DaikinModalFooter.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    @media (max-width: 40rem) {
+      :host {
+        justify-content: center;
+      }
+    }
+  `;
+DaikinModalFooter = __decorateClass([
+  ddsElement("daikin-modal-footer")
+], DaikinModalFooter);
+export {
+  DaikinModalFooter
+};

package/dist/es/components/modal-footer/index.d.ts

@@ -0,0 +1 @@
+export * from "./daikin-modal-footer.js";

package/dist/es/components/modal-footer/index.js

@@ -0,0 +1,4 @@
+import { DaikinModalFooter } from "./daikin-modal-footer.js";
+export {
+  DaikinModalFooter
+};

package/dist/es/components/modal-header/daikin-modal-header.d.ts

@@ -0,0 +1,43 @@
+import { DDSElement } from "../../base/index.js";
+/**
+ * `daikin-modal-header` is used to represent header of the modal component, and is used as a child element of the `daikin-modal` component.
+ *
+ * Hierarchy:
+ * - `daikin-modal` > `daikin-modal-header`
+ *
+ * @slot description - An optional slot for description.
+ * @slot - A slot for modal title.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/modal-header/index.js";
+ * ```
+ *
+ * ```html
+ * <!-- See `daikin-modal` component for complete example. -->
+ * <daikin-modal-header>
+ *   <span slot="description">Description</span>
+ *   <span>Modal Title</span>
+ * </daikin-modal-header>
+ * ```
+ */
+export declare class DaikinModalHeader extends DDSElement {
+    static styles: import('lit').CSSResult;
+    /**
+     * Whether the modal is open.
+     */
+    withCloseButton: boolean;
+    private _closeButton;
+    private _handleClick;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the header content area.
+     */
+    focusCloseButton(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-modal-header": DaikinModalHeader;
+    }
+}

package/dist/es/components/modal-header/daikin-modal-header.js

@@ -0,0 +1,97 @@
+import { cva } from "class-variance-authority";
+import { unsafeCSS, css, nothing, html } from "lit";
+import { property } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
+import tailwindStyles from "../../tailwind.css.js";
+import "../icon-button/daikin-icon-button.js";
+import "../icon/daikin-icon.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 cvaTitle = cva([
+  "flex-none",
+  "text-ddt-color-common-text-primary",
+  "font-daikinSerif",
+  "text-xl",
+  "leading-[1.3]",
+  "not-italic",
+  "font-bold"
+])();
+const cvaDescription = cva([
+  "flex-none",
+  "text-ddt-color-common-text-secondary",
+  "font-daikinSerif",
+  "text-base",
+  "leading-normal",
+  "not-italic",
+  "font-normal"
+])();
+let DaikinModalHeader = class extends DDSElement {
+  constructor() {
+    super(...arguments);
+    this.withCloseButton = false;
+    this._closeButton = createRef();
+  }
+  _handleClick() {
+    this.dispatchEvent(
+      new CustomEvent("close", {
+        composed: true,
+        bubbles: true
+      })
+    );
+  }
+  render() {
+    return html`<div class="flex w-full gap-2">
+      <div class="flex-1 flex flex-col pt-0.5 gap-2 break-all">
+        <slot class=${cvaTitle}></slot>
+        <slot name="description" class=${cvaDescription}></slot>
+      </div>
+      ${this.withCloseButton ? html`<div class="flex-none">
+            <daikin-icon-button
+              ${ref(this._closeButton)}
+              variant="ghost"
+              color="neutral"
+              button-aria-label="Close"
+              class="w-8 h-8"
+              @click=${this._handleClick}
+            >
+              <daikin-icon icon="close" color="current"></daikin-icon>
+            </daikin-icon-button>
+          </div>` : nothing}
+    </div>`;
+  }
+  /**
+   * Focuses on the header content area.
+   */
+  focusCloseButton() {
+    var _a;
+    (_a = this._closeButton.value) == null ? void 0 : _a.focus();
+  }
+};
+DaikinModalHeader.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: flex;
+      align-items: center;
+    }
+  `;
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "with-close-button" })
+], DaikinModalHeader.prototype, "withCloseButton", 2);
+DaikinModalHeader = __decorateClass([
+  ddsElement("daikin-modal-header")
+], DaikinModalHeader);
+export {
+  DaikinModalHeader
+};

package/dist/es/components/modal-header/index.d.ts

@@ -0,0 +1 @@
+export * from "./daikin-modal-header.js";

package/dist/es/components/modal-header/index.js

@@ -0,0 +1,4 @@
+import { DaikinModalHeader } from "./daikin-modal-header.js";
+export {
+  DaikinModalHeader
+};

package/dist/es/components/pagination/daikin-pagination.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { repeat } from "lit/directives/repeat.js";

package/dist/es/components/progress-bar/daikin-progress-bar.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
@@ -65,14 +65,14 @@ const cvaBarContainer = cva(
           "after:size-4",
           "after:flex-none",
           "after:bg-ddt-color-common-success",
-          "after:i-daikin-status-positive"
+          "after:i-daikin-success"
         ],
         indeterminate: [],
         error: [
           "after:size-4",
           "after:flex-none",
           "after:text-ddt-color-common-danger-default",
-          "after:i-daikin-status-error"
+          "after:i-daikin-error"
         ]
       }
     }

package/dist/es/components/progress-indicator/daikin-progress-indicator.js

@@ -1,4 +1,4 @@
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, queryAssignedElements } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";