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

package/esm2022/avatar/avatar.component.mjs

@@ -17,7 +17,26 @@ const DEFAULT_SIZE = 'medium';
 const DEFAULT_THEME_COLOR = 'primary';
 const DEFAULT_FILL_MODE = 'solid';
 /**
- * Displays images, icons or initials representing people or other entities.
+ * Represents the Kendo UI Avatar component for Angular. Displays images, icons, or initials representing people or other entities.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-avatar [imageSrc]="userImage" size="large"></kendo-avatar>
+ *     <kendo-avatar [initials]="userInitials" themeColor="primary"></kendo-avatar>
+ *     <kendo-avatar [icon]="userIcon" fillMode="outline"></kendo-avatar>
+ *   `
+ * })
+ * class AppComponent {
+ *   userImage = 'path/to/image.jpg';
+ *   userInitials = 'JD';
+ *   userIcon = 'user';
+ * }
+ * ```
+ * @remarks
+ * Supported children components are: {@link AvatarCustomMessagesComponent}.
  */
 export class AvatarComponent {
     localization;
@@ -44,14 +63,10 @@ export class AvatarComponent {
         this.rounded = mapShapeToRounded(shape);
     }
     /**
-     * Specifies the size of the avatar
+     * Specifies the size of the Avatar
      * ([see example]({% slug appearance_avatar %}#toc-size)).
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
      */
     set size(size) {
         if (size !== this._size) {
@@ -64,15 +79,10 @@ export class AvatarComponent {
         return this._size;
     }
     /**
-     * Specifies the rounded styling of the avatar
+     * Specifies the rounded styling of the Avatar
      * ([see example](slug:appearance_avatar#toc-roundness)).
      *
-     * The possible values are:
-     * * `small`
-     * * `medium`
-     * * `large`
-     * * `full` (Default)
-     * * `none`
+     * @default 'full'
      */
     set rounded(rounded) {
         if (rounded !== this._rounded) {
@@ -85,22 +95,10 @@ export class AvatarComponent {
         return this._rounded;
     }
     /**
-     * Specifies the theme color of the avatar.
-     * The theme color will be applied as background and border color, while also amending the text color accordingly.
+     * Specifies the theme color of the Avatar.
+     * The theme color applies as background and border color while adjusting the text color accordingly.
      *
-     * The possible values are:
-     * * `base`&mdash; Applies the base coloring value.
-     * * `primary` (Default)&mdash;Applies coloring based on primary theme color.
-     * * `secondary`&mdash;Applies coloring based on secondary theme color.
-     * * `tertiary`&mdash; Applies coloring based on tertiary theme color.
-     * * `info`&mdash;Applies coloring based on info theme color.
-     * * `success`&mdash; Applies coloring based on success theme color.
-     * * `warning`&mdash; Applies coloring based on warning theme color.
-     * * `error`&mdash; Applies coloring based on error theme color.
-     * * `dark`&mdash; Applies coloring based on dark theme color.
-     * * `light`&mdash; Applies coloring based on light theme color.
-     * * `inverse`&mdash; Applies coloring based on inverted theme color.
-     * * `none`&mdash; Removes the styling associated with the theme color.
+     * @default 'primary'
      */
     set themeColor(themeColor) {
         if (themeColor !== this._themeColor) {
@@ -113,12 +111,9 @@ export class AvatarComponent {
         return this._themeColor;
     }
     /**
-     * Specifies the appearance fill style of the avatar.
+     * Specifies the fill style of the Avatar.
      *
-     * The possible values are:
-     * * `solid` (Default)
-     * * `outline`
-     * * `none`
+     * @default 'solid'
      */
     set fillMode(fillMode) {
         if (fillMode !== this.fillMode) {
@@ -140,17 +135,18 @@ export class AvatarComponent {
         this.fillMode = fillMode;
     }
     /**
-     * Sets a border to the avatar.
+     * Adds a border to the Avatar.
+     *
+     * @default false
      */
     border = false;
     /**
-     * Defines a CSS class — or multiple classes separated by spaces —
-     * which are applied to a span element inside the avatar.
-     * Allows the usage of custom icons.
+     * Defines a CSS class or multiple classes separated by spaces.
+     * You can apply these classes to a `span` element inside the Avatar and also use custom icons.
      */
     iconClass;
     /**
-     * Sets the width of the avatar.
+     * Sets the width of the Avatar.
      */
     width;
     /**
@@ -160,7 +156,7 @@ export class AvatarComponent {
         return this.width;
     }
     /**
-     * Sets the height of the avatar.
+     * Sets the height of the Avatar.
      */
     height;
     /**
@@ -170,26 +166,26 @@ export class AvatarComponent {
         return this.height;
     }
     /**
-     * The CSS styles that will be rendered on the content element of the avatar.
-     * Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
+     * Defines the CSS styles that render on the content element of the Avatar.
+     * Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
      */
     cssStyle;
     /**
-     * Sets `initials` to the avatar.
+     * Sets the initials for the Avatar.
      */
     initials;
     /**
-     * Sets the `icon` for the avatar.
+     * Sets the icon for the Avatar.
      * All [Kendo UI Icons](slug:icons#icons-list) are supported.
      */
     icon;
     /**
-     * Sets the `image` source of the avatar.
+     * Sets the image source of the Avatar.
      */
     imageSrc;
     /**
-     * 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) {

package/esm2022/avatar/l10n/custom-messages.component.mjs

@@ -9,8 +9,16 @@ import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 // eslint-disable no-forward-ref
 /**
- * Custom component messages override default component messages
+ * Provides custom component messages that override default component messages
  * ([see example]({% slug rtl_layout %})).
+ *
+ * ```html
+ * <kendo-avatar>
+ *   <kendo-avatar-messages
+ *     avatarAlt="User's profile picture"
+ *   ></kendo-avatar-messages>
+ * </kendo-avatar>
+ * ```
  */
 export class AvatarCustomMessagesComponent extends Messages {
     service;

package/esm2022/avatar/l10n/messages.mjs

@@ -10,7 +10,7 @@ import * as i0 from "@angular/core";
  */
 export class Messages extends ComponentMessages {
     /**
-     * The alt attribute text of the image in the avatar.
+     * Defines the alt attribute text of the image in the Avatar.
      */
     avatarAlt;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });

package/esm2022/avatar.module.mjs

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

package/esm2022/card/card-actions.component.mjs

@@ -6,8 +6,16 @@ import { Component, EventEmitter, HostBinding, Input, Output, TemplateRef } from
 import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
 import * as i0 from "@angular/core";
 /**
- * Specifies the action buttons of the Card.
- * * ([see example]({% slug actions_card %})).
+ * Defines the action buttons of the Card ([see example]({% slug actions_card %})).
+ * The Card actions can be used to perform operations related to the Card's content, such as saving, editing, or deleting.
+ *
+ * @example
+ * ```html
+ * <kendo-card-actions
+ *   layout="end"
+ *   orientation="horizontal">
+ * </kendo-card-actions>
+ * ```
  */
 export class CardActionsComponent {
     hostClass = true;
@@ -30,27 +38,20 @@ export class CardActionsComponent {
         return this.orientation === 'horizontal';
     }
     /**
-     * Specifies the layout of the Card action buttons.
-     *
-     * * The possible values are:
-     * * (Default) `horizontal`
-     * * `vertical`
+     * Specifies the orientation of the Card action buttons.
      *
+     * @default 'horizontal'
      */
     orientation = 'horizontal';
     /**
      * Specifies the layout of the Card action buttons.
      *
-     * The possible values are:
-     * * (Default) `start`
-     * * `center`
-     * * `end`
-     * * `stretched`
-     *
+     * @default 'start'
      */
     layout = 'start';
     /**
-     * Allows the declarative specification of the Card actions.
+     * Defines the Card actions declaratively.
+     * You can pass an array of `CardAction` objects or a `TemplateRef`.
      */
     set actions(value) {
         if (Array.isArray(value)) {
@@ -61,7 +62,7 @@ export class CardActionsComponent {
         }
     }
     /**
-     * Fires when the user clicks an action button.
+     * Fires when you click an action button.
      */
     action = new EventEmitter();
     /**

package/esm2022/card/card-body.component.mjs

@@ -5,7 +5,15 @@
 import { Component, HostBinding } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Specifies the content in the Card body.
+ * Defines the content in the Card body.
+ * The body is the main area of the Card where the primary content is displayed.
+ *
+ * @example
+ * ```html
+ * <kendo-card-body>
+ *   <p>Main content of the card.</p>
+ * </kendo-card-body>
+ * ```
  */
 export class CardBodyComponent {
     hostClass = true;

package/esm2022/card/card-footer.component.mjs

@@ -5,7 +5,15 @@
 import { Component, HostBinding } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Specifies the content in the Card footer.
+ * Defines the content in the Card footer.
+ * The footer can include additional information, actions, or links related to the Card's content.
+ *
+ * @example
+ * ```html
+ * <kendo-card-footer>
+ *   <p>Footer content</p>
+ * </kendo-card-footer>
+ * ```
  */
 export class CardFooterComponent {
     hostClass = true;

package/esm2022/card/card-header.component.mjs

@@ -5,7 +5,16 @@
 import { Component, HostBinding } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Specifies the content in the Card header.
+ * Defines the content in the Card header.
+ * The header can include a title, subtitle, and other elements that provide context for the Card's content.
+ *
+ * @example
+ * ```html
+ * <kendo-card-header>
+ *   <h5 kendoCardTitle>Card Title</h5>
+ *   <p kendoCardSubtitle>Card Subtitle</p>
+ * </kendo-card-header>
+ * ```
  */
 export class CardHeaderComponent {
     hostClass = true;

package/esm2022/card/card.component.mjs

@@ -9,7 +9,22 @@ import { packageMetadata } from '../package-metadata';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
- * Represents the [Kendo UI Card component for Angular]({% slug overview_card %})
+ * Represents the Kendo UI Card component for Angular.
+ * Displays content in a structured container with customizable layout and styling ([Card overview]({% slug overview_card %})).
+ *
+ * @example
+ * ```html
+ * <kendo-card orientation="vertical">
+ *   <kendo-card-header>
+ *     <h5 kendoCardTitle>Card Title</h5>
+ *   </kendo-card-header>
+ *   <kendo-card-body>
+ *     <p>Card content goes here.</p>
+ *   </kendo-card-body>
+ * </kendo-card>
+ * ```
+ * @remarks
+ * Supported children components are: {@link CardFooterComponent}, {@link CardHeaderComponent}, {@link CardActionsComponent}, {@link CardBodyComponent}.
  */
 export class CardComponent {
     localizationService;
@@ -30,15 +45,13 @@ export class CardComponent {
     /**
      * Specifies the layout of the Card content.
      *
-     * The possible values are:
-     * * (Default) `vertical`
-     * * `horizontal`
-     *
+     * @default 'vertical'
      */
     orientation = 'vertical';
     /**
      * Defines the width of the Card.
-     * Defaults to `285px`.
+     *
+     * @default '285px'
      */
     width = '285px';
     dynamicRTLSubscription;

package/esm2022/card/directives/card-media.directive.mjs

@@ -5,7 +5,16 @@
 import { Directive, HostBinding } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Specifies any media that will be displayed and aligned in the Card.
+ * Defines any media that displays and aligns in the Card.
+ * The media can be an image, video, or any other media type.
+ *
+ * ```html
+ * <kendo-card>
+ *  <div kendoCardMedia>
+ *   <img src="path/to/image.jpg" alt="Card Media">
+ *  </div>
+ * </kendo-card>
+ * ```
  */
 export class CardMediaDirective {
     hostClass = true;

package/esm2022/card/directives/card-separator.directive.mjs

@@ -5,7 +5,15 @@
 import { Directive, HostBinding, Input } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Specifies a separator in the content of the Card.
+ * Defines a separator in the content of the Card.
+ * The separator can be used to visually divide sections within the Card.
+ *
+ * ```html
+ * <kendo-card>
+ *  <div kendoCardSeparator></div>
+ *  <p>Content below the separator</p>
+ * </kendo-card>
+ * ```
  */
 export class CardSeparatorDirective {
     hostClass = true;
@@ -22,9 +30,7 @@ export class CardSeparatorDirective {
     /**
      * Specifies the orientation of the Card separator.
      *
-     * The possible values are:
-     * (Default) `horizontal`
-     * `vertical`
+     * @default 'horizontal'
      */
     orientation = 'horizontal';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });

package/esm2022/card/directives/card-subtitle.directive.mjs

@@ -5,7 +5,14 @@
 import { Directive, HostBinding } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Specifies the text and styles for the subtitle of the Card.
+ * Defines the text and styles for the subtitle of the Card.
+ * The subtitle is displayed below the title and above the content of the Card.
+ *
+ * ```html
+ * <kendo-card>
+ *  <h4 kendoCardSubtitle>Card Subtitle</h4>
+ * </kendo-card>
+ * ```
  */
 export class CardSubtitleDirective {
     hostClass = true;

package/esm2022/card/directives/card-title.directive.mjs

@@ -5,7 +5,14 @@
 import { Directive, HostBinding } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Specifies the text and styles for the title of the Card.
+ * Defines the text and styles for the title of the Card.
+ * The title is displayed at the top of the Card, above the subtitle and content.
+ *
+ * ```html
+ * <kendo-card>
+ *   <h3 kendoCardTitle>Card Title</h3>
+ * </kendo-card>
+ * ```
  */
 export class CardTitleDirective {
     hostClass = true;

package/esm2022/card/models/card-action.mjs

@@ -3,19 +3,19 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * The settings of the Card action buttons.
+ * Defines the settings of the Card action buttons.
  */
 export class CardAction {
     /**
-     * Determines if the action button is styled as a primary button.
+     * Specifies whether the action button uses primary styling.
      */
     primary;
     /**
-     * Determines if the action button is styled as a flat button.
+     * Specifies whether the action button uses flat styling.
      */
     flat;
     /**
-     * The text of the action button.
+     * Defines the text of the action button.
      */
     text;
 }

package/esm2022/card.module.mjs

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

package/esm2022/common/preventable-event.mjs

@@ -9,18 +9,15 @@ export class PreventableEvent {
     prevented = false;
     /**
      * Prevents the default action for a specified event.
-     * In this way, the source component suppresses
-     * the built-in behavior that follows the event.
+     * The source component suppresses the built-in behavior that follows the event.
      */
     preventDefault() {
         this.prevented = true;
     }
     /**
-     * Returns `true` if the event was prevented
-     * by any of its subscribers.
+     * Returns `true` if the event was prevented by any of its subscribers.
      *
-     * @returns `true` if the default action was prevented.
-     * Otherwise, returns `false`.
+     * @returns `true` if the default action was prevented. Otherwise, returns `false`.
      */
     isDefaultPrevented() {
         return this.prevented;

package/esm2022/directives.mjs

@@ -47,14 +47,14 @@ import { TimelineCardBodyTemplateDirective } from "./timeline/templates/timeline
 import { TimelineCardHeaderTemplateDirective } from "./timeline/templates/timeline-card-header.directive";
 import { TimelineComponent } from "./timeline/timeline.component";
 /**
- * Utility array that contains all `Avatar` related components and directives.
+ * Use the `KENDO_AVATAR` utility array to add all Avatar-related components and directives to a standalone Angular component.
  */
 export const KENDO_AVATAR = [
     AvatarComponent,
     AvatarCustomMessagesComponent
 ];
 /**
- * Utility array that contains all `Card` related components and directives.
+ * Use the `KENDO_CARD` utility array to add all Card-related components and directives to a standalone Angular component.
  */
 export const KENDO_CARD = [
     CardComponent,
@@ -68,7 +68,7 @@ export const KENDO_CARD = [
     CardTitleDirective
 ];
 /**
- * Utility array that contains all `Drawer` related components and directives.
+ * Use the `KENDO_DRAWER` utility array to add all Drawer-related components and directives to a standalone Angular component.
  */
 export const KENDO_DRAWER = [
     DrawerComponent,
@@ -80,21 +80,21 @@ export const KENDO_DRAWER = [
     DrawerItemTemplateDirective
 ];
 /**
- * Utility array that contains all `ExpansionPanel` related components and directives.
+ * Use the `KENDO_EXPANSIONPANEL` utility array to add all ExpansionPanel-related components and directives to a standalone Angular component.
  */
 export const KENDO_EXPANSIONPANEL = [
     ExpansionPanelComponent,
     ExpansionPanelTitleDirective
 ];
 /**
- * Utility array that contains all `GridLayout` related components and directives.
+ * Use the `KENDO_GRIDLAYOUT` utility array to add all GridLayout-related components and directives to a standalone Angular component.
  */
 export const KENDO_GRIDLAYOUT = [
     GridLayoutComponent,
     GridLayoutItemComponent
 ];
 /**
- * Utility array that contains all `PanelBar` related components and directives.
+ * Use the `KENDO_PANELBAR` utility array to add all PanelBar-related components and directives to a standalone Angular component.
  */
 export const KENDO_PANELBAR = [
     PanelBarComponent,
@@ -104,20 +104,20 @@ export const KENDO_PANELBAR = [
     PanelBarItemTitleDirective
 ];
 /**
- * Utility array that contains all `Splitter` related components and directives.
+ * Use the `KENDO_SPLITTER` utility array to add all Splitter-related components and directives to a standalone Angular component.
  */
 export const KENDO_SPLITTER = [
     SplitterComponent,
     SplitterPaneComponent
 ];
 /**
- * Utility array that contains all `StackLayout` related components and directives.
+ * Use the `KENDO_STACKLAYOUT` utility array to add all StackLayout-related components and directives to a standalone Angular component.
  */
 export const KENDO_STACKLAYOUT = [
     StackLayoutComponent
 ];
 /**
- * Utility array that contains all `Stepper` related components and directives.
+ * Use the `KENDO_STEPPER` utility array to add all Stepper-related components and directives to a standalone Angular component.
  */
 export const KENDO_STEPPER = [
     StepperComponent,
@@ -127,7 +127,7 @@ export const KENDO_STEPPER = [
     StepperStepTemplateDirective
 ];
 /**
- * Utility array that contains all `TabStrip` related components and directives.
+ * Use the `KENDO_TABSTRIP` utility array to add all TabStrip-related components and directives to a standalone Angular component.
  */
 export const KENDO_TABSTRIP = [
     TabStripComponent,
@@ -137,7 +137,7 @@ export const KENDO_TABSTRIP = [
     TabStripCustomMessagesComponent
 ];
 /**
- * Utility array that contains all `TileLayout` related components and directives.
+ * Use the `KENDO_TILELAYOUT` utility array to add all TileLayout-related components and directives to a standalone Angular component.
  */
 export const KENDO_TILELAYOUT = [
     TileLayoutComponent,
@@ -146,7 +146,7 @@ export const KENDO_TILELAYOUT = [
     TileLayoutItemHeaderComponent
 ];
 /**
- * Utility array that contains all `Timeline` related components and directives
+ * Use the `KENDO_TIMELINE` utility array to add all Timeline-related components and directives to a standalone Angular component.
  */
 export const KENDO_TIMELINE = [
     TimelineComponent,
@@ -156,7 +156,7 @@ export const KENDO_TIMELINE = [
     TimelineCardHeaderTemplateDirective
 ];
 /**
- * Utility array that contains all `@progress/kendo-angular-layout` related components and directives.
+ * Use the `KENDO_LAYOUT` utility array to add all `@progress/kendo-angular-layout`-related components and directives to a standalone Angular component.
  */
 export const KENDO_LAYOUT = [
     ...KENDO_AVATAR,

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

@@ -10,7 +10,19 @@ import { NgIf } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
- * Serves as a container for the [Kendo UI Drawer component for Angular]({% slug overview_drawer %}) and its content.
+ * Serves as a container for the [Drawer component]({% slug overview_drawer %}) and its content.
+ *
+ * @example
+ * ```html
+ * <kendo-drawer-container>
+ *   <kendo-drawer [items]="items"></kendo-drawer>
+ *   <kendo-drawer-content>
+ *     <h1>Main Content</h1>
+ *   </kendo-drawer-content>
+ * </kendo-drawer-container>
+ * ```
+ * @remarks
+ * Supported children components are: {@link DrawerComponent}, {@link DrawerContentComponent}.
  */
 export class DrawerContainerComponent {
     localizationService;