Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
require("../../_virtual/_rolldown/runtime.cjs");
const require_safe_custom_element = require("../../shared/safe-custom-element.cjs");
const require_index = require("../../shared/tailwind-element/index.cjs");
const require_decorate = require("../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.cjs");
require("../lukso-icon/index.cjs");
require("../lukso-button/index.cjs");
const require_style = require("./style.css?inline.cjs");
let lit = require("lit");
let lit_decorators_js = require("lit/decorators.js");
let tailwind_variants = require("tailwind-variants");
//#region src/components/lukso-pagination/index.ts
var LuksoPagination = class LuksoPagination extends require_index.TailwindStyledElement(require_style.default) {
	constructor(..._args) {
		super(..._args);
		this.variant = "primary";
		this.size = "small";
		this.currentPage = 1;
		this.totalPages = 0;
		this.isMobile = false;
		this.styles = (0, tailwind_variants.tv)({
			slots: {
				wrapper: "flex gap-2",
				ellipsis: "items-center flex justify-center",
				numbers: ""
			},
			variants: { size: {
				small: {
					wrapper: "paragraph-inter-12-medium",
					ellipsis: "min-w-6",
					numbers: "min-w-6"
				},
				medium: {
					wrapper: "paragraph-inter-16-semi-bold",
					ellipsis: "min-w-8",
					numbers: "min-w-8"
				},
				large: {
					wrapper: "paragraph-inter-16-semi-bold",
					ellipsis: "min-w-8",
					numbers: "min-w-8"
				},
				"x-large": {}
			} }
		});
	}
	willUpdate(changedProperties) {
		if (changedProperties.has("currentPage") || changedProperties.has("totalPages")) this.pagination = this.paginate({
			current: this.currentPage,
			max: this.totalPages
		});
	}
	paginate({ current, max }) {
		if (!current || !max) return null;
		const prev = current === 1 ? null : current - 1;
		const next = current === max ? null : current + 1;
		const items = [1];
		if (current === 1 && max === 1) return {
			current,
			prev,
			next,
			items
		};
		if (this.isMobile) return {
			current,
			prev,
			next,
			items: [current]
		};
		if (current > 4) items.push("...");
		const r = 2;
		const r1 = current - r;
		const r2 = current + r;
		for (let i = Math.max(r1, 2); i <= Math.min(max, r2); i++) items.push(i);
		if (r2 + 1 < max) items.push("...");
		if (r2 < max) items.push(max);
		return {
			current,
			prev,
			next,
			items
		};
	}
	async pageChangeEvent() {
		await this.updateComplete;
		const pageChangeEvent = new CustomEvent("on-page-change", {
			detail: {
				value: this.pagination.current,
				event
			},
			bubbles: false,
			composed: true
		});
		this.dispatchEvent(pageChangeEvent);
	}
	async handleNextPage() {
		this.currentPage = this.pagination.next;
		await this.pageChangeEvent();
	}
	async handlePrevPage() {
		this.currentPage = this.pagination.prev;
		await this.pageChangeEvent();
	}
	async handlePageChange(page) {
		this.currentPage = page;
		await this.pageChangeEvent();
	}
	iconColor() {
		return ["primary", "landing"].includes(this.variant) ? "neutral-100" : "neutral-20";
	}
	iconSize() {
		return this.size === "small" ? "medium" : "large";
	}
	prevPageTemplate() {
		return lit.html`<lukso-button
      size=${this.size}
      variant=${this.variant}
      is-icon
      ?disabled=${this.pagination.prev === null}
      @click=${this.handlePrevPage}
    >
      <lukso-icon
        name="arrow-left-sm"
        size=${this.iconSize()}
        color=${this.iconColor()}
      ></lukso-icon>
    </lukso-button>`;
	}
	nextPageTemplate() {
		return lit.html`<lukso-button
      size=${this.size}
      variant=${this.variant}
      is-icon
      ?disabled=${this.pagination.next === null}
      @click=${this.handleNextPage}
    >
      <lukso-icon
        name="arrow-right-sm"
        size=${this.iconSize()}
        color=${this.iconColor()}
      ></lukso-icon>
    </lukso-button>`;
	}
	numbersTemplate(ellipsisStyles, numbersStyles) {
		const numberTemplates = [];
		for (const item of this.pagination.items) {
			if (item === "...") {
				numberTemplates.push(lit.html` <div class=${ellipsisStyles}>...</div> `);
				continue;
			}
			if (typeof item === "number") numberTemplates.push(lit.html`<lukso-button
            size=${this.size}
            variant=${this.variant}
            ?disabled=${this.currentPage === item}
            is-full-width
            is-icon
            @click=${() => this.handlePageChange(item)}
          >
            <div class=${numbersStyles}>${item}</div>
          </lukso-button>`);
		}
		return numberTemplates;
	}
	render() {
		const { wrapper, ellipsis, numbers } = this.styles({ size: this.size });
		return lit.html`
      <div class=${wrapper()}>
        ${this.prevPageTemplate()}
        ${this.numbersTemplate(ellipsis(), numbers())}
        ${this.nextPageTemplate()}
      </div>
    `;
	}
};
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoPagination.prototype, "variant", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoPagination.prototype, "size", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Number,
	attribute: "current-page"
})], LuksoPagination.prototype, "currentPage", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Number,
	attribute: "total-pages"
})], LuksoPagination.prototype, "totalPages", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "is-mobile"
})], LuksoPagination.prototype, "isMobile", void 0);
require_decorate.__decorate([(0, lit_decorators_js.state)()], LuksoPagination.prototype, "pagination", void 0);
LuksoPagination = require_decorate.__decorate([require_safe_custom_element.safeCustomElement("lukso-pagination")], LuksoPagination);
//#endregion
Object.defineProperty(exports, "LuksoPagination", {
	enumerable: true,
	get: function() {
		return LuksoPagination;
	}
});
