@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

package/fesm2022/lifecorner-angular-ui-kit-pagination.mjs

@@ -0,0 +1,343 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, output } from "@angular/core";
+import { NgClass } from "@angular/common";
+var PaginationComponent = class PaginationComponent {
+	currentPage = input(1, ...ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []);
+	totalItems = input(0, ...ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []);
+	pageSize = input(10, ...ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	maxVisiblePages = input(7, ...ngDevMode ? [{ debugName: "maxVisiblePages" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("Pagination", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	showInfo = input(false, ...ngDevMode ? [{ debugName: "showInfo" }] : /* istanbul ignore next */ []);
+	previousLabel = input("Previous", ...ngDevMode ? [{ debugName: "previousLabel" }] : /* istanbul ignore next */ []);
+	nextLabel = input("Next", ...ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []);
+	previousAriaLabel = input("Previous page", ...ngDevMode ? [{ debugName: "previousAriaLabel" }] : /* istanbul ignore next */ []);
+	nextAriaLabel = input("Next page", ...ngDevMode ? [{ debugName: "nextAriaLabel" }] : /* istanbul ignore next */ []);
+	pageAriaLabel = input("Page {page}", ...ngDevMode ? [{ debugName: "pageAriaLabel" }] : /* istanbul ignore next */ []);
+	infoText = input("Showing {first} to {last} of {total} items", ...ngDevMode ? [{ debugName: "infoText" }] : /* istanbul ignore next */ []);
+	pageChange = output();
+	totalPages = computed(() => {
+		const total = this.totalItems();
+		const size = this.pageSize();
+		return total > 0 ? Math.ceil(total / size) : 0;
+	}, ...ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []);
+	firstItemIndex = computed(() => {
+		const page = this.currentPage();
+		const size = this.pageSize();
+		return (page - 1) * size + 1;
+	}, ...ngDevMode ? [{ debugName: "firstItemIndex" }] : /* istanbul ignore next */ []);
+	lastItemIndex = computed(() => {
+		const page = this.currentPage();
+		const size = this.pageSize();
+		const total = this.totalItems();
+		const lastIndex = page * size;
+		return Math.min(lastIndex, total);
+	}, ...ngDevMode ? [{ debugName: "lastItemIndex" }] : /* istanbul ignore next */ []);
+	isFirstPage = computed(() => this.currentPage() === 1, ...ngDevMode ? [{ debugName: "isFirstPage" }] : /* istanbul ignore next */ []);
+	isLastPage = computed(() => this.currentPage() === this.totalPages(), ...ngDevMode ? [{ debugName: "isLastPage" }] : /* istanbul ignore next */ []);
+	paginationClasses = computed(() => {
+		const classes = ["lc-pagination"];
+		classes.push(`lc-pagination--${this.size()}`);
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "paginationClasses" }] : /* istanbul ignore next */ []);
+	visiblePages = computed(() => {
+		const current = this.currentPage();
+		const total = this.totalPages();
+		const maxVisible = this.maxVisiblePages();
+		if (total <= maxVisible) return Array.from({ length: total }, (_, i) => i + 1);
+		const pages = [];
+		const sidePages = Math.floor((maxVisible - 3) / 2);
+		pages.push(1);
+		if (current <= sidePages + 2) {
+			for (let i = 2; i <= maxVisible - 2; i++) pages.push(i);
+			pages.push(-1);
+			pages.push(total);
+		} else if (current >= total - sidePages - 1) {
+			pages.push(-1);
+			for (let i = total - (maxVisible - 3); i <= total; i++) pages.push(i);
+		} else {
+			pages.push(-1);
+			for (let i = current - sidePages; i <= current + sidePages; i++) if (i > 1 && i < total) pages.push(i);
+			pages.push(-1);
+			pages.push(total);
+		}
+		return pages;
+	}, ...ngDevMode ? [{ debugName: "visiblePages" }] : /* istanbul ignore next */ []);
+	goToPreviousPage() {
+		if (!this.isFirstPage()) {
+			const newPage = this.currentPage() - 1;
+			this.pageChange.emit(newPage);
+		}
+	}
+	goToNextPage() {
+		if (!this.isLastPage()) {
+			const newPage = this.currentPage() + 1;
+			this.pageChange.emit(newPage);
+		}
+	}
+	goToPage(page) {
+		if (page >= 1 && page <= this.totalPages() && page !== this.currentPage()) this.pageChange.emit(page);
+	}
+	infoLine = computed(() => this.infoText().replace("{first}", String(this.firstItemIndex())).replace("{last}", String(this.lastItemIndex())).replace("{total}", String(this.totalItems())), ...ngDevMode ? [{ debugName: "infoLine" }] : /* istanbul ignore next */ []);
+	getPageAriaLabel(page) {
+		return this.pageAriaLabel().replace("{page}", String(page));
+	}
+	isCurrentPage(page) {
+		return page === this.currentPage();
+	}
+	isEllipsis(page) {
+		return page === -1;
+	}
+	shouldRender() {
+		return this.totalPages() > 1;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: PaginationComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: PaginationComponent,
+		isStandalone: true,
+		selector: "lc-pagination",
+		inputs: {
+			currentPage: {
+				classPropertyName: "currentPage",
+				publicName: "currentPage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			totalItems: {
+				classPropertyName: "totalItems",
+				publicName: "totalItems",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			pageSize: {
+				classPropertyName: "pageSize",
+				publicName: "pageSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxVisiblePages: {
+				classPropertyName: "maxVisiblePages",
+				publicName: "maxVisiblePages",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showInfo: {
+				classPropertyName: "showInfo",
+				publicName: "showInfo",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			previousLabel: {
+				classPropertyName: "previousLabel",
+				publicName: "previousLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			nextLabel: {
+				classPropertyName: "nextLabel",
+				publicName: "nextLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			previousAriaLabel: {
+				classPropertyName: "previousAriaLabel",
+				publicName: "previousAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			nextAriaLabel: {
+				classPropertyName: "nextAriaLabel",
+				publicName: "nextAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			pageAriaLabel: {
+				classPropertyName: "pageAriaLabel",
+				publicName: "pageAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			infoText: {
+				classPropertyName: "infoText",
+				publicName: "infoText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { pageChange: "pageChange" },
+		ngImport: i0,
+		template: "@if (shouldRender()) {\n  <nav [attr.aria-label]=\"ariaLabel()\">\n    <div [ngClass]=\"paginationClasses()\">\n      <!-- Previous Button -->\n      <button\n        type=\"button\"\n        class=\"lc-pagination__button lc-pagination__button--prev\"\n        [disabled]=\"isFirstPage()\"\n        [attr.aria-label]=\"previousAriaLabel()\"\n        (click)=\"goToPreviousPage()\"\n      >\n        <svg class=\"lc-pagination__icon\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5L8.25 12l7.5-7.5\" />\n        </svg>\n        <span class=\"lc-pagination__button-text\">{{ previousLabel() }}</span>\n      </button>\n\n      <!-- Page Numbers -->\n      <div class=\"lc-pagination__pages\">\n        @for (page of visiblePages(); track $index) {\n          @if (isEllipsis(page)) {\n            <span class=\"lc-pagination__ellipsis\" aria-hidden=\"true\">\n              &hellip;\n            </span>\n          } @else {\n            <button\n              type=\"button\"\n              class=\"lc-pagination__button lc-pagination__button--page\"\n              [class.lc-pagination__button--active]=\"isCurrentPage(page)\"\n              [attr.aria-label]=\"getPageAriaLabel(page)\"\n              [attr.aria-current]=\"isCurrentPage(page) ? 'page' : null\"\n              (click)=\"goToPage(page)\"\n            >\n              {{ page }}\n            </button>\n          }\n        }\n      </div>\n\n      <!-- Next Button -->\n      <button\n        type=\"button\"\n        class=\"lc-pagination__button lc-pagination__button--next\"\n        [disabled]=\"isLastPage()\"\n        [attr.aria-label]=\"nextAriaLabel()\"\n        (click)=\"goToNextPage()\"\n      >\n        <span class=\"lc-pagination__button-text\">{{ nextLabel() }}</span>\n        <svg class=\"lc-pagination__icon\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\" />\n        </svg>\n      </button>\n    </div>\n\n    <!-- Optional Info Text -->\n    @if (showInfo()) {\n      <div class=\"lc-pagination__info\">{{ infoLine() }}</div>\n    }\n  </nav>\n}\n",
+		styles: [".lc-pagination{display:flex;align-items:center;justify-content:center;gap:var(--lc-density-gap-sm, var(--spacing-2))}.lc-pagination--sm{font-size:var(--font-size-xs)}.lc-pagination--sm .lc-pagination__button{min-width:1.75rem;height:1.75rem;padding:0 var(--spacing-1)}.lc-pagination--sm .lc-pagination__icon{width:.875rem;height:.875rem}.lc-pagination--sm .lc-pagination__button-text{font-size:var(--font-size-xs)}.lc-pagination--md{font-size:var(--font-size-sm)}.lc-pagination--md .lc-pagination__button{min-width:2.25rem;height:2.25rem;padding:0 var(--spacing-2)}.lc-pagination--md .lc-pagination__icon{width:1rem;height:1rem}.lc-pagination--md .lc-pagination__button-text{font-size:var(--font-size-sm)}.lc-pagination--lg{font-size:var(--font-size-base)}.lc-pagination--lg .lc-pagination__button{min-width:2.75rem;height:2.75rem;padding:0 var(--spacing-3)}.lc-pagination--lg .lc-pagination__icon{width:1.25rem;height:1.25rem}.lc-pagination--lg .lc-pagination__button-text{font-size:var(--font-size-base)}.lc-pagination__button{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-1);border:1px solid var(--color-border);background-color:var(--color-surface-2);color:var(--color-text-secondary);border-radius:var(--border-radius-md);font-weight:500;cursor:pointer;transition:color var(--animation-duration-base) var(--animation-timing-ease),background-color var(--animation-duration-base) var(--animation-timing-ease),border-color var(--animation-duration-base) var(--animation-timing-ease),transform var(--animation-duration-base) var(--animation-timing-ease);-webkit-user-select:none;user-select:none}.lc-pagination__button:hover:not(:disabled){background-color:var(--color-surface-hover);border-color:var(--color-border-strong);color:var(--color-text-primary)}.lc-pagination__button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-pagination__button:active:not(:disabled){background-color:var(--color-surface-selected);transform:translateY(1px)}.lc-pagination__button:disabled{opacity:.5;cursor:not-allowed}.lc-pagination__button--active{background-color:var(--color-primary-fill);border-color:var(--color-primary-fill);color:var(--color-on-primary);font-weight:600}.lc-pagination__button--active:hover{background-color:var(--color-primary-fill-hover);border-color:var(--color-primary-fill-hover);color:var(--color-on-primary)}@media(max-width:640px){.lc-pagination__button-text:not(.lc-pagination__button--active .lc-pagination__button-text){display:none}}.lc-pagination__icon{flex-shrink:0}.lc-pagination__pages{display:flex;align-items:center;gap:var(--lc-density-gap-xs, var(--spacing-1))}.lc-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.lc-pagination__info{text-align:center;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-top:var(--spacing-3)}@media(max-width:640px){.lc-pagination{gap:var(--spacing-1)}.lc-pagination__pages{gap:var(--spacing-0-5)}.lc-pagination__button--page:not(.lc-pagination__button--active){display:none}.lc-pagination__button--page:not(.lc-pagination__button--active):first-child,.lc-pagination__button--page:not(.lc-pagination__button--active):last-child{display:inline-flex}.lc-pagination__button--page:not(.lc-pagination__button--active):nth-child(n-1):nth-child(-n+1){display:inline-flex}}@media(prefers-reduced-motion:reduce){.lc-pagination__button{transition:none}}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: NgClass,
+			selector: "[ngClass]",
+			inputs: ["class", "ngClass"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: PaginationComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-pagination",
+			standalone: true,
+			imports: [NgClass],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "@if (shouldRender()) {\n  <nav [attr.aria-label]=\"ariaLabel()\">\n    <div [ngClass]=\"paginationClasses()\">\n      <!-- Previous Button -->\n      <button\n        type=\"button\"\n        class=\"lc-pagination__button lc-pagination__button--prev\"\n        [disabled]=\"isFirstPage()\"\n        [attr.aria-label]=\"previousAriaLabel()\"\n        (click)=\"goToPreviousPage()\"\n      >\n        <svg class=\"lc-pagination__icon\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5L8.25 12l7.5-7.5\" />\n        </svg>\n        <span class=\"lc-pagination__button-text\">{{ previousLabel() }}</span>\n      </button>\n\n      <!-- Page Numbers -->\n      <div class=\"lc-pagination__pages\">\n        @for (page of visiblePages(); track $index) {\n          @if (isEllipsis(page)) {\n            <span class=\"lc-pagination__ellipsis\" aria-hidden=\"true\">\n              &hellip;\n            </span>\n          } @else {\n            <button\n              type=\"button\"\n              class=\"lc-pagination__button lc-pagination__button--page\"\n              [class.lc-pagination__button--active]=\"isCurrentPage(page)\"\n              [attr.aria-label]=\"getPageAriaLabel(page)\"\n              [attr.aria-current]=\"isCurrentPage(page) ? 'page' : null\"\n              (click)=\"goToPage(page)\"\n            >\n              {{ page }}\n            </button>\n          }\n        }\n      </div>\n\n      <!-- Next Button -->\n      <button\n        type=\"button\"\n        class=\"lc-pagination__button lc-pagination__button--next\"\n        [disabled]=\"isLastPage()\"\n        [attr.aria-label]=\"nextAriaLabel()\"\n        (click)=\"goToNextPage()\"\n      >\n        <span class=\"lc-pagination__button-text\">{{ nextLabel() }}</span>\n        <svg class=\"lc-pagination__icon\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\" />\n        </svg>\n      </button>\n    </div>\n\n    <!-- Optional Info Text -->\n    @if (showInfo()) {\n      <div class=\"lc-pagination__info\">{{ infoLine() }}</div>\n    }\n  </nav>\n}\n",
+			styles: [".lc-pagination{display:flex;align-items:center;justify-content:center;gap:var(--lc-density-gap-sm, var(--spacing-2))}.lc-pagination--sm{font-size:var(--font-size-xs)}.lc-pagination--sm .lc-pagination__button{min-width:1.75rem;height:1.75rem;padding:0 var(--spacing-1)}.lc-pagination--sm .lc-pagination__icon{width:.875rem;height:.875rem}.lc-pagination--sm .lc-pagination__button-text{font-size:var(--font-size-xs)}.lc-pagination--md{font-size:var(--font-size-sm)}.lc-pagination--md .lc-pagination__button{min-width:2.25rem;height:2.25rem;padding:0 var(--spacing-2)}.lc-pagination--md .lc-pagination__icon{width:1rem;height:1rem}.lc-pagination--md .lc-pagination__button-text{font-size:var(--font-size-sm)}.lc-pagination--lg{font-size:var(--font-size-base)}.lc-pagination--lg .lc-pagination__button{min-width:2.75rem;height:2.75rem;padding:0 var(--spacing-3)}.lc-pagination--lg .lc-pagination__icon{width:1.25rem;height:1.25rem}.lc-pagination--lg .lc-pagination__button-text{font-size:var(--font-size-base)}.lc-pagination__button{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-1);border:1px solid var(--color-border);background-color:var(--color-surface-2);color:var(--color-text-secondary);border-radius:var(--border-radius-md);font-weight:500;cursor:pointer;transition:color var(--animation-duration-base) var(--animation-timing-ease),background-color var(--animation-duration-base) var(--animation-timing-ease),border-color var(--animation-duration-base) var(--animation-timing-ease),transform var(--animation-duration-base) var(--animation-timing-ease);-webkit-user-select:none;user-select:none}.lc-pagination__button:hover:not(:disabled){background-color:var(--color-surface-hover);border-color:var(--color-border-strong);color:var(--color-text-primary)}.lc-pagination__button:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-pagination__button:active:not(:disabled){background-color:var(--color-surface-selected);transform:translateY(1px)}.lc-pagination__button:disabled{opacity:.5;cursor:not-allowed}.lc-pagination__button--active{background-color:var(--color-primary-fill);border-color:var(--color-primary-fill);color:var(--color-on-primary);font-weight:600}.lc-pagination__button--active:hover{background-color:var(--color-primary-fill-hover);border-color:var(--color-primary-fill-hover);color:var(--color-on-primary)}@media(max-width:640px){.lc-pagination__button-text:not(.lc-pagination__button--active .lc-pagination__button-text){display:none}}.lc-pagination__icon{flex-shrink:0}.lc-pagination__pages{display:flex;align-items:center;gap:var(--lc-density-gap-xs, var(--spacing-1))}.lc-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.lc-pagination__info{text-align:center;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-top:var(--spacing-3)}@media(max-width:640px){.lc-pagination{gap:var(--spacing-1)}.lc-pagination__pages{gap:var(--spacing-0-5)}.lc-pagination__button--page:not(.lc-pagination__button--active){display:none}.lc-pagination__button--page:not(.lc-pagination__button--active):first-child,.lc-pagination__button--page:not(.lc-pagination__button--active):last-child{display:inline-flex}.lc-pagination__button--page:not(.lc-pagination__button--active):nth-child(n-1):nth-child(-n+1){display:inline-flex}}@media(prefers-reduced-motion:reduce){.lc-pagination__button{transition:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		currentPage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "currentPage",
+				required: false
+			}]
+		}],
+		totalItems: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "totalItems",
+				required: false
+			}]
+		}],
+		pageSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pageSize",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		maxVisiblePages: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxVisiblePages",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		showInfo: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showInfo",
+				required: false
+			}]
+		}],
+		previousLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previousLabel",
+				required: false
+			}]
+		}],
+		nextLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nextLabel",
+				required: false
+			}]
+		}],
+		previousAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previousAriaLabel",
+				required: false
+			}]
+		}],
+		nextAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nextAriaLabel",
+				required: false
+			}]
+		}],
+		pageAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pageAriaLabel",
+				required: false
+			}]
+		}],
+		infoText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "infoText",
+				required: false
+			}]
+		}],
+		pageChange: [{
+			type: i0.Output,
+			args: ["pageChange"]
+		}]
+	}
+});
+export { PaginationComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-pagination.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-pagination.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-pagination.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/pagination/pagination.component.ts","../../../../libs/angular-ui-kit/src/lib/pagination/pagination.component.html"],"sourcesContent":["import {\n  Component,\n  input,\n  output,\n  computed,\n  ChangeDetectionStrategy,\n} from '@angular/core';\nimport { NgClass } from '@angular/common';\n\nexport type PaginationSize = 'sm' | 'md' | 'lg';\n\n/**\n * Pagination component for navigating through pages of content.\n *\n * Features:\n * - Configurable page size\n * - Previous/Next navigation\n * - Direct page number access\n * - Ellipsis for large page ranges\n * - Size variants (sm, md, lg)\n * - Accessible with ARIA attributes\n * - Optional item count display\n * - All UI strings overridable via inputs (i18n)\n *\n * @example\n * ```html\n * <lc-pagination\n *   [currentPage]=\"currentPage\"\n *   [totalItems]=\"totalItems\"\n *   [pageSize]=\"10\"\n *   (pageChange)=\"onPageChange($event)\"\n * ></lc-pagination>\n * ```\n */\n@Component({\n  selector: 'lc-pagination',\n  standalone: true,\n  imports: [NgClass],\n  templateUrl: './pagination.component.html',\n  styleUrls: ['./pagination.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PaginationComponent {\n  readonly currentPage = input(1);\n  readonly totalItems = input(0);\n  readonly pageSize = input(10);\n  readonly size = input<PaginationSize>('md');\n  readonly maxVisiblePages = input(7);\n  readonly ariaLabel = input('Pagination');\n  readonly showInfo = input(false);\n\n  // ── UI strings (override for i18n) ──────────────────────────────────────\n  /** Visible text of the previous button */\n  readonly previousLabel = input('Previous');\n  /** Visible text of the next button */\n  readonly nextLabel = input('Next');\n  /** Accessible name of the previous button (the visible text is hidden on small screens) */\n  readonly previousAriaLabel = input('Previous page');\n  /** Accessible name of the next button */\n  readonly nextAriaLabel = input('Next page');\n  /** Accessible name of a page button; `{page}` is replaced with the page number */\n  readonly pageAriaLabel = input('Page {page}');\n  /**\n   * Info line shown when `showInfo` is true; `{first}`, `{last}` and `{total}`\n   * are replaced with the item range and total.\n   */\n  readonly infoText = input('Showing {first} to {last} of {total} items');\n\n  readonly pageChange = output<number>();\n\n  // Computed properties\n  totalPages = computed(() => {\n    const total = this.totalItems();\n    const size = this.pageSize();\n    return total > 0 ? Math.ceil(total / size) : 0;\n  });\n\n  firstItemIndex = computed(() => {\n    const page = this.currentPage();\n    const size = this.pageSize();\n    return (page - 1) * size + 1;\n  });\n\n  lastItemIndex = computed(() => {\n    const page = this.currentPage();\n    const size = this.pageSize();\n    const total = this.totalItems();\n    const lastIndex = page * size;\n    return Math.min(lastIndex, total);\n  });\n\n  isFirstPage = computed(() => this.currentPage() === 1);\n\n  isLastPage = computed(() => this.currentPage() === this.totalPages());\n\n  paginationClasses = computed(() => {\n    const classes = ['lc-pagination'];\n    classes.push(`lc-pagination--${this.size()}`);\n    return classes.join(' ');\n  });\n\n  /**\n   * Calculate visible page numbers with ellipsis support\n   * Returns an array where -1 represents an ellipsis\n   */\n  visiblePages = computed(() => {\n    const current = this.currentPage();\n    const total = this.totalPages();\n    const maxVisible = this.maxVisiblePages();\n\n    if (total <= maxVisible) {\n      // Show all pages if total is less than max visible\n      return Array.from({ length: total }, (_, i) => i + 1);\n    }\n\n    const pages: number[] = [];\n    const sidePages = Math.floor((maxVisible - 3) / 2); // Reserve spots for first, last, and ellipsis\n\n    // Always show first page\n    pages.push(1);\n\n    if (current <= sidePages + 2) {\n      // Near the start: show 1, 2, 3, 4, 5, ..., last\n      for (let i = 2; i <= maxVisible - 2; i++) {\n        pages.push(i);\n      }\n      pages.push(-1); // Ellipsis\n      pages.push(total);\n    } else if (current >= total - sidePages - 1) {\n      // Near the end: show 1, ..., n-4, n-3, n-2, n-1, n\n      pages.push(-1); // Ellipsis\n      for (let i = total - (maxVisible - 3); i <= total; i++) {\n        pages.push(i);\n      }\n    } else {\n      // In the middle: show 1, ..., current-1, current, current+1, ..., last\n      pages.push(-1); // Left ellipsis\n      for (let i = current - sidePages; i <= current + sidePages; i++) {\n        if (i > 1 && i < total) {\n          pages.push(i);\n        }\n      }\n      pages.push(-1); // Right ellipsis\n      pages.push(total);\n    }\n\n    return pages;\n  });\n\n  // Navigation methods\n  goToPreviousPage(): void {\n    if (!this.isFirstPage()) {\n      const newPage = this.currentPage() - 1;\n      this.pageChange.emit(newPage);\n    }\n  }\n\n  goToNextPage(): void {\n    if (!this.isLastPage()) {\n      const newPage = this.currentPage() + 1;\n      this.pageChange.emit(newPage);\n    }\n  }\n\n  goToPage(page: number): void {\n    if (page >= 1 && page <= this.totalPages() && page !== this.currentPage()) {\n      this.pageChange.emit(page);\n    }\n  }\n\n  /** Resolved info line (`infoText` with placeholders filled in) */\n  readonly infoLine = computed(() =>\n    this.infoText()\n      .replace('{first}', String(this.firstItemIndex()))\n      .replace('{last}', String(this.lastItemIndex()))\n      .replace('{total}', String(this.totalItems())),\n  );\n\n  /** Accessible name for the button of `page` */\n  getPageAriaLabel(page: number): string {\n    return this.pageAriaLabel().replace('{page}', String(page));\n  }\n\n  // Helper methods\n  isCurrentPage(page: number): boolean {\n    return page === this.currentPage();\n  }\n\n  isEllipsis(page: number): boolean {\n    return page === -1;\n  }\n\n  shouldRender(): boolean {\n    const total = this.totalPages();\n    return total > 1;\n  }\n}\n","@if (shouldRender()) {\n  <nav [attr.aria-label]=\"ariaLabel()\">\n    <div [ngClass]=\"paginationClasses()\">\n      <!-- Previous Button -->\n      <button\n        type=\"button\"\n        class=\"lc-pagination__button lc-pagination__button--prev\"\n        [disabled]=\"isFirstPage()\"\n        [attr.aria-label]=\"previousAriaLabel()\"\n        (click)=\"goToPreviousPage()\"\n      >\n        <svg class=\"lc-pagination__icon\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5L8.25 12l7.5-7.5\" />\n        </svg>\n        <span class=\"lc-pagination__button-text\">{{ previousLabel() }}</span>\n      </button>\n\n      <!-- Page Numbers -->\n      <div class=\"lc-pagination__pages\">\n        @for (page of visiblePages(); track $index) {\n          @if (isEllipsis(page)) {\n            <span class=\"lc-pagination__ellipsis\" aria-hidden=\"true\">\n              &hellip;\n            </span>\n          } @else {\n            <button\n              type=\"button\"\n              class=\"lc-pagination__button lc-pagination__button--page\"\n              [class.lc-pagination__button--active]=\"isCurrentPage(page)\"\n              [attr.aria-label]=\"getPageAriaLabel(page)\"\n              [attr.aria-current]=\"isCurrentPage(page) ? 'page' : null\"\n              (click)=\"goToPage(page)\"\n            >\n              {{ page }}\n            </button>\n          }\n        }\n      </div>\n\n      <!-- Next Button -->\n      <button\n        type=\"button\"\n        class=\"lc-pagination__button lc-pagination__button--next\"\n        [disabled]=\"isLastPage()\"\n        [attr.aria-label]=\"nextAriaLabel()\"\n        (click)=\"goToNextPage()\"\n      >\n        <span class=\"lc-pagination__button-text\">{{ nextLabel() }}</span>\n        <svg class=\"lc-pagination__icon\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\" />\n        </svg>\n      </button>\n    </div>\n\n    <!-- Optional Info Text -->\n    @if (showInfo()) {\n      <div class=\"lc-pagination__info\">{{ infoLine() }}</div>\n    }\n  </nav>\n}\n"],"mappings":"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"}