@taiga-ui/kit
Version:
Taiga UI Angular main components kit
77 lines (72 loc) • 7.7 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, Component, ChangeDetectionStrategy, 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 { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
import { tuiFallbackValueProvider } from '@taiga-ui/cdk/tokens';
const TUI_COUNTER_DEFAULT_OPTIONS = {
appearance: 'primary',
size: 'l',
min: 0,
max: Number.MAX_SAFE_INTEGER,
step: 1,
icons: {
increase: '.plus',
decrease: '.minus',
},
};
const [TUI_COUNTER_OPTIONS, tuiCounterOptionsProvider] = tuiCreateOptions(TUI_COUNTER_DEFAULT_OPTIONS);
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 }); }
}
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
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { TUI_COUNTER_DEFAULT_OPTIONS, TUI_COUNTER_OPTIONS, TuiCounter, tuiCounterOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-counter.mjs.map