import { NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject, Input, signal, ViewChildren, } from '@angular/core';
import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
import { FormsModule } from '@angular/forms';
import { WaMutationObserverService, 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';
import * as i0 from "@angular/core";
class TuiPager {
    constructor() {
        this.start = 0;
        this.end = 0;
        this.left = signal(0);
        this.maxWidth = toSignal(inject(WaMutationObserverService, { 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;
    }
    ngOnChanges() {
        this.move();
    }
    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);
        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);
    }
    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.left.set(-1 * left);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiPager, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: [
            WaMutationObserverService,
            {
                provide: WA_MUTATION_OBSERVER_INIT,
                useValue: {
                    attributeOldValue: true,
                    characterData: true,
                    childList: true,
                    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 }); }
}
export { TuiPager };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiPager, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'tui-pager', imports: [FormsModule, NgTemplateOutlet, TuiRepeatTimes], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        WaMutationObserverService,
                        {
                            provide: WA_MUTATION_OBSERVER_INIT,
                            useValue: {
                                attributeOldValue: true,
                                characterData: true,
                                childList: true,
                                subtree: true,
                            },
                        },
                    ], host: {
                        '[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
            }] } });
//# sourceMappingURL=data:application/json;base64, 