@taiga-ui/kit 4.52.0-canary.bf9131e → 4.52.0-canary.c8448e0

package/fesm2022/taiga-ui-kit-components-pager.mjs

@@ -1,23 +1,24 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, inject, Input, ViewChildren, ChangeDetectionStrategy, Component } from '@angular/core';
+import { viewChildren, signal, computed, inject, input, ChangeDetectionStrategy, Component } from '@angular/core';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormsModule } from '@angular/forms';
 import { MutationObserverService, WA_MUTATION_OBSERVER_INIT } from '@ng-web-apis/mutation-observer';
-import { TuiRepeatTimes } from '@taiga-ui/cdk/directives/repeat-times';
 import { tuiWatch } from '@taiga-ui/cdk/observables';
 import { delay, map } from 'rxjs';
 
 class TuiPager {
     constructor() {
-        this.start = 0;
-        this.end = 0;
+        this.items = viewChildren('item');
+        this.start = signal(0);
+        this.end = signal(0);
         this.left = signal(0);
+        this.gap = computed(() => (this.size() === 'm' ? 9 : 7));
         this.maxWidth = toSignal(inject(MutationObserverService, { self: true }).pipe(delay(0), map(() => this.visibleWidth), tuiWatch(), takeUntilDestroyed()), { initialValue: 0 });
-        this.max = 6;
-        this.count = this.max;
-        this.size = 'm';
-        this.index = 0;
+        this.max = input(6);
+        this.count = input(6);
+        this.size = input('m');
+        this.valueContent = input();
+        this.index = input(0);
     }
     ngOnChanges() {
         this.move();
@@ -25,31 +26,29 @@ class TuiPager {
     ngAfterViewInit() {
         this.move();
     }
-    get gap() {
-        return this.size === 'm' ? 9 : 7;
-    }
     get visibleRange() {
-        const max = this.max > this.count ? this.count : this.max;
-        const start = Math.min(Math.max(this.index - Math.floor(max / 2), 0), this.count - max);
+        const max = this.max() > this.count() ? this.count() : this.max();
+        const start = Math.min(Math.max(this.index() - Math.floor(max / 2), 0), this.count() - max);
         return [start, start + (max - 1)];
     }
     get visibleWidth() {
-        return ((this.items?.map((item) => item.nativeElement.offsetWidth ?? 0) ?? [])
-            .slice(this.start, this.end + 1)
-            .reduce((sum, item) => sum + item + this.gap, 0) - this.gap);
+        return (this.items()
+            .map((item) => item.nativeElement.offsetWidth)
+            .slice(this.start(), this.end() + 1)
+            .reduce((sum, item) => sum + item + this.gap(), 0) - this.gap());
     }
     move() {
         const [start, end] = this.visibleRange;
-        this.start = start;
-        this.end = end;
-        let left = this.start * this.gap;
-        for (let i = 0; i < this.start; i++) {
-            left += this.items?.get(i)?.nativeElement.offsetWidth ?? 0;
+        this.start.set(start);
+        this.end.set(end);
+        let left = this.start() * this.gap();
+        for (let i = 0; i < this.start(); i++) {
+            left += this.items()[i]?.nativeElement.offsetWidth ?? 0;
         }
         this.left.set(-1 * left);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiPager, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TuiPager, isStandalone: true, selector: "tui-pager", inputs: { max: "max", count: "count", size: "size", valueContent: "valueContent", index: "index" }, host: { properties: { "attr.data-size": "size", "style.--t-gap.px": "gap", "style.max-width.px": "maxWidth()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiPager, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiPager, isStandalone: true, selector: "tui-pager", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, valueContent: { classPropertyName: "valueContent", publicName: "valueContent", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "style.--t-gap.px": "gap()", "style.max-width.px": "maxWidth()" } }, providers: [
             MutationObserverService,
             {
                 provide: WA_MUTATION_OBSERVER_INIT,
@@ -60,11 +59,11 @@ class TuiPager {
                     subtree: true,
                 },
             },
-        ], viewQueries: [{ propertyName: "items", predicate: ["item"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"t-items\"\n    [style.transform]=\"`translateX(calc(var(--tui-inline) * ${left()}px))`\"\n>\n    <div\n        *tuiRepeatTimes=\"let i of count\"\n        #item\n        class=\"t-item\"\n        [attr.data-index]=\"i\"\n        [class._active]=\"i === index\"\n        [class._last]=\"i === count - 1\"\n        [class._post-active]=\"i === index + 1\"\n        [class._pre-active]=\"i === index - 1\"\n        [class._pre-last]=\"i === count - 2\"\n        [class._visible]=\"i >= start && i <= end\"\n    >\n        <ng-container *ngTemplateOutlet=\"valueContent || null; context: {$implicit: i}\" />\n    </div>\n</div>\n", styles: [":host{display:flex;align-items:center;overflow:hidden}:host[data-size=m]{--t-size: .5rem;--t-small-dot: scale(.75);--t-super-small-dot: scale(.5);--t-icon-size: 1rem;min-block-size:1.25rem}:host-context(tui-root._mobile) :host[data-size=m]{--t-icon-size: .875rem}:host[data-size=s]{--t-size: .375rem;--t-small-dot: scale(.666);--t-super-small-dot: scale(.333);--t-icon-size: .75rem;min-block-size:1rem}:host-context(tui-root._mobile) :host[data-size=s]{--t-icon-size: .6875rem}.t-items{display:flex;gap:var(--t-gap);transition:transform var(--tui-duration-fast, .15s) var(--tui-curve-productive-standard, cubic-bezier(.2, 0, .4, .9))}.t-item{display:flex;align-self:center;align-items:center;justify-content:center;color:var(--tui-background-neutral-2)}.t-item._active{color:var(--tui-background-accent-1)}.t-item:empty:before{content:\"\";display:flex;min-inline-size:var(--t-size);min-block-size:var(--t-size);border-radius:100%;background:currentColor;transition:inherit}.t-item:empty:not(._visible):before,.t-item:empty:not(._visible)+.t-item:not(._active):not(._pre-active):empty:before,.t-item:empty:not(._last):not(._post-active):not(._active):nth-last-child(1 of._visible):before{transform:var(--t-super-small-dot)!important}.t-item:empty:not(._last)._post-active:nth-last-child(1 of._visible):before,.t-item:empty:not(._visible)+.t-item._pre-active:empty:before,.t-item:empty:not(._visible)+.t-item:empty+.t-item:not(._active):empty:before,.t-item:empty:not(._pre-last):nth-last-child(2 of._visible):not(._active):before{transform:var(--t-small-dot)}.t-item:empty+.t-item:not(:empty)._pre-last{transform:scale(.64)}.t-item:empty+.t-item:not(:empty)._pre-last:nth-last-child(2 of._visible){transform:scale(1)}.t-item::ng-deep>tui-icon{inline-size:var(--t-icon-size);block-size:var(--t-icon-size)}.t-item,.t-item::ng-deep>tui-icon{transition:all var(--tui-duration-fast, .15s) var(--tui-curve-productive-standard, cubic-bezier(.2, 0, .4, .9))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TuiRepeatTimes, selector: "[tuiRepeatTimes][tuiRepeatTimesOf]", inputs: ["tuiRepeatTimesOf"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "items", predicate: ["item"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"t-items\"\n    [style.transform]=\"`translateX(calc(var(--tui-inline) * ${left()}px))`\"\n>\n    @for (_ of '-'.repeat(count()); track $index) {\n        <div\n            #item\n            class=\"t-item\"\n            [attr.data-index]=\"$index\"\n            [class._active]=\"$index === index()\"\n            [class._last]=\"$index === count() - 1\"\n            [class._post-active]=\"$index === index() + 1\"\n            [class._pre-active]=\"$index === index() - 1\"\n            [class._pre-last]=\"$index === count() - 2\"\n            [class._visible]=\"$index >= start() && $index <= end()\"\n        >\n            <ng-container *ngTemplateOutlet=\"valueContent() || null; context: {$implicit: $index}\" />\n        </div>\n    }\n</div>\n", styles: [":host{display:flex;align-items:center;overflow:hidden}:host[data-size=m]{--t-size: .5rem;--t-small-dot: scale(.75);--t-super-small-dot: scale(.5);--t-icon-size: 1rem;min-block-size:1.25rem}:host-context(tui-root._mobile) :host[data-size=m]{--t-icon-size: .875rem}:host[data-size=s]{--t-size: .375rem;--t-small-dot: scale(.666);--t-super-small-dot: scale(.333);--t-icon-size: .75rem;min-block-size:1rem}:host-context(tui-root._mobile) :host[data-size=s]{--t-icon-size: .6875rem}.t-items{display:flex;gap:var(--t-gap);transition:transform var(--tui-duration-fast, .15s) var(--tui-curve-productive-standard, cubic-bezier(.2, 0, .4, .9))}.t-item{display:flex;align-self:center;align-items:center;justify-content:center;color:var(--tui-background-neutral-2)}.t-item._active{color:var(--tui-background-accent-1)}.t-item:empty:before{content:\"\";display:flex;min-inline-size:var(--t-size);min-block-size:var(--t-size);border-radius:100%;background:currentColor;transition:inherit}.t-item:empty:not(._visible):before,.t-item:empty:not(._visible)+.t-item:not(._active):not(._pre-active):empty:before,.t-item:empty:not(._last):not(._post-active):not(._active):nth-last-child(1 of._visible):before{transform:var(--t-super-small-dot)!important}.t-item:empty:not(._last)._post-active:nth-last-child(1 of._visible):before,.t-item:empty:not(._visible)+.t-item._pre-active:empty:before,.t-item:empty:not(._visible)+.t-item:empty+.t-item:not(._active):empty:before,.t-item:empty:not(._pre-last):nth-last-child(2 of._visible):not(._active):before{transform:var(--t-small-dot)}.t-item:empty+.t-item:not(:empty)._pre-last{transform:scale(.64)}.t-item:empty+.t-item:not(:empty)._pre-last:nth-last-child(2 of._visible){transform:scale(1)}.t-item::ng-deep>tui-icon{inline-size:var(--t-icon-size);block-size:var(--t-icon-size)}.t-item,.t-item::ng-deep>tui-icon{transition:all var(--tui-duration-fast, .15s) var(--tui-curve-productive-standard, cubic-bezier(.2, 0, .4, .9))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiPager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiPager, decorators: [{
             type: Component,
-            args: [{ selector: 'tui-pager', imports: [FormsModule, NgTemplateOutlet, TuiRepeatTimes], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'tui-pager', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         MutationObserverService,
                         {
                             provide: WA_MUTATION_OBSERVER_INIT,
@@ -76,24 +75,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             },
                         },
                     ], host: {
-                        '[attr.data-size]': 'size',
-                        '[style.--t-gap.px]': 'gap',
+                        '[attr.data-size]': 'size()',
+                        '[style.--t-gap.px]': 'gap()',
                         '[style.max-width.px]': 'maxWidth()',
-                    }, template: "<div\n    class=\"t-items\"\n    [style.transform]=\"`translateX(calc(var(--tui-inline) * ${left()}px))`\"\n>\n    <div\n        *tuiRepeatTimes=\"let i of count\"\n        #item\n        class=\"t-item\"\n        [attr.data-index]=\"i\"\n        [class._active]=\"i === index\"\n        [class._last]=\"i === count - 1\"\n        [class._post-active]=\"i === index + 1\"\n        [class._pre-active]=\"i === index - 1\"\n        [class._pre-last]=\"i === count - 2\"\n        [class._visible]=\"i >= start && i <= end\"\n    >\n        <ng-container *ngTemplateOutlet=\"valueContent || null; context: {$implicit: i}\" />\n    </div>\n</div>\n", styles: [":host{display:flex;align-items:center;overflow:hidden}:host[data-size=m]{--t-size: .5rem;--t-small-dot: scale(.75);--t-super-small-dot: scale(.5);--t-icon-size: 1rem;min-block-size:1.25rem}:host-context(tui-root._mobile) :host[data-size=m]{--t-icon-size: .875rem}:host[data-size=s]{--t-size: .375rem;--t-small-dot: scale(.666);--t-super-small-dot: scale(.333);--t-icon-size: .75rem;min-block-size:1rem}:host-context(tui-root._mobile) :host[data-size=s]{--t-icon-size: .6875rem}.t-items{display:flex;gap:var(--t-gap);transition:transform var(--tui-duration-fast, .15s) var(--tui-curve-productive-standard, cubic-bezier(.2, 0, .4, .9))}.t-item{display:flex;align-self:center;align-items:center;justify-content:center;color:var(--tui-background-neutral-2)}.t-item._active{color:var(--tui-background-accent-1)}.t-item:empty:before{content:\"\";display:flex;min-inline-size:var(--t-size);min-block-size:var(--t-size);border-radius:100%;background:currentColor;transition:inherit}.t-item:empty:not(._visible):before,.t-item:empty:not(._visible)+.t-item:not(._active):not(._pre-active):empty:before,.t-item:empty:not(._last):not(._post-active):not(._active):nth-last-child(1 of._visible):before{transform:var(--t-super-small-dot)!important}.t-item:empty:not(._last)._post-active:nth-last-child(1 of._visible):before,.t-item:empty:not(._visible)+.t-item._pre-active:empty:before,.t-item:empty:not(._visible)+.t-item:empty+.t-item:not(._active):empty:before,.t-item:empty:not(._pre-last):nth-last-child(2 of._visible):not(._active):before{transform:var(--t-small-dot)}.t-item:empty+.t-item:not(:empty)._pre-last{transform:scale(.64)}.t-item:empty+.t-item:not(:empty)._pre-last:nth-last-child(2 of._visible){transform:scale(1)}.t-item::ng-deep>tui-icon{inline-size:var(--t-icon-size);block-size:var(--t-icon-size)}.t-item,.t-item::ng-deep>tui-icon{transition:all var(--tui-duration-fast, .15s) var(--tui-curve-productive-standard, cubic-bezier(.2, 0, .4, .9))}\n"] }]
-        }], propDecorators: { items: [{
-                type: ViewChildren,
-                args: ['item']
-            }], max: [{
-                type: Input
-            }], count: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], valueContent: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }] } });
+                    }, template: "<div\n    class=\"t-items\"\n    [style.transform]=\"`translateX(calc(var(--tui-inline) * ${left()}px))`\"\n>\n    @for (_ of '-'.repeat(count()); track $index) {\n        <div\n            #item\n            class=\"t-item\"\n            [attr.data-index]=\"$index\"\n            [class._active]=\"$index === index()\"\n            [class._last]=\"$index === count() - 1\"\n            [class._post-active]=\"$index === index() + 1\"\n            [class._pre-active]=\"$index === index() - 1\"\n            [class._pre-last]=\"$index === count() - 2\"\n            [class._visible]=\"$index >= start() && $index <= end()\"\n        >\n            <ng-container *ngTemplateOutlet=\"valueContent() || null; context: {$implicit: $index}\" />\n        </div>\n    }\n</div>\n", styles: [":host{display:flex;align-items:center;overflow:hidden}:host[data-size=m]{--t-size: .5rem;--t-small-dot: scale(.75);--t-super-small-dot: scale(.5);--t-icon-size: 1rem;min-block-size:1.25rem}:host-context(tui-root._mobile) :host[data-size=m]{--t-icon-size: .875rem}:host[data-size=s]{--t-size: .375rem;--t-small-dot: scale(.666);--t-super-small-dot: scale(.333);--t-icon-size: .75rem;min-block-size:1rem}:host-context(tui-root._mobile) :host[data-size=s]{--t-icon-size: .6875rem}.t-items{display:flex;gap:var(--t-gap);transition:transform var(--tui-duration-fast, .15s) var(--tui-curve-productive-standard, cubic-bezier(.2, 0, .4, .9))}.t-item{display:flex;align-self:center;align-items:center;justify-content:center;color:var(--tui-background-neutral-2)}.t-item._active{color:var(--tui-background-accent-1)}.t-item:empty:before{content:\"\";display:flex;min-inline-size:var(--t-size);min-block-size:var(--t-size);border-radius:100%;background:currentColor;transition:inherit}.t-item:empty:not(._visible):before,.t-item:empty:not(._visible)+.t-item:not(._active):not(._pre-active):empty:before,.t-item:empty:not(._last):not(._post-active):not(._active):nth-last-child(1 of._visible):before{transform:var(--t-super-small-dot)!important}.t-item:empty:not(._last)._post-active:nth-last-child(1 of._visible):before,.t-item:empty:not(._visible)+.t-item._pre-active:empty:before,.t-item:empty:not(._visible)+.t-item:empty+.t-item:not(._active):empty:before,.t-item:empty:not(._pre-last):nth-last-child(2 of._visible):not(._active):before{transform:var(--t-small-dot)}.t-item:empty+.t-item:not(:empty)._pre-last{transform:scale(.64)}.t-item:empty+.t-item:not(:empty)._pre-last:nth-last-child(2 of._visible){transform:scale(1)}.t-item::ng-deep>tui-icon{inline-size:var(--t-icon-size);block-size:var(--t-icon-size)}.t-item,.t-item::ng-deep>tui-icon{transition:all var(--tui-duration-fast, .15s) var(--tui-curve-productive-standard, cubic-bezier(.2, 0, .4, .9))}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/taiga-ui-kit-components-pager.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-kit-components-pager.mjs","sources":["../../../projects/kit/components/pager/pager.component.ts","../../../projects/kit/components/pager/pager.component.html","../../../projects/kit/components/pager/taiga-ui-kit-components-pager.ts"],"sourcesContent":["import {NgTemplateOutlet} from '@angular/common';\nimport {\n    type AfterViewInit,\n    ChangeDetectionStrategy,\n    Component,\n    type ElementRef,\n    inject,\n    Input,\n    type OnChanges,\n    type QueryList,\n    signal,\n    type TemplateRef,\n    ViewChildren,\n} from '@angular/core';\nimport {takeUntilDestroyed, toSignal} from '@angular/core/rxjs-interop';\nimport {FormsModule} from '@angular/forms';\nimport {\n    MutationObserverService,\n    WA_MUTATION_OBSERVER_INIT,\n} from '@ng-web-apis/mutation-observer';\nimport {TuiRepeatTimes} from '@taiga-ui/cdk/directives/repeat-times';\nimport {tuiWatch} from '@taiga-ui/cdk/observables';\nimport {type TuiSizeS} from '@taiga-ui/core/types';\nimport {delay, map} from 'rxjs';\n\n@Component({\n    selector: 'tui-pager',\n    imports: [FormsModule, NgTemplateOutlet, TuiRepeatTimes],\n    templateUrl: './pager.component.html',\n    styleUrl: './pager.styles.less',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [\n        MutationObserverService,\n        {\n            provide: WA_MUTATION_OBSERVER_INIT,\n            useValue: {\n                attributeOldValue: true,\n                characterData: true,\n                childList: true,\n                subtree: true,\n            },\n        },\n    ],\n    host: {\n        '[attr.data-size]': 'size',\n        '[style.--t-gap.px]': 'gap',\n        '[style.max-width.px]': 'maxWidth()',\n    },\n})\nexport class TuiPager implements OnChanges, AfterViewInit {\n    @ViewChildren('item')\n    protected items?: QueryList<ElementRef<HTMLElement>>;\n\n    protected start = 0;\n    protected end = 0;\n    protected left = signal(0);\n    protected readonly maxWidth = toSignal(\n        inject(MutationObserverService, {self: true}).pipe(\n            delay(0),\n            map(() => this.visibleWidth),\n            tuiWatch(),\n            takeUntilDestroyed(),\n        ),\n        {initialValue: 0},\n    );\n\n    @Input()\n    public max = 6;\n\n    @Input()\n    public count = this.max;\n\n    @Input()\n    public size: TuiSizeS = 'm';\n\n    @Input()\n    public valueContent?: TemplateRef<unknown>;\n\n    @Input()\n    public index = 0;\n\n    public ngOnChanges(): void {\n        this.move();\n    }\n\n    public ngAfterViewInit(): void {\n        this.move();\n    }\n\n    protected get gap(): number {\n        return this.size === 'm' ? 9 : 7;\n    }\n\n    private get visibleRange(): [start: number, end: number] {\n        const max = this.max > this.count ? this.count : this.max;\n\n        const start = Math.min(\n            Math.max(this.index - Math.floor(max / 2), 0),\n            this.count - max,\n        );\n\n        return [start, start + (max - 1)];\n    }\n\n    private get visibleWidth(): number {\n        return (\n            (this.items?.map((item) => item.nativeElement.offsetWidth ?? 0) ?? [])\n                .slice(this.start, this.end + 1)\n                .reduce((sum, item) => sum + item + this.gap, 0) - this.gap\n        );\n    }\n\n    private move(): void {\n        const [start, end] = this.visibleRange;\n\n        this.start = start;\n        this.end = end;\n\n        let left = this.start * this.gap;\n\n        for (let i = 0; i < this.start; i++) {\n            left += this.items?.get(i)?.nativeElement.offsetWidth ?? 0;\n        }\n\n        this.left.set(-1 * left);\n    }\n}\n","<div\n    class=\"t-items\"\n    [style.transform]=\"`translateX(calc(var(--tui-inline) * ${left()}px))`\"\n>\n    <div\n        *tuiRepeatTimes=\"let i of count\"\n        #item\n        class=\"t-item\"\n        [attr.data-index]=\"i\"\n        [class._active]=\"i === index\"\n        [class._last]=\"i === count - 1\"\n        [class._post-active]=\"i === index + 1\"\n        [class._pre-active]=\"i === index - 1\"\n        [class._pre-last]=\"i === count - 2\"\n        [class._visible]=\"i >= start && i <= end\"\n    >\n        <ng-container *ngTemplateOutlet=\"valueContent || null; context: {$implicit: i}\" />\n    </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"taiga-ui-kit-components-pager.mjs","sources":["../../../projects/kit/components/pager/pager.component.ts","../../../projects/kit/components/pager/pager.component.html","../../../projects/kit/components/pager/taiga-ui-kit-components-pager.ts"],"sourcesContent":["import {NgTemplateOutlet} from '@angular/common';\nimport {\n    type AfterViewInit,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    type ElementRef,\n    inject,\n    input,\n    type OnChanges,\n    signal,\n    type TemplateRef,\n    viewChildren,\n} from '@angular/core';\nimport {takeUntilDestroyed, toSignal} from '@angular/core/rxjs-interop';\nimport {\n    MutationObserverService,\n    WA_MUTATION_OBSERVER_INIT,\n} from '@ng-web-apis/mutation-observer';\nimport {tuiWatch} from '@taiga-ui/cdk/observables';\nimport {type TuiSizeS} from '@taiga-ui/core/types';\nimport {delay, map} from 'rxjs';\n\n@Component({\n    selector: 'tui-pager',\n    imports: [NgTemplateOutlet],\n    templateUrl: './pager.component.html',\n    styleUrl: './pager.styles.less',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [\n        MutationObserverService,\n        {\n            provide: WA_MUTATION_OBSERVER_INIT,\n            useValue: {\n                attributeOldValue: true,\n                characterData: true,\n                childList: true,\n                subtree: true,\n            },\n        },\n    ],\n    host: {\n        '[attr.data-size]': 'size()',\n        '[style.--t-gap.px]': 'gap()',\n        '[style.max-width.px]': 'maxWidth()',\n    },\n})\nexport class TuiPager implements OnChanges, AfterViewInit {\n    protected readonly items = viewChildren<ElementRef<HTMLElement>>('item');\n    protected readonly start = signal(0);\n    protected readonly end = signal(0);\n    protected readonly left = signal(0);\n    protected readonly gap = computed(() => (this.size() === 'm' ? 9 : 7));\n    protected readonly maxWidth = toSignal(\n        inject(MutationObserverService, {self: true}).pipe(\n            delay(0),\n            map(() => this.visibleWidth),\n            tuiWatch(),\n            takeUntilDestroyed(),\n        ),\n        {initialValue: 0},\n    );\n\n    public readonly max = input(6);\n    public readonly count = input(6);\n    public readonly size = input<TuiSizeS>('m');\n    public readonly valueContent = input<TemplateRef<unknown>>();\n    public readonly index = input(0);\n\n    public ngOnChanges(): void {\n        this.move();\n    }\n\n    public ngAfterViewInit(): void {\n        this.move();\n    }\n\n    private get visibleRange(): [start: number, end: number] {\n        const max = this.max() > this.count() ? this.count() : this.max();\n        const start = Math.min(\n            Math.max(this.index() - Math.floor(max / 2), 0),\n            this.count() - max,\n        );\n\n        return [start, start + (max - 1)];\n    }\n\n    private get visibleWidth(): number {\n        return (\n            this.items()\n                .map((item) => item.nativeElement.offsetWidth)\n                .slice(this.start(), this.end() + 1)\n                .reduce((sum, item) => sum + item + this.gap(), 0) - this.gap()\n        );\n    }\n\n    private move(): void {\n        const [start, end] = this.visibleRange;\n\n        this.start.set(start);\n        this.end.set(end);\n\n        let left = this.start() * this.gap();\n\n        for (let i = 0; i < this.start(); i++) {\n            left += this.items()[i]?.nativeElement.offsetWidth ?? 0;\n        }\n\n        this.left.set(-1 * left);\n    }\n}\n","<div\n    class=\"t-items\"\n    [style.transform]=\"`translateX(calc(var(--tui-inline) * ${left()}px))`\"\n>\n    @for (_ of '-'.repeat(count()); track $index) {\n        <div\n            #item\n            class=\"t-item\"\n            [attr.data-index]=\"$index\"\n            [class._active]=\"$index === index()\"\n            [class._last]=\"$index === count() - 1\"\n            [class._post-active]=\"$index === index() + 1\"\n            [class._pre-active]=\"$index === index() - 1\"\n            [class._pre-last]=\"$index === count() - 2\"\n            [class._visible]=\"$index >= start() && $index <= end()\"\n        >\n            <ng-container *ngTemplateOutlet=\"valueContent() || null; context: {$implicit: $index}\" />\n        </div>\n    }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/taiga-ui-kit-components-pagination.mjs

@@ -1,80 +1,69 @@
 import * as i0 from '@angular/core';
-import { inject, EventEmitter, ElementRef, Output, Input, ViewChildren, ChangeDetectionStrategy, Component } from '@angular/core';
-import { EMPTY_QUERY } from '@taiga-ui/cdk/constants';
-import { TuiLet } from '@taiga-ui/cdk/directives/let';
-import { TuiRepeatTimes } from '@taiga-ui/cdk/directives/repeat-times';
+import { viewChildren, ElementRef, computed, inject, input, model, ChangeDetectionStrategy, Component } from '@angular/core';
 import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
 import { tuiIsFocusedIn } from '@taiga-ui/cdk/utils/focus';
 import { tuiClamp } from '@taiga-ui/cdk/utils/math';
 import { TuiButton } from '@taiga-ui/core/components/button';
-import { TUI_SPIN_ICONS } from '@taiga-ui/core/tokens';
+import { TUI_COMMON_ICONS } from '@taiga-ui/core/tokens';
 import { TUI_PAGINATION_TEXTS } from '@taiga-ui/kit/tokens';
 import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
+import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
 
-const DOTS_LENGTH = 1;
+const [TUI_PAGINATION_OPTIONS, tuiPaginationOptionsProvider] = tuiCreateOptions({
+    size: 'l',
+    appearance: (isActive) => (isActive ? 'primary' : 'flat'),
+});
+
+const ELLIPSIS_ITEM_LENGTH = 1;
 const ACTIVE_ITEM_LENGTH = 1;
 class TuiPagination {
     constructor() {
-        this.els = EMPTY_QUERY;
+        this.els = viewChildren('element', { read: ElementRef });
         this.el = tuiInjectElement();
+        this.maxHalfLength = computed(() => this.sidePadding() + ELLIPSIS_ITEM_LENGTH + this.activePadding());
+        this.maxElementsLength = computed(() => this.maxHalfLength() * 2 + ACTIVE_ITEM_LENGTH);
+        this.lastElementIndex = computed(() => this.elementsLength() - 1);
+        this.itemsFit = computed(() => this.length() <= this.maxElementsLength());
+        this.lastIndex = computed(() => this.length() - 1);
+        this.reverseIndex = computed(() => this.lastIndex() - this.index());
         this.texts = inject(TUI_PAGINATION_TEXTS);
-        this.icons = inject(TUI_SPIN_ICONS);
-        this.length = 1;
-        this.focusable = true;
-        this.size = 'l';
-        this.disabled = false;
-        /**
-         * Amount of visible pages around active page
-         */
-        this.activePadding = 1;
-        /**
-         * Amount of visible pages at the edges
-         */
-        this.sidePadding = 1;
-        /**
-         * Active page index
-         */
-        this.index = 0;
-        this.indexChange = new EventEmitter();
-    }
-    get nativeFocusableElement() {
-        if (this.disabled) {
-            return null;
-        }
-        let activeElementIndex = 0;
-        const { elementsLength } = this;
-        for (let i = 0; i < elementsLength; i++) {
-            const itemIndex = this.getItemIndexByElementIndex(i);
-            if (itemIndex) {
-                activeElementIndex++;
+        this.icons = inject(TUI_COMMON_ICONS);
+        this.options = inject(TUI_PAGINATION_OPTIONS);
+        this.buttonSize = computed(() => (this.size() === 'm' ? 'xs' : 's'));
+        this.elementsLength = computed(() => this.itemsFit() ? this.length() : this.maxElementsLength());
+        this.length = input(1);
+        this.focusable = input(true);
+        this.size = input(this.options.size);
+        this.disabled = input(false);
+        this.activePadding = input(1);
+        this.sidePadding = input(1);
+        this.content = input();
+        this.index = model(0);
+        this.arrowIsDisabledRight = computed(() => this.reverseIndex() === 0);
+        this.arrowIsDisabledLeft = computed(() => this.index() === 0);
+        this.nativeFocusableElement = computed(() => {
+            if (this.disabled()) {
+                return null;
             }
-            if (itemIndex === this.index) {
-                break;
+            let activeElementIndex = 0;
+            for (let i = 0; i < this.elementsLength(); i++) {
+                const itemIndex = this.getItemIndexByElementIndex(i);
+                if (itemIndex) {
+                    activeElementIndex++;
+                }
+                if (itemIndex === this.index()) {
+                    break;
+                }
             }
-        }
-        return (this.els.find((_, index) => index === activeElementIndex)?.nativeElement ??
-            null);
+            return (this.els().find((_, index) => index === activeElementIndex)?.nativeElement ??
+                null);
+        });
     }
     get focused() {
         return tuiIsFocusedIn(this.el);
     }
-    get arrowIsDisabledLeft() {
-        return this.index === 0;
-    }
-    get arrowIsDisabledRight() {
-        return this.reverseIndex === 0;
-    }
-    /**
-     * Number of items in a container.
-     */
-    get elementsLength() {
-        return this.itemsFit ? this.length : this.maxElementsLength;
-    }
-    get buttonSize() {
-        return this.size === 'm' ? 'xs' : 's';
-    }
     elementIsFocusable(index) {
-        return this.index === index && !this.focused;
+        return this.index() === index && !this.focused;
     }
     /**
      * Get index by element index
@@ -82,80 +71,46 @@ class TuiPagination {
      * @returns index or null (for '…')
      */
     getItemIndexByElementIndex(elementIndex) {
-        if (this.size === 's') {
+        const reverseElementIndex = this.lastElementIndex() - elementIndex;
+        if (elementIndex < this.sidePadding()) {
             return elementIndex;
         }
-        if (elementIndex < this.sidePadding) {
-            return elementIndex;
+        if (reverseElementIndex < this.sidePadding()) {
+            return this.lastIndex() - reverseElementIndex;
         }
-        if (elementIndex === this.sidePadding && this.hasCollapsedItems(this.index)) {
+        if (elementIndex === this.sidePadding() && this.hasCollapsedItems(this.index())) {
             return null;
         }
-        const reverseElementIndex = this.lastElementIndex - elementIndex;
-        if (reverseElementIndex === this.sidePadding &&
-            this.hasCollapsedItems(this.reverseIndex)) {
+        if (reverseElementIndex === this.sidePadding() &&
+            this.hasCollapsedItems(this.reverseIndex())) {
             return null;
         }
-        if (reverseElementIndex < this.sidePadding) {
-            return this.lastIndex - reverseElementIndex;
-        }
-        const computedIndex = this.index - this.maxHalfLength + elementIndex;
-        return tuiClamp(computedIndex, elementIndex, this.lastIndex - reverseElementIndex);
+        const computedIndex = this.index() - this.maxHalfLength() + elementIndex;
+        return tuiClamp(computedIndex, elementIndex, this.lastIndex() - reverseElementIndex);
     }
-    getElementMode(index) {
-        const fallback = this.size === 's' ? 'secondary' : 'flat';
-        return this.index === index ? 'primary' : fallback;
+    getElementMode(index = -1) {
+        return this.options.appearance(this.index() === index);
     }
     onElementClick(index) {
         this.updateIndex(index);
     }
     onElementKeyDownArrowLeft(element) {
-        if (element === this.els.first.nativeElement) {
+        if (element === this.els()[0]?.nativeElement) {
             return;
         }
-        const previous = this.els.find((_, index, array) => array[index + 1]?.nativeElement === element);
+        const previous = this.els().find((_, index, array) => array[index + 1]?.nativeElement === element);
         previous?.nativeElement.focus();
     }
     onElementKeyDownArrowRight(element) {
-        if (element === this.els.last.nativeElement) {
+        if (element === this.els()[this.els().length - 1]?.nativeElement) {
             return;
         }
-        const next = this.els.find((_, index, array) => array[index - 1]?.nativeElement === element);
+        const next = this.els().find((_, index, array) => array[index - 1]?.nativeElement === element);
         next?.nativeElement.focus();
     }
-    onArrowClick(direction) {
-        this.tryChangeTo(direction);
-        this.focusActive();
-    }
-    /**
-     * Active index from the end
-     */
-    get reverseIndex() {
-        return this.lastIndex - this.index;
-    }
-    /**
-     * Max number of elements in half (not counting the middle one).
-     */
-    get maxHalfLength() {
-        return this.sidePadding + DOTS_LENGTH + this.activePadding;
-    }
-    /**
-     * Is there '...' anywhere
-     */
-    get itemsFit() {
-        return this.length <= this.maxElementsLength;
-    }
-    /**
-     * Max number of elements
-     */
-    get maxElementsLength() {
-        return this.maxHalfLength * 2 + ACTIVE_ITEM_LENGTH;
-    }
-    get lastIndex() {
-        return this.length - 1;
-    }
-    get lastElementIndex() {
-        return this.elementsLength - 1;
+    onArrowClick(step) {
+        this.tryChangeTo(step);
+        this.nativeFocusableElement()?.focus();
     }
     /**
      * Are there collapsed items at that index
@@ -163,56 +118,27 @@ class TuiPagination {
      * @returns there are collapsed items
      */
     hasCollapsedItems(index) {
-        return !this.itemsFit && index > this.maxHalfLength;
+        return !this.itemsFit() && index > this.maxHalfLength();
     }
-    tryChangeTo(direction) {
-        this.updateIndex(tuiClamp(this.index + (direction === 'right' ? 1 : -1), 0, this.lastIndex));
-    }
-    focusActive() {
-        const { nativeFocusableElement } = this;
-        if (nativeFocusableElement) {
-            nativeFocusableElement.focus();
-        }
+    tryChangeTo(step) {
+        this.updateIndex(tuiClamp(this.index() + step, 0, this.lastIndex()));
     }
     updateIndex(index) {
-        if (this.index === index) {
-            return;
+        if (this.index() !== index) {
+            this.index.set(index);
         }
-        this.index = index;
-        this.indexChange.emit(index);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiPagination, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TuiPagination, isStandalone: true, selector: "tui-pagination", inputs: { length: "length", focusable: "focusable", size: "size", disabled: "disabled", activePadding: "activePadding", sidePadding: "sidePadding", content: "content", index: "index" }, outputs: { indexChange: "indexChange" }, viewQueries: [{ propertyName: "els", predicate: ["element"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"t-content\">\n    @if (size !== 's') {\n        <button\n            appearance=\"flat\"\n            tabIndex=\"-1\"\n            tuiIconButton\n            type=\"button\"\n            class=\"t-button\"\n            [disabled]=\"arrowIsDisabledLeft\"\n            [iconStart]=\"icons.decrement\"\n            [size]=\"buttonSize\"\n            (click)=\"onArrowClick('left')\"\n            (mousedown.zoneless.prevent)=\"(0)\"\n        >\n            {{ texts()[0] }}\n        </button>\n        <ng-container *tuiRepeatTimes=\"let elementIndex of elementsLength\">\n            <ng-container *tuiLet=\"getItemIndexByElementIndex(elementIndex) as index\">\n                @if (index !== null) {\n                    <button\n                        #element\n                        automation-id=\"tui-pagination__element\"\n                        tuiButton\n                        type=\"button\"\n                        class=\"t-button\"\n                        [appearance]=\"getElementMode(index)\"\n                        [disabled]=\"disabled\"\n                        [size]=\"buttonSize\"\n                        [tabIndex]=\"elementIsFocusable(index) ? 0 : -1\"\n                        (click)=\"onElementClick(index)\"\n                        (keydown.arrowLeft.prevent)=\"onElementKeyDownArrowLeft(element)\"\n                        (keydown.arrowRight.prevent)=\"onElementKeyDownArrowRight(element)\"\n                    >\n                        <ng-container *polymorpheusOutlet=\"content || index + 1 as text; context: {$implicit: index}\">\n                            {{ text }}\n                        </ng-container>\n                    </button>\n                } @else {\n                    <div\n                        automation-id=\"tui-pagination__element\"\n                        class=\"t-dots\"\n                        [class.t-dots_small]=\"size === 'm'\"\n                    ></div>\n                }\n            </ng-container>\n        </ng-container>\n        <button\n            appearance=\"flat\"\n            tabIndex=\"-1\"\n            tuiIconButton\n            type=\"button\"\n            class=\"t-button\"\n            [disabled]=\"arrowIsDisabledRight\"\n            [iconStart]=\"icons.increment\"\n            [size]=\"buttonSize\"\n            (click)=\"onArrowClick('right')\"\n            (mousedown.zoneless.prevent)=\"(0)\"\n        >\n            {{ texts()[1] }}\n        </button>\n    } @else {\n        <button\n            *tuiRepeatTimes=\"let indexItem of length\"\n            #element\n            tuiButton\n            type=\"button\"\n            class=\"t-button t-button_small\"\n            [appearance]=\"getElementMode(indexItem)\"\n            [disabled]=\"disabled\"\n            [tabIndex]=\"elementIsFocusable(indexItem) ? 0 : -1\"\n            (click)=\"onElementClick(indexItem)\"\n            (keydown.arrowLeft.prevent)=\"onElementKeyDownArrowLeft(element)\"\n            (keydown.arrowRight.prevent)=\"onElementKeyDownArrowRight(element)\"\n        >\n            {{ indexItem + 1 }}\n        </button>\n    }\n</div>\n", styles: [":host{display:block;font:var(--tui-font-text-s);color:var(--tui-text-primary);text-align:center}.t-content{display:flex;justify-content:center}.t-button{margin:0 .125rem;flex-shrink:0}.t-button[tuiButton]:not(.t-button_small){min-inline-size:var(--tui-height-s);padding:0 .5rem}.t-button[tuiButton]:not(.t-button_small)[data-size=xs]{min-inline-size:var(--tui-height-xs);padding:0 .375rem}.t-button:first-child{transform:scaleX(var(--tui-inline));margin-inline-start:0}.t-button:last-child{transform:scaleX(var(--tui-inline));margin-inline-end:0}.t-button[data-size=xs]{min-inline-size:var(--tui-height-xs);padding:0 .375rem}.t-button.t-button.t-button_small{inline-size:.5rem;block-size:.5rem;font-size:0;padding:0;margin:0}.t-button.t-button.t-button_small:not(:first-child){margin-inline-start:.5rem}.t-dots{inline-size:var(--tui-height-s);block-size:var(--tui-height-s);line-height:var(--tui-height-s);margin:0 .125rem;flex-shrink:0;color:var(--tui-text-action);text-align:center;cursor:default}.t-dots_small{inline-size:var(--tui-height-xs);block-size:var(--tui-height-xs);line-height:var(--tui-height-xs)}.t-dots:before{content:\"\\2026\"}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiLet, selector: "[tuiLet]", inputs: ["tuiLet"] }, { kind: "directive", type: TuiRepeatTimes, selector: "[tuiRepeatTimes][tuiRepeatTimesOf]", inputs: ["tuiRepeatTimesOf"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiPagination, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: TuiPagination, isStandalone: true, selector: "tui-pagination", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, activePadding: { classPropertyName: "activePadding", publicName: "activePadding", isSignal: true, isRequired: false, transformFunction: null }, sidePadding: { classPropertyName: "sidePadding", publicName: "sidePadding", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange" }, viewQueries: [{ propertyName: "els", predicate: ["element"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"t-content\">\n    <button\n        tabIndex=\"-1\"\n        tuiIconButton\n        type=\"button\"\n        class=\"t-button\"\n        [appearance]=\"getElementMode()\"\n        [disabled]=\"arrowIsDisabledLeft()\"\n        [iconStart]=\"icons.decrement\"\n        [size]=\"buttonSize()\"\n        (click)=\"onArrowClick(-1)\"\n        (mousedown.zoneless.prevent)=\"(0)\"\n    >\n        {{ texts()[0] }}\n    </button>\n    @for (_ of '-'.repeat(elementsLength()); track $index) {\n        @let index = getItemIndexByElementIndex($index);\n        @if (index !== null) {\n            <button\n                #element\n                automation-id=\"tui-pagination__element\"\n                tuiButton\n                type=\"button\"\n                class=\"t-button\"\n                [appearance]=\"getElementMode(index)\"\n                [disabled]=\"disabled()\"\n                [size]=\"buttonSize()\"\n                [tabIndex]=\"elementIsFocusable(index) ? 0 : -1\"\n                (click)=\"onElementClick(index)\"\n                (keydown.arrowLeft.prevent)=\"onElementKeyDownArrowLeft(element)\"\n                (keydown.arrowRight.prevent)=\"onElementKeyDownArrowRight(element)\"\n            >\n                <ng-container *polymorpheusOutlet=\"content() || index + 1 as text; context: {$implicit: index}\">\n                    {{ text }}\n                </ng-container>\n            </button>\n        } @else {\n            <div\n                automation-id=\"tui-pagination__element\"\n                class=\"t-ellipsis\"\n                [class.t-ellipsis_small]=\"size() === 'm'\"\n            ></div>\n        }\n    }\n\n    <button\n        tabIndex=\"-1\"\n        tuiIconButton\n        type=\"button\"\n        class=\"t-button\"\n        [appearance]=\"getElementMode()\"\n        [disabled]=\"arrowIsDisabledRight()\"\n        [iconStart]=\"icons.increment\"\n        [size]=\"buttonSize()\"\n        (click)=\"onArrowClick(1)\"\n        (mousedown.zoneless.prevent)=\"(0)\"\n    >\n        {{ texts()[1] }}\n    </button>\n</div>\n", styles: [":host{display:block;font:var(--tui-font-body-s);color:var(--tui-text-primary);text-align:center}.t-content{display:flex;justify-content:center}.t-button{margin:0 .125rem;flex-shrink:0}.t-button[tuiButton]:not(.t-button_small){min-inline-size:var(--tui-height-s);padding:0 .5rem}.t-button[tuiButton]:not(.t-button_small)[data-size=xs]{min-inline-size:var(--tui-height-xs);padding:0 .375rem}.t-button:first-child{transform:scaleX(var(--tui-inline));margin-inline-start:0}.t-button:last-child{transform:scaleX(var(--tui-inline));margin-inline-end:0}.t-ellipsis{inline-size:var(--tui-height-s);block-size:var(--tui-height-s);line-height:var(--tui-height-s);margin:0 .125rem;flex-shrink:0;color:var(--tui-text-action);text-align:center;cursor:default}.t-ellipsis_small{inline-size:var(--tui-height-xs);block-size:var(--tui-height-xs);line-height:var(--tui-height-xs)}.t-ellipsis:before{content:\"\\2026\"}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TuiPagination, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TuiPagination, decorators: [{
             type: Component,
-            args: [{ selector: 'tui-pagination', imports: [PolymorpheusOutlet, TuiButton, TuiLet, TuiRepeatTimes], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"t-content\">\n    @if (size !== 's') {\n        <button\n            appearance=\"flat\"\n            tabIndex=\"-1\"\n            tuiIconButton\n            type=\"button\"\n            class=\"t-button\"\n            [disabled]=\"arrowIsDisabledLeft\"\n            [iconStart]=\"icons.decrement\"\n            [size]=\"buttonSize\"\n            (click)=\"onArrowClick('left')\"\n            (mousedown.zoneless.prevent)=\"(0)\"\n        >\n            {{ texts()[0] }}\n        </button>\n        <ng-container *tuiRepeatTimes=\"let elementIndex of elementsLength\">\n            <ng-container *tuiLet=\"getItemIndexByElementIndex(elementIndex) as index\">\n                @if (index !== null) {\n                    <button\n                        #element\n                        automation-id=\"tui-pagination__element\"\n                        tuiButton\n                        type=\"button\"\n                        class=\"t-button\"\n                        [appearance]=\"getElementMode(index)\"\n                        [disabled]=\"disabled\"\n                        [size]=\"buttonSize\"\n                        [tabIndex]=\"elementIsFocusable(index) ? 0 : -1\"\n                        (click)=\"onElementClick(index)\"\n                        (keydown.arrowLeft.prevent)=\"onElementKeyDownArrowLeft(element)\"\n                        (keydown.arrowRight.prevent)=\"onElementKeyDownArrowRight(element)\"\n                    >\n                        <ng-container *polymorpheusOutlet=\"content || index + 1 as text; context: {$implicit: index}\">\n                            {{ text }}\n                        </ng-container>\n                    </button>\n                } @else {\n                    <div\n                        automation-id=\"tui-pagination__element\"\n                        class=\"t-dots\"\n                        [class.t-dots_small]=\"size === 'm'\"\n                    ></div>\n                }\n            </ng-container>\n        </ng-container>\n        <button\n            appearance=\"flat\"\n            tabIndex=\"-1\"\n            tuiIconButton\n            type=\"button\"\n            class=\"t-button\"\n            [disabled]=\"arrowIsDisabledRight\"\n            [iconStart]=\"icons.increment\"\n            [size]=\"buttonSize\"\n            (click)=\"onArrowClick('right')\"\n            (mousedown.zoneless.prevent)=\"(0)\"\n        >\n            {{ texts()[1] }}\n        </button>\n    } @else {\n        <button\n            *tuiRepeatTimes=\"let indexItem of length\"\n            #element\n            tuiButton\n            type=\"button\"\n            class=\"t-button t-button_small\"\n            [appearance]=\"getElementMode(indexItem)\"\n            [disabled]=\"disabled\"\n            [tabIndex]=\"elementIsFocusable(indexItem) ? 0 : -1\"\n            (click)=\"onElementClick(indexItem)\"\n            (keydown.arrowLeft.prevent)=\"onElementKeyDownArrowLeft(element)\"\n            (keydown.arrowRight.prevent)=\"onElementKeyDownArrowRight(element)\"\n        >\n            {{ indexItem + 1 }}\n        </button>\n    }\n</div>\n", styles: [":host{display:block;font:var(--tui-font-text-s);color:var(--tui-text-primary);text-align:center}.t-content{display:flex;justify-content:center}.t-button{margin:0 .125rem;flex-shrink:0}.t-button[tuiButton]:not(.t-button_small){min-inline-size:var(--tui-height-s);padding:0 .5rem}.t-button[tuiButton]:not(.t-button_small)[data-size=xs]{min-inline-size:var(--tui-height-xs);padding:0 .375rem}.t-button:first-child{transform:scaleX(var(--tui-inline));margin-inline-start:0}.t-button:last-child{transform:scaleX(var(--tui-inline));margin-inline-end:0}.t-button[data-size=xs]{min-inline-size:var(--tui-height-xs);padding:0 .375rem}.t-button.t-button.t-button_small{inline-size:.5rem;block-size:.5rem;font-size:0;padding:0;margin:0}.t-button.t-button.t-button_small:not(:first-child){margin-inline-start:.5rem}.t-dots{inline-size:var(--tui-height-s);block-size:var(--tui-height-s);line-height:var(--tui-height-s);margin:0 .125rem;flex-shrink:0;color:var(--tui-text-action);text-align:center;cursor:default}.t-dots_small{inline-size:var(--tui-height-xs);block-size:var(--tui-height-xs);line-height:var(--tui-height-xs)}.t-dots:before{content:\"\\2026\"}\n"] }]
-        }], propDecorators: { els: [{
-                type: ViewChildren,
-                args: ['element', { read: ElementRef }]
-            }], length: [{
-                type: Input
-            }], focusable: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], activePadding: [{
-                type: Input
-            }], sidePadding: [{
-                type: Input
-            }], content: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], indexChange: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'tui-pagination', imports: [PolymorpheusOutlet, TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"t-content\">\n    <button\n        tabIndex=\"-1\"\n        tuiIconButton\n        type=\"button\"\n        class=\"t-button\"\n        [appearance]=\"getElementMode()\"\n        [disabled]=\"arrowIsDisabledLeft()\"\n        [iconStart]=\"icons.decrement\"\n        [size]=\"buttonSize()\"\n        (click)=\"onArrowClick(-1)\"\n        (mousedown.zoneless.prevent)=\"(0)\"\n    >\n        {{ texts()[0] }}\n    </button>\n    @for (_ of '-'.repeat(elementsLength()); track $index) {\n        @let index = getItemIndexByElementIndex($index);\n        @if (index !== null) {\n            <button\n                #element\n                automation-id=\"tui-pagination__element\"\n                tuiButton\n                type=\"button\"\n                class=\"t-button\"\n                [appearance]=\"getElementMode(index)\"\n                [disabled]=\"disabled()\"\n                [size]=\"buttonSize()\"\n                [tabIndex]=\"elementIsFocusable(index) ? 0 : -1\"\n                (click)=\"onElementClick(index)\"\n                (keydown.arrowLeft.prevent)=\"onElementKeyDownArrowLeft(element)\"\n                (keydown.arrowRight.prevent)=\"onElementKeyDownArrowRight(element)\"\n            >\n                <ng-container *polymorpheusOutlet=\"content() || index + 1 as text; context: {$implicit: index}\">\n                    {{ text }}\n                </ng-container>\n            </button>\n        } @else {\n            <div\n                automation-id=\"tui-pagination__element\"\n                class=\"t-ellipsis\"\n                [class.t-ellipsis_small]=\"size() === 'm'\"\n            ></div>\n        }\n    }\n\n    <button\n        tabIndex=\"-1\"\n        tuiIconButton\n        type=\"button\"\n        class=\"t-button\"\n        [appearance]=\"getElementMode()\"\n        [disabled]=\"arrowIsDisabledRight()\"\n        [iconStart]=\"icons.increment\"\n        [size]=\"buttonSize()\"\n        (click)=\"onArrowClick(1)\"\n        (mousedown.zoneless.prevent)=\"(0)\"\n    >\n        {{ texts()[1] }}\n    </button>\n</div>\n", styles: [":host{display:block;font:var(--tui-font-body-s);color:var(--tui-text-primary);text-align:center}.t-content{display:flex;justify-content:center}.t-button{margin:0 .125rem;flex-shrink:0}.t-button[tuiButton]:not(.t-button_small){min-inline-size:var(--tui-height-s);padding:0 .5rem}.t-button[tuiButton]:not(.t-button_small)[data-size=xs]{min-inline-size:var(--tui-height-xs);padding:0 .375rem}.t-button:first-child{transform:scaleX(var(--tui-inline));margin-inline-start:0}.t-button:last-child{transform:scaleX(var(--tui-inline));margin-inline-end:0}.t-ellipsis{inline-size:var(--tui-height-s);block-size:var(--tui-height-s);line-height:var(--tui-height-s);margin:0 .125rem;flex-shrink:0;color:var(--tui-text-action);text-align:center;cursor:default}.t-ellipsis_small{inline-size:var(--tui-height-xs);block-size:var(--tui-height-xs);line-height:var(--tui-height-xs)}.t-ellipsis:before{content:\"\\2026\"}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { TuiPagination };
+export { TUI_PAGINATION_OPTIONS, TuiPagination, tuiPaginationOptionsProvider };
 //# sourceMappingURL=taiga-ui-kit-components-pagination.mjs.map