@taiga-ui/kit
Version:
Taiga UI Angular main components kit
349 lines (344 loc) • 16.6 kB
JavaScript
import { __extends, __decorate, __param } from 'tslib';
import { EventEmitter, ElementRef, Inject, Optional, Input, Output, ViewChildren, Component, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
import { EMPTY_QUERY, isNativeFocusedIn, clamp, setNativeFocused, tuiDefaultProp, TUI_FOCUSABLE_ITEM_ACCESSOR, AbstractTuiInteractive, 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 DOTS_LENGTH = 1;
var ACTIVE_ITEM_LENGTH = 1;
function nonNegativeInteger(length) {
return Number.isInteger(length) && length >= 0;
}
// @dynamic
var TuiPaginationComponent = /** @class */ (function (_super) {
__extends(TuiPaginationComponent, _super);
function TuiPaginationComponent(elementRef, modeDirective, texts$) {
var _this = _super.call(this) || this;
_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;
return _this;
}
TuiPaginationComponent_1 = TuiPaginationComponent;
Object.defineProperty(TuiPaginationComponent.prototype, "nativeFocusableElement", {
get: function () {
if (this.disabled) {
return null;
}
var activeElementIndex = 0;
var elementsLength = this.elementsLength;
for (var i = 0; i < elementsLength; i++) {
var itemIndex = this.getItemIndexByElementIndex(i);
if (itemIndex) {
activeElementIndex++;
}
if (itemIndex === this.index) {
break;
}
}
var activeElement = this.elements.find(function (_, index) { return index === activeElementIndex; });
return activeElement ? activeElement.nativeFocusableElement : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiPaginationComponent.prototype, "focused", {
get: function () {
return isNativeFocusedIn(this.elementRef.nativeElement);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiPaginationComponent.prototype, "elementsLength", {
/**
* Number of items in a container.
*/
get: function () {
return this.itemsFit ? this.length : this.maxElementsLength;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiPaginationComponent.prototype, "sizeM", {
get: function () {
return this.size === 'm';
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiPaginationComponent.prototype, "mode", {
get: function () {
return this.modeDirective ? this.modeDirective.mode : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiPaginationComponent.prototype, "arrowIsDisabledLeft", {
get: function () {
return this.index === 0;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiPaginationComponent.prototype, "arrowIsDisabledRight", {
get: function () {
return this.reverseIndex === 0;
},
enumerable: true,
configurable: true
});
TuiPaginationComponent.prototype.elementIsFocusable = function (index) {
return this.index === index && !this.focused;
};
TuiPaginationComponent.prototype.getItemContext = function (index) {
return { $implicit: index };
};
/**
* Get index by element index
* @param elementIndex
* @returns index or null (for '…')
*/
TuiPaginationComponent.prototype.getItemIndexByElementIndex = function (elementIndex) {
if (!this.sizeM) {
return elementIndex;
}
if (elementIndex < this.sidePadding) {
return elementIndex;
}
if (elementIndex === this.sidePadding && this.hasCollapsedItems(this.index)) {
return null;
}
var reverseElementIndex = this.lastElementIndex - elementIndex;
if (reverseElementIndex === this.sidePadding &&
this.hasCollapsedItems(this.reverseIndex)) {
return null;
}
if (reverseElementIndex < this.sidePadding) {
return this.lastIndex - reverseElementIndex;
}
var computedIndex = this.index - this.maxHalfLength + elementIndex;
return clamp(computedIndex, elementIndex, this.lastIndex - reverseElementIndex);
};
TuiPaginationComponent.prototype.getElementMode = function (index) {
return this.index === index ? "primary" /* Primary */ : "flat" /* Flat */;
};
TuiPaginationComponent.prototype.getSmallElementMode = function (index, mode) {
return this.index === index && mode !== 'onLight'
? "primary" /* Primary */
: "secondary" /* Secondary */;
};
TuiPaginationComponent.prototype.onElementClick = function (index) {
this.updateIndex(index);
};
TuiPaginationComponent.prototype.onElementKeyDownArrowLeft = function (element) {
if (element === this.elements.first) {
return;
}
var previous = this.elements.find(function (_, index, array) { return array[index + 1] === element; });
if (previous && previous.nativeFocusableElement) {
setNativeFocused(previous.nativeFocusableElement);
}
};
TuiPaginationComponent.prototype.onElementKeyDownArrowRight = function (element) {
if (element === this.elements.last) {
return;
}
var next = this.elements.find(function (_, index, array) { return array[index - 1] === element; });
if (next && next.nativeFocusableElement) {
setNativeFocused(next.nativeFocusableElement);
}
};
TuiPaginationComponent.prototype.onArrowClick = function (direction) {
this.tryChangeTo(direction);
this.focusActive();
};
TuiPaginationComponent.prototype.onActiveZone = function (focused) {
this.updateFocused(focused);
};
Object.defineProperty(TuiPaginationComponent.prototype, "reverseIndex", {
/**
* Active index from the end
*/
get: function () {
return this.lastIndex - this.index;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiPaginationComponent.prototype, "maxHalfLength", {
/**
* Max number of elements in half (not counting the middle one).
*/
get: function () {
return this.sidePadding + DOTS_LENGTH + this.activePadding;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiPaginationComponent.prototype, "itemsFit", {
/**
* Is there '...' anywhere
*/
get: function () {
return this.length <= this.maxElementsLength;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiPaginationComponent.prototype, "maxElementsLength", {
/**
* Max number of elements
*/
get: function () {
return this.maxHalfLength * 2 + ACTIVE_ITEM_LENGTH;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiPaginationComponent.prototype, "lastIndex", {
get: function () {
return this.length - 1;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiPaginationComponent.prototype, "lastElementIndex", {
get: function () {
return this.elementsLength - 1;
},
enumerable: true,
configurable: true
});
/**
* Are there collapsed items at that index
* @param index
* @returns there are collapsed items
*/
TuiPaginationComponent.prototype.hasCollapsedItems = function (index) {
return !this.itemsFit && index > this.maxHalfLength;
};
TuiPaginationComponent.prototype.tryChangeTo = function (direction) {
this.updateIndex(clamp(this.index + horizontalDirectionToNumber(direction), 0, this.lastIndex));
};
TuiPaginationComponent.prototype.focusActive = function () {
var nativeFocusableElement = this.nativeFocusableElement;
if (nativeFocusableElement) {
setNativeFocused(nativeFocusableElement);
}
};
TuiPaginationComponent.prototype.updateIndex = function (index) {
if (this.index === index) {
return;
}
this.index = index;
this.indexChange.emit(index);
};
var TuiPaginationComponent_1;
TuiPaginationComponent.ctorParameters = function () { return [
{ 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(function () { return 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);
return TuiPaginationComponent;
}(AbstractTuiInteractive));
var TuiPaginationModule = /** @class */ (function () {
function TuiPaginationModule() {
}
TuiPaginationModule = __decorate([
NgModule({
imports: [
CommonModule,
TuiRepeatTimesModule,
TuiLetModule,
PolymorpheusModule,
TuiPreventDefaultModule,
TuiActiveZoneModule,
TuiButtonModule,
],
declarations: [TuiPaginationComponent],
exports: [TuiPaginationComponent],
})
], TuiPaginationModule);
return TuiPaginationModule;
}());
/**
* Generated bundle index. Do not edit.
*/
export { TuiPaginationComponent, TuiPaginationModule, nonNegativeInteger };
//# sourceMappingURL=taiga-ui-kit-components-pagination.js.map