@taiga-ui/kit
Version:
Taiga UI Angular main components kit
290 lines (285 loc) • 13.2 kB
JavaScript
import { __decorate, __param } from 'tslib';
import { EventEmitter, ElementRef, Inject, Optional, Input, Output, ViewChildren, Component, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
import { AbstractTuiInteractive, EMPTY_QUERY, isNativeFocusedIn, clamp, setNativeFocused, tuiDefaultProp, TUI_FOCUSABLE_ITEM_ACCESSOR, TuiRepeatTimesModule, TuiLetModule, TuiPreventDefaultModule, TuiActiveZoneModule } from '@taiga-ui/cdk';
import { TuiModeDirective, TuiButtonModule } from '@taiga-ui/core';
import { TUI_PAGINATION_TEXTS } from '@taiga-ui/kit/tokens';
import { horizontalDirectionToNumber } from '@taiga-ui/kit/utils/math';
import { Observable } from 'rxjs';
import { CommonModule } from '@angular/common';
import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
var TuiPaginationComponent_1;
const DOTS_LENGTH = 1;
const ACTIVE_ITEM_LENGTH = 1;
function nonNegativeInteger(length) {
return Number.isInteger(length) && length >= 0;
}
// @dynamic
let TuiPaginationComponent = TuiPaginationComponent_1 = class TuiPaginationComponent extends AbstractTuiInteractive {
constructor(elementRef, modeDirective, texts$) {
super();
this.elementRef = elementRef;
this.modeDirective = modeDirective;
this.texts$ = texts$;
this.length = 1;
this.size = 'm';
this.disabled = false;
/**
* Amount of visible pages around active page
*/
this.activePadding = 1;
/**
* Amount of visible pages at the edges
*/
this.sidePadding = 1;
/**
* Customization for page number display.
*/
this.content = null;
/**
* Active page index
*/
this.index = 0;
this.indexChange = new EventEmitter();
this.elements = EMPTY_QUERY;
}
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++;
}
if (itemIndex === this.index) {
break;
}
}
const activeElement = this.elements.find((_, index) => index === activeElementIndex);
return activeElement ? activeElement.nativeFocusableElement : null;
}
get focused() {
return isNativeFocusedIn(this.elementRef.nativeElement);
}
/**
* Number of items in a container.
*/
get elementsLength() {
return this.itemsFit ? this.length : this.maxElementsLength;
}
get sizeM() {
return this.size === 'm';
}
get mode() {
return this.modeDirective ? this.modeDirective.mode : null;
}
get arrowIsDisabledLeft() {
return this.index === 0;
}
get arrowIsDisabledRight() {
return this.reverseIndex === 0;
}
elementIsFocusable(index) {
return this.index === index && !this.focused;
}
getItemContext(index) {
return { $implicit: index };
}
/**
* Get index by element index
* @param elementIndex
* @returns index or null (for '…')
*/
getItemIndexByElementIndex(elementIndex) {
if (!this.sizeM) {
return elementIndex;
}
if (elementIndex < this.sidePadding) {
return elementIndex;
}
if (elementIndex === this.sidePadding && this.hasCollapsedItems(this.index)) {
return null;
}
const reverseElementIndex = this.lastElementIndex - elementIndex;
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 clamp(computedIndex, elementIndex, this.lastIndex - reverseElementIndex);
}
getElementMode(index) {
return this.index === index ? "primary" /* Primary */ : "flat" /* Flat */;
}
getSmallElementMode(index, mode) {
return this.index === index && mode !== 'onLight'
? "primary" /* Primary */
: "secondary" /* Secondary */;
}
onElementClick(index) {
this.updateIndex(index);
}
onElementKeyDownArrowLeft(element) {
if (element === this.elements.first) {
return;
}
const previous = this.elements.find((_, index, array) => array[index + 1] === element);
if (previous && previous.nativeFocusableElement) {
setNativeFocused(previous.nativeFocusableElement);
}
}
onElementKeyDownArrowRight(element) {
if (element === this.elements.last) {
return;
}
const next = this.elements.find((_, index, array) => array[index - 1] === element);
if (next && next.nativeFocusableElement) {
setNativeFocused(next.nativeFocusableElement);
}
}
onArrowClick(direction) {
this.tryChangeTo(direction);
this.focusActive();
}
onActiveZone(focused) {
this.updateFocused(focused);
}
/**
* 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;
}
/**
* Are there collapsed items at that index
* @param index
* @returns there are collapsed items
*/
hasCollapsedItems(index) {
return !this.itemsFit && index > this.maxHalfLength;
}
tryChangeTo(direction) {
this.updateIndex(clamp(this.index + horizontalDirectionToNumber(direction), 0, this.lastIndex));
}
focusActive() {
const { nativeFocusableElement } = this;
if (nativeFocusableElement) {
setNativeFocused(nativeFocusableElement);
}
}
updateIndex(index) {
if (this.index === index) {
return;
}
this.index = index;
this.indexChange.emit(index);
}
};
TuiPaginationComponent.ctorParameters = () => [
{ type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
{ type: TuiModeDirective, decorators: [{ type: Optional }, { type: Inject, args: [TuiModeDirective,] }] },
{ type: Observable, decorators: [{ type: Inject, args: [TUI_PAGINATION_TEXTS,] }] }
];
__decorate([
Input(),
tuiDefaultProp(nonNegativeInteger, 'Must be non-negative integer')
], TuiPaginationComponent.prototype, "length", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiPaginationComponent.prototype, "size", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiPaginationComponent.prototype, "disabled", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiPaginationComponent.prototype, "activePadding", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiPaginationComponent.prototype, "sidePadding", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiPaginationComponent.prototype, "content", void 0);
__decorate([
Input(),
tuiDefaultProp(nonNegativeInteger, 'Must be non-negative integer')
], TuiPaginationComponent.prototype, "index", void 0);
__decorate([
Output()
], TuiPaginationComponent.prototype, "indexChange", void 0);
__decorate([
ViewChildren('element', { read: TUI_FOCUSABLE_ITEM_ACCESSOR })
], TuiPaginationComponent.prototype, "elements", void 0);
TuiPaginationComponent = TuiPaginationComponent_1 = __decorate([
Component({
selector: 'tui-pagination',
template: "<div class=\"content\" (tuiActiveZoneChange)=\"onActiveZone($event)\">\n <ng-container *ngIf=\"sizeM && (texts$ | async) as texts; else smallButtons\">\n <button\n tuiIconButton\n type=\"button\"\n tuiPreventDefault=\"mousedown\"\n class=\"button\"\n size=\"s\"\n appearance=\"flat\"\n icon=\"tuiIconChevronLeft\"\n [title]=\"texts[0]\"\n [disabled]=\"arrowIsDisabledLeft\"\n [focusable]=\"false\"\n (click)=\"onArrowClick('left')\"\n ></button>\n <ng-container *tuiRepeatTimes=\"let elementIndex of elementsLength\">\n <ng-container\n *tuiLet=\"getItemIndexByElementIndex(elementIndex) as index\"\n >\n <button\n *ngIf=\"index !== null; else dotsTemplate\"\n #element\n tuiButton\n type=\"button\"\n automation-id=\"tui-pagination__element\"\n class=\"button\"\n shape=\"square\"\n size=\"s\"\n [disabled]=\"disabled\"\n [focusable]=\"elementIsFocusable(index)\"\n [appearance]=\"getElementMode(index)\"\n (click)=\"onElementClick(index)\"\n (keydown.arrowLeft.prevent)=\"onElementKeyDownArrowLeft(element)\"\n (keydown.arrowRight.prevent)=\"onElementKeyDownArrowRight(element)\"\n >\n <div\n polymorpheus-outlet\n [content]=\"content || index + 1\"\n [context]=\"getItemContext(index)\"\n ></div>\n </button>\n </ng-container>\n </ng-container>\n <button\n tuiIconButton\n type=\"button\"\n tuiPreventDefault=\"mousedown\"\n class=\"button\"\n size=\"s\"\n appearance=\"flat\"\n icon=\"tuiIconChevronRight\"\n [title]=\"texts[1]\"\n [disabled]=\"arrowIsDisabledRight\"\n [focusable]=\"false\"\n (click)=\"onArrowClick('right')\"\n ></button>\n </ng-container>\n <ng-template #smallButtons>\n <button\n *tuiRepeatTimes=\"let indexItem of length\"\n #element\n tuiButton\n type=\"button\"\n class=\"button button_small\"\n shape=\"square\"\n [class.button_active]=\"indexItem === index\"\n [disabled]=\"disabled\"\n [focusable]=\"elementIsFocusable(indexItem)\"\n [appearance]=\"getSmallElementMode(indexItem, mode)\"\n (click)=\"onElementClick(indexItem)\"\n (keydown.arrowLeft.prevent)=\"onElementKeyDownArrowLeft(element)\"\n (keydown.arrowRight.prevent)=\"onElementKeyDownArrowRight(element)\"\n ></button>\n </ng-template>\n <ng-template #dotsTemplate>\n <div automation-id=\"tui-pagination__element\" class=\"dots\"></div>\n </ng-template>\n</div>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
useExisting: forwardRef(() => TuiPaginationComponent_1),
},
],
styles: [":host{font:var(--tui-font-text-s);color:var(--tui-text-01);display:block;text-align:center}.content{display:flex;justify-content:center}.button{margin:0 2px;flex-shrink:0}.button_active{background:currentColor}.button.button.button_small{width:8px;height:8px;margin:0}.button.button.button_small:not(:first-child){margin-left:8px}.dots{width:var(--tui-height-s);height:var(--tui-height-s);line-height:var(--tui-height-s);margin:0 2px;flex-shrink:0;color:var(--tui-text-03);text-align:center;cursor:default}.dots:before{content:'\\2026'}"]
}),
__param(0, Inject(ElementRef)),
__param(1, Optional()),
__param(1, Inject(TuiModeDirective)),
__param(2, Inject(TUI_PAGINATION_TEXTS))
], TuiPaginationComponent);
let TuiPaginationModule = class TuiPaginationModule {
};
TuiPaginationModule = __decorate([
NgModule({
imports: [
CommonModule,
TuiRepeatTimesModule,
TuiLetModule,
PolymorpheusModule,
TuiPreventDefaultModule,
TuiActiveZoneModule,
TuiButtonModule,
],
declarations: [TuiPaginationComponent],
exports: [TuiPaginationComponent],
})
], TuiPaginationModule);
/**
* Generated bundle index. Do not edit.
*/
export { TuiPaginationComponent, TuiPaginationModule, nonNegativeInteger };
//# sourceMappingURL=taiga-ui-kit-components-pagination.js.map