@progress/kendo-angular-layout 21.1.1-develop.1 → 21.2.0-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/avatar/avatar.component.mjs +63 -59
- package/esm2022/card/card-actions.component.mjs +51 -41
- package/esm2022/drawer/drawer-container.component.mjs +10 -8
- package/esm2022/drawer/drawer.component.mjs +69 -55
- package/esm2022/drawer/item.component.mjs +79 -69
- package/esm2022/drawer/list.component.mjs +28 -25
- package/esm2022/expansionpanel/expansionpanel.component.mjs +75 -65
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/panelbar/panelbar-item.component.mjs +169 -135
- package/esm2022/panelbar/panelbar.component.mjs +56 -45
- package/esm2022/splitter/splitter-bar.component.mjs +32 -25
- package/esm2022/splitter/splitter-pane.component.mjs +16 -10
- package/esm2022/splitter/splitter.component.mjs +29 -31
- package/esm2022/stepper/list.component.mjs +33 -33
- package/esm2022/stepper/step.component.mjs +141 -111
- package/esm2022/stepper/stepper.component.mjs +59 -55
- package/esm2022/tabstrip/rendering/tab.component.mjs +49 -39
- package/esm2022/tabstrip/tabstrip.component.mjs +251 -233
- package/esm2022/tabstrip/util.mjs +1 -1
- package/esm2022/tilelayout/tilelayout-item.component.mjs +28 -23
- package/esm2022/tilelayout/tilelayout.component.mjs +24 -21
- package/esm2022/timeline/timeline-card.component.mjs +185 -151
- package/esm2022/timeline/timeline-horizontal.component.mjs +197 -183
- package/esm2022/timeline/timeline-vertical.component.mjs +79 -67
- package/esm2022/timeline/timeline.component.mjs +36 -33
- package/fesm2022/progress-kendo-angular-layout.mjs +1747 -1498
- package/package.json +9 -9
- package/schematics/ngAdd/index.js +4 -0
|
@@ -12,7 +12,6 @@ import { delay, filter, map, switchMap, takeUntil, tap } from 'rxjs/operators';
|
|
|
12
12
|
import { shouldToggleOrResize } from './util';
|
|
13
13
|
import { caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, caretAltUpIcon } from '@progress/kendo-svg-icons';
|
|
14
14
|
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
15
|
-
import { NgIf } from '@angular/common';
|
|
16
15
|
import * as i0 from "@angular/core";
|
|
17
16
|
import * as i1 from "@progress/kendo-angular-common";
|
|
18
17
|
import * as i2 from "@progress/kendo-angular-l10n";
|
|
@@ -254,47 +253,55 @@ export class SplitterBarComponent {
|
|
|
254
253
|
setHTMLAttributes(attributesToRender, this.renderer, this.element.nativeElement);
|
|
255
254
|
}
|
|
256
255
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1.DraggableDirective, host: true }, { token: i2.LocalizationService }, { token: i3.SplitterService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
257
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
258
|
-
|
|
256
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SplitterBarComponent, isStandalone: true, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index", htmlAttributes: "htmlAttributes" }, host: { properties: { "attr.role": "this.ariaRole", "attr.aria-label": "this.ariaLabel", "class.k-focus": "this.focused", "attr.aria-orientation": "this.hostOrientation", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses", "style.-ms-flex-order": "this.order", "style.order": "this.order" } }, ngImport: i0, template: `
|
|
257
|
+
@if (shouldShowIcon('prev')) {
|
|
258
|
+
<div class="k-collapse-prev" (click)="togglePrevious()">
|
|
259
259
|
<kendo-icon-wrapper
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
260
|
+
size="xsmall"
|
|
261
|
+
[name]="previousArrowClass()"
|
|
262
|
+
[svgIcon]="previousSVGArrowClass()"
|
|
263
263
|
></kendo-icon-wrapper>
|
|
264
|
-
|
|
264
|
+
</div>
|
|
265
|
+
}
|
|
265
266
|
<div class="k-resize-handle"></div>
|
|
266
|
-
|
|
267
|
+
@if (shouldShowIcon('next')) {
|
|
268
|
+
<div class="k-collapse-next" (click)="toggleNext()">
|
|
267
269
|
<kendo-icon-wrapper
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
270
|
+
size="xsmall"
|
|
271
|
+
[name]="nextArrowClass()"
|
|
272
|
+
[svgIcon]="nextSVGArrowClass()"
|
|
271
273
|
></kendo-icon-wrapper>
|
|
272
|
-
|
|
273
|
-
|
|
274
|
+
</div>
|
|
275
|
+
}
|
|
276
|
+
`, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
|
|
274
277
|
}
|
|
275
278
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitterBarComponent, decorators: [{
|
|
276
279
|
type: Component,
|
|
277
280
|
args: [{
|
|
278
281
|
selector: 'kendo-splitter-bar',
|
|
279
282
|
template: `
|
|
280
|
-
|
|
283
|
+
@if (shouldShowIcon('prev')) {
|
|
284
|
+
<div class="k-collapse-prev" (click)="togglePrevious()">
|
|
281
285
|
<kendo-icon-wrapper
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
286
|
+
size="xsmall"
|
|
287
|
+
[name]="previousArrowClass()"
|
|
288
|
+
[svgIcon]="previousSVGArrowClass()"
|
|
285
289
|
></kendo-icon-wrapper>
|
|
286
|
-
|
|
290
|
+
</div>
|
|
291
|
+
}
|
|
287
292
|
<div class="k-resize-handle"></div>
|
|
288
|
-
|
|
293
|
+
@if (shouldShowIcon('next')) {
|
|
294
|
+
<div class="k-collapse-next" (click)="toggleNext()">
|
|
289
295
|
<kendo-icon-wrapper
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
296
|
+
size="xsmall"
|
|
297
|
+
[name]="nextArrowClass()"
|
|
298
|
+
[svgIcon]="nextSVGArrowClass()"
|
|
293
299
|
></kendo-icon-wrapper>
|
|
294
|
-
|
|
295
|
-
|
|
300
|
+
</div>
|
|
301
|
+
}
|
|
302
|
+
`,
|
|
296
303
|
standalone: true,
|
|
297
|
-
imports: [
|
|
304
|
+
imports: [IconWrapperComponent]
|
|
298
305
|
}]
|
|
299
306
|
}], ctorParameters: () => [{ type: i1.DraggableDirective, decorators: [{
|
|
300
307
|
type: Host
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Renderer2, Input, Output } from '@angular/core';
|
|
6
|
-
import { NgIf } from '@angular/common';
|
|
7
6
|
import { SplitterService } from './splitter.service';
|
|
8
7
|
import { anyChanged } from '@progress/kendo-angular-common';
|
|
9
8
|
import * as i0 from "@angular/core";
|
|
@@ -259,10 +258,14 @@ export class SplitterPaneComponent {
|
|
|
259
258
|
}
|
|
260
259
|
}
|
|
261
260
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitterPaneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.SplitterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
262
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
261
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SplitterPaneComponent, isStandalone: true, selector: "kendo-splitter-pane", inputs: { order: "order", size: "size", splitterBarAttributes: "splitterBarAttributes", splitterBarClass: "splitterBarClass", min: "min", max: "max", resizable: "resizable", collapsible: "collapsible", scrollable: "scrollable", collapsed: "collapsed", orientation: "orientation", containsSplitter: "containsSplitter", overlayContent: "overlayContent" }, outputs: { sizeChange: "sizeChange", collapsedChange: "collapsedChange" }, host: { properties: { "attr.role": "this.ariaRole", "class.k-pane": "this.hostClass", "class.k-scrollable": "this.scrollablePaneClass" } }, exportAs: ["kendoSplitterPane"], usesOnChanges: true, ngImport: i0, template: `
|
|
262
|
+
@if (!collapsed) {
|
|
263
|
+
<ng-content></ng-content>
|
|
264
|
+
}
|
|
265
|
+
@if (overlayContent) {
|
|
266
|
+
<div class="k-splitter-overlay k-overlay"></div>
|
|
267
|
+
}
|
|
268
|
+
`, isInline: true });
|
|
266
269
|
}
|
|
267
270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitterPaneComponent, decorators: [{
|
|
268
271
|
type: Component,
|
|
@@ -270,11 +273,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
270
273
|
exportAs: 'kendoSplitterPane',
|
|
271
274
|
selector: 'kendo-splitter-pane',
|
|
272
275
|
template: `
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
276
|
+
@if (!collapsed) {
|
|
277
|
+
<ng-content></ng-content>
|
|
278
|
+
}
|
|
279
|
+
@if (overlayContent) {
|
|
280
|
+
<div class="k-splitter-overlay k-overlay"></div>
|
|
281
|
+
}
|
|
282
|
+
`,
|
|
283
|
+
standalone: true
|
|
278
284
|
}]
|
|
279
285
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.SplitterService }], propDecorators: { order: [{
|
|
280
286
|
type: Input
|
|
@@ -12,7 +12,7 @@ import { SplitterBarComponent } from './splitter-bar.component';
|
|
|
12
12
|
import { SplitterService } from './splitter.service';
|
|
13
13
|
import { isPresent } from '../common/util';
|
|
14
14
|
import { DraggableDirective } from '@progress/kendo-angular-common';
|
|
15
|
-
import { NgClass,
|
|
15
|
+
import { NgClass, NgStyle } from '@angular/common';
|
|
16
16
|
import * as i0 from "@angular/core";
|
|
17
17
|
import * as i1 from "./splitter.service";
|
|
18
18
|
import * as i2 from "@progress/kendo-angular-l10n";
|
|
@@ -198,7 +198,7 @@ export class SplitterComponent {
|
|
|
198
198
|
this.splitterService.fixedHeight = getComputedStyle(this.element.nativeElement).getPropertyValue('height') !== 'auto';
|
|
199
199
|
}
|
|
200
200
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitterComponent, deps: [{ token: i0.ElementRef }, { token: i1.SplitterService }, { token: i2.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: SplitterPaneComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
201
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
201
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SplitterComponent, isStandalone: true, selector: "kendo-splitter", inputs: { orientation: "orientation", splitbarWidth: "splitbarWidth", resizeStep: "resizeStep", splitterBarClass: "splitterBarClass" }, outputs: { layoutChange: "layoutChange" }, host: { properties: { "class.k-splitter": "this.hostClasses", "class.k-splitter-flex": "this.hostClasses", "class.k-splitter-horizontal": "this.horizontalHostClasses", "class.k-splitter-vertical": "this.verticalHostClasses", "attr.dir": "this.dir" } }, providers: [
|
|
202
202
|
SplitterService,
|
|
203
203
|
LocalizationService,
|
|
204
204
|
{
|
|
@@ -207,24 +207,23 @@ export class SplitterComponent {
|
|
|
207
207
|
}
|
|
208
208
|
], queries: [{ propertyName: "panes", predicate: SplitterPaneComponent }], viewQueries: [{ propertyName: "splitbars", predicate: SplitterBarComponent, descendants: true }], exportAs: ["kendoSplitter"], usesOnChanges: true, ngImport: i0, template: `
|
|
209
209
|
<ng-content select="kendo-splitter-pane"></ng-content>
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
let index = index;
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
[orientation]="orientation"
|
|
220
|
-
[ngClass]="pane.splitterBarClass || splitterBarClass"
|
|
210
|
+
@for (
|
|
211
|
+
pane of panes; track
|
|
212
|
+
pane; let index = $index; let last = $last) {
|
|
213
|
+
@if (!last) {
|
|
214
|
+
<kendo-splitter-bar
|
|
215
|
+
kendoDraggable
|
|
216
|
+
[index]="index"
|
|
217
|
+
[orientation]="orientation"
|
|
218
|
+
[ngClass]="pane.splitterBarClass || splitterBarClass"
|
|
221
219
|
[ngStyle]="{
|
|
222
220
|
width: orientation === 'horizontal' ? splitbarWidth + 'px' : undefined,
|
|
223
221
|
height: orientation === 'vertical' ? splitbarWidth + 'px' : undefined
|
|
224
222
|
}">
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
223
|
+
</kendo-splitter-bar>
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
`, isInline: true, dependencies: [{ kind: "component", type: SplitterBarComponent, selector: "kendo-splitter-bar", inputs: ["orientation", "index", "htmlAttributes"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
228
227
|
}
|
|
229
228
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitterComponent, decorators: [{
|
|
230
229
|
type: Component,
|
|
@@ -241,26 +240,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
241
240
|
],
|
|
242
241
|
template: `
|
|
243
242
|
<ng-content select="kendo-splitter-pane"></ng-content>
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
let index = index;
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
[orientation]="orientation"
|
|
254
|
-
[ngClass]="pane.splitterBarClass || splitterBarClass"
|
|
243
|
+
@for (
|
|
244
|
+
pane of panes; track
|
|
245
|
+
pane; let index = $index; let last = $last) {
|
|
246
|
+
@if (!last) {
|
|
247
|
+
<kendo-splitter-bar
|
|
248
|
+
kendoDraggable
|
|
249
|
+
[index]="index"
|
|
250
|
+
[orientation]="orientation"
|
|
251
|
+
[ngClass]="pane.splitterBarClass || splitterBarClass"
|
|
255
252
|
[ngStyle]="{
|
|
256
253
|
width: orientation === 'horizontal' ? splitbarWidth + 'px' : undefined,
|
|
257
254
|
height: orientation === 'vertical' ? splitbarWidth + 'px' : undefined
|
|
258
255
|
}">
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
256
|
+
</kendo-splitter-bar>
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
`,
|
|
262
260
|
standalone: true,
|
|
263
|
-
imports: [
|
|
261
|
+
imports: [SplitterBarComponent, DraggableDirective, NgStyle, NgClass]
|
|
264
262
|
}]
|
|
265
263
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.SplitterService }, { type: i2.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.SplitterPaneComponent, decorators: [{
|
|
266
264
|
type: Optional
|
|
@@ -8,7 +8,7 @@ import { STEPPER_STEP_INDEX } from '../stepper/models/constants';
|
|
|
8
8
|
import { StepperService } from "./stepper.service";
|
|
9
9
|
import { isPresent } from "@progress/kendo-angular-common";
|
|
10
10
|
import { StepperStepComponent } from "./step.component";
|
|
11
|
-
import {
|
|
11
|
+
import { NgClass, NgStyle } from "@angular/common";
|
|
12
12
|
import * as i0 from "@angular/core";
|
|
13
13
|
import * as i1 from "./stepper.service";
|
|
14
14
|
/**
|
|
@@ -110,7 +110,7 @@ export class StepperListComponent {
|
|
|
110
110
|
}
|
|
111
111
|
}
|
|
112
112
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.StepperService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
113
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
113
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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 @for (step of steps; track step; 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 }\n ", isInline: true, dependencies: [{ 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"] }] });
|
|
114
114
|
}
|
|
115
115
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperListComponent, decorators: [{
|
|
116
116
|
type: Component,
|
|
@@ -118,39 +118,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
118
118
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
119
119
|
selector: '[kendoStepperList]',
|
|
120
120
|
template: `
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
121
|
+
@for (step of steps; track step; let idx = $index) {
|
|
122
|
+
<li kendoStepperStep
|
|
123
|
+
[attr.${STEPPER_STEP_INDEX}]='idx'
|
|
124
|
+
[type]='stepType'
|
|
125
|
+
[step]='step'
|
|
126
|
+
[index]='idx'
|
|
127
|
+
[current]='currentStep'
|
|
128
|
+
[successIcon]='successIcon'
|
|
129
|
+
[successSVGIcon]='successSVGIcon'
|
|
130
|
+
[errorIcon]='errorIcon'
|
|
131
|
+
[errorSVGIcon]='errorSVGIcon'
|
|
132
|
+
[svgIcon]='svgIcon'
|
|
133
|
+
[indicatorTemplate]='indicatorTemplate'
|
|
134
|
+
[labelTemplate]='labelTemplate'
|
|
135
|
+
[stepTemplate]='stepTemplate'
|
|
136
|
+
class='k-step'
|
|
137
|
+
[class.k-step-first]='idx === 0'
|
|
138
|
+
[class.k-step-last]='idx === steps.length - 1'
|
|
139
|
+
[class.k-step-done]='idx < currentStep'
|
|
140
|
+
[class.k-step-current]='idx === currentStep'
|
|
141
|
+
[class.k-step-optional]='step.optional'
|
|
142
|
+
[class.k-disabled]='step.disabled'
|
|
143
|
+
[class.k-focus]='idx === focusedStep || (!isPresent(focusedStep) && idx === currentStep)'
|
|
144
|
+
[ngClass]='step.cssClass'
|
|
145
|
+
[ngStyle]='step.cssStyle'
|
|
146
|
+
[style.max-width.%] = 'maxStepWidth'
|
|
147
|
+
[style.max-height.%] = 'maxStepHeight'
|
|
148
148
|
>
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
149
|
+
</li>
|
|
150
|
+
}
|
|
151
|
+
`,
|
|
152
152
|
standalone: true,
|
|
153
|
-
imports: [
|
|
153
|
+
imports: [StepperStepComponent, NgClass, NgStyle]
|
|
154
154
|
}]
|
|
155
155
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.StepperService }, { type: i0.ElementRef }], propDecorators: { linear: [{
|
|
156
156
|
type: Input
|