@taiga-ui/kit
Version:
Taiga UI Angular main components kit
57 lines • 14.5 kB
JavaScript
import { NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { RouterLinkActive } from '@angular/router';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { TuiIcon } from '@taiga-ui/core/components/icon';
import { TUI_COMMON_ICONS } from '@taiga-ui/core/tokens';
import { EMPTY, filter } from 'rxjs';
import { TuiStepperComponent } from './stepper.component';
import * as i0 from "@angular/core";
class TuiStep {
constructor() {
this.stepper = inject(TuiStepperComponent);
this.el = tuiInjectElement();
this.$ = (inject(RouterLinkActive, { optional: true })?.isActiveChange.asObservable() ?? EMPTY)
.pipe(filter(Boolean), takeUntilDestroyed())
.subscribe(() => this.activate());
this.focusVisible = false;
this.icons = inject(TUI_COMMON_ICONS);
this.stepState = 'normal';
this.icon = '';
}
get isActive() {
return this.stepper.isActive(this.index);
}
get isVertical() {
return this.stepper.orientation === 'vertical';
}
get tabIndex() {
return this.isActive ? 0 : -1;
}
get index() {
return this.stepper.indexOf(this.el);
}
activate() {
this.stepper.activate(this.index);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiStep, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiStep, isStandalone: true, selector: "button[tuiStep], a[tuiStep]:not([routerLink]), a[tuiStep][routerLink][routerLinkActive]", inputs: { stepState: "stepState", icon: "icon" }, host: { listeners: { "click": "activate()" }, properties: { "attr.data-state": "stepState", "class._vertical": "isVertical", "class._focus-visible": "focusVisible", "class._active": "isActive", "tabIndex": "tabIndex" } }, ngImport: i0, template: "<tui-icon\n *ngIf=\"icon\"\n class=\"t-marker t-marker_custom\"\n [icon]=\"icon\"\n/>\n<tui-icon\n class=\"t-marker t-marker_error\"\n [icon]=\"icons.error\"\n/>\n<tui-icon\n class=\"t-marker t-marker_pass\"\n [icon]=\"icons.check\"\n/>\n<div class=\"t-marker t-marker_index\"></div>\n<ng-content />\n", styles: [":host{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;position:relative;display:flex;align-items:center;flex-shrink:0;color:var(--tui-text-action);margin-inline-end:1.5rem;outline:none;cursor:pointer;counter-increment:steps;text-align:start}:host:disabled{pointer-events:none;color:var(--tui-text-secondary)}:host:hover{color:var(--tui-text-action-hover)}:host:not(:last-of-type)._vertical{margin-block-end:1.25rem}:host._active,:host._active:hover{color:var(--tui-text-primary);cursor:default}:host:focus-visible:before{content:\"\";position:absolute;left:2.75rem;right:0;top:50%;block-size:1.5rem;margin-block-start:-.75rem;background:var(--tui-service-selection-background)}.t-marker{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;display:flex;inline-size:2rem;block-size:2rem;border-radius:100%;margin-inline-end:.75rem;flex-shrink:0;align-items:center;align-self:flex-start;justify-content:center;background:var(--tui-background-neutral-1);color:var(--tui-text-action);border:.5rem solid transparent;box-sizing:border-box}:host:disabled .t-marker{background:var(--tui-background-neutral-1);color:var(--tui-text-secondary)}.t-marker_index:before{content:counter(steps)}:host:hover .t-marker_index{color:var(--tui-text-action-hover);background:var(--tui-background-neutral-1-hover)}:host._active .t-marker_index{color:var(--tui-text-primary-on-accent-1);background:var(--tui-background-accent-1)}:host:not([data-state=normal]):not(._active) .t-marker_index,:host:not(._active) .t-marker_custom~.t-marker_index{display:none}.t-marker_error{background:var(--tui-status-negative-pale);color:var(--tui-status-negative)}:host:hover .t-marker_error{background:var(--tui-status-negative-pale-hover);color:var(--tui-status-negative)}:host:not([data-state=error]) .t-marker_error,:host._active .t-marker_error{display:none}:host:not([data-state=pass]) .t-marker_pass,:host._active .t-marker_pass{display:none}:host:not([data-state=normal]) .t-marker_custom,:host._active .t-marker_custom{display:none}:host:hover .t-marker_custom{color:var(--tui-text-action-hover);background:var(--tui-background-neutral-1-hover)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiStep };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiStep, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'button[tuiStep], a[tuiStep]:not([routerLink]), a[tuiStep][routerLink][routerLinkActive]', imports: [NgIf, TuiIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[attr.data-state]': 'stepState',
'[class._vertical]': 'isVertical',
'[class._focus-visible]': 'focusVisible',
'[class._active]': 'isActive',
'[tabIndex]': 'tabIndex',
'(click)': 'activate()',
}, template: "<tui-icon\n *ngIf=\"icon\"\n class=\"t-marker t-marker_custom\"\n [icon]=\"icon\"\n/>\n<tui-icon\n class=\"t-marker t-marker_error\"\n [icon]=\"icons.error\"\n/>\n<tui-icon\n class=\"t-marker t-marker_pass\"\n [icon]=\"icons.check\"\n/>\n<div class=\"t-marker t-marker_index\"></div>\n<ng-content />\n", styles: [":host{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;position:relative;display:flex;align-items:center;flex-shrink:0;color:var(--tui-text-action);margin-inline-end:1.5rem;outline:none;cursor:pointer;counter-increment:steps;text-align:start}:host:disabled{pointer-events:none;color:var(--tui-text-secondary)}:host:hover{color:var(--tui-text-action-hover)}:host:not(:last-of-type)._vertical{margin-block-end:1.25rem}:host._active,:host._active:hover{color:var(--tui-text-primary);cursor:default}:host:focus-visible:before{content:\"\";position:absolute;left:2.75rem;right:0;top:50%;block-size:1.5rem;margin-block-start:-.75rem;background:var(--tui-service-selection-background)}.t-marker{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;display:flex;inline-size:2rem;block-size:2rem;border-radius:100%;margin-inline-end:.75rem;flex-shrink:0;align-items:center;align-self:flex-start;justify-content:center;background:var(--tui-background-neutral-1);color:var(--tui-text-action);border:.5rem solid transparent;box-sizing:border-box}:host:disabled .t-marker{background:var(--tui-background-neutral-1);color:var(--tui-text-secondary)}.t-marker_index:before{content:counter(steps)}:host:hover .t-marker_index{color:var(--tui-text-action-hover);background:var(--tui-background-neutral-1-hover)}:host._active .t-marker_index{color:var(--tui-text-primary-on-accent-1);background:var(--tui-background-accent-1)}:host:not([data-state=normal]):not(._active) .t-marker_index,:host:not(._active) .t-marker_custom~.t-marker_index{display:none}.t-marker_error{background:var(--tui-status-negative-pale);color:var(--tui-status-negative)}:host:hover .t-marker_error{background:var(--tui-status-negative-pale-hover);color:var(--tui-status-negative)}:host:not([data-state=error]) .t-marker_error,:host._active .t-marker_error{display:none}:host:not([data-state=pass]) .t-marker_pass,:host._active .t-marker_pass{display:none}:host:not([data-state=normal]) .t-marker_custom,:host._active .t-marker_custom{display:none}:host:hover .t-marker_custom{color:var(--tui-text-action-hover);background:var(--tui-background-neutral-1-hover)}\n"] }]
}], propDecorators: { stepState: [{
type: Input
}], icon: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RlcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9raXQvY29tcG9uZW50cy9zdGVwcGVyL3N0ZXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvc3RlcHBlci9zdGVwLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLElBQUksRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQ3JDLE9BQU8sRUFBQyx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUNoRixPQUFPLEVBQUMsa0JBQWtCLEVBQUMsTUFBTSw0QkFBNEIsQ0FBQztBQUM5RCxPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUNqRCxPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSx5QkFBeUIsQ0FBQztBQUN6RCxPQUFPLEVBQUMsT0FBTyxFQUFDLE1BQU0sZ0NBQWdDLENBQUM7QUFDdkQsT0FBTyxFQUFDLGdCQUFnQixFQUFDLE1BQU0sdUJBQXVCLENBQUM7QUFDdkQsT0FBTyxFQUFDLEtBQUssRUFBRSxNQUFNLEVBQUMsTUFBTSxNQUFNLENBQUM7QUFFbkMsT0FBTyxFQUFDLG1CQUFtQixFQUFDLE1BQU0scUJBQXFCLENBQUM7O0FBRXhELE1BaUJhLE9BQU87SUFqQnBCO1FBa0JxQixZQUFPLEdBQUcsTUFBTSxDQUFDLG1CQUFtQixDQUFDLENBQUM7UUFDdEMsT0FBRSxHQUFHLGdCQUFnQixFQUFFLENBQUM7UUFDdEIsTUFBQyxHQUFHLENBQ25CLE1BQU0sQ0FBQyxnQkFBZ0IsRUFBRSxFQUFDLFFBQVEsRUFBRSxJQUFJLEVBQUMsQ0FBQyxFQUFFLGNBQWMsQ0FBQyxZQUFZLEVBQUUsSUFBSSxLQUFLLENBQ3JGO2FBQ0ksSUFBSSxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUMsRUFBRSxrQkFBa0IsRUFBRSxDQUFDO2FBQzNDLFNBQVMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQztRQUU1QixpQkFBWSxHQUFHLEtBQUssQ0FBQztRQUVaLFVBQUssR0FBRyxNQUFNLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztRQUc3QyxjQUFTLEdBQWdDLFFBQVEsQ0FBQztRQUdsRCxTQUFJLEdBQUcsRUFBRSxDQUFDO0tBcUJwQjtJQW5CRyxJQUFjLFFBQVE7UUFDbEIsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDN0MsQ0FBQztJQUVELElBQWMsVUFBVTtRQUNwQixPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMsV0FBVyxLQUFLLFVBQVUsQ0FBQztJQUNuRCxDQUFDO0lBRUQsSUFBYyxRQUFRO1FBQ2xCLE9BQU8sSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUNsQyxDQUFDO0lBRUQsSUFBYyxLQUFLO1FBQ2YsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDekMsQ0FBQztJQUVTLFFBQVE7UUFDZCxJQUFJLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDdEMsQ0FBQzsrR0FyQ1EsT0FBTzttR0FBUCxPQUFPLG1hQzVCcEIsb1VBZUEsK3hFREFjLElBQUksNkZBQUUsT0FBTzs7U0FhZCxPQUFPOzRGQUFQLE9BQU87a0JBakJuQixTQUFTO2lDQUNNLElBQUksWUFFWix5RkFBeUYsV0FDcEYsQ0FBQyxJQUFJLEVBQUUsT0FBTyxDQUFDLG1CQUdQLHVCQUF1QixDQUFDLE1BQU0sUUFDekM7d0JBQ0YsbUJBQW1CLEVBQUUsV0FBVzt3QkFDaEMsbUJBQW1CLEVBQUUsWUFBWTt3QkFDakMsd0JBQXdCLEVBQUUsY0FBYzt3QkFDeEMsaUJBQWlCLEVBQUUsVUFBVTt3QkFDN0IsWUFBWSxFQUFFLFVBQVU7d0JBQ3hCLFNBQVMsRUFBRSxZQUFZO3FCQUMxQjs4QkFnQk0sU0FBUztzQkFEZixLQUFLO2dCQUlDLElBQUk7c0JBRFYsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7TmdJZn0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7Q2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgaW5qZWN0LCBJbnB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge3Rha2VVbnRpbERlc3Ryb3llZH0gZnJvbSAnQGFuZ3VsYXIvY29yZS9yeGpzLWludGVyb3AnO1xuaW1wb3J0IHtSb3V0ZXJMaW5rQWN0aXZlfSBmcm9tICdAYW5ndWxhci9yb3V0ZXInO1xuaW1wb3J0IHt0dWlJbmplY3RFbGVtZW50fSBmcm9tICdAdGFpZ2EtdWkvY2RrL3V0aWxzL2RvbSc7XG5pbXBvcnQge1R1aUljb259IGZyb20gJ0B0YWlnYS11aS9jb3JlL2NvbXBvbmVudHMvaWNvbic7XG5pbXBvcnQge1RVSV9DT01NT05fSUNPTlN9IGZyb20gJ0B0YWlnYS11aS9jb3JlL3Rva2Vucyc7XG5pbXBvcnQge0VNUFRZLCBmaWx0ZXJ9IGZyb20gJ3J4anMnO1xuXG5pbXBvcnQge1R1aVN0ZXBwZXJDb21wb25lbnR9IGZyb20gJy4vc3RlcHBlci5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOlxuICAgICAgICAnYnV0dG9uW3R1aVN0ZXBdLCBhW3R1aVN0ZXBdOm5vdChbcm91dGVyTGlua10pLCBhW3R1aVN0ZXBdW3JvdXRlckxpbmtdW3JvdXRlckxpbmtBY3RpdmVdJyxcbiAgICBpbXBvcnRzOiBbTmdJZiwgVHVpSWNvbl0sXG4gICAgdGVtcGxhdGVVcmw6ICcuL3N0ZXAudGVtcGxhdGUuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vc3RlcC5zdHlsZS5sZXNzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgaG9zdDoge1xuICAgICAgICAnW2F0dHIuZGF0YS1zdGF0ZV0nOiAnc3RlcFN0YXRlJyxcbiAgICAgICAgJ1tjbGFzcy5fdmVydGljYWxdJzogJ2lzVmVydGljYWwnLFxuICAgICAgICAnW2NsYXNzLl9mb2N1cy12aXNpYmxlXSc6ICdmb2N1c1Zpc2libGUnLFxuICAgICAgICAnW2NsYXNzLl9hY3RpdmVdJzogJ2lzQWN0aXZlJyxcbiAgICAgICAgJ1t0YWJJbmRleF0nOiAndGFiSW5kZXgnLFxuICAgICAgICAnKGNsaWNrKSc6ICdhY3RpdmF0ZSgpJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlTdGVwIHtcbiAgICBwcml2YXRlIHJlYWRvbmx5IHN0ZXBwZXIgPSBpbmplY3QoVHVpU3RlcHBlckNvbXBvbmVudCk7XG4gICAgcHJpdmF0ZSByZWFkb25seSBlbCA9IHR1aUluamVjdEVsZW1lbnQoKTtcbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgJCA9IChcbiAgICAgICAgaW5qZWN0KFJvdXRlckxpbmtBY3RpdmUsIHtvcHRpb25hbDogdHJ1ZX0pPy5pc0FjdGl2ZUNoYW5nZS5hc09ic2VydmFibGUoKSA/PyBFTVBUWVxuICAgIClcbiAgICAgICAgLnBpcGUoZmlsdGVyKEJvb2xlYW4pLCB0YWtlVW50aWxEZXN0cm95ZWQoKSlcbiAgICAgICAgLnN1YnNjcmliZSgoKSA9PiB0aGlzLmFjdGl2YXRlKCkpO1xuXG4gICAgcHJvdGVjdGVkIGZvY3VzVmlzaWJsZSA9IGZhbHNlO1xuXG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGljb25zID0gaW5qZWN0KFRVSV9DT01NT05fSUNPTlMpO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgc3RlcFN0YXRlOiAnZXJyb3InIHwgJ25vcm1hbCcgfCAncGFzcycgPSAnbm9ybWFsJztcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIGljb24gPSAnJztcblxuICAgIHByb3RlY3RlZCBnZXQgaXNBY3RpdmUoKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiB0aGlzLnN0ZXBwZXIuaXNBY3RpdmUodGhpcy5pbmRleCk7XG4gICAgfVxuXG4gICAgcHJvdGVjdGVkIGdldCBpc1ZlcnRpY2FsKCk6IGJvb2xlYW4ge1xuICAgICAgICByZXR1cm4gdGhpcy5zdGVwcGVyLm9yaWVudGF0aW9uID09PSAndmVydGljYWwnO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCBnZXQgdGFiSW5kZXgoKTogbnVtYmVyIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuaXNBY3RpdmUgPyAwIDogLTE7XG4gICAgfVxuXG4gICAgcHJvdGVjdGVkIGdldCBpbmRleCgpOiBudW1iZXIge1xuICAgICAgICByZXR1cm4gdGhpcy5zdGVwcGVyLmluZGV4T2YodGhpcy5lbCk7XG4gICAgfVxuXG4gICAgcHJvdGVjdGVkIGFjdGl2YXRlKCk6IHZvaWQge1xuICAgICAgICB0aGlzLnN0ZXBwZXIuYWN0aXZhdGUodGhpcy5pbmRleCk7XG4gICAgfVxufVxuIiwiPHR1aS1pY29uXG4gICAgKm5nSWY9XCJpY29uXCJcbiAgICBjbGFzcz1cInQtbWFya2VyIHQtbWFya2VyX2N1c3RvbVwiXG4gICAgW2ljb25dPVwiaWNvblwiXG4vPlxuPHR1aS1pY29uXG4gICAgY2xhc3M9XCJ0LW1hcmtlciB0LW1hcmtlcl9lcnJvclwiXG4gICAgW2ljb25dPVwiaWNvbnMuZXJyb3JcIlxuLz5cbjx0dWktaWNvblxuICAgIGNsYXNzPVwidC1tYXJrZXIgdC1tYXJrZXJfcGFzc1wiXG4gICAgW2ljb25dPVwiaWNvbnMuY2hlY2tcIlxuLz5cbjxkaXYgY2xhc3M9XCJ0LW1hcmtlciB0LW1hcmtlcl9pbmRleFwiPjwvZGl2PlxuPG5nLWNvbnRlbnQgLz5cbiJdfQ==