@taiga-ui/kit
Version:
Taiga UI Angular main components kit
49 lines • 10.6 kB
JavaScript
import { AsyncPipe, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, Output, } from '@angular/core';
import { tuiClamp } from '@taiga-ui/cdk/utils/math';
import { TuiButton } from '@taiga-ui/core/components/button';
import { TUI_PAGINATION_TEXTS, TUI_PREVIEW_ICONS } from '@taiga-ui/kit/tokens';
import { TuiPreviewAction } from '../preview-action/preview-action.directive';
import * as i0 from "@angular/core";
class TuiPreviewPagination {
constructor() {
this.icons = inject(TUI_PREVIEW_ICONS);
this.texts$ = inject(TUI_PAGINATION_TEXTS);
this.length = 1;
this.index = 0;
this.indexChange = new EventEmitter();
}
onArrowClick(step) {
this.updateIndex(tuiClamp(this.index + step, 0, this.length - 1));
}
get leftButtonDisabled() {
return this.index === 0;
}
get rightButtonDisabled() {
return this.index === this.length - 1;
}
updateIndex(index) {
if (this.index === index) {
return;
}
this.index = index;
this.indexChange.emit(index);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiPreviewPagination, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiPreviewPagination, isStandalone: true, selector: "tui-preview-pagination", inputs: { length: "length", index: "index" }, outputs: { indexChange: "indexChange" }, host: { listeners: { "document:keydown.arrowRight.prevent": "onArrowClick(1)", "document:keydown.arrowLeft.prevent": "onArrowClick(-1)" } }, ngImport: i0, template: "<ng-container *ngIf=\"texts$ | async as texts\">\n <button\n tuiIconButton\n tuiPreviewAction\n type=\"button\"\n class=\"t-arrow_left\"\n [disabled]=\"leftButtonDisabled\"\n [iconStart]=\"icons.prev\"\n (click)=\"onArrowClick(-1)\"\n >\n {{ texts[0] }}\n </button>\n {{ index + 1 }}/{{ length }}\n <button\n tuiIconButton\n tuiPreviewAction\n type=\"button\"\n class=\"t-arrow_right\"\n [disabled]=\"rightButtonDisabled\"\n [iconStart]=\"icons.next\"\n (click)=\"onArrowClick(1)\"\n >\n {{ texts[1] }}\n </button>\n</ng-container>\n", styles: [":host{border-radius:1rem;background:#686868f5;color:#fff;display:flex;font:var(--tui-font-text-s);justify-content:space-between;align-items:center;inline-size:6.25rem}.t-arrow_left{border-start-end-radius:0;border-end-end-radius:0}.t-arrow_right{border-start-start-radius:0;border-end-start-radius:0}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiPreviewAction, selector: "[tuiPreviewAction]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiPreviewPagination };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiPreviewPagination, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-preview-pagination', imports: [AsyncPipe, NgIf, TuiButton, TuiPreviewAction], changeDetection: ChangeDetectionStrategy.OnPush, host: {
'(document:keydown.arrowRight.prevent)': 'onArrowClick(1)',
'(document:keydown.arrowLeft.prevent)': 'onArrowClick(-1)',
}, template: "<ng-container *ngIf=\"texts$ | async as texts\">\n <button\n tuiIconButton\n tuiPreviewAction\n type=\"button\"\n class=\"t-arrow_left\"\n [disabled]=\"leftButtonDisabled\"\n [iconStart]=\"icons.prev\"\n (click)=\"onArrowClick(-1)\"\n >\n {{ texts[0] }}\n </button>\n {{ index + 1 }}/{{ length }}\n <button\n tuiIconButton\n tuiPreviewAction\n type=\"button\"\n class=\"t-arrow_right\"\n [disabled]=\"rightButtonDisabled\"\n [iconStart]=\"icons.next\"\n (click)=\"onArrowClick(1)\"\n >\n {{ texts[1] }}\n </button>\n</ng-container>\n", styles: [":host{border-radius:1rem;background:#686868f5;color:#fff;display:flex;font:var(--tui-font-text-s);justify-content:space-between;align-items:center;inline-size:6.25rem}.t-arrow_left{border-start-end-radius:0;border-end-end-radius:0}.t-arrow_right{border-start-start-radius:0;border-end-start-radius:0}\n"] }]
}], propDecorators: { length: [{
type: Input
}], index: [{
type: Input
}], indexChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJldmlldy1wYWdpbmF0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdC9jb21wb25lbnRzL3ByZXZpZXcvcGFnaW5hdGlvbi9wcmV2aWV3LXBhZ2luYXRpb24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvcHJldmlldy9wYWdpbmF0aW9uL3ByZXZpZXctcGFnaW5hdGlvbi50ZW1wbGF0ZS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsSUFBSSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDaEQsT0FBTyxFQUNILHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLE1BQU0sRUFDTixLQUFLLEVBQ0wsTUFBTSxHQUNULE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxRQUFRLEVBQUMsTUFBTSwwQkFBMEIsQ0FBQztBQUNsRCxPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sa0NBQWtDLENBQUM7QUFDM0QsT0FBTyxFQUFDLG9CQUFvQixFQUFFLGlCQUFpQixFQUFDLE1BQU0sc0JBQXNCLENBQUM7QUFFN0UsT0FBTyxFQUFDLGdCQUFnQixFQUFDLE1BQU0sNENBQTRDLENBQUM7O0FBRTVFLE1BWWEsb0JBQW9CO0lBWmpDO1FBYXVCLFVBQUssR0FBRyxNQUFNLENBQUMsaUJBQWlCLENBQUMsQ0FBQztRQUNsQyxXQUFNLEdBQUcsTUFBTSxDQUFDLG9CQUFvQixDQUFDLENBQUM7UUFHbEQsV0FBTSxHQUFHLENBQUMsQ0FBQztRQUdYLFVBQUssR0FBRyxDQUFDLENBQUM7UUFHRCxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7S0FzQjVEO0lBcEJVLFlBQVksQ0FBQyxJQUFZO1FBQzVCLElBQUksQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxFQUFFLENBQUMsRUFBRSxJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDdEUsQ0FBQztJQUVELElBQWMsa0JBQWtCO1FBQzVCLE9BQU8sSUFBSSxDQUFDLEtBQUssS0FBSyxDQUFDLENBQUM7SUFDNUIsQ0FBQztJQUVELElBQWMsbUJBQW1CO1FBQzdCLE9BQU8sSUFBSSxDQUFDLEtBQUssS0FBSyxJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQztJQUMxQyxDQUFDO0lBRU8sV0FBVyxDQUFDLEtBQWE7UUFDN0IsSUFBSSxJQUFJLENBQUMsS0FBSyxLQUFLLEtBQUssRUFBRTtZQUN0QixPQUFPO1NBQ1Y7UUFFRCxJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQztRQUNuQixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNqQyxDQUFDOytHQWhDUSxvQkFBb0I7bUdBQXBCLG9CQUFvQixzVEMzQmpDLDRwQkF5QkEsbVdEUGMsU0FBUyw4Q0FBRSxJQUFJLDZGQUFFLFNBQVMsb0lBQUUsZ0JBQWdCOztTQVM3QyxvQkFBb0I7NEZBQXBCLG9CQUFvQjtrQkFaaEMsU0FBUztpQ0FDTSxJQUFJLFlBQ04sd0JBQXdCLFdBQ3pCLENBQUMsU0FBUyxFQUFFLElBQUksRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLENBQUMsbUJBR3RDLHVCQUF1QixDQUFDLE1BQU0sUUFDekM7d0JBQ0YsdUNBQXVDLEVBQUUsaUJBQWlCO3dCQUMxRCxzQ0FBc0MsRUFBRSxrQkFBa0I7cUJBQzdEOzhCQU9NLE1BQU07c0JBRFosS0FBSztnQkFJQyxLQUFLO3NCQURYLEtBQUs7Z0JBSVUsV0FBVztzQkFEMUIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7QXN5bmNQaXBlLCBOZ0lmfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDb21wb25lbnQsXG4gICAgRXZlbnRFbWl0dGVyLFxuICAgIGluamVjdCxcbiAgICBJbnB1dCxcbiAgICBPdXRwdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHt0dWlDbGFtcH0gZnJvbSAnQHRhaWdhLXVpL2Nkay91dGlscy9tYXRoJztcbmltcG9ydCB7VHVpQnV0dG9ufSBmcm9tICdAdGFpZ2EtdWkvY29yZS9jb21wb25lbnRzL2J1dHRvbic7XG5pbXBvcnQge1RVSV9QQUdJTkFUSU9OX1RFWFRTLCBUVUlfUFJFVklFV19JQ09OU30gZnJvbSAnQHRhaWdhLXVpL2tpdC90b2tlbnMnO1xuXG5pbXBvcnQge1R1aVByZXZpZXdBY3Rpb259IGZyb20gJy4uL3ByZXZpZXctYWN0aW9uL3ByZXZpZXctYWN0aW9uLmRpcmVjdGl2ZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICd0dWktcHJldmlldy1wYWdpbmF0aW9uJyxcbiAgICBpbXBvcnRzOiBbQXN5bmNQaXBlLCBOZ0lmLCBUdWlCdXR0b24sIFR1aVByZXZpZXdBY3Rpb25dLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9wcmV2aWV3LXBhZ2luYXRpb24udGVtcGxhdGUuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vcHJldmlldy1wYWdpbmF0aW9uLnN0eWxlLmxlc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBob3N0OiB7XG4gICAgICAgICcoZG9jdW1lbnQ6a2V5ZG93bi5hcnJvd1JpZ2h0LnByZXZlbnQpJzogJ29uQXJyb3dDbGljaygxKScsXG4gICAgICAgICcoZG9jdW1lbnQ6a2V5ZG93bi5hcnJvd0xlZnQucHJldmVudCknOiAnb25BcnJvd0NsaWNrKC0xKScsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpUHJldmlld1BhZ2luYXRpb24ge1xuICAgIHByb3RlY3RlZCByZWFkb25seSBpY29ucyA9IGluamVjdChUVUlfUFJFVklFV19JQ09OUyk7XG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IHRleHRzJCA9IGluamVjdChUVUlfUEFHSU5BVElPTl9URVhUUyk7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBsZW5ndGggPSAxO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgaW5kZXggPSAwO1xuXG4gICAgQE91dHB1dCgpXG4gICAgcHVibGljIHJlYWRvbmx5IGluZGV4Q2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXI+KCk7XG5cbiAgICBwdWJsaWMgb25BcnJvd0NsaWNrKHN0ZXA6IG51bWJlcik6IHZvaWQge1xuICAgICAgICB0aGlzLnVwZGF0ZUluZGV4KHR1aUNsYW1wKHRoaXMuaW5kZXggKyBzdGVwLCAwLCB0aGlzLmxlbmd0aCAtIDEpKTtcbiAgICB9XG5cbiAgICBwcm90ZWN0ZWQgZ2V0IGxlZnRCdXR0b25EaXNhYmxlZCgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuaW5kZXggPT09IDA7XG4gICAgfVxuXG4gICAgcHJvdGVjdGVkIGdldCByaWdodEJ1dHRvbkRpc2FibGVkKCk6IGJvb2xlYW4ge1xuICAgICAgICByZXR1cm4gdGhpcy5pbmRleCA9PT0gdGhpcy5sZW5ndGggLSAxO1xuICAgIH1cblxuICAgIHByaXZhdGUgdXBkYXRlSW5kZXgoaW5kZXg6IG51bWJlcik6IHZvaWQge1xuICAgICAgICBpZiAodGhpcy5pbmRleCA9PT0gaW5kZXgpIHtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMuaW5kZXggPSBpbmRleDtcbiAgICAgICAgdGhpcy5pbmRleENoYW5nZS5lbWl0KGluZGV4KTtcbiAgICB9XG59XG4iLCI8bmctY29udGFpbmVyICpuZ0lmPVwidGV4dHMkIHwgYXN5bmMgYXMgdGV4dHNcIj5cbiAgICA8YnV0dG9uXG4gICAgICAgIHR1aUljb25CdXR0b25cbiAgICAgICAgdHVpUHJldmlld0FjdGlvblxuICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgY2xhc3M9XCJ0LWFycm93X2xlZnRcIlxuICAgICAgICBbZGlzYWJsZWRdPVwibGVmdEJ1dHRvbkRpc2FibGVkXCJcbiAgICAgICAgW2ljb25TdGFydF09XCJpY29ucy5wcmV2XCJcbiAgICAgICAgKGNsaWNrKT1cIm9uQXJyb3dDbGljaygtMSlcIlxuICAgID5cbiAgICAgICAge3sgdGV4dHNbMF0gfX1cbiAgICA8L2J1dHRvbj5cbiAgICB7eyBpbmRleCArIDEgfX0ve3sgbGVuZ3RoIH19XG4gICAgPGJ1dHRvblxuICAgICAgICB0dWlJY29uQnV0dG9uXG4gICAgICAgIHR1aVByZXZpZXdBY3Rpb25cbiAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgIGNsYXNzPVwidC1hcnJvd19yaWdodFwiXG4gICAgICAgIFtkaXNhYmxlZF09XCJyaWdodEJ1dHRvbkRpc2FibGVkXCJcbiAgICAgICAgW2ljb25TdGFydF09XCJpY29ucy5uZXh0XCJcbiAgICAgICAgKGNsaWNrKT1cIm9uQXJyb3dDbGljaygxKVwiXG4gICAgPlxuICAgICAgICB7eyB0ZXh0c1sxXSB9fVxuICAgIDwvYnV0dG9uPlxuPC9uZy1jb250YWluZXI+XG4iXX0=