@taiga-ui/kit
Version:
Taiga UI Angular main components kit
216 lines (210 loc) • 10.7 kB
JavaScript
import { __decorate, __param } from 'tslib';
import { EventEmitter, Input, HostBinding, Output, ContentChildren, forwardRef, ElementRef, HostListener, Component, ChangeDetectionStrategy, Inject, NgModule } from '@angular/core';
import { EMPTY_QUERY, itemsQueryListObservable, getOriginalArrayFromQueryList, moveFocus, tuiDefaultProp, tuiPure, identity, TuiFocusVisibleService, TuiDestroyService } from '@taiga-ui/cdk';
import { TuiRouterLinkActiveService, TuiSvgModule } from '@taiga-ui/core';
import { Observable } from 'rxjs';
import { delay, filter } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
var TuiStepperComponent = /** @class */ (function () {
function TuiStepperComponent() {
this.orientation = "horizontal" /* Horizontal */;
this.activeItemIndex = 0;
this.activeItemIndexChange = new EventEmitter();
this.steps = EMPTY_QUERY;
}
Object.defineProperty(TuiStepperComponent.prototype, "changes$", {
get: function () {
// Delay is required to trigger change detection after steps are rendered
// so they can update their "active" status
return itemsQueryListObservable(this.steps).pipe(delay(0));
},
enumerable: true,
configurable: true
});
TuiStepperComponent.prototype.indexOf = function (step) {
return getOriginalArrayFromQueryList(this.steps).findIndex(function (_a) {
var nativeElement = _a.nativeElement;
return nativeElement === step;
});
};
TuiStepperComponent.prototype.isActive = function (index) {
return index === this.activeItemIndex;
};
TuiStepperComponent.prototype.activate = function (index) {
if (this.activeItemIndex === index) {
return;
}
this.activeItemIndex = index;
this.activeItemIndexChange.emit(index);
};
TuiStepperComponent.prototype.onHorizontal = function (event, step) {
if (this.orientation !== "horizontal" /* Horizontal */ || !event.target) {
return;
}
event.preventDefault();
this.moveFocus(event.target, step);
};
TuiStepperComponent.prototype.onVertical = function (event, step) {
if (this.orientation !== "vertical" /* Vertical */ || !event.target) {
return;
}
event.preventDefault();
this.moveFocus(event.target, step);
};
TuiStepperComponent.prototype.moveFocus = function (current, step) {
var steps = getOriginalArrayFromQueryList(this.steps).map(function (_a) {
var nativeElement = _a.nativeElement;
return nativeElement;
});
moveFocus(steps.indexOf(current), steps, step);
};
__decorate([
Input(),
HostBinding('attr.data-orientation'),
tuiDefaultProp()
], TuiStepperComponent.prototype, "orientation", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiStepperComponent.prototype, "activeItemIndex", void 0);
__decorate([
Output()
], TuiStepperComponent.prototype, "activeItemIndexChange", void 0);
__decorate([
ContentChildren(forwardRef(function () { return TuiStepComponent; }), { read: ElementRef })
], TuiStepperComponent.prototype, "steps", void 0);
__decorate([
tuiPure
], TuiStepperComponent.prototype, "changes$", null);
__decorate([
HostListener('keydown.arrowRight', ['$event', '1']),
HostListener('keydown.arrowLeft', ['$event', '-1'])
], TuiStepperComponent.prototype, "onHorizontal", null);
__decorate([
HostListener('keydown.arrowDown', ['$event', '1']),
HostListener('keydown.arrowUp', ['$event', '-1'])
], TuiStepperComponent.prototype, "onVertical", null);
TuiStepperComponent = __decorate([
Component({
selector: 'tui-stepper, nav[tuiStepper]',
template: "<ng-container *ngIf=\"changes$ | async\"></ng-container>\n<ng-content></ng-content>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
class: 'tui-zero-scrollbar',
},
styles: [":host{display:flex;overflow:auto;counter-reset:steps}:host[data-orientation=vertical]{flex-direction:column}"]
})
], TuiStepperComponent);
return TuiStepperComponent;
}());
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;
}());
var TuiStepperModule = /** @class */ (function () {
function TuiStepperModule() {
}
TuiStepperModule = __decorate([
NgModule({
imports: [CommonModule, TuiSvgModule],
declarations: [TuiStepperComponent, TuiStepComponent],
exports: [TuiStepperComponent, TuiStepComponent],
})
], TuiStepperModule);
return TuiStepperModule;
}());
/**
* Generated bundle index. Do not edit.
*/
export { TuiStepComponent, TuiStepperComponent, TuiStepperModule };
//# sourceMappingURL=taiga-ui-kit-components-stepper.js.map