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

package/column-menu/column-menu.service.d.ts

@@ -8,12 +8,17 @@ import * as i0 from "@angular/core";
  * Represents the service that is passed to the
  * [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
  *
- * {% meta height:500 %}
- * {% embed_file column-menu/template-item/app.component.ts preview %}
- * {% embed_file column-menu/template-item/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
+ * @example
+ * ```html
+ * <kendo-treelist>
+ *   <ng-template
+ *     kendoTreeListColumnMenuTemplate
+ *     let-service="service"
+ *     let-column="column">
+ *     <kendo-treelist-columnmenu-sort [service]="service">
+ *   </ng-template>
+ * </kendo-treelist>
+ * ```
  */
 export declare class ColumnMenuService {
     /**

package/columns/column-base.d.ts

@@ -28,8 +28,8 @@ export declare class ColumnBase implements OnChanges {
     matchesMedia: boolean;
     /**
      * The column index after reordering.
-     *
-     * > `orderIndex` is a read-only property. Setting this field does not affect column order.
+     * The orderIndex` is a read-only property. Setting this field does not affect column order.
+     * @default 0
      */
     orderIndex: number;
     /**
@@ -61,6 +61,7 @@ export declare class ColumnBase implements OnChanges {
     reorderable: boolean;
     /**
      * The width (in pixels) below which the user is not able to resize the column by using the UI.
+     * @default 10
      */
     minResizableWidth: number;
     /**
@@ -77,48 +78,9 @@ export declare class ColumnBase implements OnChanges {
      */
     autoSize: boolean;
     /**
-     * Toggles the locked (frozen) state of the columns ([more information and example]({% slug locked_columns_treelist %})).
+     * Toggles the locked (frozen) state of the columns ([more information and example](slug:locked_columns_treelist)).
      *
      * @default false
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <kendo-treelist [data]="treelistData" [scrollable]="scrollable" style="height: 200px">
-     *          <kendo-treelist-column field="ProductID" title="Product ID" [width]="120" [locked]="true">
-     *          </kendo-treelist-column>
-     *          <kendo-treelist-column field="ProductName" title="Product Name" [width]="200">
-     *          </kendo-treelist-column>
-     *          <kendo-treelist-column field="UnitPrice" title="Unit Price" [width]="230">
-     *          </kendo-treelist-column>
-     *        </kendo-treelist>
-     *    `
-     * })
-     *
-     * class AppComponent {
-     *    public treelistData: any[];
-     *
-     *    constructor() {
-     *        this.treelistData = products;
-     *    }
-     * }
-     *
-     * const products = [{
-     *    "ProductID": 1,
-     *    "ProductName": "Chai",
-     *    "UnitPrice": 18.0000,
-     *    "Discontinued": true
-     *  }, {
-     *    "ProductID": 2,
-     *    "ProductName": "Chang",
-     *    "UnitPrice": 19.0000,
-     *    "Discontinued": false
-     *  }
-     * ];
-     *
-     * ```
      */
     set locked(value: boolean);
     get locked(): boolean;
@@ -130,84 +92,29 @@ export declare class ColumnBase implements OnChanges {
      */
     hidden: boolean;
     /**
-     * Sets the condition that needs to be satisfied for a column to remain visible ([see example]({% slug responsive_treelist %}#toc-columns)).
+     * Sets the condition that needs to be satisfied for a column to remain visible ([see example](slug:responsive_treelist#toc-columns)).
      * If you set the `hidden` property, the behavior of `media` is overridden.
-     *
-     * @example
-     * ```ts-no-run
-     * <kendo-treelist>
-     *    <kendo-treelist-column field="UnitPrice" media="(min-width: 320px)">
-     *    </kendo-treelist-column>
-     * </kendo-treelist>
-     * ```
-     *
-     * Accepts the device identifiers that are [available in Bootstrap 4](https://v4-alpha.getbootstrap.com/layout/treelist/#treelist-options)
-     * ([see example]({% slug responsive_treelist %}#toc-bootstrap-4-compatibility)):
-     * * `"xs"`&mdash;Equivalent to `"(max-width: 576px)"`.
-     * * `"sm"`&mdash;Equivalent to `"(min-width: 576px)"`.
-     * * `"md"`&mdash;Equivalent to `"(min-width: 768px)"`.
-     * * `"lg"`&mdash;Equivalent to `"(min-width: 992px)"`.
-     * * `"xl"`&mdash;Equivalent to `"(min-width: 1200px)"`.
-     *
-     * @example
-     * ```ts-no-run
-     * <kendo-treelist>
-     *    <kendo-treelist-column field="UnitPrice" media="md">
-     *    </kendo-treelist-column>
-     * </kendo-treelist>
-     * ```
      */
     media: string;
     /**
      * Specifies if the column can be locked or unlocked from the column menu or by reordering the columns.
+     * @default true
      */
     lockable: boolean;
     /**
      * Specifies if the column menu will be shown for the column.
+     * @default true
      */
     columnMenu: boolean;
     /**
      * Specifies if the column will be included in the column-chooser list.
+     * @default true
      */
     includeInChooser: boolean;
     /**
      * Sets the custom styles for the table cells (excluding the footer and header ones) of the column. Under the hood,
      * to apply the property, the `style` option uses the
-     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive.
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <kendo-treelist [data]="treelistData" style="height: 200px">
-     *          <kendo-treelist-column field="ProductName" title="Product Name" [width]="200" [style]="{'text-align': 'right'}">
-     *          </kendo-treelist-column>
-     *          <kendo-treelist-column field="UnitPrice" title="Unit Price" [width]="230">
-     *          </kendo-treelist-column>
-     *        </kendo-treelist>
-     *    `
-     * })
-     *
-     * class AppComponent {
-     *    public treelistData: any[];
-     *
-     *    constructor() {
-     *        this.treelistData = [{
-     *            "ProductID": 1,
-     *            "ProductName": "Chai",
-     *            "UnitPrice": 18.0000,
-     *            "Discontinued": true
-     *          }, {
-     *            "ProductID": 2,
-     *            "ProductName": "Chang",
-     *            "UnitPrice": 19.0000,
-     *            "Discontinued": false
-     *          }];
-     *    }
-     * }
-     *
-     * ```
+     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_treelist).
      */
     style: {
         [key: string]: string;
@@ -215,41 +122,7 @@ export declare class ColumnBase implements OnChanges {
     /**
      * Sets the custom styles for the header cell of the column. Under the hood, to apply the property,
      * the `headerStyle` option uses the
-     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive.
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <kendo-treelist [data]="treelistData" style="height: 200px">
-     *          <kendo-treelist-column field="ProductName" title="Product Name" [width]="200" [headerStyle]="{'text-align': 'right'}">
-     *          </kendo-treelist-column>
-     *          <kendo-treelist-column field="UnitPrice" title="Unit Price" [width]="230">
-     *          </kendo-treelist-column>
-     *        </kendo-treelist>
-     *    `
-     * })
-     *
-     * class AppComponent {
-     *    public treelistData: any[];
-     *
-     *    constructor() {
-     *        this.treelistData = [{
-     *            "ProductID": 1,
-     *            "ProductName": "Chai",
-     *            "UnitPrice": 18.0000,
-     *            "Discontinued": true
-     *          }, {
-     *            "ProductID": 2,
-     *            "ProductName": "Chang",
-     *            "UnitPrice": 19.0000,
-     *            "Discontinued": false
-     *          }];
-     *    }
-     * }
-     *
-     * ```
+     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_treelist).
      */
     headerStyle: {
         [key: string]: string;
@@ -257,44 +130,7 @@ export declare class ColumnBase implements OnChanges {
     /**
      * Sets the custom styles for the footer cell of the column. Under the hood, to apply the property,
      * the `footerStyle` option uses the
-     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive.
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <kendo-treelist [data]="treelistData" style="height: 200px">
-     *          <kendo-treelist-column field="ProductName" title="Product Name" [width]="200" [footerStyle]="{'text-align': 'right'}">
-     *              <ng-template kendoTreeListFooterTemplate>
-     *                  footer text
-     *              </ng-template>
-     *          </kendo-treelist-column>
-     *          <kendo-treelist-column field="UnitPrice" title="Unit Price" [width]="230">
-     *          </kendo-treelist-column>
-     *        </kendo-treelist>
-     *    `
-     * })
-     *
-     * class AppComponent {
-     *    public treelistData: any[];
-     *
-     *    constructor() {
-     *        this.treelistData = [{
-     *            "ProductID": 1,
-     *            "ProductName": "Chai",
-     *            "UnitPrice": 18.0000,
-     *            "Discontinued": true
-     *          }, {
-     *            "ProductID": 2,
-     *            "ProductName": "Chang",
-     *            "UnitPrice": 19.0000,
-     *            "Discontinued": false
-     *          }];
-     *    }
-     * }
-     *
-     * ```
+     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_treelist).
      */
     footerStyle: {
         [key: string]: string;
@@ -304,48 +140,6 @@ export declare class ColumnBase implements OnChanges {
      * [NgClass](link:site.data.urls.angular['ngclassapi']) directive.
      * To customize header and footer column cells, use the [`headerClass`]({% slug api_treelist_columncomponent %}#toc-headerclass)
      * and [`footerClass`]({% slug api_treelist_columncomponent %}#toc-footerclass) inputs.
-     *
-     * @example
-     * ```ts
-     * import { Component, ViewEncapsulation } from '@angular/core';
-     *
-     * _@Component({
-     *    selector: 'my-app',
-     *    encapsulation: ViewEncapsulation.None,
-     *    styles: [`
-     *        tr .myClass {
-     *            text-align: right
-     *       }
-     *    `],
-     *    template: `
-     *        <kendo-treelist [data]="treelistData" style="height: 200px">
-     *          <kendo-treelist-column field="ProductName" title="Product Name" [width]="200" [class]="{'myClass': true}">
-     *          </kendo-treelist-column>
-     *          <kendo-treelist-column field="UnitPrice" title="Unit Price" [width]="230">
-     *          </kendo-treelist-column>
-     *        </kendo-treelist>
-     *    `
-     * })
-     *
-     * class AppComponent {
-     *    public treelistData: any[];
-     *
-     *    constructor() {
-     *        this.treelistData = [{
-     *            "ProductID": 1,
-     *            "ProductName": "Chai",
-     *            "UnitPrice": 18.0000,
-     *            "Discontinued": true
-     *          }, {
-     *            "ProductID": 2,
-     *            "ProductName": "Chang",
-     *            "UnitPrice": 19.0000,
-     *            "Discontinued": false
-     *          }];
-     *    }
-     * }
-     *
-     * ```
      */
     cssClass: string | string[] | Set<string> | {
         [key: string]: any;
@@ -353,49 +147,7 @@ export declare class ColumnBase implements OnChanges {
     /**
      * Sets the custom CSS classes to the column header cell. Under the hood, to apply the property,
      * the `headerClass` option uses the
-     * [NgClass](link:site.data.urls.angular['ngclassapi']) directive.
-     *
-     * @example
-     * ```ts
-     * import { Component, ViewEncapsulation } from '@angular/core';
-     *
-     * _@Component({
-     *    selector: 'my-app',
-     *    encapsulation: ViewEncapsulation.None,
-     *    styles: [`
-     *        tr .myClass {
-     *            text-align: right
-     *       }
-     *    `],
-     *    template: `
-     *        <kendo-treelist [data]="treelistData" style="height: 200px">
-     *          <kendo-treelist-column field="ProductName" title="Product Name" [width]="200" [headerClass]="{'myClass': true}">
-     *          </kendo-treelist-column>
-     *          <kendo-treelist-column field="UnitPrice" title="Unit Price" [width]="230">
-     *          </kendo-treelist-column>
-     *        </kendo-treelist>
-     *    `
-     * })
-     *
-     * class AppComponent {
-     *    public treelistData: any[];
-     *
-     *    constructor() {
-     *        this.treelistData = [{
-     *            "ProductID": 1,
-     *            "ProductName": "Chai",
-     *            "UnitPrice": 18.0000,
-     *            "Discontinued": true
-     *          }, {
-     *            "ProductID": 2,
-     *            "ProductName": "Chang",
-     *            "UnitPrice": 19.0000,
-     *            "Discontinued": false
-     *          }];
-     *    }
-     * }
-     *
-     * ```
+     * [NgClass](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_treelist).
      */
     headerClass: string | string[] | Set<string> | {
         [key: string]: any;
@@ -403,52 +155,7 @@ export declare class ColumnBase implements OnChanges {
     /**
      * Sets the custom CSS classes to the column footer cell. Under the hood, to apply the property,
      * the `footerClass` option uses the
-     * [NgClass](link:site.data.urls.angular['ngclassapi']) directive.
-     *
-     * @example
-     * ```ts
-     * import { Component, ViewEncapsulation } from '@angular/core';
-     *
-     * _@Component({
-     *    selector: 'my-app',
-     *    encapsulation: ViewEncapsulation.None,
-     *    styles: [`
-     *        tr .myClass {
-     *            text-align: right
-     *       }
-     *    `],
-     *    template: `
-     *        <kendo-treelist [data]="treelistData" style="height: 200px">
-     *          <kendo-treelist-column field="ProductName" title="Product Name" [width]="200" [footerClass]="{'myClass': true}">
-     *              <ng-template kendoTreeListFooterTemplate>
-     *                  footer text
-     *              </ng-template>
-     *          </kendo-treelist-column>
-     *          <kendo-treelist-column field="UnitPrice" title="Unit Price" [width]="230">
-     *          </kendo-treelist-column>
-     *        </kendo-treelist>
-     *    `
-     * })
-     *
-     * class AppComponent {
-     *    public treelistData: any[];
-     *
-     *    constructor() {
-     *        this.treelistData = [{
-     *            "ProductID": 1,
-     *            "ProductName": "Chai",
-     *            "UnitPrice": 18.0000,
-     *            "Discontinued": true
-     *          }, {
-     *            "ProductID": 2,
-     *            "ProductName": "Chang",
-     *            "UnitPrice": 19.0000,
-     *            "Discontinued": false
-     *          }];
-     *    }
-     * }
-     *
-     * ```
+     * [NgClass](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_treelist).
      */
     footerClass: string | string[] | Set<string> | {
         [key: string]: any;

package/columns/sort-settings.d.ts

@@ -4,6 +4,14 @@
 *-------------------------------------------------------------------------------------------*/
 /**
  * Defines the settings for sorting the TreeList column.
+ *
+ * @example
+ * ```html
+ * <kendo-treelist ...>
+ *   <kendo-treelist-column field="ProductName" [sortable]="{ allowUnsort: true, initialDirection: 'asc'}">
+ *   </kendo-treelist-column>
+ * </kendo-treelist>
+ * ```
  */
 export declare type ColumnSortSettings = boolean | {
     /**
@@ -21,6 +29,11 @@ export declare type ColumnSortSettings = boolean | {
 };
 /**
  * Defines the settings for sorting the TreeList.
+ *
+ * @example
+ * ```html
+ * <kendo-treelist [sortable]="{ mode: 'multiple', allowUnsort: false}"></kendo-treelist>
+ * ```
  */
 export declare type SortSettings = boolean | ColumnSortSettings & {
     /**

package/common/single-popup.service.d.ts

@@ -17,6 +17,9 @@ export declare class PopupCloseEvent extends PreventableEvent {
      * The original DOM event that causes the popup to close.
      */
     originalEvent: any;
+    /**
+     * @hidden
+     */
     constructor(e: any);
 }
 /**
@@ -36,6 +39,9 @@ export declare class SinglePopupService implements OnDestroy {
     private removeClick;
     private popupRef;
     private scrollSubscription;
+    /**
+     * @hidden
+     */
     constructor(popupService: PopupService, renderer: Renderer2, ngZone: NgZone, scrollSyncService: ScrollSyncService, localization: LocalizationService);
     /**
      * @hidden

package/editing/cancel-event-args.interface.d.ts

@@ -4,6 +4,6 @@
 *-------------------------------------------------------------------------------------------*/
 import { SaveEvent } from "./save-event-args.interface";
 /**
- * Arguments for the `cancel` event.
+ * Arguments for the `cancel` event. [See example](slug:editing_reactive_forms_treelist#toc-cancelling-editing).
  */
 export declare type CancelEvent = SaveEvent;

package/esm2020/column-menu/column-menu.service.mjs

@@ -8,12 +8,17 @@ import * as i0 from "@angular/core";
  * Represents the service that is passed to the
  * [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
  *
- * {% meta height:500 %}
- * {% embed_file column-menu/template-item/app.component.ts preview %}
- * {% embed_file column-menu/template-item/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
+ * @example
+ * ```html
+ * <kendo-treelist>
+ *   <ng-template
+ *     kendoTreeListColumnMenuTemplate
+ *     let-service="service"
+ *     let-column="column">
+ *     <kendo-treelist-columnmenu-sort [service]="service">
+ *   </ng-template>
+ * </kendo-treelist>
+ * ```
  */
 export class ColumnMenuService {
     constructor() {

package/esm2020/columns/column-base.mjs

@@ -34,8 +34,8 @@ export class ColumnBase {
         this.matchesMedia = true;
         /**
          * The column index after reordering.
-         *
-         * > `orderIndex` is a read-only property. Setting this field does not affect column order.
+         * The orderIndex` is a read-only property. Setting this field does not affect column order.
+         * @default 0
          */
         this.orderIndex = 0;
         /**
@@ -58,19 +58,23 @@ export class ColumnBase {
         this.reorderable = true;
         /**
          * The width (in pixels) below which the user is not able to resize the column by using the UI.
+         * @default 10
          */
         this.minResizableWidth = 10;
         this._locked = false;
         /**
          * Specifies if the column can be locked or unlocked from the column menu or by reordering the columns.
+         * @default true
          */
         this.lockable = true;
         /**
          * Specifies if the column menu will be shown for the column.
+         * @default true
          */
         this.columnMenu = true;
         /**
          * Specifies if the column will be included in the column-chooser list.
+         * @default true
          */
         this.includeInChooser = true;
         /**
@@ -105,48 +109,9 @@ export class ColumnBase {
     }
     get width() { return this._width; }
     /**
-     * Toggles the locked (frozen) state of the columns ([more information and example]({% slug locked_columns_treelist %})).
+     * Toggles the locked (frozen) state of the columns ([more information and example](slug:locked_columns_treelist)).
      *
      * @default false
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <kendo-treelist [data]="treelistData" [scrollable]="scrollable" style="height: 200px">
-     *          <kendo-treelist-column field="ProductID" title="Product ID" [width]="120" [locked]="true">
-     *          </kendo-treelist-column>
-     *          <kendo-treelist-column field="ProductName" title="Product Name" [width]="200">
-     *          </kendo-treelist-column>
-     *          <kendo-treelist-column field="UnitPrice" title="Unit Price" [width]="230">
-     *          </kendo-treelist-column>
-     *        </kendo-treelist>
-     *    `
-     * })
-     *
-     * class AppComponent {
-     *    public treelistData: any[];
-     *
-     *    constructor() {
-     *        this.treelistData = products;
-     *    }
-     * }
-     *
-     * const products = [{
-     *    "ProductID": 1,
-     *    "ProductName": "Chai",
-     *    "UnitPrice": 18.0000,
-     *    "Discontinued": true
-     *  }, {
-     *    "ProductID": 2,
-     *    "ProductName": "Chang",
-     *    "UnitPrice": 19.0000,
-     *    "Discontinued": false
-     *  }
-     * ];
-     *
-     * ```
      */
     set locked(value) {
         this._locked = value;

package/esm2020/common/single-popup.service.mjs

@@ -27,6 +27,9 @@ const contains = (node, predicate) => {
  * Arguments for the `close` event of the filter and column-menu popup.
  */
 export class PopupCloseEvent extends PreventableEvent {
+    /**
+     * @hidden
+     */
     constructor(e) {
         super();
         this.originalEvent = e;
@@ -38,6 +41,9 @@ const DEFAULT_POPUP_CLASS = 'k-grid-filter-popup';
  * ([see example]({% slug reusablecustomfilters_treelist %}#toc-filter-menu-with-popup)).
  */
 export class SinglePopupService {
+    /**
+     * @hidden
+     */
     constructor(popupService, renderer, ngZone, scrollSyncService, localization) {
         this.popupService = popupService;
         this.renderer = renderer;

package/esm2020/excel/excel-export-event.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { PreventableEvent } from '../common/preventable-event';
 /**
- * Arguments for the `excelExport` event.
+ * Arguments for the `excelExport` event. [See example](slug:excelexport_treelist#toc-customizing-generated-workbooks).
  */
 export class ExcelExportEvent extends PreventableEvent {
     constructor(workbook) {

package/esm2020/excel/excel.module.mjs

@@ -14,30 +14,18 @@ const declarations = [ExcelComponent, ExcelCommandDirective];
  * definition for the Excel component of the TreeList.
  *
  * @example
- *
- * ```ts-no-run
- * // Import the TreeList and Excel modules
- * import { TreeListModule, ExcelModule } from '@progress/kendo-angular-treelist';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
+ * ```ts
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
+ * import { BrowserModule } from "@angular/platform-browser";
+ * import { TreeListModule, ExcelModule } from '@progress/kendo-angular-treelist';
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
  * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, TreeListModule, ExcelModule], // import TreeList and Excel modules
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, TreeListModule, ExcelModule],
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 export class ExcelModule {

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: 1683189615,
-    version: '12.0.1',
+    publishDate: 1683809099,
+    version: '12.0.2-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };