@daikin-oss/design-system-web-components 0.5.0 → 0.6.0

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

@@ -6,7 +6,6 @@ const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const events = require("../../constants/events.cjs");
 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) => {
@@ -45,15 +44,35 @@ const cvaContainer = classVarianceAuthority.cva(
   }
 );
 const cvaIconContainer = classVarianceAuthority.cva(
-  ["flex-none", "flex", "justify-center", "items-center", "w-[44px]"],
+  [
+    "flex-none",
+    "flex",
+    "justify-center",
+    "items-center",
+    "w-[2.75rem]",
+    "after:size-6",
+    "after:text-white"
+  ],
   {
     variants: {
       status: {
-        positive: ["bg-[--colorFeedbackPositive]"],
-        negative: ["bg-[--colorFeedbackNegative]"],
-        warning: ["bg-[--colorFeedbackWarning]"],
-        alarm: ["bg-[--colorFeedbackAlarm]"],
-        information: ["bg-[--colorFeedbackInformation]"]
+        positive: [
+          "bg-[--colorFeedbackPositive]",
+          "after:i-daikin-status-positive"
+        ],
+        negative: [
+          "bg-[--colorFeedbackNegative]",
+          "after:i-daikin-status-negative"
+        ],
+        warning: [
+          "bg-[--colorFeedbackWarning]",
+          "after:i-daikin-status-warning"
+        ],
+        alarm: ["bg-[--colorFeedbackAlarm]", "after:i-daikin-status-alarm"],
+        information: [
+          "bg-[--colorFeedbackInformation]",
+          "after:i-daikin-status-information"
+        ]
       }
     },
     defaultVariants: {
@@ -85,7 +104,7 @@ exports.DaikinNotification = class DaikinNotification extends lit.LitElement {
     this.closeButton = false;
   }
   /**
-   * Call the event registered in "close"
+   * Call the event registered in "close".
    */
   _handleClickClose() {
     const event = new CustomEvent(events.EVENT_CLOSE);
@@ -108,13 +127,7 @@ exports.DaikinNotification = class DaikinNotification extends lit.LitElement {
             class=${cvaIconContainer({
       status: this.status
     })}
-          >
-            <daikin-icon
-              icon=${this.status}
-              color="white"
-              size="xl"
-            ></daikin-icon>
-          </div>
+          ></div>
           <div
             class="flex justify-between items-center gap-5 p-5 text-lg flex-auto flex-shrink-0"
           >
@@ -134,15 +147,9 @@ exports.DaikinNotification = class DaikinNotification extends lit.LitElement {
                   <div class="flex items-center gap-5">
                     <button
                       aria-label="Close"
-                      class="relative flex w-5 h-5"
+                      class="relative flex w-5 h-5 after:i-daikin-notification-close after:size-5 after:text-[#a0a0a0]"
                       @click=${this._handleClickClose}
-                    >
-                      <daikin-icon
-                        icon="close"
-                        size="l"
-                        color="default"
-                      ></daikin-icon>
-                    </button>
+                    ></button>
                   </div>
                 ` : lit.nothing}
           </div>
@@ -183,7 +190,7 @@ __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinNotification.prototype, "open", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean })
+  decorators_js.property({ type: Boolean, attribute: "close-button" })
 ], exports.DaikinNotification.prototype, "closeButton", 2);
 exports.DaikinNotification = __decorateClass([
   decorators_js.customElement("daikin-notification")

package/dist/cjs/components/notification/{daikin-notification.d.ts → daikin-notification.d.cts}

@@ -1,5 +1,5 @@
 import { LitElement, nothing } from 'lit';
-import { MergeVariantProps } from '../../type-utils';
+import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaContainer: (props?: ({
     variant?: "toast" | "inline" | null | undefined;
     status?: "alarm" | "information" | "negative" | "positive" | "warning" | null | undefined;
@@ -44,27 +44,27 @@ type NotificationVariantProps = MergeVariantProps<typeof cvaContainer | typeof c
 export declare class DaikinNotification extends LitElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Type of notification
+     * Type of notification.
      */
     variant: NotificationVariantProps["variant"];
     /**
-     * Status of notification
+     * Status of notification.
      */
     status: NotificationVariantProps["status"];
     /**
-     * Display in single or multiple lines
+     * Display in single or multiple lines.
      */
     line: NotificationVariantProps["line"];
     /**
-     * Whether the component is open
+     * Specify the notification's open state.
      */
     open: boolean;
     /**
-     * Whether to display the close button
+     * Whether to display the close button.
      */
     closeButton: boolean;
     /**
-     * Call the event registered in "close"
+     * Call the event registered in "close".
      */
     private _handleClickClose;
     render(): import('lit-html').TemplateResult<1> | typeof nothing;

package/dist/cjs/components/notification/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-notification.cjs";

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

@@ -0,0 +1,215 @@
+"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 ifDefined_js = require("lit/directives/if-defined.js");
+const repeat_js = require("lit/directives/repeat.js");
+const tailwind = require("../../tailwind.css.cjs");
+const paginationUtils = require("./pagination-utils.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 cvaPageButton = classVarianceAuthority.cva(
+  [
+    "border-0",
+    "no-underline",
+    "flex",
+    "relative",
+    "items-center",
+    "justify-center",
+    "min-w-12",
+    "min-h-12",
+    "font-daikinSerif",
+    "text-base",
+    "not-italic",
+    "leading-6",
+    "focus-visible:outline",
+    "focus-visible:outline-2",
+    "focus-visible:outline-offset-1",
+    "focus-visible:outline-[#0081C0]"
+  ],
+  {
+    variants: {
+      active: {
+        true: [
+          "text-daikinBlue-500",
+          "focus-visible:text-daikinBlue-500",
+          "font-bold",
+          "hover:text-[#0081C0]",
+          "hover:bg-[#DDF3FC]",
+          "active:text-[#00689A]",
+          "active:bg-[#BBE7F9]",
+          "after:bg-daikinBlue-500",
+          "after:content-['']",
+          "after:h-1",
+          "after:absolute",
+          "after:inset-0",
+          "after:top-auto"
+        ],
+        false: [
+          "text-inherit",
+          "font-normal",
+          "text-daikinNeutral-700",
+          "active:bg-daikinNeutral-100",
+          "active:text-daikinNeutral-800",
+          "hover:bg-[#F2F2F2]",
+          "hover:text-[#515151]"
+        ]
+      }
+    }
+  }
+);
+const cvaEllipsis = classVarianceAuthority.cva([
+  "relative",
+  "text-inherit",
+  "border-0",
+  "no-underline",
+  "flex",
+  "items-center",
+  "justify-center",
+  "w-12",
+  "h-12",
+  "font-daikinSerif",
+  "text-base",
+  "not-italic",
+  "font-normal",
+  "leading-6"
+]);
+const cvaChevronButton = classVarianceAuthority.cva([
+  "text-inherit",
+  "border-0",
+  "no-underline",
+  "flex",
+  "items-center",
+  "justify-center",
+  "w-12",
+  "h-12",
+  "text-[#515151]",
+  "font-daikinSerif",
+  "text-base",
+  "not-italic",
+  "font-normal",
+  "leading-6",
+  "enabled:hover:bg-[#F2F2F2]",
+  "enabled:hover:text-daikinNeutral-800",
+  "enabled:active:bg-daikinNeutral-100",
+  "enabled:active:text-daikinNeutral-900",
+  "disabled:!text-daikinNeutral-400",
+  "focus-visible:outline",
+  "focus-visible:outline-2",
+  "focus-visible:outline-offset-1",
+  "focus-visible:outline-[#0081C0]"
+]);
+exports.DaikinPagination = class DaikinPagination extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.current = 1;
+    this.total = 1;
+    this.window = 5;
+  }
+  _goto(page) {
+    this.current = this.current = Math.max(Math.min(page, this.total), 1);
+    this.dispatchEvent(
+      new Event("change", {
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      })
+    );
+  }
+  _gotoOffset(offset) {
+    this._goto(this.current + offset);
+  }
+  render() {
+    const cvaChevron = cvaChevronButton();
+    const pageArray = paginationUtils.calculatePagination(
+      this.total,
+      this.current,
+      this.window
+    );
+    return lit.html`
+      <div aria-label="Pagination" class="inline-flex gap-1">
+        <button
+          class=${cvaChevron}
+          type="button"
+          aria-label="Go to the previous page."
+          ?disabled=${this.current === 1}
+          @click=${() => this._gotoOffset(-1)}
+        >
+          <span class="i-daikin-pagination-chevron-left w-4 h-4"></span>
+        </button>
+        ${repeat_js.repeat(
+      pageArray,
+      (item, index) => item.type === "page" ? `p${item.page}` : `e${index}`,
+      (item) => {
+        if (item.type === "page") {
+          const buttonClassName = cvaPageButton({
+            active: this.current === item.page
+          });
+          return lit.html`
+                <button
+                  type="button"
+                  class=${buttonClassName}
+                  @click=${() => this._goto(item.page)}
+                  aria-label="Go to page ${item.page}"
+                  aria-current=${ifDefined_js.ifDefined(
+            item.page === this.current ? "page" : void 0
+          )}
+                >
+                  ${item.page}
+                </button>
+              `;
+        } else {
+          return lit.html`
+                <span class=${cvaEllipsis()}>
+                  <button
+                    type="button"
+                    disabled
+                    aria-label="Expand the omitted pages."
+                    class="after:content-['._._.']"
+                  ></button>
+                </span>
+              `;
+        }
+      }
+    )}
+        <button
+          type="button"
+          class=${cvaChevron}
+          aria-label="Go to the next page."
+          ?disabled=${this.current === this.total}
+          @click=${() => this._gotoOffset(1)}
+        >
+          <span class="i-daikin-pagination-chevron-right w-4 h-4"></span>
+        </button>
+      </div>
+    `;
+  }
+};
+exports.DaikinPagination.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-flex;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: Number, reflect: true })
+], exports.DaikinPagination.prototype, "current", 2);
+__decorateClass([
+  decorators_js.property({ type: Number, reflect: true })
+], exports.DaikinPagination.prototype, "total", 2);
+__decorateClass([
+  decorators_js.property({ type: Number, reflect: true })
+], exports.DaikinPagination.prototype, "window", 2);
+exports.DaikinPagination = __decorateClass([
+  decorators_js.customElement("daikin-pagination")
+], exports.DaikinPagination);

package/dist/cjs/components/pagination/daikin-pagination.d.cts

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+/**
+ * The pagination component is used to navigate through a list of items that are divided into multiple pages.
+ *
+ * @fires change - Emitted when the current page number is changed.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-pagination window="5" total="20" current="3"></daikin-pagination>
+ * ```
+ */
+export declare class DaikinPagination extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * The current page number, starting at 1.
+     * Must be greater than 0 and less than or equal to `this.total`.
+     */
+    current: number;
+    /**
+     * The number of pages.
+     * Must be greater than 0.
+     */
+    total: number;
+    /**
+     * Number of elements to display in pagination, including ellipses.
+     * Must be greater than or equal to 5.
+     * If a value less than 5 is specified, it will be treated as 5.
+     */
+    window: number;
+    private _goto;
+    private _gotoOffset;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-pagination": DaikinPagination;
+    }
+}

package/dist/cjs/components/pagination/index.cjs

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

package/dist/cjs/components/pagination/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-pagination.cjs";

package/dist/cjs/components/pagination/pagination-utils.cjs

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function sequence(begin, end) {
+  const length = Math.max(end - begin, 0);
+  return Array.from({ length }, (_, i) => begin + i);
+}
+function pageSequence(begin, end) {
+  return sequence(begin, end).map((page) => ({ type: "page", page }));
+}
+function calculatePagination(total, current, window) {
+  if (total < 1) {
+    total = 1;
+  }
+  if (window < 5) {
+    window = 5;
+  }
+  if (total <= window) {
+    return pageSequence(1, total + 1);
+  }
+  const centerLeft = current - Math.floor((window - 5) / 2);
+  const centerRight = centerLeft + window - 5;
+  if (centerLeft <= 3) {
+    return [
+      ...pageSequence(1, window - 1),
+      { type: "ellipsis", pages: sequence(window - 1, total) },
+      { type: "page", page: total }
+    ];
+  }
+  if (centerRight >= total - 2) {
+    return [
+      { type: "page", page: 1 },
+      { type: "ellipsis", pages: sequence(2, total - (window - 3)) },
+      ...sequence(total - (window - 3), total).map(
+        (value) => ({ type: "page", page: value })
+      ),
+      { type: "page", page: total }
+    ];
+  }
+  return [
+    // Both sides need an ellipsis.
+    { type: "page", page: 1 },
+    { type: "ellipsis", pages: sequence(2, centerLeft) },
+    ...pageSequence(centerLeft, centerRight + 1),
+    { type: "ellipsis", pages: sequence(centerRight + 1, total) },
+    { type: "page", page: total }
+  ];
+}
+exports.calculatePagination = calculatePagination;
+exports.pageSequence = pageSequence;
+exports.sequence = sequence;

package/dist/cjs/components/pagination/pagination-utils.d.cts

@@ -0,0 +1,28 @@
+interface Page {
+    type: "page";
+    page: number;
+}
+interface Ellipsis {
+    type: "ellipsis";
+    pages: number[];
+}
+export type PaginationContent = (Page | Ellipsis)[];
+/**
+ * Generates an array of a sequence of numbers in the range `[begin, end)`.
+ *
+ * @param begin The value of the first element in the generated array.
+ * @param end The value of the last element of the generated array + 1.
+ * @returns An array of increasing sequences. Empty if `begin` is greater than or equal to `end`.
+ */
+export declare function sequence(begin: number, end: number): number[];
+export declare function pageSequence(begin: number, end: number): Page[];
+/**
+ * Calculate the display and hidden page items.
+ *
+ * @param total The total pages number.
+ * @param current The current page number.
+ * @param window Number of elements to display in pagination.
+ * @returns {PaginationContent}.
+ */
+export declare function calculatePagination(total: number, current: number, window: number): PaginationContent;
+export {};

package/dist/cjs/components/progress-bar/{daikin-progress-bar.d.ts → daikin-progress-bar.d.cts}

@@ -1,5 +1,5 @@
 import { LitElement, PropertyValues } from 'lit';
-import { MergeVariantProps } from '../../type-utils';
+import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaBar: (props?: ({
     variant?: "error" | "indeterminate" | "inprogress" | "completed" | null | undefined;
     size?: "medium" | "large" | null | undefined;

package/dist/cjs/components/progress-bar/index.d.cts

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

package/dist/cjs/components/progress-indicator/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-progress-indicator.cjs";

package/dist/cjs/components/progress-indicator-item/daikin-progress-indicator-item.cjs

@@ -24,7 +24,7 @@ const cvaContainer = classVarianceAuthority.cva(
     "w-full",
     "text-system-element-text-primary",
     "pt-1",
-    "border-t-4",
+    "border-t-[0.25rem]",
     "font-daikinSerif"
   ],
   {
@@ -37,22 +37,6 @@ const cvaContainer = classVarianceAuthority.cva(
     }
   }
 );
-const cvaLabel = classVarianceAuthority.cva(
-  ["flex", "items-center", "gap-2", "font-bold", "leading-5"],
-  {
-    variants: {
-      status: {
-        unfinished: [],
-        inprogress: [],
-        finished: [
-          "after:size-4",
-          "after:i-daikin-status-success",
-          "after:text-system-state-primary-active"
-        ]
-      }
-    }
-  }
-);
 exports.DaikinProgressIndicatorItem = class DaikinProgressIndicatorItem extends lit.LitElement {
   constructor() {
     super(...arguments);
@@ -67,8 +51,16 @@ exports.DaikinProgressIndicatorItem = class DaikinProgressIndicatorItem extends
       role="listitem"
       aria-current=${ifDefined_js.ifDefined(this.current ? "step" : void 0)}
     >
-      <slot class=${cvaLabel({ status: this.status })}></slot>
-      <slot name="description" class="text-sm leading-[18px]"></slot>
+      <div class="flex items-center gap-2 font-bold leading-5">
+        <slot></slot>
+        ${this.status === "finished" ? lit.html`
+              <span
+                class="size-4 i-daikin-status-success text-system-state-primary-active"
+                aria-label="Completed"
+              ></span>
+            ` : lit.nothing}
+      </div>
+      <slot name="description" class="text-sm leading-[1.1rem]"></slot>
     </div>`;
   }
 };
@@ -78,7 +70,7 @@ exports.DaikinProgressIndicatorItem.styles = lit.css`
     :host {
       display: block;
       width: 100%;
-      min-width: 142px;
+      min-width: 9rem;
     }
   `;
 __decorateClass([

package/dist/{cjs-dev/components/progress-indicator-item/daikin-progress-indicator-item.d.ts → cjs/components/progress-indicator-item/daikin-progress-indicator-item.d.cts}

@@ -1,12 +1,9 @@
 import { LitElement } from 'lit';
-import { MergeVariantProps } from '../../type-utils';
+import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaContainer: (props?: ({
     status?: "inprogress" | "unfinished" | "finished" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare const cvaLabel: (props?: ({
-    status?: "inprogress" | "unfinished" | "finished" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type ProgressIndicatorItemVariantProps = MergeVariantProps<typeof cvaContainer | typeof cvaLabel>;
+type ProgressIndicatorItemVariantProps = MergeVariantProps<typeof cvaContainer>;
 /**
  * The progress indicator item component is a child element within the `daikin-progress-indicator` component, this represents one of the tasks that the user is working on.
  *

package/dist/cjs/components/progress-indicator-item/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-progress-indicator-item.cjs";

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

@@ -90,7 +90,7 @@ exports.DaikinRadio = class DaikinRadio extends lit.LitElement {
           class=${RADIO_CLASS_NAME}
           type="radio"
           name=${this.name}
-          value=${this.value}
+          .value=${this.value}
           aria-label=${this.labelPosition === "hidden" ? this.label : lit.nothing}
           ?disabled=${this.disabled}
           .checked=${this.checked}

package/dist/cjs/components/radio/{daikin-radio.d.ts → daikin-radio.d.cts}

@@ -22,11 +22,11 @@ import { LitElement } from 'lit';
 export declare class DaikinRadio extends LitElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Form name of the radio button.
+     * The form name, submitted as a name/value pair when submitting the form.
      */
     name: string;
     /**
-     * Form value of the radio button.
+     * The form value, submitted as a name/value pair when submitting the form.
      */
     value: string;
     /**
@@ -40,11 +40,11 @@ export declare class DaikinRadio extends LitElement {
      */
     labelPosition: "right" | "hidden";
     /**
-     * Whether the radio button is checked.
+     * Specify the radio button checked state.
      */
     checked: boolean;
     /**
-     * Whether the radio button is disabled.
+     * Specify the radio button disabled state.
      */
     disabled: boolean;
     /**

package/dist/cjs/components/radio/index.d.cts

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

package/dist/cjs/components/radio-group/daikin-radio-group.cjs

@@ -5,6 +5,7 @@ const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
 const tailwind = require("../../tailwind.css.cjs");
+require("../radio/daikin-radio.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {

package/dist/cjs/components/radio-group/{daikin-radio-group.d.ts → daikin-radio-group.d.cts}

@@ -1,6 +1,6 @@
 import { LitElement, PropertyValues } from 'lit';
-import { MergeVariantProps } from '../../type-utils';
-import { DaikinInputGroup } from '../input-group';
+import { MergeVariantProps } from "../../type-utils.cjs";
+import { DaikinInputGroup } from "../input-group/index.cjs";
 declare const radioGroupCN: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/cjs/components/radio-group/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-radio-group.cjs";