@taiga-ui/kit
Version:
Taiga UI Angular main components kit
99 lines • 11.9 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';
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;
}());
export { TuiStepperComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RlcHBlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AdGFpZ2EtdWkva2l0L2NvbXBvbmVudHMvc3RlcHBlci8iLCJzb3VyY2VzIjpbInN0ZXBwZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxlQUFlLEVBQ2YsVUFBVSxFQUNWLFlBQVksRUFDWixVQUFVLEVBQ1YsV0FBVyxFQUNYLFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxHQUVULE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFDSCxXQUFXLEVBQ1gsNkJBQTZCLEVBQzdCLHdCQUF3QixFQUN4QixTQUFTLEVBQ1QsY0FBYyxFQUNkLE9BQU8sR0FDVixNQUFNLGVBQWUsQ0FBQztBQUd2QixPQUFPLEVBQUMsS0FBSyxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDckMsT0FBTyxFQUFDLGdCQUFnQixFQUFDLE1BQU0sdUJBQXVCLENBQUM7QUFXdkQ7SUFBQTtRQUlJLGdCQUFXLGlDQUE2QztRQUl4RCxvQkFBZSxHQUFHLENBQUMsQ0FBQztRQUdYLDBCQUFxQixHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFHM0MsVUFBSyxHQUF1QyxXQUFXLENBQUM7SUF5RDdFLENBQUM7SUF0REcsc0JBQUkseUNBQVE7YUFBWjtZQUNJLHlFQUF5RTtZQUN6RSwyQ0FBMkM7WUFDM0MsT0FBTyx3QkFBd0IsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQy9ELENBQUM7OztPQUFBO0lBRUQscUNBQU8sR0FBUCxVQUFRLElBQWlCO1FBQ3JCLE9BQU8sNkJBQTZCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLFNBQVMsQ0FDdEQsVUFBQyxFQUFlO2dCQUFkLGdDQUFhO1lBQU0sT0FBQSxhQUFhLEtBQUssSUFBSTtRQUF0QixDQUFzQixDQUM5QyxDQUFDO0lBQ04sQ0FBQztJQUVELHNDQUFRLEdBQVIsVUFBUyxLQUFhO1FBQ2xCLE9BQU8sS0FBSyxLQUFLLElBQUksQ0FBQyxlQUFlLENBQUM7SUFDMUMsQ0FBQztJQUVELHNDQUFRLEdBQVIsVUFBUyxLQUFhO1FBQ2xCLElBQUksSUFBSSxDQUFDLGVBQWUsS0FBSyxLQUFLLEVBQUU7WUFDaEMsT0FBTztTQUNWO1FBRUQsSUFBSSxDQUFDLGVBQWUsR0FBRyxLQUFLLENBQUM7UUFDN0IsSUFBSSxDQUFDLHFCQUFxQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUMzQyxDQUFDO0lBSUQsMENBQVksR0FBWixVQUFhLEtBQVksRUFBRSxJQUFZO1FBQ25DLElBQUksSUFBSSxDQUFDLFdBQVcsa0NBQThCLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxFQUFFO1lBQ2pFLE9BQU87U0FDVjtRQUVELEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN2QixJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDdkMsQ0FBQztJQUlELHdDQUFVLEdBQVYsVUFBVyxLQUFZLEVBQUUsSUFBWTtRQUNqQyxJQUFJLElBQUksQ0FBQyxXQUFXLDhCQUE0QixJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sRUFBRTtZQUMvRCxPQUFPO1NBQ1Y7UUFFRCxLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDdkIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQ3ZDLENBQUM7SUFFTyx1Q0FBUyxHQUFqQixVQUFrQixPQUFvQixFQUFFLElBQVk7UUFDaEQsSUFBTSxLQUFLLEdBQUcsNkJBQTZCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLEdBQUcsQ0FDdkQsVUFBQyxFQUFlO2dCQUFkLGdDQUFhO1lBQU0sT0FBQSxhQUFhO1FBQWIsQ0FBYSxDQUNyQyxDQUFDO1FBRUYsU0FBUyxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsT0FBc0IsQ0FBQyxFQUFFLEtBQUssRUFBRSxJQUFJLENBQUMsQ0FBQztJQUNsRSxDQUFDO0lBbEVEO1FBSEMsS0FBSyxFQUFFO1FBQ1AsV0FBVyxDQUFDLHVCQUF1QixDQUFDO1FBQ3BDLGNBQWMsRUFBRTs0REFDdUM7SUFJeEQ7UUFGQyxLQUFLLEVBQUU7UUFDUCxjQUFjLEVBQUU7Z0VBQ0c7SUFHcEI7UUFEQyxNQUFNLEVBQUU7c0VBQ21EO0lBRzVEO1FBREMsZUFBZSxDQUFDLFVBQVUsQ0FBQyxjQUFNLE9BQUEsZ0JBQWdCLEVBQWhCLENBQWdCLENBQUMsRUFBRSxFQUFDLElBQUksRUFBRSxVQUFVLEVBQUMsQ0FBQztzREFDQztJQUd6RTtRQURDLE9BQU87dURBS1A7SUF1QkQ7UUFGQyxZQUFZLENBQUMsb0JBQW9CLEVBQUUsQ0FBQyxRQUFRLEVBQUUsR0FBRyxDQUFDLENBQUM7UUFDbkQsWUFBWSxDQUFDLG1CQUFtQixFQUFFLENBQUMsUUFBUSxFQUFFLElBQUksQ0FBQyxDQUFDOzJEQVFuRDtJQUlEO1FBRkMsWUFBWSxDQUFDLG1CQUFtQixFQUFFLENBQUMsUUFBUSxFQUFFLEdBQUcsQ0FBQyxDQUFDO1FBQ2xELFlBQVksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDLFFBQVEsRUFBRSxJQUFJLENBQUMsQ0FBQzt5REFRakQ7SUE5RFEsbUJBQW1CO1FBVC9CLFNBQVMsQ0FBQztZQUNQLFFBQVEsRUFBRSw4QkFBOEI7WUFDeEMsaUdBQXNDO1lBRXRDLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO1lBQy9DLElBQUksRUFBRTtnQkFDRixLQUFLLEVBQUUsb0JBQW9CO2FBQzlCOztTQUNKLENBQUM7T0FDVyxtQkFBbUIsQ0F1RS9CO0lBQUQsMEJBQUM7Q0FBQSxBQXZFRCxJQXVFQztTQXZFWSxtQkFBbUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENvbXBvbmVudCxcbiAgICBDb250ZW50Q2hpbGRyZW4sXG4gICAgRWxlbWVudFJlZixcbiAgICBFdmVudEVtaXR0ZXIsXG4gICAgZm9yd2FyZFJlZixcbiAgICBIb3N0QmluZGluZyxcbiAgICBIb3N0TGlzdGVuZXIsXG4gICAgSW5wdXQsXG4gICAgT3V0cHV0LFxuICAgIFF1ZXJ5TGlzdCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICAgIEVNUFRZX1FVRVJZLFxuICAgIGdldE9yaWdpbmFsQXJyYXlGcm9tUXVlcnlMaXN0LFxuICAgIGl0ZW1zUXVlcnlMaXN0T2JzZXJ2YWJsZSxcbiAgICBtb3ZlRm9jdXMsXG4gICAgdHVpRGVmYXVsdFByb3AsXG4gICAgdHVpUHVyZSxcbn0gZnJvbSAnQHRhaWdhLXVpL2Nkayc7XG5pbXBvcnQge1R1aU9yaWVudGF0aW9ufSBmcm9tICdAdGFpZ2EtdWkvY29yZSc7XG5pbXBvcnQge09ic2VydmFibGV9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHtkZWxheX0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHtUdWlTdGVwQ29tcG9uZW50fSBmcm9tICcuL3N0ZXAvc3RlcC5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3R1aS1zdGVwcGVyLCBuYXZbdHVpU3RlcHBlcl0nLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9zdGVwcGVyLnRlbXBsYXRlLmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3N0ZXBwZXIuc3R5bGUubGVzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgY2xhc3M6ICd0dWktemVyby1zY3JvbGxiYXInLFxuICAgIH0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aVN0ZXBwZXJDb21wb25lbnQge1xuICAgIEBJbnB1dCgpXG4gICAgQEhvc3RCaW5kaW5nKCdhdHRyLmRhdGEtb3JpZW50YXRpb24nKVxuICAgIEB0dWlEZWZhdWx0UHJvcCgpXG4gICAgb3JpZW50YXRpb246IFR1aU9yaWVudGF0aW9uID0gVHVpT3JpZW50YXRpb24uSG9yaXpvbnRhbDtcblxuICAgIEBJbnB1dCgpXG4gICAgQHR1aURlZmF1bHRQcm9wKClcbiAgICBhY3RpdmVJdGVtSW5kZXggPSAwO1xuXG4gICAgQE91dHB1dCgpXG4gICAgcmVhZG9ubHkgYWN0aXZlSXRlbUluZGV4Q2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXI+KCk7XG5cbiAgICBAQ29udGVudENoaWxkcmVuKGZvcndhcmRSZWYoKCkgPT4gVHVpU3RlcENvbXBvbmVudCksIHtyZWFkOiBFbGVtZW50UmVmfSlcbiAgICBwcml2YXRlIHJlYWRvbmx5IHN0ZXBzOiBRdWVyeUxpc3Q8RWxlbWVudFJlZjxIVE1MRWxlbWVudD4+ID0gRU1QVFlfUVVFUlk7XG5cbiAgICBAdHVpUHVyZVxuICAgIGdldCBjaGFuZ2VzJCgpOiBPYnNlcnZhYmxlPHVua25vd24+IHtcbiAgICAgICAgLy8gRGVsYXkgaXMgcmVxdWlyZWQgdG8gdHJpZ2dlciBjaGFuZ2UgZGV0ZWN0aW9uIGFmdGVyIHN0ZXBzIGFyZSByZW5kZXJlZFxuICAgICAgICAvLyBzbyB0aGV5IGNhbiB1cGRhdGUgdGhlaXIgXCJhY3RpdmVcIiBzdGF0dXNcbiAgICAgICAgcmV0dXJuIGl0ZW1zUXVlcnlMaXN0T2JzZXJ2YWJsZSh0aGlzLnN0ZXBzKS5waXBlKGRlbGF5KDApKTtcbiAgICB9XG5cbiAgICBpbmRleE9mKHN0ZXA6IEhUTUxFbGVtZW50KTogbnVtYmVyIHtcbiAgICAgICAgcmV0dXJuIGdldE9yaWdpbmFsQXJyYXlGcm9tUXVlcnlMaXN0KHRoaXMuc3RlcHMpLmZpbmRJbmRleChcbiAgICAgICAgICAgICh7bmF0aXZlRWxlbWVudH0pID0+IG5hdGl2ZUVsZW1lbnQgPT09IHN0ZXAsXG4gICAgICAgICk7XG4gICAgfVxuXG4gICAgaXNBY3RpdmUoaW5kZXg6IG51bWJlcik6IGJvb2xlYW4ge1xuICAgICAgICByZXR1cm4gaW5kZXggPT09IHRoaXMuYWN0aXZlSXRlbUluZGV4O1xuICAgIH1cblxuICAgIGFjdGl2YXRlKGluZGV4OiBudW1iZXIpIHtcbiAgICAgICAgaWYgKHRoaXMuYWN0aXZlSXRlbUluZGV4ID09PSBpbmRleCkge1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgdGhpcy5hY3RpdmVJdGVtSW5kZXggPSBpbmRleDtcbiAgICAgICAgdGhpcy5hY3RpdmVJdGVtSW5kZXhDaGFuZ2UuZW1pdChpbmRleCk7XG4gICAgfVxuXG4gICAgQEhvc3RMaXN0ZW5lcigna2V5ZG93bi5hcnJvd1JpZ2h0JywgWyckZXZlbnQnLCAnMSddKVxuICAgIEBIb3N0TGlzdGVuZXIoJ2tleWRvd24uYXJyb3dMZWZ0JywgWyckZXZlbnQnLCAnLTEnXSlcbiAgICBvbkhvcml6b250YWwoZXZlbnQ6IEV2ZW50LCBzdGVwOiBudW1iZXIpIHtcbiAgICAgICAgaWYgKHRoaXMub3JpZW50YXRpb24gIT09IFR1aU9yaWVudGF0aW9uLkhvcml6b250YWwgfHwgIWV2ZW50LnRhcmdldCkge1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgdGhpcy5tb3ZlRm9jdXMoZXZlbnQudGFyZ2V0LCBzdGVwKTtcbiAgICB9XG5cbiAgICBASG9zdExpc3RlbmVyKCdrZXlkb3duLmFycm93RG93bicsIFsnJGV2ZW50JywgJzEnXSlcbiAgICBASG9zdExpc3RlbmVyKCdrZXlkb3duLmFycm93VXAnLCBbJyRldmVudCcsICctMSddKVxuICAgIG9uVmVydGljYWwoZXZlbnQ6IEV2ZW50LCBzdGVwOiBudW1iZXIpIHtcbiAgICAgICAgaWYgKHRoaXMub3JpZW50YXRpb24gIT09IFR1aU9yaWVudGF0aW9uLlZlcnRpY2FsIHx8ICFldmVudC50YXJnZXQpIHtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgIHRoaXMubW92ZUZvY3VzKGV2ZW50LnRhcmdldCwgc3RlcCk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBtb3ZlRm9jdXMoY3VycmVudDogRXZlbnRUYXJnZXQsIHN0ZXA6IG51bWJlcikge1xuICAgICAgICBjb25zdCBzdGVwcyA9IGdldE9yaWdpbmFsQXJyYXlGcm9tUXVlcnlMaXN0KHRoaXMuc3RlcHMpLm1hcChcbiAgICAgICAgICAgICh7bmF0aXZlRWxlbWVudH0pID0+IG5hdGl2ZUVsZW1lbnQsXG4gICAgICAgICk7XG5cbiAgICAgICAgbW92ZUZvY3VzKHN0ZXBzLmluZGV4T2YoY3VycmVudCBhcyBIVE1MRWxlbWVudCksIHN0ZXBzLCBzdGVwKTtcbiAgICB9XG59XG4iXX0=