@progress/kendo-angular-layout
Version:
Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts
186 lines (185 loc) • 9.39 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, ElementRef, EventEmitter, Input, NgZone, Output, Renderer2, TemplateRef } from "@angular/core";
import { closestItem, itemIndex, hasClass } from '../common/dom-queries';
import { STEPPER_STEP_INDEX } from '../stepper/models/constants';
import { StepperService } from "./stepper.service";
import { isPresent } from "@progress/kendo-angular-common";
import { StepperStepComponent } from "./step.component";
import { NgFor, NgClass, NgStyle } from "@angular/common";
import * as i0 from "@angular/core";
import * as i1 from "./stepper.service";
/**
* @hidden
*/
export class StepperListComponent {
renderer;
ngZone;
service;
element;
linear;
stepType;
orientation;
currentStep;
steps;
successIcon;
successSVGIcon;
errorIcon;
errorSVGIcon;
svgIcon;
indicatorTemplate;
labelTemplate;
stepTemplate;
listKeydown = new EventEmitter();
listClick = new EventEmitter();
domSubs;
constructor(renderer, ngZone, service, element) {
this.renderer = renderer;
this.ngZone = ngZone;
this.service = service;
this.element = element;
}
ngOnInit() {
this.initDomEvents();
}
ngOnDestroy() {
if (this.domSubs) {
this.domSubs();
}
}
get maxStepWidth() {
return this.maxStepDimension('width');
}
get maxStepHeight() {
return this.maxStepDimension('height');
}
get focusedStep() {
return this.service.focusedStep;
}
isPresent(arg) {
return isPresent(arg);
}
maxStepDimension(dimension) {
if (dimension === 'width' && this.orientation === 'vertical') {
return null;
}
if (dimension === 'height' && this.orientation === 'horizontal') {
return null;
}
return 100 / this.steps.length;
}
initDomEvents() {
if (!this.element) {
return;
}
this.ngZone.runOutsideAngular(() => {
const nativeElement = this.element.nativeElement;
const clickSubscription = this.renderer.listen(nativeElement, 'click', this.clickHandler.bind(this));
const keydownSubscription = this.renderer.listen(nativeElement, 'keydown', (e) => {
if (hasClass(e.target, 'k-step-link')) {
this.listKeydown.emit(e);
}
});
this.domSubs = () => {
clickSubscription();
keydownSubscription();
};
});
}
clickHandler(e) {
e.preventDefault();
const stepIdx = this.getStepIndex(e.target);
const step = this.steps[stepIdx];
if (!step || step.disabled) {
return;
}
const eventArgs = {
stepIdx,
currentStep: this.currentStep,
linear: this.linear,
originalEvent: e
};
this.listClick.emit(eventArgs);
}
getStepIndex(target) {
const step = closestItem(target, STEPPER_STEP_INDEX, this.element.nativeElement);
if (step) {
return itemIndex(step, STEPPER_STEP_INDEX);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepperListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.StepperService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StepperListComponent, isStandalone: true, selector: "[kendoStepperList]", inputs: { linear: "linear", stepType: "stepType", orientation: "orientation", currentStep: "currentStep", steps: "steps", successIcon: "successIcon", successSVGIcon: "successSVGIcon", errorIcon: "errorIcon", errorSVGIcon: "errorSVGIcon", svgIcon: "svgIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, outputs: { listKeydown: "listKeydown", listClick: "listClick" }, ngImport: i0, template: "\n <ng-container *ngFor='let step of steps; let idx = index'>\n <li kendoStepperStep\n [attr.data-kendo-stepper-index]='idx'\n [type]='stepType'\n [step]='step'\n [index]='idx'\n [current]='currentStep'\n [successIcon]='successIcon'\n [successSVGIcon]='successSVGIcon'\n [errorIcon]='errorIcon'\n [errorSVGIcon]='errorSVGIcon'\n [svgIcon]='svgIcon'\n [indicatorTemplate]='indicatorTemplate'\n [labelTemplate]='labelTemplate'\n [stepTemplate]='stepTemplate'\n class='k-step'\n [class.k-step-first]='idx === 0'\n [class.k-step-last]='idx === steps.length - 1'\n [class.k-step-done]='idx < currentStep'\n [class.k-step-current]='idx === currentStep'\n [class.k-step-optional]='step.optional'\n [class.k-disabled]='step.disabled'\n [class.k-focus]='idx === focusedStep || (!isPresent(focusedStep) && idx === currentStep)'\n [ngClass]='step.cssClass'\n [ngStyle]='step.cssStyle'\n [style.max-width.%] = 'maxStepWidth'\n [style.max-height.%] = 'maxStepHeight'\n >\n </li>\n </ng-container>\n ", isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: StepperStepComponent, selector: "[kendoStepperStep]", inputs: ["step", "index", "current", "type", "successIcon", "successSVGIcon", "errorIcon", "errorSVGIcon", "svgIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepperListComponent, decorators: [{
type: Component,
args: [{
// eslint-disable-next-line @angular-eslint/component-selector
selector: '[kendoStepperList]',
template: `
<ng-container *ngFor='let step of steps; let idx = index'>
<li kendoStepperStep
[attr.${STEPPER_STEP_INDEX}]='idx'
[type]='stepType'
[step]='step'
[index]='idx'
[current]='currentStep'
[successIcon]='successIcon'
[successSVGIcon]='successSVGIcon'
[errorIcon]='errorIcon'
[errorSVGIcon]='errorSVGIcon'
[svgIcon]='svgIcon'
[indicatorTemplate]='indicatorTemplate'
[labelTemplate]='labelTemplate'
[stepTemplate]='stepTemplate'
class='k-step'
[class.k-step-first]='idx === 0'
[class.k-step-last]='idx === steps.length - 1'
[class.k-step-done]='idx < currentStep'
[class.k-step-current]='idx === currentStep'
[class.k-step-optional]='step.optional'
[class.k-disabled]='step.disabled'
[class.k-focus]='idx === focusedStep || (!isPresent(focusedStep) && idx === currentStep)'
[ngClass]='step.cssClass'
[ngStyle]='step.cssStyle'
[style.max-width.%] = 'maxStepWidth'
[style.max-height.%] = 'maxStepHeight'
>
</li>
</ng-container>
`,
standalone: true,
imports: [NgFor, StepperStepComponent, NgClass, NgStyle]
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.StepperService }, { type: i0.ElementRef }]; }, propDecorators: { linear: [{
type: Input
}], stepType: [{
type: Input
}], orientation: [{
type: Input
}], currentStep: [{
type: Input
}], steps: [{
type: Input
}], successIcon: [{
type: Input
}], successSVGIcon: [{
type: Input
}], errorIcon: [{
type: Input
}], errorSVGIcon: [{
type: Input
}], svgIcon: [{
type: Input
}], indicatorTemplate: [{
type: Input
}], labelTemplate: [{
type: Input
}], stepTemplate: [{
type: Input
}], listKeydown: [{
type: Output
}], listClick: [{
type: Output
}] } });