@taiga-ui/core
Version:
Core library for creating Angular components and applications using Taiga UI
58 lines (54 loc) • 5.61 kB
JavaScript
import { AsyncPipe, NgIf } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, EventEmitter, Component, ChangeDetectionStrategy, 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';
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 }); }
}
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
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { TuiSpinButton };
//# sourceMappingURL=taiga-ui-core-components-spin-button.mjs.map