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

package/esm2022/splitter/splitter-pane.component.mjs

@@ -10,6 +10,18 @@ import * as i0 from "@angular/core";
 import * as i1 from "./splitter.service";
 /**
  * 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 class SplitterPaneComponent {
     element;
@@ -27,9 +39,9 @@ export class SplitterPaneComponent {
         return this._order;
     }
     /**
-     * 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) {
         this._size = newSize;
@@ -41,9 +53,9 @@ export class SplitterPaneComponent {
         return this._size;
     }
     /**
-     * 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) {
         this._splitterBarAttributes = attributes;
@@ -56,34 +68,42 @@ export class SplitterPaneComponent {
         return this._splitterBarAttributes;
     }
     /**
-     * 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;
     /**
-     * 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;
     /**
-     * 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;
     /**
-     * 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 = true;
     /**
-     * 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 = false;
     /**
-     * Specifies if overflowing content is scrollable or hidden.
+     * Determines if overflowing content is scrollable or hidden.
+     *
+     * @default true
      */
     scrollable = true;
     /**
-     * Specifies if the pane is initially collapsed.
+     * Determines if the pane is initially collapsed.
+     *
+     * @default false
      */
     collapsed = false;
     /**
@@ -106,15 +126,15 @@ export class SplitterPaneComponent {
      */
     overlayContent = false;
     /**
-     * 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 = new EventEmitter();
     /**
-     * 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 = new EventEmitter();
     get isHidden() {

package/esm2022/splitter/splitter.component.mjs

@@ -17,41 +17,23 @@ 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';
+const SIZING_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/layout/splitter/panes/#specifying-the-dimensions';
 /**
  * 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 class SplitterComponent {
     element;
@@ -61,17 +43,20 @@ export class SplitterComponent {
     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.
+     * Defines the orientation of the panes within the Splitter.
+     * Use `horizontal` to place panes horizontally or `vertical` to place them vertically.
+     *
+     * @default 'horizontal'
      */
     orientation = 'horizontal';
     /**
-     * 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;
     /**
-     * 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) {
@@ -81,14 +66,13 @@ export class SplitterComponent {
         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']).
+     * Defines the CSS classes that are rendered on the splitter bars.
+     * Supports the same values as [`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.
+     * Fires when the layout of the Splitter changes.
+     * Use this event to trigger layout calculations on components that are positioned inside the panes.
      */
     layoutChange;
     get hostClasses() {

package/esm2022/splitter.module.mjs

@@ -9,12 +9,20 @@ import * as i1 from "./splitter/splitter.component";
 import * as i2 from "./splitter/splitter-pane.component";
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * 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 class SplitterModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });

package/esm2022/stacklayout.module.mjs

@@ -8,8 +8,20 @@ import * as i0 from "@angular/core";
 import * as i1 from "./layouts/stack-layout.component";
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * 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 class StackLayoutModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StackLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });

package/esm2022/stepper/events/activate-event.mjs

@@ -4,23 +4,23 @@
 *-------------------------------------------------------------------------------------------*/
 import { PreventableEvent } from '@progress/kendo-angular-common';
 /**
- * Arguments for the `activate` event of the Stepper.
+ * Represents the arguments for the `activate` event of the Stepper.
  */
 export 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;
     /**
-     * The activated step.
+     * Specifies the activated step.
      */
     step;
     /**
-     * The DOM event that triggered the step activation.
+     * Specifies the DOM event that triggered the step activation.
      */
     originalEvent;
     /**
-     * The Stepper that triggered the event.
+     * Specifies the Stepper that triggered the event.
      */
     sender;
     /**

package/esm2022/stepper/localization/custom-messages.component.mjs

@@ -8,8 +8,16 @@ import { StepperMessages } from './messages';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
- * 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 class StepperCustomMessagesComponent extends StepperMessages {
     service;

package/esm2022/stepper/localization/messages.mjs

@@ -10,7 +10,7 @@ import * as i0 from "@angular/core";
  */
 export class StepperMessages extends ComponentMessages {
     /**
-     * The optional text.
+     * Specifies 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 });

package/esm2022/stepper/stepper.component.mjs

@@ -21,20 +21,22 @@ const DEFAULT_ANIMATION_DURATION = 400;
  * Represents the [Kendo UI Stepper component for Angular]({% slug overview_stepper %}).
  *
  * @example
- * ```ts-preview
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-stepper [steps]="steps">
- *        </kendo-stepper>
- *    `
+ * ```ts
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-stepper [steps]="steps">
+ *     </kendo-stepper>
+ *   `
  * })
  * class AppComponent {
- *    public steps: Array<StepperStep> = [
- *      { label: 'Step One' }, { label: 'Step Two' }, { label: 'Step Three' }
- *    ];
+ *   public steps: Array<StepperStep> = [
+ *     { label: 'Step One' }, { label: 'Step Two' }, { label: 'Step Three' }
+ *   ];
  * }
  * ```
+ * @remarks
+ * Supported children components are: {@link StepperCustomMessagesComponent}.
  */
 export class StepperComponent {
     renderer;
@@ -51,10 +53,7 @@ export class StepperComponent {
     /**
      * Specifies the type of the steps in the Stepper.
      *
-     * The possible values are:
-     * * (Default) `indicator`
-     * * `label`
-     * * `full`
+     * @default 'indicator'
      */
     stepType = 'indicator';
     /**
@@ -67,13 +66,11 @@ export class StepperComponent {
      * Specifies the orientation of the Stepper
      * ([see example]({% slug orientation_stepper %})).
      *
-     * The possible values are:
-     * * (Default) `horizontal`
-     * * `vertical`
+     * @default 'horizontal'
      */
     orientation = 'horizontal';
     /**
-     * The index of the current step.
+     * Specifies the index of the current step.
      */
     set currentStep(value) {
         this.stepperService.currentStep = value;
@@ -82,8 +79,8 @@ export class StepperComponent {
         return this.stepperService.currentStep;
     }
     /**
-     * The collection of steps that will be rendered in the Stepper.
-     * ([see example]({% slug step_appearance_stepper %}))
+     * Specifies the collection of steps that will be rendered in the Stepper
+     * ([see example]({% slug step_appearance_stepper %})).
      */
     set steps(steps) {
         if (isPresent(steps) && steps.length > 0) {
@@ -94,8 +91,8 @@ export class StepperComponent {
         return this._steps;
     }
     /**
-     * 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.
      */
     set svgIcon(icon) {
         this._svgIcon = icon;
@@ -104,42 +101,38 @@ export class StepperComponent {
         return this._svgIcon;
     }
     /**
-     * Defines an SVGIcon to be rendered for the success icon.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Specifies an SVG icon to be rendered for the success icon.
+     * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     successSVGIcon;
     /**
-     * Defines an SVGIcon to be rendered for the error icon.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Specifies an SVG icon to be rendered for the error icon.
+     * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     errorSVGIcon;
     /**
-     * Specifies a custom icon that will be rendered inside the step
-     * for valid previous steps.
+     * Specifies an SVG icon that will be rendered inside the step for valid previous steps.
+     * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     successIcon;
     /**
-     * Specifies a custom icon that will be rendered inside the step
-     * for invalid previous steps.
-     */
+    * Specifies an SVG icon that will be rendered inside the step for invalid previous steps.
+    * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+    */
     errorIcon;
     /**
-     * Specifies the duration of the progress indicator animation in milliseconds. Defaults to `400ms`.
+     * Specifies the duration of the progress indicator animation in milliseconds.
      *
-     * The possible values are:
-     *  * Boolean
-     *    * (Default) `true`
-     *    * false
-     *  * Number
+     * @default true
      */
     animation = true;
     /**
-     * Fires when a step is about to be activated. This event is preventable.
+     * Fires when a step is about to be activated. You can prevent this event.
      */
     activate = new EventEmitter();
     /**
      * Fires when the `currentStep` property of the component was updated.
-     * Used to provide a two-way binding for the `currentStep` property.
+     * Use this event to provide a two-way binding for the `currentStep` property.
      */
     currentStepChange = new EventEmitter();
     /**

package/esm2022/stepper/stepper.service.mjs

@@ -29,19 +29,19 @@ handlersRTL[Keys.ArrowRight] = 'left';
  */
 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;
     /**
-     * The activated step.
+     * Specifies the activated step.
      */
     step;
     /**
-     * The DOM event that triggered the step activation.
+     * Specifies the DOM event that triggered the step activation.
      */
     originalEvent;
     /**
-     * The Stepper that triggered the event.
+     * Specifies the Stepper that triggered the event.
      */
     sender;
     /**

package/esm2022/stepper/template-directives/indicator-template.directive.mjs

@@ -5,9 +5,18 @@
 import { Directive, Optional, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Represents a template that defines the content of the Step indicator.
+ * Use this template to define custom content for the step indicator.
  * To define the template, nest an `<ng-template>` tag
  * with the `kendoStepperIndicatorTemplate` directive inside the `<kendo-stepper>` tag.
+ *
+ * @example
+ * ```html
+ * <kendo-stepper>
+ *   <ng-template kendoStepperIndicatorTemplate let-step="step" let-index="index">
+ *     <span>{{ index + 1 }}</span>
+ *   </ng-template>
+ * </kendo-stepper>
+ * ```
  */
 export class StepperIndicatorTemplateDirective {
     templateRef;

package/esm2022/stepper/template-directives/label-template.directive.mjs

@@ -5,9 +5,18 @@
 import { Directive, Optional, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Represents a template that defines the content of the Step label.
+ * Use this template to define custom content for the step label.
  * To define the template, nest an `<ng-template>` tag
  * with the `kendoStepperLabelTemplate` directive inside the `<kendo-stepper>` tag.
+ *
+ * @example
+ * ```html
+ * <kendo-stepper>
+ *   <ng-template kendoStepperLabelTemplate let-step="step" let-index="index">
+ *     <span class="custom-label">{{ step.label }}</span>
+ *   </ng-template>
+ * </kendo-stepper>
+ * ```
  */
 export class StepperLabelTemplateDirective {
     templateRef;

package/esm2022/stepper/template-directives/step-template.directive.mjs

@@ -5,9 +5,20 @@
 import { Directive, Optional, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Represents a template that defines the content of the whole Step.
+ * Use this template to define custom content for the entire step.
  * To define the template, nest an `<ng-template>` tag
  * with the `kendoStepperStepTemplate` directive inside the `<kendo-stepper>` tag.
+ *
+ * @example
+ * ```html
+ * <kendo-stepper>
+ *   <ng-template kendoStepperStepTemplate let-step="step" let-index="index">
+ *     <div class="custom-step">
+ *       <span>{{ step.label }}</span>
+ *     </div>
+ *   </ng-template>
+ * </kendo-stepper>
+ * ```
  */
 export class StepperStepTemplateDirective {
     templateRef;

package/esm2022/stepper.module.mjs

@@ -12,8 +12,20 @@ import * as i4 from "./stepper/template-directives/label-template.directive";
 import * as i5 from "./stepper/template-directives/step-template.directive";
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the Stepper component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Stepper component.
+ *
+ * Use this module to add the Stepper component to your NgModule-based Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { StepperModule } from '@progress/kendo-angular-layout';
+ * import { NgModule } from '@angular/core';
+ *
+ * @NgModule({
+ *   imports: [StepperModule]
+ * })
+ * export class AppModule { }
+ * ```
  */
 export class StepperModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });

package/esm2022/tabstrip/directives/tab-content.directive.mjs

@@ -6,32 +6,20 @@ import { Directive, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Represents the content template of the Kendo UI TabStrip.
- * To define the template, nest a `<ng-template>` tag with the `kendoTabContent` inside the component tag.
+ * To define the template, nest an `<ng-template>` tag with the `kendoTabContent` directive inside the component tag.
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *         <kendo-tabstrip [ngStyle]="{'width': '400px'}" [animate]="true">
- *           <kendo-tabstrip-tab title="Paris" [selected]="true">
- *             <ng-template kendoTabContent>
- *               <h3>Content 1</h3>
- *             </ng-template>
- *           </kendo-tabstrip-tab>
- *
- *           <kendo-tabstrip-tab title="Sofia">
- *             <ng-template kendoTabContent>
- *               <h3>Content 2</h3>
- *             </ng-template>
- *           </kendo-tabstrip-tab>
- *         </kendo-tabstrip>
- *     `
- * })
- *
- * class AppComponent {}
- *
+ * ```html
+ * <kendo-tabstrip>
+ *   <kendo-tabstrip-tab title="First Tab">
+ *     <ng-template kendoTabContent>
+ *       <div class="tab-content">
+ *         <h2>Welcome</h2>
+ *         <p>This is the content of the first tab.</p>
+ *       </div>
+ *     </ng-template>
+ *   </kendo-tabstrip-tab>
+ * </kendo-tabstrip>
  * ```
  */
 export class TabContentDirective {