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

package/esm2022/tilelayout/tilelayout.component.mjs

@@ -26,6 +26,16 @@ const autoFlowClasses = {
 };
 /**
  * Represents the [Kendo UI TileLayout component for Angular]({% slug overview_tilelayout %})
+ *
+ * @example
+ * ```html
+ * <kendo-tilelayout [columns]="3" [gap]="10">
+ *   <kendo-tilelayout-item>Content 1</kendo-tilelayout-item>
+ *   <kendo-tilelayout-item>Content 2</kendo-tilelayout-item>
+ * </kendo-tilelayout>
+ * ```
+ * @remarks
+ * Supported children components are: {@link TileLayoutItemComponent}.
  */
 export class TileLayoutComponent {
     zone;
@@ -35,22 +45,22 @@ export class TileLayoutComponent {
     draggingService;
     navigationService;
     /**
-     * Defines the number of columns ([see example](slug:tiles_tilelayout#size-and-position)).
+     * Specifies the number of columns ([see example](slug:tiles_tilelayout#size-and-position)).
      * @default 1
      */
     columns = 1;
     /**
-     * Determines the width of the columns. Numeric values are treated as pixels ([see example](slug:tiles_tilelayout#size-and-position)).
+     * Sets the width of the columns.
+     * Use numeric values for pixels or string values for other CSS units ([see example](slug:tiles_tilelayout#size-and-position)).
      * @default '1fr'
      */
     columnWidth = '1fr';
     /**
-     * The numeric values which determine the spacing in pixels between the layout items horizontally and vertically.
-     * Properties:
-     * * rows - the vertical spacing. Numeric values are treated as pixels. Defaults to `16`.
-     * * columns - the horizontal spacing. Numeric values are treated as pixels. Defaults to `16`.
+     * Sets the spacing between layout items in pixels.
+     * Use an object with `rows` and `columns` properties to set different horizontal and vertical spacing.
+     * Use a single number to apply the same spacing to both directions.
      *
-     * When bound to a single numeric value, it will be set to both `rows` and `columns` properties.
+     * @default { rows: 16, columns: 16 }
      */
     set gap(value) {
         this._gap = (typeof value === 'number') ? { rows: value, columns: value } : Object.assign(this._gap, value);
@@ -59,48 +69,42 @@ export class TileLayoutComponent {
         return this._gap;
     }
     /**
-     * Determines whether the reordering functionality will be enabled ([see example]({% slug reordering_tilelayout %})).
+     * Enables or disables item reordering ([see example]({% slug reordering_tilelayout %})).
      * @default false
      */
     reorderable = false;
     /**
-     * Determines whether the resizing functionality will be enabled ([see example]({% slug resizing_tilelayout %})).
+     * Enables or disables item resizing ([see example]({% slug resizing_tilelayout %})).
      * @default false
      */
     resizable = false;
     /**
-     * Determines the height of the rows. Numeric values are treated as pixels ([see example](slug:tiles_tilelayout#size-and-position)).
+     * Sets the height of the rows.
+     * Use numeric values for pixels or string values for other CSS units ([see example](slug:tiles_tilelayout#size-and-position)).
      * @default '1fr'
      */
     rowHeight = '1fr';
     /**
-     * Controls how the auto-placement algorithm works, specifying exactly how auto-placed items are flowed in the TileLayout ([see example]({% slug tiles_autoflow_tilelayout %})).
-     * For further reference, check the [grid-auto-flow CSS article](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow).
      *
-     * The possible values are:
-     * * (Default) `column`
-     * * `row`
-     * * `row dense`
-     * * `column dense`
-     * * `none`
+     * Controls how the auto-placement algorithm works, specifying exactly how auto-placed items are flowed in the TileLayout ([see example]({% slug tiles_autoflow_tilelayout %})).
      *
+     * For further reference, check the [grid-auto-flow CSS article](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow).
+     * @default 'column'
      */
     autoFlow = 'column';
     /**
-     * When the keyboard navigation is enabled, the user can use dedicated shortcuts to interact with the TileLayout.
-     * By default, navigation is enabled. To disable it and include focusable TileLayout content as a part of the natural tab sequence of the page, set the property to `false`.
-     *
+     * Enables or disables [keyboard navigation](slug:keyboard_navigation_tilelayout).
      * @default true
      */
     navigable = true;
     /**
-     * Fires when the user completes the reordering of the item ([see example]({% slug reordering_tilelayout %})).
-     * This event is preventable. If you cancel it, the item will not be reordered.
+     * Fires when item reordering is completed ([see example]({% slug reordering_tilelayout %})).
+     * You can prevent this event to cancel the reorder operation.
      */
     reorder = new EventEmitter();
     /**
-     * Fires when the user completes the resizing of the item ([see example]({% slug resizing_tilelayout %})).
-     * This event is preventable. If you cancel it, the item will not be resized.
+     * Fires when item resizing is completed ([see example]({% slug resizing_tilelayout %})).
+     * You can prevent this event to cancel the resize operation.
      */
     resize = new EventEmitter();
     hostClass = true;
@@ -122,7 +126,8 @@ export class TileLayoutComponent {
         return this.draggingService.order;
     }
     /**
-     * A query list of all declared [TileLayoutItemComponent]({% slug api_layout_tilelayoutitemcomponent %}) items.
+     * Contains a query list of the `TileLayoutItemComponent` instances that are used in the TileLayout.
+     * This allows you to access the items programmatically and manipulate their properties or listen to their events.
      */
     items;
     hint;

package/esm2022/tilelayout.module.mjs

@@ -11,14 +11,20 @@ import * as i3 from "./tilelayout/tilelayout-item.component";
 import * as i4 from "./tilelayout/tilelayout-item-header.component";
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the TileLayout component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the TileLayout component.
  *
- * The module registers:
- * - `TileLayoutComponent`—The `TileLayoutComponent` component class.
- * - `TileLayoutItemComponent`—The `TileLayoutItemComponent` component class.
- * - `TileLayoutItemHeaderComponent`—The `TileLayoutItemHeaderComponent` component class.
- * - `TileLayoutItemBodyComponent`—The `TileLayoutItemBodyComponent` component class.
+ * Use this module to add the TileLayout component to your NgModule-based Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { TileLayoutModule } from '@progress/kendo-angular-layout';
+ * import { NgModule } from '@angular/core';
+ *
+ * @NgModule({
+ *   imports: [TileLayoutModule]
+ * })
+ * export class AppModule { }
+ * ```
  */
 export class TileLayoutModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });

package/esm2022/timeline/templates/timeline-card-actions.directive.mjs

@@ -9,8 +9,17 @@ import * as i0 from "@angular/core";
  * with the `kendoTimelineCardActionsTemplate` directive inside the `<kendo-timeline>` tag.
  *
  * The following values are available as context variables:
- * - `let-event="event"` (`TimelineEvent`) - The current card's event. Also available as implicit context variable.
- * - `let-index="index"` (`number`) - The current event index.
+ * - `let-event="event"` (`TimelineEvent`)&mdash;The current card's event. Also available as implicit context variable.
+ * - `let-index="index"` (`number`)&mdash;The current event index.
+ *
+ * @example
+ * ```html
+ * <kendo-timeline [events]="events">
+ *   <ng-template kendoTimelineCardActionsTemplate let-event let-index="index">
+ *     Content for the actions of the card with index {{ index }} and event {{ event.title }}.
+ *   </ng-template>
+ * </kendo-timeline>
+ * ```
  */
 export class TimelineCardActionsTemplateDirective {
     templateRef;

package/esm2022/timeline/templates/timeline-card-body.directive.mjs

@@ -9,8 +9,17 @@ import * as i0 from "@angular/core";
  * with the `kendoTimelineCardBodyTemplate` directive inside the `<kendo-timeline>` tag.
  *
  * The following values are available as context variables:
- * - `let-event="event"` (`TimelineEvent`) - The current card's event. Also available as implicit context variable.
- * - `let-index="index"` (`number`) - The current event index.
+ * - `let-event="event"` (`TimelineEvent`)&mdash;The current card's event. Also available as implicit context variable.
+ * - `let-index="index"` (`number`)&mdash;The current event index.
+ *
+ * @example
+ * ```html
+ * <kendo-timeline [events]="events">
+ *   <ng-template kendoTimelineCardBodyTemplate let-event let-index="index">
+ *     Component for the body of the card with index {{ index }} and event {{ event.title }}.
+ *   </ng-template>
+ * </kendo-timeline>
+ * ```
  */
 export class TimelineCardBodyTemplateDirective {
     templateRef;

package/esm2022/timeline/templates/timeline-card-header.directive.mjs

@@ -9,8 +9,18 @@ import * as i0 from "@angular/core";
  * with the `kendoTimelineCardHeaderTemplate` directive inside the `<kendo-timeline>` tag.
  *
  * The following values are available as context variables:
- * - `let-event="event"` (`TimelineEvent`) - The current card's event. Also available as implicit context variable.
- * - `let-index="index"` (`number`) - The current event index.
+ * - `let-event="event"` (`TimelineEvent`)&mdash;The current card's event. Also available as implicit context variable.
+ * - `let-index="index"` (`number`)&mdash;The current event index.
+ *
+ * @example
+ * ```html
+ * <kendo-timeline [events]="events">
+ *   <ng-template kendoTimelineCardHeaderTemplate let-event let-index="index">
+ *     <span class="k-event-title">Title: {{ event.title }}</span>
+ *     <div kendoCardSubtitle>Event number {{ index }}</div>
+ *   </ng-template>
+ * </kendo-timeline>
+ * ```
  */
 export class TimelineCardHeaderTemplateDirective {
     templateRef;

package/esm2022/timeline/timeline.component.mjs

@@ -25,6 +25,9 @@ const DEFAULT_EVENT_HEIGHT = 600;
 const DEFAULT_DATE_FORMAT = 'MMMM dd, yyyy';
 /**
  * Represents the [Kendo UI Timeline component for Angular]({% slug overview_timeline %}).
+ *
+ * @remarks
+ * Supported children components are: {@link TimelineCustomMessagesComponent}.
  */
 export class TimelineComponent {
     timelineService;

package/esm2022/timeline.module.mjs

@@ -12,11 +12,20 @@ import * as i4 from "./timeline/templates/timeline-card-body.directive";
 import * as i5 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 Timeline component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Timeline component.
  *
- * The module registers:
- * - `TimelineComponent`—The `TimelineComponent` component class.
+ * Use this module to add the Timeline component to your NgModule-based Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { TimelineModule } from '@progress/kendo-angular-layout';
+ * import { NgModule } from '@angular/core';
+ *
+ * @NgModule({
+ *   imports: [TimelineModule]
+ * })
+ * export class AppModule { }
+ * ```
  */
 export class TimelineModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });

package/expansionpanel/events/action-event.d.ts

@@ -4,15 +4,15 @@
 *-------------------------------------------------------------------------------------------*/
 import { PreventableEvent } from "@progress/kendo-angular-common";
 /**
- * The type of the action that will take place upon interaction with the ExpansionPanel.
+ * Defines the type of the action that takes place upon interaction with the ExpansionPanel.
  */
 export type ExpansionPanelAction = 'expand' | 'collapse';
 /**
- * Arguments for the `action` event of the ExpansionPanel.
+ * Defines the arguments for the `action` event of the ExpansionPanel.
  */
 export declare 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: ExpansionPanelAction;
     /**

package/expansionpanel/expansionpanel-title.directive.d.ts

@@ -5,10 +5,19 @@
 import { 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 declare class ExpansionPanelTitleDirective {
     templateRef: TemplateRef<any>;

package/expansionpanel/expansionpanel.component.d.ts

@@ -10,19 +10,16 @@ import { ExpansionPanelActionEvent } from './events/action-event';
 import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
- * 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 declare class ExpansionPanelComponent implements OnInit, AfterViewInit, OnDestroy {
@@ -37,7 +34,7 @@ export declare class ExpansionPanelComponent implements OnInit, AfterViewInit, O
      */
     title: string;
     /**
-     * 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: string;
@@ -49,7 +46,7 @@ export declare class ExpansionPanelComponent implements OnInit, AfterViewInit, O
      */
     disabled: boolean;
     /**
-     * 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
@@ -57,24 +54,24 @@ export declare class ExpansionPanelComponent implements OnInit, AfterViewInit, O
     set expanded(value: boolean);
     get expanded(): boolean;
     /**
-     * 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: SVGIcon);
     get svgExpandIcon(): SVGIcon;
     /**
-     * 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: SVGIcon);
     get svgCollapseIcon(): SVGIcon;
     /**
-     * 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: string;
     /**
-     * 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: string;
@@ -82,11 +79,7 @@ export declare class ExpansionPanelComponent implements OnInit, AfterViewInit, O
      * 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?: boolean | number;
     /**
@@ -101,12 +94,12 @@ export declare class ExpansionPanelComponent implements OnInit, AfterViewInit, O
      */
     action: EventEmitter<ExpansionPanelActionEvent>;
     /**
-     * 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: EventEmitter<any>;
     /**
-     * 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: EventEmitter<any>;
@@ -164,7 +157,7 @@ export declare class ExpansionPanelComponent implements OnInit, AfterViewInit, O
      * 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?: boolean): void;
     private focusExpansionPanel;

package/expansionpanel.module.d.ts

@@ -6,8 +6,20 @@ import * as i0 from "@angular/core";
 import * as i1 from "./expansionpanel/expansionpanel.component";
 import * as i2 from "./expansionpanel/expansionpanel-title.directive";
 /**
- * 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 declare class ExpansionPanelModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ExpansionPanelModule, never>;