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

package/esm2022/layouts/grid-layout.component.mjs

@@ -12,7 +12,23 @@ import { isChanged } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
- * Represents the [Kendo UI GridLayout component for Angular]({% slug overview_gridlayout %}).
+ * Represents the Kendo UI GridLayout component for Angular.
+ * Arranges child components in a two-dimensional grid layout with customizable rows, columns, and gaps ([see overview]({% slug overview_gridlayout %})).
+ *
+ * @example
+ * ```html
+ * <kendo-gridlayout [rows]="[100, 200]" [cols]="['1fr', '2fr']" [gap]="10">
+ *   <kendo-gridlayout-item [row]="1" [col]="1">
+ *     <p>Item 1</p>
+ *   </kendo-gridlayout-item>
+ *   <kendo-gridlayout-item [row]="1" [col]="2">
+ *     <p>Item 2</p>
+ *   </kendo-gridlayout-item>
+ * </kendo-gridlayout>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link GridLayoutItemComponent}.
  */
 export class GridLayoutComponent {
     renderer;
@@ -26,31 +42,22 @@ export class GridLayoutComponent {
      * Specifies the number of rows and their height
      * ([More details](slug:layout_gridlayout#toc-rows-and-columns)).
      *
-     * Accepts an array, which serves two purposes:
-     *
-     * The number of elements in the array defines the number of rows.
-     * Each array element defines the size of the corresponding row. The possible array values are:
-     * * `number` - Defines the size in pixels.
-     * * `string` - Enables the usage of arbitrary units e.g. `20%` or `auto`.
-     * * [GridLayoutRowSize]({% slug api_layout_gridlayoutrowsize %}) - Configuration object, which accepts a `height` key.
+     * You can define rows by passing an array where the number of elements determines the number of rows or each element defines the size of the corresponding row.
+     * For example, you can use CSS units like `px`, `%`, `fr`, or `auto` to define the row sizes.
      */
     rows;
     /**
      * Specifies the number of columns and their widths
      * ([More details](slug:layout_gridlayout#toc-rows-and-columns)).
      *
-     * Accepts an array, which serves two purposes:
-     *
-     * The number of elements in the array defines the number of columns.
-     * Each array element defines the size of the corresponding column. The possible array values are:
-     * * `number` - Defines the size in pixels.
-     * * `string` - Enables the usage of arbitrary units e.g. `20%` or `auto`.
-     * * [GridLayoutColSize]({% slug api_layout_gridlayoutcolsize %}) - Configuration object, which accepts a `width` key.
+     * You can define columns by passing an array where the number of elements determines the number of columns or each element defines the size of the corresponding column.
+     * For example, you can use CSS units like `px`, `%`, `fr`, or `auto` to define the column sizes.
      */
     cols;
     /**
-     * Specifies the gaps between the elements. The default value is `0`
-     * ([see example](slug:layout_gridlayout#toc-gap)).
+     * Specifies the gaps between the elements ([see example](slug:layout_gridlayout#toc-gap)).
+     *
+     * @default 0
      */
     gap = 0;
     /**

package/esm2022/layouts/gridlayout-item.component.mjs

@@ -4,6 +4,16 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, Input, Renderer2, ElementRef } from '@angular/core';
 import * as i0 from "@angular/core";
+/**
+ * Represents the GridLayout item component. Defines the positioning and spanning of individual items within a GridLayout.
+ *
+ * @example
+ * ```html
+ * <kendo-gridlayout-item [row]="1" [col]="2" [rowSpan]="2" [colSpan]="1">
+ *   <div>Grid item content</div>
+ * </kendo-gridlayout-item>
+ * ```
+ */
 export class GridLayoutItemComponent {
     renderer;
     element;
@@ -18,13 +28,15 @@ export class GridLayoutItemComponent {
      */
     col;
     /**
-     * Determines how many rows will the item span. The default size is one row
-     * ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
+     * Specifies how many rows the item spans ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
+     *
+     * @default 1
      */
     rowSpan;
     /**
-     * Determines how many columns will the item span. The default size is one column
-     * ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
+     * Specifies how many columns the item spans ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
+     *
+     * @default 1
      */
     colSpan;
     constructor(renderer, element) {

package/esm2022/layouts/stack-layout.component.mjs

@@ -12,7 +12,17 @@ import { isChanged } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
- * Represents the [Kendo UI StackLayout component for Angular]({% slug overview_stacklayout %}).
+ * Represents the Kendo UI StackLayout component for Angular.
+ * Arranges child components in a single row or column with customizable alignment and spacing ([see overview]({% slug overview_stacklayout %})).
+ *
+ * @example
+ * ```html
+ * <kendo-stacklayout orientation="horizontal" [gap]="16">
+ *   <button class="k-button">Button 1</button>
+ *   <button class="k-button">Button 2</button>
+ *   <button class="k-button">Button 3</button>
+ * </kendo-stacklayout>
+ * ```
  */
 export class StackLayoutComponent {
     renderer;
@@ -40,17 +50,16 @@ export class StackLayoutComponent {
         return this._align;
     }
     /**
-     * Specifies the gap between the inner StackLayout elements. The default value is `0`
-     * ([see example](slug:layout_stacklayout#toc-gap)).
+     * Specifies the gap between the inner StackLayout elements ([see example](slug:layout_stacklayout#toc-gap)).
+     *
+     * @default 0
      */
     gap = 0;
     /**
      * Specifies the orientation of the StackLayout
      * ([see example]({% slug layout_stacklayout %}#toc-orientation)).
      *
-     * The possible values are:
-     * (Default) `horizontal`
-     * `vertical`
+     * @default 'horizontal'
      */
     orientation = 'horizontal';
     _align = {

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1750156917,
-    version: '19.1.2-develop.4',
+    publishDate: 1750430829,
+    version: '19.1.2-develop.5',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/esm2022/panelbar/events/collapse-event.mjs

@@ -4,11 +4,11 @@
 *-------------------------------------------------------------------------------------------*/
 import { PreventableEvent } from '../../common/preventable-event';
 /**
- * Arguments for the `collapse` event of the PanelBar.
+ * Defines the arguments for the `collapse` event of the PanelBar.
  */
 export class PanelBarCollapseEvent extends PreventableEvent {
     /**
-     * The item that will be collapsed.
+     * Defines the item that will be collapsed.
      */
     item;
 }

package/esm2022/panelbar/events/expand-event.mjs

@@ -4,11 +4,11 @@
 *-------------------------------------------------------------------------------------------*/
 import { PreventableEvent } from '../../common/preventable-event';
 /**
- * Arguments for the `expand` event of the PanelBar.
+ * Defines the arguments for the `expand` event of the PanelBar.
  */
 export class PanelBarExpandEvent extends PreventableEvent {
     /**
-     * The item that will be expanded.
+     * Defines the item that will be expanded.
      */
     item;
 }

package/esm2022/panelbar/events/item-click-event.mjs

@@ -3,15 +3,15 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Arguments for the `itemClick` event of the PanelBar.
+ * Defines the arguments for the `itemClick` event of the PanelBar.
  */
 export class PanelBarItemClickEvent {
     /**
-     * The clicked item.
+     * Defines the clicked item.
      */
     item;
     /**
-     * The DOM event that triggered the `itemClick` event.
+     * Defines the DOM event that triggered the `itemClick` event.
      */
     originalEvent;
 }

package/esm2022/panelbar/events/select-event.mjs

@@ -4,11 +4,11 @@
 *-------------------------------------------------------------------------------------------*/
 import { PreventableEvent } from '../../common/preventable-event';
 /**
- * Arguments for the `select` event of the PanelBar.
+ * Defines the arguments for the `select` event of the PanelBar.
  */
 export class PanelBarSelectEvent extends PreventableEvent {
     /**
-     * The item that will be selected.
+     * Defines the item that will be selected.
      */
     item;
 }

package/esm2022/panelbar/events/state-change-event.mjs

@@ -3,11 +3,11 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Arguments for the `stateChange` event of the PanelBar.
+ * Defines the arguments for the `stateChange` event of the PanelBar.
  */
 export class PanelBarStateChangeEvent {
     /**
-     * A collection of all modified items.
+     * Defines a collection of all modified items.
      */
     items;
 }

package/esm2022/panelbar/panelbar-content.directive.mjs

@@ -5,8 +5,19 @@
 import { Directive, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Represents the content template of the declaratively initialized PanelBar items.
+ * Defines the content template of the declaratively initialized PanelBar items.
+ * To define the content template, nest an `<ng-template>` tag
+ * with the `kendoPanelBarContent` directive inside the `<kendo-panelbar-item>` tag.
  * The content can be expanded or collapsed through the item.
+ *
+ * @example
+ * ```html
+ * <kendo-panelbar-item title="Item">
+ *   <div kendoPanelBarContent>
+ *     <p>Item content goes here</p>
+ *   </div>
+ * </kendo-panelbar-item>
+ * ```
  */
 export class PanelBarContentDirective {
     templateRef;

package/esm2022/panelbar/panelbar-expand-mode.mjs

@@ -3,14 +3,13 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Represents the expand modes of the PanelBar.
- * By default, the expand mode is set to `multiple`.
+ * Defines the expand modes of the PanelBar.
  */
 export var PanelBarExpandMode;
 (function (PanelBarExpandMode) {
     /**
      * Allows you to expand only one item at a time.
-     * When you expand an item, the item that was previously expanded is coll.
+     * When you expand an item, the item that was previously expanded is collapsed.
      */
     PanelBarExpandMode[PanelBarExpandMode["Single"] = 0] = "Single";
     /**
@@ -24,7 +23,7 @@ export var PanelBarExpandMode;
      */
     PanelBarExpandMode[PanelBarExpandMode["Multiple"] = 2] = "Multiple";
     /**
-     * By default, the expand mode is set to `multiple`.
+     * The default expand mode set to `multiple`.
      */
     PanelBarExpandMode[PanelBarExpandMode["Default"] = 2] = "Default";
 })(PanelBarExpandMode || (PanelBarExpandMode = {}));

package/esm2022/panelbar/panelbar-item-template.directive.mjs

@@ -5,7 +5,18 @@
 import { Directive, TemplateRef, Optional } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Represents the template directive of the PanelBar which helps to customize the item content.
+ * Defines the template directive of the PanelBar which helps to customize the item content.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoPanelBarItemTemplate` directive inside the `<kendo-panelbar>` tag.
+ *
+ * @example
+ * ```html
+ * <kendo-panelbar>
+ *   <ng-template kendoPanelBarItemTemplate let-dataItem>
+ *     <span>{{ dataItem.title }}</span>
+ *   </ng-template>
+ * </kendo-panelbar>
+ * ```
  */
 export class PanelBarItemTemplateDirective {
     templateRef;

package/esm2022/panelbar/panelbar-item-title.directive.mjs

@@ -5,29 +5,22 @@
 import { Directive, TemplateRef, Optional } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Represents the template directive of the PanelBar which helps to customize the item title
+ * Defines the template directive of the PanelBar which helps to customize the item title
  * ([more information and example]({% slug templates_panelbar %}#toc-customizing-the-appearance-of-the-title)).
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoPanelBarItemTitle` directive inside the `<kendo-panelbar-item>` tag.
  *
- * > The `kendoPanelBarItemTitle` directive overrides the PanelBarItem [title]({% slug api_layout_panelbaritemcomponent %}#toc-title) option.
+ * The `kendoPanelBarItemTitle` directive overrides the PanelBarItem [title]({% slug api_layout_panelbaritemcomponent %}#toc-title) option.
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *        <kendo-panelbar>
- *            <kendo-panelbar-item [expanded]="true">
- *                <ng-template kendoPanelBarItemTitle>
- *                    Item Title
- *                </ng-template>
- *            </kendo-panelbar-item>
- *        </kendo-panelbar>
- *     `
- * })
- *
- * class AppComponent {}
- *
+ * ```html
+ * <kendo-panelbar>
+ *   <kendo-panelbar-item [expanded]="true">
+ *     <ng-template kendoPanelBarItemTitle>
+ *       Item Title
+ *     </ng-template>
+ *   </kendo-panelbar-item>
+ * </kendo-panelbar>
  * ```
  */
 export class PanelBarItemTitleDirective {

package/esm2022/panelbar/panelbar-item.component.mjs

@@ -21,7 +21,14 @@ import * as i1 from "./panelbar.service";
  */
 let nextId = 0;
 /**
- * Represents the items of the PanelBar.
+ * Represents the PanelBar item component for Angular. Defines the items of the PanelBar.
+ *
+ * @example
+ * ```html
+ * <kendo-panelbar-item title="Item 1" [expanded]="true">
+ *   <kendo-panelbar-item title="Sub Item 1"></kendo-panelbar-item>
+ * </kendo-panelbar-item>
+ * ```
  */
 export class PanelBarItemComponent {
     parent;
@@ -38,17 +45,21 @@ export class PanelBarItemComponent {
      */
     id = `default-${nextId++}`;
     /**
-     * Defines the icon that will be rendered next to the title ([see example]({% slug items_panelbar %}#toc-title-icons)).
+     * Defines the icon that renders next to the title ([see example]({% slug items_panelbar %}#toc-title-icons)).
+     *
+     * @default ''
      */
     icon = '';
     /**
-     * Defines  the icon that will be rendered next to the title by using a custom CSS class
+     * Defines the icon that renders next to the title by using a custom CSS class
      * ([see example]({% slug items_panelbar %}#toc-title-icons)).
+     *
+     * @default ''
      */
     iconClass = '';
     /**
-     * Defines an SVGIcon to be rendered.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Defines an SVG icon to render.
+     * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     set svgIcon(icon) {
         if (isDevMode() && icon && this.icon && this.iconClass) {
@@ -60,12 +71,16 @@ export class PanelBarItemComponent {
         return this._svgIcon;
     }
     /**
-     * Defines the location of the image that will be displayed next to the title
+     * Defines the location of the image that displays next to the title
      * ([see example]({% slug items_panelbar %}#toc-title-images)).
+     *
+     * @default ''
      */
     imageUrl = '';
     /**
      * When set to `true`, disables a PanelBar item ([see example]({% slug items_panelbar %}#toc-disabled-state)).
+     *
+     * @default false
      */
     disabled = false;
     /**
@@ -84,13 +99,13 @@ export class PanelBarItemComponent {
     }
     /**
      * Sets the selected state of a PanelBar item ([see example]({% slug items_panelbar %}#toc-selected-state)).
+     *
+     * @default false
      */
     selected = false;
     /**
      * Sets the content of the PanelBar item.
-     * By design, it is used when the
-     * [items]({% slug api_layout_panelbarcomponent %}#toc-items)
-     * property of the PanelBar is set.
+     * It is used when the [`items`]({% slug api_layout_panelbarcomponent %}#toc-items) property of the PanelBar is set.
      */
     content;
     /**
@@ -356,7 +371,7 @@ export class PanelBarItemComponent {
                 >
                 </kendo-icon-wrapper>
             </span>
-            <div 
+            <div
                 #contentWrapper
                 *ngIf="keepContent || (!disabled && expanded && (hasChildItems || hasContent))"
                 [@toggle]="state"
@@ -510,7 +525,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 >
                 </kendo-icon-wrapper>
             </span>
-            <div 
+            <div
                 #contentWrapper
                 *ngIf="keepContent || (!disabled && expanded && (hasChildItems || hasContent))"
                 [@toggle]="state"

package/esm2022/panelbar/panelbar.component.mjs

@@ -20,7 +20,27 @@ import * as i0 from "@angular/core";
 import * as i1 from "./panelbar.service";
 import * as i2 from "@progress/kendo-angular-l10n";
 /**
- * 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}.
  */
 // TODO: add styles as input prop
 export class PanelBarComponent {
@@ -28,31 +48,33 @@ export class PanelBarComponent {
     /**
      * 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.Default;
     /**
      * Allows the PanelBar to modify the selected state of the items.
+     *
+     * @default true
      */
     selectable = true;
     /**
      * Sets the animate state of the PanelBar ([see example]({% slug animations_panelbar %})).
+     *
+     * @default true
      */
     animate = true;
     /**
      * 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 = '400px';
     /**
      * 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() {
         return this._keepItemContent;
@@ -74,31 +96,32 @@ export class PanelBarComponent {
         return this._items;
     }
     /**
-     * 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 = new EventEmitter();
     /**
      * 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 = new EventEmitter();
     /**
      * 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 = new EventEmitter();
     /**
      * 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 = new EventEmitter();
     /**
-     * Fires when the user clicks an item ([see example]({% slug events_panelbar %})).
+     * Fires when an item is clicked ([see example]({% slug events_panelbar %})).
      */
     itemClick = new EventEmitter();
     hostClasses = true;

package/esm2022/panelbar.module.mjs

@@ -12,15 +12,20 @@ import * as i4 from "./panelbar/panelbar-item-template.directive";
 import * as i5 from "./panelbar/panelbar-item-title.directive";
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * 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 class PanelBarModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });