@rt-tools/ui-kit-v2 0.23.3 → 0.24.0

package/fesm2022/rt-tools-ui-kit-v2-pagination.mjs

@@ -1,187 +1,387 @@
-import * as i0 from '@angular/core';
-import { inject, computed, input, booleanAttribute, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import * as i2 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
-import { RT_KIT_LABELS, rtKitLabel } from '@rt-tools/ui-kit-v2/core';
-import { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
-import * as i1 from '@rt-tools/ui-kit-v2/radius';
-import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
-import { RtSelectComponent } from '@rt-tools/ui-kit-v2/select';
-
-/** Сколько всего страниц. Пустой список — одна страница, листать нечего. */
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, booleanAttribute, computed, inject, input, output } from "@angular/core";
+import * as i2 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
+import { RT_KIT_LABELS, rtKitLabel } from "@rt-tools/ui-kit-v2/core";
+import { RtIconButtonComponent } from "@rt-tools/ui-kit-v2/icon-button";
+import * as i1 from "@rt-tools/ui-kit-v2/radius";
+import { RtRadiusDirective } from "@rt-tools/ui-kit-v2/radius";
+import { RtSelectComponent } from "@rt-tools/ui-kit-v2/select";
 function lastPageOf(page) {
-    if (page.pageSize <= 0) {
-        return 1;
-    }
-    return Math.max(1, Math.ceil(page.totalCount / page.pageSize));
+	if (page.pageSize <= 0) return 1;
+	return Math.max(1, Math.ceil(page.totalCount / page.pageSize));
 }
-/** Номер первой записи открытой страницы. */
 function rangeFromOf(page) {
-    return (page.pageNumber - 1) * page.pageSize + 1;
+	return (page.pageNumber - 1) * page.pageSize + 1;
 }
-/** Номер последней записи открытой страницы — на последней странице она короче. */
 function rangeToOf(page) {
-    return Math.min(page.pageNumber * page.pageSize, page.totalCount);
+	return Math.min(page.pageNumber * page.pageSize, page.totalCount);
 }
-/**
- * Полоса номеров страниц с разрывами «…»: первая, последняя и соседи открытой.
- * Пуста при единственной странице — показывать нечего.
- */
 function pageItemsOf(page, neighbours) {
-    const lastPage = lastPageOf(page);
-    if (lastPage <= 1) {
-        return [];
-    }
-    const items = [];
-    let previous = 0;
-    for (let candidate = 1; candidate <= lastPage; candidate++) {
-        const isEdge = candidate === 1 || candidate === lastPage;
-        const isNeighbour = candidate >= page.pageNumber - neighbours && candidate <= page.pageNumber + neighbours;
-        if (!isEdge && !isNeighbour) {
-            continue;
-        }
-        if (previous && candidate - previous > 1) {
-            items.push('gap');
-        }
-        items.push(candidate);
-        previous = candidate;
-    }
-    return items;
+	const lastPage = lastPageOf(page);
+	if (lastPage <= 1) return [];
+	const items = [];
+	let previous = 0;
+	for (let candidate = 1; candidate <= lastPage; candidate++) {
+		const isEdge = candidate === 1 || candidate === lastPage;
+		const isNeighbour = candidate >= page.pageNumber - neighbours && candidate <= page.pageNumber + neighbours;
+		if (!isEdge && !isNeighbour) continue;
+		if (previous && candidate - previous > 1) items.push("gap");
+		items.push(candidate);
+		previous = candidate;
+	}
+	return items;
 }
-/** Номера с `from` по `to` включительно. */
 function pagesBetween(from, to) {
-    return Array.from({ length: to - from + 1 }, (_value, index) => from + index);
+	return Array.from({ length: to - from + 1 }, (_value, index) => from + index);
 }
-/**
- * Полоса номеров первого кита — семь мест: до шести страниц видны все, дальше края по три
- * (`1 2 3 … 11 12 13`) или первая, соседи открытой и последняя (`1 … 6 7 8 … 13`); у края разрыв
- * съезжает на одно место за открытой страницей. Одна страница — один номер.
- */
 function pageSlotsOf(page) {
-    const lastPage = lastPageOf(page);
-    const current = page.pageNumber;
-    if (lastPage <= 6) {
-        return pagesBetween(1, lastPage);
-    }
-    if (current < 3 || current > lastPage - 2) {
-        return [...pagesBetween(1, 3), 'gap', ...pagesBetween(lastPage - 2, lastPage)];
-    }
-    if (current === 3) {
-        return [...pagesBetween(1, 4), 'gap', ...pagesBetween(lastPage - 1, lastPage)];
-    }
-    if (current === 4) {
-        return [...pagesBetween(1, 5), 'gap', lastPage];
-    }
-    if (current <= lastPage - 4) {
-        return [1, 'gap', current - 1, current, current + 1, 'gap', lastPage];
-    }
-    if (current === lastPage - 3) {
-        return [1, 'gap', ...pagesBetween(lastPage - 4, lastPage)];
-    }
-    return [1, 2, 'gap', ...pagesBetween(lastPage - 3, lastPage)];
-}
-
-const BEM_BLOCK = 'rt-pagination';
-const NEIGHBOURS = 1; // соседей вокруг открытой страницы
-class RtPaginationComponent {
-    constructor() {
-        this.t = inject(RT_KIT_LABELS);
-        this.perPageSelectOptions = computed(() => this.perPageOptions().map((n) => ({ label: String(n), value: n })), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "perPageSelectOptions" }] : /* istanbul ignore next */ []));
-        /**
-         * Диапазон записей и номер страницы — с подстановками, поэтому карте подписей
-         * они не годятся: числа приходят из модели страницы.
-         */
-        this.rangeLabel = rtKitLabel('uiRangeOf', computed(() => ({ from: this.rangeFrom(), to: this.rangeTo(), total: this.pageModel().totalCount })));
-        this.pageLabel = rtKitLabel('uiPageOf', computed(() => ({ page: this.pageModel().pageNumber, last: this.lastPage() })));
-        this.isFirst = computed(() => this.pageModel().pageNumber <= 1, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isFirst" }] : /* istanbul ignore next */ []));
-        this.isLast = computed(() => this.pageModel().pageNumber >= this.lastPage(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []));
-        this.pageModel = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "pageModel" }] : /* istanbul ignore next */ []));
-        this.perPageOptions = input([20, 50, 100], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "perPageOptions" }] : /* istanbul ignore next */ []));
-        /** Значок стрелки «назад»: вид первого кита рисует стрелку, а не шеврон. */
-        this.prevIcon = input('chevron-left', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "prevIcon" }] : /* istanbul ignore next */ []));
-        /** Значок стрелки «вперёд». */
-        this.nextIcon = input('chevron-right', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "nextIcon" }] : /* istanbul ignore next */ []));
-        /** Счёт номеров: список под материальным набором просит семь мест первого кита. */
-        this.numbering = input('neighbours', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "numbering" }] : /* istanbul ignore next */ []));
-        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.pageChange = output();
-        this.perPageChange = output();
-        /**
-         * Пагинацию показываем, только когда есть что листать/менять: всё не влезает
-         * на одну страницу даже при минимальной опции размера (`total > наименьший
-         * perPageOption`). Иначе и навигация, и селектор размера бесполезны — прячем
-         * весь бар (включая пустой и пустой-по-фильтру список).
-         */
-        this.isVisible = computed(() => {
-            const options = this.perPageOptions();
-            const smallest = options.length > 0 ? Math.min(...options) : 0;
-            return this.pageModel().totalCount > smallest;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
-        /** Сколько всего страниц при нынешнем размере страницы. */
-        this.lastPage = computed(() => lastPageOf(this.pageModel()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "lastPage" }] : /* istanbul ignore next */ []));
-        /**
-         * Границы диапазона записей открытой страницы. Собираются числами, а сама
-         * подпись — в шаблоне: только там подстановка проходит через словарь и
-         * переживает смену языка.
-         */
-        this.rangeFrom = computed(() => rangeFromOf(this.pageModel()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "rangeFrom" }] : /* istanbul ignore next */ []));
-        this.rangeTo = computed(() => rangeToOf(this.pageModel()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "rangeTo" }] : /* istanbul ignore next */ []));
-        /** Полоса номеров страниц с разрывами «…». По соседям пуста при единственной странице. */
-        this.pageItems = computed(() => this.numbering() === 'seven' ? pageSlotsOf(this.pageModel()) : pageItemsOf(this.pageModel(), NEIGHBOURS), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "pageItems" }] : /* istanbul ignore next */ []));
-    }
-    goTo(pageNumber) {
-        if (this.loading() || pageNumber === this.pageModel().pageNumber || pageNumber < 1 || pageNumber > this.lastPage()) {
-            return;
-        }
-        this.pageChange.emit(pageNumber);
-    }
-    onPerPage(value) {
-        if (value === null || this.loading() || value === this.pageModel().pageSize) {
-            return;
-        }
-        this.perPageChange.emit(value);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtPaginationComponent, isStandalone: true, selector: "rt-pagination", inputs: { pageModel: { classPropertyName: "pageModel", publicName: "pageModel", isSignal: true, isRequired: true, transformFunction: null }, perPageOptions: { classPropertyName: "perPageOptions", publicName: "perPageOptions", isSignal: true, isRequired: false, transformFunction: null }, prevIcon: { classPropertyName: "prevIcon", publicName: "prevIcon", isSignal: true, isRequired: false, transformFunction: null }, nextIcon: { classPropertyName: "nextIcon", publicName: "nextIcon", isSignal: true, isRequired: false, transformFunction: null }, numbering: { classPropertyName: "numbering", publicName: "numbering", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", perPageChange: "perPageChange" }, host: { properties: { "style.display": "isVisible() ? null : 'none'" }, classAttribute: "rt-pagination" }, hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<ng-container rtBlock=\"rt-pagination\">\n    <!--\n        \u0412\u0435\u0442\u043A\u0438 \u00AB\u043D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E\u00BB \u0437\u0434\u0435\u0441\u044C \u043D\u0435\u0442 \u043D\u0430\u043C\u0435\u0440\u0435\u043D\u043D\u043E: \u043F\u0443\u0441\u0442\u043E\u0439 \u043D\u0430\u0431\u043E\u0440 \u043F\u0440\u044F\u0447\u0435\u0442 \u0432\u0435\u0441\u044C\n        \u0431\u0430\u0440 \u0446\u0435\u043B\u0438\u043A\u043E\u043C (`isVisible`), \u0442\u0430\u043A \u0447\u0442\u043E \u0434\u043E \u044D\u0442\u043E\u0439 \u0441\u0442\u0440\u043E\u043A\u0438 \u0434\u0435\u043B\u043E \u043D\u0435 \u0434\u043E\u0445\u043E\u0434\u0438\u0442. \u041F\u043E\u043A\u0430\n        \u0442\u0430\u043A\u0430\u044F \u0432\u0435\u0442\u043A\u0430 \u0442\u0443\u0442 \u0432\u0438\u0441\u0435\u043B\u0430, \u043E\u043D\u0430 \u0447\u0438\u0442\u0430\u043B\u0430\u0441\u044C \u043A\u0430\u043A \u0440\u0430\u0431\u043E\u0447\u0435\u0435 \u0441\u043E\u0441\u0442\u043E\u044F\u043D\u0438\u0435, \u0430 \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C\n        \u0435\u0451 \u0431\u044B\u043B\u043E \u043D\u0435\u043B\u044C\u0437\u044F \u043D\u0438 \u043F\u0440\u0438 \u043A\u0430\u043A\u0438\u0445 \u0432\u0445\u043E\u0434\u0430\u0445.\n    -->\n    <span rtElem=\"range\" qa-dataid=\"pagination-range\">\n        {{ rangeLabel() }}\n    </span>\n\n    @if (pageItems().length) {\n        <nav rtElem=\"compact\" qa-dataid=\"pagination-compact\" [attr.aria-label]=\"t().uiPagination\">\n            <rt-icon-button\n                qa-dataid=\"pagination-compact-prev\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [icon]=\"prevIcon()\"\n                [ariaLabel]=\"t().uiPrevPage\"\n                [tooltip]=\"t().uiBack\"\n                [disabled]=\"isFirst() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber - 1)\" />\n\n            <span rtElem=\"compact-label\" qa-dataid=\"pagination-compact-label\">\n                {{ pageLabel() }}\n            </span>\n\n            <rt-icon-button\n                qa-dataid=\"pagination-compact-next\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [icon]=\"nextIcon()\"\n                [ariaLabel]=\"t().uiNextPage\"\n                [tooltip]=\"t().uiForward\"\n                [disabled]=\"isLast() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber + 1)\" />\n        </nav>\n\n        <nav rtElem=\"nav\" qa-dataid=\"pagination-nav\" [attr.aria-label]=\"t().uiPagination\">\n            <rt-icon-button\n                qa-dataid=\"pagination-prev\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [icon]=\"prevIcon()\"\n                [ariaLabel]=\"t().uiPrevPage\"\n                [tooltip]=\"t().uiBack\"\n                [disabled]=\"isFirst() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber - 1)\" />\n\n            @for (item of pageItems(); track $index) {\n                @if (item === 'gap') {\n                    <span rtElem=\"gap\" aria-hidden=\"true\">\u2026</span>\n                } @else {\n                    <button\n                        rtElem=\"page\"\n                        qa-dataid=\"pagination-page\"\n                        type=\"button\"\n                        [attr.data-page]=\"item\"\n                        [rtMod]=\"{ current: item === pageModel().pageNumber }\"\n                        [attr.aria-current]=\"item === pageModel().pageNumber ? 'page' : null\"\n                        [disabled]=\"loading()\"\n                        (click)=\"goTo(item)\">\n                        {{ item }}\n                    </button>\n                }\n            }\n\n            <rt-icon-button\n                qa-dataid=\"pagination-next\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [icon]=\"nextIcon()\"\n                [ariaLabel]=\"t().uiNextPage\"\n                [tooltip]=\"t().uiForward\"\n                [disabled]=\"isLast() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber + 1)\" />\n        </nav>\n    }\n\n    <div rtElem=\"per-page\">\n        <span rtElem=\"per-page-label\">{{ t().uiPerPage }}</span>\n        <rt-select\n            qa-dataid=\"pagination-per-page\"\n            [ariaLabel]=\"t().uiItemsPerPage\"\n            [options]=\"perPageSelectOptions()\"\n            [clearable]=\"false\"\n            [ngModel]=\"pageModel().pageSize\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (selectionChange)=\"onPerPage($event)\" />\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-pagination{--rt-pagination-page-radius: var(--rt-pagination-box-radius);--rt-pagination-page-border-width: var(--rt-border-width-thin);--rt-pagination-focus-shadow: var(--rt-shadow-focus-ring);--rt-pagination-transition-duration: var(--rt-duration-fast);display:flex;align-items:center;justify-content:var(--rt-pagination-justify);padding:var(--rt-pagination-padding-y) var(--rt-pagination-padding-x);container-type:inline-size;gap:var(--rt-pagination-gap)}.rt-pagination rt-icon-button{--rt-icon-button-color: var(--rt-pagination-arrow-color)}.rt-pagination .rt-icon-button{--rt-icon-button-size-step: var(--rt-pagination-arrow-size);--rt-icon-button-radius: var(--rt-pagination-arrow-radius);--rt-icon-button-shadow: var(--rt-pagination-arrow-shadow)}.rt-pagination__range{display:var(--rt-pagination-range-display);color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);white-space:nowrap}.rt-pagination__nav{display:flex;align-items:center;gap:var(--rt-pagination-nav-gap)}.rt-pagination__compact{display:none;align-items:center;gap:var(--rt-space-xs)}.rt-pagination__compact-label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);white-space:nowrap}.rt-pagination__page{min-width:var(--rt-pagination-box-size);height:var(--rt-pagination-box-size);padding:0 var(--rt-space-sm);border:var(--rt-pagination-page-border-width) solid var(--rt-pagination-box-color-border);border-radius:var(--rt-pagination-page-radius);background:transparent;color:var(--rt-pagination-box-color-text);cursor:pointer;font:inherit;font-size:var(--rt-text-sm);transition:background-color var(--rt-pagination-transition-duration) ease,border-color var(--rt-pagination-transition-duration) ease,color var(--rt-pagination-transition-duration) ease}.rt-pagination__page:hover:not(:disabled,.rt-pagination__page--current){border-color:var(--rt-color-border-strong);background:var(--rt-color-bg-surface-subtle)}.rt-pagination__page:focus-visible{box-shadow:var(--rt-pagination-focus-shadow);outline:2px solid transparent;outline-offset:2px}.rt-pagination__page--current{border-color:var(--rt-pagination-box-current-color-border);background:var(--rt-pagination-box-current-color-bg);color:var(--rt-pagination-box-current-color-text);font-weight:var(--rt-pagination-box-current-font-weight)}.rt-pagination__page:disabled{cursor:default;opacity:.6}.rt-pagination__gap{padding:0 var(--rt-space-xs);color:var(--rt-color-text-muted)}.rt-pagination__per-page{--rt-input-height: var(--rt-pagination-field-height);--rt-input-radius: var(--rt-pagination-field-radius);--rt-input-color-border: var(--rt-pagination-field-color-border);--rt-input-padding-x: var(--rt-pagination-field-padding-x);--rt-input-color-bg: var(--rt-pagination-field-color-bg);--rt-input-color-text: var(--rt-pagination-field-color-text);display:flex;align-items:center;gap:var(--rt-pagination-per-page-gap)}.rt-pagination__per-page-label{color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);white-space:var(--rt-pagination-per-page-label-white-space)}.rt-pagination[data-rt-radius=none]{--rt-pagination-page-radius: var(--rt-radius-none)}.rt-pagination[data-rt-radius=xs]{--rt-pagination-page-radius: var(--rt-radius-xs)}.rt-pagination[data-rt-radius=sm]{--rt-pagination-page-radius: var(--rt-radius-sm)}.rt-pagination[data-rt-radius=ms]{--rt-pagination-page-radius: var(--rt-radius-ms)}.rt-pagination[data-rt-radius=md]{--rt-pagination-page-radius: var(--rt-radius-md)}.rt-pagination[data-rt-radius=lg]{--rt-pagination-page-radius: var(--rt-radius-lg)}.rt-pagination[data-rt-radius=xl]{--rt-pagination-page-radius: var(--rt-radius-xl)}.rt-pagination[data-rt-radius=\"2xl\"]{--rt-pagination-page-radius: var(--rt-radius-2xl)}.rt-pagination[data-rt-radius=full]{--rt-pagination-page-radius: var(--rt-radius-full)}@container (max-width: 460px){.rt-pagination__nav,.rt-pagination__range{display:none}.rt-pagination__compact{display:flex}}}\n"], dependencies: [{ kind: "ngmodule", type: 
-                // Angular
-                FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 
-                // standalone components / directives
-                RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtSelectComponent, selector: "rt-select", inputs: ["appearance", "options", "placeholder", "iconLeft", "filter", "filterPlaceholder", "panelWidth", "panelMaxHeight"], outputs: ["selectionChange"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+	const lastPage = lastPageOf(page);
+	const current = page.pageNumber;
+	if (lastPage <= 6) return pagesBetween(1, lastPage);
+	if (current < 3 || current > lastPage - 2) return [
+		...pagesBetween(1, 3),
+		"gap",
+		...pagesBetween(lastPage - 2, lastPage)
+	];
+	if (current === 3) return [
+		...pagesBetween(1, 4),
+		"gap",
+		...pagesBetween(lastPage - 1, lastPage)
+	];
+	if (current === 4) return [
+		...pagesBetween(1, 5),
+		"gap",
+		lastPage
+	];
+	if (current <= lastPage - 4) return [
+		1,
+		"gap",
+		current - 1,
+		current,
+		current + 1,
+		"gap",
+		lastPage
+	];
+	if (current === lastPage - 3) return [
+		1,
+		"gap",
+		...pagesBetween(lastPage - 4, lastPage)
+	];
+	return [
+		1,
+		2,
+		"gap",
+		...pagesBetween(lastPage - 3, lastPage)
+	];
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtPaginationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-pagination', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        // Angular
-                        FormsModule,
-                        // standalone components / directives
-                        RtIconButtonComponent,
-                        RtSelectComponent,
-                        BlockDirective,
-                        ElemDirective,
-                        ModDirective,
-                    ], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
-                        class: BEM_BLOCK,
-                        '[style.display]': "isVisible() ? null : 'none'",
-                    }, template: "<ng-container rtBlock=\"rt-pagination\">\n    <!--\n        \u0412\u0435\u0442\u043A\u0438 \u00AB\u043D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E\u00BB \u0437\u0434\u0435\u0441\u044C \u043D\u0435\u0442 \u043D\u0430\u043C\u0435\u0440\u0435\u043D\u043D\u043E: \u043F\u0443\u0441\u0442\u043E\u0439 \u043D\u0430\u0431\u043E\u0440 \u043F\u0440\u044F\u0447\u0435\u0442 \u0432\u0435\u0441\u044C\n        \u0431\u0430\u0440 \u0446\u0435\u043B\u0438\u043A\u043E\u043C (`isVisible`), \u0442\u0430\u043A \u0447\u0442\u043E \u0434\u043E \u044D\u0442\u043E\u0439 \u0441\u0442\u0440\u043E\u043A\u0438 \u0434\u0435\u043B\u043E \u043D\u0435 \u0434\u043E\u0445\u043E\u0434\u0438\u0442. \u041F\u043E\u043A\u0430\n        \u0442\u0430\u043A\u0430\u044F \u0432\u0435\u0442\u043A\u0430 \u0442\u0443\u0442 \u0432\u0438\u0441\u0435\u043B\u0430, \u043E\u043D\u0430 \u0447\u0438\u0442\u0430\u043B\u0430\u0441\u044C \u043A\u0430\u043A \u0440\u0430\u0431\u043E\u0447\u0435\u0435 \u0441\u043E\u0441\u0442\u043E\u044F\u043D\u0438\u0435, \u0430 \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C\n        \u0435\u0451 \u0431\u044B\u043B\u043E \u043D\u0435\u043B\u044C\u0437\u044F \u043D\u0438 \u043F\u0440\u0438 \u043A\u0430\u043A\u0438\u0445 \u0432\u0445\u043E\u0434\u0430\u0445.\n    -->\n    <span rtElem=\"range\" qa-dataid=\"pagination-range\">\n        {{ rangeLabel() }}\n    </span>\n\n    @if (pageItems().length) {\n        <nav rtElem=\"compact\" qa-dataid=\"pagination-compact\" [attr.aria-label]=\"t().uiPagination\">\n            <rt-icon-button\n                qa-dataid=\"pagination-compact-prev\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [icon]=\"prevIcon()\"\n                [ariaLabel]=\"t().uiPrevPage\"\n                [tooltip]=\"t().uiBack\"\n                [disabled]=\"isFirst() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber - 1)\" />\n\n            <span rtElem=\"compact-label\" qa-dataid=\"pagination-compact-label\">\n                {{ pageLabel() }}\n            </span>\n\n            <rt-icon-button\n                qa-dataid=\"pagination-compact-next\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [icon]=\"nextIcon()\"\n                [ariaLabel]=\"t().uiNextPage\"\n                [tooltip]=\"t().uiForward\"\n                [disabled]=\"isLast() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber + 1)\" />\n        </nav>\n\n        <nav rtElem=\"nav\" qa-dataid=\"pagination-nav\" [attr.aria-label]=\"t().uiPagination\">\n            <rt-icon-button\n                qa-dataid=\"pagination-prev\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [icon]=\"prevIcon()\"\n                [ariaLabel]=\"t().uiPrevPage\"\n                [tooltip]=\"t().uiBack\"\n                [disabled]=\"isFirst() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber - 1)\" />\n\n            @for (item of pageItems(); track $index) {\n                @if (item === 'gap') {\n                    <span rtElem=\"gap\" aria-hidden=\"true\">\u2026</span>\n                } @else {\n                    <button\n                        rtElem=\"page\"\n                        qa-dataid=\"pagination-page\"\n                        type=\"button\"\n                        [attr.data-page]=\"item\"\n                        [rtMod]=\"{ current: item === pageModel().pageNumber }\"\n                        [attr.aria-current]=\"item === pageModel().pageNumber ? 'page' : null\"\n                        [disabled]=\"loading()\"\n                        (click)=\"goTo(item)\">\n                        {{ item }}\n                    </button>\n                }\n            }\n\n            <rt-icon-button\n                qa-dataid=\"pagination-next\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [icon]=\"nextIcon()\"\n                [ariaLabel]=\"t().uiNextPage\"\n                [tooltip]=\"t().uiForward\"\n                [disabled]=\"isLast() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber + 1)\" />\n        </nav>\n    }\n\n    <div rtElem=\"per-page\">\n        <span rtElem=\"per-page-label\">{{ t().uiPerPage }}</span>\n        <rt-select\n            qa-dataid=\"pagination-per-page\"\n            [ariaLabel]=\"t().uiItemsPerPage\"\n            [options]=\"perPageSelectOptions()\"\n            [clearable]=\"false\"\n            [ngModel]=\"pageModel().pageSize\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (selectionChange)=\"onPerPage($event)\" />\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-pagination{--rt-pagination-page-radius: var(--rt-pagination-box-radius);--rt-pagination-page-border-width: var(--rt-border-width-thin);--rt-pagination-focus-shadow: var(--rt-shadow-focus-ring);--rt-pagination-transition-duration: var(--rt-duration-fast);display:flex;align-items:center;justify-content:var(--rt-pagination-justify);padding:var(--rt-pagination-padding-y) var(--rt-pagination-padding-x);container-type:inline-size;gap:var(--rt-pagination-gap)}.rt-pagination rt-icon-button{--rt-icon-button-color: var(--rt-pagination-arrow-color)}.rt-pagination .rt-icon-button{--rt-icon-button-size-step: var(--rt-pagination-arrow-size);--rt-icon-button-radius: var(--rt-pagination-arrow-radius);--rt-icon-button-shadow: var(--rt-pagination-arrow-shadow)}.rt-pagination__range{display:var(--rt-pagination-range-display);color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);white-space:nowrap}.rt-pagination__nav{display:flex;align-items:center;gap:var(--rt-pagination-nav-gap)}.rt-pagination__compact{display:none;align-items:center;gap:var(--rt-space-xs)}.rt-pagination__compact-label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);white-space:nowrap}.rt-pagination__page{min-width:var(--rt-pagination-box-size);height:var(--rt-pagination-box-size);padding:0 var(--rt-space-sm);border:var(--rt-pagination-page-border-width) solid var(--rt-pagination-box-color-border);border-radius:var(--rt-pagination-page-radius);background:transparent;color:var(--rt-pagination-box-color-text);cursor:pointer;font:inherit;font-size:var(--rt-text-sm);transition:background-color var(--rt-pagination-transition-duration) ease,border-color var(--rt-pagination-transition-duration) ease,color var(--rt-pagination-transition-duration) ease}.rt-pagination__page:hover:not(:disabled,.rt-pagination__page--current){border-color:var(--rt-color-border-strong);background:var(--rt-color-bg-surface-subtle)}.rt-pagination__page:focus-visible{box-shadow:var(--rt-pagination-focus-shadow);outline:2px solid transparent;outline-offset:2px}.rt-pagination__page--current{border-color:var(--rt-pagination-box-current-color-border);background:var(--rt-pagination-box-current-color-bg);color:var(--rt-pagination-box-current-color-text);font-weight:var(--rt-pagination-box-current-font-weight)}.rt-pagination__page:disabled{cursor:default;opacity:.6}.rt-pagination__gap{padding:0 var(--rt-space-xs);color:var(--rt-color-text-muted)}.rt-pagination__per-page{--rt-input-height: var(--rt-pagination-field-height);--rt-input-radius: var(--rt-pagination-field-radius);--rt-input-color-border: var(--rt-pagination-field-color-border);--rt-input-padding-x: var(--rt-pagination-field-padding-x);--rt-input-color-bg: var(--rt-pagination-field-color-bg);--rt-input-color-text: var(--rt-pagination-field-color-text);display:flex;align-items:center;gap:var(--rt-pagination-per-page-gap)}.rt-pagination__per-page-label{color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);white-space:var(--rt-pagination-per-page-label-white-space)}.rt-pagination[data-rt-radius=none]{--rt-pagination-page-radius: var(--rt-radius-none)}.rt-pagination[data-rt-radius=xs]{--rt-pagination-page-radius: var(--rt-radius-xs)}.rt-pagination[data-rt-radius=sm]{--rt-pagination-page-radius: var(--rt-radius-sm)}.rt-pagination[data-rt-radius=ms]{--rt-pagination-page-radius: var(--rt-radius-ms)}.rt-pagination[data-rt-radius=md]{--rt-pagination-page-radius: var(--rt-radius-md)}.rt-pagination[data-rt-radius=lg]{--rt-pagination-page-radius: var(--rt-radius-lg)}.rt-pagination[data-rt-radius=xl]{--rt-pagination-page-radius: var(--rt-radius-xl)}.rt-pagination[data-rt-radius=\"2xl\"]{--rt-pagination-page-radius: var(--rt-radius-2xl)}.rt-pagination[data-rt-radius=full]{--rt-pagination-page-radius: var(--rt-radius-full)}@container (max-width: 460px){.rt-pagination__nav,.rt-pagination__range{display:none}.rt-pagination__compact{display:flex}}}\n"] }]
-        }], propDecorators: { pageModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageModel", required: true }] }], perPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "perPageOptions", required: false }] }], prevIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevIcon", required: false }] }], nextIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextIcon", required: false }] }], numbering: [{ type: i0.Input, args: [{ isSignal: true, alias: "numbering", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], perPageChange: [{ type: i0.Output, args: ["perPageChange"] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+const BEM_BLOCK = "rt-pagination";
+const NEIGHBOURS = 1;
+var RtPaginationComponent = class RtPaginationComponent {
+	constructor() {
+		this.t = inject(RT_KIT_LABELS);
+		this.perPageSelectOptions = computed(() => this.perPageOptions().map((n) => ({
+			label: String(n),
+			value: n
+		})), ...ngDevMode ? [{ debugName: "perPageSelectOptions" }] : /* istanbul ignore next */ []);
+		this.rangeLabel = rtKitLabel("uiRangeOf", computed(() => ({
+			from: this.rangeFrom(),
+			to: this.rangeTo(),
+			total: this.pageModel().totalCount
+		})));
+		this.pageLabel = rtKitLabel("uiPageOf", computed(() => ({
+			page: this.pageModel().pageNumber,
+			last: this.lastPage()
+		})));
+		this.isFirst = computed(() => this.pageModel().pageNumber <= 1, ...ngDevMode ? [{ debugName: "isFirst" }] : /* istanbul ignore next */ []);
+		this.isLast = computed(() => this.pageModel().pageNumber >= this.lastPage(), ...ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []);
+		this.pageModel = input.required(...ngDevMode ? [{ debugName: "pageModel" }] : /* istanbul ignore next */ []);
+		this.perPageOptions = input([
+			20,
+			50,
+			100
+		], ...ngDevMode ? [{ debugName: "perPageOptions" }] : /* istanbul ignore next */ []);
+		this.prevIcon = input("chevron-left", ...ngDevMode ? [{ debugName: "prevIcon" }] : /* istanbul ignore next */ []);
+		this.nextIcon = input("chevron-right", ...ngDevMode ? [{ debugName: "nextIcon" }] : /* istanbul ignore next */ []);
+		this.numbering = input("neighbours", ...ngDevMode ? [{ debugName: "numbering" }] : /* istanbul ignore next */ []);
+		this.loading = input(false, {
+			...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.pageChange = output();
+		this.perPageChange = output();
+		this.isVisible = computed(() => {
+			const options = this.perPageOptions();
+			const smallest = options.length > 0 ? Math.min(...options) : 0;
+			return this.pageModel().totalCount > smallest;
+		}, ...ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []);
+		this.lastPage = computed(() => lastPageOf(this.pageModel()), ...ngDevMode ? [{ debugName: "lastPage" }] : /* istanbul ignore next */ []);
+		this.rangeFrom = computed(() => rangeFromOf(this.pageModel()), ...ngDevMode ? [{ debugName: "rangeFrom" }] : /* istanbul ignore next */ []);
+		this.rangeTo = computed(() => rangeToOf(this.pageModel()), ...ngDevMode ? [{ debugName: "rangeTo" }] : /* istanbul ignore next */ []);
+		this.pageItems = computed(() => this.numbering() === "seven" ? pageSlotsOf(this.pageModel()) : pageItemsOf(this.pageModel(), NEIGHBOURS), ...ngDevMode ? [{ debugName: "pageItems" }] : /* istanbul ignore next */ []);
+	}
+	goTo(pageNumber) {
+		if (this.loading() || pageNumber === this.pageModel().pageNumber || pageNumber < 1 || pageNumber > this.lastPage()) return;
+		this.pageChange.emit(pageNumber);
+	}
+	onPerPage(value) {
+		if (value === null || this.loading() || value === this.pageModel().pageSize) return;
+		this.perPageChange.emit(value);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtPaginationComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtPaginationComponent,
+			isStandalone: true,
+			selector: "rt-pagination",
+			inputs: {
+				pageModel: {
+					classPropertyName: "pageModel",
+					publicName: "pageModel",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				perPageOptions: {
+					classPropertyName: "perPageOptions",
+					publicName: "perPageOptions",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				prevIcon: {
+					classPropertyName: "prevIcon",
+					publicName: "prevIcon",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				nextIcon: {
+					classPropertyName: "nextIcon",
+					publicName: "nextIcon",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				numbering: {
+					classPropertyName: "numbering",
+					publicName: "numbering",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				loading: {
+					classPropertyName: "loading",
+					publicName: "loading",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				pageChange: "pageChange",
+				perPageChange: "perPageChange"
+			},
+			host: {
+				properties: { "style.display": "isVisible() ? null : 'none'" },
+				classAttribute: "rt-pagination"
+			},
+			hostDirectives: [{
+				directive: i1.RtRadiusDirective,
+				inputs: ["radius", "radius"]
+			}],
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-pagination\">\n    <!--\n        Ветки «ничего не найдено» здесь нет намеренно: пустой набор прячет весь\n        бар целиком (`isVisible`), так что до этой строки дело не доходит. Пока\n        такая ветка тут висела, она читалась как рабочее состояние, а показать\n        её было нельзя ни при каких входах.\n    -->\n    <span rtElem=\"range\" qa-dataid=\"pagination-range\">\n        {{ rangeLabel() }}\n    </span>\n\n    @if (pageItems().length) {\n        <nav rtElem=\"compact\" qa-dataid=\"pagination-compact\" [attr.aria-label]=\"t().uiPagination\">\n            <rt-icon-button\n                qa-dataid=\"pagination-compact-prev\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [icon]=\"prevIcon()\"\n                [ariaLabel]=\"t().uiPrevPage\"\n                [tooltip]=\"t().uiBack\"\n                [disabled]=\"isFirst() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber - 1)\" />\n\n            <span rtElem=\"compact-label\" qa-dataid=\"pagination-compact-label\">\n                {{ pageLabel() }}\n            </span>\n\n            <rt-icon-button\n                qa-dataid=\"pagination-compact-next\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [icon]=\"nextIcon()\"\n                [ariaLabel]=\"t().uiNextPage\"\n                [tooltip]=\"t().uiForward\"\n                [disabled]=\"isLast() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber + 1)\" />\n        </nav>\n\n        <nav rtElem=\"nav\" qa-dataid=\"pagination-nav\" [attr.aria-label]=\"t().uiPagination\">\n            <rt-icon-button\n                qa-dataid=\"pagination-prev\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [icon]=\"prevIcon()\"\n                [ariaLabel]=\"t().uiPrevPage\"\n                [tooltip]=\"t().uiBack\"\n                [disabled]=\"isFirst() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber - 1)\" />\n\n            @for (item of pageItems(); track $index) {\n                @if (item === 'gap') {\n                    <span rtElem=\"gap\" aria-hidden=\"true\">…</span>\n                } @else {\n                    <button\n                        rtElem=\"page\"\n                        qa-dataid=\"pagination-page\"\n                        type=\"button\"\n                        [attr.data-page]=\"item\"\n                        [rtMod]=\"{ current: item === pageModel().pageNumber }\"\n                        [attr.aria-current]=\"item === pageModel().pageNumber ? 'page' : null\"\n                        [disabled]=\"loading()\"\n                        (click)=\"goTo(item)\">\n                        {{ item }}\n                    </button>\n                }\n            }\n\n            <rt-icon-button\n                qa-dataid=\"pagination-next\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [icon]=\"nextIcon()\"\n                [ariaLabel]=\"t().uiNextPage\"\n                [tooltip]=\"t().uiForward\"\n                [disabled]=\"isLast() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber + 1)\" />\n        </nav>\n    }\n\n    <div rtElem=\"per-page\">\n        <span rtElem=\"per-page-label\">{{ t().uiPerPage }}</span>\n        <rt-select\n            qa-dataid=\"pagination-per-page\"\n            [ariaLabel]=\"t().uiItemsPerPage\"\n            [options]=\"perPageSelectOptions()\"\n            [clearable]=\"false\"\n            [ngModel]=\"pageModel().pageSize\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (selectionChange)=\"onPerPage($event)\" />\n    </div>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-pagination{--rt-pagination-page-radius: var(--rt-pagination-box-radius);--rt-pagination-page-border-width: var(--rt-border-width-thin);--rt-pagination-focus-shadow: var(--rt-shadow-focus-ring);--rt-pagination-transition-duration: var(--rt-duration-fast);display:flex;align-items:center;justify-content:var(--rt-pagination-justify);padding:var(--rt-pagination-padding-y) var(--rt-pagination-padding-x);container-type:inline-size;gap:var(--rt-pagination-gap)}.rt-pagination rt-icon-button{--rt-icon-button-color: var(--rt-pagination-arrow-color)}.rt-pagination .rt-icon-button{--rt-icon-button-size-step: var(--rt-pagination-arrow-size);--rt-icon-button-radius: var(--rt-pagination-arrow-radius);--rt-icon-button-shadow: var(--rt-pagination-arrow-shadow)}.rt-pagination__range{display:var(--rt-pagination-range-display);color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);white-space:nowrap}.rt-pagination__nav{display:flex;align-items:center;gap:var(--rt-pagination-nav-gap)}.rt-pagination__compact{display:none;align-items:center;gap:var(--rt-space-xs)}.rt-pagination__compact-label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);white-space:nowrap}.rt-pagination__page{min-width:var(--rt-pagination-box-size);height:var(--rt-pagination-box-size);padding:0 var(--rt-space-sm);border:var(--rt-pagination-page-border-width) solid var(--rt-pagination-box-color-border);border-radius:var(--rt-pagination-page-radius);background:transparent;color:var(--rt-pagination-box-color-text);cursor:pointer;font:inherit;font-size:var(--rt-text-sm);transition:background-color var(--rt-pagination-transition-duration) ease,border-color var(--rt-pagination-transition-duration) ease,color var(--rt-pagination-transition-duration) ease}.rt-pagination__page:hover:not(:disabled,.rt-pagination__page--current){border-color:var(--rt-color-border-strong);background:var(--rt-color-bg-surface-subtle)}.rt-pagination__page:focus-visible{box-shadow:var(--rt-pagination-focus-shadow);outline:2px solid transparent;outline-offset:2px}.rt-pagination__page--current{border-color:var(--rt-pagination-box-current-color-border);background:var(--rt-pagination-box-current-color-bg);color:var(--rt-pagination-box-current-color-text);font-weight:var(--rt-pagination-box-current-font-weight)}.rt-pagination__page:disabled{cursor:default;opacity:.6}.rt-pagination__gap{padding:0 var(--rt-space-xs);color:var(--rt-color-text-muted)}.rt-pagination__per-page{--rt-input-height: var(--rt-pagination-field-height);--rt-input-radius: var(--rt-pagination-field-radius);--rt-input-color-border: var(--rt-pagination-field-color-border);--rt-input-padding-x: var(--rt-pagination-field-padding-x);--rt-input-color-bg: var(--rt-pagination-field-color-bg);--rt-input-color-text: var(--rt-pagination-field-color-text);display:flex;align-items:center;gap:var(--rt-pagination-per-page-gap)}.rt-pagination__per-page-label{color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);white-space:var(--rt-pagination-per-page-label-white-space)}.rt-pagination[data-rt-radius=none]{--rt-pagination-page-radius: var(--rt-radius-none)}.rt-pagination[data-rt-radius=xs]{--rt-pagination-page-radius: var(--rt-radius-xs)}.rt-pagination[data-rt-radius=sm]{--rt-pagination-page-radius: var(--rt-radius-sm)}.rt-pagination[data-rt-radius=ms]{--rt-pagination-page-radius: var(--rt-radius-ms)}.rt-pagination[data-rt-radius=md]{--rt-pagination-page-radius: var(--rt-radius-md)}.rt-pagination[data-rt-radius=lg]{--rt-pagination-page-radius: var(--rt-radius-lg)}.rt-pagination[data-rt-radius=xl]{--rt-pagination-page-radius: var(--rt-radius-xl)}.rt-pagination[data-rt-radius=\"2xl\"]{--rt-pagination-page-radius: var(--rt-radius-2xl)}.rt-pagination[data-rt-radius=full]{--rt-pagination-page-radius: var(--rt-radius-full)}@container (max-width: 460px){.rt-pagination__nav,.rt-pagination__range{display:none}.rt-pagination__compact{display:flex}}}\n"],
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: FormsModule
+				},
+				{
+					kind: "directive",
+					type: i2.NgControlStatus,
+					selector: "[formControlName],[ngModel],[formControl]"
+				},
+				{
+					kind: "directive",
+					type: i2.NgModel,
+					selector: "[ngModel]:not([formControlName]):not([formControl])",
+					inputs: [
+						"name",
+						"disabled",
+						"ngModel",
+						"ngModelOptions"
+					],
+					outputs: ["ngModelChange"],
+					exportAs: ["ngModel"]
+				},
+				{
+					kind: "component",
+					type: RtIconButtonComponent,
+					selector: "rt-icon-button",
+					inputs: [
+						"icon",
+						"glyph",
+						"ariaLabel",
+						"variant",
+						"iconColor",
+						"iconFill",
+						"size",
+						"iconSize",
+						"type",
+						"tooltip",
+						"tooltipHideOnClick",
+						"tabIndex",
+						"loading",
+						"disabled",
+						"active",
+						"expanded",
+						"indicator"
+					],
+					outputs: ["clicked"]
+				},
+				{
+					kind: "component",
+					type: RtSelectComponent,
+					selector: "rt-select",
+					inputs: [
+						"appearance",
+						"options",
+						"placeholder",
+						"iconLeft",
+						"filter",
+						"filterPlaceholder",
+						"panelWidth",
+						"panelMaxHeight"
+					],
+					outputs: ["selectionChange"]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ModDirective,
+					selector: "[rtMod]"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtPaginationComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-pagination",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				FormsModule,
+				RtIconButtonComponent,
+				RtSelectComponent,
+				BlockDirective,
+				ElemDirective,
+				ModDirective
+			],
+			hostDirectives: [{
+				directive: RtRadiusDirective,
+				inputs: ["radius"]
+			}],
+			host: {
+				class: BEM_BLOCK,
+				"[style.display]": "isVisible() ? null : 'none'"
+			},
+			template: "<ng-container rtBlock=\"rt-pagination\">\n    <!--\n        Ветки «ничего не найдено» здесь нет намеренно: пустой набор прячет весь\n        бар целиком (`isVisible`), так что до этой строки дело не доходит. Пока\n        такая ветка тут висела, она читалась как рабочее состояние, а показать\n        её было нельзя ни при каких входах.\n    -->\n    <span rtElem=\"range\" qa-dataid=\"pagination-range\">\n        {{ rangeLabel() }}\n    </span>\n\n    @if (pageItems().length) {\n        <nav rtElem=\"compact\" qa-dataid=\"pagination-compact\" [attr.aria-label]=\"t().uiPagination\">\n            <rt-icon-button\n                qa-dataid=\"pagination-compact-prev\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [icon]=\"prevIcon()\"\n                [ariaLabel]=\"t().uiPrevPage\"\n                [tooltip]=\"t().uiBack\"\n                [disabled]=\"isFirst() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber - 1)\" />\n\n            <span rtElem=\"compact-label\" qa-dataid=\"pagination-compact-label\">\n                {{ pageLabel() }}\n            </span>\n\n            <rt-icon-button\n                qa-dataid=\"pagination-compact-next\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [icon]=\"nextIcon()\"\n                [ariaLabel]=\"t().uiNextPage\"\n                [tooltip]=\"t().uiForward\"\n                [disabled]=\"isLast() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber + 1)\" />\n        </nav>\n\n        <nav rtElem=\"nav\" qa-dataid=\"pagination-nav\" [attr.aria-label]=\"t().uiPagination\">\n            <rt-icon-button\n                qa-dataid=\"pagination-prev\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [icon]=\"prevIcon()\"\n                [ariaLabel]=\"t().uiPrevPage\"\n                [tooltip]=\"t().uiBack\"\n                [disabled]=\"isFirst() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber - 1)\" />\n\n            @for (item of pageItems(); track $index) {\n                @if (item === 'gap') {\n                    <span rtElem=\"gap\" aria-hidden=\"true\">…</span>\n                } @else {\n                    <button\n                        rtElem=\"page\"\n                        qa-dataid=\"pagination-page\"\n                        type=\"button\"\n                        [attr.data-page]=\"item\"\n                        [rtMod]=\"{ current: item === pageModel().pageNumber }\"\n                        [attr.aria-current]=\"item === pageModel().pageNumber ? 'page' : null\"\n                        [disabled]=\"loading()\"\n                        (click)=\"goTo(item)\">\n                        {{ item }}\n                    </button>\n                }\n            }\n\n            <rt-icon-button\n                qa-dataid=\"pagination-next\"\n                variant=\"ghost\"\n                size=\"sm\"\n                [icon]=\"nextIcon()\"\n                [ariaLabel]=\"t().uiNextPage\"\n                [tooltip]=\"t().uiForward\"\n                [disabled]=\"isLast() || loading()\"\n                (clicked)=\"goTo(pageModel().pageNumber + 1)\" />\n        </nav>\n    }\n\n    <div rtElem=\"per-page\">\n        <span rtElem=\"per-page-label\">{{ t().uiPerPage }}</span>\n        <rt-select\n            qa-dataid=\"pagination-per-page\"\n            [ariaLabel]=\"t().uiItemsPerPage\"\n            [options]=\"perPageSelectOptions()\"\n            [clearable]=\"false\"\n            [ngModel]=\"pageModel().pageSize\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (selectionChange)=\"onPerPage($event)\" />\n    </div>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-pagination{--rt-pagination-page-radius: var(--rt-pagination-box-radius);--rt-pagination-page-border-width: var(--rt-border-width-thin);--rt-pagination-focus-shadow: var(--rt-shadow-focus-ring);--rt-pagination-transition-duration: var(--rt-duration-fast);display:flex;align-items:center;justify-content:var(--rt-pagination-justify);padding:var(--rt-pagination-padding-y) var(--rt-pagination-padding-x);container-type:inline-size;gap:var(--rt-pagination-gap)}.rt-pagination rt-icon-button{--rt-icon-button-color: var(--rt-pagination-arrow-color)}.rt-pagination .rt-icon-button{--rt-icon-button-size-step: var(--rt-pagination-arrow-size);--rt-icon-button-radius: var(--rt-pagination-arrow-radius);--rt-icon-button-shadow: var(--rt-pagination-arrow-shadow)}.rt-pagination__range{display:var(--rt-pagination-range-display);color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);white-space:nowrap}.rt-pagination__nav{display:flex;align-items:center;gap:var(--rt-pagination-nav-gap)}.rt-pagination__compact{display:none;align-items:center;gap:var(--rt-space-xs)}.rt-pagination__compact-label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm);white-space:nowrap}.rt-pagination__page{min-width:var(--rt-pagination-box-size);height:var(--rt-pagination-box-size);padding:0 var(--rt-space-sm);border:var(--rt-pagination-page-border-width) solid var(--rt-pagination-box-color-border);border-radius:var(--rt-pagination-page-radius);background:transparent;color:var(--rt-pagination-box-color-text);cursor:pointer;font:inherit;font-size:var(--rt-text-sm);transition:background-color var(--rt-pagination-transition-duration) ease,border-color var(--rt-pagination-transition-duration) ease,color var(--rt-pagination-transition-duration) ease}.rt-pagination__page:hover:not(:disabled,.rt-pagination__page--current){border-color:var(--rt-color-border-strong);background:var(--rt-color-bg-surface-subtle)}.rt-pagination__page:focus-visible{box-shadow:var(--rt-pagination-focus-shadow);outline:2px solid transparent;outline-offset:2px}.rt-pagination__page--current{border-color:var(--rt-pagination-box-current-color-border);background:var(--rt-pagination-box-current-color-bg);color:var(--rt-pagination-box-current-color-text);font-weight:var(--rt-pagination-box-current-font-weight)}.rt-pagination__page:disabled{cursor:default;opacity:.6}.rt-pagination__gap{padding:0 var(--rt-space-xs);color:var(--rt-color-text-muted)}.rt-pagination__per-page{--rt-input-height: var(--rt-pagination-field-height);--rt-input-radius: var(--rt-pagination-field-radius);--rt-input-color-border: var(--rt-pagination-field-color-border);--rt-input-padding-x: var(--rt-pagination-field-padding-x);--rt-input-color-bg: var(--rt-pagination-field-color-bg);--rt-input-color-text: var(--rt-pagination-field-color-text);display:flex;align-items:center;gap:var(--rt-pagination-per-page-gap)}.rt-pagination__per-page-label{color:var(--rt-color-text-muted);font-size:var(--rt-text-sm);white-space:var(--rt-pagination-per-page-label-white-space)}.rt-pagination[data-rt-radius=none]{--rt-pagination-page-radius: var(--rt-radius-none)}.rt-pagination[data-rt-radius=xs]{--rt-pagination-page-radius: var(--rt-radius-xs)}.rt-pagination[data-rt-radius=sm]{--rt-pagination-page-radius: var(--rt-radius-sm)}.rt-pagination[data-rt-radius=ms]{--rt-pagination-page-radius: var(--rt-radius-ms)}.rt-pagination[data-rt-radius=md]{--rt-pagination-page-radius: var(--rt-radius-md)}.rt-pagination[data-rt-radius=lg]{--rt-pagination-page-radius: var(--rt-radius-lg)}.rt-pagination[data-rt-radius=xl]{--rt-pagination-page-radius: var(--rt-radius-xl)}.rt-pagination[data-rt-radius=\"2xl\"]{--rt-pagination-page-radius: var(--rt-radius-2xl)}.rt-pagination[data-rt-radius=full]{--rt-pagination-page-radius: var(--rt-radius-full)}@container (max-width: 460px){.rt-pagination__nav,.rt-pagination__range{display:none}.rt-pagination__compact{display:flex}}}\n"]
+		}]
+	}],
+	propDecorators: {
+		pageModel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pageModel",
+				required: true
+			}]
+		}],
+		perPageOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "perPageOptions",
+				required: false
+			}]
+		}],
+		prevIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "prevIcon",
+				required: false
+			}]
+		}],
+		nextIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nextIcon",
+				required: false
+			}]
+		}],
+		numbering: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "numbering",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		pageChange: [{
+			type: i0.Output,
+			args: ["pageChange"]
+		}],
+		perPageChange: [{
+			type: i0.Output,
+			args: ["perPageChange"]
+		}]
+	}
+});
 export { RtPaginationComponent };
-//# sourceMappingURL=rt-tools-ui-kit-v2-pagination.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-pagination.mjs.map