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

package/fesm2022/progress-kendo-angular-gantt.mjs

@@ -44,8 +44,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1750157264,
-    version: '19.1.2-develop.4',
+    publishDate: 1750431176,
+    version: '19.1.2-develop.5',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
@@ -213,7 +213,7 @@ const DEFAULT_TASK_MODEL_FIELDS = Object.freeze({
 });
 
 /**
- * The dependency type when two tasks are connected.
+ * Represents the dependency type when you connect two tasks.
  *
  * The supported values are:
  * * `FF`—from 'finish' to 'finish'
@@ -223,10 +223,22 @@ const DEFAULT_TASK_MODEL_FIELDS = Object.freeze({
  */
 var DependencyType;
 (function (DependencyType) {
+    /**
+     * Specifies that task B can't finish before task A finishes.
+     */
     DependencyType[DependencyType["FF"] = 0] = "FF";
+    /**
+     * Specifies that task B can't start before task A finishes.
+     */
     DependencyType[DependencyType["FS"] = 1] = "FS";
+    /**
+     * Specifies that task A can't finish before task B starts.
+     */
     DependencyType[DependencyType["SF"] = 2] = "SF";
-    DependencyType[DependencyType["SS"] = 3] = "SS"; // task B can't start before task A starts
+    /**
+     * Specifies that task B can't start before task A starts.
+     */
+    DependencyType[DependencyType["SS"] = 3] = "SS";
 })(DependencyType || (DependencyType = {}));
 
 /**
@@ -3103,11 +3115,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Represents a template that defines the whole content of the Task tooltip.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoGanttTaskTooltipTemplate` directive inside the `<kendo-gantt>` tag.
+ * Defines a template for the entire Task tooltip.
+ * Place an `<ng-template>` tag with the `kendoGanttTaskTooltipTemplate` directive inside the `<kendo-gantt>` tag to set the template.
  *
- * The template context is set to the respective data item.
+ * The template context uses the related data item.
  *
  * @example
  * ```ts-preview
@@ -3731,7 +3742,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * The base class for the column components of the Gantt.
+ * Serves as the base class for Gantt column components.
+ *
  */
 class GanttColumnBase extends ColumnBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GanttColumnBase, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -3746,20 +3758,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 /**
- * Represents the column cell template of the Gantt.
- * Helps to customize the content of the cells. To define the cell template, nest an `<ng-template>` tag
- * with the `kendoGanttCellTemplate` directive inside the respective column tag.
+ * Customizes the content of Gantt column cells. Place an `<ng-template>` tag
+ * with the `kendoGanttCellTemplate` directive inside a `<kendo-gantt-column>` tag to define the cell template.
  *
- * The template context is set to the current data item and the following additional fields are passed:
- * - `dataItem`&mdash;The current data item. Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax&mdash;for example, `let-dataItem`.
- * - `columnIndex`&mdash;The current column index. Use it as an alias for a template variable by utilizing the `let-columnIndex="columnIndex"` syntax.
- * - `column`&mdash;The current column instance. Use it as an alias for a template variable by utilizing the `let-column="column"` syntax.
- * - `cellContext`&mdash;An object used to pass context information to built-in directives.
- * - `hasChildren`&mdash;Specifies if the item has children.
- * - `isExpanded`&mdash;Specifies if the item is expanded.
+ * The template context provides these fields:
+ * - `dataItem`&mdash;The current data item. Represents the default context that will be assigned to any template variable using the `let-x` syntax, for example, `let-dataItem`.
+ * - `columnIndex`&mdash;The current column index. Use it as a template variable with the `let-columnIndex="columnIndex"` syntax.
+ * - `column`&mdash;The current column instance. Use it as a template variable with the `let-column="column"` syntax.
+ * - `cellContext`&mdash;An object for passing context information to built-in directives.
+ * - `hasChildren`&mdash;Indicates if the item has children.
+ * - `isExpanded`&mdash;Indicates if the item is expanded.
  * - `level`&mdash;The hierarchy level of the item.
- * - `loading`&mdash;Specifies if the item children are currently loading.
- * - `rowIndex`&mdash;The current row index. Use it as an alias for a template variable by utilizing the `let-rowIndex="rowIndex"` syntax.
+ * - `loading`&mdash;Indicates if the item children are loading.
+ * - `rowIndex`&mdash;The current row index. Use it as a template variable with the `let-rowIndex="rowIndex"` syntax.
+ *
+ * @example
+ * ```html
+ * <kendo-gantt-column field="title">
+ *   <ng-template kendoGanttCellTemplate let-dataItem>
+ *     <strong>{{ dataItem.title }}</strong>
+ *   </ng-template>
+ * </kendo-gantt-column>
+ * ```
  */
 class CellTemplateDirective {
     templateRef;
@@ -3780,14 +3800,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 /**
- * Represents the template for the column menu in the Gantt. Provides an option for
- * customizing the content of the column menu for all or for specific columns.
- * To define the content template, nest an `<ng-template>` tag with the
- * `kendoGanttColumnMenuTemplate` directive inside the `<kendo-gantt-column>` component.
+ * Customizes the column menu content in the Gantt. Place an `<ng-template>` tag with the
+ * `kendoGanttColumnMenuTemplate` directive inside a `<kendo-gantt-column>` component to define the template.
+ *
+ * The template context provides the following fields:
+ * - `service`&mdash;The `ColumnMenuService` instance.
+ * - `column`&mdash;The Gantt column instance.
  *
- *  The column menu service and the current column are available as context variables:
- * - `service`&mdash;Represents the ColumnMenuService.
- * - `column`&mdash;Represents the Gantt column.
+ * @example
+ * ```html
+ * <kendo-gantt-column>
+ *   <ng-template kendoGanttColumnMenuTemplate let-service="service" let-column="column">
+ *     <button (click)="service.close()">Close Menu</button>
+ *   </ng-template>
+ * </kendo-gantt-column>
+ * ```
  */
 class ColumnMenuTemplateDirective {
     templateRef;
@@ -3835,12 +3862,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 /**
- * Represents the filter-menu template.
+ * Represents the filter-menu template for the Gantt column.
  *
- * The column, current filter and the filter service are available as context variables:
- * - `column`&mdash;The current column instance. Use it as an alias for a template variable by utilizing the `let-column="column"` syntax.
+ * Use this directive to customize the filter menu for a column.
+ * The template context provides:
+ * - `column`&mdash;The current column instance. Use as an alias for a template variable with the `let-column="column"` syntax.
  * - `filter`&mdash;The filter descriptor.
- * - `cellContext`&mdash;An object used to pass context information to built-in directives.
+ * - `cellContext`&mdash;An object for passing context information to built-in directives.
+ *
+ * @example
+ * ```html
+ * <kendo-gantt-column>
+ *   <ng-template kendoGanttFilterMenuTemplate let-column let-filter="filter">
+ *     Custom filter for {{ column.field }}
+ *   </ng-template>
+ * </kendo-gantt-column>
+ * ```
  */
 class FilterMenuTemplateDirective {
     templateRef;
@@ -3861,16 +3898,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 /**
- * Represents the column footer cell template of the Gantt.
+ * Represents the footer cell template of the Gantt columns.
  *
- * Helps to customize the table footer cell for the column.
+ * Use this directive to customize the table footer cell for a column.
  * To define a footer template, nest an `<ng-template>` tag with the
  * [`kendoGanttFooterTemplate`]({% slug api_gantt_footertemplatedirective %}) directive inside the `<kendo-gantt-column>` tag.
  *
- *  The current column, column index and field are available as context variables:
- * * `column`&mdash;Points to the instance of the current [`ColumnComponent`]({% slug api_gantt_ganttcolumncomponent %}).
- * * `columnIndex`&mdash;Defines the current column index.
+ * The template context provides:
+ * * `column`&mdash;The current [`ColumnComponent`]({% slug api_gantt_ganttcolumncomponent %}).
+ * * `columnIndex`&mdash;The current column index.
  * * `field`&mdash;The name of the column field, if set.
+ *
+ * @example
+ * ```html
+ * <kendo-gantt-column>
+ *   <ng-template kendoGanttFooterTemplate let-column let-columnIndex="columnIndex" let-field="field">
+ *     Footer for {{ field }}
+ *   </ng-template>
+ * </kendo-gantt-column>
+ * ```
  */
 class FooterTemplateDirective {
     templateRef;
@@ -3891,14 +3937,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 /**
- * Represents the column header cell template of the Gantt.
- * Helps to customize the table header cell for the column.
+ * Represents the header cell template of the Gantt columns.
+ *
+ * Use this directive to customize the table header cell for a column.
  * To define a header template, nest an `<ng-template>` tag with the
  * [`kendoGanttHeaderTemplate`]({% slug api_gantt_headertemplatedirective %}) directive inside the `<kendo-gantt-column>` tag.
  *
- *  The current column and column index are available as context variables:
- * * `column`&mdash;Points to the instance of the current [`ColumnComponent`]({% slug api_gantt_ganttcolumncomponent %}).
- * * `columnIndex`&mdash;Defines the current column index.
+ * The template context provides:
+ * * `column`&mdash;The current [`ColumnComponent`]({% slug api_gantt_ganttcolumncomponent %}).
+ * * `columnIndex`&mdash;The current column index.
+ *
+ * @example
+ * ```html
+ * <kendo-gantt-column>
+ *   <ng-template kendoGanttHeaderTemplate let-column let-columnIndex="columnIndex">
+ *     Custom Header for {{ column.field }} ({{ columnIndex }})
+ *   </ng-template>
+ * </kendo-gantt-column>
+ * ```
  */
 class HeaderTemplateDirective {
     templateRef;
@@ -3919,18 +3975,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 /**
- * Represents the column edit-cell template of the Gantt.
- * Helps to customize the content of the edited cells. To define the cell template, nest an `<ng-template>`
+ * Represents the column template for edited cells in the Gantt.
+ *
+ * Use this directive to customize the content of edited cells. To define the cell template, nest an `<ng-template>`
  * tag with the `kendoGanttEditTemplate` directive inside a `<kendo-gantt-column>` tag.
  *
- * The template context contains the following fields:
+ * The template context provides the following fields:
  * - `column`&mdash;The current column instance.
  * - `dataItem`&mdash;The current data item.
- * - `cellContext`&mdash;An object used to pass context information to built-in directives.
- * - `formGroup`&mdash;The current [`FormGroup`](link:site.data.urls.angular['formgroupapi']).
- * If you use the Gantt inside [Template-Driven Forms](link:site.data.urls.angular['forms']), it will be `undefined`.
+ * - `cellContext`&mdash;An object for passing context information to built-in directives.
+ * - `formGroup`&mdash;The current [`FormGroup`](link:site.data.urls.angular['formgroupapi']). If you use the Gantt inside [Template-Driven Forms](link:site.data.urls.angular['forms']), it is `undefined`.
  * - `isNew`&mdash;The state of the current item.
  * - `rowIndex`&mdash;The current row index. If inside a new item row, `rowIndex` is `-1`.
+ *
+ * @example
+ * ```html
+ * <kendo-gantt-column>
+ *   <ng-template kendoGanttEditTemplate let-dataItem="dataItem" let-formGroup="formGroup">
+ *     <input [formControl]="formGroup.get('field')" />
+ *   </ng-template>
+ * </kendo-gantt-column>
+ * ```
  */
 class EditTemplateDirective {
     templateRef;
@@ -3950,6 +4015,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     type: Optional
                 }] }]; } });
 
+/**
+ * Represents a column in the Gantt. Use this component to define columns and customize their behavior and appearance.
+ *
+ * @example
+ * ```html
+ * <kendo-gantt-column field="title" title="Task"></kendo-gantt-column>
+ * ```
+ */
 class GanttColumnComponent extends ColumnComponent {
     options;
     headerTemplates = new QueryList();
@@ -3960,11 +4033,13 @@ class GanttColumnComponent extends ColumnComponent {
     filterCellTemplate;
     filterMenuTemplate;
     /**
-     * Defines the filter type that is displayed inside the filter row. The default value is `text`.
+     * Sets the filter type for the filter row. The default value is `text`.
+     * @default 'text'
      */
     filter = 'text';
     /**
-     * Defines if a filter UI will be displayed for this column. The default value is `true`.
+     * Shows or hides the filter UI for this column. The default value is `true`.
+     * @default true
      */
     filterable = true;
     /**
@@ -4045,6 +4120,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Represents a group of columns in the Gantt. Use this component to organize columns under a common header.
+ *
+ * @example
+ * ```html
+ * <kendo-gantt-column-group title="Details">
+ *   <kendo-gantt-column field="start"></kendo-gantt-column>
+ *   <kendo-gantt-column field="end"></kendo-gantt-column>
+ * </kendo-gantt-column-group>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link GanttColumnComponent}, {@link GanttSpanColumnComponent}.
+ */
 class GanttColumnGroupComponent extends ColumnGroupComponent {
     options;
     /**
@@ -4100,6 +4189,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: [HeaderTemplateDirective]
             }] } });
 
+/**
+ * Represents the Gantt span column.
+ *
+ * Use this component to span row content over multiple column cells.
+ *
+ * @example
+ * ```html
+ * <kendo-gantt-span-column>
+ *   <kendo-gantt-column field="id"></kendo-gantt-column>
+ *   <kendo-gantt-column field="name"></kendo-gantt-column>
+ * </kendo-gantt-span-column>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link GanttColumnComponent}.
+ */
 class GanttSpanColumnComponent extends SpanColumnComponent {
     options;
     /**
@@ -4175,11 +4280,11 @@ const taskClassCallback = () => null;
 const isSelected = () => false;
 
 /**
- * Called every time a user leaves an edited cell.
+ * Represents the arguments for the `cellClose` event of the Gantt.
  */
 class CellCloseEvent extends PreventableEvent {
     /**
-     * The data item.
+     * Holds the data item.
      */
     dataItem;
     /**
@@ -4187,26 +4292,25 @@ class CellCloseEvent extends PreventableEvent {
      */
     isNew;
     /**
-     * The Gantt column that will be closed.
+     * Contains the Gantt column associated with the closed cell.
      */
     column;
     /**
-     * The [`FormGroup`](link:site.data.urls.angular['formgroupapi']) that is used to edit the cell which will be closed.
+     * Contains the [`FormGroup`](link:site.data.urls.angular['formgroupapi']) used to edit the cell that will be closed.
      */
     formGroup;
     /**
-     * The DOM event that caused the `cellClose` event.
-     * May not be present if `cellClose` was caused by an API call.
+     * Contains the DOM event that triggered the `cellClose` event.
+     * This property may be missing if `cellClose` is triggered by an API call.
      */
     originalEvent;
     /**
-     * The `GanttComponent` instance.
+     * Holds the `GanttComponent` instance.
      */
     sender;
     /**
-     * The `TaskEditItem` associated with the edited task.
-     * The parent item is accessible through the `parent` property,
-     * and allows traversing all ancestors that need to be updated.
+     * Contains the `TaskEditItem` for the edited task.
+     * Access the parent item through the `parent` property to traverse all ancestors that need updates.
      */
     item;
     constructor(options) {
@@ -4233,30 +4337,21 @@ const DEFAULT_TIMELINE_PANE_SETTINGS = Object.freeze({
 });
 
 /**
- * Represents a template that defines the whole content of the task component.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoGanttTaskTemplate` directive inside the `<kendo-gantt>` tag.
+ * Defines a template for the entire task component.
+ * Place an `<ng-template>` tag with the `kendoGanttTaskTemplate` directive inside the `<kendo-gantt>` tag to set the template.
  *
- * The template context is set to the current data item. The following additional field is passed:
- * - `elementWidth`&mdash;The current task wrapper element's calculated width in pixels based on its start and end date.
- * Use it as an alias for a template variable by utilizing the `let-elementWidth="elementWidth"` syntax.
- * Useful for calculations related to rendering custom elements representing the task progress.
+ * The template context uses the current data item. The following field is also available:
+ * - `elementWidth`&mdash;The calculated width in pixels of the current task wrapper element, based on its start and end date.
+ * Use `let-elementWidth="elementWidth"` to access it in the template.
+ * This helps you render custom elements for task progress.
  *
  * @example
- * ```ts-preview
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-gantt [kendoGanttHierarchyBinding]="data">
- *            <ng-template kendoGanttTaskTemplate let-dataItem let-elementWidth="elementWidth">
- *                {{ dataItem.title }} - {{ dataItem.completionRatio * 100 }}% complete
- *            </ng-template>
- *        </kendo-gantt>
- *    `
- * })
- * class AppComponent {
- *    public data: any[] = sampleTasks;
- * }
+ * ```html
+ * <kendo-gantt [kendoGanttHierarchyBinding]="data">
+ *   <ng-template kendoGanttTaskTemplate let-dataItem let-elementWidth="elementWidth">
+ *     {{ dataItem.title }} - {{ dataItem.completionRatio * 100 }}% complete
+ *   </ng-template>
+ * </kendo-gantt>
  * ```
  */
 class GanttTaskTemplateDirective {
@@ -4278,32 +4373,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 /**
- * Represents a template that defines the whole content of the summary task component.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoGanttSummaryTaskTemplate` directive inside the `<kendo-gantt>` tag.
+ * Defines a template for the entire summary task component.
+ * Place an `<ng-template>` tag with the `kendoGanttSummaryTaskTemplate` directive inside the `<kendo-gantt>` tag to set the template.
  *
- * The template context is set to the current data item. The following additional field is passed:
- * - `elementWidth`&mdash;The current summary task wrapper element's calculated width in pixels based on its start and end date.
- * Use it as an alias for a template variable by utilizing the `let-elementWidth="elementWidth"` syntax.
- * Useful for calculations related to rendering custom elements representing the task progress.
+ * The template context uses the current data item. The following field is also available:
+ * - `elementWidth`&mdash;The calculated width in pixels of the current summary task wrapper element, based on its start and end date.
+ * Use `let-elementWidth="elementWidth"` to access it in the template.
+ * This helps you render custom elements for summary task progress.
  *
  * @example
- * ```ts-preview
- * _@Component({
- *      selector: 'my-app',
- *      template: `
- *          <kendo-gantt [kendoGanttHierarchyBinding]="data">
- *              <ng-template kendoGanttSummaryTaskTemplate let-dataItem let-elementWidth="elementWidth">
- *                  <div [style]="'color: white; font-size: 8px;'">
- *                      {{ dataItem.title }} - {{ dataItem.completionRatio * 100 }}% complete; width: {{ elementWidth }}
- *                  </div>
- *              </ng-template>
- *          </kendo-gantt>
- *      `
- * })
- * class AppComponent {
- *     public data: any[] = sampleTasks;
- * }
+ * ```html
+ * <kendo-gantt [kendoGanttHierarchyBinding]="data">
+ *    <ng-template kendoGanttSummaryTaskTemplate let-dataItem let-elementWidth="elementWidth">
+ *      <div [style]="'color: white; font-size: 8px;'">
+ *          {{ dataItem.title }} - {{ dataItem.completionRatio * 100 }}% complete; width: {{ elementWidth }}
+ *      </div>
+ *    </ng-template>
+ * </kendo-gantt>
  * ```
  */
 class GanttSummaryTaskTemplateDirective {
@@ -4325,11 +4411,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 /**
- * Represents a template that defines the text content section of the task component.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoGanttTaskContentTemplate` directive inside the `<kendo-gantt>` tag.
+ * Defines a template for the text content section of the task component.
+ * Place an `<ng-template>` tag with the `kendoGanttTaskContentTemplate` directive inside the `<kendo-gantt>` tag to set the template.
  *
- * The template context is set to the current data item.
+ * The template context uses the current data item.
  *
  * @example
  * ```ts-preview
@@ -4369,101 +4454,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 /**
  * Represents the toolbar template of the Gantt.
  *
- * The template context has the following field:
- * - `position`&mdash;The position at which the toolbar template is rendered. The possible values are `'top'` and `'bottom'`.
+ * The template context includes:
+ * - `position`&mdash;The position where the toolbar template renders. Possible values are `'top'` and `'bottom'`.
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *       <div class="example-config">
- *         <input type="radio" kendoRadioButton id="top" name="position" value="top" checked (click)="positionChange($event)"/>
- *         <kendo-label class="k-radio-label" for="top">Top</kendo-label><br/>
- *         <input type="radio" kendoRadioButton id="bottom" name="position" value="bottom" (click)="positionChange($event)"/>
- *         <kendo-label class="k-radio-label" for="bottom">Bottom</kendo-label><br/>
- *         <input type="radio" kendoRadioButton id="both" name="position" value="both" (click)="positionChange($event)"/>
- *         <kendo-label class="k-radio-label" for="both">Both</kendo-label><br/>
- *       </div>
- *       <kendo-gantt [[kendoGanttHierarchyBinding]="data"]="data" [style.height.px]="400">
- *            <ng-template kendoGanttToolbarTemplate [position]="position" let-position="position">
- *                <button kendoButton (click)="onClick()">Custom action</button>
- *            </ng-template>
- *        </kendo-gantt>
- *     `
- * })
- *
- * class AppComponent {
- *     public position: 'top' | 'bottom' | 'both' = 'top';
- *
- *     public data = [{
- *       id: 7,
- *       title: "Software validation, research and implementation",
- *       orderId: 0,
- *       start: new Date("2014-06-02T00:00:00.000Z"),
- *       end: new Date("2014-07-12T00:00:00.000Z"),
- *       completionRatio: 0.45708333333333334,
- *       isExpanded: true,
- *       children: [{
- *               id: 11,
- *               title: "Research",
- *               orderId: 1,
- *               start: new Date("2014-06-02T00:00:00.000Z"),
- *               end: new Date("2014-06-07T00:00:00.000Z"),
- *               completionRatio: 0.5766666666666667,
- *               isExpanded: true,
- *               children: [{
- *                       id: 19,
- *                       title: "Validation with Customers",
- *                       orderId: 0,
- *                       start: new Date("2014-06-02T00:00:00.000Z"),
- *                       end: new Date("2014-06-04T00:00:00.000Z"),
- *                       completionRatio: 0.25,
- *                       isExpanded: true
- *                   },
- *                   {
- *                       id: 20,
- *                       title: "Market Research",
- *                       orderId: 1,
- *                       start: new Date("2014-06-02T00:00:00.000Z"),
- *                       end: new Date("2014-06-03T02:00:00.000Z"),
- *                       completionRatio: 0.82,
- *                       isExpanded: true
- *                   },
- *                   {
- *                       id: 39,
- *                       title: "Functional and Technical Specification",
- *                       orderId: 2,
- *                       start: new Date("2014-06-04T00:00:00.000Z"),
- *                       end: new Date("2014-06-07T00:00:00.000Z"),
- *                       completionRatio: 0.66,
- *                       isExpanded: true
- *                   }]
- *           }]
- *       };
- *
- *     public positionChange(event: MouseEvent): void {
- *        this.position = event.target['defaultValue'];
- *     }
- *
- *     public onClick(): void {
- *         console.log("button was clicked");
- *     }
- * }
- *
+ * ```html
+ * <kendo-gantt [kendoGanttHierarchyBinding]="data" [style.height.px]="400">
+ *  <ng-template kendoGanttToolbarTemplate [position]="position" let-position="position">
+ *    <button kendoButton (click)="onClick()">Custom action</button>
+ *  </ng-template>
+ * </kendo-gantt>
  * ```
  */
 class ToolbarTemplateDirective {
     templateRef;
     _position = "top";
     /**
-     * Defines the Gantt Toolbar that will use this template.
+     * Sets the Gantt Toolbar that uses this template.
      *
-     * The possible values are:
-     * - `top`&mdash;The template will be rendered in the top toolbar (if present) only.
-     * - `bottom`&mdash;The template will be rendered in the bottom toolbar (if present) only.
-     * - `both`&mdash;The template will be rendered in both toolbars (if present).
+     * Possible values:
+     * - `top`&mdash;Renders the template in the top toolbar (if present) only.
+     * - `bottom`&mdash;Renders the template in the bottom toolbar (if present) only.
+     * - `both`&mdash;Renders the template in both toolbars (if present).
      */
     set position(position) {
         this._position = position;
@@ -4491,13 +4503,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * The base class for the timeline view components of the Gantt.
+ * Serves as the base class for the timeline view components of the Gantt.
+ *
+ * @example
+ * ```typescript
+ * export class CustomTimelineViewComponent extends ViewBase {
+ *   public readonly type: TimelineViewType = 'custom';
+ * }
+ * ```
  */
 class ViewBase {
     optionChangesService;
     dependencyDomService;
     /**
-     * The width of the time slot headers. Values are treated as pixels.
+     * Sets the width of the time slot headers in pixels.
      *
      * @default 100
      */
@@ -4508,9 +4527,8 @@ class ViewBase {
     timelineHeadersDateFormat;
     /**
      * Specifies the current time marker settings.
-     * If not set, the value is taken from the Gantt component
+     * If you do not set a value, the component uses the value from the Gantt component
      * [`currentTimeMarker`]({% slug api_gantt_ganttcomponent %}#toc-currentTimeMarker) property.
-     *
      */
     currentTimeMarker;
     /**
@@ -5098,22 +5116,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
 
 /**
- * The Gantt ViewSelector component. Shows the currently active view type, and allows switching to another view type.
+ * The Gantt ViewSelector component. Shows the current view type and lets you switch to another view type.
  */
 class ViewSelectorComponent {
     localizationService;
     hostClass = true;
     /**
-     * The collection of the timeline view types in the current Gantt configuration.
+     * Lists the timeline view types in the current Gantt configuration.
      */
     views;
     /**
-     * The currently active view type.
+     * Sets the current view type.
      * @default 'week'
      */
     activeView = 'week';
     /**
-     * Fires each time the user selects a different view type. The event data contains the type of the newly selected view.
+     * Fires when the user selects a different view type. The event data contains the type of the new view.
      */
     activeViewChange = new EventEmitter();
     constructor(localizationService) {
@@ -5192,26 +5210,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * The UI for adding new items to the Gantt.
- * Use it within a toolbar template to provide a custom icon or list of options.
+ * Displays the UI for adding new items to the Gantt.
+ * Use this in a toolbar template to show a custom icon or a list of options.
  */
 class GanttAddTaskComponent {
     localizationService;
     editService;
     ngZone;
     /**
-     * Sets the data of the DropDownButton.
-     * > The data has to be provided in an array-like list.
+     * Sets the data for the DropDownButton.
+     * Provide the data as an array-like list.
      */
     data;
     /**
-     * Defines the name of an existing icon in a Kendo UI theme.
+     * Sets the name of an existing icon in a Kendo UI theme.
      * @default 'plus'
      */
     icon = 'plus';
     /**
-     * Defines an [`SVGIcon`](slug:api_icons_svgicon) icon to be rendered inside the `GanttAddTaskComponent` using
-     * a [`KendoSVGIcon`](slug:api_icons_svgiconcomponent) component.
+     * Sets an [`SVGIcon`](slug:api_icons_svgicon) to render inside the `GanttAddTaskComponent` using
+     * an [`SVGIconComponent`](slug:api_icons_svgiconcomponent).
      */
     svgIcon = plusIcon;
     constructor(localizationService, editService, ngZone) {
@@ -5960,75 +5978,58 @@ const DEFAULT_DRAG_SCROLL_SETTINGS = {
     threshold: 10
 };
 /**
- * Represents the Kendo UI Gantt component for Angular.
+ * Represents the [Kendo UI Gantt component for Angular](slug:overview_gantt).
+ *
+ * Use the Gantt component to display and manage project tasks and dependencies in a timeline view.
  *
  * @example
- * ```ts-preview
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-gantt
- *            [style.height.px]="500"
- *            [kendoGanttHierarchyBinding]="data"
- *            childrenField="subtasks"
- *            [dependencies]="dependencies">
- *            <kendo-gantt-column
- *                field="title"
- *                title="Task"
- *                [width]="200"
- *                [expandable]="true"></kendo-gantt-column>
- *            <kendo-gantt-column
- *                field="start"
- *                title="Start"
- *                format="dd-MMM-yyyy"
- *                [width]="120"></kendo-gantt-column>
- *            <kendo-gantt-column
- *                field="end"
- *                title="End"
- *                format="dd-MMM-yyyy"
- *                [width]="120"></kendo-gantt-column>
- *            <kendo-gantt-timeline-day-view></kendo-gantt-timeline-day-view>
- *            <kendo-gantt-timeline-week-view></kendo-gantt-timeline-week-view>
- *            <kendo-gantt-timeline-month-view></kendo-gantt-timeline-month-view>
- *        </kendo-gantt>
- *    `
- * })
- * class AppComponent {
- *     public data: Task[] = [{
- *         id: 7, title: 'Validation and R&D', start: new Date('2014-06-02T00:00:00.000Z'),
- *         end: new Date('2014-06-19T00:00:00.000Z'), completionRatio: 0.45708333333333334,
- *         subtasks: [
- *             { id: 18, title: 'Project Kickoff', start: new Date('2014-06-02T00:00:00.000Z'),
- *                 end: new Date('2014-06-02T00:00:00.000Z'), completionRatio: 0.23 },
- *             { id: 11, title: 'Research', start: new Date('2014-06-02T00:00:00.000Z'),
- *                 end: new Date('2014-06-07T00:00:00.000Z'), completionRatio: 0.5766666666666667,
- *                 subtasks: [
- *                     { id: 19, title: 'Validation', start: new Date('2014-06-02T00:00:00.000Z'),
- *                         end: new Date('2014-06-04T00:00:00.000Z'), completionRatio: 0.25 },
- *                     { id: 39, title: 'Specification', start: new Date('2014-06-04T00:00:00.000Z'),
- *                         end: new Date('2014-06-07T00:00:00.000Z'), completionRatio: 0.66 }]
- *             }, { id: 13, title: 'Implementation', start: new Date('2014-06-08T00:00:00.000Z'),
- *                 end: new Date('2014-06-19T00:00:00.000Z'), completionRatio: 0.77,
- *                 subtasks: [
- *                     { id: 24, title: 'Prototype', start: new Date('2014-06-08T00:00:00.000Z'),
- *                         end: new Date('2014-06-14T00:00:00.000Z'), completionRatio: 0.77 },
- *                     { id: 29, title: 'UI and Interaction', start: new Date('2014-06-14T00:00:00.000Z'),
- *                         end: new Date('2014-06-19T00:00:00.000Z'), completionRatio: 0.6 }]
- *             }, { id: 17, title: 'Release', start: new Date('2014-06-19T00:00:00.000Z'),
- *                 end: new Date('2014-06-19T00:00:00.000Z'), completionRatio: 0 }]
- *     }];
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import { GanttComponent, DependencyType } from '@progress/kendo-angular-gantt';
  *
- *     public dependencies: GanttDependency[] = [
- *         { id: 528, fromId: 18, toId: 19, type: DependencyType.FS },
- *         { id: 529, fromId: 19, toId: 39, type: DependencyType.FS },
- *         { id: 535, fromId: 24, toId: 29, type: DependencyType.FS },
- *         { id: 551, fromId: 13, toId: 29, type: DependencyType.FF },
- *         { id: 777, fromId: 7, toId: 11, type: DependencyType.SF },
- *         { id: 556, fromId: 39, toId: 24, type: DependencyType.FS },
- *         { id: 546, fromId: 29, toId: 17, type: DependencyType.FS },
- *     ];
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-gantt
+ *       [style.height.px]="500"
+ *       [kendoGanttHierarchyBinding]="data"
+ *       childrenField="subtasks"
+ *       [dependencies]="dependencies">
+ *       <kendo-gantt-column field="title" title="Task" [width]="200" [expandable]="true"></kendo-gantt-column>
+ *       <kendo-gantt-column field="start" title="Start" format="dd-MMM-yyyy" [width]="120"></kendo-gantt-column>
+ *       <kendo-gantt-column field="end" title="End" format="dd-MMM-yyyy" [width]="120"></kendo-gantt-column>
+ *       <kendo-gantt-timeline-day-view></kendo-gantt-timeline-day-view>
+ *       <kendo-gantt-timeline-week-view></kendo-gantt-timeline-week-view>
+ *       <kendo-gantt-timeline-month-view></kendo-gantt-timeline-month-view>
+ *     </kendo-gantt>
+ *   `
+ * })
+ * export class AppComponent {
+ *   public data: Task[] = [
+ *     {
+ *       id: 1,
+ *       title: 'Planning',
+ *       start: new Date('2024-01-01'),
+ *       end: new Date('2024-01-05'),
+ *       subtasks: []
+ *     }
+ *   ];
+ *   public dependencies = [
+ *     { id: 1, fromId: 1, toId: 2, type: DependencyType.FS }
+ *   ];
  * }
  * ```
+ *
+ * @remarks
+ * Supported children components are:
+ * {@link GanttColumnComponent},
+ * {@link GanttSpanColumnComponent},
+ * {@link GanttColumnGroupComponent},
+ * {@link TimelineDayViewComponent},
+ * {@link TimelineWeekViewComponent},
+ * {@link TimelineMonthViewComponent},
+ * {@link TimelineYearViewComponent},
+ * {@link CustomMessagesComponent}.
  */
 class GanttComponent {
     timelineViewService;
@@ -6118,18 +6119,16 @@ class GanttComponent {
         return this._columns;
     }
     /**
-     * Sets the fields which will be used to extract the task data from the provided `data` array items.
-     * The `id` field is also used as a TreeList data item unique identifier (defaults to `'id'`).
-     *
-     * > If no object is provided, the Gantt task data items will have to conform to the [`GanttTask`]({% slug api_gantt_gantttask %}) interface.
+     * Sets the fields used to extract task data from the `data` array items.
+     * The `id` field is also used as a unique identifier for TreeList data items.
+     * If not set, task data items must match the [`GanttTask`](slug:api_gantt_gantttask) interface.
      */
     set taskModelFields(fields) {
         this.mapper.taskFields = fields;
     }
     /**
-     * Sets the fields which will be used to extract the dependency data from the provided `dependencies` array items.
-     *
-     * > If no object is provided, the Gantt dependency data items will have to conform to the [`GanttDependency`]({% slug api_gantt_ganttdependency %}) interface.
+     * Sets the fields used to extract dependency data from the `dependencies` array items.
+     * If not set, dependency data items must match the [`GanttDependency`](slug:api_gantt_ganttdependency) interface.
      */
     set dependencyModelFields(fields) {
         this.mapper.dependencyFields = fields;
@@ -6139,7 +6138,7 @@ class GanttComponent {
      */
     views;
     /**
-     * The active timeline view.
+     * Sets the active timeline view.
      * @default 'week'
      */
     set activeView(view) {
@@ -6168,9 +6167,8 @@ class GanttComponent {
         return activeViewCurrentTimeMarker || this.currentTimeMarker;
     }
     /**
-     * Gets or sets the data of the Gantt.
-     *
-     * > The task data items should either conform to the [`GanttTask`]({% slug api_gantt_gantttask %}) interface, or a [`taskModelFields`]({% slug api_gantt_ganttcomponent %}#toc-taskmodelfields) object has to be provided.
+     * Gets or sets the Gantt data.
+     * The task data items must match the [`GanttTask`]({% slug api_gantt_gantttask %}) interface or use [`taskModelFields`]({% slug api_gantt_ganttcomponent %}#toc-taskmodelfields).
      */
     set data(data) {
         this._data = normalizeGanttData(data);
@@ -6180,49 +6178,31 @@ class GanttComponent {
         return this._data;
     }
     /**
-     * Specifies a callback that determines if the given task is selected ([see example]({% slug selection_gantt %}#toc-custom-selection)).
-     *
-     * > The [`selectable`]({% slug api_gantt_ganttcomponent %}#toc-selectable) prop has to be set to `true` in order for this callback to be executed.
+     * Specifies a callback to determine if a task is selected ([see example]({% slug selection_gantt %}#toc-custom-selection)).
+     * Set [`selectable`]({% slug api_gantt_ganttcomponent %}#toc-selectable) to `true` to use this callback.
      */
     isSelected = isSelected;
     /**
-     * Specifies a callback that determines if a new dependency is valid.
-     * Used when evaluating if an attempt to create a new dependency will result in a valid link between the two tasks
-     * [see example]({% slug editing_drag_create_dependencies_gantt %}#toc-validation).
-     *
-     * By defalut, dependencies are deemed invalid when:
-     *  - The two tasks are in a parent-child relationship.
-     *  - The two tasks are already dependent on one another. Only one dependency is allowed per pair.
-     *  - The start or end times of the two tasks are incompatible with the attempted dependency type.
+     * Specifies a callback to validate new dependencies.
+     * Use this callback to control the valid dependencies that users can create ([see example]({% slug editing_drag_create_dependencies_gantt %}#toc-validation)).
      */
     validateNewDependency = this.defaultValidateNewDependencyCallback.bind(this);
     /**
-     * Fires when the Gantt selection is changed through user interaction.
-     *
-     * Holds data about the affected [`items`]({% slug api_gantt_selectionchangeevent %}#toc-items) and the attempted [`action`]({% slug api_gantt_selectionchangeevent %}#toc-action):
-     * - `select` - Triggered on `click` or `ctrl + click` on deselected items.
-     * - `remove` - Triggered on `ctrl + click` on selected items.
+     * Fires when the Gantt selection changes through user interaction.
+     * The event data contains the affected items and the action type.
      */
     selectionChange = new EventEmitter();
     /**
-     * Enables or disables the Gantt selection mechanism ([see example]({% slug selection_gantt %}#toc-custom-selection)).
-     *
+     * Enables or disables selection in the Gantt ([see example]({% slug selection_gantt %}#toc-custom-selection)).
+     * Set to `true` to allow selection.
      * > When set to `true`, the [`isSelected`]({% slug api_gantt_ganttcomponent %}#toc-isselected) callback has to be provided.
      * > When applied, the [`SelectableDirective`]({% slug api_gantt_selectabledirective %}) sets `selectable` to `true` internally.
+     * @default false
      */
     selectable = false;
     /**
-     * The toolbar configuration. Defines the position and content of the toolbar(s).
-     * The available properties are `position`, `addTaskTool`, and `viewSelectorTool`.
-     * All are optional and default to `top`.
-     *
-     * The possible values for each option are:
-     * - `top`&mdash;Positions the toolbar above the Gantt panes. Renders the respective tool in the top toolbar.
-     * - `bottom`&mdash;Positions the toolbar below the Gantt panes. Renders the respective tool in the bottom toolbar.
-     * - `both`&mdash;Displays two toolbar instances. Positions the first one above,
-     * and the second one - below the Gantt panes. Renders the respective tool in the both toolbars.
-     * - `none`&mdash;No toolbar is rendered when used for setting `position`.
-     * No add task or view selector tool is rendered when used for setting `addTaskTool` or `viewSelectorTool`.
+     * Configures the toolbar position and content.
+     * Set `position`, `addTaskTool`, and `viewSelectorTool` as needed.
      */
     set toolbarSettings(value) {
         this._toolbarSettings = {
@@ -6235,12 +6215,13 @@ class GanttComponent {
         return this._toolbarSettings;
     }
     /**
-     * Allows setting the toolbar(s) `aria-label` attribute value as necessary to comply with accessibility requirements.
-     * Typically, toolbars need an `aria-label` when there is more than one toolbar in the application.
+     * Sets the `aria-label` attribute value for the toolbar.
+     * Use this to improve accessibility.
+     * @default "Toolbar"
      */
     toolbarAriaLabel = 'Toolbar';
     /**
-     * Gets or sets the callback function that retrieves the child items for a particular item.
+     * Sets the callback function to retrieve child items for a data item.
      */
     set fetchChildren(fn) {
         this._fetchChildren = fn;
@@ -6250,7 +6231,7 @@ class GanttComponent {
         return this._fetchChildren;
     }
     /**
-     * Gets or sets the callback function that indicates if a particular item has child items.
+     * Sets the callback function to indicate if a data item has child items.
      */
     set hasChildren(fn) {
         this._hasChildren = fn;
@@ -6260,58 +6241,56 @@ class GanttComponent {
         return this._hasChildren;
     }
     /**
-     * Defines the dependencies that will be drawn between the rendered tasks.
-     *
-     * > The dependency data items should either conform to the [`GanttDependency`]({% slug api_gantt_ganttdependency %}) interface, or a [`dependencyModelFields`]({% slug api_gantt_ganttcomponent %}#toc-dependencymodelfields) object has to be provided.
+     * Sets the dependencies to display between tasks.
+     * Dependency data items must match the [`GanttDependency`]({% slug api_gantt_ganttdependency %}) interface or use [`dependencyModelFields`]({% slug api_gantt_ganttcomponent %}#toc-dependencymodelfields).
      */
     dependencies = [];
     /**
-     * Enables the sorting of the Gantt columns that have their `field` option set.
+     * Enables sorting for columns with a `field` option.
      */
     sortable = false;
     /**
-     * The descriptors by which the data will be sorted.
+     * Sets the descriptors for sorting the data.
      */
     sort = [];
     /**
-     * Enables the filtering of the Gantt columns that have their `field` option set.
-     *
+     * Enables filtering for columns with a `field` option.
      * @default false
      */
     filterable = false;
     /**
-     * The descriptor by which the data will be filtered.
+     * Sets the descriptor for filtering the data.
      */
     filter;
     /**
-     * The start time of the work day.
-     * Accepts string values in the `HH:mm` format.
+     * Sets the start time of the work day in `HH:mm` format.
+     * @default "08:00"
      */
     workDayStart = '08:00';
     /**
-     * The end time of the work day.
-     * Accepts string values in the `HH:mm` format.
+     * Sets the end time of the work day in `HH:mm` format.
+     * @default "17:00"
      */
     workDayEnd = '17:00';
     /**
-     * The start of the work week (index based).
+     * Sets the start day of the work week (index based).
+     * @default 1
      */
     workWeekStart = 1;
     /**
-     * The end of the work week (index based).
+     * Sets the end day of the work week (index based).
+     * @default 5
      */
     workWeekEnd = 5;
     /**
-     * When `true`, the user can use dedicated shortcuts to interact with the Gantt.
-     * By default, navigation is enabled for the TreeList and Timeline parts of the component,
-     * ([see example]({% slug keyboard_navigation_gantt %})).
-     *
+     * Enables keyboard navigation for the Gantt.
+     * By default, navigation is enabled for the TreeList and Timeline parts of the component ([see example]({% slug keyboard_navigation_gantt %})).
      * @default true
      */
     navigable = true;
     /**
-     * The options of the timeline splitter pane. By default the pane is `collapsible`,
-     * `resizable`, not `collapsed`, and its `size` is `'50%'`.
+     * Sets the options for the timeline splitter pane.
+     * By default, the pane is collapsible, resizable, not collapsed, and its size is `'50%'`.
      */
     set timelinePaneOptions(value) {
         if (this._timelinePaneOptions.collapsed && !value.collapsed) {
@@ -6323,8 +6302,8 @@ class GanttComponent {
         return { ...this._timelinePaneOptions, size: this.treeListPaneOptions.collapsed ? '100%' : this._timelinePaneOptions.size };
     }
     /**
-     * The options of the treelist splitter pane.
-     * By default the pane is `collapsible` and not `collapsed`.
+     * Sets the options for the treelist splitter pane.
+     * By default the pane is collapsible and not collapsed.
      */
     set treeListPaneOptions(value) {
         this._treeListPaneOptions = { ...DEFAULT_TREELIST_PANE_SETTINGS, ...value };
@@ -6333,8 +6312,8 @@ class GanttComponent {
         return this._treeListPaneOptions;
     }
     /**
-     * Defines a function that is executed for every task in the component.
-     * The classes returned from the function are applied to the task wrapper element.
+     * Sets a function to apply custom CSS classes to each task.
+     * The function receives the task data item.
      */
     set taskClass(fn) {
         if (isDevMode() && typeof fn !== 'function') {
@@ -6346,7 +6325,8 @@ class GanttComponent {
         return this._taskClass;
     }
     /**
-     * Defines a function that is executed for every data row in the component.
+     * Sets a function to apply custom CSS classes to each data row.
+     * The function receives the row data item.
      */
     set rowClass(fn) {
         if (isDevMode() && typeof fn !== 'function') {
@@ -6358,54 +6338,45 @@ class GanttComponent {
         return this._rowClass;
     }
     /**
-     * The name of the field which contains the unique identifier of the task data item.
-     * Defaults to 'id'.
+     * Gets the name of the field that contains the unique identifier for task data items.
+     * @default "id"
      */
     get taskIdField() {
         return this.mapper.taskFields.id;
     }
     /**
-     * Sets the callback function that indicates if a particular item is expanded.
-     * If no callback is set, all items will be expanded and no expand icons will be rendered.
+     * Sets a callback function to indicate if a data item is expanded.
+     * If not set, all items are expanded and no expand icons are shown.
      */
     isExpanded;
     /**
-     * Indicates whether the Gantt columns will be resized during initialization so that they fit their headers and row content.
-     * Columns with autoSize set to false are excluded.
-     *
+     * Enables automatic resizing of columns to fit their content.
      * @default false
      */
     columnsAutoSize = false;
     /**
-     * Specifies the Gantt current time marker settings.
-     * The settings will be applied for all views.
-     * If the `currentTimeMarker` is set for a view then it takes precedence.
-     *
+     * Sets the current time marker settings for the Gantt.
+     * Applies to all views unless overridden by the settings of a particular view.
      * @default true
      */
     currentTimeMarker = true;
     /**
-     * Specifies if the column menu of the columns will be displayed.
-     *
+     * Enables the column menu for all columns.
      * @default false
      */
     columnMenu = false;
     /**
-     * If set to true, the user can reorder columns by dragging their header cells.
-     *
+     * Enables reordering of the columns by dragging their header cells.
      * @default false
      */
     columnsReorderable = false;
     /**
-     * If set to true, the user can resize columns by dragging the edges (resize handles) of their header cells.
-     *
+     * Enables resizing of the columns by dragging the header cell edges (resize handles).
      * @default false
      */
     columnsResizable = false;
     /**
-     * Specifies the settings for auto-scrolling during dragging
-     * when the pointer moves outside of the container bounderies
-     * [see example]({% slug editing_drag_create_dependencies_gantt %}#toc-auto-scrolling).
+     * Defines the settings for auto-scrolling during dragging when the pointer moves outside the container ([see example](slug:editing_drag_create_dependencies_gantt#auto-scrolling)).
      */
     set dragScrollSettings(settings) {
         this._dragScrollSettings = { ...DEFAULT_DRAG_SCROLL_SETTINGS, ...settings };
@@ -6414,8 +6385,7 @@ class GanttComponent {
         return this._dragScrollSettings;
     }
     /**
-     * Allows setting the task tooltip `position`, `callout`, and `showAfter` options.
-     *
+     * Sets the options for the task tooltip, such as `position`, `callout`, and `showAfter`.
      * @default { position: 'top', callout: true, showAfter: 100 }
      */
     taskTooltipOptions = {
@@ -6424,30 +6394,30 @@ class GanttComponent {
         showAfter: 100
     };
     /**
-     * Fires when an item is expanded.
+     * Fires when a row is expanded.
      */
     rowExpand = new EventEmitter();
     /**
-     * Fires when a Gantt task in the timeline pane is double-clicked. The data item, associated with the clicked task,
-     * is available in the event data. Use the event handler to open a task editing dialog as necessary.
+     * Fires when a Gantt task in the timeline pane is double-clicked.
+     * The event data contains the clicked task. Use this event to open a task editing dialog if needed.
      */
     taskDblClick = new EventEmitter();
     /**
-     * Fires when the user double clicks a cell.
+     * Fires when a cell is double-clicked.
      */
     cellDblClick = new EventEmitter();
     /**
-     * Fires when the user leaves an edited cell.
+     * Fires when an edited cell is closed.
      */
     cellClose = new EventEmitter();
     /**
-     * Fires when the end user clicks the `Delete` button in the task editing dialog,
-     * the task delete icon, or presses the `Delete` key on the keyboard when a task in the timeline is focused.
-     * Use the event handler to open a confirmation dialog when necessary.
+     * Fires when the user clicks the `Delete` button in the task editing dialog,
+     * the task delete icon, or presses the `Delete` key on a focused task.
+     * Use this event to open a confirmation dialog if needed.
      */
     taskDelete = new EventEmitter();
     /**
-     * Fires when an item is collapsed.
+     * Fires when a row is collapsed.
      */
     rowCollapse = new EventEmitter();
     /**
@@ -6467,50 +6437,50 @@ class GanttComponent {
      */
     taskAdd = new EventEmitter();
     /**
-     * Fires when the user adds a dependency via dragging
-     * [see example]({% slug editing_drag_create_dependencies_gantt %}#toc-basic-concepts).
+     * Fires when the user adds a dependency by dragging [see example]({% slug editing_drag_create_dependencies_gantt %}#toc-basic-concepts).
      */
     dependencyAdd = new EventEmitter();
     /**
-     * Fires when the sorting of the Gantt is changed.
-     * You have to handle the event yourself and sort the data.
+     * Fires when there are changes in the Gantt sorting.
+     * Handle this event to sort the data.
      */
     sortChange = new EventEmitter();
     /**
-     * Fires when the Gantt filter is modified.
-     * You have to handle the event yourself and filter the data.
+     * Fires when there are changes in the Gantt filtering.
+     * Handle this event to filter the data.
      */
     filterChange = new EventEmitter();
     /**
-     * Fires when the filter or sort state of the Gantt is changed.
+     * Fires when the filter or sort state changes.
      */
     dataStateChange = new EventEmitter();
     /**
-     * Fires when the collapsed state of the treelist pane is changed.
+     * Fires when the collapsed state of the treelist pane changes.
      */
     treeListPaneCollapsedChange = new EventEmitter();
     /**
-     * Fires when the collapsed state of the timeline pane is changed.
+     * Fires when the collapsed state of the timeline pane changes.
      */
     timelinePaneCollapsedChange = new EventEmitter();
     /**
-     * Fires each time the user resizes the timeline pane.
+     * Fires when the user resizes the timeline pane.
      */
     timelinePaneSizeChange = new EventEmitter();
     /**
-     * Fires each time the user selects a different view type. The event data contains the type of the newly selected view.
+     * Fires when the user selects a different view type.
+     * The event data contains the type of the new view.
      */
     activeViewChange = new EventEmitter();
     /**
-     * Fires when the user completes the resizing of the column.
+     * Fires when the user completes resizing a column.
      */
     columnResize = new EventEmitter();
     /**
-     * Fires when the user completes the reordering of the column.
+     * Fires when the user completes reordering a column.
      */
     columnReorder = new EventEmitter();
     /**
-     * Fires when the user changes the visibility of the columns from the column menu or column chooser.
+     * Fires when the user changes column visibility from the column menu or chooser.
      */
     columnVisibilityChange = new EventEmitter();
     /**
@@ -6770,8 +6740,7 @@ class GanttComponent {
     }
     /**
      * Focuses the last active cell or task in the Gantt.
-     * If no item has previously been focused, the first cell of the TreeList part will receive focus,
-     * ([see example]({% slug keyboard_navigation_gantt %}#toc-controlling-the-focus)).
+     * If no item was previously focused, focuses the first TreeList cell ([see example]({% slug keyboard_navigation_gantt %}#toc-controlling-the-focus)).
      */
     focus() {
         if (this.navigable) {
@@ -6779,8 +6748,9 @@ class GanttComponent {
         }
     }
     /**
-     * Focuses the targeted cell in the TreeList part of the component,
-     * ([see example]({% slug keyboard_navigation_gantt %}#toc-controlling-the-focus)).
+     * Focuses the specified cell in the TreeList ([see example]({% slug keyboard_navigation_gantt %}#toc-controlling-the-focus)).
+     * @param rowIndex The row index.
+     * @param colIndex The column index.
      */
     focusCell(rowIndex, colIndex) {
         if (this.navigable) {
@@ -6788,8 +6758,8 @@ class GanttComponent {
         }
     }
     /**
-     * Focuses the targeted task in the Timeline part of the component,
-     * ([see example]({% slug keyboard_navigation_gantt %}#toc-controlling-the-focus)).
+     * Focuses the specified task in the Timeline ([see example]({% slug keyboard_navigation_gantt %}#toc-controlling-the-focus)).
+     * @param taskIndex The index of the task.
      */
     focusTask(taskIndex) {
         if (this.navigable) {
@@ -6797,10 +6767,9 @@ class GanttComponent {
         }
     }
     /**
-     * Applies the minimum possible width for the specified column,
-     * so that the whole text fits without wrapping. This method expects the Gantt
-     * to be resizable (set `resizable` to `true`).
-     * Makes sense to execute this method only after the Gantt is already populated with data.
+     * Sets the minimum width for the specified column so that its content fits.
+     * The Gantt must be resizable.
+     * @param column The column to auto-fit.
      */
     autoFitColumn(column) {
         if (isPresent(this.treeList)) {
@@ -6808,10 +6777,10 @@ class GanttComponent {
         }
     }
     /**
-     * Adjusts the width of the specified columns to fit the entire content, including headers, without wrapping.
-     * If no columns are specified, `autoFitColumns` is applied to all columns.
-     *
-     * This method requires the Gantt to be resizable (set `resizable` to `true`).
+     * Adjusts the width of the specified columns to fit their content.
+     * If no columns are specified, fits all columns.
+     * The Gantt must be resizable to use this method.
+     * @param columns The columns to auto-fit.
      */
     autoFitColumns(columns = this.columns) {
         if (isPresent(this.treeList)) {
@@ -6819,7 +6788,9 @@ class GanttComponent {
         }
     }
     /**
-     * Clears the already loaded children for the dataItem so that the Gantt will fetch them again the next time it is rendered.
+     * Clears loaded children for the data item so the Gantt fetches them again.
+     * @param dataItem The data item to reload.
+     * @param reloadChildren Whether to reload children.
      */
     reload(dataItem, reloadChildren) {
         if (isPresent(this.treeList)) {
@@ -6828,14 +6799,10 @@ class GanttComponent {
     }
     /**
      * Changes the position of the specified column.
-     * The reordering of columns operates only on the level
-     * which is inferred by the source column.
-     * For the `reorderColumn` method to work properly,
-     * the `source` column has to be visible.
-     *
-     * @param {ColumnBase} source - The column whose position will be changed.
-     * @param {number} destIndex - The new position of the column.
-     * @param {ColumnReorderConfig} options - Additional options.
+     * The source column must be visible.
+     * @param source The column to move.
+     * @param destIndex The new position index.
+     * @param options Additional options.
      */
     reorderColumn(source, destIndex, options = { before: false }) {
         if (isPresent(this.treeList)) {
@@ -6843,10 +6810,8 @@ class GanttComponent {
         }
     }
     /**
-     * Forces the TreeList to evaluate if some data items have changed and re-renders the rows information, if needed.
-     * Recalculates and re-renders the Timeline period, if needed.
-     * Redraws changed dependencies, if needed.
-     * Executes all row-related callbacks anew.
+     * Forces the Gantt to re-evaluate data items and re-render the rows and Timeline period, if needed.
+     * Also redraws dependencies and executes row-related callbacks.
      */
     updateView() {
         if (isPresent(this.treeList)) {
@@ -6856,7 +6821,9 @@ class GanttComponent {
         this.dependencyDomService.notifyChanges();
     }
     /**
-     * Opens the task editing dialog.
+     * Opens the task editing dialog for the specified data item.
+     * @param dataItem The task data item.
+     * @param formGroup The form group for editing.
      */
     editTask(dataItem, formGroup) {
         if (!this.showEditingDialog) {
@@ -6891,12 +6858,15 @@ class GanttComponent {
     }
     /**
      * Opens a cell for editing.
+     * @param dataItem The data item.
+     * @param column The column index, name, or object.
+     * @param formGroup The form group for editing.
      */
     editCell(dataItem, column, formGroup) {
         this.treeList.editCell(dataItem, column, formGroup);
     }
     /**
-     * Closes an edited cell.
+     * Closes the currently edited cell.
      */
     closeCell() {
         this.treeList.closeCell();
@@ -7552,10 +7522,10 @@ class GanttComponent {
 
             i18n-columnsReset="kendo.gantt.columnsReset|The text shown in the column menu or column chooser for the columns reset button"
             columnsReset="Reset"
-            
+
             i18n-tooltipStartDateText="kendo.gantt.tooltipStartDateText|The text shown in the task tooltip before the task start date"
             tooltipStartDateText="Start"
-            
+
             i18n-tooltipEndDateText="kendo.gantt.tooltipEndDateText|The text shown in the task tooltip before the task end date"
             tooltipEndDateText="End"></ng-container>
         <kendo-gantt-toolbar
@@ -7968,10 +7938,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
             i18n-columnsReset="kendo.gantt.columnsReset|The text shown in the column menu or column chooser for the columns reset button"
             columnsReset="Reset"
-            
+
             i18n-tooltipStartDateText="kendo.gantt.tooltipStartDateText|The text shown in the task tooltip before the task start date"
             tooltipStartDateText="Start"
-            
+
             i18n-tooltipEndDateText="kendo.gantt.tooltipEndDateText|The text shown in the task tooltip before the task end date"
             tooltipEndDateText="End"></ng-container>
         <kendo-gantt-toolbar
@@ -8320,14 +8290,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * A directive which binds the Gantt to an array of objects by using
- * an ID and parent ID field to define the hierarchy.
+ * Binds the Gantt to an array of objects by using an ID and parent ID field to define the hierarchy.
+ *
+ * Use this directive to handle in-memory data operations such as sorting and filtering. [See example](slug:directives_databinding_gantt#binding-to-flat-data).
+ *
+ * @example
+ * ```html
+ * <kendo-gantt
+ *   [kendoGanttFlatBinding]="data"
+ *   parentIdField="parentTaskId"
+ *   idField="id"
+ *   [dependencies]="dependencies">
+ * </kendo-gantt>
+ * ```
  *
- * The directive encapsulates the in-memory handling of data operations such as sorting and filtering.
+ * @remarks
+ * Applied to: {@link GanttComponent}
  */
 class GanttFlatBindingDirective extends FlatBindingDirective {
     /**
-     * The array of data which will be used to populate the Gantt.
+     * Sets the array of data to populate the Gantt.
      */
     data;
     /**
@@ -8352,12 +8334,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * A directive which binds the Gantt to a tree of objects,
- * which encapsulates the in-memory handling of data operations such as sorting and filtering.
+ * Binds the Gantt to a tree of objects.
+ *
+ * Use this directive to handle in-memory data operations such as sorting and filtering. [See example](slug:directives_databinding_gantt#binding-to-hierarchical-data).
+ *
+ * @example
+ * ```html
+ * <kendo-gantt
+ *   [kendoGanttHierarchyBinding]="data"
+ *   childrenField="subtasks"
+ *   [dependencies]="dependencies">
+ * </kendo-gantt>
+ * ```
+ *
+ * @remarks
+ * Applied to: {@link GanttComponent}
  */
 class GanttHierarchyBindingDirective extends HierarchyBindingDirective {
     /**
-     * The array of data which will be used to populate the Gantt.
+     * Sets the array of data to populate the Gantt.
      */
     data;
     /**
@@ -8382,14 +8377,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * A directive which controls the expanded state of the items.
+ * Represents a directive that controls the expanded state of Gantt items.
+ *
+ * @example
+ * ```html
+ * <kendo-gantt kendoGanttExpandable [expandedKeys]="expandedKeys"></kendo-gantt>
+ * ```
+ *
+ * @remarks
+ * Applied to: {@link GanttComponent}
  */
 class GanttExpandableDirective extends ExpandableDirective {
     /**
-     * Defines the item key that will be stored in the expandedKeys collection.
-     * Defaults to the task data item ID field,
-     * which is specified in the [`taskModelFields`]({% slug api_gantt_ganttcomponent %}#toc-taskmodelfields) object.
-     *
+     * Sets the item key stored in the `expandedKeys` collection.
+     * The default value is the task data item ID field, specified in the `taskModelFields` object.
      */
     set expandBy(value) {
         super.expandBy = value;
@@ -8473,28 +8474,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-/**
- * When added to the .k-task-dot, the element will be kept with hover styles.
- * Used for the drag clue from which the dragging has started.
- */
 const DRAG_CLUE_HOVER_CLASS = 'k-hover';
-/**
- * Add the selection disabling class to the enitre container.
- * Otherwise existing selection on a given task text prevents dragging the clue even if the clue has `user-select: none` styles.
- */
 const USER_SELECT_NONE_CLASS = 'k-user-select-none';
-/**
- * When added to the .k-task-wrap, the containing .k-task-dot elements will be kept visible even when not hovered.
- * Used for the drag clue from which the dragging has started.
- */
 const TASK_WRAPPER_DRAG_CLASS = 'k-origin';
-/**
- * Use 20px margin between the pointer and the popup.
- * Could be made user-configurable if there's demand.
- */
 const DEFAULT_POPUP_VERTICAL_MARGIN = 20;
 /**
- * A directive which enables the creation of new dependencies via dragging.
+ * Enables creating new dependencies by dragging.
+ *
+ * ```html
+ * <kendo-gantt kendoGanttDependencyDragCreate></kendo-gantt>
+ * ```
+ *
+ * @remarks
+ * Applied to: {@link GanttComponent}
  */
 class DependencyDragCreateDirective {
     gantt;
@@ -8504,7 +8496,7 @@ class DependencyDragCreateDirective {
     popupService;
     timelineScrollService;
     /**
-     * Specifies whether the validation tooltip will be displayed during drag operations.
+     * Shows the validation tooltip during drag operations.
      *
      * @default true
      */
@@ -8802,11 +8794,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * The Gantt timeline day view component.
+ * Represents the Gantt timeline day view component.
+ *
+ * @example
+ * ```html
+ * <kendo-gantt-timeline-day-view></kendo-gantt-timeline-day-view>
+ * ```
  */
 class TimelineDayViewComponent extends ViewBase {
     /**
-     * The type for this view (`day`).
+     * Specifies the type for this view (`day`).
      */
     type = 'day';
     constructor(optionChangesService, dependencyDomService) {
@@ -8836,11 +8833,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: OptionChangesService }, { type: DependencyDomService }]; } });
 
 /**
- * The Gantt timeline week view component.
+ * Represents the Gantt timeline week view component.
+ *
+ * @example
+ * ```html
+ * <kendo-gantt-timeline-week-view></kendo-gantt-timeline-week-view>
+ * ```
  */
 class TimelineWeekViewComponent extends ViewBase {
     /**
-     * The type for this view (`week`).
+     * Specifies the type for this view (`week`).
      */
     type = 'week';
     constructor(optionChangesService, dependencyDomService) {
@@ -8870,11 +8872,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: OptionChangesService }, { type: DependencyDomService }]; } });
 
 /**
- * The Gantt timeline month view component.
+ * Represents the Gantt timeline month view component.
+ *
+ * @example
+ * ```html
+ * <kendo-gantt-timeline-month-view></kendo-gantt-timeline-month-view>
+ * ```
  */
 class TimelineMonthViewComponent extends ViewBase {
     /**
-     * The type for this view (`month`).
+     * Specifies the type for this view (`month`).
      */
     type = 'month';
     constructor(optionChangesService, dependencyDomService) {
@@ -8904,11 +8911,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: OptionChangesService }, { type: DependencyDomService }]; } });
 
 /**
- * The Gantt timeline year view component.
+ * Represents the Gantt timeline year view component.
+ *
+ * @example
+ * ```html
+ * <kendo-gantt-timeline-year-view></kendo-gantt-timeline-year-view>
+ * ```
  */
 class TimelineYearViewComponent extends ViewBase {
     /**
-     * The type for this view (`year`).
+     * Specifies the type for this view (`year`).
      */
     type = 'year';
     constructor(optionChangesService, dependencyDomService) {
@@ -8938,8 +8950,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: OptionChangesService }, { type: DependencyDomService }]; } });
 
 /**
- * A directive which handles the [`selectionChange`]({% slug api_gantt_ganttcomponent %}#toc-selectionchange) event of the Gantt
- * ([see example]({% slug selection_gantt %}#toc-built-in-directive))
+ * Handles the [`selectionChange`]({% slug api_gantt_ganttcomponent %}#toc-selectionchange) event of the Gantt component.
+ * ([See example]({% slug selection_gantt %}#toc-built-in-directive)).
+ *
+ * @example
+ * ```html
+ * <kendo-gantt kendoGanttSelectable [(selectedKeys)]="selectedKeys"></kendo-gantt>
+ * ```
+ *
+ * @remarks
+ * Applied to: {@link GanttComponent}
  */
 class SelectableDirective {
     gantt;
@@ -8971,12 +8991,12 @@ class SelectableDirective {
         this.gantt.updateView();
     }
     /**
-     * Fires when the selected keys are changed.
+     * Emits when the selected keys change.
      */
     selectedKeysChange = new EventEmitter();
     /**
-     * The field name or a function that specifies the data item unique key identifier.
-     * By default, the string field `id` is used.
+     * Sets the field name or function that identifies the unique key for a data item.
+     * Uses the string field `id` by default.
      */
     set itemKey(value) {
         if (isString(value)) {
@@ -9047,8 +9067,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Custom component messages override default component messages
- * ([see example](slug:globalization_treelist#toc-custom-messages)).
+ * Represents the custom messages component for the Kendo UI for Angular Gantt.
+ * Use this component to override default messages.
+ *
+ * @example
+ * ```html
+ * <kendo-gantt-messages
+ *   addTaskText="Add Task"
+ *   cancelButtonText="Cancel">
+ * </kendo-gantt-messages>
+ * ```
  */
 class CustomMessagesComponent extends Messages {
     service;
@@ -9082,15 +9110,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
+/**
+ * Represents the Gantt task drag directive.
+ *
+ * Use this directive to enable dragging of tasks in the Gantt. The directive listens and emits events with information about the dragged task.
+ *
+ * @example
+ * ```html
+ * <kendo-gantt [data]="tasks" kendoGanttTaskDrag (taskDrag)="onTaskDrag($event)" (taskDragEnd)="onTaskDragEnd($event)">
+ * </kendo-gantt>
+ * ```
+ *
+ * @remarks
+ * Applied to: {@link GanttComponent}
+ */
 class TaskDragDirective {
     /**
-     * Emitted while the end user is resizing or moving a task through dragging.
+     * Emits while the user resizes or moves a task by dragging.
      */
     taskDrag = new EventEmitter();
     /**
-     * Triggered when the dragging action associated with resizing or moving an event is finished.
-     * The event data contains all necessary information to update the task and all related tasks
-     * accordingly.
+     * Fires when the user finishes dragging to resize or move a task.
+     * The event data gives you all information needed to update the task and related tasks.
      */
     taskDragEnd = new EventEmitter();
     subs = new Subscription();
@@ -9148,7 +9189,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
-* Utility array that contains all `@progress/kendo-angular-gantt` related components and directives
+* Use the `KENDO_GANTT` utility array to import all Kendo UI for Angular Gantt components and directives to a standalone Angular component.
 */
 const KENDO_GANTT = [
     GanttComponent,
@@ -9184,34 +9225,23 @@ const KENDO_GANTT = [
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the Gantt component.
+ * Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) definition for the Gantt component.
  *
- * @example
+ * Use this module to include the Gantt component in your NgModule-based application.
  *
- * ```ts-no-run
- * // Import the Gantt module
+ * @example
+ * ```typescript
  * import { GanttModule } from '@progress/kendo-angular-gantt';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
+ * import { BrowserModule } from '@angular/platform-browser';
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, GanttModule], // import Gantt module
- *     bootstrap:    [AppComponent]
+ * @NgModule({
+ *   declarations: [AppComponent],
+ *   imports: [BrowserModule, GanttModule],
+ *   bootstrap: [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class GanttModule {