@salesforce/ui-bundle-template-base-angular-app 11.60.0 → 11.62.0

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/input-group/src/lib/hlm-input-group-addon.ts

@@ -0,0 +1,40 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const inputGroupAddonVariants = cva(
+	"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] flex cursor-text items-center justify-center select-none",
+	{
+		variants: {
+			align: {
+				'inline-start': 'ps-2 has-[>button]:ms-[-0.3rem] has-[>kbd]:ms-[-0.15rem] order-first',
+				'inline-end': 'pe-2 has-[>button]:me-[-0.3rem] has-[>kbd]:me-[-0.15rem] order-last',
+				'block-start':
+					'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
+				'block-end':
+					'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',
+			},
+		},
+		defaultVariants: {
+			align: 'inline-start',
+		},
+	},
+);
+
+type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;
+
+@Directive({
+	selector: '[hlmInputGroupAddon],hlm-input-group-addon',
+	host: {
+		role: 'group',
+		'data-slot': 'input-group-addon',
+		'[attr.data-align]': 'align()',
+	},
+})
+export class HlmInputGroupAddon {
+	public readonly align = input<InputGroupAddonVariants['align']>('inline-start');
+
+	constructor() {
+		classes(() => inputGroupAddonVariants({ align: this.align() }));
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/input-group/src/lib/hlm-input-group-button.ts

@@ -0,0 +1,47 @@
+import { Directive, input } from '@angular/core';
+import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/styles/button';
+import { classes } from '@spartan-ng/styles/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const inputGroupButtonVariants = cva('gap-2 text-sm flex items-center shadow-none', {
+	variants: {
+		size: {
+			xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)]",
+			sm: '',
+			'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>ng-icon]:p-0',
+			'icon-sm': 'size-8 p-0 has-[>ng-icon]:p-0',
+		},
+	},
+	defaultVariants: {
+		size: 'xs',
+	},
+});
+
+type InputGroupButtonVariants = VariantProps<typeof inputGroupButtonVariants>;
+
+@Directive({
+	selector: 'button[hlmInputGroupButton]',
+	providers: [
+		provideBrnButtonConfig({
+			variant: 'ghost',
+		}),
+	],
+	hostDirectives: [
+		{
+			directive: HlmButton,
+			inputs: ['variant'],
+		},
+	],
+	host: {
+		'[attr.data-size]': 'size()',
+		'[type]': 'type()',
+	},
+})
+export class HlmInputGroupButton {
+	public readonly size = input<InputGroupButtonVariants['size']>('xs');
+	public readonly type = input<'button' | 'submit' | 'reset'>('button');
+
+	constructor() {
+		classes(() => inputGroupButtonVariants({ size: this.size() }));
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/input-group/src/lib/hlm-input-group-input.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { HlmInput } from '@spartan-ng/styles/input';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: 'input[hlmInputGroupInput]',
+	hostDirectives: [HlmInput],
+	host: { 'data-slot': 'input-group-control' },
+})
+export class HlmInputGroupInput {
+	constructor() {
+		classes(
+			() =>
+				'rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent data-[matches-spartan-invalid=true]:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1',
+		);
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/input-group/src/lib/hlm-input-group-text.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmInputGroupText],hlm-input-group-text',
+})
+export class HlmInputGroupText {
+	constructor() {
+		classes(
+			() =>
+				"text-muted-foreground gap-2 text-sm [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] flex items-center [&_ng-icon]:pointer-events-none",
+		);
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/input-group/src/lib/hlm-input-group.ts

@@ -0,0 +1,18 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmInputGroup],hlm-input-group',
+	host: {
+		'data-slot': 'input-group',
+		role: 'group',
+	},
+})
+export class HlmInputGroup {
+	constructor() {
+		classes(
+			() =>
+				'border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/20 has-[[data-slot][data-matches-spartan-invalid=true]]:border-destructive dark:has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/40 has-[[data-slot=input-group-control]:disabled]:bg-input/50 dark:has-[[data-slot=input-group-control]:disabled]:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:disabled]:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',
+		);
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/label/label.html

@@ -0,0 +1,11 @@
+<!-- Label: Spartan Helm demo — mirrors ui/label/label.html usage -->
+<div class="space-y-6 p-4">
+	<div class="space-y-2">
+		<label hlmLabel for="hlm-demo-input-1">Default Label</label>
+		<input id="hlm-demo-input-1" type="text" class="border rounded px-2 py-1 text-sm" />
+	</div>
+
+	<div class="space-y-2">
+		<label hlmLabel>Label without for</label>
+	</div>
+</div>

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/label/src/index.ts

@@ -0,0 +1,5 @@
+import { HlmLabel } from './lib/hlm-label';
+
+export * from './lib/hlm-label';
+
+export const HlmLabelImports = [HlmLabel] as const;

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/label/src/lib/hlm-label.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { BrnLabel } from '@spartan-ng/brain/label';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmLabel]',
+	hostDirectives: [{ directive: BrnLabel, inputs: ['id', 'for'] }],
+	host: { 'data-slot': 'label' },
+})
+export class HlmLabel {
+	constructor() {
+		classes(
+			() =>
+				'gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed',
+		);
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/pagination/src/index.ts

@@ -0,0 +1,31 @@
+import { HlmNumberedPagination } from './lib/hlm-numbered-pagination';
+import { HlmNumberedPaginationQueryParams } from './lib/hlm-numbered-pagination-query-params';
+import { HlmPagination } from './lib/hlm-pagination';
+import { HlmPaginationContent } from './lib/hlm-pagination-content';
+import { HlmPaginationEllipsis } from './lib/hlm-pagination-ellipsis';
+import { HlmPaginationItem } from './lib/hlm-pagination-item';
+import { HlmPaginationLink } from './lib/hlm-pagination-link';
+import { HlmPaginationNext } from './lib/hlm-pagination-next';
+import { HlmPaginationPrevious } from './lib/hlm-pagination-previous';
+
+export * from './lib/hlm-numbered-pagination';
+export * from './lib/hlm-numbered-pagination-query-params';
+export * from './lib/hlm-pagination';
+export * from './lib/hlm-pagination-content';
+export * from './lib/hlm-pagination-ellipsis';
+export * from './lib/hlm-pagination-item';
+export * from './lib/hlm-pagination-link';
+export * from './lib/hlm-pagination-next';
+export * from './lib/hlm-pagination-previous';
+
+export const HlmPaginationImports = [
+	HlmPagination,
+	HlmPaginationContent,
+	HlmPaginationItem,
+	HlmPaginationLink,
+	HlmPaginationPrevious,
+	HlmPaginationNext,
+	HlmPaginationEllipsis,
+	HlmNumberedPagination,
+	HlmNumberedPaginationQueryParams,
+] as const;

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/pagination/src/lib/hlm-numbered-pagination-query-params.ts

@@ -0,0 +1,191 @@
+import type { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import {
+	booleanAttribute,
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	input,
+	model,
+	numberAttribute,
+	untracked,
+} from '@angular/core';
+import { HlmSelectImports } from '@spartan-ng/styles/select';
+import { classes } from '@spartan-ng/styles/utils';
+import { createPageArray, outOfBoundCorrection } from './hlm-numbered-pagination';
+import { HlmPagination } from './hlm-pagination';
+import { HlmPaginationContent } from './hlm-pagination-content';
+import { HlmPaginationEllipsis } from './hlm-pagination-ellipsis';
+import { HlmPaginationItem } from './hlm-pagination-item';
+import { HlmPaginationLink } from './hlm-pagination-link';
+import { HlmPaginationNext } from './hlm-pagination-next';
+import { HlmPaginationPrevious } from './hlm-pagination-previous';
+
+@Component({
+	selector: 'hlm-numbered-pagination-query-params',
+	imports: [
+		HlmPagination,
+		HlmPaginationContent,
+		HlmPaginationItem,
+		HlmPaginationPrevious,
+		HlmPaginationNext,
+		HlmPaginationLink,
+		HlmPaginationEllipsis,
+		HlmSelectImports,
+	],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<div class="flex items-center gap-1 text-sm text-nowrap text-gray-600">
+			<b>{{ totalItems() }}</b>
+			total items |
+			<b>{{ _lastPageNumber() }}</b>
+			pages
+		</div>
+
+		<nav hlmPagination>
+			<ul hlmPaginationContent>
+				@if (showEdges() && !_isFirstPageActive()) {
+					<li hlmPaginationItem>
+						<hlm-pagination-previous
+							[link]="link()"
+							[queryParams]="{ page: currentPage() - 1 }"
+							queryParamsHandling="merge"
+						/>
+					</li>
+				}
+
+				@for (page of _pages(); track page) {
+					<li hlmPaginationItem>
+						@if (page === '...') {
+							<hlm-pagination-ellipsis />
+						} @else {
+							<a
+								hlmPaginationLink
+								[link]="currentPage() !== page ? link() : undefined"
+								[queryParams]="{ page }"
+								queryParamsHandling="merge"
+								[isActive]="currentPage() === page"
+							>
+								{{ page }}
+							</a>
+						}
+					</li>
+				}
+
+				@if (showEdges() && !_isLastPageActive()) {
+					<li hlmPaginationItem>
+						<hlm-pagination-next
+							[link]="link()"
+							[queryParams]="{ page: currentPage() + 1 }"
+							queryParamsHandling="merge"
+						/>
+					</li>
+				}
+			</ul>
+		</nav>
+
+		<!-- Show Page Size selector -->
+		<hlm-select [(value)]="itemsPerPage" class="ml-auto">
+			<hlm-select-trigger class="w-fit">
+				<hlm-select-value />
+			</hlm-select-trigger>
+			<hlm-select-content *hlmSelectPortal>
+				<hlm-select-group>
+					@for (pageSize of _pageSizesWithCurrent(); track pageSize) {
+						<hlm-select-item [value]="pageSize">{{ pageSize }}</hlm-select-item>
+					}
+				</hlm-select-group>
+			</hlm-select-content>
+		</hlm-select>
+	`,
+})
+export class HlmNumberedPaginationQueryParams {
+	/**
+	 * The current (active) page.
+	 */
+	public readonly currentPage = model.required<number>();
+
+	/**
+	 * The number of items per paginated page.
+	 */
+	public readonly itemsPerPage = model.required<number>();
+
+	/**
+	 * The total number of items in the collection. Only useful when
+	 * doing server-side paging, where the collection size is limited
+	 * to a single page returned by the server API.
+	 */
+	public readonly totalItems = input.required<number, NumberInput>({
+		transform: numberAttribute,
+	});
+
+	/**
+	 * The URL path to use for the pagination links.
+	 * Defaults to '.' (current path).
+	 */
+	public readonly link = input<string>('.');
+
+	/**
+	 * The number of page links to show.
+	 */
+	public readonly maxSize = input<number, NumberInput>(7, {
+		transform: numberAttribute,
+	});
+
+	/**
+	 * Show the first and last page buttons.
+	 */
+	public readonly showEdges = input<boolean, BooleanInput>(true, {
+		transform: booleanAttribute,
+	});
+
+	/**
+	 * The page sizes to show.
+	 * Defaults to [10, 20, 50, 100]
+	 */
+	public readonly pageSizes = input<number[]>([10, 20, 50, 100]);
+
+	protected readonly _pageSizesWithCurrent = computed(() => {
+		const pageSizes = this.pageSizes();
+		return pageSizes.includes(this.itemsPerPage())
+			? pageSizes // if current page size is included, return the same array
+			: [...pageSizes, this.itemsPerPage()].sort((a, b) => a - b); // otherwise, add current page size and sort the array
+	});
+
+	protected readonly _isFirstPageActive = computed(() => this.currentPage() === 1);
+	protected readonly _isLastPageActive = computed(
+		() => this.currentPage() === this._lastPageNumber(),
+	);
+
+	protected readonly _lastPageNumber = computed(() => {
+		if (this.totalItems() < 1) {
+			// when there are 0 or fewer (an error case) items, there are no "pages" as such,
+			// but it makes sense to consider a single, empty page as the last page.
+			return 1;
+		}
+		return Math.ceil(this.totalItems() / this.itemsPerPage());
+	});
+
+	protected readonly _pages = computed(() => {
+		const correctedCurrentPage = outOfBoundCorrection(
+			this.totalItems(),
+			this.itemsPerPage(),
+			this.currentPage(),
+		);
+
+		if (correctedCurrentPage !== this.currentPage()) {
+			// update the current page
+			untracked(() => this.currentPage.set(correctedCurrentPage));
+		}
+
+		return createPageArray(
+			correctedCurrentPage,
+			this.itemsPerPage(),
+			this.totalItems(),
+			this.maxSize(),
+		);
+	});
+
+	constructor() {
+		classes(() => 'flex items-center justify-between gap-2 px-4 py-2');
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/pagination/src/lib/hlm-numbered-pagination.ts

@@ -0,0 +1,290 @@
+import type { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	booleanAttribute,
+	computed,
+	input,
+	model,
+	numberAttribute,
+	untracked,
+} from '@angular/core';
+import { HlmSelectImports } from '@spartan-ng/styles/select';
+import { HlmPagination } from './hlm-pagination';
+import { HlmPaginationContent } from './hlm-pagination-content';
+import { HlmPaginationEllipsis } from './hlm-pagination-ellipsis';
+import { HlmPaginationItem } from './hlm-pagination-item';
+import { HlmPaginationLink } from './hlm-pagination-link';
+import { HlmPaginationNext } from './hlm-pagination-next';
+import { HlmPaginationPrevious } from './hlm-pagination-previous';
+
+@Component({
+	selector: 'hlm-numbered-pagination',
+	imports: [
+		HlmPagination,
+		HlmPaginationContent,
+		HlmPaginationItem,
+		HlmPaginationPrevious,
+		HlmPaginationNext,
+		HlmPaginationLink,
+		HlmPaginationEllipsis,
+		HlmSelectImports,
+	],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<div class="flex items-center justify-between gap-2 px-4 py-2">
+			<div class="flex items-center gap-1 text-sm text-nowrap text-gray-600">
+				<b>{{ totalItems() }}</b>
+				total items |
+				<b>{{ _lastPageNumber() }}</b>
+				pages
+			</div>
+
+			<nav hlmPagination>
+				<ul hlmPaginationContent>
+					@if (showEdges() && !_isFirstPageActive()) {
+						<li hlmPaginationItem (click)="goToPrevious()">
+							<hlm-pagination-previous />
+						</li>
+					}
+
+					@for (page of _pages(); track page) {
+						<li hlmPaginationItem>
+							@if (page === '...') {
+								<hlm-pagination-ellipsis />
+							} @else {
+								<a
+									hlmPaginationLink
+									[isActive]="currentPage() === page"
+									(click)="currentPage.set(page)"
+								>
+									{{ page }}
+								</a>
+							}
+						</li>
+					}
+
+					@if (showEdges() && !_isLastPageActive()) {
+						<li hlmPaginationItem (click)="goToNext()">
+							<hlm-pagination-next />
+						</li>
+					}
+				</ul>
+			</nav>
+
+			<!-- Show Page Size selector -->
+			<hlm-select [(value)]="itemsPerPage" class="ml-auto">
+				<hlm-select-trigger class="w-fit">
+					<hlm-select-value />
+				</hlm-select-trigger>
+				<hlm-select-content *hlmSelectPortal>
+					<hlm-select-group>
+						@for (pageSize of _pageSizesWithCurrent(); track pageSize) {
+							<hlm-select-item [value]="pageSize">{{ pageSize }}</hlm-select-item>
+						}
+					</hlm-select-group>
+				</hlm-select-content>
+			</hlm-select>
+		</div>
+	`,
+})
+export class HlmNumberedPagination {
+	/**
+	 * The current (active) page.
+	 */
+	public readonly currentPage = model.required<number>();
+
+	/**
+	 * The number of items per paginated page.
+	 */
+	public readonly itemsPerPage = model.required<number>();
+
+	/**
+	 * The total number of items in the collection. Only useful when
+	 * doing server-side paging, where the collection size is limited
+	 * to a single page returned by the server API.
+	 */
+	public readonly totalItems = input.required<number, NumberInput>({
+		transform: numberAttribute,
+	});
+
+	/**
+	 * The number of page links to show.
+	 */
+	public readonly maxSize = input<number, NumberInput>(7, {
+		transform: numberAttribute,
+	});
+
+	/**
+	 * Show the first and last page buttons.
+	 */
+	public readonly showEdges = input<boolean, BooleanInput>(true, {
+		transform: booleanAttribute,
+	});
+
+	/**
+	 * The page sizes to show.
+	 * Defaults to [10, 20, 50, 100]
+	 */
+	public readonly pageSizes = input<number[]>([10, 20, 50, 100]);
+
+	protected readonly _pageSizesWithCurrent = computed(() => {
+		const pageSizes = this.pageSizes();
+		return pageSizes.includes(this.itemsPerPage())
+			? pageSizes // if current page size is included, return the same array
+			: [...pageSizes, this.itemsPerPage()].sort((a, b) => a - b); // otherwise, add current page size and sort the array
+	});
+
+	protected readonly _isFirstPageActive = computed(() => this.currentPage() === 1);
+	protected readonly _isLastPageActive = computed(
+		() => this.currentPage() === this._lastPageNumber(),
+	);
+
+	protected readonly _lastPageNumber = computed(() => {
+		if (this.totalItems() < 1) {
+			// when there are 0 or fewer (an error case) items, there are no "pages" as such,
+			// but it makes sense to consider a single, empty page as the last page.
+			return 1;
+		}
+		return Math.ceil(this.totalItems() / this.itemsPerPage());
+	});
+
+	protected readonly _pages = computed(() => {
+		const correctedCurrentPage = outOfBoundCorrection(
+			this.totalItems(),
+			this.itemsPerPage(),
+			this.currentPage(),
+		);
+
+		if (correctedCurrentPage !== this.currentPage()) {
+			// update the current page
+			untracked(() => this.currentPage.set(correctedCurrentPage));
+		}
+
+		return createPageArray(
+			correctedCurrentPage,
+			this.itemsPerPage(),
+			this.totalItems(),
+			this.maxSize(),
+		);
+	});
+
+	protected goToPrevious(): void {
+		this.currentPage.set(this.currentPage() - 1);
+	}
+
+	protected goToNext(): void {
+		this.currentPage.set(this.currentPage() + 1);
+	}
+
+	protected goToFirst(): void {
+		this.currentPage.set(1);
+	}
+
+	protected goToLast(): void {
+		this.currentPage.set(this._lastPageNumber());
+	}
+}
+
+type Page = number | '...';
+
+/**
+ * Checks that the instance.currentPage property is within bounds for the current page range.
+ * If not, return a correct value for currentPage, or the current value if OK.
+ *
+ * Copied from 'ngx-pagination' package
+ */
+export function outOfBoundCorrection(
+	totalItems: number,
+	itemsPerPage: number,
+	currentPage: number,
+): number {
+	const totalPages = Math.ceil(totalItems / itemsPerPage);
+	if (totalPages < currentPage && 0 < totalPages) {
+		return totalPages;
+	}
+
+	if (currentPage < 1) {
+		return 1;
+	}
+
+	return currentPage;
+}
+
+/**
+ * Returns an array of Page objects to use in the pagination controls.
+ *
+ * Copied from 'ngx-pagination' package
+ */
+export function createPageArray(
+	currentPage: number,
+	itemsPerPage: number,
+	totalItems: number,
+	paginationRange: number,
+): Page[] {
+	// paginationRange could be a string if passed from attribute, so cast to number.
+	paginationRange = +paginationRange;
+	const pages: Page[] = [];
+
+	// Return 1 as default page number
+	// Make sense to show 1 instead of empty when there are no items
+	const totalPages = Math.max(Math.ceil(totalItems / itemsPerPage), 1);
+	const halfWay = Math.ceil(paginationRange / 2);
+
+	const isStart = currentPage <= halfWay;
+	const isEnd = totalPages - halfWay < currentPage;
+	const isMiddle = !isStart && !isEnd;
+
+	const ellipsesNeeded = paginationRange < totalPages;
+	let i = 1;
+
+	while (i <= totalPages && i <= paginationRange) {
+		let label: number | '...';
+		const pageNumber = calculatePageNumber(i, currentPage, paginationRange, totalPages);
+		const openingEllipsesNeeded = i === 2 && (isMiddle || isEnd);
+		const closingEllipsesNeeded = i === paginationRange - 1 && (isMiddle || isStart);
+		if (ellipsesNeeded && (openingEllipsesNeeded || closingEllipsesNeeded)) {
+			label = '...';
+		} else {
+			label = pageNumber;
+		}
+		pages.push(label);
+		i++;
+	}
+
+	return pages;
+}
+
+/**
+ * Given the position in the sequence of pagination links [i],
+ * figure out what page number corresponds to that position.
+ *
+ * Copied from 'ngx-pagination' package
+ */
+function calculatePageNumber(
+	i: number,
+	currentPage: number,
+	paginationRange: number,
+	totalPages: number,
+) {
+	const halfWay = Math.ceil(paginationRange / 2);
+	if (i === paginationRange) {
+		return totalPages;
+	}
+
+	if (i === 1) {
+		return i;
+	}
+
+	if (paginationRange < totalPages) {
+		if (totalPages - halfWay < currentPage) {
+			return totalPages - paginationRange + i;
+		}
+		if (halfWay < currentPage) {
+			return currentPage - halfWay + i;
+		}
+		return i;
+	}
+
+	return i;
+}