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

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

@@ -1,159 +1,163 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classVarianceAuthority = require("class-variance-authority");
-const lit = require("lit");
-const ifDefined_js = require("lit/directives/if-defined.js");
-const repeat_js = require("lit/directives/repeat.js");
-const ddsElement = require("../../base/dds-element.cjs");
-require("../../base/dds-form-element.cjs");
-const ddsProperty = require("../../base/dds-property.cjs");
-const decorators = require("../../base/decorators.cjs");
-require("../../base/define.cjs");
-const tailwind = require("../../tailwind.css.cjs");
-const paginationUtils = require("./pagination-utils.cjs");
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators2, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators2[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-[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 = classVarianceAuthority.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 require_dds_element = require("../../base/dds-element.cjs");
+const require_dds_property = require("../../base/dds-property.cjs");
+const require_decorate = require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs");
+const require_decorators = require("../../base/decorators.cjs");
+require("../../base/index.cjs");
+const require_tailwind = require("../../tailwind.css.cjs");
+const require_pagination_utils = require("./pagination-utils.cjs");
+let lit = require("lit");
+let class_variance_authority = require("class-variance-authority");
+let lit_directives_if_defined_js = require("lit/directives/if-defined.js");
+let lit_directives_repeat_js = require("lit/directives/repeat.js");
+//#region src/components/pagination/daikin-pagination.ts
+var cvaPageButton = (0, class_variance_authority.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 = (0, class_variance_authority.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 = classVarianceAuthority.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 = (0, class_variance_authority.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"
 ]);
-exports.DaikinPagination = class DaikinPagination extends ddsElement.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 require_dds_element.DDSElement {
+	constructor(..._args) {
+		super(..._args);
+		this.current = 1;
+		this.total = 1;
+		this.window = 5;
+		this.size = "medium";
+	}
+	static {
+		this.styles = lit.css`
+    ${(0, lit.unsafeCSS)(require_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;
     }
-    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 = paginationUtils.calculatePagination(
-      this.total,
-      this.current,
-      this.window
-    );
-    const landmarkLabel = this.ariaLabel || "Pagination";
-    return lit.html`
+
+    @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;
+      }
+    }
+  `;
+	}
+	_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 = require_pagination_utils.calculatePagination(this.total, this.current, this.window);
+		const landmarkLabel = this.ariaLabel || "Pagination";
+		return lit.html`
       <div
         aria-label=${landmarkLabel}
         role="navigation"
@@ -170,29 +174,21 @@ exports.DaikinPagination = class DaikinPagination extends ddsElement.DDSElement
             class="icon-[daikin--chevron-left] w-(--ddc-pagination-icon-size) h-(--ddc-pagination-icon-size)"
           ></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`
+        ${(0, lit_directives_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
-          )}
+                  aria-current=${(0, lit_directives_if_defined_js.ifDefined)(item.page === this.current ? "page" : void 0)}
                 >
                   ${item.page}
                 </button>
               `;
-        } else {
-          return lit.html`
+			} else return lit.html`
                 <span class=${cvaEllipsis()}>
                   <button
                     type="button"
@@ -202,9 +198,7 @@ exports.DaikinPagination = class DaikinPagination extends ddsElement.DDSElement
                   ></button>
                 </span>
               `;
-        }
-      }
-    )}
+		})}
         <button
           type="button"
           class=${cvaChevron}
@@ -218,55 +212,31 @@ exports.DaikinPagination = class DaikinPagination extends ddsElement.DDSElement
         </button>
       </div>
     `;
-  }
+	}
 };
-exports.DaikinPagination.styles = lit.css`
-    ${lit.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;
-      }
-    }
-  `;
-__decorateClass([
-  ddsProperty.property({ type: Number, reflect: true })
-], exports.DaikinPagination.prototype, "current", 2);
-__decorateClass([
-  ddsProperty.property({ type: Number, reflect: true })
-], exports.DaikinPagination.prototype, "total", 2);
-__decorateClass([
-  ddsProperty.property({ type: Number, reflect: true })
-], exports.DaikinPagination.prototype, "window", 2);
-__decorateClass([
-  ddsProperty.property({
-    type: String,
-    reflect: true,
-    fallbackValue: "medium",
-    isAllowedValue: ddsProperty.oneOf(["small", "medium"])
-  })
-], exports.DaikinPagination.prototype, "size", 2);
-exports.DaikinPagination = __decorateClass([
-  decorators.ddsElement("daikin-pagination")
-], exports.DaikinPagination);
+require_decorate.default([require_dds_property.property({
+	type: Number,
+	reflect: true
+})], DaikinPagination.prototype, "current", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Number,
+	reflect: true
+})], DaikinPagination.prototype, "total", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Number,
+	reflect: true
+})], DaikinPagination.prototype, "window", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: "medium",
+	isAllowedValue: require_dds_property.oneOf(["small", "medium"])
+})], DaikinPagination.prototype, "size", void 0);
+DaikinPagination = require_decorate.default([require_decorators.ddsElement("daikin-pagination")], DaikinPagination);
+//#endregion
+Object.defineProperty(exports, "DaikinPagination", {
+	enumerable: true,
+	get: function() {
+		return DaikinPagination;
+	}
+});

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

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

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

@@ -1,50 +1,85 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#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
+		}
+	];
 }
+//#endregion
 exports.calculatePagination = calculatePagination;
 exports.pageSequence = pageSequence;
 exports.sequence = sequence;