@ng-nest/ui 20.1.4 → 20.1.6

package/fesm2022/ng-nest-ui-coversations.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, output, Component, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
+import { XToBoolean } from '@ng-nest/ui/core';
 import { XFormControlFunction, XValueAccessor } from '@ng-nest/ui/base-form';
 import { XListComponent } from '@ng-nest/ui/list';
 import * as i1 from '@angular/forms';
@@ -33,6 +34,11 @@ class XCoversationsProperty extends XFormControlFunction(X_COVERSATIONS_CONFIG_N
          * @en_US Node style
          */
         this.nodeStyle = input(...(ngDevMode ? [undefined, { debugName: "nodeStyle" }] : []));
+        /**
+         * @zh_CN 分组模板
+         * @en_US Group style
+         */
+        this.groupTpl = input(...(ngDevMode ? [undefined, { debugName: "groupTpl" }] : []));
         /**
          * @zh_CN 尺寸
          * @en_US Size
@@ -43,9 +49,26 @@ class XCoversationsProperty extends XFormControlFunction(X_COVERSATIONS_CONFIG_N
          * @en_US Node click event
          */
         this.nodeClick = output();
+        /**
+         * @zh_CN 加载更多
+         * @en_US load more
+         */
+        this.loadMore = input(false, ...(ngDevMode ? [{ debugName: "loadMore", transform: XToBoolean }] : [{ transform: XToBoolean }]));
+        /**
+         * @zh_CN 加载更多的文字
+         * @en_US Load more text
+         * @default '加载更多'
+         */
+        this.loadMoreText = input(this.config?.loadMoreText ?? '', ...(ngDevMode ? [{ debugName: "loadMoreText" }] : []));
+        /**
+         * @zh_CN 正在加载中的文字
+         * @en_US Loading
+         * @default '正在加载中'
+         */
+        this.loadingMoreText = input(this.config?.loadingMoreText ?? '', ...(ngDevMode ? [{ debugName: "loadingMoreText" }] : []));
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XCoversationsProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XCoversationsProperty, isStandalone: true, selector: "x-coversations-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, nodeStyle: { classPropertyName: "nodeStyle", publicName: "nodeStyle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XCoversationsProperty, isStandalone: true, selector: "x-coversations-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, nodeStyle: { classPropertyName: "nodeStyle", publicName: "nodeStyle", isSignal: true, isRequired: false, transformFunction: null }, groupTpl: { classPropertyName: "groupTpl", publicName: "groupTpl", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loadMore: { classPropertyName: "loadMore", publicName: "loadMore", isSignal: true, isRequired: false, transformFunction: null }, loadMoreText: { classPropertyName: "loadMoreText", publicName: "loadMoreText", isSignal: true, isRequired: false, transformFunction: null }, loadingMoreText: { classPropertyName: "loadingMoreText", publicName: "loadingMoreText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XCoversationsProperty, decorators: [{
             type: Component,
@@ -57,11 +80,11 @@ class XCoversationsComponent extends XCoversationsProperty {
         this.onChange && this.onChange(value);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XCoversationsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: XCoversationsComponent, isStandalone: true, selector: "x-coversations", providers: [XValueAccessor(XCoversationsComponent)], usesInheritance: true, ngImport: i0, template: "<div class=\"x-coversations\">\r\n  <x-list\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"valueChange($event)\"\r\n    [data]=\"data()\"\r\n    [nodeStyle]=\"nodeStyle()\"\r\n    [size]=\"size()\"\r\n    [nodeTpl]=\"nodeTpl()\"\r\n    inPortal\r\n  ></x-list>\r\n</div>\r\n", styles: [".x-coversations{margin:0;padding:0}.x-coversations{width:100%;display:block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XListComponent, selector: "x-list" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: XCoversationsComponent, isStandalone: true, selector: "x-coversations", providers: [XValueAccessor(XCoversationsComponent)], usesInheritance: true, ngImport: i0, template: "<div class=\"x-coversations\">\r\n  <x-list\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"valueChange($event)\"\r\n    [data]=\"data()\"\r\n    [nodeStyle]=\"nodeStyle()\"\r\n    [size]=\"size()\"\r\n    [nodeTpl]=\"nodeTpl()\"\r\n    [groupTpl]=\"groupTpl()\"\r\n    [loadMore]=\"loadMore()\"\r\n    [loadMoreText]=\"loadMoreText()\"\r\n    [loadingMoreText]=\"loadingMoreText()\"\r\n    inPortal\r\n  ></x-list>\r\n</div>\r\n", styles: [".x-coversations{margin:0;padding:0}.x-coversations{width:100%;display:block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: XListComponent, selector: "x-list" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XCoversationsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'x-coversations', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, XListComponent], providers: [XValueAccessor(XCoversationsComponent)], template: "<div class=\"x-coversations\">\r\n  <x-list\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"valueChange($event)\"\r\n    [data]=\"data()\"\r\n    [nodeStyle]=\"nodeStyle()\"\r\n    [size]=\"size()\"\r\n    [nodeTpl]=\"nodeTpl()\"\r\n    inPortal\r\n  ></x-list>\r\n</div>\r\n", styles: [".x-coversations{margin:0;padding:0}.x-coversations{width:100%;display:block}\n"] }]
+            args: [{ selector: 'x-coversations', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, XListComponent], providers: [XValueAccessor(XCoversationsComponent)], template: "<div class=\"x-coversations\">\r\n  <x-list\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"valueChange($event)\"\r\n    [data]=\"data()\"\r\n    [nodeStyle]=\"nodeStyle()\"\r\n    [size]=\"size()\"\r\n    [nodeTpl]=\"nodeTpl()\"\r\n    [groupTpl]=\"groupTpl()\"\r\n    [loadMore]=\"loadMore()\"\r\n    [loadMoreText]=\"loadMoreText()\"\r\n    [loadingMoreText]=\"loadingMoreText()\"\r\n    inPortal\r\n  ></x-list>\r\n</div>\r\n", styles: [".x-coversations{margin:0;padding:0}.x-coversations{width:100%;display:block}\n"] }]
         }] });
 
 class XCoversationsModule {

package/fesm2022/ng-nest-ui-coversations.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-nest-ui-coversations.mjs","sources":["../../../../lib/ng-nest/ui/coversations/coversations.property.ts","../../../../lib/ng-nest/ui/coversations/coversations.component.ts","../../../../lib/ng-nest/ui/coversations/coversations.component.html","../../../../lib/ng-nest/ui/coversations/coversations.module.ts","../../../../lib/ng-nest/ui/coversations/ng-nest-ui-coversations.ts"],"sourcesContent":["import { Component, input, output, TemplateRef } from '@angular/core';\r\nimport { XData, XSize, XStyle } from '@ng-nest/ui/core';\r\nimport { XListNode } from '@ng-nest/ui/list';\r\nimport { XFormControlFunction } from '@ng-nest/ui/base-form';\r\n\r\n/**\r\n * Coversations\r\n * @selector x-coversations\r\n * @decorator component\r\n */\r\nexport const XCoversationsPrefix = 'x-coversations';\r\nconst X_COVERSATIONS_CONFIG_NAME = 'coversations';\r\n\r\n/**\r\n * Coversations Property\r\n */\r\n@Component({ selector: `${XCoversationsPrefix}-property`, template: '' })\r\nexport class XCoversationsProperty extends XFormControlFunction(X_COVERSATIONS_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 列表数据\r\n   * @en_US List data\r\n   */\r\n  readonly data = input<XData<XCoversationNode>>([]);\r\n  /**\r\n   * @zh_CN 节点模板\r\n   * @en_US Node style\r\n   */\r\n  readonly nodeTpl = input<TemplateRef<any>>();\r\n  /**\r\n   * @zh_CN 节点样式\r\n   * @en_US Node style\r\n   */\r\n  readonly nodeStyle = input<XStyle>();\r\n  /**\r\n   * @zh_CN 尺寸\r\n   * @en_US Size\r\n   */\r\n  override readonly size = input<XSize>(this.config?.size ?? 'medium');\r\n  /**\r\n   * @zh_CN 节点点击事件\r\n   * @en_US Node click event\r\n   */\r\n  readonly nodeClick = output<XCoversationNode>();\r\n}\r\n\r\n/**\r\n * @zh_CN List 数据对象\r\n * @en_US List data object\r\n */\r\nexport interface XCoversationNode extends XListNode {}\r\n","import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\r\nimport { XCoversationsProperty } from './coversations.property';\r\nimport { XListComponent } from '@ng-nest/ui/list';\r\nimport { XValueAccessor } from '@ng-nest/ui/base-form';\r\nimport { FormsModule } from '@angular/forms';\r\n\r\n@Component({\r\n  selector: 'x-coversations',\r\n  templateUrl: './coversations.component.html',\r\n  styleUrls: ['./coversations.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [FormsModule, XListComponent],\r\n  providers: [XValueAccessor(XCoversationsComponent)]\r\n})\r\nexport class XCoversationsComponent extends XCoversationsProperty {\r\n  valueChange(value: any) {\r\n    this.onChange && this.onChange(value);\r\n  }\r\n}\r\n","<div class=\"x-coversations\">\r\n  <x-list\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"valueChange($event)\"\r\n    [data]=\"data()\"\r\n    [nodeStyle]=\"nodeStyle()\"\r\n    [size]=\"size()\"\r\n    [nodeTpl]=\"nodeTpl()\"\r\n    inPortal\r\n  ></x-list>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { XCoversationsComponent } from './coversations.component';\r\n\r\n@NgModule({\r\n  exports: [XCoversationsComponent],\r\n  imports: [XCoversationsComponent]\r\n})\r\nexport class XCoversationsModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-nest-ui-coversations.mjs","sources":["../../../../lib/ng-nest/ui/coversations/coversations.property.ts","../../../../lib/ng-nest/ui/coversations/coversations.component.ts","../../../../lib/ng-nest/ui/coversations/coversations.component.html","../../../../lib/ng-nest/ui/coversations/coversations.module.ts","../../../../lib/ng-nest/ui/coversations/ng-nest-ui-coversations.ts"],"sourcesContent":["import { Component, input, output, TemplateRef } from '@angular/core';\r\nimport { XData, XSize, XStyle, XBoolean, XToBoolean } from '@ng-nest/ui/core';\r\nimport { XListNode } from '@ng-nest/ui/list';\r\nimport { XFormControlFunction } from '@ng-nest/ui/base-form';\r\n\r\n/**\r\n * Coversations\r\n * @selector x-coversations\r\n * @decorator component\r\n */\r\nexport const XCoversationsPrefix = 'x-coversations';\r\nconst X_COVERSATIONS_CONFIG_NAME = 'coversations';\r\n\r\n/**\r\n * Coversations Property\r\n */\r\n@Component({ selector: `${XCoversationsPrefix}-property`, template: '' })\r\nexport class XCoversationsProperty extends XFormControlFunction(X_COVERSATIONS_CONFIG_NAME) {\r\n  /**\r\n   * @zh_CN 列表数据\r\n   * @en_US List data\r\n   */\r\n  readonly data = input<XData<XCoversationNode>>([]);\r\n  /**\r\n   * @zh_CN 节点模板\r\n   * @en_US Node style\r\n   */\r\n  readonly nodeTpl = input<TemplateRef<any>>();\r\n  /**\r\n   * @zh_CN 节点样式\r\n   * @en_US Node style\r\n   */\r\n  readonly nodeStyle = input<XStyle>();\r\n  /**\r\n   * @zh_CN 分组模板\r\n   * @en_US Group style\r\n   */\r\n  readonly groupTpl = input<TemplateRef<any>>();\r\n  /**\r\n   * @zh_CN 尺寸\r\n   * @en_US Size\r\n   */\r\n  override readonly size = input<XSize>(this.config?.size ?? 'medium');\r\n  /**\r\n   * @zh_CN 节点点击事件\r\n   * @en_US Node click event\r\n   */\r\n  readonly nodeClick = output<XCoversationNode>();\r\n  /**\r\n   * @zh_CN 加载更多\r\n   * @en_US load more\r\n   */\r\n  readonly loadMore = input<boolean, XBoolean>(false, { transform: XToBoolean });\r\n  /**\r\n   * @zh_CN 加载更多的文字\r\n   * @en_US Load more text\r\n   * @default '加载更多'\r\n   */\r\n  readonly loadMoreText = input<string>(this.config?.loadMoreText ?? '');\r\n  /**\r\n   * @zh_CN 正在加载中的文字\r\n   * @en_US Loading\r\n   * @default '正在加载中'\r\n   */\r\n  readonly loadingMoreText = input<string>(this.config?.loadingMoreText ?? '');\r\n}\r\n\r\n/**\r\n * @zh_CN List 数据对象\r\n * @en_US List data object\r\n */\r\nexport interface XCoversationNode extends XListNode {}\r\n","import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\r\nimport { XCoversationsProperty } from './coversations.property';\r\nimport { XListComponent } from '@ng-nest/ui/list';\r\nimport { XValueAccessor } from '@ng-nest/ui/base-form';\r\nimport { FormsModule } from '@angular/forms';\r\n\r\n@Component({\r\n  selector: 'x-coversations',\r\n  templateUrl: './coversations.component.html',\r\n  styleUrls: ['./coversations.component.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [FormsModule, XListComponent],\r\n  providers: [XValueAccessor(XCoversationsComponent)]\r\n})\r\nexport class XCoversationsComponent extends XCoversationsProperty {\r\n  valueChange(value: any) {\r\n    this.onChange && this.onChange(value);\r\n  }\r\n}\r\n","<div class=\"x-coversations\">\r\n  <x-list\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"valueChange($event)\"\r\n    [data]=\"data()\"\r\n    [nodeStyle]=\"nodeStyle()\"\r\n    [size]=\"size()\"\r\n    [nodeTpl]=\"nodeTpl()\"\r\n    [groupTpl]=\"groupTpl()\"\r\n    [loadMore]=\"loadMore()\"\r\n    [loadMoreText]=\"loadMoreText()\"\r\n    [loadingMoreText]=\"loadingMoreText()\"\r\n    inPortal\r\n  ></x-list>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { XCoversationsComponent } from './coversations.component';\r\n\r\n@NgModule({\r\n  exports: [XCoversationsComponent],\r\n  imports: [XCoversationsComponent]\r\n})\r\nexport class XCoversationsModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ng-nest-ui-examples.mjs

@@ -13,11 +13,11 @@ class XExamplesComponent {
         this.className = XExamplesPrefix;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XExamplesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: XExamplesComponent, isStandalone: true, selector: "x-examples", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [".x-examples{margin:0;padding:0}.x-examples{display:block}.x-examples .x-examples-html{padding:1.5rem 1.5rem 3.75rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom-left-radius:var(--x-border-radius);border-bottom-right-radius:var(--x-border-radius);position:relative}.x-examples .x-examples-tools{position:absolute;bottom:0;right:0;width:100%;display:flex;justify-content:center;align-items:center;border-top:.125rem dashed var(--x-border-500)}.x-examples .x-examples-code{margin-top:.25rem}.x-examples .x-examples-code>x-tabs>.x-tabs{border-radius:.125rem}.x-examples .x-examples-code>x-tabs>.x-tabs>.x-tabs-contents>.x-tab-content>.x-highlight{border-top-left-radius:0;border-top-right-radius:0;border:0}.x-examples .x-examples-code>x-tabs>.x-tabs>.x-tabs-contents>.x-tab-content>.x-highlight>pre{background-color:transparent}.x-examples .x-examples-info{padding:1rem 1.5rem;border-top-left-radius:var(--x-border-radius);border-top-right-radius:var(--x-border-radius);border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-left:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);background-color:var(--x-background-a100)}.x-examples .x-examples-info>p{margin:.25rem 0 0}.x-examples .x-examples-info>p:first-of-type{margin-top:0}.x-examples .x-examples-info>ul{margin:.25rem 0}.x-examples .x-examples-info>ul>li{list-style-type:circle;margin:.125rem .125rem .125rem 1.25rem;line-height:1.75rem}.x-examples .x-examples-info>ul>li::marker{color:var(--x-text-500)}.x-examples .x-examples-info>table{width:100%;border-collapse:collapse;border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-examples .x-examples-info>table tr>th,.x-examples .x-examples-info>table tr>td{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);text-align:left;padding:var(--x-padding-mini) var(--x-padding-small)}.x-examples .x-examples-info>table tr th{white-space:nowrap;color:var(--x-text)}.x-examples>x-tabs>.x-tabs{width:100%}.x-examples>x-tabs>.x-tabs>.x-tabs-list{border:none}.x-examples>x-tabs>.x-tabs-top>.x-tabs-list{border:none}.x-examples>x-tabs>.x-tabs-left>.x-tabs-contents,.x-examples>x-tabs>.x-tabs-top>.x-tabs-contents{background-color:transparent}.x-examples>x-tabs>.x-tabs-left>.x-tabs-list{padding:0}.x-examples>x-tabs>.x-tabs-left>.x-tabs-list>x-slider>.x-slider>.x-slider-scroll>ul{min-width:6rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: XExamplesComponent, isStandalone: true, selector: "x-examples", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [".x-examples{margin:0;padding:0}.x-examples{display:block}.x-examples .x-examples-html{padding:1.5rem 1.5rem 3.75rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom-left-radius:var(--x-border-radius);border-bottom-right-radius:var(--x-border-radius);position:relative}.x-examples .x-examples-tools{position:absolute;bottom:0;right:0;width:100%;display:flex;justify-content:center;align-items:center;border-top:.125rem dashed var(--x-border-500)}.x-examples .x-examples-code{margin-top:.25rem}.x-examples .x-examples-code>x-tabs>.x-tabs{border-radius:.125rem}.x-examples .x-examples-code>x-tabs>.x-tabs>.x-tabs-contents>.x-tab-content>.x-highlight{border-top-left-radius:0;border-top-right-radius:0;border:0;max-height:37.5rem;overflow:auto}.x-examples .x-examples-code>x-tabs>.x-tabs>.x-tabs-contents>.x-tab-content>.x-highlight>pre{background-color:transparent}.x-examples .x-examples-info{padding:1rem 1.5rem;border-top-left-radius:var(--x-border-radius);border-top-right-radius:var(--x-border-radius);border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-left:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);background-color:var(--x-background-a100)}.x-examples .x-examples-info>p{margin:.25rem 0 0}.x-examples .x-examples-info>p:first-of-type{margin-top:0}.x-examples .x-examples-info>ul{margin:.25rem 0}.x-examples .x-examples-info>ul>li{list-style-type:circle;margin:.125rem .125rem .125rem 1.25rem;line-height:1.75rem}.x-examples .x-examples-info>ul>li::marker{color:var(--x-text-500)}.x-examples .x-examples-info>table{width:100%;border-collapse:collapse;border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-examples .x-examples-info>table tr>th,.x-examples .x-examples-info>table tr>td{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);text-align:left;padding:var(--x-padding-mini) var(--x-padding-small)}.x-examples .x-examples-info>table tr th{white-space:nowrap;color:var(--x-text)}.x-examples>x-tabs>.x-tabs{width:100%}.x-examples>x-tabs>.x-tabs>.x-tabs-list{border:none}.x-examples>x-tabs>.x-tabs-top>.x-tabs-list{border:none}.x-examples>x-tabs>.x-tabs-left>.x-tabs-contents,.x-examples>x-tabs>.x-tabs-top>.x-tabs-contents{background-color:transparent}.x-examples>x-tabs>.x-tabs-left>.x-tabs-list{padding:0}.x-examples>x-tabs>.x-tabs-left>.x-tabs-list>x-slider>.x-slider>.x-slider-scroll>ul{min-width:6rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XExamplesComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XExamplesPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\r\n", styles: [".x-examples{margin:0;padding:0}.x-examples{display:block}.x-examples .x-examples-html{padding:1.5rem 1.5rem 3.75rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom-left-radius:var(--x-border-radius);border-bottom-right-radius:var(--x-border-radius);position:relative}.x-examples .x-examples-tools{position:absolute;bottom:0;right:0;width:100%;display:flex;justify-content:center;align-items:center;border-top:.125rem dashed var(--x-border-500)}.x-examples .x-examples-code{margin-top:.25rem}.x-examples .x-examples-code>x-tabs>.x-tabs{border-radius:.125rem}.x-examples .x-examples-code>x-tabs>.x-tabs>.x-tabs-contents>.x-tab-content>.x-highlight{border-top-left-radius:0;border-top-right-radius:0;border:0}.x-examples .x-examples-code>x-tabs>.x-tabs>.x-tabs-contents>.x-tab-content>.x-highlight>pre{background-color:transparent}.x-examples .x-examples-info{padding:1rem 1.5rem;border-top-left-radius:var(--x-border-radius);border-top-right-radius:var(--x-border-radius);border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-left:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);background-color:var(--x-background-a100)}.x-examples .x-examples-info>p{margin:.25rem 0 0}.x-examples .x-examples-info>p:first-of-type{margin-top:0}.x-examples .x-examples-info>ul{margin:.25rem 0}.x-examples .x-examples-info>ul>li{list-style-type:circle;margin:.125rem .125rem .125rem 1.25rem;line-height:1.75rem}.x-examples .x-examples-info>ul>li::marker{color:var(--x-text-500)}.x-examples .x-examples-info>table{width:100%;border-collapse:collapse;border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-examples .x-examples-info>table tr>th,.x-examples .x-examples-info>table tr>td{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);text-align:left;padding:var(--x-padding-mini) var(--x-padding-small)}.x-examples .x-examples-info>table tr th{white-space:nowrap;color:var(--x-text)}.x-examples>x-tabs>.x-tabs{width:100%}.x-examples>x-tabs>.x-tabs>.x-tabs-list{border:none}.x-examples>x-tabs>.x-tabs-top>.x-tabs-list{border:none}.x-examples>x-tabs>.x-tabs-left>.x-tabs-contents,.x-examples>x-tabs>.x-tabs-top>.x-tabs-contents{background-color:transparent}.x-examples>x-tabs>.x-tabs-left>.x-tabs-list{padding:0}.x-examples>x-tabs>.x-tabs-left>.x-tabs-list>x-slider>.x-slider>.x-slider-scroll>ul{min-width:6rem}\n"] }]
+            args: [{ selector: `${XExamplesPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\r\n", styles: [".x-examples{margin:0;padding:0}.x-examples{display:block}.x-examples .x-examples-html{padding:1.5rem 1.5rem 3.75rem;border:var(--x-border-width) var(--x-border-style) var(--x-border);border-bottom-left-radius:var(--x-border-radius);border-bottom-right-radius:var(--x-border-radius);position:relative}.x-examples .x-examples-tools{position:absolute;bottom:0;right:0;width:100%;display:flex;justify-content:center;align-items:center;border-top:.125rem dashed var(--x-border-500)}.x-examples .x-examples-code{margin-top:.25rem}.x-examples .x-examples-code>x-tabs>.x-tabs{border-radius:.125rem}.x-examples .x-examples-code>x-tabs>.x-tabs>.x-tabs-contents>.x-tab-content>.x-highlight{border-top-left-radius:0;border-top-right-radius:0;border:0;max-height:37.5rem;overflow:auto}.x-examples .x-examples-code>x-tabs>.x-tabs>.x-tabs-contents>.x-tab-content>.x-highlight>pre{background-color:transparent}.x-examples .x-examples-info{padding:1rem 1.5rem;border-top-left-radius:var(--x-border-radius);border-top-right-radius:var(--x-border-radius);border-top:var(--x-border-width) var(--x-border-style) var(--x-border);border-left:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);background-color:var(--x-background-a100)}.x-examples .x-examples-info>p{margin:.25rem 0 0}.x-examples .x-examples-info>p:first-of-type{margin-top:0}.x-examples .x-examples-info>ul{margin:.25rem 0}.x-examples .x-examples-info>ul>li{list-style-type:circle;margin:.125rem .125rem .125rem 1.25rem;line-height:1.75rem}.x-examples .x-examples-info>ul>li::marker{color:var(--x-text-500)}.x-examples .x-examples-info>table{width:100%;border-collapse:collapse;border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-examples .x-examples-info>table tr>th,.x-examples .x-examples-info>table tr>td{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border);border-right:var(--x-border-width) var(--x-border-style) var(--x-border);text-align:left;padding:var(--x-padding-mini) var(--x-padding-small)}.x-examples .x-examples-info>table tr th{white-space:nowrap;color:var(--x-text)}.x-examples>x-tabs>.x-tabs{width:100%}.x-examples>x-tabs>.x-tabs>.x-tabs-list{border:none}.x-examples>x-tabs>.x-tabs-top>.x-tabs-list{border:none}.x-examples>x-tabs>.x-tabs-left>.x-tabs-contents,.x-examples>x-tabs>.x-tabs-top>.x-tabs-contents{background-color:transparent}.x-examples>x-tabs>.x-tabs-left>.x-tabs-list{padding:0}.x-examples>x-tabs>.x-tabs-left>.x-tabs-list>x-slider>.x-slider>.x-slider-scroll>ul{min-width:6rem}\n"] }]
         }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']

package/fesm2022/ng-nest-ui-examples.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-nest-ui-examples.mjs","sources":["../../../../lib/ng-nest/ui/examples/examples.property.ts","../../../../lib/ng-nest/ui/examples/examples.component.ts","../../../../lib/ng-nest/ui/examples/examples.component.html","../../../../lib/ng-nest/ui/examples/examples.module.ts","../../../../lib/ng-nest/ui/examples/ng-nest-ui-examples.ts"],"sourcesContent":["/**\r\n * Examples\r\n * @selector x-examples\r\n * @decorator component\r\n */\r\nexport const XExamplesPrefix = 'x-examples';\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding } from '@angular/core';\r\nimport { XExamplesPrefix } from './examples.property';\r\n\r\n@Component({\r\n  selector: `${XExamplesPrefix}`,\r\n  templateUrl: './examples.component.html',\r\n  styleUrls: ['./style/index.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XExamplesComponent {\r\n  @HostBinding('class') className = XExamplesPrefix;\r\n}\r\n","<ng-content></ng-content>\r\n","import { NgModule } from '@angular/core';\r\nimport { XExamplesComponent } from './examples.component';\r\n\r\n@NgModule({\r\n  exports: [XExamplesComponent],\r\n  imports: [XExamplesComponent]\r\n})\r\nexport class XExamplesModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAAA;;;;AAIG;AACI,MAAM,eAAe,GAAG;;MCKlB,kBAAkB,CAAA;AAP/B,IAAA,WAAA,GAAA;QAQwB,IAAA,CAAA,SAAS,GAAG,eAAe;AAClD,IAAA;iIAFY,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,2HCV/B,+BACA,EAAA,MAAA,EAAA,CAAA,k/EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FDSa,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAP9B,SAAS;+BACE,CAAA,EAAG,eAAe,EAAE,EAAA,aAAA,EAGf,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+BAAA,EAAA,MAAA,EAAA,CAAA,k/EAAA,CAAA,EAAA;8BAGzB,SAAS,EAAA,CAAA;sBAA9B,WAAW;uBAAC,OAAO;;;MEJT,eAAe,CAAA;iIAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;kIAAf,eAAe,EAAA,OAAA,EAAA,CAFhB,kBAAkB,CAAA,EAAA,OAAA,EAAA,CADlB,kBAAkB,CAAA,EAAA,CAAA,CAAA;kIAGjB,eAAe,EAAA,CAAA,CAAA;;2FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAJ3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,kBAAkB,CAAC;oBAC7B,OAAO,EAAE,CAAC,kBAAkB;AAC7B,iBAAA;;;ACND;;AAEG;;;;"}
+{"version":3,"file":"ng-nest-ui-examples.mjs","sources":["../../../../lib/ng-nest/ui/examples/examples.property.ts","../../../../lib/ng-nest/ui/examples/examples.component.ts","../../../../lib/ng-nest/ui/examples/examples.component.html","../../../../lib/ng-nest/ui/examples/examples.module.ts","../../../../lib/ng-nest/ui/examples/ng-nest-ui-examples.ts"],"sourcesContent":["/**\r\n * Examples\r\n * @selector x-examples\r\n * @decorator component\r\n */\r\nexport const XExamplesPrefix = 'x-examples';\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding } from '@angular/core';\r\nimport { XExamplesPrefix } from './examples.property';\r\n\r\n@Component({\r\n  selector: `${XExamplesPrefix}`,\r\n  templateUrl: './examples.component.html',\r\n  styleUrls: ['./style/index.scss'],\r\n  encapsulation: ViewEncapsulation.None,\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XExamplesComponent {\r\n  @HostBinding('class') className = XExamplesPrefix;\r\n}\r\n","<ng-content></ng-content>\r\n","import { NgModule } from '@angular/core';\r\nimport { XExamplesComponent } from './examples.component';\r\n\r\n@NgModule({\r\n  exports: [XExamplesComponent],\r\n  imports: [XExamplesComponent]\r\n})\r\nexport class XExamplesModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAAA;;;;AAIG;AACI,MAAM,eAAe,GAAG;;MCKlB,kBAAkB,CAAA;AAP/B,IAAA,WAAA,GAAA;QAQwB,IAAA,CAAA,SAAS,GAAG,eAAe;AAClD,IAAA;iIAFY,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,2HCV/B,+BACA,EAAA,MAAA,EAAA,CAAA,mhFAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FDSa,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAP9B,SAAS;+BACE,CAAA,EAAG,eAAe,EAAE,EAAA,aAAA,EAGf,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+BAAA,EAAA,MAAA,EAAA,CAAA,mhFAAA,CAAA,EAAA;8BAGzB,SAAS,EAAA,CAAA;sBAA9B,WAAW;uBAAC,OAAO;;;MEJT,eAAe,CAAA;iIAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;kIAAf,eAAe,EAAA,OAAA,EAAA,CAFhB,kBAAkB,CAAA,EAAA,OAAA,EAAA,CADlB,kBAAkB,CAAA,EAAA,CAAA,CAAA;kIAGjB,eAAe,EAAA,CAAA,CAAA;;2FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAJ3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,kBAAkB,CAAC;oBAC7B,OAAO,EAAE,CAAC,kBAAkB;AAC7B,iBAAA;;;ACND;;AAEG;;;;"}

package/fesm2022/ng-nest-ui-list.mjs

@@ -78,6 +78,11 @@ class XListProperty extends XFormControlFunction(X_LIST_CONFIG_NAME) {
          * @en_US Node style
          */
         this.nodeStyle = input(...(ngDevMode ? [undefined, { debugName: "nodeStyle" }] : []));
+        /**
+         * @zh_CN 分组模板
+         * @en_US Group template
+         */
+        this.groupTpl = input(...(ngDevMode ? [undefined, { debugName: "groupTpl" }] : []));
         /**
          * @zh_CN 列表头部
          * @en_US List header
@@ -192,7 +197,7 @@ class XListProperty extends XFormControlFunction(X_LIST_CONFIG_NAME) {
         this.size = input(this.config?.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XListProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XListProperty, isStandalone: true, selector: "x-list-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, drag: { classPropertyName: "drag", publicName: "drag", isSignal: true, isRequired: false, transformFunction: null }, objectArray: { classPropertyName: "objectArray", publicName: "objectArray", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, nodeStyle: { classPropertyName: "nodeStyle", publicName: "nodeStyle", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, scrollElement: { classPropertyName: "scrollElement", publicName: "scrollElement", isSignal: true, isRequired: false, transformFunction: null }, loadMore: { classPropertyName: "loadMore", publicName: "loadMore", isSignal: true, isRequired: false, transformFunction: null }, loadMoreText: { classPropertyName: "loadMoreText", publicName: "loadMoreText", isSignal: true, isRequired: false, transformFunction: null }, loadingMoreText: { classPropertyName: "loadingMoreText", publicName: "loadingMoreText", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, heightAdaption: { classPropertyName: "heightAdaption", publicName: "heightAdaption", isSignal: true, isRequired: false, transformFunction: null }, minBufferPx: { classPropertyName: "minBufferPx", publicName: "minBufferPx", isSignal: true, isRequired: false, transformFunction: null }, maxBufferPx: { classPropertyName: "maxBufferPx", publicName: "maxBufferPx", isSignal: true, isRequired: false, transformFunction: null }, keywordText: { classPropertyName: "keywordText", publicName: "keywordText", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null }, inPortal: { classPropertyName: "inPortal", publicName: "inPortal", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectAll: "onSelectAll", nodeMouseenter: "nodeMouseenter", nodeMouseleave: "nodeMouseleave", nodeClick: "nodeClick", dropListDropped: "dropListDropped", keyManagerTabOut: "keyManagerTabOut", keyManagerChange: "keyManagerChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XListProperty, isStandalone: true, selector: "x-list-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, drag: { classPropertyName: "drag", publicName: "drag", isSignal: true, isRequired: false, transformFunction: null }, objectArray: { classPropertyName: "objectArray", publicName: "objectArray", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, nodeStyle: { classPropertyName: "nodeStyle", publicName: "nodeStyle", isSignal: true, isRequired: false, transformFunction: null }, groupTpl: { classPropertyName: "groupTpl", publicName: "groupTpl", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, scrollElement: { classPropertyName: "scrollElement", publicName: "scrollElement", isSignal: true, isRequired: false, transformFunction: null }, loadMore: { classPropertyName: "loadMore", publicName: "loadMore", isSignal: true, isRequired: false, transformFunction: null }, loadMoreText: { classPropertyName: "loadMoreText", publicName: "loadMoreText", isSignal: true, isRequired: false, transformFunction: null }, loadingMoreText: { classPropertyName: "loadingMoreText", publicName: "loadingMoreText", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, heightAdaption: { classPropertyName: "heightAdaption", publicName: "heightAdaption", isSignal: true, isRequired: false, transformFunction: null }, minBufferPx: { classPropertyName: "minBufferPx", publicName: "minBufferPx", isSignal: true, isRequired: false, transformFunction: null }, maxBufferPx: { classPropertyName: "maxBufferPx", publicName: "maxBufferPx", isSignal: true, isRequired: false, transformFunction: null }, keywordText: { classPropertyName: "keywordText", publicName: "keywordText", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null }, inPortal: { classPropertyName: "inPortal", publicName: "inPortal", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectAll: "onSelectAll", nodeMouseenter: "nodeMouseenter", nodeMouseleave: "nodeMouseleave", nodeClick: "nodeClick", dropListDropped: "dropListDropped", keyManagerTabOut: "keyManagerTabOut", keyManagerChange: "keyManagerChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XListProperty, decorators: [{
             type: Component,
@@ -229,6 +234,11 @@ class XListOptionProperty {
          * @en_US Node style
          */
         this.nodeStyle = input(...(ngDevMode ? [undefined, { debugName: "nodeStyle" }] : []));
+        /**
+         * @zh_CN 分组模板
+         * @en_US Group template
+         */
+        this.groupTpl = input(...(ngDevMode ? [undefined, { debugName: "groupTpl" }] : []));
         /**
          * @zh_CN 选中
          * @en_US selected
@@ -296,7 +306,7 @@ class XListOptionProperty {
         this.caseSensitive = input(true, ...(ngDevMode ? [{ debugName: "caseSensitive", transform: XToBoolean }] : [{ transform: XToBoolean }]));
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XListOptionProperty, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XListOptionProperty, isStandalone: true, selector: "x-list-option-property", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, nodeStyle: { classPropertyName: "nodeStyle", publicName: "nodeStyle", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, groupable: { classPropertyName: "groupable", publicName: "groupable", isSignal: true, isRequired: false, transformFunction: null }, forbidden: { classPropertyName: "forbidden", publicName: "forbidden", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, openPortal: { classPropertyName: "openPortal", publicName: "openPortal", isSignal: true, isRequired: false, transformFunction: null }, optionClass: { classPropertyName: "optionClass", publicName: "optionClass", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, divided: { classPropertyName: "divided", publicName: "divided", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, keywordText: { classPropertyName: "keywordText", publicName: "keywordText", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XListOptionProperty, isStandalone: true, selector: "x-list-option-property", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, nodeStyle: { classPropertyName: "nodeStyle", publicName: "nodeStyle", isSignal: true, isRequired: false, transformFunction: null }, groupTpl: { classPropertyName: "groupTpl", publicName: "groupTpl", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, groupable: { classPropertyName: "groupable", publicName: "groupable", isSignal: true, isRequired: false, transformFunction: null }, forbidden: { classPropertyName: "forbidden", publicName: "forbidden", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, openPortal: { classPropertyName: "openPortal", publicName: "openPortal", isSignal: true, isRequired: false, transformFunction: null }, optionClass: { classPropertyName: "optionClass", publicName: "optionClass", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, divided: { classPropertyName: "divided", publicName: "divided", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, keywordText: { classPropertyName: "keywordText", publicName: "keywordText", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XListOptionProperty, decorators: [{
             type: Component,
@@ -308,9 +318,7 @@ class XListOptionComponent extends XListOptionProperty {
         super();
         this.role = 'option';
         this.elementRef = inject(ElementRef);
-        this.classMap = computed(() => ({
-            [`${XListOptionPrefix}-${this.size()}`]: this.size() ? true : false
-        }), ...(ngDevMode ? [{ debugName: "classMap" }] : []));
+        this.classMap = computed(() => ({}), ...(ngDevMode ? [{ debugName: "classMap" }] : []));
         this.disabled = false;
         this.nodeStyleComputed = computed(() => {
             return {
@@ -330,11 +338,11 @@ class XListOptionComponent extends XListOptionProperty {
         return this.label();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XListOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XListOptionComponent, isStandalone: true, selector: "x-list-option", host: { properties: { "attr.role": "this.role" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"x-list-option\"\r\n  [ngClass]=\"classMap()\"\r\n  [style]=\"nodeStyleComputed()\"\r\n  [class.x-selected]=\"selected()\"\r\n  [class.x-disabled]=\"forbidden()\"\r\n  [class.x-open-portal]=\"openPortal()\"\r\n  [class.x-active]=\"active()\"\r\n  [class.x-list-group]=\"groupable()\"\r\n  [class.x-list-icon]=\"icon()\"\r\n  [class.x-list-divided]=\"divided()\"\r\n>\r\n  <div class=\"x-list-option-content\">\r\n    @if (nodeTpl()) {\r\n      <ng-template *ngTemplateOutlet=\"nodeTpl()!; context: { $node: node() }\"></ng-template>\r\n    } @else {\r\n      @if (icon()) {\r\n        <x-icon class=\"x-list-option-icon\" [type]=\"icon()\"></x-icon>\r\n      }\r\n      <span x-keyword [text]=\"keywordText()\" [caseSensitive]=\"caseSensitive()\" [attr.title]=\"label()\">{{\r\n        label()\r\n      }}</span>\r\n    }\r\n  </div>\r\n  @if (leaf()) {\r\n    <x-icon class=\"x-list-leaf\" type=\"fto-chevron-right\"></x-icon>\r\n  }\r\n  @if (checked() && !leaf() && selected()) {\r\n    <x-icon class=\"x-list-checked\" type=\"fto-check\"></x-icon>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-list-option{display:block}.x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;cursor:pointer;transition:border-color var(--x-animation-duration-base),background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-option-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;display:inline-block}.x-list-option-icon{margin-right:.25rem}.x-list-option:not(:first-child){margin-top:var(--x-border-width)}.x-list-option:hover:not(.x-disabled,.x-list-group),.x-list-option.x-active:not(.x-disabled,.x-list-group){background-color:var(--x-background-a200)}.x-list-option.x-list-group{cursor:default;color:var(--x-text-400)}.x-list-option.x-list-group:hover{background-color:transparent}.x-list-option.x-list-divided{position:relative;margin-top:.8125rem}.x-list-option.x-list-divided:before{content:\" \";position:absolute;top:0;left:0;width:100%;margin-top:-.5rem;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-list-option.x-selected:not(.x-disabled){background-color:var(--x-primary-900);color:var(--x-primary)}.x-list-option.x-selected:not(.x-disabled)>x-icon{color:var(--x-primary)}.x-list-option.x-disabled{color:var(--x-text-500);cursor:not-allowed}.x-list-option.x-disabled:hover{background-color:inherit}.x-list-option.x-disabled>span x-icon{color:var(--x-text-500)}.x-list-option-big{padding:0 var(--x-padding-big);height:var(--x-height-big);line-height:var(--x-height-big)}.x-list-option-big.x-list-group{padding:0 calc(var(--x-padding-big) * .3)}.x-list-option-large{padding:0 var(--x-padding-large);height:var(--x-height-large);line-height:var(--x-height-large)}.x-list-option-large.x-list-group{padding:0 calc(var(--x-padding-large) * .3)}.x-list-option-medium{padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-list-option-medium.x-list-group{padding:0 calc(var(--x-padding-medium) * .3)}.x-list-option-small{padding:0 var(--x-padding-small);height:var(--x-height-small);line-height:var(--x-height-small)}.x-list-option-small.x-list-group{padding:0 calc(var(--x-padding-small) * .3)}.x-list-option-mini{padding:0 var(--x-padding-mini);height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-list-option-mini.x-list-group{padding:0 calc(var(--x-padding-mini) * .3)}body>x-list-option{display:block}body>x-list-option.cdk-drag-preview .x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.9}body>x-list-option.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XKeywordDirective, selector: "[x-keyword]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XListOptionComponent, isStandalone: true, selector: "x-list-option", host: { properties: { "attr.role": "this.role" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"x-list-option\"\r\n  [ngClass]=\"classMap()\"\r\n  [style]=\"nodeStyleComputed()\"\r\n  [class.x-selected]=\"selected()\"\r\n  [class.x-disabled]=\"forbidden()\"\r\n  [class.x-open-portal]=\"openPortal()\"\r\n  [class.x-active]=\"active()\"\r\n  [class.x-group]=\"groupable()\"\r\n  [class.x-list-icon]=\"icon()\"\r\n  [class.x-list-divided]=\"divided()\"\r\n>\r\n  <div class=\"x-list-option-content\">\r\n    @if (groupable() && groupTpl()) {\r\n      <ng-template *ngTemplateOutlet=\"groupTpl()!; context: { $group: label() }\"></ng-template>\r\n    } @else {\r\n      @if (nodeTpl()) {\r\n        <ng-template *ngTemplateOutlet=\"nodeTpl()!; context: { $node: node() }\"></ng-template>\r\n      } @else {\r\n        @if (icon()) {\r\n          <x-icon class=\"x-list-option-icon\" [type]=\"icon()\"></x-icon>\r\n        }\r\n        <span x-keyword [text]=\"keywordText()\" [caseSensitive]=\"caseSensitive()\" [attr.title]=\"label()\">{{\r\n          label()\r\n        }}</span>\r\n      }\r\n    }\r\n  </div>\r\n  @if (leaf()) {\r\n    <x-icon class=\"x-list-leaf\" type=\"fto-chevron-right\"></x-icon>\r\n  }\r\n  @if (checked() && !leaf() && selected()) {\r\n    <x-icon class=\"x-list-checked\" type=\"fto-check\"></x-icon>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-list-option{display:block}.x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;cursor:pointer;transition:border-color var(--x-animation-duration-base),background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-option-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;display:inline-block}.x-list-option-icon{margin-right:.25rem}.x-list-option:not(:first-child){margin-top:var(--x-border-width)}.x-list-option:hover:not(.x-disabled,.x-group),.x-list-option.x-active:not(.x-disabled,.x-group){background-color:var(--x-background-a200)}.x-list-option.x-group{cursor:default;color:var(--x-text-400)}.x-list-option.x-group:hover{background-color:transparent}.x-list-option.x-list-divided{position:relative;margin-top:.8125rem}.x-list-option.x-list-divided:before{content:\" \";position:absolute;top:0;left:0;width:100%;margin-top:-.5rem;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-list-option.x-selected:not(.x-disabled){background-color:var(--x-primary-900);color:var(--x-primary)}.x-list-option.x-selected:not(.x-disabled)>x-icon{color:var(--x-primary)}.x-list-option.x-disabled{color:var(--x-text-500);cursor:not-allowed}.x-list-option.x-disabled:hover{background-color:inherit}.x-list-option.x-disabled>span x-icon{color:var(--x-text-500)}body>x-list-option{display:block}body>x-list-option.cdk-drag-preview .x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.9}body>x-list-option.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XKeywordDirective, selector: "[x-keyword]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XListOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XListOptionPrefix}`, imports: [NgClass, NgTemplateOutlet, XIconComponent, XKeywordDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"x-list-option\"\r\n  [ngClass]=\"classMap()\"\r\n  [style]=\"nodeStyleComputed()\"\r\n  [class.x-selected]=\"selected()\"\r\n  [class.x-disabled]=\"forbidden()\"\r\n  [class.x-open-portal]=\"openPortal()\"\r\n  [class.x-active]=\"active()\"\r\n  [class.x-list-group]=\"groupable()\"\r\n  [class.x-list-icon]=\"icon()\"\r\n  [class.x-list-divided]=\"divided()\"\r\n>\r\n  <div class=\"x-list-option-content\">\r\n    @if (nodeTpl()) {\r\n      <ng-template *ngTemplateOutlet=\"nodeTpl()!; context: { $node: node() }\"></ng-template>\r\n    } @else {\r\n      @if (icon()) {\r\n        <x-icon class=\"x-list-option-icon\" [type]=\"icon()\"></x-icon>\r\n      }\r\n      <span x-keyword [text]=\"keywordText()\" [caseSensitive]=\"caseSensitive()\" [attr.title]=\"label()\">{{\r\n        label()\r\n      }}</span>\r\n    }\r\n  </div>\r\n  @if (leaf()) {\r\n    <x-icon class=\"x-list-leaf\" type=\"fto-chevron-right\"></x-icon>\r\n  }\r\n  @if (checked() && !leaf() && selected()) {\r\n    <x-icon class=\"x-list-checked\" type=\"fto-check\"></x-icon>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-list-option{display:block}.x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;cursor:pointer;transition:border-color var(--x-animation-duration-base),background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-option-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;display:inline-block}.x-list-option-icon{margin-right:.25rem}.x-list-option:not(:first-child){margin-top:var(--x-border-width)}.x-list-option:hover:not(.x-disabled,.x-list-group),.x-list-option.x-active:not(.x-disabled,.x-list-group){background-color:var(--x-background-a200)}.x-list-option.x-list-group{cursor:default;color:var(--x-text-400)}.x-list-option.x-list-group:hover{background-color:transparent}.x-list-option.x-list-divided{position:relative;margin-top:.8125rem}.x-list-option.x-list-divided:before{content:\" \";position:absolute;top:0;left:0;width:100%;margin-top:-.5rem;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-list-option.x-selected:not(.x-disabled){background-color:var(--x-primary-900);color:var(--x-primary)}.x-list-option.x-selected:not(.x-disabled)>x-icon{color:var(--x-primary)}.x-list-option.x-disabled{color:var(--x-text-500);cursor:not-allowed}.x-list-option.x-disabled:hover{background-color:inherit}.x-list-option.x-disabled>span x-icon{color:var(--x-text-500)}.x-list-option-big{padding:0 var(--x-padding-big);height:var(--x-height-big);line-height:var(--x-height-big)}.x-list-option-big.x-list-group{padding:0 calc(var(--x-padding-big) * .3)}.x-list-option-large{padding:0 var(--x-padding-large);height:var(--x-height-large);line-height:var(--x-height-large)}.x-list-option-large.x-list-group{padding:0 calc(var(--x-padding-large) * .3)}.x-list-option-medium{padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-list-option-medium.x-list-group{padding:0 calc(var(--x-padding-medium) * .3)}.x-list-option-small{padding:0 var(--x-padding-small);height:var(--x-height-small);line-height:var(--x-height-small)}.x-list-option-small.x-list-group{padding:0 calc(var(--x-padding-small) * .3)}.x-list-option-mini{padding:0 var(--x-padding-mini);height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-list-option-mini.x-list-group{padding:0 calc(var(--x-padding-mini) * .3)}body>x-list-option{display:block}body>x-list-option.cdk-drag-preview .x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.9}body>x-list-option.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: `${XListOptionPrefix}`, imports: [NgClass, NgTemplateOutlet, XIconComponent, XKeywordDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"x-list-option\"\r\n  [ngClass]=\"classMap()\"\r\n  [style]=\"nodeStyleComputed()\"\r\n  [class.x-selected]=\"selected()\"\r\n  [class.x-disabled]=\"forbidden()\"\r\n  [class.x-open-portal]=\"openPortal()\"\r\n  [class.x-active]=\"active()\"\r\n  [class.x-group]=\"groupable()\"\r\n  [class.x-list-icon]=\"icon()\"\r\n  [class.x-list-divided]=\"divided()\"\r\n>\r\n  <div class=\"x-list-option-content\">\r\n    @if (groupable() && groupTpl()) {\r\n      <ng-template *ngTemplateOutlet=\"groupTpl()!; context: { $group: label() }\"></ng-template>\r\n    } @else {\r\n      @if (nodeTpl()) {\r\n        <ng-template *ngTemplateOutlet=\"nodeTpl()!; context: { $node: node() }\"></ng-template>\r\n      } @else {\r\n        @if (icon()) {\r\n          <x-icon class=\"x-list-option-icon\" [type]=\"icon()\"></x-icon>\r\n        }\r\n        <span x-keyword [text]=\"keywordText()\" [caseSensitive]=\"caseSensitive()\" [attr.title]=\"label()\">{{\r\n          label()\r\n        }}</span>\r\n      }\r\n    }\r\n  </div>\r\n  @if (leaf()) {\r\n    <x-icon class=\"x-list-leaf\" type=\"fto-chevron-right\"></x-icon>\r\n  }\r\n  @if (checked() && !leaf() && selected()) {\r\n    <x-icon class=\"x-list-checked\" type=\"fto-check\"></x-icon>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-list-option{display:block}.x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;cursor:pointer;transition:border-color var(--x-animation-duration-base),background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-option-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;display:inline-block}.x-list-option-icon{margin-right:.25rem}.x-list-option:not(:first-child){margin-top:var(--x-border-width)}.x-list-option:hover:not(.x-disabled,.x-group),.x-list-option.x-active:not(.x-disabled,.x-group){background-color:var(--x-background-a200)}.x-list-option.x-group{cursor:default;color:var(--x-text-400)}.x-list-option.x-group:hover{background-color:transparent}.x-list-option.x-list-divided{position:relative;margin-top:.8125rem}.x-list-option.x-list-divided:before{content:\" \";position:absolute;top:0;left:0;width:100%;margin-top:-.5rem;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-list-option.x-selected:not(.x-disabled){background-color:var(--x-primary-900);color:var(--x-primary)}.x-list-option.x-selected:not(.x-disabled)>x-icon{color:var(--x-primary)}.x-list-option.x-disabled{color:var(--x-text-500);cursor:not-allowed}.x-list-option.x-disabled:hover{background-color:inherit}.x-list-option.x-disabled>span x-icon{color:var(--x-text-500)}body>x-list-option{display:block}body>x-list-option.cdk-drag-preview .x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.9}body>x-list-option.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { role: [{
                 type: HostBinding,
                 args: ['attr.role']
@@ -421,11 +429,13 @@ class XListComponent extends XListProperty {
         this.iconSpin = signal(false, ...(ngDevMode ? [{ debugName: "iconSpin" }] : []));
         this.scrollHeightSignal = signal(0, ...(ngDevMode ? [{ debugName: "scrollHeightSignal" }] : []));
         this.classMap = computed(() => ({
-            [`${XListPrefix}-${this.size()}`]: this.size() ? true : false
+            [`${XListPrefix}-${this.size()}`]: this.size() ? true : false,
+            [`${XListPrefix}-group`]: this.groupable() ? true : false
         }), ...(ngDevMode ? [{ debugName: "classMap" }] : []));
         this.sizeChange = null;
         this.role = 'listbox';
         this.tabindex = -1;
+        this.groupable = computed(() => this.nodes().some((x) => !!x.group), ...(ngDevMode ? [{ debugName: "groupable" }] : []));
         this.itemSizeMap = {
             mini: 22,
             small: 24,
@@ -754,7 +764,7 @@ class XListComponent extends XListProperty {
             this.nodes()[num].active = false;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XListComponent, isStandalone: true, selector: "x-list", host: { listeners: { "keydown": "keydown($event)" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabindex" } }, providers: [XValueAccessor(XListComponent), { provide: X_LIST_DROP_GROUP, useValue: undefined }], viewQueries: [{ propertyName: "headerRef", first: true, predicate: ["headerRef"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footerRef"], descendants: true, isSignal: true }, { propertyName: "selectAllRef", first: true, predicate: ["selectAllRef"], descendants: true, isSignal: true }, { propertyName: "loadMoreRef", first: true, predicate: ["loadMoreRef"], descendants: true, isSignal: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true, isSignal: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, isSignal: true }, { propertyName: "options", predicate: XListOptionComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"x-list\" [class.x-list-portal]=\"inPortal()\" [ngClass]=\"classMap()\">\r\n  @if (header()) {\r\n    <div #headerRef class=\"x-list-header\" *xOutlet=\"header()\">{{ header() }}</div>\r\n  }\r\n  @if (selectAll() && multiple() === 0) {\r\n    <div #selectAllRef class=\"x-list-select-all\">\r\n      <x-list-option\r\n        [size]=\"size()\"\r\n        [label]=\"getSelectAllText()\"\r\n        [nodeStyle]=\"nodeStyle()\"\r\n        [checked]=\"true\"\r\n        [selected]=\"isSelectAll()\"\r\n        (click)=\"onSelectAllNodes()\"\r\n      ></x-list-option>\r\n    </div>\r\n  }\r\n  @if (virtualScroll()) {\r\n    <cdk-virtual-scroll-viewport\r\n      #virtualBody\r\n      [itemSize]=\"itemSize()\"\r\n      [minBufferPx]=\"minBufferPxSignal()\"\r\n      [maxBufferPx]=\"maxBufferPxSignal()\"\r\n      class=\"x-list-content\"\r\n      [style.height.px]=\"getVirtualScrollHeight()\"\r\n      [hidden]=\"isEmpty()\"\r\n    >\r\n      <x-list-option\r\n        *cdkVirtualFor=\"let node of nodes(); trackBy: trackByNode\"\r\n        [node]=\"node\"\r\n        [checked]=\"checked()\"\r\n        [nodeTpl]=\"nodeTpl()\"\r\n        [nodeStyle]=\"nodeStyle()\"\r\n        [selected]=\"node.selected!\"\r\n        [groupable]=\"node.groupable!\"\r\n        [forbidden]=\"node.disabled!\"\r\n        [active]=\"node.active!\"\r\n        (activeChange)=\"node.active = $event\"\r\n        [openPortal]=\"node.openPortal!\"\r\n        [icon]=\"node.icon\"\r\n        [label]=\"node.label\"\r\n        [leaf]=\"node.leaf!\"\r\n        [divided]=\"node.divided!\"\r\n        [size]=\"size()\"\r\n        [keywordText]=\"keywordText()\"\r\n        [caseSensitive]=\"caseSensitive()\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n        (mouseenter)=\"onMouseenter($event, node)\"\r\n        (mouseleave)=\"onMouseleave($event, node)\"\r\n      ></x-list-option>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"listTpl; context: { $list: nodes() }\"></ng-container>\r\n  }\r\n\r\n  @if (loadMore() && !isEmpty()) {\r\n    <div #loadMoreRef class=\"x-list-load-more\">\r\n      <x-list-option\r\n        [size]=\"size()\"\r\n        [nodeTpl]=\"loadMoreTpl\"\r\n        [nodeStyle]=\"nodeStyle()\"\r\n        (click)=\"onLoadMore()\"\r\n      ></x-list-option>\r\n    </div>\r\n    <ng-template #loadMoreTpl>\r\n      @if (icon() && iconSpin()) {\r\n        <x-icon [type]=\"icon()\" [spin]=\"iconSpin()\"></x-icon>\r\n      }\r\n      {{ icon() && iconSpin() ? getLoadingMoreText() : getLoadMoreText() }}</ng-template\r\n    >\r\n  }\r\n  @if (isEmpty()) {\r\n    <x-empty></x-empty>\r\n  }\r\n  @if (footer()) {\r\n    <div #footerRef class=\"x-list-footer\" *xOutlet=\"footer()\">{{ footer() }}</div>\r\n  }\r\n</div>\r\n\r\n<ng-template #listTpl let-list=\"$list\">\r\n  <div\r\n    class=\"x-list-content\"\r\n    cdkDropList\r\n    (cdkDropListDropped)=\"dropCdk($event)\"\r\n    [cdkDropListDisabled]=\"!drag()\"\r\n    [hidden]=\"isEmpty()\"\r\n    [cdkDropListData]=\"list\"\r\n    [cdkDropListEnterPredicate]=\"predicate\"\r\n  >\r\n    @for (node of list; track node.id) {\r\n      <x-list-option\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"node.disabled || node.groupable\"\r\n        [node]=\"node\"\r\n        [checked]=\"checked()\"\r\n        [nodeTpl]=\"nodeTpl()\"\r\n        [nodeStyle]=\"nodeStyle()\"\r\n        [selected]=\"node.selected!\"\r\n        [groupable]=\"node.groupable!\"\r\n        [forbidden]=\"node.disabled!\"\r\n        [active]=\"node.active!\"\r\n        (activeChange)=\"node.active = $event\"\r\n        [openPortal]=\"node.openPortal!\"\r\n        [icon]=\"node.icon\"\r\n        [label]=\"node.label\"\r\n        [leaf]=\"node.leaf!\"\r\n        [divided]=\"node.divided!\"\r\n        [size]=\"size()\"\r\n        [keywordText]=\"keywordText()\"\r\n        [caseSensitive]=\"caseSensitive()\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n        (mouseenter)=\"onMouseenter($event, node)\"\r\n        (mouseleave)=\"onMouseleave($event, node)\"\r\n      ></x-list-option>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-list{width:100%}x-list:focus{outline:none}.x-list{margin:0;padding:0}.x-list{width:100%}.x-list:focus{outline:none}.x-list-select-all{cursor:pointer;font-weight:700}.x-list-load-more{cursor:pointer}.x-list-content.cdk-drop-list-dragging x-list-option.cdk-drag-placeholder .x-list-option{border-color:var(--x-primary);color:var(--x-primary);background-color:var(--x-background);opacity:.8}.x-list-content.cdk-drop-list-dragging x-list-option:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}.x-list-header,.x-list-footer{font-weight:700}.x-list-portal{padding:.125rem .25rem}.x-list-portal x-list-option .x-list-option{padding:0 calc(var(--x-padding-medium) - .5rem);margin:.125rem 0;border-radius:var(--x-border-small-radius);transition:background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-portal x-list-option .x-list-option.x-list-divided{margin-top:.8125rem}.x-list-portal x-list-option .x-list-option.x-list-group{padding:0}.x-list-leaf,.x-list-checked{right:0;margin-left:.4rem;color:var(--x-text-400)}.x-list-icon>span x-icon{color:var(--x-text-300);margin-right:.25rem}.x-list>x-empty{margin:1rem;display:block}.x-list-big .x-list-header,.x-list-big .x-list-footer{padding:0 var(--x-padding-big);height:var(--x-height-big);line-height:var(--x-height-big)}.x-list-large .x-list-header,.x-list-large .x-list-footer{padding:0 var(--x-padding-large);height:var(--x-height-large);line-height:var(--x-height-large)}.x-list-medium .x-list-header,.x-list-medium .x-list-footer{padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-list-small .x-list-header,.x-list-small .x-list-footer{padding:0 var(--x-padding-small);height:var(--x-height-small);line-height:var(--x-height-small)}.x-list-mini .x-list-header,.x-list-mini .x-list-footer{padding:0 var(--x-padding-mini);height:var(--x-height-mini);line-height:var(--x-height-mini)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XEmptyComponent, selector: "x-empty" }, { kind: "component", type: XListOptionComponent, selector: "x-list-option" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XListComponent, isStandalone: true, selector: "x-list", host: { listeners: { "keydown": "keydown($event)" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabindex" } }, providers: [XValueAccessor(XListComponent), { provide: X_LIST_DROP_GROUP, useValue: undefined }], viewQueries: [{ propertyName: "headerRef", first: true, predicate: ["headerRef"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footerRef"], descendants: true, isSignal: true }, { propertyName: "selectAllRef", first: true, predicate: ["selectAllRef"], descendants: true, isSignal: true }, { propertyName: "loadMoreRef", first: true, predicate: ["loadMoreRef"], descendants: true, isSignal: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true, isSignal: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, isSignal: true }, { propertyName: "options", predicate: XListOptionComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"x-list\" [class.x-list-portal]=\"inPortal()\" [ngClass]=\"classMap()\">\r\n  @if (header()) {\r\n    <div #headerRef class=\"x-list-header\" *xOutlet=\"header()\">{{ header() }}</div>\r\n  }\r\n  @if (selectAll() && multiple() === 0) {\r\n    <div #selectAllRef class=\"x-list-select-all\">\r\n      <x-list-option\r\n        [size]=\"size()\"\r\n        [label]=\"getSelectAllText()\"\r\n        [nodeStyle]=\"nodeStyle()\"\r\n        [checked]=\"true\"\r\n        [selected]=\"isSelectAll()\"\r\n        (click)=\"onSelectAllNodes()\"\r\n      ></x-list-option>\r\n    </div>\r\n  }\r\n  @if (virtualScroll()) {\r\n    <cdk-virtual-scroll-viewport\r\n      #virtualBody\r\n      [itemSize]=\"itemSize()\"\r\n      [minBufferPx]=\"minBufferPxSignal()\"\r\n      [maxBufferPx]=\"maxBufferPxSignal()\"\r\n      class=\"x-list-content\"\r\n      [style.height.px]=\"getVirtualScrollHeight()\"\r\n      [hidden]=\"isEmpty()\"\r\n    >\r\n      <x-list-option\r\n        *cdkVirtualFor=\"let node of nodes(); trackBy: trackByNode\"\r\n        [node]=\"node\"\r\n        [checked]=\"checked()\"\r\n        [nodeTpl]=\"nodeTpl()\"\r\n        [nodeStyle]=\"nodeStyle()\"\r\n        [groupTpl]=\"groupTpl()\"\r\n        [selected]=\"node.selected!\"\r\n        [groupable]=\"node.groupable!\"\r\n        [forbidden]=\"node.disabled!\"\r\n        [active]=\"node.active!\"\r\n        (activeChange)=\"node.active = $event\"\r\n        [openPortal]=\"node.openPortal!\"\r\n        [icon]=\"node.icon\"\r\n        [label]=\"node.label\"\r\n        [leaf]=\"node.leaf!\"\r\n        [divided]=\"node.divided!\"\r\n        [size]=\"size()\"\r\n        [keywordText]=\"keywordText()\"\r\n        [caseSensitive]=\"caseSensitive()\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n        (mouseenter)=\"onMouseenter($event, node)\"\r\n        (mouseleave)=\"onMouseleave($event, node)\"\r\n      ></x-list-option>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"listTpl; context: { $list: nodes() }\"></ng-container>\r\n  }\r\n\r\n  @if (loadMore() && !isEmpty()) {\r\n    <div #loadMoreRef class=\"x-list-load-more\">\r\n      <x-list-option\r\n        [size]=\"size()\"\r\n        [nodeTpl]=\"loadMoreTpl\"\r\n        [nodeStyle]=\"nodeStyle()\"\r\n        (click)=\"onLoadMore()\"\r\n      ></x-list-option>\r\n    </div>\r\n    <ng-template #loadMoreTpl>\r\n      @if (icon() && iconSpin()) {\r\n        <x-icon [type]=\"icon()\" [spin]=\"iconSpin()\"></x-icon>\r\n      }\r\n      {{ icon() && iconSpin() ? getLoadingMoreText() : getLoadMoreText() }}</ng-template\r\n    >\r\n  }\r\n  @if (isEmpty()) {\r\n    <x-empty></x-empty>\r\n  }\r\n  @if (footer()) {\r\n    <div #footerRef class=\"x-list-footer\" *xOutlet=\"footer()\">{{ footer() }}</div>\r\n  }\r\n</div>\r\n\r\n<ng-template #listTpl let-list=\"$list\">\r\n  <div\r\n    class=\"x-list-content\"\r\n    cdkDropList\r\n    (cdkDropListDropped)=\"dropCdk($event)\"\r\n    [cdkDropListDisabled]=\"!drag()\"\r\n    [hidden]=\"isEmpty()\"\r\n    [cdkDropListData]=\"list\"\r\n    [cdkDropListEnterPredicate]=\"predicate\"\r\n  >\r\n    @for (node of list; track node.id) {\r\n      <x-list-option\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"node.disabled || node.groupable\"\r\n        [node]=\"node\"\r\n        [checked]=\"checked()\"\r\n        [nodeTpl]=\"nodeTpl()\"\r\n        [groupTpl]=\"groupTpl()\"\r\n        [nodeStyle]=\"nodeStyle()\"\r\n        [selected]=\"node.selected!\"\r\n        [groupable]=\"node.groupable!\"\r\n        [forbidden]=\"node.disabled!\"\r\n        [active]=\"node.active!\"\r\n        (activeChange)=\"node.active = $event\"\r\n        [openPortal]=\"node.openPortal!\"\r\n        [icon]=\"node.icon\"\r\n        [label]=\"node.label\"\r\n        [leaf]=\"node.leaf!\"\r\n        [divided]=\"node.divided!\"\r\n        [size]=\"size()\"\r\n        [keywordText]=\"keywordText()\"\r\n        [caseSensitive]=\"caseSensitive()\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n        (mouseenter)=\"onMouseenter($event, node)\"\r\n        (mouseleave)=\"onMouseleave($event, node)\"\r\n      ></x-list-option>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-list{width:100%}x-list:focus{outline:none}.x-list{margin:0;padding:0}.x-list{width:100%}.x-list:focus{outline:none}.x-list-select-all{cursor:pointer;font-weight:700}.x-list-load-more{cursor:pointer}.x-list-content.cdk-drop-list-dragging x-list-option.cdk-drag-placeholder .x-list-option{border-color:var(--x-primary);color:var(--x-primary);background-color:var(--x-background);opacity:.8}.x-list-content.cdk-drop-list-dragging x-list-option:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}.x-list-header,.x-list-footer{font-weight:700}.x-list-portal{padding:.125rem .25rem}.x-list-portal x-list-option .x-list-option{padding:0 calc(var(--x-padding-medium) - .5rem);margin:.125rem 0;border-radius:var(--x-border-small-radius);transition:background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-portal x-list-option .x-list-option.x-list-divided{margin-top:.8125rem}.x-list-portal x-list-option .x-list-option.x-list-group{padding:0}.x-list-leaf,.x-list-checked{right:0;margin-left:.4rem;color:var(--x-text-400)}.x-list-icon>span x-icon{color:var(--x-text-300);margin-right:.25rem}.x-list>x-empty{margin:1rem;display:block}.x-list-group.x-list-big .x-list-option:not(.x-group){padding:0 var(--x-padding-big) 0 calc(var(--x-padding-big) * 2.5)}.x-list-group.x-list-large .x-list-option:not(.x-group){padding:0 var(--x-padding-large) 0 calc(var(--x-padding-large) * 2.5)}.x-list-group.x-list-medium .x-list-option:not(.x-group){padding:0 var(--x-padding-medium) 0 calc(var(--x-padding-medium) * 2.5)}.x-list-group.x-list-small .x-list-option:not(.x-group){padding:0 var(--x-padding-small) 0 calc(var(--x-padding-small) * 2.5)}.x-list-group.x-list-mini .x-list-option:not(.x-group){padding:0 var(--x-padding-mini) 0 calc(var(--x-padding-mini) * 2.5)}.x-list-big .x-list-header,.x-list-big .x-list-footer,.x-list-big .x-list-option{padding:0 var(--x-padding-big);height:var(--x-height-big);line-height:var(--x-height-big)}.x-list-large .x-list-header,.x-list-large .x-list-footer,.x-list-large .x-list-option{padding:0 var(--x-padding-large);height:var(--x-height-large);line-height:var(--x-height-large)}.x-list-medium .x-list-header,.x-list-medium .x-list-footer,.x-list-medium .x-list-option{padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-list-small .x-list-header,.x-list-small .x-list-footer,.x-list-small .x-list-option{padding:0 var(--x-padding-small);height:var(--x-height-small);line-height:var(--x-height-small)}.x-list-mini .x-list-header,.x-list-mini .x-list-footer,.x-list-mini .x-list-option{padding:0 var(--x-padding-mini);height:var(--x-height-mini);line-height:var(--x-height-mini)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XEmptyComponent, selector: "x-empty" }, { kind: "component", type: XListOptionComponent, selector: "x-list-option" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XListComponent, decorators: [{
             type: Component,
@@ -770,7 +780,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         XEmptyComponent,
                         XListOptionComponent,
                         XOutletDirective
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XListComponent), { provide: X_LIST_DROP_GROUP, useValue: undefined }], template: "<div class=\"x-list\" [class.x-list-portal]=\"inPortal()\" [ngClass]=\"classMap()\">\r\n  @if (header()) {\r\n    <div #headerRef class=\"x-list-header\" *xOutlet=\"header()\">{{ header() }}</div>\r\n  }\r\n  @if (selectAll() && multiple() === 0) {\r\n    <div #selectAllRef class=\"x-list-select-all\">\r\n      <x-list-option\r\n        [size]=\"size()\"\r\n        [label]=\"getSelectAllText()\"\r\n        [nodeStyle]=\"nodeStyle()\"\r\n        [checked]=\"true\"\r\n        [selected]=\"isSelectAll()\"\r\n        (click)=\"onSelectAllNodes()\"\r\n      ></x-list-option>\r\n    </div>\r\n  }\r\n  @if (virtualScroll()) {\r\n    <cdk-virtual-scroll-viewport\r\n      #virtualBody\r\n      [itemSize]=\"itemSize()\"\r\n      [minBufferPx]=\"minBufferPxSignal()\"\r\n      [maxBufferPx]=\"maxBufferPxSignal()\"\r\n      class=\"x-list-content\"\r\n      [style.height.px]=\"getVirtualScrollHeight()\"\r\n      [hidden]=\"isEmpty()\"\r\n    >\r\n      <x-list-option\r\n        *cdkVirtualFor=\"let node of nodes(); trackBy: trackByNode\"\r\n        [node]=\"node\"\r\n        [checked]=\"checked()\"\r\n        [nodeTpl]=\"nodeTpl()\"\r\n        [nodeStyle]=\"nodeStyle()\"\r\n        [selected]=\"node.selected!\"\r\n        [groupable]=\"node.groupable!\"\r\n        [forbidden]=\"node.disabled!\"\r\n        [active]=\"node.active!\"\r\n        (activeChange)=\"node.active = $event\"\r\n        [openPortal]=\"node.openPortal!\"\r\n        [icon]=\"node.icon\"\r\n        [label]=\"node.label\"\r\n        [leaf]=\"node.leaf!\"\r\n        [divided]=\"node.divided!\"\r\n        [size]=\"size()\"\r\n        [keywordText]=\"keywordText()\"\r\n        [caseSensitive]=\"caseSensitive()\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n        (mouseenter)=\"onMouseenter($event, node)\"\r\n        (mouseleave)=\"onMouseleave($event, node)\"\r\n      ></x-list-option>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"listTpl; context: { $list: nodes() }\"></ng-container>\r\n  }\r\n\r\n  @if (loadMore() && !isEmpty()) {\r\n    <div #loadMoreRef class=\"x-list-load-more\">\r\n      <x-list-option\r\n        [size]=\"size()\"\r\n        [nodeTpl]=\"loadMoreTpl\"\r\n        [nodeStyle]=\"nodeStyle()\"\r\n        (click)=\"onLoadMore()\"\r\n      ></x-list-option>\r\n    </div>\r\n    <ng-template #loadMoreTpl>\r\n      @if (icon() && iconSpin()) {\r\n        <x-icon [type]=\"icon()\" [spin]=\"iconSpin()\"></x-icon>\r\n      }\r\n      {{ icon() && iconSpin() ? getLoadingMoreText() : getLoadMoreText() }}</ng-template\r\n    >\r\n  }\r\n  @if (isEmpty()) {\r\n    <x-empty></x-empty>\r\n  }\r\n  @if (footer()) {\r\n    <div #footerRef class=\"x-list-footer\" *xOutlet=\"footer()\">{{ footer() }}</div>\r\n  }\r\n</div>\r\n\r\n<ng-template #listTpl let-list=\"$list\">\r\n  <div\r\n    class=\"x-list-content\"\r\n    cdkDropList\r\n    (cdkDropListDropped)=\"dropCdk($event)\"\r\n    [cdkDropListDisabled]=\"!drag()\"\r\n    [hidden]=\"isEmpty()\"\r\n    [cdkDropListData]=\"list\"\r\n    [cdkDropListEnterPredicate]=\"predicate\"\r\n  >\r\n    @for (node of list; track node.id) {\r\n      <x-list-option\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"node.disabled || node.groupable\"\r\n        [node]=\"node\"\r\n        [checked]=\"checked()\"\r\n        [nodeTpl]=\"nodeTpl()\"\r\n        [nodeStyle]=\"nodeStyle()\"\r\n        [selected]=\"node.selected!\"\r\n        [groupable]=\"node.groupable!\"\r\n        [forbidden]=\"node.disabled!\"\r\n        [active]=\"node.active!\"\r\n        (activeChange)=\"node.active = $event\"\r\n        [openPortal]=\"node.openPortal!\"\r\n        [icon]=\"node.icon\"\r\n        [label]=\"node.label\"\r\n        [leaf]=\"node.leaf!\"\r\n        [divided]=\"node.divided!\"\r\n        [size]=\"size()\"\r\n        [keywordText]=\"keywordText()\"\r\n        [caseSensitive]=\"caseSensitive()\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n        (mouseenter)=\"onMouseenter($event, node)\"\r\n        (mouseleave)=\"onMouseleave($event, node)\"\r\n      ></x-list-option>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-list{width:100%}x-list:focus{outline:none}.x-list{margin:0;padding:0}.x-list{width:100%}.x-list:focus{outline:none}.x-list-select-all{cursor:pointer;font-weight:700}.x-list-load-more{cursor:pointer}.x-list-content.cdk-drop-list-dragging x-list-option.cdk-drag-placeholder .x-list-option{border-color:var(--x-primary);color:var(--x-primary);background-color:var(--x-background);opacity:.8}.x-list-content.cdk-drop-list-dragging x-list-option:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}.x-list-header,.x-list-footer{font-weight:700}.x-list-portal{padding:.125rem .25rem}.x-list-portal x-list-option .x-list-option{padding:0 calc(var(--x-padding-medium) - .5rem);margin:.125rem 0;border-radius:var(--x-border-small-radius);transition:background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-portal x-list-option .x-list-option.x-list-divided{margin-top:.8125rem}.x-list-portal x-list-option .x-list-option.x-list-group{padding:0}.x-list-leaf,.x-list-checked{right:0;margin-left:.4rem;color:var(--x-text-400)}.x-list-icon>span x-icon{color:var(--x-text-300);margin-right:.25rem}.x-list>x-empty{margin:1rem;display:block}.x-list-big .x-list-header,.x-list-big .x-list-footer{padding:0 var(--x-padding-big);height:var(--x-height-big);line-height:var(--x-height-big)}.x-list-large .x-list-header,.x-list-large .x-list-footer{padding:0 var(--x-padding-large);height:var(--x-height-large);line-height:var(--x-height-large)}.x-list-medium .x-list-header,.x-list-medium .x-list-footer{padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-list-small .x-list-header,.x-list-small .x-list-footer{padding:0 var(--x-padding-small);height:var(--x-height-small);line-height:var(--x-height-small)}.x-list-mini .x-list-header,.x-list-mini .x-list-footer{padding:0 var(--x-padding-mini);height:var(--x-height-mini);line-height:var(--x-height-mini)}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XListComponent), { provide: X_LIST_DROP_GROUP, useValue: undefined }], template: "<div class=\"x-list\" [class.x-list-portal]=\"inPortal()\" [ngClass]=\"classMap()\">\r\n  @if (header()) {\r\n    <div #headerRef class=\"x-list-header\" *xOutlet=\"header()\">{{ header() }}</div>\r\n  }\r\n  @if (selectAll() && multiple() === 0) {\r\n    <div #selectAllRef class=\"x-list-select-all\">\r\n      <x-list-option\r\n        [size]=\"size()\"\r\n        [label]=\"getSelectAllText()\"\r\n        [nodeStyle]=\"nodeStyle()\"\r\n        [checked]=\"true\"\r\n        [selected]=\"isSelectAll()\"\r\n        (click)=\"onSelectAllNodes()\"\r\n      ></x-list-option>\r\n    </div>\r\n  }\r\n  @if (virtualScroll()) {\r\n    <cdk-virtual-scroll-viewport\r\n      #virtualBody\r\n      [itemSize]=\"itemSize()\"\r\n      [minBufferPx]=\"minBufferPxSignal()\"\r\n      [maxBufferPx]=\"maxBufferPxSignal()\"\r\n      class=\"x-list-content\"\r\n      [style.height.px]=\"getVirtualScrollHeight()\"\r\n      [hidden]=\"isEmpty()\"\r\n    >\r\n      <x-list-option\r\n        *cdkVirtualFor=\"let node of nodes(); trackBy: trackByNode\"\r\n        [node]=\"node\"\r\n        [checked]=\"checked()\"\r\n        [nodeTpl]=\"nodeTpl()\"\r\n        [nodeStyle]=\"nodeStyle()\"\r\n        [groupTpl]=\"groupTpl()\"\r\n        [selected]=\"node.selected!\"\r\n        [groupable]=\"node.groupable!\"\r\n        [forbidden]=\"node.disabled!\"\r\n        [active]=\"node.active!\"\r\n        (activeChange)=\"node.active = $event\"\r\n        [openPortal]=\"node.openPortal!\"\r\n        [icon]=\"node.icon\"\r\n        [label]=\"node.label\"\r\n        [leaf]=\"node.leaf!\"\r\n        [divided]=\"node.divided!\"\r\n        [size]=\"size()\"\r\n        [keywordText]=\"keywordText()\"\r\n        [caseSensitive]=\"caseSensitive()\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n        (mouseenter)=\"onMouseenter($event, node)\"\r\n        (mouseleave)=\"onMouseleave($event, node)\"\r\n      ></x-list-option>\r\n    </cdk-virtual-scroll-viewport>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"listTpl; context: { $list: nodes() }\"></ng-container>\r\n  }\r\n\r\n  @if (loadMore() && !isEmpty()) {\r\n    <div #loadMoreRef class=\"x-list-load-more\">\r\n      <x-list-option\r\n        [size]=\"size()\"\r\n        [nodeTpl]=\"loadMoreTpl\"\r\n        [nodeStyle]=\"nodeStyle()\"\r\n        (click)=\"onLoadMore()\"\r\n      ></x-list-option>\r\n    </div>\r\n    <ng-template #loadMoreTpl>\r\n      @if (icon() && iconSpin()) {\r\n        <x-icon [type]=\"icon()\" [spin]=\"iconSpin()\"></x-icon>\r\n      }\r\n      {{ icon() && iconSpin() ? getLoadingMoreText() : getLoadMoreText() }}</ng-template\r\n    >\r\n  }\r\n  @if (isEmpty()) {\r\n    <x-empty></x-empty>\r\n  }\r\n  @if (footer()) {\r\n    <div #footerRef class=\"x-list-footer\" *xOutlet=\"footer()\">{{ footer() }}</div>\r\n  }\r\n</div>\r\n\r\n<ng-template #listTpl let-list=\"$list\">\r\n  <div\r\n    class=\"x-list-content\"\r\n    cdkDropList\r\n    (cdkDropListDropped)=\"dropCdk($event)\"\r\n    [cdkDropListDisabled]=\"!drag()\"\r\n    [hidden]=\"isEmpty()\"\r\n    [cdkDropListData]=\"list\"\r\n    [cdkDropListEnterPredicate]=\"predicate\"\r\n  >\r\n    @for (node of list; track node.id) {\r\n      <x-list-option\r\n        cdkDrag\r\n        [cdkDragDisabled]=\"node.disabled || node.groupable\"\r\n        [node]=\"node\"\r\n        [checked]=\"checked()\"\r\n        [nodeTpl]=\"nodeTpl()\"\r\n        [groupTpl]=\"groupTpl()\"\r\n        [nodeStyle]=\"nodeStyle()\"\r\n        [selected]=\"node.selected!\"\r\n        [groupable]=\"node.groupable!\"\r\n        [forbidden]=\"node.disabled!\"\r\n        [active]=\"node.active!\"\r\n        (activeChange)=\"node.active = $event\"\r\n        [openPortal]=\"node.openPortal!\"\r\n        [icon]=\"node.icon\"\r\n        [label]=\"node.label\"\r\n        [leaf]=\"node.leaf!\"\r\n        [divided]=\"node.divided!\"\r\n        [size]=\"size()\"\r\n        [keywordText]=\"keywordText()\"\r\n        [caseSensitive]=\"caseSensitive()\"\r\n        (click)=\"onNodeClick($event, node)\"\r\n        (mouseenter)=\"onMouseenter($event, node)\"\r\n        (mouseleave)=\"onMouseleave($event, node)\"\r\n      ></x-list-option>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-list{width:100%}x-list:focus{outline:none}.x-list{margin:0;padding:0}.x-list{width:100%}.x-list:focus{outline:none}.x-list-select-all{cursor:pointer;font-weight:700}.x-list-load-more{cursor:pointer}.x-list-content.cdk-drop-list-dragging x-list-option.cdk-drag-placeholder .x-list-option{border-color:var(--x-primary);color:var(--x-primary);background-color:var(--x-background);opacity:.8}.x-list-content.cdk-drop-list-dragging x-list-option:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}.x-list-header,.x-list-footer{font-weight:700}.x-list-portal{padding:.125rem .25rem}.x-list-portal x-list-option .x-list-option{padding:0 calc(var(--x-padding-medium) - .5rem);margin:.125rem 0;border-radius:var(--x-border-small-radius);transition:background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-portal x-list-option .x-list-option.x-list-divided{margin-top:.8125rem}.x-list-portal x-list-option .x-list-option.x-list-group{padding:0}.x-list-leaf,.x-list-checked{right:0;margin-left:.4rem;color:var(--x-text-400)}.x-list-icon>span x-icon{color:var(--x-text-300);margin-right:.25rem}.x-list>x-empty{margin:1rem;display:block}.x-list-group.x-list-big .x-list-option:not(.x-group){padding:0 var(--x-padding-big) 0 calc(var(--x-padding-big) * 2.5)}.x-list-group.x-list-large .x-list-option:not(.x-group){padding:0 var(--x-padding-large) 0 calc(var(--x-padding-large) * 2.5)}.x-list-group.x-list-medium .x-list-option:not(.x-group){padding:0 var(--x-padding-medium) 0 calc(var(--x-padding-medium) * 2.5)}.x-list-group.x-list-small .x-list-option:not(.x-group){padding:0 var(--x-padding-small) 0 calc(var(--x-padding-small) * 2.5)}.x-list-group.x-list-mini .x-list-option:not(.x-group){padding:0 var(--x-padding-mini) 0 calc(var(--x-padding-mini) * 2.5)}.x-list-big .x-list-header,.x-list-big .x-list-footer,.x-list-big .x-list-option{padding:0 var(--x-padding-big);height:var(--x-height-big);line-height:var(--x-height-big)}.x-list-large .x-list-header,.x-list-large .x-list-footer,.x-list-large .x-list-option{padding:0 var(--x-padding-large);height:var(--x-height-large);line-height:var(--x-height-large)}.x-list-medium .x-list-header,.x-list-medium .x-list-footer,.x-list-medium .x-list-option{padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-list-small .x-list-header,.x-list-small .x-list-footer,.x-list-small .x-list-option{padding:0 var(--x-padding-small);height:var(--x-height-small);line-height:var(--x-height-small)}.x-list-mini .x-list-header,.x-list-mini .x-list-footer,.x-list-mini .x-list-option{padding:0 var(--x-padding-mini);height:var(--x-height-mini);line-height:var(--x-height-mini)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{
                 type: ViewChildren,
                 args: [XListOptionComponent]