@taiga-ui/kit
Version:
Taiga UI Angular main components kit
57 lines • 13.5 kB
JavaScript
import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core';
import { TuiControl } from '@taiga-ui/cdk/classes';
import { tuiClamp, tuiSum } from '@taiga-ui/cdk/utils/math';
import { TuiButton } from '@taiga-ui/core/components/button';
import { TuiInputNumberStepService } from '@taiga-ui/kit/components/input-number';
import { TuiFade } from '@taiga-ui/kit/directives/fade';
import { TuiFluidTypography } from '@taiga-ui/kit/directives/fluid-typography';
import { TUI_COUNTER_OPTIONS } from './counter.options';
import { tuiFallbackValueProvider } from '@taiga-ui/cdk/tokens';
import * as i0 from "@angular/core";
class TuiCounter extends TuiControl {
constructor() {
super(...arguments);
this.options = inject(TUI_COUNTER_OPTIONS);
this.hold = inject(TuiInputNumberStepService);
this.$ = this.hold.steps$.subscribe((value) => this.onStep(value));
this.step = this.options.step;
this.size = this.options.size;
this.min = this.options.min;
this.max = this.options.max;
this.appearance = this.options.appearance;
}
get limit() {
switch (this.size) {
case 'l':
return 1.25;
case 'm':
return 1;
case 's':
return 13 / 16;
}
}
onStep(step) {
this.onChange(tuiClamp(tuiSum(this.value(), step), this.min, this.max));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiCounter, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiCounter, isStandalone: true, selector: "tui-counter", inputs: { step: "step", size: "size", min: "min", max: "max", appearance: "appearance" }, host: { properties: { "attr.data-size": "size", "attr.data-appearance": "appearance" } }, providers: [TuiInputNumberStepService, tuiFallbackValueProvider(0)], usesInheritance: true, ngImport: i0, template: "<button\n tuiIconButton\n type=\"button\"\n class=\"t-button\"\n [appearance]=\"appearance\"\n [disabled]=\"value() - step < min\"\n [iconStart]=\"options.icons.decrease\"\n [size]=\"size\"\n (click)=\"onStep(-step)\"\n (pointerdown.prevent)=\"hold.next(-step)\"\n>\n -\n</button>\n<div\n tuiFade\n class=\"t-content\"\n [tuiFluidTypography]=\"[0.625, limit]\"\n>\n {{ value() }}\n <ng-content />\n</div>\n<button\n tuiIconButton\n type=\"button\"\n class=\"t-button\"\n [appearance]=\"appearance\"\n [disabled]=\"value() + step > max\"\n [iconStart]=\"options.icons.increase\"\n [size]=\"size\"\n (click)=\"onStep(step)\"\n (pointerdown.prevent)=\"hold.next(step)\"\n>\n +\n</button>\n", styles: [":host{display:flex;min-inline-size:min(10.5rem,100%);max-inline-size:100%;align-items:center;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;justify-content:flex-end;border-radius:1rem;gap:.25rem}:host[data-size=m]{min-inline-size:min(8.125rem,100%);border-radius:.75rem}:host[data-size=s]{min-inline-size:min(6rem,100%);border-radius:2rem}:host[data-size=s] .t-button:first-child:after{inset-inline-end:0}:host[data-size=s] .t-button:last-child:after{inset-inline-start:0}:host[data-appearance=primary]{background:var(--tui-background-accent-1);color:var(--tui-text-primary-on-accent-1)}:host[data-appearance=flat]{background:var(--tui-background-neutral-1)}.t-content{display:flex;flex:1;justify-content:center;white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums;transition:none}.t-button{border-radius:inherit}@media screen and (max-width: 47.9625em){.t-button{position:relative;overflow:visible}.t-button:after{content:\"\";position:absolute;display:block!important;inline-size:max(100%,2.75rem);block-size:max(100%,2.75rem);background:transparent}}\n"], dependencies: [{ kind: "directive", type: TuiButton, selector: "a[tuiButton],button[tuiButton],a[tuiIconButton],button[tuiIconButton]", inputs: ["size"] }, { kind: "directive", type: TuiFade, selector: "[tuiFade]", inputs: ["tuiFadeHeight", "tuiFadeSize", "tuiFadeOffset", "tuiFade"] }, { kind: "directive", type: TuiFluidTypography, selector: "[tuiFluidTypography]", inputs: ["tuiFluidTypography"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiCounter };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiCounter, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-counter', imports: [TuiButton, TuiFade, TuiFluidTypography], changeDetection: ChangeDetectionStrategy.OnPush, providers: [TuiInputNumberStepService, tuiFallbackValueProvider(0)], host: {
'[attr.data-size]': 'size',
'[attr.data-appearance]': 'appearance',
}, template: "<button\n tuiIconButton\n type=\"button\"\n class=\"t-button\"\n [appearance]=\"appearance\"\n [disabled]=\"value() - step < min\"\n [iconStart]=\"options.icons.decrease\"\n [size]=\"size\"\n (click)=\"onStep(-step)\"\n (pointerdown.prevent)=\"hold.next(-step)\"\n>\n -\n</button>\n<div\n tuiFade\n class=\"t-content\"\n [tuiFluidTypography]=\"[0.625, limit]\"\n>\n {{ value() }}\n <ng-content />\n</div>\n<button\n tuiIconButton\n type=\"button\"\n class=\"t-button\"\n [appearance]=\"appearance\"\n [disabled]=\"value() + step > max\"\n [iconStart]=\"options.icons.increase\"\n [size]=\"size\"\n (click)=\"onStep(step)\"\n (pointerdown.prevent)=\"hold.next(step)\"\n>\n +\n</button>\n", styles: [":host{display:flex;min-inline-size:min(10.5rem,100%);max-inline-size:100%;align-items:center;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;justify-content:flex-end;border-radius:1rem;gap:.25rem}:host[data-size=m]{min-inline-size:min(8.125rem,100%);border-radius:.75rem}:host[data-size=s]{min-inline-size:min(6rem,100%);border-radius:2rem}:host[data-size=s] .t-button:first-child:after{inset-inline-end:0}:host[data-size=s] .t-button:last-child:after{inset-inline-start:0}:host[data-appearance=primary]{background:var(--tui-background-accent-1);color:var(--tui-text-primary-on-accent-1)}:host[data-appearance=flat]{background:var(--tui-background-neutral-1)}.t-content{display:flex;flex:1;justify-content:center;white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums;transition:none}.t-button{border-radius:inherit}@media screen and (max-width: 47.9625em){.t-button{position:relative;overflow:visible}.t-button:after{content:\"\";position:absolute;display:block!important;inline-size:max(100%,2.75rem);block-size:max(100%,2.75rem);background:transparent}}\n"] }]
}], propDecorators: { step: [{
type: Input
}], size: [{
type: Input
}], min: [{
type: Input
}], max: [{
type: Input
}], appearance: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY291bnRlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9raXQvY29tcG9uZW50cy9jb3VudGVyL2NvdW50ZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvY291bnRlci9jb3VudGVyLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ2hGLE9BQU8sRUFBQyxVQUFVLEVBQUMsTUFBTSx1QkFBdUIsQ0FBQztBQUNqRCxPQUFPLEVBQUMsUUFBUSxFQUFFLE1BQU0sRUFBQyxNQUFNLDBCQUEwQixDQUFDO0FBQzFELE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxrQ0FBa0MsQ0FBQztBQUMzRCxPQUFPLEVBQUMseUJBQXlCLEVBQUMsTUFBTSx1Q0FBdUMsQ0FBQztBQUNoRixPQUFPLEVBQUMsT0FBTyxFQUFDLE1BQU0sK0JBQStCLENBQUM7QUFDdEQsT0FBTyxFQUFDLGtCQUFrQixFQUFDLE1BQU0sMkNBQTJDLENBQUM7QUFFN0UsT0FBTyxFQUFDLG1CQUFtQixFQUFDLE1BQU0sbUJBQW1CLENBQUM7QUFDdEQsT0FBTyxFQUFDLHdCQUF3QixFQUFDLE1BQU0sc0JBQXNCLENBQUM7O0FBRTlELE1BYWEsVUFBVyxTQUFRLFVBQWtCO0lBYmxEOztRQWN1QixZQUFPLEdBQUcsTUFBTSxDQUFDLG1CQUFtQixDQUFDLENBQUM7UUFDdEMsU0FBSSxHQUFHLE1BQU0sQ0FBQyx5QkFBeUIsQ0FBQyxDQUFDO1FBQ3pDLE1BQUMsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztRQUcxRSxTQUFJLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUM7UUFHekIsU0FBSSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDO1FBR3pCLFFBQUcsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQztRQUd2QixRQUFHLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUM7UUFHdkIsZUFBVSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsVUFBVSxDQUFDO0tBZ0IvQztJQWRHLElBQWMsS0FBSztRQUNmLFFBQVEsSUFBSSxDQUFDLElBQUksRUFBRTtZQUNmLEtBQUssR0FBRztnQkFDSixPQUFPLElBQUksQ0FBQztZQUNoQixLQUFLLEdBQUc7Z0JBQ0osT0FBTyxDQUFDLENBQUM7WUFDYixLQUFLLEdBQUc7Z0JBQ0osT0FBTyxFQUFFLEdBQUcsRUFBRSxDQUFDO1NBQ3RCO0lBQ0wsQ0FBQztJQUVTLE1BQU0sQ0FBQyxJQUFZO1FBQ3pCLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLEVBQUUsSUFBSSxDQUFDLEVBQUUsSUFBSSxDQUFDLEdBQUcsRUFBRSxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQztJQUM1RSxDQUFDOytHQWpDUSxVQUFVO21HQUFWLFVBQVUsOE9BTlIsQ0FBQyx5QkFBeUIsRUFBRSx3QkFBd0IsQ0FBQyxDQUFDLENBQUMsQ0FBQyxpRENsQnZFLDJ2QkFrQ0EsK29DRHBCYyxTQUFTLG9JQUFFLE9BQU8sNEhBQUUsa0JBQWtCOztTQVV2QyxVQUFVOzRGQUFWLFVBQVU7a0JBYnRCLFNBQVM7aUNBQ00sSUFBSSxZQUNOLGFBQWEsV0FDZCxDQUFDLFNBQVMsRUFBRSxPQUFPLEVBQUUsa0JBQWtCLENBQUMsbUJBR2hDLHVCQUF1QixDQUFDLE1BQU0sYUFDcEMsQ0FBQyx5QkFBeUIsRUFBRSx3QkFBd0IsQ0FBQyxDQUFDLENBQUMsQ0FBQyxRQUM3RDt3QkFDRixrQkFBa0IsRUFBRSxNQUFNO3dCQUMxQix3QkFBd0IsRUFBRSxZQUFZO3FCQUN6Qzs4QkFRTSxJQUFJO3NCQURWLEtBQUs7Z0JBSUMsSUFBSTtzQkFEVixLQUFLO2dCQUlDLEdBQUc7c0JBRFQsS0FBSztnQkFJQyxHQUFHO3NCQURULEtBQUs7Z0JBSUMsVUFBVTtzQkFEaEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgaW5qZWN0LCBJbnB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1R1aUNvbnRyb2x9IGZyb20gJ0B0YWlnYS11aS9jZGsvY2xhc3Nlcyc7XG5pbXBvcnQge3R1aUNsYW1wLCB0dWlTdW19IGZyb20gJ0B0YWlnYS11aS9jZGsvdXRpbHMvbWF0aCc7XG5pbXBvcnQge1R1aUJ1dHRvbn0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvY29tcG9uZW50cy9idXR0b24nO1xuaW1wb3J0IHtUdWlJbnB1dE51bWJlclN0ZXBTZXJ2aWNlfSBmcm9tICdAdGFpZ2EtdWkva2l0L2NvbXBvbmVudHMvaW5wdXQtbnVtYmVyJztcbmltcG9ydCB7VHVpRmFkZX0gZnJvbSAnQHRhaWdhLXVpL2tpdC9kaXJlY3RpdmVzL2ZhZGUnO1xuaW1wb3J0IHtUdWlGbHVpZFR5cG9ncmFwaHl9IGZyb20gJ0B0YWlnYS11aS9raXQvZGlyZWN0aXZlcy9mbHVpZC10eXBvZ3JhcGh5JztcblxuaW1wb3J0IHtUVUlfQ09VTlRFUl9PUFRJT05TfSBmcm9tICcuL2NvdW50ZXIub3B0aW9ucyc7XG5pbXBvcnQge3R1aUZhbGxiYWNrVmFsdWVQcm92aWRlcn0gZnJvbSAnQHRhaWdhLXVpL2Nkay90b2tlbnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAndHVpLWNvdW50ZXInLFxuICAgIGltcG9ydHM6IFtUdWlCdXR0b24sIFR1aUZhZGUsIFR1aUZsdWlkVHlwb2dyYXBoeV0sXG4gICAgdGVtcGxhdGVVcmw6ICcuL2NvdW50ZXIudGVtcGxhdGUuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vY291bnRlci5zdHlsZS5sZXNzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgcHJvdmlkZXJzOiBbVHVpSW5wdXROdW1iZXJTdGVwU2VydmljZSwgdHVpRmFsbGJhY2tWYWx1ZVByb3ZpZGVyKDApXSxcbiAgICBob3N0OiB7XG4gICAgICAgICdbYXR0ci5kYXRhLXNpemVdJzogJ3NpemUnLFxuICAgICAgICAnW2F0dHIuZGF0YS1hcHBlYXJhbmNlXSc6ICdhcHBlYXJhbmNlJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlDb3VudGVyIGV4dGVuZHMgVHVpQ29udHJvbDxudW1iZXI+IHtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgb3B0aW9ucyA9IGluamVjdChUVUlfQ09VTlRFUl9PUFRJT05TKTtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgaG9sZCA9IGluamVjdChUdWlJbnB1dE51bWJlclN0ZXBTZXJ2aWNlKTtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgJCA9IHRoaXMuaG9sZC5zdGVwcyQuc3Vic2NyaWJlKCh2YWx1ZSkgPT4gdGhpcy5vblN0ZXAodmFsdWUpKTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHN0ZXAgPSB0aGlzLm9wdGlvbnMuc3RlcDtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHNpemUgPSB0aGlzLm9wdGlvbnMuc2l6ZTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIG1pbiA9IHRoaXMub3B0aW9ucy5taW47XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBtYXggPSB0aGlzLm9wdGlvbnMubWF4O1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgYXBwZWFyYW5jZSA9IHRoaXMub3B0aW9ucy5hcHBlYXJhbmNlO1xuXG4gICAgcHJvdGVjdGVkIGdldCBsaW1pdCgpOiBudW1iZXIge1xuICAgICAgICBzd2l0Y2ggKHRoaXMuc2l6ZSkge1xuICAgICAgICAgICAgY2FzZSAnbCc6XG4gICAgICAgICAgICAgICAgcmV0dXJuIDEuMjU7XG4gICAgICAgICAgICBjYXNlICdtJzpcbiAgICAgICAgICAgICAgICByZXR1cm4gMTtcbiAgICAgICAgICAgIGNhc2UgJ3MnOlxuICAgICAgICAgICAgICAgIHJldHVybiAxMyAvIDE2O1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgcHJvdGVjdGVkIG9uU3RlcChzdGVwOiBudW1iZXIpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5vbkNoYW5nZSh0dWlDbGFtcCh0dWlTdW0odGhpcy52YWx1ZSgpLCBzdGVwKSwgdGhpcy5taW4sIHRoaXMubWF4KSk7XG4gICAgfVxufVxuIiwiPGJ1dHRvblxuICAgIHR1aUljb25CdXR0b25cbiAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICBjbGFzcz1cInQtYnV0dG9uXCJcbiAgICBbYXBwZWFyYW5jZV09XCJhcHBlYXJhbmNlXCJcbiAgICBbZGlzYWJsZWRdPVwidmFsdWUoKSAtIHN0ZXAgPCBtaW5cIlxuICAgIFtpY29uU3RhcnRdPVwib3B0aW9ucy5pY29ucy5kZWNyZWFzZVwiXG4gICAgW3NpemVdPVwic2l6ZVwiXG4gICAgKGNsaWNrKT1cIm9uU3RlcCgtc3RlcClcIlxuICAgIChwb2ludGVyZG93bi5wcmV2ZW50KT1cImhvbGQubmV4dCgtc3RlcClcIlxuPlxuICAgIC1cbjwvYnV0dG9uPlxuPGRpdlxuICAgIHR1aUZhZGVcbiAgICBjbGFzcz1cInQtY29udGVudFwiXG4gICAgW3R1aUZsdWlkVHlwb2dyYXBoeV09XCJbMC42MjUsIGxpbWl0XVwiXG4+XG4gICAge3sgdmFsdWUoKSB9fVxuICAgIDxuZy1jb250ZW50IC8+XG48L2Rpdj5cbjxidXR0b25cbiAgICB0dWlJY29uQnV0dG9uXG4gICAgdHlwZT1cImJ1dHRvblwiXG4gICAgY2xhc3M9XCJ0LWJ1dHRvblwiXG4gICAgW2FwcGVhcmFuY2VdPVwiYXBwZWFyYW5jZVwiXG4gICAgW2Rpc2FibGVkXT1cInZhbHVlKCkgKyBzdGVwID4gbWF4XCJcbiAgICBbaWNvblN0YXJ0XT1cIm9wdGlvbnMuaWNvbnMuaW5jcmVhc2VcIlxuICAgIFtzaXplXT1cInNpemVcIlxuICAgIChjbGljayk9XCJvblN0ZXAoc3RlcClcIlxuICAgIChwb2ludGVyZG93bi5wcmV2ZW50KT1cImhvbGQubmV4dChzdGVwKVwiXG4+XG4gICAgK1xuPC9idXR0b24+XG4iXX0=