aeico-components 0.1.5 → 0.1.7

package/dist/chunks/pagination.cjs

@@ -0,0 +1,475 @@
+"use strict";
+const aeico = require("aeico");
+const aeicoComponent = require("./aeico-component.cjs");
+const variables = require("./variables.cjs");
+const size = require("./size.cjs");
+const paginationStyle = `:host {
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--ae-size-m);
+}
+
+nav {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+}
+
+button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2em;
+  height: 2em;
+  padding: 0 0.5em;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1;
+  cursor: pointer;
+  user-select: none;
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
+  border: 1px solid var(--ae-border-default);
+  background: transparent;
+  color: var(--ae-color-text-main);
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+  outline: none;
+}
+
+button:focus-visible {
+  box-shadow: 0 0 0 2px var(--ae-focus-ring);
+  border-color: var(--ae-border-focus);
+}
+
+button:hover:not(:disabled) {
+  border-color: var(--ae-color-primary);
+  color: var(--ae-color-primary);
+  background: var(--ae-color-primary-bg-subtle);
+}
+
+button:active:not(:disabled) {
+  background: color-mix(in srgb, var(--ae-color-primary-bg-subtle), var(--ae-color-primary) 10%);
+}
+
+button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+button.active {
+  background: var(--ae-color-primary);
+  border-color: var(--ae-color-primary);
+  color: white;
+  font-weight: 600;
+  cursor: default;
+}
+
+button.active:hover:not(:disabled) {
+  background: var(--ae-color-primary-hover);
+  border-color: var(--ae-color-primary-hover);
+  color: white;
+}
+
+button.nav-btn {
+  min-width: 2em;
+  width: 2em;
+  padding: 0;
+}
+
+[part="ellipsis"] {
+  display: inline-flex;
+  align-items: flex-end;
+  justify-content: center;
+  min-width: 2em;
+  height: 2em;
+  color: var(--ae-color-text-muted);
+  user-select: none;
+  letter-spacing: 0.1em;
+  padding-bottom: 0.2em;
+}
+
+input[part="page-input"] {
+  width: 3em;
+  height: 2em;
+  padding: 0 0.4em;
+  text-align: center;
+  border: 1px solid var(--ae-border-subtle);
+  border-radius: var(--ae-border-radius, var(--ae-border-radius));
+  font-size: inherit;
+  font-family: inherit;
+  color: var(--ae-color-text-main);
+  background: var(--ae-surface-base);
+  box-shadow: none;
+  -webkit-appearance: none;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+input[part="page-input"]:hover:not(:disabled) {
+  border-color: var(--ae-border-default);
+}
+
+input[part="page-input"]::-webkit-inner-spin-button,
+input[part="page-input"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+input[part="page-input"]:focus {
+  border-color: var(--ae-border-focus);
+  box-shadow: 0 0 0 2px var(--ae-focus-ring);
+}
+
+input[part="page-input"]:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+[part="page-total"] {
+  color: var(--ae-color-text-muted);
+  white-space: nowrap;
+  padding: 0 0.25em;
+  line-height: 2em;
+}
+
+/* ── Borderless variant ──────────────────────────────────────────────── */
+:host([variant='borderless']) button {
+  border-color: transparent;
+}
+
+:host([variant='borderless']) button:hover:not(:disabled) {
+  border-color: transparent;
+}
+
+:host([variant='borderless']) button.active {
+  border-color: transparent;
+}
+
+:host([variant='borderless']) input[part='page-input'] {
+  border-color: transparent;
+}
+
+:host([variant='borderless']) input[part='page-input']:hover:not(:disabled) {
+  border-color: transparent;
+}
+
+:host([variant='borderless']) input[part='page-input']:focus {
+  border-color: var(--ae-border-focus);
+}
+
+/* ── Link variant ────────────────────────────────────────────────────── */
+:host([variant='link']) button {
+  border-color: transparent;
+  background: transparent;
+}
+
+:host([variant='link']) button:hover:not(:disabled) {
+  border-color: transparent;
+  background: transparent;
+  color: var(--ae-color-primary);
+}
+
+:host([variant='link']) button:active:not(:disabled) {
+  background: transparent;
+}
+
+:host([variant='link']) button:focus-visible {
+  border-color: transparent;
+}
+
+:host([variant='link']) button.active {
+  background: transparent;
+  border-color: transparent;
+  color: var(--ae-color-primary);
+  font-weight: 600;
+}
+
+:host([variant='link']) button.active:hover:not(:disabled) {
+  background: transparent;
+  color: var(--ae-color-primary);
+}
+
+:host([variant='link']) input[part='page-input'] {
+  border-color: transparent;
+  border-bottom-color: var(--ae-border-subtle);
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
+}
+
+:host([variant='link']) input[part='page-input']:hover:not(:disabled) {
+  border-color: transparent;
+  border-bottom-color: var(--ae-border-default);
+}
+
+:host([variant='link']) input[part='page-input']:focus {
+  border-color: transparent;
+  border-bottom-color: var(--ae-border-focus);
+  box-shadow: none;
+}
+`;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
+  var j = array.length + 1, key = __decoratorStrings[k + 5];
+  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
+  var desc = (target = target.prototype, __getOwnPropDesc({ get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
+      access.get = (x) => x[name];
+      access.set = (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
+    if (it === void 0) __expectFn(it) && (desc[key] = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return desc && __defProp(target, name, desc), target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _variant_dec, _showFirstLast_dec, _simple_dec, _disabled_dec, _size_dec, _siblingCount_dec, _pageCount_dec, _total_dec, _pageSize_dec, _page_dec, _a, _init, _page, _pageSize, _total, _pageCount, _siblingCount, _size, _disabled, _simple, _showFirstLast, _variant;
+class Pagination extends (_a = aeicoComponent.AeicoComponent, _page_dec = [aeico.prop({ type: Number })], _pageSize_dec = [aeico.prop({ type: Number })], _total_dec = [aeico.prop({ type: Number })], _pageCount_dec = [aeico.prop({ type: Number })], _siblingCount_dec = [aeico.prop({ type: Number })], _size_dec = [aeico.prop({ type: String })], _disabled_dec = [aeico.prop({ type: Boolean })], _simple_dec = [aeico.prop({ type: Boolean })], _showFirstLast_dec = [aeico.prop({ type: Boolean })], _variant_dec = [aeico.prop({ type: String })], _a) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _page, __runInitializers(_init, 8, this, 1)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _pageSize, __runInitializers(_init, 12, this, 10)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _total, __runInitializers(_init, 16, this, 0)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _pageCount, __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __privateAdd(this, _siblingCount, __runInitializers(_init, 24, this, 1)), __runInitializers(_init, 27, this);
+    __privateAdd(this, _size, __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
+    __privateAdd(this, _disabled, __runInitializers(_init, 32, this, false)), __runInitializers(_init, 35, this);
+    __privateAdd(this, _simple, __runInitializers(_init, 36, this, false)), __runInitializers(_init, 39, this);
+    __privateAdd(this, _showFirstLast, __runInitializers(_init, 40, this, false)), __runInitializers(_init, 43, this);
+    __privateAdd(this, _variant, __runInitializers(_init, 44, this)), __runInitializers(_init, 47, this);
+    __publicField(this, "_simpleInput", null);
+    __publicField(this, "_handleItemClick", (e) => {
+      const btn = e.currentTarget;
+      const p = Number(btn.dataset.page);
+      if (!isNaN(p)) this._goToPage(p);
+    });
+    __publicField(this, "_handlePrevClick", () => {
+      this._goToPage(this._currentPage - 1);
+    });
+    __publicField(this, "_handleNextClick", () => {
+      this._goToPage(this._currentPage + 1);
+    });
+    __publicField(this, "_handleFirstClick", () => {
+      this._goToPage(1);
+    });
+    __publicField(this, "_handleLastClick", () => {
+      this._goToPage(this._computedPageCount);
+    });
+    __publicField(this, "_handleSimpleInputChange", (e) => {
+      const input = e.target;
+      const val = parseInt(input.value, 10);
+      if (!isNaN(val)) {
+        this._goToPage(val);
+      }
+      input.value = String(this._currentPage);
+    });
+  }
+  get _computedPageCount() {
+    if (this.pageCount != null) return Math.max(1, this.pageCount);
+    const ps = this.pageSize > 0 ? this.pageSize : 10;
+    return Math.max(1, Math.ceil(this.total / ps));
+  }
+  get _currentPage() {
+    const count = this._computedPageCount;
+    return Math.max(1, Math.min(this.page ?? 1, count));
+  }
+  _getPageItems() {
+    const count = this._computedPageCount;
+    const page = this._currentPage;
+    const sc = Math.max(0, this.siblingCount ?? 1);
+    const rangeStart = Math.max(2, page - sc);
+    const rangeEnd = Math.min(count - 1, page + sc);
+    const showLeftEllipsis = rangeStart > 2;
+    const showRightEllipsis = rangeEnd < count - 1;
+    const items = [];
+    items.push(1);
+    if (count <= 1) return items;
+    if (showLeftEllipsis) {
+      items.push("ellipsis-start");
+    } else {
+      for (let i = 2; i < rangeStart; i++) items.push(i);
+    }
+    for (let i = rangeStart; i <= rangeEnd; i++) items.push(i);
+    if (showRightEllipsis) {
+      items.push("ellipsis-end");
+    } else {
+      for (let i = rangeEnd + 1; i < count; i++) items.push(i);
+    }
+    items.push(count);
+    return items;
+  }
+  _goToPage(page) {
+    const count = this._computedPageCount;
+    const next = Math.max(1, Math.min(count, page));
+    if (next === this._currentPage) return;
+    this.page = next;
+    this.emit("change", { detail: { page: this.page } });
+  }
+  onUpdated() {
+    if (this._simpleInput) {
+      this._simpleInput.value = String(this._currentPage);
+    }
+  }
+  _renderNavBtn(name, iconName, label, disabled, onClick) {
+    const { button, slot, aeIcon } = aeico.tags;
+    button(
+      {
+        key: name,
+        part: name,
+        className: "nav-btn",
+        disabled,
+        "aria-label": label,
+        "@click": onClick
+      },
+      () => {
+        slot({ name }, () => {
+          aeIcon({ name: iconName });
+        });
+      }
+    );
+  }
+  _renderSimpleMode(page, count, disabled) {
+    this._simpleInput = aeico.tags.input({
+      key: "page-input",
+      part: "page-input",
+      type: "number",
+      min: "1",
+      max: String(count),
+      value: String(page),
+      disabled,
+      "aria-label": "Page number",
+      "@change": this._handleSimpleInputChange
+    });
+    aeico.tags.span({ key: "page-total", part: "page-total", textContent: `/ ${count}` });
+  }
+  _renderPageItems(page, disabled) {
+    for (const item of this._getPageItems()) {
+      if (item === "ellipsis-start" || item === "ellipsis-end") {
+        aeico.tags.span({
+          key: item,
+          part: "ellipsis",
+          className: "ellipsis",
+          "aria-hidden": "true",
+          textContent: "…"
+        });
+      } else {
+        const isActive = item === page;
+        aeico.tags.button({
+          key: `item-${item}`,
+          part: isActive ? "item item-active" : "item",
+          className: isActive ? "item active" : "item",
+          disabled,
+          "aria-current": isActive ? "page" : void 0,
+          "aria-label": `Page ${item}`,
+          "data-page": String(item),
+          textContent: String(item),
+          "@click": this._handleItemClick
+        });
+      }
+    }
+  }
+  render() {
+    const count = this._computedPageCount;
+    const page = this._currentPage;
+    const disabled = this.disabled;
+    const isFirst = page <= 1;
+    const isLast = page >= count;
+    return aeico.html(({ nav }) => {
+      nav({ part: "root", role: "navigation", "aria-label": "Pagination" }, () => {
+        if (this.showFirstLast)
+          this._renderNavBtn(
+            "first",
+            "chevrons-left",
+            "First page",
+            disabled || isFirst,
+            this._handleFirstClick
+          );
+        this._renderNavBtn(
+          "prev",
+          "chevron-left",
+          "Previous page",
+          disabled || isFirst,
+          this._handlePrevClick
+        );
+        if (this.simple) {
+          this._renderSimpleMode(page, count, disabled);
+        } else {
+          this._renderPageItems(page, disabled);
+        }
+        this._renderNavBtn(
+          "next",
+          "chevron-right",
+          "Next page",
+          disabled || isLast,
+          this._handleNextClick
+        );
+        if (this.showFirstLast)
+          this._renderNavBtn(
+            "last",
+            "chevrons-right",
+            "Last page",
+            disabled || isLast,
+            this._handleLastClick
+          );
+      });
+    });
+  }
+}
+_init = __decoratorStart(_a);
+_page = /* @__PURE__ */ new WeakMap();
+_pageSize = /* @__PURE__ */ new WeakMap();
+_total = /* @__PURE__ */ new WeakMap();
+_pageCount = /* @__PURE__ */ new WeakMap();
+_siblingCount = /* @__PURE__ */ new WeakMap();
+_size = /* @__PURE__ */ new WeakMap();
+_disabled = /* @__PURE__ */ new WeakMap();
+_simple = /* @__PURE__ */ new WeakMap();
+_showFirstLast = /* @__PURE__ */ new WeakMap();
+_variant = /* @__PURE__ */ new WeakMap();
+__decorateElement(_init, 4, "page", _page_dec, Pagination, _page);
+__decorateElement(_init, 4, "pageSize", _pageSize_dec, Pagination, _pageSize);
+__decorateElement(_init, 4, "total", _total_dec, Pagination, _total);
+__decorateElement(_init, 4, "pageCount", _pageCount_dec, Pagination, _pageCount);
+__decorateElement(_init, 4, "siblingCount", _siblingCount_dec, Pagination, _siblingCount);
+__decorateElement(_init, 4, "size", _size_dec, Pagination, _size);
+__decorateElement(_init, 4, "disabled", _disabled_dec, Pagination, _disabled);
+__decorateElement(_init, 4, "simple", _simple_dec, Pagination, _simple);
+__decorateElement(_init, 4, "showFirstLast", _showFirstLast_dec, Pagination, _showFirstLast);
+__decorateElement(_init, 4, "variant", _variant_dec, Pagination, _variant);
+__decoratorMetadata(_init, Pagination);
+__publicField(Pagination, "tagName", "pagination");
+__publicField(Pagination, "styles", [variables.variables, size.sizeCSS, paginationStyle]);
+Pagination.register();
+exports.Pagination = Pagination;
+//# sourceMappingURL=pagination.cjs.map

package/dist/chunks/pagination.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.cjs","sources":["../../src/pagination/pagination.ts"],"sourcesContent":["import { html, prop, tags } from 'aeico';\nimport type { InferProps } from 'aeico';\nimport AeicoComponent from '../aeico-component';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport paginationStyle from '../styles/components/pagination.css?inline';\nimport type { PaginationSize, PaginationVariant } from './defines';\nimport '../icon/icon';\n\ntype PageItem = number | 'ellipsis-start' | 'ellipsis-end';\n\n/**\n * Pagination component for navigating between pages of content.\n *\n * @prop {number} page - Current page number (1-indexed). Default: 1.\n * @prop {number} pageSize - Number of items per page. Default: 10.\n * @prop {number} total - Total number of items. Used to compute pageCount when pageCount is not set.\n * @prop {number} pageCount - Total number of pages. Overrides total/pageSize calculation when set.\n * @prop {number} siblingCount - Number of page buttons to show on each side of the current page. Default: 1.\n * @prop {'xs'|'sm'|'md'|'lg'} size - Size variant.\n * @prop {boolean} disabled - Disables all interactive controls.\n * @prop {boolean} simple - Simple mode: shows only prev/next buttons and a page number input.\n * @prop {boolean} showFirstLast - Show dedicated first-page and last-page jump buttons.\n * @prop {'borderless'|'link'} variant - Visual variant. `borderless` removes borders; `link` renders page numbers as plain text links with no borders or backgrounds.\n *\n * @event {CustomEvent<{page: number}>} change - Fired when the page changes.\n *\n * @slot prev - Custom content for the previous-page button (default: chevron-left icon).\n * @slot next - Custom content for the next-page button (default: chevron-right icon).\n * @slot first - Custom content for the first-page button (default: chevrons-left icon). Requires showFirstLast.\n * @slot last - Custom content for the last-page button (default: chevrons-right icon). Requires showFirstLast.\n *\n * @csspart root - The outer <nav> element.\n * @csspart prev - The previous-page button.\n * @csspart next - The next-page button.\n * @csspart first - The first-page button (visible when showFirstLast).\n * @csspart last - The last-page button (visible when showFirstLast).\n * @csspart item - A page number button.\n * @csspart ellipsis - An ellipsis span between page groups.\n * @csspart page-input - The page number input in simple mode.\n * @csspart page-total - The \"/ N\" label in simple mode.\n *\n * @example\n * ```html\n * <ae-pagination total=\"100\" page-size=\"10\" page=\"1\"></ae-pagination>\n * ```\n */\nclass Pagination extends AeicoComponent {\n  static tagName = 'pagination';\n\n  protected static styles = [styleVariables, sizeCSS, paginationStyle];\n\n  @prop({ type: Number })\n  accessor page: number = 1;\n\n  @prop({ type: Number })\n  accessor pageSize: number = 10;\n\n  @prop({ type: Number })\n  accessor total: number = 0;\n\n  @prop({ type: Number })\n  accessor pageCount: number | undefined;\n\n  @prop({ type: Number })\n  accessor siblingCount: number = 1;\n\n  @prop({ type: String })\n  accessor size: PaginationSize | undefined;\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor simple: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor showFirstLast: boolean = false;\n\n  @prop({ type: String })\n  accessor variant: PaginationVariant | undefined;\n\n  private _simpleInput: HTMLInputElement | null = null;\n\n  private get _computedPageCount(): number {\n    if (this.pageCount != null) return Math.max(1, this.pageCount);\n    const ps = this.pageSize > 0 ? this.pageSize : 10;\n    return Math.max(1, Math.ceil(this.total / ps));\n  }\n\n  private get _currentPage(): number {\n    const count = this._computedPageCount;\n    return Math.max(1, Math.min(this.page ?? 1, count));\n  }\n\n  private _getPageItems(): PageItem[] {\n    const count = this._computedPageCount;\n    const page = this._currentPage;\n    const sc = Math.max(0, this.siblingCount ?? 1);\n\n    const rangeStart = Math.max(2, page - sc);\n    const rangeEnd = Math.min(count - 1, page + sc);\n\n    const showLeftEllipsis = rangeStart > 2;\n    const showRightEllipsis = rangeEnd < count - 1;\n\n    const items: PageItem[] = [];\n\n    // First page always shown\n    items.push(1);\n\n    if (count <= 1) return items;\n\n    // Left side\n    if (showLeftEllipsis) {\n      items.push('ellipsis-start');\n    } else {\n      for (let i = 2; i < rangeStart; i++) items.push(i);\n    }\n\n    // Sibling range (bounded to 2..count-1)\n    for (let i = rangeStart; i <= rangeEnd; i++) items.push(i);\n\n    // Right side\n    if (showRightEllipsis) {\n      items.push('ellipsis-end');\n    } else {\n      for (let i = rangeEnd + 1; i < count; i++) items.push(i);\n    }\n\n    // Last page always shown\n    items.push(count);\n\n    return items;\n  }\n\n  private _goToPage(page: number): void {\n    const count = this._computedPageCount;\n    const next = Math.max(1, Math.min(count, page));\n    if (next === this._currentPage) return;\n    this.page = next;\n    this.emit('change', { detail: { page: this.page } });\n  }\n\n  private _handleItemClick = (e: Event): void => {\n    const btn = e.currentTarget as HTMLElement;\n    const p = Number(btn.dataset.page);\n    if (!isNaN(p)) this._goToPage(p);\n  };\n\n  private _handlePrevClick = (): void => {\n    this._goToPage(this._currentPage - 1);\n  };\n  private _handleNextClick = (): void => {\n    this._goToPage(this._currentPage + 1);\n  };\n  private _handleFirstClick = (): void => {\n    this._goToPage(1);\n  };\n  private _handleLastClick = (): void => {\n    this._goToPage(this._computedPageCount);\n  };\n\n  private _handleSimpleInputChange = (e: Event): void => {\n    const input = e.target as HTMLInputElement;\n    const val = parseInt(input.value, 10);\n    if (!isNaN(val)) {\n      this._goToPage(val);\n    }\n\n    input.value = String(this._currentPage);\n  };\n\n  protected onUpdated(): void {\n    if (this._simpleInput) {\n      this._simpleInput.value = String(this._currentPage);\n    }\n  }\n\n  private _renderNavBtn(\n    name: 'first' | 'prev' | 'next' | 'last',\n    iconName: string,\n    label: string,\n    disabled: boolean,\n    onClick: () => void,\n  ): void {\n    const { button, slot, aeIcon } = tags;\n\n    button(\n      {\n        key: name,\n        part: name,\n        className: 'nav-btn',\n        disabled,\n        'aria-label': label,\n        '@click': onClick,\n      },\n      () => {\n        slot({ name }, () => {\n          aeIcon({ name: iconName });\n        });\n      },\n    );\n  }\n\n  private _renderSimpleMode(page: number, count: number, disabled: boolean): void {\n    this._simpleInput = tags.input({\n      key: 'page-input',\n      part: 'page-input',\n      type: 'number',\n      min: '1',\n      max: String(count),\n      value: String(page),\n      disabled,\n      'aria-label': 'Page number',\n      '@change': this._handleSimpleInputChange,\n    });\n    tags.span({ key: 'page-total', part: 'page-total', textContent: `/ ${count}` });\n  }\n\n  private _renderPageItems(page: number, disabled: boolean): void {\n    for (const item of this._getPageItems()) {\n      if (item === 'ellipsis-start' || item === 'ellipsis-end') {\n        tags.span({\n          key: item,\n          part: 'ellipsis',\n          className: 'ellipsis',\n          'aria-hidden': 'true',\n          textContent: '…',\n        });\n      } else {\n        const isActive = item === page;\n        tags.button({\n          key: `item-${item}`,\n          part: isActive ? 'item item-active' : 'item',\n          className: isActive ? 'item active' : 'item',\n          disabled,\n          'aria-current': isActive ? 'page' : undefined,\n          'aria-label': `Page ${item}`,\n          'data-page': String(item),\n          textContent: String(item),\n          '@click': this._handleItemClick,\n        });\n      }\n    }\n  }\n\n  protected render() {\n    const count = this._computedPageCount;\n    const page = this._currentPage;\n    const disabled = this.disabled;\n    const isFirst = page <= 1;\n    const isLast = page >= count;\n\n    return html(({ nav }) => {\n      nav({ part: 'root', role: 'navigation', 'aria-label': 'Pagination' }, () => {\n        if (this.showFirstLast)\n          this._renderNavBtn(\n            'first',\n            'chevrons-left',\n            'First page',\n            disabled || isFirst,\n            this._handleFirstClick,\n          );\n\n        this._renderNavBtn(\n          'prev',\n          'chevron-left',\n          'Previous page',\n          disabled || isFirst,\n          this._handlePrevClick,\n        );\n\n        if (this.simple) {\n          this._renderSimpleMode(page, count, disabled);\n        } else {\n          this._renderPageItems(page, disabled);\n        }\n\n        this._renderNavBtn(\n          'next',\n          'chevron-right',\n          'Next page',\n          disabled || isLast,\n          this._handleNextClick,\n        );\n\n        if (this.showFirstLast)\n          this._renderNavBtn(\n            'last',\n            'chevrons-right',\n            'Last page',\n            disabled || isLast,\n            this._handleLastClick,\n          );\n      });\n    });\n  }\n}\n\nPagination.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-pagination': Pagination;\n  }\n}\n\nexport default Pagination;\nexport type PaginationProps = InferProps<typeof Pagination>;\n"],"names":["AeicoComponent","prop","tags","html","styleVariables","sizeCSS"],"mappings":"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"}