@taiga-ui/kit
Version:
Taiga UI Angular main components kit
49 lines • 10.7 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 '../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 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 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{transform:scaleX(var(--tui-inline))}.t-arrow_left{border-top-right-radius:0;border-bottom-right-radius:0}.t-arrow_right{border-top-left-radius:0;border-bottom-left-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 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 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{transform:scaleX(var(--tui-inline))}.t-arrow_left{border-top-right-radius:0;border-bottom-right-radius:0}.t-arrow_right{border-top-left-radius:0;border-bottom-left-radius:0}\n"] }]
}], propDecorators: { length: [{
type: Input
}], index: [{
type: Input
}], indexChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJldmlldy1wYWdpbmF0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdC9jb21wb25lbnRzL3ByZXZpZXcvcGFnaW5hdGlvbi9wcmV2aWV3LXBhZ2luYXRpb24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvcHJldmlldy9wYWdpbmF0aW9uL3ByZXZpZXctcGFnaW5hdGlvbi50ZW1wbGF0ZS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsSUFBSSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDaEQsT0FBTyxFQUNILHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLE1BQU0sRUFDTixLQUFLLEVBQ0wsTUFBTSxHQUNULE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxRQUFRLEVBQUMsTUFBTSwwQkFBMEIsQ0FBQztBQUNsRCxPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sa0NBQWtDLENBQUM7QUFDM0QsT0FBTyxFQUFDLG9CQUFvQixFQUFFLGlCQUFpQixFQUFDLE1BQU0sc0JBQXNCLENBQUM7QUFFN0UsT0FBTyxFQUFDLGdCQUFnQixFQUFDLE1BQU0sb0NBQW9DLENBQUM7O0FBRXBFLE1BWWEsb0JBQW9CO0lBWmpDO1FBYXVCLFVBQUssR0FBRyxNQUFNLENBQUMsaUJBQWlCLENBQUMsQ0FBQztRQUNsQyxXQUFNLEdBQUcsTUFBTSxDQUFDLG9CQUFvQixDQUFDLENBQUM7UUFHbEQsV0FBTSxHQUFHLENBQUMsQ0FBQztRQUdYLFVBQUssR0FBRyxDQUFDLENBQUM7UUFHRCxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7S0FzQjVEO0lBcEJVLFlBQVksQ0FBQyxJQUFZO1FBQzVCLElBQUksQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxFQUFFLENBQUMsRUFBRSxJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDdEUsQ0FBQztJQUVELElBQWMsa0JBQWtCO1FBQzVCLE9BQU8sSUFBSSxDQUFDLEtBQUssS0FBSyxDQUFDLENBQUM7SUFDNUIsQ0FBQztJQUVELElBQWMsbUJBQW1CO1FBQzdCLE9BQU8sSUFBSSxDQUFDLEtBQUssS0FBSyxJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQztJQUMxQyxDQUFDO0lBRU8sV0FBVyxDQUFDLEtBQWE7UUFDN0IsSUFBSSxJQUFJLENBQUMsS0FBSyxLQUFLLEtBQUssRUFBRTtZQUN0QixPQUFPO1NBQ1Y7UUFFRCxJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQztRQUNuQixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNqQyxDQUFDOytHQWhDUSxvQkFBb0I7bUdBQXBCLG9CQUFvQixzVEMzQmpDLDRxQkF5QkEsb1pEUGMsU0FBUyw4Q0FBRSxJQUFJLDZGQUFFLFNBQVMsb0lBQUUsZ0JBQWdCOztTQVM3QyxvQkFBb0I7NEZBQXBCLG9CQUFvQjtrQkFaaEMsU0FBUztpQ0FDTSxJQUFJLFlBQ04sd0JBQXdCLFdBQ3pCLENBQUMsU0FBUyxFQUFFLElBQUksRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLENBQUMsbUJBR3RDLHVCQUF1QixDQUFDLE1BQU0sUUFDekM7d0JBQ0YsdUNBQXVDLEVBQUUsaUJBQWlCO3dCQUMxRCxzQ0FBc0MsRUFBRSxrQkFBa0I7cUJBQzdEOzhCQU9NLE1BQU07c0JBRFosS0FBSztnQkFJQyxLQUFLO3NCQURYLEtBQUs7Z0JBSVUsV0FBVztzQkFEMUIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7QXN5bmNQaXBlLCBOZ0lmfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDb21wb25lbnQsXG4gICAgRXZlbnRFbWl0dGVyLFxuICAgIGluamVjdCxcbiAgICBJbnB1dCxcbiAgICBPdXRwdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHt0dWlDbGFtcH0gZnJvbSAnQHRhaWdhLXVpL2Nkay91dGlscy9tYXRoJztcbmltcG9ydCB7VHVpQnV0dG9ufSBmcm9tICdAdGFpZ2EtdWkvY29yZS9jb21wb25lbnRzL2J1dHRvbic7XG5pbXBvcnQge1RVSV9QQUdJTkFUSU9OX1RFWFRTLCBUVUlfUFJFVklFV19JQ09OU30gZnJvbSAnQHRhaWdhLXVpL2tpdC90b2tlbnMnO1xuXG5pbXBvcnQge1R1aVByZXZpZXdBY3Rpb259IGZyb20gJy4uL2FjdGlvbi9wcmV2aWV3LWFjdGlvbi5kaXJlY3RpdmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAndHVpLXByZXZpZXctcGFnaW5hdGlvbicsXG4gICAgaW1wb3J0czogW0FzeW5jUGlwZSwgTmdJZiwgVHVpQnV0dG9uLCBUdWlQcmV2aWV3QWN0aW9uXSxcbiAgICB0ZW1wbGF0ZVVybDogJy4vcHJldmlldy1wYWdpbmF0aW9uLnRlbXBsYXRlLmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3ByZXZpZXctcGFnaW5hdGlvbi5zdHlsZS5sZXNzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgaG9zdDoge1xuICAgICAgICAnKGRvY3VtZW50OmtleWRvd24uYXJyb3dSaWdodC5wcmV2ZW50KSc6ICdvbkFycm93Q2xpY2soMSknLFxuICAgICAgICAnKGRvY3VtZW50OmtleWRvd24uYXJyb3dMZWZ0LnByZXZlbnQpJzogJ29uQXJyb3dDbGljaygtMSknLFxuICAgIH0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aVByZXZpZXdQYWdpbmF0aW9uIHtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgaWNvbnMgPSBpbmplY3QoVFVJX1BSRVZJRVdfSUNPTlMpO1xuICAgIHByb3RlY3RlZCByZWFkb25seSB0ZXh0cyQgPSBpbmplY3QoVFVJX1BBR0lOQVRJT05fVEVYVFMpO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgbGVuZ3RoID0gMTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIGluZGV4ID0gMDtcblxuICAgIEBPdXRwdXQoKVxuICAgIHB1YmxpYyByZWFkb25seSBpbmRleENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8bnVtYmVyPigpO1xuXG4gICAgcHVibGljIG9uQXJyb3dDbGljayhzdGVwOiBudW1iZXIpOiB2b2lkIHtcbiAgICAgICAgdGhpcy51cGRhdGVJbmRleCh0dWlDbGFtcCh0aGlzLmluZGV4ICsgc3RlcCwgMCwgdGhpcy5sZW5ndGggLSAxKSk7XG4gICAgfVxuXG4gICAgcHJvdGVjdGVkIGdldCBsZWZ0QnV0dG9uRGlzYWJsZWQoKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiB0aGlzLmluZGV4ID09PSAwO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCBnZXQgcmlnaHRCdXR0b25EaXNhYmxlZCgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuaW5kZXggPT09IHRoaXMubGVuZ3RoIC0gMTtcbiAgICB9XG5cbiAgICBwcml2YXRlIHVwZGF0ZUluZGV4KGluZGV4OiBudW1iZXIpOiB2b2lkIHtcbiAgICAgICAgaWYgKHRoaXMuaW5kZXggPT09IGluZGV4KSB7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLmluZGV4ID0gaW5kZXg7XG4gICAgICAgIHRoaXMuaW5kZXhDaGFuZ2UuZW1pdChpbmRleCk7XG4gICAgfVxufVxuIiwiPG5nLWNvbnRhaW5lciAqbmdJZj1cInRleHRzJCB8IGFzeW5jIGFzIHRleHRzXCI+XG4gICAgPGJ1dHRvblxuICAgICAgICB0dWlJY29uQnV0dG9uXG4gICAgICAgIHR1aVByZXZpZXdBY3Rpb25cbiAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgIGNsYXNzPVwidC1hcnJvdyB0LWFycm93X2xlZnRcIlxuICAgICAgICBbZGlzYWJsZWRdPVwibGVmdEJ1dHRvbkRpc2FibGVkXCJcbiAgICAgICAgW2ljb25TdGFydF09XCJpY29ucy5wcmV2XCJcbiAgICAgICAgKGNsaWNrKT1cIm9uQXJyb3dDbGljaygtMSlcIlxuICAgID5cbiAgICAgICAge3sgdGV4dHNbMF0gfX1cbiAgICA8L2J1dHRvbj5cbiAgICB7eyBpbmRleCArIDEgfX0ve3sgbGVuZ3RoIH19XG4gICAgPGJ1dHRvblxuICAgICAgICB0dWlJY29uQnV0dG9uXG4gICAgICAgIHR1aVByZXZpZXdBY3Rpb25cbiAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgIGNsYXNzPVwidC1hcnJvdyB0LWFycm93X3JpZ2h0XCJcbiAgICAgICAgW2Rpc2FibGVkXT1cInJpZ2h0QnV0dG9uRGlzYWJsZWRcIlxuICAgICAgICBbaWNvblN0YXJ0XT1cImljb25zLm5leHRcIlxuICAgICAgICAoY2xpY2spPVwib25BcnJvd0NsaWNrKDEpXCJcbiAgICA+XG4gICAgICAgIHt7IHRleHRzWzFdIH19XG4gICAgPC9idXR0b24+XG48L25nLWNvbnRhaW5lcj5cbiJdfQ==