@progress/kendo-angular-layout 17.0.0-develop.3 → 17.0.0-develop.30

package/{esm2020 → esm2022}/splitter/splitter.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ElementRef, EventEmitter, ContentChildren, Host, HostBinding, Inject, Input, Optional, Output, QueryList, ViewChildren, Renderer2 } from '@angular/core';
+import { Component, ElementRef, EventEmitter, ContentChildren, Host, HostBinding, Inject, Input, Optional, Output, QueryList, ViewChildren, Renderer2, NgZone, isDevMode } from '@angular/core';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
@@ -12,11 +12,12 @@ import { SplitterBarComponent } from './splitter-bar.component';
 import { SplitterService } from './splitter.service';
 import { isPresent } from '../common/util';
 import { DraggableDirective } from '@progress/kendo-angular-common';
-import { NgFor, NgIf, NgStyle } from '@angular/common';
+import { NgClass, NgFor, NgIf, NgStyle } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "./splitter.service";
 import * as i2 from "@progress/kendo-angular-l10n";
 import * as i3 from "./splitter-pane.component";
+const SIZING_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/layout/splitter/panes/#toc-size';
 /**
  * Represents the [Kendo UI Splitter component for Angular]({% slug overview_splitter %}).
  *
@@ -53,27 +54,22 @@ import * as i3 from "./splitter-pane.component";
  * ```
  */
 export class SplitterComponent {
-    constructor(element, splitterService, localization, renderer, enclosingPane) {
-        this.element = element;
-        this.splitterService = splitterService;
-        this.localization = localization;
-        this.renderer = renderer;
-        this.enclosingPane = enclosingPane;
-        /**
-         * Specifies the orientation of the panes within the Splitter.
-         * Panes in a horizontal Splitter are placed horizontally.
-         * Panes in a vertical Splitter are placed vertically.
-         */
-        this.orientation = 'horizontal';
-        validatePackage(packageMetadata);
-        if (enclosingPane) {
-            enclosingPane.containsSplitter = true;
-        }
-        // the handler only runs in NgZone if there are bound handlers
-        // this line merges both streams
-        this.layoutChange = this.splitterService.layoutChange;
-        this.configure = this.configure.bind(this);
-    }
+    element;
+    splitterService;
+    localization;
+    renderer;
+    ngZone;
+    enclosingPane;
+    /**
+     * Specifies the orientation of the panes within the Splitter.
+     * Panes in a horizontal Splitter are placed horizontally.
+     * Panes in a vertical Splitter are placed vertically.
+     */
+    orientation = 'horizontal';
+    /**
+     * Sets the width or height (depending on the orientation) of the Splitter splitbars in pixels.
+     */
+    splitbarWidth;
     /**
      * The distance in pixels that the separator is moved with during keyboard navigation.
      * @default 10
@@ -84,6 +80,17 @@ export class SplitterComponent {
     get resizeStep() {
         return this.splitterService.resizeStep;
     }
+    /**
+     * The CSS classes that will be rendered on the splitter bars.
+     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     */
+    splitterBarClass;
+    /**
+     * Fires after a Splitter pane is resized or collapsed.
+     * Useful for triggering layout calculations on components
+     * which are positioned inside the panes.
+     */
+    layoutChange;
     get hostClasses() {
         return true;
     }
@@ -97,6 +104,7 @@ export class SplitterComponent {
         return this.direction;
     }
     set splitbars(splitbars) {
+        this.splitterService.splitterBars = splitbars ? splitbars.toArray() : [];
         if (!isPresent(splitbars) || !isPresent(this.panes)) {
             return;
         }
@@ -109,15 +117,54 @@ export class SplitterComponent {
             .sort((a, b) => a.order - b.order);
         const elements = components.map(component => component.element.nativeElement);
         panesArray.forEach((pane, i) => {
-            if (splitBarsArray[i] && pane.separatorLabel) {
-                const splitbar = splitBarsArray[i].element.nativeElement;
-                this.renderer.setAttribute(splitbar, 'aria-label', pane.separatorLabel);
+            const splitbar = splitBarsArray[i];
+            if (splitbar && pane.splitterBarAttributes) {
+                splitbar.htmlAttributes = pane.splitterBarAttributes;
             }
         });
         elements.forEach(element => this.renderer.appendChild(this.element.nativeElement, element));
     }
+    /**
+     * @hidden
+     */
+    panes;
+    paneChangesSubscription;
+    _styleObserver;
+    constructor(element, splitterService, localization, renderer, ngZone, enclosingPane) {
+        this.element = element;
+        this.splitterService = splitterService;
+        this.localization = localization;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.enclosingPane = enclosingPane;
+        validatePackage(packageMetadata);
+        if (enclosingPane) {
+            enclosingPane.containsSplitter = true;
+        }
+        // the handler only runs in NgZone if there are bound handlers
+        // this line merges both streams
+        this.layoutChange = this.splitterService.layoutChange;
+        this.configure = this.configure.bind(this);
+    }
     ngAfterContentInit() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
         this.reconfigure();
+        this.setFixedHeight();
+        const allHaveFixedSize = this.panes.length && Array.from(this.panes).every(p => p.fixedSize);
+        if (allHaveFixedSize && isDevMode()) {
+            throw new Error(`
+                The Splitter should have at least one pane without a set size.
+                See ${SIZING_DOC_LINK} for more information.
+            `);
+        }
+        this._styleObserver = new MutationObserver(() => {
+            this.ngZone.runOutsideAngular(() => {
+                this.setFixedHeight();
+            });
+        });
+        this._styleObserver.observe(this.element.nativeElement, { attributeFilter: ['style'] });
     }
     ngOnChanges(changes) {
         if (changes.orientation && !changes.orientation.isFirstChange()) {
@@ -128,6 +175,10 @@ export class SplitterComponent {
         if (this.enclosingPane) {
             this.enclosingPane.containsSplitter = false;
         }
+        if (this._styleObserver) {
+            this._styleObserver.disconnect();
+            this._styleObserver = null;
+        }
         this.unsubscribeChanges();
     }
     reconfigure() {
@@ -159,16 +210,18 @@ export class SplitterComponent {
     get direction() {
         return this.localization.rtl ? 'rtl' : 'ltr';
     }
-}
-SplitterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterComponent, deps: [{ token: i0.ElementRef }, { token: i1.SplitterService }, { token: i2.LocalizationService }, { token: i0.Renderer2 }, { token: SplitterPaneComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitterComponent, isStandalone: true, selector: "kendo-splitter", inputs: { orientation: "orientation", splitbarWidth: "splitbarWidth", resizeStep: "resizeStep" }, 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: [
-        SplitterService,
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.spliter'
-        }
-    ], queries: [{ propertyName: "panes", predicate: SplitterPaneComponent }], viewQueries: [{ propertyName: "splitbars", predicate: SplitterBarComponent, descendants: true }], exportAs: ["kendoSplitter"], usesOnChanges: true, ngImport: i0, template: `
+    setFixedHeight() {
+        this.splitterService.fixedHeight = getComputedStyle(this.element.nativeElement).getPropertyValue('height') !== 'auto';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: [
+            SplitterService,
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.spliter'
+            }
+        ], queries: [{ propertyName: "panes", predicate: SplitterPaneComponent }], viewQueries: [{ propertyName: "splitbars", predicate: SplitterBarComponent, descendants: true }], exportAs: ["kendoSplitter"], usesOnChanges: true, ngImport: i0, template: `
       <ng-content select="kendo-splitter-pane"></ng-content>
       <ng-container *ngFor="
         let pane of panes;
@@ -180,14 +233,16 @@ SplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
           *ngIf="!last"
           [index]="index"
           [orientation]="orientation"
+          [ngClass]="pane.splitterBarClass || splitterBarClass"
           [ngStyle]="{
             width: orientation === 'horizontal' ? splitbarWidth + 'px' : undefined,
             height: orientation === 'vertical' ? splitbarWidth + 'px' : undefined
           }">
         </kendo-splitter-bar>
       </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SplitterBarComponent, selector: "kendo-splitter-bar", inputs: ["orientation", "index"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitterComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoSplitter',
@@ -212,6 +267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
           *ngIf="!last"
           [index]="index"
           [orientation]="orientation"
+          [ngClass]="pane.splitterBarClass || splitterBarClass"
           [ngStyle]="{
             width: orientation === 'horizontal' ? splitbarWidth + 'px' : undefined,
             height: orientation === 'vertical' ? splitbarWidth + 'px' : undefined
@@ -220,9 +276,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
       </ng-container>
     `,
                     standalone: true,
-                    imports: [NgFor, NgIf, SplitterBarComponent, DraggableDirective, NgStyle]
+                    imports: [NgFor, NgIf, SplitterBarComponent, DraggableDirective, NgStyle, NgClass]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.SplitterService }, { type: i2.LocalizationService }, { type: i0.Renderer2 }, { type: i3.SplitterPaneComponent, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.SplitterService }, { type: i2.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.SplitterPaneComponent, decorators: [{
                     type: Optional
                 }, {
                     type: Host
@@ -235,6 +291,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], resizeStep: [{
                 type: Input
+            }], splitterBarClass: [{
+                type: Input
             }], layoutChange: [{
                 type: Output
             }], hostClasses: [{

package/{esm2020 → esm2022}/splitter/splitter.service.mjs

@@ -2,20 +2,23 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { isDevMode, EventEmitter, NgZone, Injectable } from '@angular/core';
-import { Keys } from '@progress/kendo-angular-common';
+import { EventEmitter, NgZone, Injectable } from '@angular/core';
+import { isDocumentAvailable, Keys } from '@progress/kendo-angular-common';
 import { shouldTogglePrev, shouldToggleNext } from './util';
 import * as i0 from "@angular/core";
-const SIZING_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/layout/splitter/panes/#toc-size';
+const MAX_PANE_HEIGHT = 33554400;
 /**
  * @hidden
  */
 export class SplitterService {
+    zone;
+    panes;
+    splitterBars;
+    layoutChange = new EventEmitter();
+    resizeStep = 10;
+    fixedHeight;
     constructor(zone) {
         this.zone = zone;
-        this.layoutChange = new EventEmitter();
-        this.resizeStep = 10;
-        this.containerSize = () => { };
     }
     tryToggle(paneIndex) {
         const pane = this.pane(paneIndex);
@@ -79,10 +82,10 @@ export class SplitterService {
     }
     setSize(state, delta) {
         const clamp = (min, max, v) => Math.min(max, Math.max(min, v));
-        const resize = (paneState, change) => {
+        const resize = (paneState, change, modifyMax = false) => {
             const pane = this.pane(paneState.index);
             const splitterSize = this.containerSize();
-            const newSize = clamp(paneState.min, paneState.max, paneState.initialSize + change);
+            const newSize = clamp(paneState.min, modifyMax ? MAX_PANE_HEIGHT : paneState.max, paneState.initialSize + change);
             let size = "";
             if (this.isPercent(pane.size)) {
                 size = (100 * newSize / splitterSize) + "%";
@@ -94,26 +97,56 @@ export class SplitterService {
             pane.isResized = true;
             this.emit(pane.sizeChange, size);
         };
-        // resizing both panes
-        resize(state.prev, delta);
-        resize(state.next, -delta);
+        const prevPane = this.pane(state.prev.index);
+        const nextPane = this.pane(state.next.index);
+        const canResizeBothPanes = this.panes.length > 2;
+        const modifyPrevMax = prevPane.orientation === 'vertical' && !this.fixedHeight && !prevPane.max;
+        const modifyNextMax = prevPane.orientation === 'vertical' && !this.fixedHeight && !nextPane.max;
+        if (prevPane.fixedSize && nextPane.fixedSize || canResizeBothPanes) {
+            const bothVertical = prevPane.orientation === 'vertical' && nextPane.orientation === 'vertical';
+            if (bothVertical) {
+                if (modifyNextMax) {
+                    resize(state.prev, delta, modifyPrevMax);
+                }
+                else if (modifyPrevMax) {
+                    resize(state.next, -delta, modifyNextMax);
+                }
+                else {
+                    resize(state.prev, delta, modifyNextMax);
+                    resize(state.next, -delta, modifyPrevMax);
+                }
+            }
+            else {
+                resize(state.prev, delta);
+                resize(state.next, -delta);
+            }
+        }
+        else if (nextPane.fixedSize || nextPane.collapsible) {
+            resize(state.next, -delta, modifyNextMax);
+        }
+        else {
+            resize(state.prev, delta, modifyPrevMax);
+        }
         this.emit(this.layoutChange, {});
     }
     isDraggable(splitBarIndex) {
         const prev = this.pane(splitBarIndex);
         const next = this.pane(splitBarIndex + 1);
-        const betweenResizablePanes = prev.resizable && next.resizable;
-        const nearCollapsedPane = prev.collapsed || next.collapsed;
+        const betweenResizablePanes = prev?.resizable && next?.resizable;
+        const nearCollapsedPane = prev?.collapsed || next?.collapsed;
         return betweenResizablePanes && !nearCollapsedPane;
     }
     isStatic(splitBarIndex) {
         const prev = this.pane(splitBarIndex);
         const next = this.pane(splitBarIndex + 1);
-        const betweenResizablePanes = prev.resizable && next.resizable;
-        const nearCollapsiblePane = prev.collapsible || next.collapsible;
+        const betweenResizablePanes = prev?.resizable && next?.resizable;
+        const nearCollapsiblePane = prev?.collapsible || next?.collapsible;
         return !betweenResizablePanes && !nearCollapsiblePane;
     }
     pane(index) {
+        if (!isDocumentAvailable()) {
+            return;
+        }
         if (!this.panes) {
             throw new Error("Panes not initialized");
         }
@@ -122,25 +155,33 @@ export class SplitterService {
         }
         return this.panes[index];
     }
+    paneByIndex(pane) {
+        if (!this.panes) {
+            return -1;
+        }
+        return this.panes.findIndex(splitterPane => splitterPane === pane);
+    }
+    getPaneSplitterBar(pane) {
+        if (!this.splitterBars) {
+            return;
+        }
+        const paneIndex = this.paneByIndex(pane);
+        if (paneIndex < 0 || paneIndex >= this.splitterBars.length) {
+            return null;
+        }
+        return this.splitterBars[paneIndex];
+    }
     configure({ panes, orientation, containerSize, direction }) {
         this.panes = panes;
         this.panes.forEach((pane, index) => {
             pane.order = index * 2;
             pane.orientation = orientation;
         });
-        if (isDevMode()) {
-            const allPanesWithSize = panes.length && !panes.some(pane => !pane.fixedSize);
-            const hasResizedPane = panes.length && panes.some(pane => pane.isResized);
-            if (allPanesWithSize && !hasResizedPane) {
-                throw new Error(`
-                    The Splitter should have at least one pane without a set size.
-                    See ${SIZING_DOC_LINK} for more information.
-                `);
-            }
-        }
         this.containerSize = containerSize;
         this.rtl = direction === 'rtl';
     }
+    containerSize = () => { };
+    rtl;
     isPercent(size) {
         return /%$/.test(size);
     }
@@ -156,9 +197,9 @@ export class SplitterService {
             this.zone.run(() => emitter.emit(args));
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitterService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitterService });
 }
-SplitterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-SplitterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });

package/{esm2020 → esm2022}/splitter.module.mjs

@@ -17,11 +17,11 @@ import * as i2 from "./splitter/splitter-pane.component";
  * - `SplitterPaneComponent`—The `SplitterPane` component class.
  */
 export class SplitterModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SplitterModule, imports: [i1.SplitterComponent, i2.SplitterPaneComponent], exports: [i1.SplitterComponent, i2.SplitterPaneComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitterModule, imports: [i1.SplitterComponent] });
 }
-SplitterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SplitterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SplitterModule, imports: [i1.SplitterComponent, i2.SplitterPaneComponent], exports: [i1.SplitterComponent, i2.SplitterPaneComponent] });
-SplitterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterModule, imports: [KENDO_SPLITTER] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitterModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_SPLITTER],

package/{esm2020 → esm2022}/stacklayout.module.mjs

@@ -12,11 +12,11 @@ import * as i1 from "./layouts/stack-layout.component";
  * definition for the StackLayout component.
  */
 export class StackLayoutModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StackLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: StackLayoutModule, imports: [i1.StackLayoutComponent], exports: [i1.StackLayoutComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StackLayoutModule });
 }
-StackLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StackLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-StackLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: StackLayoutModule, imports: [i1.StackLayoutComponent], exports: [i1.StackLayoutComponent] });
-StackLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StackLayoutModule, imports: [KENDO_STACKLAYOUT] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StackLayoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StackLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_STACKLAYOUT],

package/{esm2020 → esm2022}/stepper/events/activate-event.mjs

@@ -7,6 +7,22 @@ import { PreventableEvent } from '@progress/kendo-angular-common';
  * Arguments for the `activate` event of the Stepper.
  */
 export class StepperActivateEvent extends PreventableEvent {
+    /**
+     * The index of the activated step in the `steps` collection.
+     */
+    index;
+    /**
+     * The activated step.
+     */
+    step;
+    /**
+     * The DOM event that triggered the step activation.
+     */
+    originalEvent;
+    /**
+     * The Stepper that triggered the event.
+     */
+    sender;
     /**
      * @hidden
      */

package/{esm2020 → esm2022}/stepper/list.component.mjs

@@ -15,13 +15,31 @@ 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;
-        this.listKeydown = new EventEmitter();
-        this.listClick = new EventEmitter();
     }
     ngOnInit() {
         this.initDomEvents();
@@ -91,10 +109,10 @@ export class StepperListComponent {
             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"] }] });
 }
-StepperListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.StepperService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-StepperListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: StepperListComponent, decorators: [{
+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

package/{esm2020 → esm2022}/stepper/localization/custom-messages.component.mjs

@@ -12,6 +12,7 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * ([see example]({% slug rtl_layout %})).
  */
 export class StepperCustomMessagesComponent extends StepperMessages {
+    service;
     constructor(service) {
         super();
         this.service = service;
@@ -19,15 +20,15 @@ export class StepperCustomMessagesComponent extends StepperMessages {
     get override() {
         return true;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepperCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StepperCustomMessagesComponent, isStandalone: true, selector: "kendo-stepper-messages", providers: [
+            {
+                provide: StepperMessages,
+                useExisting: forwardRef(() => StepperCustomMessagesComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-StepperCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-StepperCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: StepperCustomMessagesComponent, isStandalone: true, selector: "kendo-stepper-messages", providers: [
-        {
-            provide: StepperMessages,
-            useExisting: forwardRef(() => StepperCustomMessagesComponent)
-        }
-    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepperCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [

package/{esm2020 → esm2022}/stepper/localization/localized-messages.directive.mjs

@@ -11,19 +11,20 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export class LocalizedStepperMessagesDirective extends StepperMessages {
+    service;
     constructor(service) {
         super();
         this.service = service;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedStepperMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedStepperMessagesDirective, isStandalone: true, selector: "\n      [kendoStepperLocalizedMessages]\n    ", providers: [
+            {
+                provide: StepperMessages,
+                useExisting: forwardRef(() => LocalizedStepperMessagesDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 });
 }
-LocalizedStepperMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedStepperMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedStepperMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedStepperMessagesDirective, isStandalone: true, selector: "\n      [kendoStepperLocalizedMessages]\n    ", providers: [
-        {
-            provide: StepperMessages,
-            useExisting: forwardRef(() => LocalizedStepperMessagesDirective)
-        }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedStepperMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedStepperMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [

package/{esm2020 → esm2022}/stepper/localization/messages.mjs

@@ -9,10 +9,14 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class StepperMessages extends ComponentMessages {
+    /**
+     * The optional text.
+     */
+    optional;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepperMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: StepperMessages, selector: "kendo-stepper-messages-base", inputs: { optional: "optional" }, usesInheritance: true, ngImport: i0 });
 }
-StepperMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-StepperMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: StepperMessages, selector: "kendo-stepper-messages-base", inputs: { optional: "optional" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperMessages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepperMessages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector