@progress/kendo-angular-layout 19.1.2-develop.4 → 19.1.2-develop.5

package/panelbar/panelbar.component.d.ts

@@ -12,38 +12,60 @@ import { PanelBarItemTemplateDirective } from "./panelbar-item-template.directiv
 import { PanelBarSelectEvent, PanelBarExpandEvent, PanelBarCollapseEvent, PanelBarStateChangeEvent, PanelBarItemClickEvent } from './events';
 import * as i0 from "@angular/core";
 /**
- * Represents the [Kendo UI PanelBar component for Angular]({% slug overview_panelbar %}).
+ * Represents the Kendo UI PanelBar component for Angular.
+ * Displays hierarchical data as an expandable and collapsible accordion-style interface ([see overview]({% slug overview_panelbar %})).
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-panelbar [items]="items" expandMode="single">
+ *     </kendo-panelbar>
+ *   `
+ * })
+ * class AppComponent {
+ *   items = [
+ *     { title: 'Item 1', expanded: true, content: 'Content 1' },
+ *     { title: 'Item 2', content: 'Content 2' }
+ *   ];
+ * }
+ * ```
+ * @remarks
+ * Supported children components are: {@link PanelBarItemComponent}.
  */
 export declare class PanelBarComponent implements AfterViewChecked, OnChanges, OnInit, OnDestroy {
     private localization;
     /**
      * Sets the expand mode of the PanelBar through the `PanelBarExpandMode` enum ([see example]({% slug expandmodes_panelbar %})).
      *
-     * The available modes are:
-     * - `"single"`&mdash;Expands only one item at a time. Expanding an item collapses the item that was previously expanded.
-     * - `"multiple"`&mdash;The default mode of the PanelBar.
-     * Expands more than one item at a time. Items can also be toggled.
-     * - `"full"`&mdash;Expands only one item at a time.
-     * The expanded area occupies the entire height of the PanelBar. Requires you to set the `height` property.
+     * @default 'multiple
      */
     expandMode: PanelBarExpandMode;
     /**
      * Allows the PanelBar to modify the selected state of the items.
+     *
+     * @default true
      */
     selectable: boolean;
     /**
      * Sets the animate state of the PanelBar ([see example]({% slug animations_panelbar %})).
+     *
+     * @default true
      */
     animate: boolean;
     /**
      * Sets the height of the component when the `"full"` expand mode is used.
-     * This option is ignored in the `"multiple"` and `"single"` expand modes.
+     * This option is ignored when the `"multiple"` or `"single"` expand modes are used.
+     *
+     * @default '400px'
      */
     height: any;
     /**
      * When set to `true`, the PanelBar renders the content of all items and they are persisted in the DOM
      * ([see example]({% slug templates_panelbar %}#toc-collections)).
-     * By default, this option is set to `false`.
+     *
+     * @default false
      */
     get keepItemContent(): boolean;
     set keepItemContent(keepItemContent: boolean);
@@ -54,31 +76,32 @@ export declare class PanelBarComponent implements AfterViewChecked, OnChanges, O
     set items(data: Array<PanelBarItemModel>);
     get items(): Array<PanelBarItemModel>;
     /**
-     * Fires each time the user interacts with a PanelBar item
+     * Fires when the state of the PanelBar changes.
+     * This event is triggered when an item is selected, expanded, or collapsed.
      * ([see example](slug:routing_panelbar#using-router-service)).
      * The event data contains a collection of all items that are modified.
      */
     stateChange: EventEmitter<PanelBarStateChangeEvent>;
     /**
      * Fires when an item is about to be selected.
-     * ([see example]({% slug events_panelbar %}))
-     * This event is preventable. If you cancel it, the item will not be selected.
+     * This event is preventable. If you cancel it, the item will not be selected
+     * ([see example]({% slug events_panelbar %})).
      */
     select: EventEmitter<PanelBarSelectEvent>;
     /**
      * Fires when an item is about to be expanded.
-     * ([see example]({% slug events_panelbar %}))
-     * This event is preventable. If you cancel it, the item will remain collapsed.
+     * This event is preventable. If you cancel it, the item will remain collapsed
+     * ([see example]({% slug events_panelbar %})).
      */
     expand: EventEmitter<PanelBarExpandEvent>;
     /**
      * Fires when an item is about to be collapsed.
-     * ([see example]({% slug events_panelbar %}))
-     * This event is preventable. If you cancel it, the item will remain expanded.
+     * This event is preventable. If you cancel it, the item will remain expanded
+     * ([see example]({% slug events_panelbar %})).
      */
     collapse: EventEmitter<PanelBarCollapseEvent>;
     /**
-     * Fires when the user clicks an item ([see example]({% slug events_panelbar %})).
+     * Fires when an item is clicked ([see example]({% slug events_panelbar %})).
      */
     itemClick: EventEmitter<PanelBarItemClickEvent>;
     hostClasses: boolean;

package/panelbar.module.d.ts

@@ -9,15 +9,20 @@ import * as i3 from "./panelbar/panelbar-content.directive";
 import * as i4 from "./panelbar/panelbar-item-template.directive";
 import * as i5 from "./panelbar/panelbar-item-title.directive";
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the PanelBar component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the PanelBar component.
  *
- * The module registers:
- * - `PanelBarComponent`—The `PanelBar` component class.
- * - `PanelBarItemComponent`—The `PanelBarItem` component class.
- * - `PanelBarContentComponent`—The `PanelBarContent` component class.
- * - `PanelBarItemTemplateDirective—The `PanelBarItemTemplate` directive.
- * - `PanelBarItemTitleDirective—The `PanelBarItemTitle` directive.
+ * Use this module to add the PanelBar component to your NgModule-based Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { PanelBarModule } from '@progress/kendo-angular-layout';
+ * import { NgModule } from '@angular/core';
+ *
+ * @NgModule({
+ *   imports: [PanelBarModule]
+ * })
+ * export class AppModule { }
+ * ```
  */
 export declare class PanelBarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<PanelBarModule, never>;

package/splitter/splitter-pane.component.d.ts

@@ -8,6 +8,18 @@ import { SplitterService } from './splitter.service';
 import * as i0 from "@angular/core";
 /**
  * Represents the pane component of the Splitter.
+ *
+ * @example
+ * ```html
+ * <kendo-splitter>
+ *   <kendo-splitter-pane size="30%" [collapsible]="true">
+ *     Left pane content
+ *   </kendo-splitter-pane>
+ *   <kendo-splitter-pane>
+ *     Right pane content
+ *   </kendo-splitter-pane>
+ * </kendo-splitter>
+ * ```
  */
 export declare class SplitterPaneComponent implements AfterViewChecked {
     element: ElementRef<HTMLElement>;
@@ -20,16 +32,16 @@ export declare class SplitterPaneComponent implements AfterViewChecked {
     set order(paneOrder: number);
     get order(): number;
     /**
-     * Sets the initial size of the pane.
-     * Accepts units in pixel and percentage values.
-     * Has to be between the `min` and `max` properties.
+     * Defines the initial size of the pane.
+     * Accepts values in pixels and percentages.
+     * The value must be between the `min` and `max` properties.
      */
     set size(newSize: string);
     get size(): string;
     /**
-     * Sets the HTML attributes of the splitter bar.
-     * The property accepts string key-value based pairs.
-     * Attributes which are essential for certain functionalities cannot be changed.
+     * Defines the HTML attributes of the splitter bar.
+     * Accepts string key-value pairs.
+     * You cannot change attributes that are essential for certain functionalities.
      */
     set splitterBarAttributes(attributes: {
         [key: string]: string;
@@ -38,34 +50,42 @@ export declare class SplitterPaneComponent implements AfterViewChecked {
         [key: string]: string;
     };
     /**
-     * The CSS classes that will be rendered on the splitter bar.
-     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     * Defines the CSS classes that are rendered on the splitter bar.
+     * Supports the same values as [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
     splitterBarClass: string | Array<string> | Object;
     /**
-     * Sets the minimum possible size of the pane.
-     * Accepts units in pixel and percentage values.
+     * Defines the minimum possible size of the pane.
+     * Accepts values in pixels and percentages.
      */
     min: string;
     /**
-     * Sets the maximum possible size of the pane.
-     * Accepts units in pixel and percentage values.
+     * Defines the maximum possible size of the pane.
+     * Accepts values in pixels and percentages.
      */
     max: string;
     /**
-     * Specifies if the user is allowed to resize the pane and provide space for other panes.
+     * Determines if you can resize the pane and provide space for other panes.
+     *
+     * @default true
      */
     resizable: boolean;
     /**
-     * Specifies if the user is allowed to hide the pane and provide space for other panes.
+     * Determines if you can hide the pane and provide space for other panes.
+     *
+     * @default false
      */
     collapsible: boolean;
     /**
-     * Specifies if overflowing content is scrollable or hidden.
+     * Determines if overflowing content is scrollable or hidden.
+     *
+     * @default true
      */
     scrollable: boolean;
     /**
-     * Specifies if the pane is initially collapsed.
+     * Determines if the pane is initially collapsed.
+     *
+     * @default false
      */
     collapsed: boolean;
     /**
@@ -81,15 +101,15 @@ export declare class SplitterPaneComponent implements AfterViewChecked {
      */
     overlayContent: boolean;
     /**
-     * Fires each time the user resizes the Splitter pane.
+     * Fires when the Splitter pane size changes.
      * The event data contains the new pane size.
-     * Allows a two-way binding of the pane `size` property.
+     * Enables two-way binding of the pane `size` property.
      */
     sizeChange: EventEmitter<string>;
     /**
-     * Fires each time the `collapsed` property changes.
+     * Fires when the Splitter pane collapses or expands.
      * The event data contains the new property state.
-     * Allows a two-way binding of the `collapsed` pane property.
+     * Enables two-way binding of the `collapsed` pane property.
      */
     collapsedChange: EventEmitter<boolean>;
     get isHidden(): boolean;

package/splitter/splitter.component.d.ts

@@ -12,37 +12,19 @@ import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI Splitter component for Angular]({% slug overview_splitter %}).
  *
- * ```ts-preview
- *
- *  @Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-splitter [style.height.px]="280">
- *
- *          <kendo-splitter-pane [collapsible]="true" size="30%">
- *            <h3>Inner splitter / left pane</h3>
- *            <p>Resizable and collapsible.</p>
- *          </kendo-splitter-pane>
- *
- *          <kendo-splitter-pane>
- *            <h3>Inner splitter / center pane</h3>
- *            <p>Resizable only.</p>
- *          </kendo-splitter-pane>
- *
- *          <kendo-splitter-pane [collapsible]="true" size="30%">
- *            <h3>Inner splitter / right pane</h3>
- *            <p>Resizable and collapsible.</p>
- *          </kendo-splitter-pane>
- *
- *        </kendo-splitter>
- *      `,
- *    styles: [ `
- *        h3 { font-size: 1.2em; }
- *        h3, p { margin: 10px; padding: 0; }
- *    ` ]
- *  })
- *  class AppComponent {}
+ * @example
+ * ```html
+ * <kendo-splitter [style.height.px]="280">
+ *   <kendo-splitter-pane [collapsible]="true" size="30%">
+ *     <h3>Left pane</h3>
+ *   </kendo-splitter-pane>
+ *   <kendo-splitter-pane>
+ *     <h3>Right pane</h3>
+ *   </kendo-splitter-pane>
+ * </kendo-splitter>
  * ```
+ * @remarks
+ * Supported children components are: {@link SplitterPaneComponent}.
  */
 export declare class SplitterComponent implements AfterContentInit {
     protected element: ElementRef<HTMLElement>;
@@ -52,30 +34,32 @@ export declare class SplitterComponent implements AfterContentInit {
     private ngZone;
     private 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.
+     * Defines the orientation of the panes within the Splitter.
+     * Use `horizontal` to place panes horizontally or `vertical` to place them vertically.
+     *
+     * @default 'horizontal'
      */
     orientation: Orientation;
     /**
-     * Sets the width or height (depending on the orientation) of the Splitter splitbars in pixels.
+     * Defines the width or height of the Splitter splitbars in pixels.
+     * The dimension depends on the orientation of the Splitter.
      */
     splitbarWidth: number;
     /**
-     * The distance in pixels that the separator is moved with during keyboard navigation.
+     * Defines the distance in pixels that you move the separator during keyboard navigation.
+     *
      * @default 10
      */
     set resizeStep(value: number);
     get resizeStep(): number;
     /**
-     * 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']).
+     * Defines the CSS classes that are rendered on the splitter bars.
+     * Supports the same values as [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
     splitterBarClass: string | Array<string> | Object;
     /**
-     * Fires after a Splitter pane is resized or collapsed.
-     * Useful for triggering layout calculations on components
-     * which are positioned inside the panes.
+     * Fires when the layout of the Splitter changes.
+     * Use this event to trigger layout calculations on components that are positioned inside the panes.
      */
     layoutChange: EventEmitter<string>;
     get hostClasses(): boolean;

package/splitter.module.d.ts

@@ -6,12 +6,20 @@ import * as i0 from "@angular/core";
 import * as i1 from "./splitter/splitter.component";
 import * as i2 from "./splitter/splitter-pane.component";
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the Splitter component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Splitter component.
  *
- * The module registers:
- * - `SplitterComponent`—The `Splitter` component class.
- * - `SplitterPaneComponent`—The `SplitterPane` component class.
+ * Use this module to add the Splitter component to your NgModule-based Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { SplitterModule } from '@progress/kendo-angular-layout';
+ * import { NgModule } from '@angular/core';
+ *
+ * @NgModule({
+ *   imports: [SplitterModule]
+ * })
+ * export class AppModule { }
+ * ```
  */
 export declare class SplitterModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SplitterModule, never>;

package/stacklayout.module.d.ts

@@ -5,8 +5,20 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./layouts/stack-layout.component";
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the StackLayout component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the StackLayout component.
+ *
+ * Use this module to add the StackLayout component to your NgModule-based Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { StackLayoutModule } from '@progress/kendo-angular-layout';
+ * import { NgModule } from '@angular/core';
+ *
+ * @NgModule({
+ *   imports: [StackLayoutModule]
+ * })
+ * export class AppModule { }
+ * ```
  */
 export declare class StackLayoutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<StackLayoutModule, never>;

package/stepper/events/activate-event.d.ts

@@ -5,23 +5,23 @@
 import { PreventableEvent } from '@progress/kendo-angular-common';
 import { StepperComponent } from './../stepper.component';
 /**
- * Arguments for the `activate` event of the Stepper.
+ * Represents the arguments for the `activate` event of the Stepper.
  */
 export declare class StepperActivateEvent extends PreventableEvent {
     /**
-     * The index of the activated step in the `steps` collection.
+     * Specifies the index of the activated step in the `steps` collection.
      */
     index: number;
     /**
-     * The activated step.
+     * Specifies the activated step.
      */
     step: any;
     /**
-     * The DOM event that triggered the step activation.
+     * Specifies the DOM event that triggered the step activation.
      */
     originalEvent: any;
     /**
-     * The Stepper that triggered the event.
+     * Specifies the Stepper that triggered the event.
      */
     sender: StepperComponent;
     /**

package/stepper/localization/custom-messages.component.d.ts

@@ -6,8 +6,16 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { StepperMessages } from './messages';
 import * as i0 from "@angular/core";
 /**
- * Custom component messages override default component messages
+ * Provides custom component messages that override default component messages
  * ([see example]({% slug rtl_layout %})).
+ *
+ * ```html
+ * <kendo-stepper>
+ *   <kendo-stepper-messages
+ *     optional="Optional step"
+ *   ></kendo-stepper-messages>
+ * </kendo-stepper>
+ * ```
  */
 export declare class StepperCustomMessagesComponent extends StepperMessages {
     protected service: LocalizationService;

package/stepper/localization/messages.d.ts

@@ -9,7 +9,7 @@ import * as i0 from "@angular/core";
  */
 export declare class StepperMessages extends ComponentMessages {
     /**
-     * The optional text.
+     * Specifies the optional text.
      */
     optional: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<StepperMessages, never>;

package/stepper/models/orientation.d.ts

@@ -6,8 +6,6 @@
  * Specifies the orientation of the Stepper
  * ([see example]({% slug orientation_stepper %})).
  *
- * The possible values are:
- * * (Default) `horizontal`
- * * `vertical`
+ * Use `horizontal` to display steps in a row or `vertical` to display steps in a column.
  */
 export type StepperOrientation = 'horizontal' | 'vertical';

package/stepper/models/step-predicate.d.ts

@@ -3,17 +3,16 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Represents the callback used by the `isValid` and `validate` properties of a [step]({% slug api_layout_stepperstep %}).
+ * Represents the callback function used by the `isValid` and `validate` properties of a [step]({% slug api_layout_stepperstep %}).
  *
- * Receives the index of the step as an argument.
+ * The function receives the index of the step as an argument.
  *
- * We recommend using an arrow function for the callback to capture the `this` execution context of the current class.
+ * Use an arrow function for the callback to capture the `this` execution context of the current class.
  *
- * ```ts-no-run
- * stepCallback = (index: number): boolean => {
+ * ```typescript
+ * public stepCallback = (index: number): boolean => {
  *   return index === 3;
  * }
  * ```
- *
  */
 export type StepPredicateFn = (stepIndex: number) => boolean;

package/stepper/models/step-type.d.ts

@@ -6,9 +6,6 @@
  * Specifies the type of the steps
  * ([see example]({% slug orientation_stepper %})).
  *
- * The possible values are:
- * * (Default) `indicator`
- * * `label`
- * * `full`
+ * Use `indicator` to show only step indicators, `label` to show only step labels, or `full` to show both indicators and labels.
  */
 export type StepType = 'indicator' | 'label' | 'full';

package/stepper/models/stepper-step.interface.d.ts

@@ -5,16 +5,16 @@
 import { SVGIcon } from '@progress/kendo-svg-icons';
 import { StepPredicateFn } from './step-predicate';
 /**
- * An interface for the steps of the Stepper component.
+ * Represents an interface for the steps of the Stepper component.
  */
 export interface StepperStep {
     /**
-     * The CSS classes that will be rendered on the step element of the Stepper.
+     * Specifies the CSS classes that will be rendered on the step element of the Stepper.
      * Supports the type of values that are supported by [ngClass](link:site.data.urls.angular['ngclassapi']).
      */
     cssClass?: any;
     /**
-     * The CSS styles that will be rendered on the item element of the Drawer.
+     * Specifies the CSS styles that will be rendered on the item element of the Drawer.
      * Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
      */
     cssStyle?: any;
@@ -24,7 +24,7 @@ export interface StepperStep {
     disabled?: boolean;
     /**
      * Specifies if a step is valid.
-     * By default only previous steps are validated (This behavior can be overridden by setting the `validate` property).
+     * By default only previous steps are validated. You can override this behavior by setting the `validate` property.
      *
      * ([More information and example]({% slug step_validation_stepper %})).
      */
@@ -36,18 +36,18 @@ export interface StepperStep {
      */
     validate?: boolean | StepPredicateFn;
     /**
-     * Defines the name of an existing icon in a Kendo UI theme.
-     * If provided, the icon will be rendered inside the step indicator by a span.k-icon element, instead of the default numeric or text content.
+     * Specifies the name of an existing icon in a Kendo UI theme.
+     * If you provide this property, the icon will be rendered inside the step indicator by a `span.k-icon` element, instead of the default numeric or text content.
      */
     icon?: string;
     /**
-     * Defines a CSS class or multiple classes separated by spaces which are applied to a span element.
-     * Allows the usage of custom icons, rendered inside the step indicator instead of the default numeric or text content.
+     * Specifies a CSS class or multiple classes separated by spaces which are applied to a `span` element.
+     * Allows you to use custom icons, rendered inside the step indicator instead of the default numeric or text content.
      */
     iconClass?: string;
     /**
-     * Defines an SVG icon to be rendered inside the step indicator instead of the default numeric or text content.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Specifies an SVG icon to be rendered inside the step indicator instead of the default numeric or text content.
+     * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     svgIcon?: SVGIcon;
     /**
@@ -59,8 +59,8 @@ export interface StepperStep {
      */
     optional?: boolean;
     /**
-     * Specifies custom content rendered inside the step indicator.
-     * The numeric step index is rendered by default.
+     * Specifies the text content of the step indicator.
+     * If not set, the step index will be rendered by default.
      */
     text?: string;
 }