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

package/dist/cjs/components/list-item/daikin-list-item.cjs

@@ -5,7 +5,6 @@ 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("../icon/daikin-icon.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -26,18 +25,30 @@ const INNER_CN = classVarianceAuthority.cva([
   "focus-visible:before:outline",
   "focus-visible:before:outline-2",
   "focus-visible:before:-outline-offset-2",
-  "focus-visible:before:outline-system-state-focus",
+  "focus-visible:before:outline-ddt-color-common-border-focus",
   // For buttons and links
-  "link-enabled:before:group-hover:[&:not(:active)]:bg-system-background-surface-hover",
-  "link-enabled:before:active:bg-system-background-surface-press",
+  "link-enabled:before:group-hover:[&:not(:active)]:bg-ddt-color-common-surface-hover",
+  "link-enabled:before:active:bg-ddt-color-common-surface-press",
   // For text
-  "[&:not(a,button)]:before:group-hover:bg-system-background-surface-hover"
+  "[&:not(a,button)]:before:group-hover:bg-ddt-color-common-surface-hover"
 ])();
 const cvaContent = classVarianceAuthority.cva(["block", "pl-2", "pr-3", "text-left"], {
   variants: {
     disabled: {
-      false: ["text-system-element-text-primary"],
-      true: ["text-system-state-disabled"]
+      false: ["text-ddt-color-common-text-primary"],
+      true: ["text-ddt-color-common-disabled"]
+    }
+  }
+});
+const cvaIcon = classVarianceAuthority.cva(["icon-size-6"], {
+  variants: {
+    position: {
+      left: [],
+      right: ["pointer-events-none"]
+    },
+    disabled: {
+      false: ["text-ddt-color-common-text-primary"],
+      true: ["text-ddt-color-common-disabled"]
     }
   }
 });
@@ -66,7 +77,10 @@ exports.DaikinListItem = class DaikinListItem extends lit.LitElement {
   render() {
     const disabled = this._disabled;
     const content = lit.html`<span class="flex items-center w-full relative">
-      <slot name="left-icon">
+      <slot
+        name="left-icon"
+        class=${cvaIcon({ disabled: this.disabled, position: "left" })}
+      >
         <span class="block -ml-1"></span>
       </slot>
       <slot class=${cvaContent({ disabled: this.disabled })}></slot>
@@ -95,7 +109,10 @@ exports.DaikinListItem = class DaikinListItem extends lit.LitElement {
         class="flex items-center gap-3"
         @click=${this._handleClickAction}
       >
-        <slot name="right-icon" class="pointer-events-none">
+        <slot
+          name="right-icon"
+          class=${cvaIcon({ disabled: this.disabled, position: "right" })}
+        >
           <span class="block -mr-1"></span>
         </slot>
       </slot>

package/dist/cjs/components/list-item/index.d.cts

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

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

@@ -1,12 +1,10 @@
 "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 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) => {
@@ -18,7 +16,13 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const cvaContainer = classVarianceAuthority.cva(
-  ["flex", "box-border", "bg-white", "overflow-hidden", "font-daikinSerif"],
+  [
+    "flex",
+    "box-border",
+    "bg-ddt-color-common-background-default",
+    "overflow-hidden",
+    "font-daikinSerif"
+  ],
   {
     variants: {
       variant: {
@@ -31,11 +35,11 @@ const cvaContainer = classVarianceAuthority.cva(
         inline: []
       },
       status: {
-        positive: ["border-[--colorFeedbackPositive]"],
-        negative: ["border-[--colorFeedbackNegative]"],
-        warning: ["border-[--colorFeedbackWarning]"],
-        alarm: ["border-[--colorFeedbackAlarm]"],
-        information: ["border-[--colorFeedbackInformation]"]
+        positive: ["border-ddt-color-common-success"],
+        negative: ["border-ddt-color-common-danger-default"],
+        warning: ["border-ddt-color-common-warning"],
+        alarm: ["border-ddt-color-common-alarm"],
+        information: ["border-ddt-color-common-information"]
       }
     },
     defaultVariants: {
@@ -45,15 +49,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-ddt-color-common-background-default"
+  ],
   {
     variants: {
       status: {
-        positive: ["bg-[--colorFeedbackPositive]"],
-        negative: ["bg-[--colorFeedbackNegative]"],
-        warning: ["bg-[--colorFeedbackWarning]"],
-        alarm: ["bg-[--colorFeedbackAlarm]"],
-        information: ["bg-[--colorFeedbackInformation]"]
+        positive: [
+          "bg-ddt-color-common-success",
+          "after:i-daikin-status-positive"
+        ],
+        negative: [
+          "bg-ddt-color-common-danger-default",
+          "after:i-daikin-status-negative"
+        ],
+        warning: [
+          "bg-ddt-color-common-warning",
+          "after:i-daikin-status-warning"
+        ],
+        alarm: ["bg-ddt-color-common-alarm", "after:i-daikin-status-alarm"],
+        information: [
+          "bg-ddt-color-common-information",
+          "after:i-daikin-status-information"
+        ]
       }
     },
     defaultVariants: {
@@ -85,7 +109,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 +132,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 +152,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>
@@ -153,12 +165,6 @@ exports.DaikinNotification.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
 
     :host {
-      --colorFeedbackPositive: ${lit.unsafeCSS(variables_js.colorFeedbackPositive)};
-      --colorFeedbackWarning: ${lit.unsafeCSS(variables_js.colorFeedbackWarning)};
-      --colorFeedbackNegative: ${lit.unsafeCSS(variables_js.colorFeedbackNegative)};
-      --colorFeedbackAlarm: #f68c54;
-      --colorFeedbackInformation: #0097e0;
-
       display: block;
     }
 
@@ -183,7 +189,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,213 @@
+"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-ddt-color-common-border-focus"
+  ],
+  {
+    variants: {
+      active: {
+        true: [
+          "text-ddt-color-common-brand-default",
+          "focus-visible:text-ddt-color-common-brand-default",
+          "font-bold",
+          "hover:text-ddt-color-common-border-focus",
+          "hover:bg-ddt-color-common-surface-selected-default",
+          "active:text-ddt-color-common-brand-press",
+          "active:bg-ddt-color-common-surface-selected-press",
+          "after:bg-ddt-color-common-brand-default",
+          "after:content-['']",
+          "after:h-1",
+          "after:absolute",
+          "after:inset-0",
+          "after:top-auto"
+        ],
+        false: [
+          "font-normal",
+          "text-ddt-color-common-neutral-default",
+          "active:bg-ddt-color-common-surface-neutral-press",
+          "active:text-ddt-color-common-text-primary",
+          "hover:bg-ddt-color-common-surface-neutral-hover",
+          "hover:text-ddt-color-common-neutral-hover"
+        ]
+      }
+    }
+  }
+);
+const cvaEllipsis = classVarianceAuthority.cva([
+  "relative",
+  "border-0",
+  "no-underline",
+  "flex",
+  "items-center",
+  "justify-center",
+  "w-12",
+  "h-12",
+  "font-daikinSerif",
+  "text-base",
+  "not-italic",
+  "font-normal",
+  "leading-6",
+  "text-ddt-color-common-neutral-default"
+]);
+const cvaChevronButton = classVarianceAuthority.cva([
+  "border-0",
+  "no-underline",
+  "flex",
+  "items-center",
+  "justify-center",
+  "w-12",
+  "h-12",
+  "text-ddt-color-common-neutral-default",
+  "font-daikinSerif",
+  "text-base",
+  "not-italic",
+  "font-normal",
+  "leading-6",
+  "enabled:hover:bg-ddt-color-common-surface-neutral-hover",
+  "enabled:hover:text-ddt-color-common-neutral-hover",
+  "enabled:active:bg-ddt-color-common-surface-neutral-press",
+  "enabled:active:text-ddt-color-common-neutral-press",
+  "disabled:!text-ddt-color-common-disabled",
+  "focus-visible:outline",
+  "focus-visible:outline-2",
+  "focus-visible:outline-offset-1",
+  "focus-visible:outline-ddt-color-common-border-focus"
+]);
+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 {};