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

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

@@ -6,37 +6,18 @@ import { Directive, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Represents the title template of the Kendo UI TabStrip.
- * To define the template, nest a `<ng-template>` tag with the `kendoTabTitle` directive inside the component tag.
- *
- * > The `kendoTabTitle` directive overrides the TabStripTab [title]({% slug api_layout_tabstriptabcomponent %}#toc-title) option.
+ * To define the template, nest an `<ng-template>` tag with the `kendoTabTitle` directive inside the component tag.
+ * The `kendoTabTitle` directive overrides the TabStripTab [`title`]({% slug api_layout_tabstriptabcomponent %}#toc-title) option.
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *         <kendo-tabstrip>
- *           <kendo-tabstrip-tab [selected]="true">
- *             <ng-template kendoTabTitle>
- *               <h4>Custom Title</h4>
- *             </ng-template>
- *             <ng-template kendoTabContent>
- *               <h3>Content 1</h3>
- *             </ng-template>
- *           </kendo-tabstrip-tab>
- *
- *           <kendo-tabstrip-tab title="Sofia">
- *             <ng-template kendoTabContent>
- *               <h3>Content 2</h3>
- *             </ng-template>
- *           </kendo-tabstrip-tab>
- *         </kendo-tabstrip>
- *     `
- * })
- *
- * class AppComponent {}
- *
+ * ```html
+ * <kendo-tabstrip>
+ *   <kendo-tabstrip-tab>
+ *     <ng-template kendoTabTitle>
+ *       <span class="custom-title">My Custom Title</span>
+ *     </ng-template>
+ *   </kendo-tabstrip-tab>
+ * </kendo-tabstrip>
  * ```
  */
 export class TabTitleDirective {

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

@@ -5,7 +5,7 @@
 import { PreventableEvent } from "@progress/kendo-angular-common";
 /**
  * Arguments for the `select` event of the TabStrip.
- * The `select` event fires when a tab is selected (clicked).
+ * The `select` event fires when tab is selected (clicked).
  */
 export class SelectEvent extends PreventableEvent {
     index;
@@ -14,6 +14,8 @@ export class SelectEvent extends PreventableEvent {
      * Constructs the event arguments for the `select` event.
      * @param index - The index of the selected tab.
      * @param title - The title of the selected tab.
+     *
+     * @hidden
      */
     constructor(index, title) {
         super();

package/esm2022/tabstrip/events/tabclose-event.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 /**
  * Arguments for the `tabClose` event of the TabStrip.
- * The `tabClose` event fires when the close button of the tab is clicked.
+ * The `tabClose` event fires when a tab is closed (clicked on the close button).
  *
  */
 export class TabCloseEvent {
@@ -14,6 +14,7 @@ export class TabCloseEvent {
      * Constructs the event arguments for the `tabClose` event.
      * @param index - The index of the closed tab.
      * @param tab - The closed tab instance
+     * @hidden
      */
     constructor(index, tab) {
         this.index = index;

package/esm2022/tabstrip/events/tabscroll-event.mjs

@@ -5,12 +5,12 @@
 import { PreventableEvent } from "@progress/kendo-angular-common";
 /**
  * Arguments for the `tabScroll` event of the TabStrip.
- * The `tabScroll` event fires when the tabs are being scrolled.
+ * The `tabScroll` event fires when you scroll the tabs.
  *
  */
 export class TabScrollEvent extends PreventableEvent {
     /**
-     * The DOM event that triggered the tab scroll.
+     * The original DOM event that caused the tab scroll.
      */
     originalEvent;
     /**

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

@@ -8,8 +8,17 @@ import { TabStripMessages } from './messages';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
- * Custom component messages override default component messages
- * ([see example]({% slug rtl_layout %})).
+ * Represents the custom messages component for the TabStrip.
+ * It allows you to override the default messages used in the TabStrip component ([see example]({% slug rtl_layout %})).
+ *
+ * ```html
+ * <kendo-tabstrip>
+ *   <kendo-tabstrip-messages
+ *     closeTitle="Close this tab"
+ *     previousTabButton="Go to previous tab"
+ *   </kendo-tabstrip-messages>
+ * </kendo-tabstrip>
+ * ```
  */
 export class TabStripCustomMessagesComponent extends TabStripMessages {
     service;

package/esm2022/tabstrip/localization/messages.mjs

@@ -10,15 +10,15 @@ import * as i0 from "@angular/core";
  */
 export class TabStripMessages extends ComponentMessages {
     /**
-     * The title for the **Close** button in the TabStrip tab.
+     * Sets the title for the **Close** button in the TabStrip tab.
      */
     closeTitle;
     /**
-     * The title for the **Previous Tab** button when the Tabstrip is scrollable.
+     * Sets the title for the **Previous Tab** button when the TabStrip is scrollable.
      */
     previousTabButton;
     /**
-     * The title for the **Next Tab** button when the Tabstrip is scrollable.
+     * Sets the title for the **Next Tab** button when the TabStrip is scrollable.
      */
     nextTabButton;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });

package/esm2022/tabstrip/models/tabstrip-tab.component.mjs

@@ -8,52 +8,65 @@ import { TabTitleDirective } from '../directives/tab-title.directive';
 import { TabTemplateDirective } from '../directives/tab.directive';
 import * as i0 from "@angular/core";
 /**
- * Represents the tab component of the TabStrip.
+ * Represents the Kendo UI TabStrip tab component.
+ * Use this component to define individual tabs within a TabStrip.
+ *
+ * @example
+ * ```html
+ * <kendo-tabstrip>
+ *   <kendo-tabstrip-tab title="Home" [selected]="true">
+ *     <ng-template kendoTabContent>
+ *       Home content here
+ *     </ng-template>
+ *   </kendo-tabstrip-tab>
+ * </kendo-tabstrip>
+ * ```
  */
 export class TabStripTabComponent {
     /**
-     * Sets the tab title ([see example](slug:tabs_tabstrip#toc-tab-titles)).
+     * Sets the title text for the tab ([see example](slug:tabs_tabstrip#toc-tab-titles)).
      */
     title;
     /**
-     * Used to disable a tab ([see example]({% slug tabs_tabstrip %}#toc-disabled-tabs)).
+     * Disables the tab and prevents user interaction ([see example]({% slug tabs_tabstrip %}#toc-disabled-tabs)).
      *
-     * Defaults to `false`.
+     * @default false
      */
     disabled = false;
     /**
-     * The CSS classes that will be rendered on the `tab` element.
-     * Supports the type of values that are supported by [ngClass](link:site.data.urls.angular['ngclassapi']).
+     * Specifies the CSS classes to apply to the `tab` element.
+     * Accepts the same values as [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
     cssClass;
     /**
-     * The CSS styles that will be rendered on the `tab` element.
-     * Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
+     * Specifies the CSS styles to apply to the `tab` element.
+     * Accepts the same values as [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
      */
     cssStyle;
     /**
-     * Determines which tab will be selected upon the initial loading of the TabStrip
+     * Selects the tab when the TabStrip loads
      * ([see example](slug:tabs_tabstrip#toc-selected-tab)).
      */
     selected;
     /**
-     * When set to `true`, a close button will be rendered inside the tab.
-     * This option overrides the value of the TabStrip `closable` option.
+     * Shows a close button inside the tab when set to `true`.
+     * This setting overrides the TabStrip `closable` option.
      */
     closable;
     /**
-     * Defines the name for an existing font icon in the Kendo UI theme for the close icon.
-     * This option overrides the value of the TabStrip `closeIcon` option.
+     * Sets the name of an existing font icon in the Kendo UI theme for the close button.
+     * This setting overrides the TabStrip `closeIcon` option.
      */
     closeIcon;
     /**
-     * Allows the usage of custom icons by defining a custom CSS class, or multiple classes separated by spaces.
-     * This option overrides the value of the TabStrip `closeIcon` option.
+     * Sets custom CSS classes for the close button icon.
+     * You can define a single class or multiple classes separated by spaces.
+     * This setting overrides the TabStrip `closeIcon` option.
      */
     closeIconClass;
     /**
-     * Defines an SVGIcon to be rendered for the close icon.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Sets an SVG icon for the close button.
+     * You can use an [existing Kendo SVG icon](slug:svgicon_list) or provide a custom one.
      */
     closeSVGIcon;
     get tabContent() {

package/esm2022/tabstrip/tabstrip.component.mjs

@@ -28,6 +28,24 @@ import * as i2 from "./tabstrip.service";
 import * as i3 from "./tabstrip-scroll.service";
 /**
  * Represents the [Kendo UI TabStrip component for Angular]({% slug overview_tabstrip %}).
+ *
+ * @example
+ * ```html
+ * <kendo-tabstrip>
+ *   <kendo-tabstrip-tab [title]="'First Tab'">
+ *     <ng-template kendoTabContent>
+ *       <p>Content of the first tab.</p>
+ *     </ng-template>
+ *   </kendo-tabstrip-tab>
+ *   <kendo-tabstrip-tab [title]="'Second Tab'">
+ *     <ng-template kendoTabContent>
+ *       <p>Content of the second tab.</p>
+ *     </ng-template>
+ *   </kendo-tabstrip-tab>
+ * </kendo-tabstrip>
+ * ```
+ * @remarks
+ * Supported children components are: {@link TabStripCustomMessagesComponent}, {@link TabStripTabComponent}.
  */
 export class TabStripComponent {
     localization;
@@ -38,6 +56,7 @@ export class TabStripComponent {
     ngZone;
     /**
      * Sets the height of the TabStrip.
+     * Accepts a CSS size value, such as `100px`, `50%`, or `auto`.
      */
     set height(value) {
         this._height = value;
@@ -47,7 +66,7 @@ export class TabStripComponent {
         return this._height;
     }
     /**
-     * Enables the tab animation.
+     * Sets whether the TabStrip should animate when switching tabs.
      *
      * @default true
      */
@@ -55,34 +74,30 @@ export class TabStripComponent {
     /**
      * Sets the alignment of the tabs.
      *
-     * @default: 'start'
+     * @default 'start'
      */
     tabAlignment = 'start';
     /**
-     * Sets the position of the tabs. Defaults to `top`.
+     * Sets the position of the tabs.
      *
      * @default 'top'
      */
     tabPosition = 'top';
     /**
-     * When set to `true`, the component renders all tabs and they are persisted in the DOM.
-     * By default, `keepTabContent` is `false`.
+     * When set to `true`, the tabs are persisted in the DOM and their content is not destroyed when they are not selected ([see example](slug:rendering_tabstrip)).
      *
      * @default false
      */
     keepTabContent = false;
     /**
-     * When set to `true`, a close button will be rendered inside each tab.
-     * By default, `closable` is `false`.
+     * When set to `true`, renders a close button inside each tab.
      *
      * @default false
      */
     closable = false;
     /**
-     * Enables the scrolling of the tab list. When set to `true` and the total size of all tabs
-     * is greater than the size of the TabStrip container, scroll buttons will be rendered on each end of the tab list.
-     *
-     * By default, `scrollable` is `false`.
+     * Enables scrolling of the tab list.
+     * When set to `true` and the total size of all tabs exceeds the size of the TabStrip container, scroll buttons appear on each end of the tab list.
      *
      * @default false
      */
@@ -99,14 +114,9 @@ export class TabStripComponent {
         return this._scrollableSettings;
     }
     /**
-     * Specifies the size of the TabStrip.
-     * ([see example](slug:api_layout_tabstripcomponent#toc-size).
-     *
-     * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
-     * * `none`
+     * Sets the size of the TabStrip.
+     * [See example](slug:api_layout_tabstripcomponent#toc-size).
+     * @default 'medium'
      */
     set size(value) {
         switch (value) {
@@ -137,16 +147,17 @@ export class TabStripComponent {
         return this._size;
     }
     /**
-     * Defines the name for an existing font icon in the Kendo UI theme for the close icon.
+     * Defines the name of an existing font icon in the Kendo UI theme for the close icon.
+     * @default 'x'
      */
     closeIcon = 'x';
     /**
-     * Allows defining a custom CSS class, or multiple classes separated by spaces, which will be applied to the close button.
+     * Defines a custom CSS class, or multiple classes separated by spaces, applied to the close button.
      */
     closeIconClass;
     /**
-     * Defines an SVGIcon to be rendered for the close icon.
-     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     * Defines an SVGIcon to render for the close icon.
+     * The input accepts either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
      */
     set closeSVGIcon(icon) {
         if (isDevMode() && icon && this.closeIcon && this.closeIcon !== 'x') {
@@ -158,23 +169,23 @@ export class TabStripComponent {
         return this._closeSVGIcon;
     }
     /**
-     * Determines whether the content associated with each tab will be rendered.
+     * If set to `false`, the content area is hidden, but the tab headers are still visible.
      *
      * @default true
      */
     showContentArea = true;
     /**
-     * Fires each time the user selects a tab ([see example](slug:events_tabstrip)).
+     * Fires each time a tab is selected.
      * The event data contains the index of the selected tab and its title.
      */
     tabSelect = new EventEmitter();
     /**
-     * Fires each time the user closes a tab.
+     * Fires each time a tab is closed.
      * The event data contains the index of the closed tab and its instance.
      */
     tabClose = new EventEmitter();
     /**
-     * Fires each time the user scrolls the TabStrip list.
+     * Fires when the tab list is scrolled.
      * The event is preventable.
      */
     tabScroll = new EventEmitter();
@@ -341,8 +352,9 @@ export class TabStripComponent {
         return isTablistHorizontal(this.tabPosition) ? 'k-hstack' : 'k-vstack';
     }
     /**
-     * Allows the user to select a tab programmatically.
-     * @param {number} index - The index of the tab that will be selected.
+     * Allows you to programmatically select a tab by its index.
+     * If the tab is disabled, it will not be selected.
+     * @param {number} index The index of the tab that will be selected.
      */
     selectTab(index) {
         const tab = getTabByIndex(this.tabs, index);
@@ -561,10 +573,10 @@ export class TabStripComponent {
                 <ul role="tablist" #tablist
                     class="k-reset k-tabstrip-items"
                     [ngClass]="{
-                        'k-tabstrip-items-start': tabAlignment === 'start', 
-                        'k-tabstrip-items-center': tabAlignment === 'center', 
-                        'k-tabstrip-items-end': tabAlignment === 'end', 
-                        'k-tabstrip-items-stretched': tabAlignment === 'stretched', 
+                        'k-tabstrip-items-start': tabAlignment === 'start',
+                        'k-tabstrip-items-center': tabAlignment === 'center',
+                        'k-tabstrip-items-end': tabAlignment === 'end',
+                        'k-tabstrip-items-stretched': tabAlignment === 'stretched',
                         'k-tabstrip-items-justify': tabAlignment === 'justify',
                         'k-tabstrip-items-scroll': mouseScrollEnabled
                     }"
@@ -744,10 +756,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 <ul role="tablist" #tablist
                     class="k-reset k-tabstrip-items"
                     [ngClass]="{
-                        'k-tabstrip-items-start': tabAlignment === 'start', 
-                        'k-tabstrip-items-center': tabAlignment === 'center', 
-                        'k-tabstrip-items-end': tabAlignment === 'end', 
-                        'k-tabstrip-items-stretched': tabAlignment === 'stretched', 
+                        'k-tabstrip-items-start': tabAlignment === 'start',
+                        'k-tabstrip-items-center': tabAlignment === 'center',
+                        'k-tabstrip-items-end': tabAlignment === 'end',
+                        'k-tabstrip-items-stretched': tabAlignment === 'stretched',
                         'k-tabstrip-items-justify': tabAlignment === 'justify',
                         'k-tabstrip-items-scroll': mouseScrollEnabled
                     }"

package/esm2022/tabstrip.module.mjs

@@ -12,14 +12,20 @@ import * as i4 from "./tabstrip/directives/tab-title.directive";
 import * as i5 from "./tabstrip/localization/custom-messages.component";
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the TabStrip component.
+ * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the TabStrip component.
  *
- * The module registers:
- * - `TabStripComponent`—The `TabStrip` component class.
- * - `TabStripTabComponent`—The `TabStripTab` component class.
- * - `TabContentDirective`&mdash;The tab content directive used on the `<ng-template>` tag.
- * - `TabTitleDirective`&mdash;The tab title directive used on the `<ng-template>` tag.
+ * Use this module to add the TabStrip component to your NgModule-based Angular application.
+ *
+ * @example
+ * ```typescript
+ * import { TabStripModule } from '@progress/kendo-angular-layout';
+ * import { NgModule } from '@angular/core';
+ *
+ * @NgModule({
+ *   imports: [TabStripModule]
+ * })
+ * export class AppModule { }
+ * ```
  */
 export class TabStripModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });

package/esm2022/tilelayout/reorder-event.mjs

@@ -4,8 +4,9 @@
 *-------------------------------------------------------------------------------------------*/
 import { PreventableEvent } from '@progress/kendo-angular-common';
 /**
- * Arguments for the `reorder` event. The event fires when the order or starting
- * positions of the items is changed via the UI. If you prevent the event, the change is canceled ([see example]({% slug reordering_tilelayout %}#toc-handling-the-reorder-event)).
+ * Arguments for the `reorder` event.
+ * The event fires when you change the order or starting positions of items through the UI.
+ * You can prevent this event to cancel the reorder operation.
  */
 export class TileLayoutReorderEvent extends PreventableEvent {
     item;

package/esm2022/tilelayout/resize-event.mjs

@@ -4,8 +4,9 @@
 *-------------------------------------------------------------------------------------------*/
 import { PreventableEvent } from '@progress/kendo-angular-common';
 /**
- * Arguments for the `resize` event. The `resize` event fires when any item size
- * is changed from the UI. If you cancel the event, the change is prevented ([see example]({% slug resizing_tilelayout %}#toc-handling-the-resize-event)).
+ * Arguments for the `resize` event.
+ * The `resize` event fires when you change any item size through the UI.
+ * You can prevent this event to stop the resize operation.
  */
 export class TileLayoutResizeEvent extends PreventableEvent {
     item;

package/esm2022/tilelayout/tilelayout-item-body.component.mjs

@@ -5,7 +5,16 @@
 import { Component, HostBinding } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Holds the main content of the TileLayoutItem component.
+ * Contains the main content of the `TileLayoutItem` component.
+ *
+ * @example
+ * ```html
+ * <kendo-tilelayout-item>
+ *   <kendo-tilelayout-item-body>
+ *     <p>Main content goes here</p>
+ *   </kendo-tilelayout-item-body>
+ * </kendo-tilelayout-item>
+ * ```
  */
 export class TileLayoutItemBodyComponent {
     hostClass = true;

package/esm2022/tilelayout/tilelayout-item-header.component.mjs

@@ -5,8 +5,18 @@
 import { Component, HostBinding } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Holds the content of the header section of the TileLayoutItem component.
- * This is the area which can be dragged to reorder the items if reordering is enabled for this item.
+ * Contains the header content of the `TileLayoutItem` component.
+ * You can drag this area to reorder items when reordering is enabled.
+ *
+ * @example
+ * ```html
+ * <kendo-tilelayout-item>
+ *   <kendo-tilelayout-item-header>
+ *     <h3>Custom Header</h3>
+ *   </kendo-tilelayout-item-header>
+ *   <p>Item content</p>
+ * </kendo-tilelayout-item>
+ * ```
  */
 export class TileLayoutItemHeaderComponent {
     hostClass = true;

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

@@ -19,6 +19,17 @@ import * as i2 from "./dragging-service";
 import * as i3 from "./keyboard-navigation.service";
 /**
  * Represents a tile item within the TileLayoutComponent.
+ *
+ * @example
+ * ```html
+ * <kendo-tilelayout>
+ *   <kendo-tilelayout-item [title]="'Item 1'" [colSpan]="2">
+ *     <p>Item content goes here</p>
+ *   </kendo-tilelayout-item>
+ * </kendo-tilelayout>
+ * ```
+ * @remarks
+ * Supported children components are: {@link TileLayoutItemBodyComponent}, {@link TileLayoutItemHeaderComponent}.
  */
 export class TileLayoutItemComponent {
     elem;
@@ -28,23 +39,22 @@ export class TileLayoutItemComponent {
     draggingService;
     keyboardNavigationService;
     /**
-     * The title that will be rendered in the item header ([see example]({% slug tiles_tilelayout %}#toc-tiles-configuration)).
+     * Sets the title text that appears in the item header ([see example]({% slug tiles_tilelayout %}#toc-tiles-configuration)).
      */
     title;
     /**
-     * Determines how many rows will the tile item span ([see example](slug:resizing_tilelayout#programmatic-resizing)).
+     * Sets how many rows the tile item spans ([see example](slug:resizing_tilelayout#programmatic-resizing)).
      * @default 1
      */
     rowSpan = 1;
     /**
-     * Determines how many columns will the tile item span ([see example](slug:resizing_tilelayout#programmatic-resizing)).
+     *  Sets how many columns the tile item spans ([see example](slug:resizing_tilelayout#programmatic-resizing)).
      * @default 1
      */
     colSpan = 1;
     /**
-     * Determines the order of the tile items within the TileLayout.
-     * If not set, the items will receive increasing sequential order in accordance with
-     * their position in the DOM when initially rendered.
+     * Sets the order of the tile item within the TileLayout.
+     * When not set, items receive increasing order values based on their DOM position.
      */
     set order(value) {
         this._order = value;
@@ -54,21 +64,21 @@ export class TileLayoutItemComponent {
         return this._order;
     }
     /**
-     * Sets the starting column of the item ([see example](slug:tiles_tilelayout#size-and-position)).
+     * Sets the starting column position of the item ([see example](slug:tiles_tilelayout#size-and-position)).
      */
     col;
     /**
-     * Sets the starting row of the item ([see example](slug:tiles_tilelayout#size-and-position)).
+     * Sets the starting row position of the item ([see example](slug:tiles_tilelayout#size-and-position)).
      */
     row;
     /**
-     * Determines whether the item can be reordered. By default all items are reorderable when the [reorderable]({% slug api_layout_tilelayoutcomponent %}#toc-reorderable) property of the TileLayoutComponent is set to `true` ([see example]({% slug reordering_tilelayout %}#toc-disabling-reordering)).
+     * Enables or disables individual item reordering.
      *
      * @default true
      */
     reorderable = true;
     /**
-     * Determines whether the item can be resized. By default all items are resizable when the [resizable]({% slug api_layout_tilelayoutcomponent %}#resizable) property of the TileLayoutComponent is set to `true` ([see example](slug:resizing_tilelayout#toc-disabling-resizing)).
+     * Enables or disables individual item resizing.
      * @default true
      */
     resizable = true;