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

package/dist/es/components/list-item/daikin-list-item.js

@@ -3,7 +3,6 @@ import { css, unsafeCSS, LitElement, html } from "lit";
 import { property, query, customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import tailwindStyles from "../../tailwind.css.js";
-import "../icon/daikin-icon.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -22,15 +21,35 @@ const INNER_CN = cva([
   "before:h-full",
   "focus-visible:outline-none",
   "focus-visible:before:outline",
-  "focus-visible:before:outline-1",
-  "focus-visible:before:-outline-offset-1",
-  "focus-visible:before:outline-daikinBlue-700",
+  "focus-visible:before:outline-2",
+  "focus-visible:before:-outline-offset-2",
+  "focus-visible:before:outline-system-state-focus",
   // For buttons and links
-  "link-enabled:before:group-hover:[&:not(:active)]:bg-[#f2f2f2]",
-  "link-enabled:before:active:bg-daikinNeutral-100",
+  "link-enabled:before:group-hover:[&:not(:active)]:bg-system-background-surface-hover",
+  "link-enabled:before:active:bg-system-background-surface-press",
   // For text
-  "[&:not(a,button)]:before:group-hover:bg-[#f2f2f2]"
+  "[&:not(a,button)]:before:group-hover:bg-system-background-surface-hover"
 ])();
+const cvaContent = cva(["block", "pl-2", "pr-3", "text-left"], {
+  variants: {
+    disabled: {
+      false: ["text-system-element-text-primary"],
+      true: ["text-system-state-disabled"]
+    }
+  }
+});
+const cvaIcon = cva(["icon-size-6"], {
+  variants: {
+    position: {
+      left: [],
+      right: ["pointer-events-none"]
+    },
+    disabled: {
+      false: ["text-system-element-text-primary"],
+      true: ["text-system-state-disabled"]
+    }
+  }
+});
 let DaikinListItem = class extends LitElement {
   constructor() {
     super();
@@ -56,10 +75,13 @@ let DaikinListItem = class extends LitElement {
   render() {
     const disabled = this._disabled;
     const content = 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="block pl-2 pr-3 text-left"></slot>
+      <slot class=${cvaContent({ disabled: this.disabled })}></slot>
     </span>`;
     const list = {
       button: () => html`<button type="button" class=${INNER_CN} ?disabled=${disabled}>
@@ -76,9 +98,7 @@ let DaikinListItem = class extends LitElement {
       text: () => html`<span class=${INNER_CN}>${content}</span>`
     }[this.type]();
     return html`<div
-      class=${// We cannot directly write classes like `class="..."` as they include '&', which must be escaped. It can't be escaped either because TailwindCSS can't process it.
-    // Set the text color here to apply to the icons on both sides along with text.
-    "group flex justify-between items-center w-full min-h-12 p-3 text-left relative text-daikinNeutral-800 [&:has(a:not(:any-link),:disabled)]:text-daikinNeutral-200"}
+      class="group flex justify-between items-center w-full min-h-12 p-3 text-left relative"
       role="listitem"
     >
       ${list}
@@ -87,7 +107,10 @@ let DaikinListItem = class extends 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/es/components/list-item/index.d.ts

@@ -1 +1 @@
-export * from './daikin-list-item';
+export * from "./daikin-list-item.js";

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

@@ -1,5 +1,5 @@
 import { LitElement, nothing } from 'lit';
-import { MergeVariantProps } from '../../type-utils';
+import { MergeVariantProps } from "../../type-utils.js";
 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/es/components/notification/daikin-notification.js

@@ -4,7 +4,6 @@ import { css, unsafeCSS, LitElement, html, nothing } from "lit";
 import { property, customElement } from "lit/decorators.js";
 import { EVENT_CLOSE } from "../../constants/events.js";
 import tailwindStyles from "../../tailwind.css.js";
-import "../icon/daikin-icon.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -43,15 +42,35 @@ const cvaContainer = cva(
   }
 );
 const cvaIconContainer = 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: {
@@ -83,7 +102,7 @@ let DaikinNotification = class extends LitElement {
     this.closeButton = false;
   }
   /**
-   * Call the event registered in "close"
+   * Call the event registered in "close".
    */
   _handleClickClose() {
     const event = new CustomEvent(EVENT_CLOSE);
@@ -106,13 +125,7 @@ let DaikinNotification = class extends 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"
           >
@@ -132,15 +145,9 @@ let DaikinNotification = class extends 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>
                 ` : nothing}
           </div>
@@ -181,7 +188,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinNotification.prototype, "open", 2);
 __decorateClass([
-  property({ type: Boolean })
+  property({ type: Boolean, attribute: "close-button" })
 ], DaikinNotification.prototype, "closeButton", 2);
 DaikinNotification = __decorateClass([
   customElement("daikin-notification")

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

@@ -1 +1 @@
-export * from './daikin-notification';
+export * from "./daikin-notification.js";

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

@@ -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/es/components/pagination/daikin-pagination.js

@@ -0,0 +1,216 @@
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { repeat } from "lit/directives/repeat.js";
+import tailwindStyles from "../../tailwind.css.js";
+import { calculatePagination } from "./pagination-utils.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 cvaPageButton = 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 = 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 = 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]"
+]);
+let DaikinPagination = class extends 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 = calculatePagination(
+      this.total,
+      this.current,
+      this.window
+    );
+    return 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(
+      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 html`
+                <button
+                  type="button"
+                  class=${buttonClassName}
+                  @click=${() => this._goto(item.page)}
+                  aria-label="Go to page ${item.page}"
+                  aria-current=${ifDefined(
+            item.page === this.current ? "page" : void 0
+          )}
+                >
+                  ${item.page}
+                </button>
+              `;
+        } else {
+          return 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>
+    `;
+  }
+};
+DaikinPagination.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: inline-flex;
+    }
+  `;
+__decorateClass([
+  property({ type: Number, reflect: true })
+], DaikinPagination.prototype, "current", 2);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], DaikinPagination.prototype, "total", 2);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], DaikinPagination.prototype, "window", 2);
+DaikinPagination = __decorateClass([
+  customElement("daikin-pagination")
+], DaikinPagination);
+export {
+  DaikinPagination
+};

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

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

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

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

package/dist/es/components/pagination/pagination-utils.d.ts

@@ -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/es/components/pagination/pagination-utils.js

@@ -0,0 +1,50 @@
+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 }
+  ];
+}
+export {
+  calculatePagination,
+  pageSequence,
+  sequence
+};

package/dist/es/components/progress-bar/daikin-progress-bar.d.ts

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

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

@@ -51,7 +51,7 @@ const cvaBarContainer = cva(
         completed: [
           "after:size-4",
           "after:text-daikinGreen-500",
-          "after:i-daikin-notification-status-positive"
+          "after:i-daikin-status-positive"
         ],
         indeterminate: [],
         error: [

package/dist/es/components/progress-bar/index.d.ts

@@ -1 +1 @@
-export * from './daikin-progress-bar';
+export * from "./daikin-progress-bar.js";

package/dist/es/components/progress-indicator/daikin-progress-indicator.d.ts

@@ -0,0 +1,47 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * The progress indicator is used to let the user know where they are in the task list.
+ *
+ * Hierarchy:
+ * - `daikin-progress-indicator` > `daikin-progress-indicator-item`
+ *
+ * @slot - A slot for progress indicator items. Place `daikin-progress-indicator-item` elements here.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-progress-indicator>
+ *   <daikin-progress-indicator-item state="unfinished">
+ *     Title 1
+ *     <span slot="description">Description 1</span>
+ *   </daikin-progress-indicator-item>
+ *   <daikin-progress-indicator-item state="inprogress">
+ *     Title 2
+ *     <span slot="description">Description 2</span>
+ *   </daikin-progress-indicator-item>
+ *   <daikin-progress-indicator-item state="finished">
+ *     Title 3
+ *     <span slot="description">Description 3</span>
+ *   </daikin-progress-indicator-item>
+ * </daikin-progress-indicator>
+ * ```
+ */
+export declare class DaikinProgressIndicator extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Specify the index number of the current location in the progress indicator.
+     */
+    currentItem: number | null;
+    private readonly _items;
+    private _setCurrentItem;
+    private _handleSlotChange;
+    render(): import('lit-html').TemplateResult<1>;
+    protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-progress-indicator": DaikinProgressIndicator;
+    }
+}
+export default DaikinProgressIndicator;