@taiga-ui/kit
Version:
Taiga UI Angular main components kit
103 lines • 12.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';
var TuiStepComponent = /** @class */ (function () {
function TuiStepComponent(focusVisible$, routerLinkActive$, stepper, elementRef) {
var _this = this;
this.stepper = stepper;
this.elementRef = elementRef;
this.state = "normal" /* Normal */;
this.icon = '';
this.focusVisible = false;
routerLinkActive$.pipe(filter(identity)).subscribe(function () {
_this.activate();
});
focusVisible$.subscribe(function (visible) {
_this.focusVisible = visible;
});
}
Object.defineProperty(TuiStepComponent.prototype, "isActive", {
get: function () {
return this.stepper.isActive(this.index);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiStepComponent.prototype, "isVertical", {
get: function () {
return this.stepper.orientation === "vertical" /* Vertical */;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiStepComponent.prototype, "tabIndex", {
get: function () {
return this.isActive ? 0 : -1;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiStepComponent.prototype, "index", {
get: function () {
return this.stepper.indexOf(this.elementRef.nativeElement);
},
enumerable: true,
configurable: true
});
TuiStepComponent.prototype.activate = function () {
this.stepper.activate(this.index);
};
TuiStepComponent.ctorParameters = function () { return [
{ 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);
return TuiStepComponent;
}());
export { TuiStepComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RlcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AdGFpZ2EtdWkva2l0L2NvbXBvbmVudHMvc3RlcHBlci8iLCJzb3VyY2VzIjpbInN0ZXAvc3RlcC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFVBQVUsRUFDVixXQUFXLEVBQ1gsWUFBWSxFQUNaLE1BQU0sRUFDTixLQUFLLEdBQ1IsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUNILFFBQVEsRUFDUixjQUFjLEVBQ2QsaUJBQWlCLEVBQ2pCLHNCQUFzQixHQUN6QixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQWlCLDBCQUEwQixFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFFMUUsT0FBTyxFQUFDLFVBQVUsRUFBQyxNQUFNLE1BQU0sQ0FBQztBQUNoQyxPQUFPLEVBQUMsTUFBTSxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDdEMsT0FBTyxFQUFDLG1CQUFtQixFQUFDLE1BQU0sc0JBQXNCLENBQUM7QUFhekQ7SUFhSSwwQkFDb0MsYUFBcUMsRUFDakMsaUJBQXNDLEVBQzVCLE9BQTRCLEVBQ3JDLFVBQW1DO1FBSjVFLGlCQWFDO1FBVmlELFlBQU8sR0FBUCxPQUFPLENBQXFCO1FBQ3JDLGVBQVUsR0FBVixVQUFVLENBQXlCO1FBYjVFLFVBQUsseUJBQXVCO1FBSTVCLFNBQUksR0FBRyxFQUFFLENBQUM7UUFHVixpQkFBWSxHQUFHLEtBQUssQ0FBQztRQVFqQixpQkFBaUIsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDO1lBQy9DLEtBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUNwQixDQUFDLENBQUMsQ0FBQztRQUVILGFBQWEsQ0FBQyxTQUFTLENBQUMsVUFBQSxPQUFPO1lBQzNCLEtBQUksQ0FBQyxZQUFZLEdBQUcsT0FBTyxDQUFDO1FBQ2hDLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUdELHNCQUFJLHNDQUFRO2FBQVo7WUFDSSxPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUM3QyxDQUFDOzs7T0FBQTtJQUdELHNCQUFJLHdDQUFVO2FBQWQ7WUFDSSxPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMsV0FBVyw4QkFBNEIsQ0FBQztRQUNoRSxDQUFDOzs7T0FBQTtJQUdELHNCQUFJLHNDQUFRO2FBQVo7WUFDSSxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDbEMsQ0FBQzs7O09BQUE7SUFFRCxzQkFBSSxtQ0FBSzthQUFUO1lBQ0ksT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBQy9ELENBQUM7OztPQUFBO0lBR0QsbUNBQVEsR0FBUjtRQUNJLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN0QyxDQUFDOztnQkFwQ2tELHNCQUFzQix1QkFBcEUsTUFBTSxTQUFDLHNCQUFzQjtnQkFDeUIsVUFBVSx1QkFBaEUsTUFBTSxTQUFDLDBCQUEwQjtnQkFDcUIsbUJBQW1CLHVCQUF6RSxNQUFNLFNBQUMsbUJBQW1CO2dCQUNzQixVQUFVLHVCQUExRCxNQUFNLFNBQUMsVUFBVTs7SUFidEI7UUFIQyxLQUFLLEVBQUU7UUFDUCxXQUFXLENBQUMsaUJBQWlCLENBQUM7UUFDOUIsY0FBYyxFQUFFO21EQUNXO0lBSTVCO1FBRkMsS0FBSyxFQUFFO1FBQ1AsY0FBYyxFQUFFO2tEQUNQO0lBR1Y7UUFEQyxXQUFXLENBQUMsc0JBQXNCLENBQUM7MERBQ2Y7SUFrQnJCO1FBREMsV0FBVyxDQUFDLGVBQWUsQ0FBQztvREFHNUI7SUFHRDtRQURDLFdBQVcsQ0FBQyxpQkFBaUIsQ0FBQztzREFHOUI7SUFHRDtRQURDLFdBQVcsQ0FBQyxVQUFVLENBQUM7b0RBR3ZCO0lBT0Q7UUFEQyxZQUFZLENBQUMsT0FBTyxDQUFDO29EQUdyQjtJQWxEUSxnQkFBZ0I7UUFYNUIsU0FBUyxDQUFDO1lBQ1AsUUFBUSxFQUNKLHlGQUF5RjtZQUM3RiwrVEFBbUM7WUFFbkMsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07WUFDL0MsU0FBUyxFQUFFLENBQUMsaUJBQWlCLEVBQUUsMEJBQTBCLEVBQUUsc0JBQXNCLENBQUM7WUFDbEYsSUFBSSxFQUFFO2dCQUNGLElBQUksRUFBRSxRQUFRO2FBQ2pCOztTQUNKLENBQUM7UUFlTyxXQUFBLE1BQU0sQ0FBQyxzQkFBc0IsQ0FBQyxDQUFBO1FBQzlCLFdBQUEsTUFBTSxDQUFDLDBCQUEwQixDQUFDLENBQUE7UUFDbEMsV0FBQSxNQUFNLENBQUMsbUJBQW1CLENBQUMsQ0FBQTtRQUMzQixXQUFBLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQTtPQWpCZCxnQkFBZ0IsQ0FtRDVCO0lBQUQsdUJBQUM7Q0FBQSxBQW5ERCxJQW1EQztTQW5EWSxnQkFBZ0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENvbXBvbmVudCxcbiAgICBFbGVtZW50UmVmLFxuICAgIEhvc3RCaW5kaW5nLFxuICAgIEhvc3RMaXN0ZW5lcixcbiAgICBJbmplY3QsXG4gICAgSW5wdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgICBpZGVudGl0eSxcbiAgICB0dWlEZWZhdWx0UHJvcCxcbiAgICBUdWlEZXN0cm95U2VydmljZSxcbiAgICBUdWlGb2N1c1Zpc2libGVTZXJ2aWNlLFxufSBmcm9tICdAdGFpZ2EtdWkvY2RrJztcbmltcG9ydCB7VHVpT3JpZW50YXRpb24sIFR1aVJvdXRlckxpbmtBY3RpdmVTZXJ2aWNlfSBmcm9tICdAdGFpZ2EtdWkvY29yZSc7XG5pbXBvcnQge1R1aVN0ZXBTdGF0ZX0gZnJvbSAnQHRhaWdhLXVpL2tpdC9lbnVtcyc7XG5pbXBvcnQge09ic2VydmFibGV9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHtmaWx0ZXJ9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7VHVpU3RlcHBlckNvbXBvbmVudH0gZnJvbSAnLi4vc3RlcHBlci5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjpcbiAgICAgICAgJ2J1dHRvblt0dWlTdGVwXSwgYVt0dWlTdGVwXTpub3QoW3JvdXRlckxpbmtdKSwgYVt0dWlTdGVwXVtyb3V0ZXJMaW5rXVtyb3V0ZXJMaW5rQWN0aXZlXScsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3N0ZXAudGVtcGxhdGUuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vc3RlcC5zdHlsZS5sZXNzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgcHJvdmlkZXJzOiBbVHVpRGVzdHJveVNlcnZpY2UsIFR1aVJvdXRlckxpbmtBY3RpdmVTZXJ2aWNlLCBUdWlGb2N1c1Zpc2libGVTZXJ2aWNlXSxcbiAgICBob3N0OiB7XG4gICAgICAgIHR5cGU6ICdidXR0b24nLFxuICAgIH0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aVN0ZXBDb21wb25lbnQge1xuICAgIEBJbnB1dCgpXG4gICAgQEhvc3RCaW5kaW5nKCdhdHRyLmRhdGEtc3RhdGUnKVxuICAgIEB0dWlEZWZhdWx0UHJvcCgpXG4gICAgc3RhdGUgPSBUdWlTdGVwU3RhdGUuTm9ybWFsO1xuXG4gICAgQElucHV0KClcbiAgICBAdHVpRGVmYXVsdFByb3AoKVxuICAgIGljb24gPSAnJztcblxuICAgIEBIb3N0QmluZGluZygnY2xhc3MuX2ZvY3VzLXZpc2libGUnKVxuICAgIGZvY3VzVmlzaWJsZSA9IGZhbHNlO1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIEBJbmplY3QoVHVpRm9jdXNWaXNpYmxlU2VydmljZSkgZm9jdXNWaXNpYmxlJDogVHVpRm9jdXNWaXNpYmxlU2VydmljZSxcbiAgICAgICAgQEluamVjdChUdWlSb3V0ZXJMaW5rQWN0aXZlU2VydmljZSkgcm91dGVyTGlua0FjdGl2ZSQ6IE9ic2VydmFibGU8Ym9vbGVhbj4sXG4gICAgICAgIEBJbmplY3QoVHVpU3RlcHBlckNvbXBvbmVudCkgcHJpdmF0ZSByZWFkb25seSBzdGVwcGVyOiBUdWlTdGVwcGVyQ29tcG9uZW50LFxuICAgICAgICBASW5qZWN0KEVsZW1lbnRSZWYpIHByaXZhdGUgcmVhZG9ubHkgZWxlbWVudFJlZjogRWxlbWVudFJlZjxIVE1MRWxlbWVudD4sXG4gICAgKSB7XG4gICAgICAgIHJvdXRlckxpbmtBY3RpdmUkLnBpcGUoZmlsdGVyKGlkZW50aXR5KSkuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgICAgICAgIHRoaXMuYWN0aXZhdGUoKTtcbiAgICAgICAgfSk7XG5cbiAgICAgICAgZm9jdXNWaXNpYmxlJC5zdWJzY3JpYmUodmlzaWJsZSA9PiB7XG4gICAgICAgICAgICB0aGlzLmZvY3VzVmlzaWJsZSA9IHZpc2libGU7XG4gICAgICAgIH0pO1xuICAgIH1cblxuICAgIEBIb3N0QmluZGluZygnY2xhc3MuX2FjdGl2ZScpXG4gICAgZ2V0IGlzQWN0aXZlKCk6IGJvb2xlYW4ge1xuICAgICAgICByZXR1cm4gdGhpcy5zdGVwcGVyLmlzQWN0aXZlKHRoaXMuaW5kZXgpO1xuICAgIH1cblxuICAgIEBIb3N0QmluZGluZygnY2xhc3MuX3ZlcnRpY2FsJylcbiAgICBnZXQgaXNWZXJ0aWNhbCgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuc3RlcHBlci5vcmllbnRhdGlvbiA9PT0gVHVpT3JpZW50YXRpb24uVmVydGljYWw7XG4gICAgfVxuXG4gICAgQEhvc3RCaW5kaW5nKCd0YWJJbmRleCcpXG4gICAgZ2V0IHRhYkluZGV4KCk6IG51bWJlciB7XG4gICAgICAgIHJldHVybiB0aGlzLmlzQWN0aXZlID8gMCA6IC0xO1xuICAgIH1cblxuICAgIGdldCBpbmRleCgpOiBudW1iZXIge1xuICAgICAgICByZXR1cm4gdGhpcy5zdGVwcGVyLmluZGV4T2YodGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQpO1xuICAgIH1cblxuICAgIEBIb3N0TGlzdGVuZXIoJ2NsaWNrJylcbiAgICBhY3RpdmF0ZSgpIHtcbiAgICAgICAgdGhpcy5zdGVwcGVyLmFjdGl2YXRlKHRoaXMuaW5kZXgpO1xuICAgIH1cbn1cbiJdfQ==