@taiga-ui/kit
Version:
Taiga UI Angular main components kit
90 lines (86 loc) • 10.4 kB
JavaScript
import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { viewChildren, signal, computed, inject, input, ChangeDetectionStrategy, Component } from '@angular/core';
import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { WaMutationObserverService, WA_MUTATION_OBSERVER_INIT } from '@ng-web-apis/mutation-observer';
import { tuiWatch } from '@taiga-ui/cdk/observables';
import { delay, map } from 'rxjs';
class TuiPager {
constructor() {
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(WaMutationObserverService, { self: true }).pipe(delay(0), map(() => this.visibleWidth), tuiWatch(), takeUntilDestroyed()), { initialValue: 0 });
this.max = input(6);
this.count = input(6);
this.size = input('m');
this.valueContent = input();
this.index = input(0);
}
ngOnChanges() {
this.move();
}
ngAfterViewInit() {
this.move();
}
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)
.slice(this.start(), this.end() + 1)
.reduce((sum, item) => sum + item + this.gap(), 0) - this.gap());
}
move() {
const [start, end] = this.visibleRange;
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.21", ngImport: i0, type: TuiPager, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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: [
WaMutationObserverService,
{
provide: WA_MUTATION_OBSERVER_INIT,
useValue: {
attributeOldValue: true,
characterData: true,
childList: true,
subtree: true,
},
},
], 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.21", ngImport: i0, type: TuiPager, decorators: [{
type: Component,
args: [{ selector: 'tui-pager', imports: [NgTemplateOutlet], 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 @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.
*/
export { TuiPager };
//# sourceMappingURL=taiga-ui-kit-components-pager.mjs.map