@taiga-ui/core
Version:
Core library for creating Angular components and applications using Taiga UI
51 lines • 10.9 kB
JavaScript
import { AsyncPipe, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, Output, } from '@angular/core';
import { TuiButton } from '@taiga-ui/core/components/button';
import { TUI_SPIN_ICONS, TUI_SPIN_TEXTS } from '@taiga-ui/core/tokens';
import * as i0 from "@angular/core";
class TuiSpinButton {
constructor() {
this.icons = inject(TUI_SPIN_ICONS);
this.spinTexts$ = inject(TUI_SPIN_TEXTS);
this.focusable = true;
this.disabled = false;
this.leftDisabled = false;
this.rightDisabled = false;
this.leftClick = new EventEmitter();
this.rightClick = new EventEmitter();
}
onLeftClick() {
if (!this.disabled && !this.leftDisabled) {
this.leftClick.emit();
}
}
onRightClick() {
if (!this.disabled && !this.rightDisabled) {
this.rightClick.emit();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSpinButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiSpinButton, isStandalone: true, selector: "tui-spin-button", inputs: { focusable: "focusable", disabled: "disabled", leftDisabled: "leftDisabled", rightDisabled: "rightDisabled" }, outputs: { leftClick: "leftClick", rightClick: "rightClick" }, host: { listeners: { "mousedown.zoneless.prevent": "(0)", "keydown.arrowLeft.prevent": "onLeftClick()", "keydown.arrowRight.prevent": "onRightClick()" } }, ngImport: i0, template: "<ng-container *ngIf=\"spinTexts$ | async as texts\">\n <button\n appearance=\"flat\"\n automation-id=\"tui-spin-button__left\"\n size=\"xs\"\n tuiIconButton\n type=\"button\"\n class=\"t-button\"\n [class.t-button_hidden]=\"disabled || leftDisabled\"\n [iconStart]=\"icons.decrement\"\n [tabIndex]=\"focusable ? 0 : -1\"\n (click)=\"onLeftClick()\"\n >\n {{ texts[0] }}\n </button>\n <span class=\"t-content t-calendar-title\">\n <ng-content />\n </span>\n <button\n appearance=\"flat\"\n automation-id=\"tui-spin-button__right\"\n size=\"xs\"\n tuiIconButton\n type=\"button\"\n class=\"t-button\"\n [class.t-button_hidden]=\"disabled || rightDisabled\"\n [iconStart]=\"icons.increment\"\n [tabIndex]=\"focusable ? 0 : -1\"\n (click)=\"onRightClick()\"\n >\n {{ texts[1] }}\n </button>\n</ng-container>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;font:var(--tui-font-text-l);text-align:center;font-weight:700}.t-button{transform:scaleX(var(--tui-inline))}.t-button_hidden{visibility:hidden}.t-content{padding:0 .5rem}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiSpinButton };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSpinButton, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-spin-button', imports: [AsyncPipe, NgIf, TuiButton], changeDetection: ChangeDetectionStrategy.OnPush, host: {
'(mousedown.zoneless.prevent)': '(0)',
'(keydown.arrowLeft.prevent)': 'onLeftClick()',
'(keydown.arrowRight.prevent)': 'onRightClick()',
}, template: "<ng-container *ngIf=\"spinTexts$ | async as texts\">\n <button\n appearance=\"flat\"\n automation-id=\"tui-spin-button__left\"\n size=\"xs\"\n tuiIconButton\n type=\"button\"\n class=\"t-button\"\n [class.t-button_hidden]=\"disabled || leftDisabled\"\n [iconStart]=\"icons.decrement\"\n [tabIndex]=\"focusable ? 0 : -1\"\n (click)=\"onLeftClick()\"\n >\n {{ texts[0] }}\n </button>\n <span class=\"t-content t-calendar-title\">\n <ng-content />\n </span>\n <button\n appearance=\"flat\"\n automation-id=\"tui-spin-button__right\"\n size=\"xs\"\n tuiIconButton\n type=\"button\"\n class=\"t-button\"\n [class.t-button_hidden]=\"disabled || rightDisabled\"\n [iconStart]=\"icons.increment\"\n [tabIndex]=\"focusable ? 0 : -1\"\n (click)=\"onRightClick()\"\n >\n {{ texts[1] }}\n </button>\n</ng-container>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;font:var(--tui-font-text-l);text-align:center;font-weight:700}.t-button{transform:scaleX(var(--tui-inline))}.t-button_hidden{visibility:hidden}.t-content{padding:0 .5rem}\n"] }]
}], propDecorators: { focusable: [{
type: Input
}], disabled: [{
type: Input
}], leftDisabled: [{
type: Input
}], rightDisabled: [{
type: Input
}], leftClick: [{
type: Output
}], rightClick: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bpbi1idXR0b24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29yZS9jb21wb25lbnRzL3NwaW4tYnV0dG9uL3NwaW4tYnV0dG9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvcmUvY29tcG9uZW50cy9zcGluLWJ1dHRvbi9zcGluLWJ1dHRvbi50ZW1wbGF0ZS5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsSUFBSSxFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDaEQsT0FBTyxFQUNILHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLE1BQU0sRUFDTixLQUFLLEVBQ0wsTUFBTSxHQUNULE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxrQ0FBa0MsQ0FBQztBQUMzRCxPQUFPLEVBQUMsY0FBYyxFQUFFLGNBQWMsRUFBQyxNQUFNLHVCQUF1QixDQUFDOztBQUVyRSxNQWFhLGFBQWE7SUFiMUI7UUFjdUIsVUFBSyxHQUFHLE1BQU0sQ0FBQyxjQUFjLENBQUMsQ0FBQztRQUMvQixlQUFVLEdBQUcsTUFBTSxDQUFDLGNBQWMsQ0FBQyxDQUFDO1FBR2hELGNBQVMsR0FBRyxJQUFJLENBQUM7UUFHakIsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUdqQixpQkFBWSxHQUFHLEtBQUssQ0FBQztRQUdyQixrQkFBYSxHQUFHLEtBQUssQ0FBQztRQUdiLGNBQVMsR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO1FBR3JDLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO0tBYXpEO0lBWFUsV0FBVztRQUNkLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksRUFBRTtZQUN0QyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksRUFBRSxDQUFDO1NBQ3pCO0lBQ0wsQ0FBQztJQUVNLFlBQVk7UUFDZixJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLEVBQUU7WUFDdkMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUMxQjtJQUNMLENBQUM7K0dBaENRLGFBQWE7bUdBQWIsYUFBYSw4WkN6QjFCLGcrQkFpQ0EscVNEbEJjLFNBQVMsOENBQUUsSUFBSSw2RkFBRSxTQUFTOztTQVUzQixhQUFhOzRGQUFiLGFBQWE7a0JBYnpCLFNBQVM7aUNBQ00sSUFBSSxZQUNOLGlCQUFpQixXQUNsQixDQUFDLFNBQVMsRUFBRSxJQUFJLEVBQUUsU0FBUyxDQUFDLG1CQUdwQix1QkFBdUIsQ0FBQyxNQUFNLFFBQ3pDO3dCQUNGLDhCQUE4QixFQUFFLEtBQUs7d0JBQ3JDLDZCQUE2QixFQUFFLGVBQWU7d0JBQzlDLDhCQUE4QixFQUFFLGdCQUFnQjtxQkFDbkQ7OEJBT00sU0FBUztzQkFEZixLQUFLO2dCQUlDLFFBQVE7c0JBRGQsS0FBSztnQkFJQyxZQUFZO3NCQURsQixLQUFLO2dCQUlDLGFBQWE7c0JBRG5CLEtBQUs7Z0JBSVUsU0FBUztzQkFEeEIsTUFBTTtnQkFJUyxVQUFVO3NCQUR6QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtBc3luY1BpcGUsIE5nSWZ9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENvbXBvbmVudCxcbiAgICBFdmVudEVtaXR0ZXIsXG4gICAgaW5qZWN0LFxuICAgIElucHV0LFxuICAgIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1R1aUJ1dHRvbn0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvY29tcG9uZW50cy9idXR0b24nO1xuaW1wb3J0IHtUVUlfU1BJTl9JQ09OUywgVFVJX1NQSU5fVEVYVFN9IGZyb20gJ0B0YWlnYS11aS9jb3JlL3Rva2Vucyc7XG5cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICd0dWktc3Bpbi1idXR0b24nLFxuICAgIGltcG9ydHM6IFtBc3luY1BpcGUsIE5nSWYsIFR1aUJ1dHRvbl0sXG4gICAgdGVtcGxhdGVVcmw6ICcuL3NwaW4tYnV0dG9uLnRlbXBsYXRlLmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3NwaW4tYnV0dG9uLnN0eWxlLmxlc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBob3N0OiB7XG4gICAgICAgICcobW91c2Vkb3duLnpvbmVsZXNzLnByZXZlbnQpJzogJygwKScsXG4gICAgICAgICcoa2V5ZG93bi5hcnJvd0xlZnQucHJldmVudCknOiAnb25MZWZ0Q2xpY2soKScsXG4gICAgICAgICcoa2V5ZG93bi5hcnJvd1JpZ2h0LnByZXZlbnQpJzogJ29uUmlnaHRDbGljaygpJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlTcGluQnV0dG9uIHtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgaWNvbnMgPSBpbmplY3QoVFVJX1NQSU5fSUNPTlMpO1xuICAgIHByb3RlY3RlZCByZWFkb25seSBzcGluVGV4dHMkID0gaW5qZWN0KFRVSV9TUElOX1RFWFRTKTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIGZvY3VzYWJsZSA9IHRydWU7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBkaXNhYmxlZCA9IGZhbHNlO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgbGVmdERpc2FibGVkID0gZmFsc2U7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyByaWdodERpc2FibGVkID0gZmFsc2U7XG5cbiAgICBAT3V0cHV0KClcbiAgICBwdWJsaWMgcmVhZG9ubHkgbGVmdENsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gICAgQE91dHB1dCgpXG4gICAgcHVibGljIHJlYWRvbmx5IHJpZ2h0Q2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgICBwdWJsaWMgb25MZWZ0Q2xpY2soKTogdm9pZCB7XG4gICAgICAgIGlmICghdGhpcy5kaXNhYmxlZCAmJiAhdGhpcy5sZWZ0RGlzYWJsZWQpIHtcbiAgICAgICAgICAgIHRoaXMubGVmdENsaWNrLmVtaXQoKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIHB1YmxpYyBvblJpZ2h0Q2xpY2soKTogdm9pZCB7XG4gICAgICAgIGlmICghdGhpcy5kaXNhYmxlZCAmJiAhdGhpcy5yaWdodERpc2FibGVkKSB7XG4gICAgICAgICAgICB0aGlzLnJpZ2h0Q2xpY2suZW1pdCgpO1xuICAgICAgICB9XG4gICAgfVxufVxuIiwiPG5nLWNvbnRhaW5lciAqbmdJZj1cInNwaW5UZXh0cyQgfCBhc3luYyBhcyB0ZXh0c1wiPlxuICAgIDxidXR0b25cbiAgICAgICAgYXBwZWFyYW5jZT1cImZsYXRcIlxuICAgICAgICBhdXRvbWF0aW9uLWlkPVwidHVpLXNwaW4tYnV0dG9uX19sZWZ0XCJcbiAgICAgICAgc2l6ZT1cInhzXCJcbiAgICAgICAgdHVpSWNvbkJ1dHRvblxuICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgY2xhc3M9XCJ0LWJ1dHRvblwiXG4gICAgICAgIFtjbGFzcy50LWJ1dHRvbl9oaWRkZW5dPVwiZGlzYWJsZWQgfHwgbGVmdERpc2FibGVkXCJcbiAgICAgICAgW2ljb25TdGFydF09XCJpY29ucy5kZWNyZW1lbnRcIlxuICAgICAgICBbdGFiSW5kZXhdPVwiZm9jdXNhYmxlID8gMCA6IC0xXCJcbiAgICAgICAgKGNsaWNrKT1cIm9uTGVmdENsaWNrKClcIlxuICAgID5cbiAgICAgICAge3sgdGV4dHNbMF0gfX1cbiAgICA8L2J1dHRvbj5cbiAgICA8c3BhbiBjbGFzcz1cInQtY29udGVudCB0LWNhbGVuZGFyLXRpdGxlXCI+XG4gICAgICAgIDxuZy1jb250ZW50IC8+XG4gICAgPC9zcGFuPlxuICAgIDxidXR0b25cbiAgICAgICAgYXBwZWFyYW5jZT1cImZsYXRcIlxuICAgICAgICBhdXRvbWF0aW9uLWlkPVwidHVpLXNwaW4tYnV0dG9uX19yaWdodFwiXG4gICAgICAgIHNpemU9XCJ4c1wiXG4gICAgICAgIHR1aUljb25CdXR0b25cbiAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgIGNsYXNzPVwidC1idXR0b25cIlxuICAgICAgICBbY2xhc3MudC1idXR0b25faGlkZGVuXT1cImRpc2FibGVkIHx8IHJpZ2h0RGlzYWJsZWRcIlxuICAgICAgICBbaWNvblN0YXJ0XT1cImljb25zLmluY3JlbWVudFwiXG4gICAgICAgIFt0YWJJbmRleF09XCJmb2N1c2FibGUgPyAwIDogLTFcIlxuICAgICAgICAoY2xpY2spPVwib25SaWdodENsaWNrKClcIlxuICAgID5cbiAgICAgICAge3sgdGV4dHNbMV0gfX1cbiAgICA8L2J1dHRvbj5cbjwvbmctY29udGFpbmVyPlxuIl19