@taiga-ui/kit
Version:
Taiga UI Angular main components kit
85 lines • 11.6 kB
JavaScript
import { __decorate, __param } from "tslib";
import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, HostListener, Inject, Input, } from '@angular/core';
import { identity, tuiDefaultProp, TuiDestroyService, TuiFocusVisibleService, } from '@taiga-ui/cdk';
import { TuiRouterLinkActiveService } from '@taiga-ui/core';
import { Observable } from 'rxjs';
import { filter } from 'rxjs/operators';
import { TuiStepperComponent } from '../stepper.component';
let TuiStepComponent = class TuiStepComponent {
constructor(focusVisible$, routerLinkActive$, stepper, elementRef) {
this.stepper = stepper;
this.elementRef = elementRef;
this.state = "normal" /* Normal */;
this.icon = '';
this.focusVisible = false;
routerLinkActive$.pipe(filter(identity)).subscribe(() => {
this.activate();
});
focusVisible$.subscribe(visible => {
this.focusVisible = visible;
});
}
get isActive() {
return this.stepper.isActive(this.index);
}
get isVertical() {
return this.stepper.orientation === "vertical" /* Vertical */;
}
get tabIndex() {
return this.isActive ? 0 : -1;
}
get index() {
return this.stepper.indexOf(this.elementRef.nativeElement);
}
activate() {
this.stepper.activate(this.index);
}
};
TuiStepComponent.ctorParameters = () => [
{ type: TuiFocusVisibleService, decorators: [{ type: Inject, args: [TuiFocusVisibleService,] }] },
{ type: Observable, decorators: [{ type: Inject, args: [TuiRouterLinkActiveService,] }] },
{ type: TuiStepperComponent, decorators: [{ type: Inject, args: [TuiStepperComponent,] }] },
{ type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] }
];
__decorate([
Input(),
HostBinding('attr.data-state'),
tuiDefaultProp()
], TuiStepComponent.prototype, "state", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiStepComponent.prototype, "icon", void 0);
__decorate([
HostBinding('class._focus-visible')
], TuiStepComponent.prototype, "focusVisible", void 0);
__decorate([
HostBinding('class._active')
], TuiStepComponent.prototype, "isActive", null);
__decorate([
HostBinding('class._vertical')
], TuiStepComponent.prototype, "isVertical", null);
__decorate([
HostBinding('tabIndex')
], TuiStepComponent.prototype, "tabIndex", null);
__decorate([
HostListener('click')
], TuiStepComponent.prototype, "activate", null);
TuiStepComponent = __decorate([
Component({
selector: 'button[tuiStep], a[tuiStep]:not([routerLink]), a[tuiStep][routerLink][routerLinkActive]',
template: "<tui-svg *ngIf=\"icon\" class=\"marker marker_custom\" [src]=\"icon\"></tui-svg>\n<tui-svg class=\"marker marker_error\" src=\"tuiIconWarningLarge\"></tui-svg>\n<tui-svg class=\"marker marker_pass\" src=\"tuiIconCheckLarge\"></tui-svg>\n<div class=\"marker marker_index\"></div>\n<ng-content></ng-content>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [TuiDestroyService, TuiRouterLinkActiveService, TuiFocusVisibleService],
host: {
type: 'button',
},
styles: [":host{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:0 0;font-size:inherit;line-height:inherit;position:relative;display:flex;align-items:center;flex-shrink:0;color:var(--tui-link);margin-right:32px;outline:0;cursor:pointer;text-decoration:none;counter-increment:steps}:host:disabled{pointer-events:none;color:var(--tui-base-07)}:host:hover{color:var(--tui-link-hover)}:host:not(:last-of-type)._vertical{margin-bottom:20px}:host._active,:host._active:hover{color:var(--tui-text-01);cursor:default}:host._focus-visible:before{content:'';position:absolute;left:44px;right:0;top:50%;height:24px;margin-top:-12px;background:var(--tui-selection)}.marker{transition-property:background;transition-duration:.3s;transition-timing-function:ease-in-out;display:flex;width:32px;height:32px;border-radius:100%;margin-right:12px;flex-shrink:0;align-items:center;justify-content:center;background:var(--tui-secondary);color:var(--tui-link)}:host:disabled .marker{background:var(--tui-base-03);color:var(--tui-base-07)}.marker_index:before{content:counter(steps)}:host:hover .marker_index{color:var(--tui-link-hover);background:var(--tui-secondary-hover)}:host._active .marker_index{color:var(--tui-primary-text);background:var(--tui-primary)}:host:not(._active) .marker_custom~.marker_index,:host:not([data-state=normal]):not(._active) .marker_index{display:none}.marker_error{background:var(--tui-error-bg);color:var(--tui-error-fill)}:host:hover .marker_error{background:var(--tui-error-bg-hover);color:var(--tui-error-fill)}:host._active .marker_error,:host:not([data-state=error]) .marker_error{display:none}:host._active .marker_pass,:host:not([data-state=pass]) .marker_pass{display:none}:host._active .marker_custom,:host:not([data-state=normal]) .marker_custom{display:none}:host:hover .marker_custom{color:var(--tui-link-hover);background:var(--tui-secondary-hover)}"]
}),
__param(0, Inject(TuiFocusVisibleService)),
__param(1, Inject(TuiRouterLinkActiveService)),
__param(2, Inject(TuiStepperComponent)),
__param(3, Inject(ElementRef))
], TuiStepComponent);
export { TuiStepComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RlcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AdGFpZ2EtdWkva2l0L2NvbXBvbmVudHMvc3RlcHBlci8iLCJzb3VyY2VzIjpbInN0ZXAvc3RlcC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFVBQVUsRUFDVixXQUFXLEVBQ1gsWUFBWSxFQUNaLE1BQU0sRUFDTixLQUFLLEdBQ1IsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUNILFFBQVEsRUFDUixjQUFjLEVBQ2QsaUJBQWlCLEVBQ2pCLHNCQUFzQixHQUN6QixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQWlCLDBCQUEwQixFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFFMUUsT0FBTyxFQUFDLFVBQVUsRUFBQyxNQUFNLE1BQU0sQ0FBQztBQUNoQyxPQUFPLEVBQUMsTUFBTSxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDdEMsT0FBTyxFQUFDLG1CQUFtQixFQUFDLE1BQU0sc0JBQXNCLENBQUM7QUFhekQsSUFBYSxnQkFBZ0IsR0FBN0IsTUFBYSxnQkFBZ0I7SUFhekIsWUFDb0MsYUFBcUMsRUFDakMsaUJBQXNDLEVBQzVCLE9BQTRCLEVBQ3JDLFVBQW1DO1FBRDFCLFlBQU8sR0FBUCxPQUFPLENBQXFCO1FBQ3JDLGVBQVUsR0FBVixVQUFVLENBQXlCO1FBYjVFLFVBQUsseUJBQXVCO1FBSTVCLFNBQUksR0FBRyxFQUFFLENBQUM7UUFHVixpQkFBWSxHQUFHLEtBQUssQ0FBQztRQVFqQixpQkFBaUIsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRTtZQUNwRCxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7UUFDcEIsQ0FBQyxDQUFDLENBQUM7UUFFSCxhQUFhLENBQUMsU0FBUyxDQUFDLE9BQU8sQ0FBQyxFQUFFO1lBQzlCLElBQUksQ0FBQyxZQUFZLEdBQUcsT0FBTyxDQUFDO1FBQ2hDLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUdELElBQUksUUFBUTtRQUNSLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzdDLENBQUM7SUFHRCxJQUFJLFVBQVU7UUFDVixPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMsV0FBVyw4QkFBNEIsQ0FBQztJQUNoRSxDQUFDO0lBR0QsSUFBSSxRQUFRO1FBQ1IsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQ2xDLENBQUM7SUFFRCxJQUFJLEtBQUs7UUFDTCxPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLENBQUM7SUFDL0QsQ0FBQztJQUdELFFBQVE7UUFDSixJQUFJLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDdEMsQ0FBQztDQUNKLENBQUE7O1lBckNzRCxzQkFBc0IsdUJBQXBFLE1BQU0sU0FBQyxzQkFBc0I7WUFDeUIsVUFBVSx1QkFBaEUsTUFBTSxTQUFDLDBCQUEwQjtZQUNxQixtQkFBbUIsdUJBQXpFLE1BQU0sU0FBQyxtQkFBbUI7WUFDc0IsVUFBVSx1QkFBMUQsTUFBTSxTQUFDLFVBQVU7O0FBYnRCO0lBSEMsS0FBSyxFQUFFO0lBQ1AsV0FBVyxDQUFDLGlCQUFpQixDQUFDO0lBQzlCLGNBQWMsRUFBRTsrQ0FDVztBQUk1QjtJQUZDLEtBQUssRUFBRTtJQUNQLGNBQWMsRUFBRTs4Q0FDUDtBQUdWO0lBREMsV0FBVyxDQUFDLHNCQUFzQixDQUFDO3NEQUNmO0FBa0JyQjtJQURDLFdBQVcsQ0FBQyxlQUFlLENBQUM7Z0RBRzVCO0FBR0Q7SUFEQyxXQUFXLENBQUMsaUJBQWlCLENBQUM7a0RBRzlCO0FBR0Q7SUFEQyxXQUFXLENBQUMsVUFBVSxDQUFDO2dEQUd2QjtBQU9EO0lBREMsWUFBWSxDQUFDLE9BQU8sQ0FBQztnREFHckI7QUFsRFEsZ0JBQWdCO0lBWDVCLFNBQVMsQ0FBQztRQUNQLFFBQVEsRUFDSix5RkFBeUY7UUFDN0YsK1RBQW1DO1FBRW5DLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO1FBQy9DLFNBQVMsRUFBRSxDQUFDLGlCQUFpQixFQUFFLDBCQUEwQixFQUFFLHNCQUFzQixDQUFDO1FBQ2xGLElBQUksRUFBRTtZQUNGLElBQUksRUFBRSxRQUFRO1NBQ2pCOztLQUNKLENBQUM7SUFlTyxXQUFBLE1BQU0sQ0FBQyxzQkFBc0IsQ0FBQyxDQUFBO0lBQzlCLFdBQUEsTUFBTSxDQUFDLDBCQUEwQixDQUFDLENBQUE7SUFDbEMsV0FBQSxNQUFNLENBQUMsbUJBQW1CLENBQUMsQ0FBQTtJQUMzQixXQUFBLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQTtHQWpCZCxnQkFBZ0IsQ0FtRDVCO1NBbkRZLGdCQUFnQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ29tcG9uZW50LFxuICAgIEVsZW1lbnRSZWYsXG4gICAgSG9zdEJpbmRpbmcsXG4gICAgSG9zdExpc3RlbmVyLFxuICAgIEluamVjdCxcbiAgICBJbnB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICAgIGlkZW50aXR5LFxuICAgIHR1aURlZmF1bHRQcm9wLFxuICAgIFR1aURlc3Ryb3lTZXJ2aWNlLFxuICAgIFR1aUZvY3VzVmlzaWJsZVNlcnZpY2UsXG59IGZyb20gJ0B0YWlnYS11aS9jZGsnO1xuaW1wb3J0IHtUdWlPcmllbnRhdGlvbiwgVHVpUm91dGVyTGlua0FjdGl2ZVNlcnZpY2V9IGZyb20gJ0B0YWlnYS11aS9jb3JlJztcbmltcG9ydCB7VHVpU3RlcFN0YXRlfSBmcm9tICdAdGFpZ2EtdWkva2l0L2VudW1zJztcbmltcG9ydCB7T2JzZXJ2YWJsZX0gZnJvbSAncnhqcyc7XG5pbXBvcnQge2ZpbHRlcn0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHtUdWlTdGVwcGVyQ29tcG9uZW50fSBmcm9tICcuLi9zdGVwcGVyLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOlxuICAgICAgICAnYnV0dG9uW3R1aVN0ZXBdLCBhW3R1aVN0ZXBdOm5vdChbcm91dGVyTGlua10pLCBhW3R1aVN0ZXBdW3JvdXRlckxpbmtdW3JvdXRlckxpbmtBY3RpdmVdJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vc3RlcC50ZW1wbGF0ZS5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9zdGVwLnN0eWxlLmxlc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBwcm92aWRlcnM6IFtUdWlEZXN0cm95U2VydmljZSwgVHVpUm91dGVyTGlua0FjdGl2ZVNlcnZpY2UsIFR1aUZvY3VzVmlzaWJsZVNlcnZpY2VdLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgdHlwZTogJ2J1dHRvbicsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpU3RlcENvbXBvbmVudCB7XG4gICAgQElucHV0KClcbiAgICBASG9zdEJpbmRpbmcoJ2F0dHIuZGF0YS1zdGF0ZScpXG4gICAgQHR1aURlZmF1bHRQcm9wKClcbiAgICBzdGF0ZSA9IFR1aVN0ZXBTdGF0ZS5Ob3JtYWw7XG5cbiAgICBASW5wdXQoKVxuICAgIEB0dWlEZWZhdWx0UHJvcCgpXG4gICAgaWNvbiA9ICcnO1xuXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5fZm9jdXMtdmlzaWJsZScpXG4gICAgZm9jdXNWaXNpYmxlID0gZmFsc2U7XG5cbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgQEluamVjdChUdWlGb2N1c1Zpc2libGVTZXJ2aWNlKSBmb2N1c1Zpc2libGUkOiBUdWlGb2N1c1Zpc2libGVTZXJ2aWNlLFxuICAgICAgICBASW5qZWN0KFR1aVJvdXRlckxpbmtBY3RpdmVTZXJ2aWNlKSByb3V0ZXJMaW5rQWN0aXZlJDogT2JzZXJ2YWJsZTxib29sZWFuPixcbiAgICAgICAgQEluamVjdChUdWlTdGVwcGVyQ29tcG9uZW50KSBwcml2YXRlIHJlYWRvbmx5IHN0ZXBwZXI6IFR1aVN0ZXBwZXJDb21wb25lbnQsXG4gICAgICAgIEBJbmplY3QoRWxlbWVudFJlZikgcHJpdmF0ZSByZWFkb25seSBlbGVtZW50UmVmOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PixcbiAgICApIHtcbiAgICAgICAgcm91dGVyTGlua0FjdGl2ZSQucGlwZShmaWx0ZXIoaWRlbnRpdHkpKS5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgICAgICAgdGhpcy5hY3RpdmF0ZSgpO1xuICAgICAgICB9KTtcblxuICAgICAgICBmb2N1c1Zpc2libGUkLnN1YnNjcmliZSh2aXNpYmxlID0+IHtcbiAgICAgICAgICAgIHRoaXMuZm9jdXNWaXNpYmxlID0gdmlzaWJsZTtcbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5fYWN0aXZlJylcbiAgICBnZXQgaXNBY3RpdmUoKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiB0aGlzLnN0ZXBwZXIuaXNBY3RpdmUodGhpcy5pbmRleCk7XG4gICAgfVxuXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5fdmVydGljYWwnKVxuICAgIGdldCBpc1ZlcnRpY2FsKCk6IGJvb2xlYW4ge1xuICAgICAgICByZXR1cm4gdGhpcy5zdGVwcGVyLm9yaWVudGF0aW9uID09PSBUdWlPcmllbnRhdGlvbi5WZXJ0aWNhbDtcbiAgICB9XG5cbiAgICBASG9zdEJpbmRpbmcoJ3RhYkluZGV4JylcbiAgICBnZXQgdGFiSW5kZXgoKTogbnVtYmVyIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuaXNBY3RpdmUgPyAwIDogLTE7XG4gICAgfVxuXG4gICAgZ2V0IGluZGV4KCk6IG51bWJlciB7XG4gICAgICAgIHJldHVybiB0aGlzLnN0ZXBwZXIuaW5kZXhPZih0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCk7XG4gICAgfVxuXG4gICAgQEhvc3RMaXN0ZW5lcignY2xpY2snKVxuICAgIGFjdGl2YXRlKCkge1xuICAgICAgICB0aGlzLnN0ZXBwZXIuYWN0aXZhdGUodGhpcy5pbmRleCk7XG4gICAgfVxufVxuIl19