@taiga-ui/kit
Version:
Taiga UI Angular main components kit
88 lines • 11.1 kB
JavaScript
import { __decorate } from "tslib";
import { ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, forwardRef, HostBinding, HostListener, Input, Output, } from '@angular/core';
import { EMPTY_QUERY, getOriginalArrayFromQueryList, itemsQueryListObservable, moveFocus, tuiDefaultProp, tuiPure, } from '@taiga-ui/cdk';
import { delay } from 'rxjs/operators';
import { TuiStepComponent } from './step/step.component';
let TuiStepperComponent = class TuiStepperComponent {
constructor() {
this.orientation = "horizontal" /* Horizontal */;
this.activeItemIndex = 0;
this.activeItemIndexChange = new EventEmitter();
this.steps = EMPTY_QUERY;
}
get changes$() {
// 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));
}
indexOf(step) {
return getOriginalArrayFromQueryList(this.steps).findIndex(({ nativeElement }) => nativeElement === step);
}
isActive(index) {
return index === this.activeItemIndex;
}
activate(index) {
if (this.activeItemIndex === index) {
return;
}
this.activeItemIndex = index;
this.activeItemIndexChange.emit(index);
}
onHorizontal(event, step) {
if (this.orientation !== "horizontal" /* Horizontal */ || !event.target) {
return;
}
event.preventDefault();
this.moveFocus(event.target, step);
}
onVertical(event, step) {
if (this.orientation !== "vertical" /* Vertical */ || !event.target) {
return;
}
event.preventDefault();
this.moveFocus(event.target, step);
}
moveFocus(current, step) {
const steps = getOriginalArrayFromQueryList(this.steps).map(({ nativeElement }) => 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(() => 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);
export { TuiStepperComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RlcHBlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AdGFpZ2EtdWkva2l0L2NvbXBvbmVudHMvc3RlcHBlci8iLCJzb3VyY2VzIjpbInN0ZXBwZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxlQUFlLEVBQ2YsVUFBVSxFQUNWLFlBQVksRUFDWixVQUFVLEVBQ1YsV0FBVyxFQUNYLFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxHQUVULE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFDSCxXQUFXLEVBQ1gsNkJBQTZCLEVBQzdCLHdCQUF3QixFQUN4QixTQUFTLEVBQ1QsY0FBYyxFQUNkLE9BQU8sR0FDVixNQUFNLGVBQWUsQ0FBQztBQUd2QixPQUFPLEVBQUMsS0FBSyxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDckMsT0FBTyxFQUFDLGdCQUFnQixFQUFDLE1BQU0sdUJBQXVCLENBQUM7QUFXdkQsSUFBYSxtQkFBbUIsR0FBaEMsTUFBYSxtQkFBbUI7SUFBaEM7UUFJSSxnQkFBVyxpQ0FBNkM7UUFJeEQsb0JBQWUsR0FBRyxDQUFDLENBQUM7UUFHWCwwQkFBcUIsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBRzNDLFVBQUssR0FBdUMsV0FBVyxDQUFDO0lBeUQ3RSxDQUFDO0lBdERHLElBQUksUUFBUTtRQUNSLHlFQUF5RTtRQUN6RSwyQ0FBMkM7UUFDM0MsT0FBTyx3QkFBd0IsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQy9ELENBQUM7SUFFRCxPQUFPLENBQUMsSUFBaUI7UUFDckIsT0FBTyw2QkFBNkIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsU0FBUyxDQUN0RCxDQUFDLEVBQUMsYUFBYSxFQUFDLEVBQUUsRUFBRSxDQUFDLGFBQWEsS0FBSyxJQUFJLENBQzlDLENBQUM7SUFDTixDQUFDO0lBRUQsUUFBUSxDQUFDLEtBQWE7UUFDbEIsT0FBTyxLQUFLLEtBQUssSUFBSSxDQUFDLGVBQWUsQ0FBQztJQUMxQyxDQUFDO0lBRUQsUUFBUSxDQUFDLEtBQWE7UUFDbEIsSUFBSSxJQUFJLENBQUMsZUFBZSxLQUFLLEtBQUssRUFBRTtZQUNoQyxPQUFPO1NBQ1Y7UUFFRCxJQUFJLENBQUMsZUFBZSxHQUFHLEtBQUssQ0FBQztRQUM3QixJQUFJLENBQUMscUJBQXFCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzNDLENBQUM7SUFJRCxZQUFZLENBQUMsS0FBWSxFQUFFLElBQVk7UUFDbkMsSUFBSSxJQUFJLENBQUMsV0FBVyxrQ0FBOEIsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEVBQUU7WUFDakUsT0FBTztTQUNWO1FBRUQsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsQ0FBQztJQUN2QyxDQUFDO0lBSUQsVUFBVSxDQUFDLEtBQVksRUFBRSxJQUFZO1FBQ2pDLElBQUksSUFBSSxDQUFDLFdBQVcsOEJBQTRCLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxFQUFFO1lBQy9ELE9BQU87U0FDVjtRQUVELEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN2QixJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDdkMsQ0FBQztJQUVPLFNBQVMsQ0FBQyxPQUFvQixFQUFFLElBQVk7UUFDaEQsTUFBTSxLQUFLLEdBQUcsNkJBQTZCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLEdBQUcsQ0FDdkQsQ0FBQyxFQUFDLGFBQWEsRUFBQyxFQUFFLEVBQUUsQ0FBQyxhQUFhLENBQ3JDLENBQUM7UUFFRixTQUFTLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxPQUFzQixDQUFDLEVBQUUsS0FBSyxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQ2xFLENBQUM7Q0FDSixDQUFBO0FBbkVHO0lBSEMsS0FBSyxFQUFFO0lBQ1AsV0FBVyxDQUFDLHVCQUF1QixDQUFDO0lBQ3BDLGNBQWMsRUFBRTt3REFDdUM7QUFJeEQ7SUFGQyxLQUFLLEVBQUU7SUFDUCxjQUFjLEVBQUU7NERBQ0c7QUFHcEI7SUFEQyxNQUFNLEVBQUU7a0VBQ21EO0FBRzVEO0lBREMsZUFBZSxDQUFDLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxnQkFBZ0IsQ0FBQyxFQUFFLEVBQUMsSUFBSSxFQUFFLFVBQVUsRUFBQyxDQUFDO2tEQUNDO0FBR3pFO0lBREMsT0FBTzttREFLUDtBQXVCRDtJQUZDLFlBQVksQ0FBQyxvQkFBb0IsRUFBRSxDQUFDLFFBQVEsRUFBRSxHQUFHLENBQUMsQ0FBQztJQUNuRCxZQUFZLENBQUMsbUJBQW1CLEVBQUUsQ0FBQyxRQUFRLEVBQUUsSUFBSSxDQUFDLENBQUM7dURBUW5EO0FBSUQ7SUFGQyxZQUFZLENBQUMsbUJBQW1CLEVBQUUsQ0FBQyxRQUFRLEVBQUUsR0FBRyxDQUFDLENBQUM7SUFDbEQsWUFBWSxDQUFDLGlCQUFpQixFQUFFLENBQUMsUUFBUSxFQUFFLElBQUksQ0FBQyxDQUFDO3FEQVFqRDtBQTlEUSxtQkFBbUI7SUFUL0IsU0FBUyxDQUFDO1FBQ1AsUUFBUSxFQUFFLDhCQUE4QjtRQUN4QyxpR0FBc0M7UUFFdEMsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07UUFDL0MsSUFBSSxFQUFFO1lBQ0YsS0FBSyxFQUFFLG9CQUFvQjtTQUM5Qjs7S0FDSixDQUFDO0dBQ1csbUJBQW1CLENBdUUvQjtTQXZFWSxtQkFBbUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENvbXBvbmVudCxcbiAgICBDb250ZW50Q2hpbGRyZW4sXG4gICAgRWxlbWVudFJlZixcbiAgICBFdmVudEVtaXR0ZXIsXG4gICAgZm9yd2FyZFJlZixcbiAgICBIb3N0QmluZGluZyxcbiAgICBIb3N0TGlzdGVuZXIsXG4gICAgSW5wdXQsXG4gICAgT3V0cHV0LFxuICAgIFF1ZXJ5TGlzdCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICAgIEVNUFRZX1FVRVJZLFxuICAgIGdldE9yaWdpbmFsQXJyYXlGcm9tUXVlcnlMaXN0LFxuICAgIGl0ZW1zUXVlcnlMaXN0T2JzZXJ2YWJsZSxcbiAgICBtb3ZlRm9jdXMsXG4gICAgdHVpRGVmYXVsdFByb3AsXG4gICAgdHVpUHVyZSxcbn0gZnJvbSAnQHRhaWdhLXVpL2Nkayc7XG5pbXBvcnQge1R1aU9yaWVudGF0aW9ufSBmcm9tICdAdGFpZ2EtdWkvY29yZSc7XG5pbXBvcnQge09ic2VydmFibGV9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHtkZWxheX0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHtUdWlTdGVwQ29tcG9uZW50fSBmcm9tICcuL3N0ZXAvc3RlcC5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3R1aS1zdGVwcGVyLCBuYXZbdHVpU3RlcHBlcl0nLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9zdGVwcGVyLnRlbXBsYXRlLmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3N0ZXBwZXIuc3R5bGUubGVzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgY2xhc3M6ICd0dWktemVyby1zY3JvbGxiYXInLFxuICAgIH0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aVN0ZXBwZXJDb21wb25lbnQge1xuICAgIEBJbnB1dCgpXG4gICAgQEhvc3RCaW5kaW5nKCdhdHRyLmRhdGEtb3JpZW50YXRpb24nKVxuICAgIEB0dWlEZWZhdWx0UHJvcCgpXG4gICAgb3JpZW50YXRpb246IFR1aU9yaWVudGF0aW9uID0gVHVpT3JpZW50YXRpb24uSG9yaXpvbnRhbDtcblxuICAgIEBJbnB1dCgpXG4gICAgQHR1aURlZmF1bHRQcm9wKClcbiAgICBhY3RpdmVJdGVtSW5kZXggPSAwO1xuXG4gICAgQE91dHB1dCgpXG4gICAgcmVhZG9ubHkgYWN0aXZlSXRlbUluZGV4Q2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXI+KCk7XG5cbiAgICBAQ29udGVudENoaWxkcmVuKGZvcndhcmRSZWYoKCkgPT4gVHVpU3RlcENvbXBvbmVudCksIHtyZWFkOiBFbGVtZW50UmVmfSlcbiAgICBwcml2YXRlIHJlYWRvbmx5IHN0ZXBzOiBRdWVyeUxpc3Q8RWxlbWVudFJlZjxIVE1MRWxlbWVudD4+ID0gRU1QVFlfUVVFUlk7XG5cbiAgICBAdHVpUHVyZVxuICAgIGdldCBjaGFuZ2VzJCgpOiBPYnNlcnZhYmxlPHVua25vd24+IHtcbiAgICAgICAgLy8gRGVsYXkgaXMgcmVxdWlyZWQgdG8gdHJpZ2dlciBjaGFuZ2UgZGV0ZWN0aW9uIGFmdGVyIHN0ZXBzIGFyZSByZW5kZXJlZFxuICAgICAgICAvLyBzbyB0aGV5IGNhbiB1cGRhdGUgdGhlaXIgXCJhY3RpdmVcIiBzdGF0dXNcbiAgICAgICAgcmV0dXJuIGl0ZW1zUXVlcnlMaXN0T2JzZXJ2YWJsZSh0aGlzLnN0ZXBzKS5waXBlKGRlbGF5KDApKTtcbiAgICB9XG5cbiAgICBpbmRleE9mKHN0ZXA6IEhUTUxFbGVtZW50KTogbnVtYmVyIHtcbiAgICAgICAgcmV0dXJuIGdldE9yaWdpbmFsQXJyYXlGcm9tUXVlcnlMaXN0KHRoaXMuc3RlcHMpLmZpbmRJbmRleChcbiAgICAgICAgICAgICh7bmF0aXZlRWxlbWVudH0pID0+IG5hdGl2ZUVsZW1lbnQgPT09IHN0ZXAsXG4gICAgICAgICk7XG4gICAgfVxuXG4gICAgaXNBY3RpdmUoaW5kZXg6IG51bWJlcik6IGJvb2xlYW4ge1xuICAgICAgICByZXR1cm4gaW5kZXggPT09IHRoaXMuYWN0aXZlSXRlbUluZGV4O1xuICAgIH1cblxuICAgIGFjdGl2YXRlKGluZGV4OiBudW1iZXIpIHtcbiAgICAgICAgaWYgKHRoaXMuYWN0aXZlSXRlbUluZGV4ID09PSBpbmRleCkge1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgdGhpcy5hY3RpdmVJdGVtSW5kZXggPSBpbmRleDtcbiAgICAgICAgdGhpcy5hY3RpdmVJdGVtSW5kZXhDaGFuZ2UuZW1pdChpbmRleCk7XG4gICAgfVxuXG4gICAgQEhvc3RMaXN0ZW5lcigna2V5ZG93bi5hcnJvd1JpZ2h0JywgWyckZXZlbnQnLCAnMSddKVxuICAgIEBIb3N0TGlzdGVuZXIoJ2tleWRvd24uYXJyb3dMZWZ0JywgWyckZXZlbnQnLCAnLTEnXSlcbiAgICBvbkhvcml6b250YWwoZXZlbnQ6IEV2ZW50LCBzdGVwOiBudW1iZXIpIHtcbiAgICAgICAgaWYgKHRoaXMub3JpZW50YXRpb24gIT09IFR1aU9yaWVudGF0aW9uLkhvcml6b250YWwgfHwgIWV2ZW50LnRhcmdldCkge1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgdGhpcy5tb3ZlRm9jdXMoZXZlbnQudGFyZ2V0LCBzdGVwKTtcbiAgICB9XG5cbiAgICBASG9zdExpc3RlbmVyKCdrZXlkb3duLmFycm93RG93bicsIFsnJGV2ZW50JywgJzEnXSlcbiAgICBASG9zdExpc3RlbmVyKCdrZXlkb3duLmFycm93VXAnLCBbJyRldmVudCcsICctMSddKVxuICAgIG9uVmVydGljYWwoZXZlbnQ6IEV2ZW50LCBzdGVwOiBudW1iZXIpIHtcbiAgICAgICAgaWYgKHRoaXMub3JpZW50YXRpb24gIT09IFR1aU9yaWVudGF0aW9uLlZlcnRpY2FsIHx8ICFldmVudC50YXJnZXQpIHtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgIHRoaXMubW92ZUZvY3VzKGV2ZW50LnRhcmdldCwgc3RlcCk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBtb3ZlRm9jdXMoY3VycmVudDogRXZlbnRUYXJnZXQsIHN0ZXA6IG51bWJlcikge1xuICAgICAgICBjb25zdCBzdGVwcyA9IGdldE9yaWdpbmFsQXJyYXlGcm9tUXVlcnlMaXN0KHRoaXMuc3RlcHMpLm1hcChcbiAgICAgICAgICAgICh7bmF0aXZlRWxlbWVudH0pID0+IG5hdGl2ZUVsZW1lbnQsXG4gICAgICAgICk7XG5cbiAgICAgICAgbW92ZUZvY3VzKHN0ZXBzLmluZGV4T2YoY3VycmVudCBhcyBIVE1MRWxlbWVudCksIHN0ZXBzLCBzdGVwKTtcbiAgICB9XG59XG4iXX0=