@progress/kendo-angular-treelist 12.0.1-develop.2 → 12.0.1-develop.4

package/binding-directives/flat-binding.directive.d.ts

@@ -7,7 +7,7 @@ import { DataBoundTreeComponent } from './data-bound-tree-component';
 import * as i0 from "@angular/core";
 /**
  * A directive which binds the TreeList to an array of objects by using
- * an ID and parentID field to define the hierarchy.
+ * an `idField` and `parentIDField` field to define the hierarchy.
  *
  * The directive encapsulates the in-memory handling of data operations such as
  * [sorting]({% slug sorting_treelist %}), [aggregation]({% slug treelist_with_aggregates %})

package/binding-directives/hierarchy-binding.directive.d.ts

@@ -10,7 +10,7 @@ import * as i0 from "@angular/core";
  *
  * The directive encapsulates the in-memory handling of data operations such as
  * [sorting]({% slug sorting_treelist %}), [aggregation]({% slug treelist_with_aggregates %})
- * and [filtering]({% slug filtering_treelist %}) ([more information and examples]({% slug databinding_treelist %})).
+ * and [filtering]({% slug filtering_treelist %}) ([more information and examples](slug:databinding_treelist#toc-binding-to-hierarchical-data)).
  */
 export declare class HierarchyBindingDirective extends BaseBindingDirective {
     protected component: DataBoundTreeComponent;

package/column-menu/column-menu-item-content-template.directive.d.ts

@@ -11,12 +11,20 @@ import * as i0 from "@angular/core";
  * To define the content template, nest an `<ng-template>` tag with the
  * `kendoTreeListColumnMenuItemContentTemplate` directive inside a `<kendo-treelist-columnmenu-item>`.
  *
- * {% meta height:500 %}
- * {% embed_file column-menu/template-item-content/app.component.ts preview %}
- * {% embed_file column-menu/template-item-content/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
+ * @example
+ * ```html
+ * <kendo-treelist>
+ *   <kendo-treelist-column field="ProductName">
+ *     <ng-template kendoTreeListColumnMenuTemplate>
+ *       <kendo-treelist-columnmenu-item text="Item Text" [expanded]="true">
+ *         <ng-template kendoTreeListColumnMenuItemContentTemplate>
+ *           Item Content
+ *         </ng-template>
+ *       </kendo-treelist-columnmenu-item>
+ *     </ng-template>
+ *   </kendo-treelist-column>
+ * </kendo-treelist>
+ * ```
  */
 export declare class ColumnMenuItemContentTemplateDirective {
     templateRef: TemplateRef<any>;

package/column-menu/column-menu-template.directive.d.ts

@@ -14,12 +14,21 @@ import * as i0 from "@angular/core";
  * - `service`—Represents the [ColumnMenuService]({% slug api_treelist_columnmenuservice %}).
  * - `column`—Represents the TreeList column.
  *
- * {% meta height:500 %}
- * {% embed_file column-menu/template/app.component.ts preview %}
- * {% embed_file column-menu/template/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
+ * @example
+ * ```html
+ * <kendo-treelist ... >
+ *   <ng-template kendoTreeListColumnMenuTemplate let-service="service">
+ *     <kendo-treelist-columnmenu-sort [service]="service">
+ *     </kendo-treelist-columnmenu-sort>
+ *   </ng-template>
+ *   <kendo-treelist-column field="name">
+ *     <ng-template kendoTreeListColumnMenuTemplate let-service="service">
+ *       <kendo-treelist-columnmenu-sort [service]="service">
+ *       </kendo-treelist-columnmenu-sort>
+ *     </ng-template>
+ *   </kendo-treelist-column>
+ * </kendo-treelist>
+ * ```
  */
 export declare class ColumnMenuTemplateDirective {
     templateRef: TemplateRef<any>;

package/editing/add-command.directive.d.ts

@@ -9,28 +9,19 @@ import { BaseCommandDirective } from './base-command.directive';
 import * as i0 from "@angular/core";
 /**
  * Represents the command for adding a new item to the TreeList. You can apply this directive to any
- * `button` element inside a [`ToolbarTemplate`]({% slug api_treelist_commandcolumncomponent %}) or
+ * `button` element inside a [`ToolbarTemplate`](slug:toolbartemplate_treelist) or
  * inside a [`CommandColumnComponent`]({% slug api_treelist_commandcolumncomponent %}).
  *
  * When an associated button with the directive is clicked, the
  * [`add`]({% slug api_treelist_treelistcomponent %}#toc-add) event is triggered
- * ([see example]({% slug editing_treelist %})).
+ * ([see example](slug:custom_editors_editing_treelist)).
  *
- * > When the row is in the edit mode, the button with `kendoTreeListAddCommand` is automatically hidden.
- *
- * @example
- * ```html-no-run
- * <kendo-treelist>
- *    <ng-template kendoTreeListToolbarTemplate>
- *       <button kendoTreeListAddCommand>Add new</button>
- *    </ng-template>
- * </kendo-treelist>
- * ```
+ * When the row is in the `edit mode`, the button with `kendoTreeListAddCommand` is automatically hidden.
  *
  * When added to the command column, the directive takes as input the `cellContext` from the cell template.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-treelist>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">

package/editing/cancel-command.directive.d.ts

@@ -12,13 +12,13 @@ import * as i0 from "@angular/core";
  * element inside a [`CommandColumnComponent`]({% slug api_treelist_commandcolumncomponent %}).
  * When an associated button with the directive is clicked, the
  * [`cancel`]({% slug api_treelist_treelistcomponent %}#toc-cancel) event
- * is triggered ([see example]({% slug editing_treelist %})).
+ * is triggered ([see example](slug:custom_editors_editing_treelist)).
  *
- * > * When the row is not in the edit mode, the button with the `kendoTreeListCancelCommand` is automatically hidden.
- * > * The directive takes as input the `cellContext` from the cell template.
+ * When the row is not in the `edit` mode, the button with the `kendoTreeListCancelCommand` is automatically hidden.
+ * The directive takes as input the `cellContext` from the cell template.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-treelist>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
@@ -27,19 +27,6 @@ import * as i0 from "@angular/core";
  *   </kendo-treelist-command-column>
  * </kendo-treelist>
  * ```
- *
- * You can control the content of the button based on the state of the row.
- *
- * @example
- * ```html-no-run
- * <kendo-treelist>
- *   <kendo-treelist-command-column title="command">
- *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext" let-isNew="isNew">
- *       <button [kendoTreeListCancelCommand]="cellContext">{{isNew ? 'Discard' : 'Cancel changes'}}</button>
- *     </ng-template>
- *   </kendo-treelist-command-column>
- * </kendo-treelist>
- * ```
  */
 export declare class CancelCommandDirective extends BaseCommandDirective {
     /**

package/editing/edit-command.directive.d.ts

@@ -12,17 +12,17 @@ import * as i0 from "@angular/core";
  * element inside a [`CommandColumnComponent`]({% slug api_treelist_commandcolumncomponent %}).
  * When an associated button with the directive is clicked, the
  * [`edit`]({% slug api_treelist_treelistcomponent %}#toc-edit) event
- * is triggered ([see example]({% slug editing_treelist %})).
+ * is triggered ([see example](slug:custom_editors_editing_treelist)).
  *
- * > * When the row is in the edit mode, the button with `kendoTreeListEditCommand` is automatically hidden.
- * > * The directive takes as input the `cellContext` from the cell template.
+ * When the row is in the `edit` mode, the button with `kendoTreeListEditCommand` is automatically hidden.
+ * The directive takes as input the `cellContext` from the cell template.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-treelist>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
- *       <button [kendoTreeListEditCommand]="cellContext" class="k-primary">Edit</button>
+ *       <button [kendoTreeListEditCommand]="cellContext">Edit</button>
  *     </ng-template>
  *   </kendo-treelist-command-column>
  * </kendo-treelist>

package/editing/edit-template.directive.d.ts

@@ -13,8 +13,7 @@ import * as i0 from "@angular/core";
  * - `column`—The current column instance.
  * - `dataItem`—The current data item.
  * - `cellContext`—An object used to pass context information to built-in directives.
- * - `formGroup`—The current [`FormGroup`](link:site.data.urls.angular['formgroupapi']).
- * If you use the TreeList inside [Template-Driven Forms](link:site.data.urls.angular['forms']), it will be `undefined`.
+ * - `formGroup`—The current [`FormGroup`](link:site.data.urls.angular['formgroupapi']). If you use the TreeList inside [Template-Driven Forms](link:site.data.urls.angular['forms']), `formGroup` will be `undefined`.
  * - `isNew`—The state of the current item.
  * - `rowIndex`—The current row index. If inside a new item row, `rowIndex` is `-1`.
  */

package/editing/remove-command.directive.d.ts

@@ -14,11 +14,11 @@ import * as i0 from "@angular/core";
  * [`remove` event]({% slug api_treelist_treelistcomponent %}#toc-remove)
  * is triggered ([see example]({% slug editing_reactive_forms_treelist %})).
  *
- * > * When the row is in the edit mode, the button with the `kendoTreeListRemoveCommand` is automatically hidden.
- * > * The directive takes as input the `cellContext` from the cell template.
+ *  When the row is in the `edit` mode, the button with the `kendoTreeListRemoveCommand` is automatically hidden.
+ *  The directive takes as input the `cellContext` from the cell template.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-treelist>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">

package/editing/save-command.directive.d.ts

@@ -14,11 +14,11 @@ import * as i0 from "@angular/core";
  * [`save`]({% slug api_treelist_treelistcomponent %}#toc-save) event
  * is triggered ([see example]({% slug editing_treelist %})).
  *
- * > * When the row is not in the edit mode, the button with `kendoTreeListSaveCommand` is automatically hidden.
- * > * The directive takes as input the `cellContext` from the cell template.
+ * When the row is not in the `edit` mode, the button with `kendoTreeListSaveCommand` is automatically hidden.
+ * The directive takes as input the `cellContext` from the cell template.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-treelist>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
@@ -27,19 +27,6 @@ import * as i0 from "@angular/core";
  *   </kendo-treelist-command-column>
  * </kendo-treelist>
  * ```
- *
- * You can control the content of the button based on the state of the row.
- *
- * @example
- * ```html-no-run
- * <kendo-treelist>
- *   <kendo-treelist-command-column title="command">
- *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext" let-isNew="isNew">
- *       <button [kendoTreeListSaveCommand]="cellContext">{{isNew ? 'Add' : 'Update'}}</button>
- *     </ng-template>
- *   </kendo-treelist-command-column>
- * </kendo-treelist>
- * ```
  */
 export declare class SaveCommandDirective extends BaseCommandDirective {
     /**

package/editing-directives/in-cell-editing.directive.d.ts

@@ -8,7 +8,7 @@ import { CreateFormGroup } from '../common/create-form-group';
 import * as i0 from "@angular/core";
 /**
  * A directive which encapsulates the editing operations of the TreeList when using the in-cell
- * editing with Reactive Forms ([see example]({% slug editing_directives_treelist %}#toc-the-incell-directive)).
+ * editing with Reactive Forms ([see example](slug:editing_directives_treelist#toc-in-cell-editing-directive)).
  */
 export declare class InCellEditingDirective extends EditingDirectiveBase {
     protected treelist: TreeListComponent;

package/editing-directives/template-editing.directive.d.ts

@@ -7,7 +7,7 @@ import { TreeListComponent } from '../treelist.component';
 import * as i0 from "@angular/core";
 /**
  * A directive which encapsulates the editing operations of the TreeList when using
- * the Template-Driven Angular Forms ([see example]({% slug editing_directives_treelist %}#toc-the-template-directive)).
+ * the Template-Driven Angular Forms ([see example](slug:editing_directives_treelist#toc-template-editing-directive)).
  */
 export declare class TemplateEditingDirective extends RowEditingDirectiveBase {
     protected treelist: TreeListComponent;

package/esm2020/binding-directives/flat-binding.directive.mjs

@@ -13,7 +13,7 @@ import * as i1 from "./data-bound-tree-component";
 const ROOT_ID = null;
 /**
  * A directive which binds the TreeList to an array of objects by using
- * an ID and parentID field to define the hierarchy.
+ * an `idField` and `parentIDField` field to define the hierarchy.
  *
  * The directive encapsulates the in-memory handling of data operations such as
  * [sorting]({% slug sorting_treelist %}), [aggregation]({% slug treelist_with_aggregates %})

package/esm2020/binding-directives/hierarchy-binding.directive.mjs

@@ -14,7 +14,7 @@ import * as i1 from "./data-bound-tree-component";
  *
  * The directive encapsulates the in-memory handling of data operations such as
  * [sorting]({% slug sorting_treelist %}), [aggregation]({% slug treelist_with_aggregates %})
- * and [filtering]({% slug filtering_treelist %}) ([more information and examples]({% slug databinding_treelist %})).
+ * and [filtering]({% slug filtering_treelist %}) ([more information and examples](slug:databinding_treelist#toc-binding-to-hierarchical-data)).
  */
 export class HierarchyBindingDirective extends BaseBindingDirective {
     constructor(component) {

package/esm2020/column-menu/column-menu-item-content-template.directive.mjs

@@ -11,12 +11,20 @@ import * as i0 from "@angular/core";
  * To define the content template, nest an `<ng-template>` tag with the
  * `kendoTreeListColumnMenuItemContentTemplate` directive inside a `<kendo-treelist-columnmenu-item>`.
  *
- * {% meta height:500 %}
- * {% embed_file column-menu/template-item-content/app.component.ts preview %}
- * {% embed_file column-menu/template-item-content/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
+ * @example
+ * ```html
+ * <kendo-treelist>
+ *   <kendo-treelist-column field="ProductName">
+ *     <ng-template kendoTreeListColumnMenuTemplate>
+ *       <kendo-treelist-columnmenu-item text="Item Text" [expanded]="true">
+ *         <ng-template kendoTreeListColumnMenuItemContentTemplate>
+ *           Item Content
+ *         </ng-template>
+ *       </kendo-treelist-columnmenu-item>
+ *     </ng-template>
+ *   </kendo-treelist-column>
+ * </kendo-treelist>
+ * ```
  */
 export class ColumnMenuItemContentTemplateDirective {
     constructor(templateRef) {

package/esm2020/column-menu/column-menu-template.directive.mjs

@@ -14,12 +14,21 @@ import * as i0 from "@angular/core";
  * - `service`—Represents the [ColumnMenuService]({% slug api_treelist_columnmenuservice %}).
  * - `column`—Represents the TreeList column.
  *
- * {% meta height:500 %}
- * {% embed_file column-menu/template/app.component.ts preview %}
- * {% embed_file column-menu/template/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
+ * @example
+ * ```html
+ * <kendo-treelist ... >
+ *   <ng-template kendoTreeListColumnMenuTemplate let-service="service">
+ *     <kendo-treelist-columnmenu-sort [service]="service">
+ *     </kendo-treelist-columnmenu-sort>
+ *   </ng-template>
+ *   <kendo-treelist-column field="name">
+ *     <ng-template kendoTreeListColumnMenuTemplate let-service="service">
+ *       <kendo-treelist-columnmenu-sort [service]="service">
+ *       </kendo-treelist-columnmenu-sort>
+ *     </ng-template>
+ *   </kendo-treelist-column>
+ * </kendo-treelist>
+ * ```
  */
 export class ColumnMenuTemplateDirective {
     constructor(templateRef) {

package/esm2020/editing/add-command.directive.mjs

@@ -13,28 +13,19 @@ import * as i3 from "@progress/kendo-angular-icons";
 import * as i4 from "@angular/common";
 /**
  * Represents the command for adding a new item to the TreeList. You can apply this directive to any
- * `button` element inside a [`ToolbarTemplate`]({% slug api_treelist_commandcolumncomponent %}) or
+ * `button` element inside a [`ToolbarTemplate`](slug:toolbartemplate_treelist) or
  * inside a [`CommandColumnComponent`]({% slug api_treelist_commandcolumncomponent %}).
  *
  * When an associated button with the directive is clicked, the
  * [`add`]({% slug api_treelist_treelistcomponent %}#toc-add) event is triggered
- * ([see example]({% slug editing_treelist %})).
+ * ([see example](slug:custom_editors_editing_treelist)).
  *
- * > When the row is in the edit mode, the button with `kendoTreeListAddCommand` is automatically hidden.
- *
- * @example
- * ```html-no-run
- * <kendo-treelist>
- *    <ng-template kendoTreeListToolbarTemplate>
- *       <button kendoTreeListAddCommand>Add new</button>
- *    </ng-template>
- * </kendo-treelist>
- * ```
+ * When the row is in the `edit mode`, the button with `kendoTreeListAddCommand` is automatically hidden.
  *
  * When added to the command column, the directive takes as input the `cellContext` from the cell template.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-treelist>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">

package/esm2020/editing/cancel-command.directive.mjs

@@ -16,13 +16,13 @@ import * as i4 from "@angular/common";
  * element inside a [`CommandColumnComponent`]({% slug api_treelist_commandcolumncomponent %}).
  * When an associated button with the directive is clicked, the
  * [`cancel`]({% slug api_treelist_treelistcomponent %}#toc-cancel) event
- * is triggered ([see example]({% slug editing_treelist %})).
+ * is triggered ([see example](slug:custom_editors_editing_treelist)).
  *
- * > * When the row is not in the edit mode, the button with the `kendoTreeListCancelCommand` is automatically hidden.
- * > * The directive takes as input the `cellContext` from the cell template.
+ * When the row is not in the `edit` mode, the button with the `kendoTreeListCancelCommand` is automatically hidden.
+ * The directive takes as input the `cellContext` from the cell template.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-treelist>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
@@ -31,19 +31,6 @@ import * as i4 from "@angular/common";
  *   </kendo-treelist-command-column>
  * </kendo-treelist>
  * ```
- *
- * You can control the content of the button based on the state of the row.
- *
- * @example
- * ```html-no-run
- * <kendo-treelist>
- *   <kendo-treelist-command-column title="command">
- *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext" let-isNew="isNew">
- *       <button [kendoTreeListCancelCommand]="cellContext">{{isNew ? 'Discard' : 'Cancel changes'}}</button>
- *     </ng-template>
- *   </kendo-treelist-command-column>
- * </kendo-treelist>
- * ```
  */
 export class CancelCommandDirective extends BaseCommandDirective {
     constructor(editService, element, renderer, localization, ngZone) {

package/esm2020/editing/edit-command.directive.mjs

@@ -16,17 +16,17 @@ import * as i4 from "@angular/common";
  * element inside a [`CommandColumnComponent`]({% slug api_treelist_commandcolumncomponent %}).
  * When an associated button with the directive is clicked, the
  * [`edit`]({% slug api_treelist_treelistcomponent %}#toc-edit) event
- * is triggered ([see example]({% slug editing_treelist %})).
+ * is triggered ([see example](slug:custom_editors_editing_treelist)).
  *
- * > * When the row is in the edit mode, the button with `kendoTreeListEditCommand` is automatically hidden.
- * > * The directive takes as input the `cellContext` from the cell template.
+ * When the row is in the `edit` mode, the button with `kendoTreeListEditCommand` is automatically hidden.
+ * The directive takes as input the `cellContext` from the cell template.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-treelist>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
- *       <button [kendoTreeListEditCommand]="cellContext" class="k-primary">Edit</button>
+ *       <button [kendoTreeListEditCommand]="cellContext">Edit</button>
  *     </ng-template>
  *   </kendo-treelist-command-column>
  * </kendo-treelist>

package/esm2020/editing/edit-template.directive.mjs

@@ -13,8 +13,7 @@ import * as i0 from "@angular/core";
  * - `column`—The current column instance.
  * - `dataItem`—The current data item.
  * - `cellContext`—An object used to pass context information to built-in directives.
- * - `formGroup`—The current [`FormGroup`](link:site.data.urls.angular['formgroupapi']).
- * If you use the TreeList inside [Template-Driven Forms](link:site.data.urls.angular['forms']), it will be `undefined`.
+ * - `formGroup`—The current [`FormGroup`](link:site.data.urls.angular['formgroupapi']). If you use the TreeList inside [Template-Driven Forms](link:site.data.urls.angular['forms']), `formGroup` will be `undefined`.
  * - `isNew`—The state of the current item.
  * - `rowIndex`—The current row index. If inside a new item row, `rowIndex` is `-1`.
  */

package/esm2020/editing/remove-command.directive.mjs

@@ -18,11 +18,11 @@ import * as i4 from "@angular/common";
  * [`remove` event]({% slug api_treelist_treelistcomponent %}#toc-remove)
  * is triggered ([see example]({% slug editing_reactive_forms_treelist %})).
  *
- * > * When the row is in the edit mode, the button with the `kendoTreeListRemoveCommand` is automatically hidden.
- * > * The directive takes as input the `cellContext` from the cell template.
+ *  When the row is in the `edit` mode, the button with the `kendoTreeListRemoveCommand` is automatically hidden.
+ *  The directive takes as input the `cellContext` from the cell template.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-treelist>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">

package/esm2020/editing/save-command.directive.mjs

@@ -18,11 +18,11 @@ import * as i4 from "@angular/common";
  * [`save`]({% slug api_treelist_treelistcomponent %}#toc-save) event
  * is triggered ([see example]({% slug editing_treelist %})).
  *
- * > * When the row is not in the edit mode, the button with `kendoTreeListSaveCommand` is automatically hidden.
- * > * The directive takes as input the `cellContext` from the cell template.
+ * When the row is not in the `edit` mode, the button with `kendoTreeListSaveCommand` is automatically hidden.
+ * The directive takes as input the `cellContext` from the cell template.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-treelist>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
@@ -31,19 +31,6 @@ import * as i4 from "@angular/common";
  *   </kendo-treelist-command-column>
  * </kendo-treelist>
  * ```
- *
- * You can control the content of the button based on the state of the row.
- *
- * @example
- * ```html-no-run
- * <kendo-treelist>
- *   <kendo-treelist-command-column title="command">
- *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext" let-isNew="isNew">
- *       <button [kendoTreeListSaveCommand]="cellContext">{{isNew ? 'Add' : 'Update'}}</button>
- *     </ng-template>
- *   </kendo-treelist-command-column>
- * </kendo-treelist>
- * ```
  */
 export class SaveCommandDirective extends BaseCommandDirective {
     constructor(editService, element, renderer, localization, ngZone) {

package/esm2020/editing-directives/in-cell-editing.directive.mjs

@@ -10,7 +10,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "../treelist.component";
 /**
  * A directive which encapsulates the editing operations of the TreeList when using the in-cell
- * editing with Reactive Forms ([see example]({% slug editing_directives_treelist %}#toc-the-incell-directive)).
+ * editing with Reactive Forms ([see example](slug:editing_directives_treelist#toc-in-cell-editing-directive)).
  */
 export class InCellEditingDirective extends EditingDirectiveBase {
     constructor(treelist) {

package/esm2020/editing-directives/template-editing.directive.mjs

@@ -9,7 +9,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "../treelist.component";
 /**
  * A directive which encapsulates the editing operations of the TreeList when using
- * the Template-Driven Angular Forms ([see example]({% slug editing_directives_treelist %}#toc-the-template-directive)).
+ * the Template-Driven Angular Forms ([see example](slug:editing_directives_treelist#toc-template-editing-directive)).
  */
 export class TemplateEditingDirective extends RowEditingDirectiveBase {
     constructor(treelist) {

package/esm2020/excel/excel-command.directive.mjs

@@ -14,19 +14,18 @@ import * as i4 from "@angular/common";
 /**
  * Represents the `export-to-Excel` command of the TreeList. You can apply this
  * directive to any `button` element inside a
- * [`ToolbarTemplate`]({% slug api_treelist_commandcolumncomponent %}).
+ * [`ToolbarTemplate`](slug:toolbartemplate_treelist).
  * When the user clicks a button associated with the directive, the
  * [`excelExport`]({% slug api_treelist_treelistcomponent %}#toc-excelexport) event
  * fires ([see example]({% slug excelexport_treelist %})).
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-treelist>
- *      <ng-template kendoTreeListToolbarTemplate>
- *          <button kendoTreeListExcelCommand>Export to PDF</button>
- *      </ng-template>
- *      <kendo-treelist-excel fileName="TreeList.xlsx">
- *      </kendo-treelist-excel>
+ *   <ng-template kendoTreeListToolbarTemplate>
+ *     <button kendoTreeListExcelCommand>Export to PDF</button>
+ *   </ng-template>
+ *   <kendo-treelist-excel fileName="TreeList.xlsx"> </kendo-treelist-excel>
  * </kendo-treelist>
  * ```
  */

package/esm2020/expand-state/expandable.directive.mjs

@@ -9,7 +9,15 @@ import { isString } from '../utils';
 import * as i0 from "@angular/core";
 import * as i1 from "./expandable-tree-component";
 /**
- * A directive which controls the expanded state of the items.
+ * A directive which controls the expanded state of the items. [See example](slug:treelist_expanded_state#toc-built-in-directive).
+ *
+ * @example
+ * ```html
+ * <kendo-treelist ...
+ *   [kendoTreeListFlatBinding]="data"
+ *   kendoTreeListExpandable> ...
+ * </kendo-treelist>
+ * ```
  */
 export class ExpandableDirective {
     constructor(component) {

package/esm2020/navigation/focusable.directive.mjs

@@ -13,10 +13,10 @@ import * as i1 from "./focus-group";
  *
  * The directive takes as input the `cellContext` from the cell template.
  *
- * ```ts-no-run
+ * ```html
  * <kendo-treelist-column>
  *   <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
- *     <input type="button" kendoButton [kendoTreeListFocusable]="cellContext" value="Focus me!" />
+ *     <input [kendoTreeListFocusable]="cellContext" />
  *   </ng-template>
  * </kendo-treelist-column>
  * ```

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1683098098,
-    version: '12.0.1-develop.2',
+    publishDate: 1683180347,
+    version: '12.0.1-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/pager/pager-template.directive.mjs

@@ -6,7 +6,7 @@ import { Directive, TemplateRef, Optional } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Represents the pager template which helps to customize the pager appearance in the TreeList. To define a pager
- * template, nest an `<ng-template>` tag with the `kendoTreeListPagerTemplate` directive inside `<kendo-treelist>`.
+ * template, nest an `<ng-template>` tag with the `kendoTreeListPagerTemplate` directive inside `<kendo-treelist>`. [See example](slug:paging_treelist#toc-pager-template).
  *
  * The template context provides the following fields:
  * * `currentPage`&mdash;The index of the displayed page.
@@ -15,12 +15,20 @@ import * as i0 from "@angular/core";
  * * `total`&mdash;The total number of records.
  * * `totalPages`&mdash;The total number of available pages.
  *
- * {% meta height:470 %}
- * {% embed_file configuration/pager-template-all/app.component.ts preview %}
- * {% embed_file configuration/pager-template-all/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/filesystem.ts %}
- * {% endmeta %}
+ * @example
+ * ```
+ * <kendo-treelist ...>
+ *   <kendo-treelist-column field="type"></kendo-treelist-column>
+ *   <ng-template
+ *     kendoTreeListPagerTemplate
+ *       let-totalPages="totalPages"
+ *       let-currentPage="currentPage">
+ *     <kendo-treelist-pager-prev-buttons></kendo-treelist-pager-prev-buttons>
+ *     <kendo-treelist-pager-next-buttons></kendo-treelist-pager-next-buttons>
+ *     <kendo-treelist-pager-info></kendo-treelist-pager-info>
+ *   </ng-template>
+ * </kendo-treelist>
+ * ```
  */
 export class PagerTemplateDirective {
     constructor(templateRef) {