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

package/esm2022/drawer/drawer-content.component.mjs

@@ -5,7 +5,15 @@
 import { Component, HostBinding, ViewEncapsulation } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Represents the content of the [Kendo UI Drawer component for Angular]({% slug overview_drawer %}).
+ * Defines the content of the Drawer component.
+ *
+ * @example
+ * ```html
+ * <kendo-drawer-content>
+ *   <h1>Main Content Area</h1>
+ *   <p>Your application content goes here.</p>
+ * </kendo-drawer-content>
+ * ```
  */
 export class DrawerContentComponent {
     hostClasses = true;

package/esm2022/drawer/drawer.component.mjs

@@ -23,32 +23,31 @@ import * as i3 from "./drawer.service";
 const DEFAULT_ANIMATION = { type: 'slide', duration: 200 };
 /**
  * Represents the [Kendo UI Drawer component for Angular]({% slug overview_drawer %}).
+ * Provides a dismissible or permanently visible panel for navigation in responsive web applications.
  *
  * @example
- * ```ts-preview
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-drawer-container>
- *             <kendo-drawer #drawer
- *                  [items]="items"
- *                  mode="overlay"
- *                  [(expanded)]="expanded">
- *              </kendo-drawer>
- *              <kendo-drawer-content>
- *                  <button class="k-button" (click)="drawer.toggle()">Open the Drawer</button>
- *              </kendo-drawer-content>
- *        </kendo-drawer-container>
- *    `
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-drawer-container>
+ *       <kendo-drawer #drawer
+ *         [items]="items"
+ *         mode="overlay"
+ *         [(expanded)]="expanded">
+ *       </kendo-drawer>
+ *       <kendo-drawer-content>
+ *         <button class="k-button" (click)="drawer.toggle()">Open the Drawer</button>
+ *       </kendo-drawer-content>
+ *     </kendo-drawer-container>
+ *   `
  * })
  * class AppComponent {
- *    public expanded = false;
- *
- *    public items: any[] = [
- *      { text: 'Inbox', icon: 'k-i-inbox' },
- *      { text: 'Notifications', icon: 'k-i-bell' },
- *      { text: 'Date', icon: 'k-i-calendar' }
- *    ];
+ *   public expanded = false;
+ *   public items = [
+ *     { text: 'Inbox', icon: 'inbox' },
+ *     { text: 'Notifications', icon: 'bell' }
+ *   ];
  * }
  * ```
  */
@@ -83,52 +82,58 @@ export class DrawerComponent {
         return this.drawerWidth;
     }
     /**
-     * Specifies the mode in which the Drawer will be displayed.
+     * Specifies the mode in which the Drawer displays.
      *
-     * The possible values are:
-     * * (Default) `overlay`
-     * * `push`
+     * @default 'overlay'
      */
     mode = 'overlay';
     /**
      * Specifies the position of the Drawer
      * ([see example]({% slug positioning_drawer %})).
      *
-     * The possible values are:
-     * * (Default) `start`
-     * * `end`
+     * @default 'start'
      */
     position = 'start';
     /**
-     * Enables the mini (compact) view of the Drawer which is displayed when the component is collapsed
+     * Enables the mini (compact) view of the Drawer which displays when the component is collapsed
      * ([see example]({% slug expandmodespositions_drawer %}#toc-mini-view)).
+     *
+     * @default false
      */
     mini = false;
     /**
      * Specifies the state of the Drawer.
+     *
+     * @default false
      */
     expanded = false;
     /**
      * Defines the width of the Drawer when it is expanded.
-     * Defaults to `240`.
+     *
+     * @default 240
      */
     width = 240;
     /**
-     * Defines the width of the Drawer when the mini view is enabled
-     * and the component is collapsed. Defaults to `60`.
+     * Defines the width of the Drawer when the mini view is enabled and the component is collapsed.
+     *
+     * @default 50
      */
     miniWidth = 50;
     /**
-     * Specifies if the Drawer will be automatically collapsed when an item
-     * or the overlay is clicked. Defaults to `true`.
+     * Specifies if the Drawer automatically collapses when an item or the overlay is clicked.
+     *
+     * @default true
      */
     autoCollapse = true;
     /**
-     * The collection of items that will be rendered in the Drawer.
+     * Defines the collection of items that render in the Drawer.
+     *
+     * @default []
      */
     items = [];
     /**
      * Defines a callback function which determines if an item should be expanded.
+     * This is useful for hierarchical data structures where the expansion state of an item depends on its parent or other items.
      */
     set isItemExpanded(fn) {
         if (isDevMode && isPresent(fn) && typeof fn !== 'function') {
@@ -144,16 +149,10 @@ export class DrawerComponent {
      */
     direction;
     /**
-     * Specifies the animation settings of the Drawer.
+     * Specifies the animation settings of the Drawer
      * ([see example]({% slug interaction_drawer %}#toc-toggling-between-states)).
      *
-     * The possible values are:
-     * * Boolean
-     *    * (Default) `true`
-     *    * `false`
-     * * `DrawerAnimation`
-     *    * (Default) `type?: 'slide'`
-     *    * `duration`&mdash;Accepts a number in milliseconds. Defaults to `300ms`.
+     * @default { type: 'slide', duration: 200 }
      */
     animation = DEFAULT_ANIMATION;
     /**
@@ -165,11 +164,12 @@ export class DrawerComponent {
      */
     collapse = new EventEmitter();
     /**
-     * Fires when a Drawer item is selected. This event is preventable.
+     * Fires when an item in the Drawer is selected.
+     * This event is preventable.
      */
     select = new EventEmitter();
     /**
-     * Fires when the `expanded` property of the component was updated.
+     * Fires when the `expanded` property of the component is updated.
      * Used to provide a two-way binding for the `expanded` property.
      */
     expandedChange = new EventEmitter();
@@ -236,8 +236,9 @@ export class DrawerComponent {
     }
     /**
      * Toggles the visibility of the Drawer.
+     * If the `expanded` parameter is not provided, the Drawer will toggle between expanded and collapsed states.
      *
-     * @param expanded? - Boolean. Specifies if the Drawer will be expanded or collapsed.
+     * @param expanded Specifies if the Drawer will be expanded or collapsed.
      */
     toggle(expanded) {
         const previous = this.expanded;

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

@@ -4,23 +4,23 @@
 *-------------------------------------------------------------------------------------------*/
 import { PreventableEvent } from '@progress/kendo-angular-common';
 /**
- * Arguments for the `select` event of the Drawer.
+ * Defines the arguments for the `select` event of the Drawer.
  */
 export class DrawerSelectEvent extends PreventableEvent {
     /**
-     * The index of the selected item in the `items` collection.
+     * Defines the index of the selected item in the `items` collection.
      */
     index;
     /**
-     * The selected Drawer item.
+     * Defines the selected Drawer item.
      */
     item;
     /**
-     * The DOM event that triggered the selection.
+     * Defines the DOM event that triggered the selection.
      */
     originalEvent;
     /**
-     * The Drawer that triggered the event.
+     * Defines the Drawer that triggered the event.
      */
     sender;
     /**

package/esm2022/drawer/template-directives/drawer-template.directive.mjs

@@ -5,11 +5,24 @@
 import { Directive, Optional, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Represents a template that defines the content of the Drawer.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoDrawerTemplate` directive inside the `<kendo-drawer>` tag.
- * Using this template directive will override all other templates,
- * for example, `kendoDrawerHeaderTemplate` and `kendoDrawerItemTemplate`.
+ * Defines a template that specifies the content of the Drawer.
+ * To define the template, nest an `<ng-template>` tag with the `kendoDrawerTemplate` directive inside the `<kendo-drawer>` tag.
+ * Using this template directive overrides all other templates, for example, `kendoDrawerHeaderTemplate` and `kendoDrawerItemTemplate`.
+ *
+ * @example
+ * ```html
+ * <kendo-drawer>
+ *   <ng-template kendoDrawerTemplate>
+ *     <div class="custom-drawer-content">
+ *       <h3>Custom Drawer</h3>
+ *       <ul>
+ *         <li>Custom Item 1</li>
+ *         <li>Custom Item 2</li>
+ *       </ul>
+ *     </div>
+ *   </ng-template>
+ * </kendo-drawer>
+ * ```
  */
 export class DrawerTemplateDirective {
     templateRef;

package/esm2022/drawer/template-directives/footer-template.directive.mjs

@@ -5,9 +5,17 @@
 import { Directive, Optional, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Represents a template that defines the footer content of the Drawer.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoDrawerFooterTemplate` directive inside the `<kendo-drawer>` tag.
+ * Defines a template that specifies the footer content of the Drawer.
+ * To define the template, nest an `<ng-template>` tag with the `kendoDrawerFooterTemplate` directive inside the `<kendo-drawer>` tag.
+ *
+ * @example
+ * ```html
+ * <kendo-drawer>
+ *   <ng-template kendoDrawerFooterTemplate>
+ *     <p>© 2023 Company Name</p>
+ *   </ng-template>
+ * </kendo-drawer>
+ * ```
  */
 export class DrawerFooterTemplateDirective {
     templateRef;

package/esm2022/drawer/template-directives/header-template.directive.mjs

@@ -5,9 +5,17 @@
 import { Directive, Optional, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Represents a template that defines the header content of the Drawer.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoDrawerHeaderTemplate` directive inside the `<kendo-drawer>` tag.
+ * Defines a template that specifies the header content of the Drawer.
+ * To define the template, nest an `<ng-template>` tag with the `kendoDrawerHeaderTemplate` directive inside the `<kendo-drawer>` tag.
+ *
+ * @example
+ * ```html
+ * <kendo-drawer>
+ *   <ng-template kendoDrawerHeaderTemplate>
+ *     <h3>Navigation Menu</h3>
+ *   </ng-template>
+ * </kendo-drawer>
+ * ```
  */
 export class DrawerHeaderTemplateDirective {
     templateRef;

package/esm2022/drawer/template-directives/item-template.directive.mjs

@@ -5,9 +5,25 @@
 import { Directive, Optional, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Represents a template that defines the item content of the Drawer.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoDrawerItemTemplate` directive inside the `<kendo-drawer>` tag.
+ * Defines a template that specifies the item content of the Drawer.
+ * To define the template, nest an `<ng-template>` tag with the `kendoDrawerItemTemplate` directive inside the `<kendo-drawer>` tag.
+ *
+ * The `let-item` context variable provides access to the item data.
+ *
+ * For the Hierarchical Drawer, the `kendoDrawerItemTemplate` directive provides additional context fields:
+ *
+ * * `level`&mdash;A number that indicates the nesting level of the current item. Use the `let-level="level"` syntax to access the nesting level.
+ * * `hasChildren`&mdash;A boolean that indicates whether the current item has nested items. Use the `let-hasChildren="hasChildren"` syntax to access the value.
+ * * `isItemExpanded`&mdash;A boolean that holds information about the expanded state of the current item, which indicates whether its children are visible or not. Use the `let-isItemExpanded="isItemExpanded"` syntax to access the value of the expanded state.
+ *
+ * @example
+ * ```html
+ * <kendo-drawer>
+ *   <ng-template kendoDrawerItemTemplate let-item>
+ *     <span class="custom-item">{{ item.text }}</span>
+ *   </ng-template>
+ * </kendo-drawer>
+ * ```
  */
 export class DrawerItemTemplateDirective {
     templateRef;

package/esm2022/drawer.module.mjs

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

package/esm2022/expansionpanel/events/action-event.mjs

@@ -4,11 +4,11 @@
 *-------------------------------------------------------------------------------------------*/
 import { PreventableEvent } from "@progress/kendo-angular-common";
 /**
- * Arguments for the `action` event of the ExpansionPanel.
+ * Defines the arguments for the `action` event of the ExpansionPanel.
  */
 export class ExpansionPanelActionEvent extends PreventableEvent {
     /**
-     * The action that will take place upon interaction with the ExpansionPanel.
+     * Defines the action that takes place upon interaction with the ExpansionPanel.
      */
     action;
     /**

package/esm2022/expansionpanel/expansionpanel-title.directive.mjs

@@ -5,10 +5,19 @@
 import { Directive, Optional, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Represents a template that defines the content of the ExpansionPanel title.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoExpansionPanelTitleDirective` directive inside the `<kendo-expansionpanel>` tag.
+ * Defines a template that specifies the content of the ExpansionPanel title.
+ * To define the template, nest an `<ng-template>` tag with the `kendoExpansionPanelTitleDirective` directive inside the `<kendo-expansionpanel>` tag
  * ([see example]({% slug title_expansionpanel %}#toc-title-template)).
+ *
+ * @example
+ * ```html
+ * <kendo-expansionpanel>
+ *   <ng-template kendoExpansionPanelTitleDirective>
+ *     <h3>Custom Title</h3>
+ *   </ng-template>
+ *   <p>Panel content</p>
+ * </kendo-expansionpanel>
+ * ```
  */
 export class ExpansionPanelTitleDirective {
     templateRef;

package/esm2022/expansionpanel/expansionpanel.component.mjs

@@ -24,19 +24,16 @@ import * as i2 from "@angular/animations";
 const DEFAULT_DURATION = 200;
 const CONTENT_HIDDEN_CLASS = 'k-hidden';
 /**
- * Represents the [Kendo UI ExpansionPanel component for Angular]({% slug overview_expansionpanel %}).
+ * Represents the Kendo UI ExpansionPanel component for Angular. Provides an expandable and collapsible content container with customizable header and animation ([see overview]({% slug overview_expansionpanel %})).
  *
  * @example
- * ```ts-preview
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-expansionpanel title="Chile" subtitle="South America">
- *              There are various theories about the origin of the word Chile.
- *        </kendo-expansionpanel>
- *    `
- * })
- * class AppComponent {}
+ * ```html
+ * <kendo-expansionpanel
+ *   title="Chile"
+ *   subtitle="South America"
+ *   [expanded]="isExpanded">
+ *   There are various theories about the origin of the word Chile.
+ * </kendo-expansionpanel>
  * ```
  */
 export class ExpansionPanelComponent {
@@ -51,7 +48,7 @@ export class ExpansionPanelComponent {
      */
     title = '';
     /**
-     * Specifies the secondary text in the header of the ExpansionPanel, which is rendered next to the collapse/expand icon
+     * Specifies the secondary text in the header of the ExpansionPanel, which renders next to the collapse/expand icon
      * ([see example](slug:title_expansionpanel#toc-titles-and-subtitles)).
      */
     subtitle = '';
@@ -63,7 +60,7 @@ export class ExpansionPanelComponent {
      */
     disabled = false;
     /**
-     * Specifies whether the ExpansionPanel is expanded. The property supports two-way binding.
+     * Specifies whether the ExpansionPanel is expanded. The property supports two-way binding
      * ([see example]({% slug interaction_expansionpanel %}#toc-setting-the-initial-state)).
      *
      * @default false
@@ -84,8 +81,8 @@ export class ExpansionPanelComponent {
         return this._expanded;
     }
     /**
-     * Defines an SVGIcon for the expanded state of the component.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Defines an SVG icon for the expanded state of the component.
+     * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     set svgExpandIcon(icon) {
         if (isDevMode() && icon && this.expandIcon) {
@@ -97,8 +94,8 @@ export class ExpansionPanelComponent {
         return this._svgExpandIcon;
     }
     /**
-     * Defines an SVGIcon for the collapsed state of the component.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Defines an SVG icon for the collapsed state of the component.
+     * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     set svgCollapseIcon(icon) {
         if (isDevMode() && icon && this.collapseIcon) {
@@ -110,12 +107,12 @@ export class ExpansionPanelComponent {
         return this._svgCollapseIcon;
     }
     /**
-     * Sets a custom icon via css class(es), for the collapsed state of the component
+     * Sets a custom icon via CSS class(es) for the collapsed state of the component
      * ([see example]({% slug icons_expansionpanel %}#toc-icons)).
      */
     expandIcon;
     /**
-     * Sets a custom icon via css class(es), for the expanded state of the component
+     * Sets a custom icon via CSS class(es) for the expanded state of the component
      * ([see example]({% slug icons_expansionpanel %}#toc-icons)).
      */
     collapseIcon;
@@ -123,11 +120,7 @@ export class ExpansionPanelComponent {
      * Specifies the animation settings of the ExpansionPanel
      * ([see example]({% slug animations_expansionpanel %})).
      *
-     * The possible values are:
-     * * Boolean
-     *    * (Default) `true` Numeric values represent duration. Default duration is 200ms.
-     *    * false
-     * * Number
+     * @default true
      */
     animation = true;
     /**
@@ -142,12 +135,12 @@ export class ExpansionPanelComponent {
      */
     action = new EventEmitter();
     /**
-     * Fires when the ExpansionPanel is expanded. If there is animation it will fire when the animation is complete
+     * Fires when the ExpansionPanel is expanded. If there is animation it fires when the animation is complete
      * ([see example](slug:events_expansionpanel)).
      */
     expand = new EventEmitter();
     /**
-     * Fires when the ExpansionPanel is collapsed. If there is animation it will fire when the animation is complete
+     * Fires when the ExpansionPanel is collapsed. If there is animation it fires when the animation is complete
      * ([see example](slug:events_expansionpanel)).
      */
     collapse = new EventEmitter();
@@ -287,7 +280,7 @@ export class ExpansionPanelComponent {
      * Toggles the visibility of the ExpansionPanel
      * ([see example](slug:interaction_expansionpanel#toggling-between-states)).
      *
-     * @param expanded? - Boolean. Specifies, whether the ExpansionPanel will be expanded or collapsed.
+     * @param expanded Specifies whether the ExpansionPanel will be expanded or collapsed.
      */
     toggle(expanded) {
         const previous = this.expanded;

package/esm2022/expansionpanel.module.mjs

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

package/esm2022/gridlayout.module.mjs

@@ -9,8 +9,20 @@ import * as i1 from "./layouts/grid-layout.component";
 import * as i2 from "./layouts/gridlayout-item.component";
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the GridLayout component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the GridLayout component.
+ *
+ * Use this module to add the GridLayout component to your NgModule-based Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { GridLayoutModule } from '@progress/kendo-angular-layout';
+ * import { NgModule } from '@angular/core';
+ *
+ * @NgModule({
+ *   imports: [GridLayoutModule]
+ * })
+ * export class AppModule { }
+ * ```
  */
 export class GridLayoutModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });

package/esm2022/layout.module.mjs

@@ -56,34 +56,23 @@ import * as i48 from "./timeline/templates/timeline-card-body.directive";
 import * as i49 from "./timeline/templates/timeline-card-header.directive";
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the Layout components.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Layout components.
  *
- * @example
+ * Use this module to add all Layout package components to your NgModule-based Angular application.
  *
- * ```ts-no-run
- * // Import the Layout module
+ * @example
+ * ```typescript
  * import { LayoutModule } from '@progress/kendo-angular-layout';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
+ * import { BrowserModule } from '@angular/platform-browser';
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, LayoutModule], // import Layout module
- *     bootstrap:    [AppComponent]
+ * @NgModule({
+ *   declarations: [AppComponent],
+ *   imports: [BrowserModule, LayoutModule],
+ *   bootstrap: [AppComponent]
  * })
- * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
+ * export class AppModule { }
  * ```
  */
 export class LayoutModule {