@daikin-oss/design-system-web-components 2.0.0 → 2.0.1-next.1

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

@@ -1,157 +1,163 @@
-import { cva } from "class-variance-authority";
-import { unsafeCSS, css, html } from "lit";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { repeat } from "lit/directives/repeat.js";
 import { DDSElement } from "../../base/dds-element.js";
-import "../../base/dds-form-element.js";
-import { property, oneOf } from "../../base/dds-property.js";
+import { oneOf, property } from "../../base/dds-property.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { ddsElement } from "../../base/decorators.js";
-import "../../base/define.js";
-import tailwindStyles from "../../tailwind.css.js";
+import "../../base/index.js";
+import tailwind_default 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-[var(--ddc-pagination-item-size)]",
-    "min-h-[var(--ddc-pagination-item-size)]",
-    "h-[var(--ddc-pagination-item-size)]",
-    "p-1",
-    "text-[length:var(--ddc-pagination-font-size)]",
-    "not-italic",
-    "leading-[var(--ddc-pagination-line-height)]",
-    "bg-clip-content",
-    "focus-visible:outline-solid",
-    "focus-visible:outline-2",
-    "focus-visible:-outline-offset-2",
-    "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-brand-hover",
-          "hover:bg-ddt-color-common-surface-brand-hover",
-          "active:text-ddt-color-common-brand-press",
-          "active:bg-ddt-color-common-surface-brand-press",
-          "after:bg-ddt-color-common-brand-default",
-          "after:content-['']",
-          "after:h-[var(--ddc-pagination-active-indicator-size)]",
-          "after:absolute",
-          "after:inset-[var(--ddc-pagination-active-indicator-size)]",
-          "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-neutral-press",
-          "hover:bg-ddt-color-common-surface-neutral-hover",
-          "hover:text-ddt-color-common-neutral-hover"
-        ]
-      }
-    }
-  }
-);
-const cvaEllipsis = cva([
-  "relative",
-  "border-0",
-  "no-underline",
-  "flex",
-  "items-center",
-  "justify-center",
-  "min-w-[var(--ddc-pagination-item-size)]",
-  "min-h-[var(--ddc-pagination-item-size)]",
-  "w-[var(--ddc-pagination-item-size)]",
-  "h-[var(--ddc-pagination-item-size)]",
-  "text-[length:var(--ddc-pagination-font-size)]",
-  "not-italic",
-  "font-normal",
-  "leading-[var(--ddc-pagination-line-height)]",
-  "text-ddt-color-common-neutral-default"
+import { css, html, unsafeCSS } from "lit";
+import { cva } from "class-variance-authority";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { repeat } from "lit/directives/repeat.js";
+//#region src/components/pagination/daikin-pagination.ts
+var cvaPageButton = cva([
+	"border-0",
+	"no-underline",
+	"flex",
+	"relative",
+	"items-center",
+	"justify-center",
+	"min-w-[var(--ddc-pagination-item-size)]",
+	"min-h-[var(--ddc-pagination-item-size)]",
+	"h-[var(--ddc-pagination-item-size)]",
+	"p-1",
+	"text-[length:var(--ddc-pagination-font-size)]",
+	"not-italic",
+	"leading-[var(--ddc-pagination-line-height)]",
+	"bg-clip-content",
+	"focus-visible:outline-solid",
+	"focus-visible:outline-2",
+	"focus-visible:-outline-offset-2",
+	"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-brand-hover",
+		"hover:bg-ddt-color-common-surface-brand-hover",
+		"active:text-ddt-color-common-brand-press",
+		"active:bg-ddt-color-common-surface-brand-press",
+		"after:bg-ddt-color-common-brand-default",
+		"after:content-['']",
+		"after:h-[var(--ddc-pagination-active-indicator-size)]",
+		"after:absolute",
+		"after:inset-[var(--ddc-pagination-active-indicator-size)]",
+		"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-neutral-press",
+		"hover:bg-ddt-color-common-surface-neutral-hover",
+		"hover:text-ddt-color-common-neutral-hover"
+	]
+} } });
+var cvaEllipsis = cva([
+	"relative",
+	"border-0",
+	"no-underline",
+	"flex",
+	"items-center",
+	"justify-center",
+	"min-w-[var(--ddc-pagination-item-size)]",
+	"min-h-[var(--ddc-pagination-item-size)]",
+	"w-[var(--ddc-pagination-item-size)]",
+	"h-[var(--ddc-pagination-item-size)]",
+	"text-[length:var(--ddc-pagination-font-size)]",
+	"not-italic",
+	"font-normal",
+	"leading-[var(--ddc-pagination-line-height)]",
+	"text-ddt-color-common-neutral-default"
 ]);
-const cvaChevronButton = cva([
-  "border-0",
-  "no-underline",
-  "flex",
-  "items-center",
-  "justify-center",
-  "min-w-[var(--ddc-pagination-item-size)]",
-  "min-h-[var(--ddc-pagination-item-size)]",
-  "w-[var(--ddc-pagination-item-size)]",
-  "h-[var(--ddc-pagination-item-size)]",
-  "text-ddt-color-common-neutral-default",
-  "text-[length:var(--ddc-pagination-font-size)]",
-  "not-italic",
-  "font-normal",
-  "leading-[var(--ddc-pagination-line-height)]",
-  "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-solid",
-  "focus-visible:outline-2",
-  "focus-visible:-outline-offset-2",
-  "focus-visible:outline-ddt-color-common-border-focus"
+var cvaChevronButton = cva([
+	"border-0",
+	"no-underline",
+	"flex",
+	"items-center",
+	"justify-center",
+	"min-w-[var(--ddc-pagination-item-size)]",
+	"min-h-[var(--ddc-pagination-item-size)]",
+	"w-[var(--ddc-pagination-item-size)]",
+	"h-[var(--ddc-pagination-item-size)]",
+	"text-ddt-color-common-neutral-default",
+	"text-[length:var(--ddc-pagination-font-size)]",
+	"not-italic",
+	"font-normal",
+	"leading-[var(--ddc-pagination-line-height)]",
+	"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-solid",
+	"focus-visible:outline-2",
+	"focus-visible:-outline-offset-2",
+	"focus-visible:outline-ddt-color-common-border-focus"
 ]);
-let DaikinPagination = class extends DDSElement {
-  constructor() {
-    super(...arguments);
-    this.current = 1;
-    this.total = 1;
-    this.window = 5;
-    this.size = "medium";
-  }
-  _goto(page) {
-    const newPage = Math.max(Math.min(page, this.total), 1);
-    if (!this.dispatchEvent(
-      new CustomEvent("before-change", {
-        bubbles: true,
-        composed: true,
-        cancelable: true,
-        detail: { page: newPage }
-      })
-    )) {
-      return;
+var DaikinPagination = class DaikinPagination extends DDSElement {
+	constructor(..._args) {
+		super(..._args);
+		this.current = 1;
+		this.total = 1;
+		this.window = 5;
+		this.size = "medium";
+	}
+	static {
+		this.styles = css`
+    ${unsafeCSS(tailwind_default)}
+
+    :host {
+      display: inline-flex;
+      --ddc-pagination-item-size: 3rem;
+      --ddc-pagination-font-size: 1rem;
+      --ddc-pagination-line-height: var(--dds-font-line-height-tight);
+      --ddc-pagination-active-indicator-size: 0.25rem;
+      --ddc-pagination-icon-size: 2rem;
+    }
+
+    :host([size="small"]) {
+      --ddc-pagination-item-size: 2.25rem;
+      --ddc-pagination-font-size: 0.875rem;
+      --ddc-pagination-line-height: var(--dds-font-line-height-tight);
+      --ddc-pagination-active-indicator-size: var(--dds-border-width-075);
+      --ddc-pagination-icon-size: 1.5rem;
+    }
+
+    @media (max-width: 767px) {
+      :host {
+        --ddc-pagination-item-size: 2.25rem;
+        --ddc-pagination-font-size: var(--text-sm);
+        --ddc-pagination-line-height: var(--dds-font-line-height-tight);
+        --ddc-pagination-active-indicator-size: var(--dds-border-width-075);
+        --ddc-pagination-icon-size: 1.5rem;
+      }
     }
-    this.current = newPage;
-    this.dispatchEvent(
-      new Event("change", {
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-  _gotoOffset(offset) {
-    this._goto(this.current + offset);
-  }
-  render() {
-    const cvaChevron = cvaChevronButton();
-    const pageArray = calculatePagination(
-      this.total,
-      this.current,
-      this.window
-    );
-    const landmarkLabel = this.ariaLabel || "Pagination";
-    return html`
+  `;
+	}
+	_goto(page) {
+		const newPage = Math.max(Math.min(page, this.total), 1);
+		if (!this.dispatchEvent(new CustomEvent("before-change", {
+			bubbles: true,
+			composed: true,
+			cancelable: true,
+			detail: { page: newPage }
+		}))) return;
+		this.current = newPage;
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_gotoOffset(offset) {
+		this._goto(this.current + offset);
+	}
+	render() {
+		const cvaChevron = cvaChevronButton();
+		const pageArray = calculatePagination(this.total, this.current, this.window);
+		const landmarkLabel = this.ariaLabel || "Pagination";
+		return html`
       <div
         aria-label=${landmarkLabel}
         role="navigation"
@@ -168,29 +174,21 @@ let DaikinPagination = class extends DDSElement {
             class="icon-[daikin--chevron-left] w-(--ddc-pagination-icon-size) h-(--ddc-pagination-icon-size)"
           ></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`
+        ${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
-          )}
+                  aria-current=${ifDefined(item.page === this.current ? "page" : void 0)}
                 >
                   ${item.page}
                 </button>
               `;
-        } else {
-          return html`
+			} else return html`
                 <span class=${cvaEllipsis()}>
                   <button
                     type="button"
@@ -200,9 +198,7 @@ let DaikinPagination = class extends DDSElement {
                   ></button>
                 </span>
               `;
-        }
-      }
-    )}
+		})}
         <button
           type="button"
           class=${cvaChevron}
@@ -216,58 +212,26 @@ let DaikinPagination = class extends DDSElement {
         </button>
       </div>
     `;
-  }
-};
-DaikinPagination.styles = css`
-    ${unsafeCSS(tailwindStyles)}
-
-    :host {
-      display: inline-flex;
-      --ddc-pagination-item-size: 3rem;
-      --ddc-pagination-font-size: 1rem;
-      --ddc-pagination-line-height: var(--dds-font-line-height-tight);
-      --ddc-pagination-active-indicator-size: 0.25rem;
-      --ddc-pagination-icon-size: 2rem;
-    }
-
-    :host([size="small"]) {
-      --ddc-pagination-item-size: 2.25rem;
-      --ddc-pagination-font-size: 0.875rem;
-      --ddc-pagination-line-height: var(--dds-font-line-height-tight);
-      --ddc-pagination-active-indicator-size: var(--dds-border-width-075);
-      --ddc-pagination-icon-size: 1.5rem;
-    }
-
-    @media (max-width: 767px) {
-      :host {
-        --ddc-pagination-item-size: 2.25rem;
-        --ddc-pagination-font-size: var(--text-sm);
-        --ddc-pagination-line-height: var(--dds-font-line-height-tight);
-        --ddc-pagination-active-indicator-size: var(--dds-border-width-075);
-        --ddc-pagination-icon-size: 1.5rem;
-      }
-    }
-  `;
-__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);
-__decorateClass([
-  property({
-    type: String,
-    reflect: true,
-    fallbackValue: "medium",
-    isAllowedValue: oneOf(["small", "medium"])
-  })
-], DaikinPagination.prototype, "size", 2);
-DaikinPagination = __decorateClass([
-  ddsElement("daikin-pagination")
-], DaikinPagination);
-export {
-  DaikinPagination
+	}
 };
+__decorate([property({
+	type: Number,
+	reflect: true
+})], DaikinPagination.prototype, "current", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], DaikinPagination.prototype, "total", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], DaikinPagination.prototype, "window", void 0);
+__decorate([property({
+	type: String,
+	reflect: true,
+	fallbackValue: "medium",
+	isAllowedValue: oneOf(["small", "medium"])
+})], DaikinPagination.prototype, "size", void 0);
+DaikinPagination = __decorate([ddsElement("daikin-pagination")], DaikinPagination);
+//#endregion
+export { DaikinPagination };

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

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

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

@@ -1,50 +1,83 @@
+//#region src/components/pagination/pagination-utils.ts
+/**
+* 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`.
+*/
 function sequence(begin, end) {
-  const length = Math.max(end - begin, 0);
-  return Array.from({ length }, (_, i) => begin + i);
+	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 }));
+	return sequence(begin, end).map((page) => ({
+		type: "page",
+		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}.
+*/
 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 }
-  ];
+	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 [
+		{
+			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
-};
+//#endregion
+export { calculatePagination, pageSequence, sequence };