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

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/spartan/field/src/lib/hlm-field-label.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { HlmLabel } from '@spartan-ng/styles/label';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmFieldLabel],hlm-field-label',
+	hostDirectives: [HlmLabel],
+	host: { 'data-slot': 'field-label' },
+})
+export class HlmFieldLabel {
+	constructor() {
+		classes(() => [
+			'has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit',
+			'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
+		]);
+	}
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/spartan/field/src/lib/hlm-field-legend.ts

@@ -0,0 +1,19 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: 'legend[hlmFieldLegend]',
+	host: {
+		'data-slot': 'field-legend',
+		'[attr.data-variant]': 'variant()',
+	},
+})
+export class HlmFieldLegend {
+	public readonly variant = input<'label' | 'legend'>('legend');
+
+	constructor() {
+		classes(
+			() => 'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
+		);
+	}
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/spartan/field/src/lib/hlm-field-separator.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { HlmSeparator } from '@spartan-ng/styles/separator';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Component({
+	selector: 'hlm-field-separator',
+	imports: [HlmSeparator],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { 'data-slot': 'field-separator' },
+	template: `
+		<hlm-separator class="absolute inset-0 top-1/2" />
+		<span
+			data-slot="field-separator-content"
+			class="text-muted-foreground px-2 bg-background relative mx-auto block w-fit"
+		>
+			<ng-content />
+		</span>
+	`,
+})
+export class HlmFieldSeparator {
+	constructor() {
+		classes(() => '-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative');
+	}
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/spartan/field/src/lib/hlm-field-set.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: 'fieldset[hlmFieldSet]',
+	host: { 'data-slot': 'field-set' },
+})
+export class HlmFieldSet {
+	constructor() {
+		classes(
+			() =>
+				'gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col',
+		);
+	}
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/spartan/field/src/lib/hlm-field-title.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmFieldTitle],hlm-field-title',
+	host: { 'data-slot': 'field-label' },
+})
+export class HlmFieldTitle {
+	constructor() {
+		classes(
+			() =>
+				'gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center',
+		);
+	}
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/spartan/field/src/lib/hlm-field.ts

@@ -0,0 +1,47 @@
+import { Directive, input } from '@angular/core';
+import { BrnField } from '@spartan-ng/brain/field';
+import { classes } from '@spartan-ng/styles/utils';
+import { cva, VariantProps } from 'class-variance-authority';
+
+const fieldVariants = cva(
+	'data-[matches-spartan-invalid=true]:text-destructive gap-1.5 group/field flex',
+	{
+		variants: {
+			orientation: {
+				vertical: 'flex-col [&>.sr-only]:w-auto',
+				horizontal: [
+					'flex-row items-center',
+					'*:data-[slot=field-label]:flex-auto',
+					'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+				],
+				responsive: [
+					'flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto [&>.sr-only]:w-auto',
+					'@md/field-group:*:data-[slot=field-label]:flex-auto',
+					'@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+				],
+			},
+		},
+		defaultVariants: {
+			orientation: 'vertical',
+		},
+	},
+);
+
+export type FieldVariants = VariantProps<typeof fieldVariants>;
+
+@Directive({
+	selector: '[hlmField],hlm-field',
+	hostDirectives: [{ directive: BrnField, inputs: ['data-invalid', 'forceInvalid'] }],
+	host: {
+		role: 'group',
+		'data-slot': 'field',
+		'[attr.data-orientation]': 'orientation()',
+	},
+})
+export class HlmField {
+	public readonly orientation = input<FieldVariants['orientation']>('vertical');
+
+	constructor() {
+		classes(() => fieldVariants({ orientation: this.orientation() }));
+	}
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/spartan/input/src/index.ts

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

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/spartan/input/src/lib/hlm-input.ts

@@ -0,0 +1,21 @@
+import { Directive } from '@angular/core';
+import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
+import { BrnInput } from '@spartan-ng/brain/input';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmInput]',
+	hostDirectives: [
+		{ directive: BrnInput, inputs: ['id', 'forceInvalid'] },
+		BrnFieldControlDescribedBy,
+	],
+	host: { 'data-slot': 'input' },
+})
+export class HlmInput {
+	constructor() {
+		classes(
+			() =>
+				'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+		);
+	}
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/spartan/input-group/src/index.ts

@@ -0,0 +1,19 @@
+import { HlmInputGroup } from './lib/hlm-input-group';
+import { HlmInputGroupAddon } from './lib/hlm-input-group-addon';
+import { HlmInputGroupButton } from './lib/hlm-input-group-button';
+import { HlmInputGroupInput } from './lib/hlm-input-group-input';
+import { HlmInputGroupText } from './lib/hlm-input-group-text';
+
+export * from './lib/hlm-input-group';
+export * from './lib/hlm-input-group-addon';
+export * from './lib/hlm-input-group-button';
+export * from './lib/hlm-input-group-input';
+export * from './lib/hlm-input-group-text';
+
+export const HlmInputGroupImports = [
+	HlmInputGroup,
+	HlmInputGroupAddon,
+	HlmInputGroupButton,
+	HlmInputGroupInput,
+	HlmInputGroupText,
+] as const;

package/dist/force-app/main/default/uiBundles/angularextapp/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/dist/force-app/main/default/uiBundles/angularextapp/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/dist/force-app/main/default/uiBundles/angularextapp/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/dist/force-app/main/default/uiBundles/angularextapp/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/dist/force-app/main/default/uiBundles/angularextapp/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/dist/force-app/main/default/uiBundles/angularextapp/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/dist/force-app/main/default/uiBundles/angularextapp/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/dist/force-app/main/default/uiBundles/angularextapp/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/dist/force-app/main/default/uiBundles/angularextapp/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/dist/force-app/main/default/uiBundles/angularextapp/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');
+	}
+}